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

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

function App() {
  const treeData = [
    {
      key: 'react',
      title: 'React',
      children: [
        { key: 'hooks', title: 'Hooks' },
        { key: 'components', title: 'Components' },
      ],
    },
  ]

  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" />
      <TreeSelect
        treeData={treeData}
        placeholder="Select technology"
        label="Technology"
        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 { Segmented } from 'its-just-ui'

// Basic usage
const options = [
  { label: 'List', value: 'list' },
  { label: 'Grid', value: 'grid' },
  { label: 'Chart', value: 'chart' },
]

<Segmented
  value={view}
  onChange={setView}
  options={options}
/>

// With icons
const iconOptions = [
  { label: 'List', value: 'list', icon: <ListIcon /> },
  { label: 'Grid', value: 'grid', icon: <GridIcon /> },
  { label: 'Chart', value: 'chart', icon: <ChartIcon /> },
]

<Segmented
  options={iconOptions}
  variant="outline"
  size="lg"
/>

// Vertical layout
<Segmented
  options={options}
  direction="vertical"
  fullWidth
/>

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

// Basic tree select
const [value, setValue] = useState()
const treeData = [
  {
    key: '1',
    title: 'Parent 1',
    children: [
      { key: '1-1', title: 'Child 1-1' },
      { key: '1-2', title: 'Child 1-2' }
    ]
  }
]

<TreeSelect
  value={value}
  onChange={setValue}
  treeData={treeData}
  placeholder="Select from tree"
/>

// Multiple selection with checkboxes
<TreeSelect
  mode="multiple"
  checkable
  value={values}
  onChange={setValues}
  treeData={treeData}
  placeholder="Select multiple items"
  checkStrategy="SHOW_CHILD"
/>

// Searchable tree select
<TreeSelect
  searchable
  value={value}
  onChange={setValue}
  treeData={treeData}
  placeholder="Search and select..."
  filterTreeNode={(input, node) =>
    node.title.toLowerCase().includes(input.toLowerCase())
  }
/>

// Inline tree (no popup)
<TreeSelect
  inline
  variant="inline-tree"
  treeData={treeData}
  defaultExpandedKeys={['1', '2']}
/>

// Async loading
<TreeSelect
  treeData={treeData}
  loadData={async (node) => {
    const children = await fetchChildren(node.key)
    node.children = children
  }}
  placeholder="Load children dynamically"
/>

// Custom node rendering
<TreeSelect
  treeData={treeData}
  renderNode={(node, { selected, level }) => (
    <div className={`custom-node level-${level}`}>
      <span className={selected ? 'selected' : ''}>{node.title}</span>
      {node.badge && <span className="badge">{node.badge}</span>}
    </div>
  )}
/>

// Compound components
<TreeSelect treeData={treeData}>
  <TreeSelect.Input placeholder="Custom search..." />
  <TreeSelect.Popup>
    <div className="custom-header">Select items:</div>
    {/* Tree nodes rendered automatically */}
  </TreeSelect.Popup>
</TreeSelect>

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

// Basic color picker
<ColorPicker
  value={color}
  onChange={(value, colorData) => {
    setColor(value)
    console.log('Color data:', colorData)
  }}
/>

// Different variants
<ColorPicker value={color} onChange={setColor} variant="inline" />
<ColorPicker value={color} onChange={setColor} variant="popover" />
<ColorPicker value={color} onChange={setColor} variant="minimal" />

// Without alpha channel
<ColorPicker
  value={color}
  onChange={setColor}
  allowAlpha={false}
  defaultFormat="rgb"
/>

// Custom preset colors
<ColorPicker
  value={color}
  onChange={setColor}
  presetColors={[
    { value: '#FF6B6B', label: 'Coral' },
    { value: '#4ECDC4', label: 'Turquoise' },
    { value: '#45B7D1', label: 'Sky Blue' },
  ]}
/>

// Custom styling
<ColorPicker
  value={color}
  onChange={setColor}
  swatchShape="circle"
  borderRadius="12px"
  popoverBackgroundColor="#f3f4f6"
/>

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

// Basic upload
const [files, setFiles] = useState<File[]>([])

<Upload
  files={files}
  onChange={setFiles}
  accept="image/*"
  multiple
  maxFiles={5}
  maxSize={5 * 1024 * 1024} // 5MB
/>

// With custom dropzone
<Upload files={files} onChange={setFiles}>
  <Upload.Dropzone className="custom-dropzone">
    <MyCustomDropzoneContent />
  </Upload.Dropzone>
  <Upload.FileList />
</Upload>

// Async upload with progress
<Upload
  files={files}
  onChange={setFiles}
  onUploadStart={(file) => startUpload(file)}
  onUploadProgress={(file, progress) => updateProgress(file, progress)}
  onUploadComplete={(file) => completeUpload(file)}
/>

// Form integration
<Upload
  files={files}
  onChange={setFiles}
  label="Upload Documents"
  required
  helperText="PDF or Word documents only"
  accept=".pdf,.doc,.docx"
/>

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

// Single date picker
const [date, setDate] = useState<Date>()
<DatePicker
  value={date}
  onChange={setDate}
  label="Select Date"
  placeholder="Choose a date"
/>

// Date range picker
const [range, setRange] = useState<DateRange>()
<DatePicker
  mode="range"
  value={range}
  onChange={setRange}
  label="Select Date Range"
  placeholder="Choose start and end dates"
/>

// Multiple date selection
const [dates, setDates] = useState<Date[]>([])
<DatePicker
  mode="multiple"
  value={dates}
  onChange={setDates}
  label="Select Multiple Dates"
  placeholder="Choose multiple dates"
  closeOnSelect={false}
/>

// Inline calendar
<DatePicker
  inline
  variant="inline-calendar"
  label="Inline Calendar"
/>

// With date restrictions
<DatePicker
  minDate={new Date()}
  maxDate={new Date(2025, 11, 31)}
  disabledDates={{
    days: [0, 6], // Disable weekends
    dates: [new Date(2024, 11, 25)] // Disable Christmas
  }}
  label="Business Days Only"
/>

// Custom day renderer
<DatePicker
  renderDay={(date, isSelected, isDisabled, isToday, isInRange) => (
    <div className={`custom-day ${isSelected ? 'selected' : ''}`}>
      {date.getDate()}
    </div>
  )}
  label="Custom Styled"
/>

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 { Carousel, CarouselSlide } from 'its-just-ui'

// Basic carousel
<Carousel height="400px" width="600px">
  <CarouselSlide>
    <img src="/image1.jpg" alt="Slide 1" />
  </CarouselSlide>
  <CarouselSlide>
    <img src="/image2.jpg" alt="Slide 2" />
  </CarouselSlide>
</Carousel>

// With autoplay and fade effect
<Carousel
  variant="fade"
  autoplay
  autoplayInterval={3000}
  loop
  pauseOnHover
>
  <CarouselSlide>Content 1</CarouselSlide>
  <CarouselSlide>Content 2</CarouselSlide>
</Carousel>

// Advanced variants
<Carousel variant="zoom">...</Carousel>
<Carousel variant="stacked">...</Carousel>
<Carousel variant="coverflow">...</Carousel>

// Controlled mode
<Carousel
  currentIndex={currentIndex}
  onSlideChange={setCurrentIndex}
>
  {slides}
</Carousel>

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,
  TreeSelectProps,
  TreeNode,
  TreeSelectValue,
  CheckStrategy,
} 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' },
]

// Typed tree data
const treeData: TreeNode[] = [
  {
    key: 'engineering',
    title: 'Engineering',
    children: [
      { key: 'frontend', title: 'Frontend Team' },
      { key: 'backend', title: 'Backend Team' },
    ],
  },
]

// Typed tree select handler
const handleTreeChange = (value: TreeSelectValue | TreeSelectValue[] | undefined) => {
  console.log('Selected:', value)
}

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'))