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

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

function App() {
  return (
    <Card className="p-6 max-w-md mx-auto">
      <h2 className="text-2xl font-bold mb-4">Welcome to its-just-ui</h2>
      <Input placeholder="Enter your name" label="Name" className="mb-4" />
      <Checkbox label="I agree to the terms and conditions" className="mb-4" />
      <Progress value={75} className="mb-4" />
      <Button variant="primary" className="w-full">
        Get Started
      </Button>
    </Card>
  )
}

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

// Variants
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="destructive">Destructive Button</Button>
<Button variant="link">Link Button</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// States
<Button loading>Loading...</Button>
<Button disabled>Disabled</Button>
<Button fullWidth>Full Width</Button>

// With Icons
<Button icon={<SearchIcon />}>Search</Button>
<Button rightIcon={<ArrowRightIcon />}>Next</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 size="sm">Action</Button>
  </Card.Footer>
</Card>

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

// Basic input
<Input placeholder="Enter text" />

// With label and helper text
<Input
  label="Email"
  type="email"
  placeholder="you@example.com"
  helperText="We'll never share your email"
/>

// With validation
<Input
  label="Password"
  type="password"
  required
  error
  errorMessage="Password must be at least 8 characters"
/>

// With icons
<Input
  placeholder="Search..."
  leftIcon={<SearchIcon />}
  rightIcon={<ClearIcon />}
/>

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

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

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

// Checkbox group
<Checkbox.Group label="Select options">
  <Checkbox.SelectAll />
  <Checkbox.Item value="option1" label="Option 1" />
  <Checkbox.Item value="option2" label="Option 2" />
  <Checkbox.Item value="option3" label="Option 3" />
</Checkbox.Group>

// Custom styling
<Checkbox
  variant="filled"
  size="lg"
  checkedBackgroundColor="#10b981"
  label="Custom styled"
/>

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

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

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

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

// Indeterminate
<Progress isIndeterminate />

// With 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={setValue}
  min={0}
  max={100}
/>

// Range slider
<Slider
  value={[25, 75]}
  onValueChange={setRange}
/>

// With marks
<Slider
  value={[50]}
  marks={[
    { value: 0, label: '0%' },
    { value: 50, label: '50%' },
    { value: 100, label: '100%' }
  ]}
/>

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

// Basic navigation
<Anchor targetIds={['intro', 'features', 'pricing']}>
  <Anchor.Link href="#intro">Introduction</Anchor.Link>
  <Anchor.Link href="#features">Features</Anchor.Link>
  <Anchor.Link href="#pricing">Pricing</Anchor.Link>
</Anchor>

// With groups and indicator
<Anchor variant="side-border" scrollSpy hashSync>
  <Anchor.Indicator />
  <Anchor.Group title="Getting Started">
    <Anchor.Link href="#intro">Introduction</Anchor.Link>
    <Anchor.Link href="#install">Installation</Anchor.Link>
  </Anchor.Group>
  <Anchor.Group title="Components">
    <Anchor.Link href="#button">Button</Anchor.Link>
    <Anchor.Link href="#input">Input</Anchor.Link>
  </Anchor.Group>
</Anchor>

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 { Pagination } from 'its-just-ui'

;<Pagination
  currentPage={currentPage}
  totalPages={100}
  onPageChange={setCurrentPage}
  showPageNumbers
  showPageSizeSelector
  pageSizeOptions={[10, 20, 50, 100]}
/>

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

;<ToggleButtons value={['bold']} onValueChange={setFormats}>
  <ToggleButtons.Item value="bold">B</ToggleButtons.Item>
  <ToggleButtons.Item value="italic">I</ToggleButtons.Item>
  <ToggleButtons.Item value="underline">U</ToggleButtons.Item>
</ToggleButtons>

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

// Basic select
<Select
  options={options}
  placeholder="Select option"
  onChange={setSelected}
/>

// Multi-select with search
<Select
  options={options}
  multiple
  searchable
  clearable
  placeholder="Select multiple"
/>

// Grouped options
<Select
  options={groupedOptions}
  grouped
  renderGroup={(group) => <div className="font-bold">{group.label}</div>}
/>

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

;<Autocomplete
  options={options}
  searchable
  async
  onSearch={handleSearch}
  onSelect={handleSelect}
  placeholder="Search..."
/>

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

;<RadioGroup value={value} onChange={setValue}>
  <RadioGroup.Item value="1" label="Option 1" />
  <RadioGroup.Item value="2" label="Option 2" />
  <RadioGroup.Item value="3" label="Option 3" />
</RadioGroup>

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

;<Switch checked={enabled} onCheckedChange={setEnabled} label="Enable notifications" size="lg" />

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

;<Rating value={rating} onChange={setRating} precision={0.5} size="lg" showValue />

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

;<Cascade
  options={locationOptions}
  placeholder="Select location"
  onChange={setLocation}
  searchable
  showPath
/>

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

;<Table
  data={users}
  columns={columns}
  variant="striped"
  selectionMode="multiple"
  enableSorting
  enableFiltering
  enablePagination
/>

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>

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

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

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

;<Avatar src="/user.jpg" alt="John Doe" size="lg" status="online" fallback="JD" />

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

;<Chip variant="primary" closable onClose={handleClose}>
  React
</Chip>

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

;<Alert variant="success" dismissible>
  <Alert.Title>Success!</Alert.Title>
  <Alert.Description>Your changes have been saved.</Alert.Description>
</Alert>

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

<Skeleton variant="text" lines={3} />
<Skeleton variant="rectangular" width="100%" height="200px" />
<Skeleton variant="circular" width="40px" height="40px" />

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

;<Tooltip content="Helpful information" placement="top">
  <Button>Hover me</Button>
</Tooltip>

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

;<Accordion type="single" collapsible>
  <Accordion.Item value="1">
    <Accordion.Trigger>Question 1</Accordion.Trigger>
    <Accordion.Content>Answer 1</Accordion.Content>
  </Accordion.Item>
</Accordion>

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

;<Dialog>
  <Dialog.Trigger asChild>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Confirm Action</Dialog.Title>
      <Dialog.Description>Are you sure you want to continue?</Dialog.Description>
    </Dialog.Header>
  </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>Settings</Drawer.Title>
    </Drawer.Header>
  </Drawer.Content>
</Drawer>

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

;<Stepper activeStep={1} orientation="horizontal">
  <Stepper.Step label="Account" description="Create account" />
  <Stepper.Step label="Profile" description="Setup profile" />
  <Stepper.Step label="Complete" description="Finish setup" />
</Stepper>

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

;<Splitter direction="horizontal" initialSizes={[30, 70]}>
  <Splitter.Pane index={0}>Left Panel</Splitter.Pane>
  <Splitter.Handle index={0} />
  <Splitter.Pane index={1}>Right Panel</Splitter.Pane>
</Splitter>

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

;<Popover trigger="hover">
  <Popover.Trigger>Hover for info</Popover.Trigger>
  <Popover.Content>
    <Popover.Arrow />
    <Popover.Title>Information</Popover.Title>
    <Popover.Description>Additional details appear here.</Popover.Description>
  </Popover.Content>
</Popover>

<Button
  backgroundColor="#10b981"
  hoverBackgroundColor="#059669"
  borderRadius="12px"
  padding="12px 24px"
  fontSize="18px"
>
  Custom Styled Button
</Button>

import type {
  ButtonProps,
  CheckboxProps,
  InputProps,
  SelectOption,
  TableColumn,
  AnchorProps,
  PopoverProps,
  ProgressSegment,
  SliderMark,
} from 'its-just-ui'

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

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

interface CustomButtonProps extends ButtonProps {
  customProp?: string
}

const CustomButton: React.FC<CustomButtonProps> = ({ customProp, ...props }) => {
  return <Button {...props} />
}

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

// Or import from specific entry points
import Button from 'its-just-ui/Button'
import Input from 'its-just-ui/Input'

const Dialog = lazy(() => import('its-just-ui/Dialog'))
const Table = lazy(() => import('its-just-ui/Table'))