Accordion

'use client'

import React, { useState } from 'react'
import { Stack, Text, Toggle, Icon, Accordion } from 'biibaos'
import { Plus, X, Zap } from 'lucide-react'

export default function App() {
  const [activeItems, setActiveItems] = useState<string[]>(['item-1'])
  const [multiple, setMultiple] = useState(false)

  return (
    <Stack direction="column" gap={24} fullWidth>
      <Stack direction="row" gap={12} align="center">
        <Text variant="body-sm" color="muted">Allow Multiple Expansion:</Text>
        <Toggle checked={multiple} onChange={setMultiple} size="sm" />
      </Stack>

      <Accordion
        allowMultiple={multiple}
        value={activeItems}
        onChange={setActiveItems}
        variant="bordered"
        items={[
          {
            id: 'item-1',
            title: 'How do I upgrade my plan?',
            icon: <Icon icon={Zap} size={16} />,
            children: 'You can upgrade your plan at any time from your dashboard settings. Upgrades take effect immediately.'
          },
          {
            id: 'item-2',
            title: 'Can I cancel my subscription?',
            icon: <Icon icon={X} size={16} />,
            children: 'Yes, subscriptions can be cancelled through the billing portal. You will retain access until the end of your current period.'
          },
          {
            id: 'item-3',
            title: 'Is there a free trial available?',
            icon: <Icon icon={Plus} size={16} />,
            children: 'We offer a 14-day free trial for all new teams. No credit card is required to get started.'
          }
        ]}
      />

      <div style={{ padding: '12px 16px', background: 'var(--biiba-surface)', borderRadius: 12 }}>
        <Text size="xs" color="muted" weight="bold">Active Section IDs: {activeItems.join(', ') || 'None'}</Text>
      </div>
    </Stack>
  )
}

'use client'

import React from 'react'
import { Stack, Accordion } from 'biibaos'

export default function App() {
  return (
    <Stack direction="column" gap={16} fullWidth>
            <Accordion
              variant="default"
              items={[{ title: 'Default Style', children: 'Standard card-like appearance.' }]}
            />
            <Accordion
              variant="ghost"
              items={[{ title: 'Ghost Style', children: 'Minimal and integrated.' }]}
            />
          </Stack>
  )
}