Button Group

'use client'

import React from 'react'
import { ButtonGroup, Button, Stack, Icon } from 'biibaos'
import { Plus, Settings, X } from 'lucide-react'

export default function App() {
  return (
    <Stack direction="column" gap={20}>
      <ButtonGroup>
        <Button>Left</Button>
        <Button>Middle</Button>
        <Button>Right</Button>
      </ButtonGroup>
      
      <ButtonGroup>
        <Button leftIcon={<Icon icon={Plus} size={14} />}>Add</Button>
        <Button leftIcon={<Icon icon={Settings} size={14} />}>Edit</Button>
        <Button variant="danger" leftIcon={<Icon icon={X} size={14} />}>Delete</Button>
      </ButtonGroup>
    </Stack>
  )
}

'use client'

import React from 'react'
import { ButtonGroup, Button, Icon } from 'biibaos'
import { Plus, Settings, Search } from 'lucide-react'

export default function VerticalToolbar() {
  return (
    <ButtonGroup vertical>
      <Button iconOnly variant="ghost" leftIcon={<Icon icon={Plus} size={16} />} />
      <Button iconOnly variant="ghost" leftIcon={<Icon icon={Settings} size={16} />} />
      <Button iconOnly variant="ghost" leftIcon={<Icon icon={Search} size={16} />} />
    </ButtonGroup>
  )
}

'use client'

import React from 'react'
import { ButtonGroup, Button, Icon } from 'biibaos'
import { User, Bell, CreditCard, X } from 'lucide-react'

export default function VerticalActions() {
  return (
    <div style={{ width: 240 }}>
      <ButtonGroup vertical>
        <Button variant="secondary" leftIcon={<Icon icon={User} size={16} />}>Account Settings</Button>
        <Button variant="secondary" leftIcon={<Icon icon={Bell} size={16} />}>Notification Prefs</Button>
        <Button variant="secondary" leftIcon={<Icon icon={CreditCard} size={16} />}>Billing & Plans</Button>
        <Button variant="danger" leftIcon={<Icon icon={X} size={16} />}>Deactivate Account</Button>
      </ButtonGroup>
    </div>
  )
}

'use client'

import React from 'react'
import { ButtonGroup, Button, Stack } from 'biibaos'

export default function AttachedVariants() {
  return (
    <Stack direction="column" gap={20}>
      <ButtonGroup attached={false}>
        <Button variant="secondary">Cancel</Button>
        <Button variant="secondary">Reset</Button>
        <Button variant="primary">Save Changes</Button>
      </ButtonGroup>
      <ButtonGroup attached={true}>
        <Button variant="secondary">Cancel</Button>
        <Button variant="secondary">Reset</Button>
        <Button variant="primary">Save Changes</Button>
      </ButtonGroup>
    </Stack>
  )
}

'use client'

import { ButtonGroup, Button, Icon } from 'biibaos'
import { LayoutGrid, List, Table } from 'lucide-react'
import { useState } from 'react'

export default function ViewSwitcher() {
  const [view, setView] = useState('grid')

  return (
    <ButtonGroup>
      <Button 
        variant={view === 'grid' ? 'primary' : 'secondary'}
        onClick={() => setView('grid')}
        iconOnly
        leftIcon={<Icon icon={LayoutGrid} />}
        aria-label="Grid view"
      />
      <Button 
        variant={view === 'list' ? 'primary' : 'secondary'}
        onClick={() => setView('list')}
        iconOnly
        leftIcon={<Icon icon={List} />}
        aria-label="List view"
      />
      <Button 
        variant={view === 'table' ? 'primary' : 'secondary'}
        onClick={() => setView('table')}
        iconOnly
        leftIcon={<Icon icon={Table} />}
        aria-label="Table view"
      />
    </ButtonGroup>
  )
}