// main.tsx or App.tsx
import 'its-just-ui/dist/styles.css'

import { Button, Card, Input, Checkbox } from 'its-just-ui'

function App() {
  return (
    <Card>
      <h2>Welcome to its-just-ui</h2>
      <Input placeholder="Enter your name" />
      <Checkbox label="I agree to the terms" />
      <Button variant="primary">Get Started</Button>
    </Card>
  )
}

import { Accordion } from 'its-just-ui'
;<Accordion type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
    <Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Is it styled?</Accordion.Trigger>
    <Accordion.Content>
      Yes. It's styled with Tailwind CSS and fully customizable.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

import { Alert } from 'its-just-ui'
;<Alert variant="success" dismissible>
  <Alert.Title>Success!</Alert.Title>
  <Alert.Description>Your changes have been saved successfully.</Alert.Description>
</Alert>

import { Autocomplete } from 'its-just-ui'

const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' }
]

<Autocomplete
  options={options}
  placeholder="Search fruits..."
  searchable
  onSelect={(item) => console.log(item)}
/>

import { Avatar } from 'its-just-ui'
;<Avatar src="/user.jpg" alt="John Doe" size="lg" status="online" fallback="JD" />

import { Badge } from 'its-just-ui'

<Badge variant="success" size="md">Active</Badge>
<Badge variant="warning" size="sm" closable>Pending</Badge>
<Badge variant="error" rounded>Failed</Badge>

import { Breadcrumb } from 'its-just-ui'
;<Breadcrumb>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/products">Products</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item isCurrentPage>
    <Breadcrumb.Link>Current Product</Breadcrumb.Link>
  </Breadcrumb.Item>
</Breadcrumb>

import { Button } from 'its-just-ui'

<Button variant="primary" size="md">Primary Button</Button>
<Button variant="secondary" size="sm" icon={<Icon />}>With Icon</Button>
<Button variant="outline" disabled>Disabled</Button>
<Button variant="ghost" loading>Loading...</Button>

import { Card } from 'its-just-ui'
;<Card variant="elevated" selectable>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card description goes here</Card.Description>
  </Card.Header>
  <Card.Body>
    <p>Main content of the card</p>
  </Card.Body>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card>

import { Checkbox } from 'its-just-ui'

// Basic checkbox
<Checkbox label="Accept terms and conditions" />

// Controlled checkbox
const [checked, setChecked] = useState(false)
<Checkbox
  checked={checked}
  onChange={setChecked}
  label="Subscribe to newsletter"
/>

// Tri-state checkbox
<Checkbox
  indeterminate={true}
  label="Select all items"
/>

// Checkbox group with select all
<Checkbox.Group label="Select features" value={selectedFeatures} onChange={setSelectedFeatures}>
  <Checkbox.SelectAll />
  <Checkbox.Item value="feature1" label="Feature 1" />
  <Checkbox.Item value="feature2" label="Feature 2" />
  <Checkbox.Item value="feature3" label="Feature 3" />
</Checkbox.Group>

<Checkbox
  label="Custom styled checkbox"
  variant="filled"
  size="lg"
  checkedBackgroundColor="#10b981"
  borderRadius="8px"
  focusRingColor="#10b981"
  labelTextSize="18px"
  labelTextColor="#059669"
  helperText="With extensive customization options"
/>

import { Chip } from 'its-just-ui'

<Chip variant="default">Default Chip</Chip>
<Chip variant="primary" closable onClose={() => console.log('closed')}>
  Removable
</Chip>
<Chip variant="success" icon={<CheckIcon />}>
  With Icon
</Chip>

import { Dialog } from 'its-just-ui'
;<Dialog>
  <Dialog.Trigger asChild>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Are you sure?</Dialog.Title>
      <Dialog.Description>This action cannot be undone.</Dialog.Description>
    </Dialog.Header>
    <div className="flex gap-2 justify-end">
      <Button variant="outline">Cancel</Button>
      <Button variant="primary">Confirm</Button>
    </div>
  </Dialog.Content>
</Dialog>

import { Drawer } from 'its-just-ui'
;<Drawer>
  <Drawer.Trigger asChild>
    <Button>Open Drawer</Button>
  </Drawer.Trigger>
  <Drawer.Content position="right" size="md">
    <Drawer.Header>
      <Drawer.Title>Drawer Title</Drawer.Title>
    </Drawer.Header>
    <div className="p-4">Drawer content goes here</div>
  </Drawer.Content>
</Drawer>

import { Input } from 'its-just-ui'

<Input placeholder="Enter your email" type="email" />
<Input
  label="Password"
  type="password"
  required
  helperText="Must be at least 8 characters"
/>
<Input
  label="Username"
  error
  errorMessage="Username is required"
/>

import { List } from 'its-just-ui'
;<List selectable>
  <List.Item>
    <List.ItemIcon>
      <UserIcon />
    </List.ItemIcon>
    <List.ItemText primary="John Doe" secondary="john@example.com" />
  </List.Item>
  <List.Item>
    <List.ItemIcon>
      <EmailIcon />
    </List.ItemIcon>
    <List.ItemText primary="jane@example.com" />
  </List.Item>
</List>

import { Pagination } from 'its-just-ui'
;<Pagination
  currentPage={currentPage}
  totalPages={totalPages}
  onPageChange={setCurrentPage}
  showPageNumbers
  showPageSizeSelector
  showTotalCount
/>

import { RadioGroup } from 'its-just-ui'
;<RadioGroup defaultValue="option1" orientation="vertical">
  <RadioGroup.Item value="option1" label="Option 1" />
  <RadioGroup.Item value="option2" label="Option 2" />
  <RadioGroup.Item value="option3" label="Option 3" disabled />
</RadioGroup>

import { Rating } from 'its-just-ui'
;<Rating value={rating} onChange={setRating} precision={0.5} size="lg" readOnly={false} />

import { Select } from 'its-just-ui'

const options = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' }
]

<Select
  options={options}
  placeholder="Select a framework"
  searchable
  clearable
  onChange={(value) => console.log(value)}
/>

// Multi-select
<Select
  options={options}
  multiple
  searchable
  placeholder="Select frameworks"
/>

import { Skeleton } from 'its-just-ui'
;<div className="space-y-4">
  <Skeleton variant="rectangular" width="100%" height="200px" />
  <Skeleton variant="text" lines={3} />
  <Skeleton variant="circular" width="40px" height="40px" />
</div>

import { Stepper } from 'its-just-ui'

const steps = [
  { label: 'Account Details', description: 'Enter your information' },
  { label: 'Verification', description: 'Verify your email' },
  { label: 'Complete', description: 'Finish setup' }
]

<Stepper activeStep={1} orientation="horizontal">
  {steps.map((step, index) => (
    <Stepper.Step key={index} {...step} />
  ))}
</Stepper>

import { Switch } from 'its-just-ui'
;<Switch
  checked={isEnabled}
  onCheckedChange={setIsEnabled}
  label="Enable notifications"
  size="lg"
/>

import { Table } from 'its-just-ui'

const columns = [
  { id: 'name', header: 'Name', accessorKey: 'name', sortable: true },
  { id: 'email', header: 'Email', accessorKey: 'email', filterable: true },
  { id: 'role', header: 'Role', accessorKey: 'role' },
  {
    id: 'status',
    header: 'Status',
    accessorKey: 'status',
    cell: ({ value }) => <Badge variant={value === 'active' ? 'success' : 'error'}>{value}</Badge>
  }
]

<Table
  data={users}
  columns={columns}
  variant="striped"
  selectionMode="multiple"
  enableSorting
  enableFiltering
  enablePagination
  pagination={{ pageSize: 10 }}
/>

import { ToggleButtons } from 'its-just-ui'
;<ToggleButtons>
  <ToggleButtons.Item value="bold" aria-label="Bold">
    <BoldIcon />
  </ToggleButtons.Item>
  <ToggleButtons.Item value="italic" aria-label="Italic">
    <ItalicIcon />
  </ToggleButtons.Item>
  <ToggleButtons.Item value="underline" aria-label="Underline">
    <UnderlineIcon />
  </ToggleButtons.Item>
</ToggleButtons>

import { Progress } from 'its-just-ui'

// Basic progress
<Progress value={65} />

// Indeterminate loading
<Progress isIndeterminate />

// Circular progress
<Progress value={75} variant="circular" size="lg" />

// Multi-segment progress
<Progress
  segments={[
    { id: 'task1', value: 30, color: '#10b981', label: 'Task 1' },
    { id: 'task2', value: 25, color: '#3b82f6', label: 'Task 2' },
    { id: 'task3', value: 20, color: '#f59e0b', label: 'Task 3' }
  ]}
/>

// With thresholds
<Progress
  value={85}
  thresholds={[
    { value: 25, color: '#10b981', label: 'Good start' },
    { value: 50, color: '#3b82f6', label: 'Halfway there' },
    { value: 75, color: '#f59e0b', label: 'Almost done' },
    { value: 90, color: '#ef4444', label: 'Critical level' }
  ]}
/>

// Compound components
<Progress value={75}>
  <Progress.Track />
  <Progress.Bar />
  <Progress.Label>Upload Progress</Progress.Label>
  <Progress.ValueDescription>75% Complete</Progress.ValueDescription>
</Progress>

import { Slider } from 'its-just-ui'

// Basic slider
<Slider
  value={[50]}
  onValueChange={([value]) => console.log(value)}
  min={0}
  max={100}
  step={1}
/>

// Range slider
<Slider
  value={[25, 75]}
  onValueChange={([min, max]) => console.log(min, max)}
  min={0}
  max={100}
  step={5}
/>

// With marks and labels
<Slider
  value={[50]}
  min={0}
  max={100}
  step={25}
  marks={[
    { value: 0, label: '0%' },
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' }
  ]}
/>

// Custom styling
<Slider
  value={[30]}
  min={0}
  max={100}
  trackColor="#e5e7eb"
  thumbColor="#3b82f6"
  activeTrackColor="#dbeafe"
  height="8px"
  thumbSize="20px"
/>

import { Tooltip } from 'its-just-ui'

<Tooltip content="This is a helpful tooltip" placement="top">
  <Button>Hover me</Button>
</Tooltip>

// Advanced usage
<Tooltip
  content="Custom tooltip content"
  placement="bottom-start"
  variant="dark"
  delayOpen={500}
  offsetX={10}
  offsetY={5}
>
  <span>Hover for info</span>
</Tooltip>

<Button
  variant="primary"
  backgroundColor="#10b981"
  hoverBackgroundColor="#059669"
  borderRadius="12px"
  padding="12px 24px"
>
  Custom Button
</Button>

<Checkbox
  variant="filled"
  checkedBackgroundColor="#8b5cf6"
  focusRingColor="#8b5cf6"
  labelTextColor="#6b21a8"
  borderRadius="6px"
/>

import type { ButtonProps, CheckboxProps, TableColumn, SelectOption } from 'its-just-ui'

// Custom button component
const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />
}

// Typed table columns
const columns: TableColumn<User>[] = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    cell: ({ row }) => (
      <span>
        {row.firstName} {row.lastName}
      </span>
    ),
  },
]

// Typed select options
const options: SelectOption[] = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
]

// Import only what you need
import { Button, Checkbox, Progress, Slider } from 'its-just-ui'

// Or import from specific modules
import { Button } from 'its-just-ui/Button'
import { Checkbox } from 'its-just-ui/Checkbox'
import { Progress } from 'its-just-ui/Progress'
import { Slider } from 'its-just-ui/Slider'