Accordion

lunar add accordio

import {
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from '@/components/ui/accordion';

import { useState } from 'react';
 
export function AccordionDemo() {
const [value, setValue] = useState<string>('');
 
return (
  <Accordion
    type="single"
    value={value}
    onValueChange={setValue}
    collapsible
  >
    <AccordionItem value="item-1">
      <AccordionTrigger>Is it accessible?</AccordionTrigger>
      <AccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </AccordionContent>
    </AccordionItem>
 
    <AccordionItem value="item-2">
      <AccordionTrigger>Is it styled?</AccordionTrigger>
      <AccordionContent>
        Yes. It comes with default styles that match your theme.
      </AccordionContent>
    </AccordionItem>
 
    <AccordionItem value="item-3">
      <AccordionTrigger>Is it animated?</AccordionTrigger>
      <AccordionContent>
        Yes. It uses react-native-reanimated for smooth animations.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);
}

export function AccordionMultiple() {
const [values, setValues] = useState<string[]>([]);
 
return (
  <Accordion
    type="multiple"
    value={values}
    onValueChange={setValues}
  >
    <AccordionItem value="item-1">
      <AccordionTrigger>Section 1</AccordionTrigger>
      <AccordionContent>
        Content for section 1.
      </AccordionContent>
    </AccordionItem>
 
    <AccordionItem value="item-2">
      <AccordionTrigger>Section 2</AccordionTrigger>
      <AccordionContent>
        Content for section 2.
      </AccordionContent>
    </AccordionItem>
  </Accordion>
);
}

// Default - with border
<Accordion variant="default" {...props}>
{/* items */}
</Accordion>
 
// Bordered - thicker border
<Accordion variant="bordered" {...props}>
{/* items */}
</Accordion>
 
// Separated - items visually separated
<Accordion variant="separated" {...props}>
{/* items */}
</Accordion>
 
// Filled - muted background
<Accordion variant="filled" {...props}>
{/* items */}
</Accordion>
 
// Ghost - no background or border
<Accordion variant="ghost" {...props}>
{/* items */}
</Accordion>

<Accordion type="single" value={value} onValueChange={setValue}>
<AccordionItem value="item-1">
  <AccordionTrigger>Active Item</AccordionTrigger>
  <AccordionContent>This item can be opened.</AccordionContent>
</AccordionItem>
 
<AccordionItem value="item-2" disabled>
  <AccordionTrigger>Disabled Item</AccordionTrigger>
  <AccordionContent>This item cannot be opened.</AccordionContent>
</AccordionItem>
</Accordion>

const [value, setValue] = useState<string>('item-1');
 
<Accordion type="single" value={value} onValueChange={setValue}>
<AccordionItem value="item-1">
  <AccordionTrigger>Open by Default</AccordionTrigger>
  <AccordionContent>This item is open by default.</AccordionContent>
</AccordionItem>
</Accordion>

<Accordion type="single" value={value} onValueChange={setValue} collapsible>
<AccordionItem value="settings">
  <AccordionTrigger>Settings</AccordionTrigger>
  <AccordionContent>
    <View className="gap-4">
      <View className="flex-row justify-between items-center">
        <Text>Notifications</Text>
        <Switch value={notifications} onValueChange={setNotifications} />
      </View>
      <View className="flex-row justify-between items-center">
        <Text>Dark Mode</Text>
        <Switch value={darkMode} onValueChange={setDarkMode} />
      </View>
      <Button onPress={saveSettings}>Save Changes</Button>
    </View>
  </AccordionContent>
</AccordionItem>
</Accordion>