@atxp/design-system 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,901 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+export { Activity, AlertCircle, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Award, BarChart, BarChart2, Battery, BatteryCharging, BatteryFull, BatteryLow, Bell, BellOff, Bluetooth, BookOpen, Bookmark, Bug, Building, Building2, Calendar, CalendarCheck, CalendarDays, CalendarMinus, CalendarPlus, CalendarX, Camera, CameraOff, Check, CheckCircle, CheckCircle2, CheckCircle as CheckWaves, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Clock, Cloud, CloudDrizzle, CloudLightning, CloudRain, CloudSnow, Code, Code2, Cog, Columns, Compass, Copy, Cpu, CreditCard, Database, DollarSign, MoreHorizontal as Dots, Download, Edit, Edit2, Edit3, ExternalLink, Eye, EyeOff, Facebook, Figma, File, FileImage, FilePlus, FileText, Filter, Flag, Folder, FolderOpen, FolderPlus, Gift, GitBranch, GitCommit, GitMerge, GitPullRequest, Github, Globe, Grid, Heart, HelpCircle, Home, Image, Info, Instagram, Key, Laptop, Layout, LayoutGrid, LayoutList, LineChart, Link, Link2, Linkedin, List, Loader, Loader2, Lock, LogIn, LogOut, Mail, Map, MapPin, Maximize, Maximize2, Menu, MessageCircle, MessageSquare, Mic, MicOff, Minimize, Minimize2, Minus, Monitor, Moon, MoreHorizontal, MoreVertical, Music, Navigation, Navigation2, Package, PanelLeft, PanelRight, Paperclip, Pause, Pen, Phone, PhoneCall, PhoneOff, PieChart, Play, Plus, RefreshCw, RotateCcw, RotateCw, Save, Search, Send, Server, Settings, Share, Share2, Shield, ShieldCheck, ShoppingBag, ShoppingCart, Sidebar, SkipBack, SkipForward, Smartphone, Square, Star, Store, Sun, Tablet, Tag, Terminal, Trash, Trash2, TrendingDown, TrendingUp, Tv, Twitch, Twitter, Unlock, Upload, User, UserCheck, UserMinus, UserPlus, UserX, Users, Video, VideoOff, Volume, Volume1, Volume2, VolumeX, Watch, Wifi, WifiOff, Wind, X, XCircle, Youtube, Zap } from 'lucide-react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+export { SelectContentProps, SelectGroupProps, SelectItemProps, SelectLabelProps, SelectProps, SelectSeparatorProps, SelectTriggerProps, SelectValueProps } from '@radix-ui/react-select';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+export { SeparatorProps } from '@radix-ui/react-separator';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+export { SliderProps } from '@radix-ui/react-slider';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+export { SwitchProps } from '@radix-ui/react-switch';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export { TabsProps } from '@radix-ui/react-tabs';
+import { Toaster as Toaster$1 } from 'sonner';
+export { Toaster, toast } from 'sonner';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { ClassValue } from 'clsx';
+
+/**
+ * Accordion Component
+ *
+ * A vertically stacked set of interactive headings that each reveal a section of content.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2643:1487
+ *
+ * @see https://ui.shadcn.com/docs/components/accordion
+ * @see https://www.radix-ui.com/docs/primitives/components/accordion
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>What is a micro-interaction?</AccordionTrigger>
+ *     <AccordionContent>
+ *       Micro-interactions are events which have one main task — a single purpose — and they are found all over your device and within apps.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Alert Component
+ *
+ * Displays a callout for user attention.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=628:2411
+ *
+ * @see https://ui.shadcn.com/docs/components/alert
+ *
+ * @example
+ * ```tsx
+ * <Alert>
+ *   <AlertTitle>Heads up!</AlertTitle>
+ *   <AlertDescription>
+ *     You can add components to your app using the cli.
+ *   </AlertDescription>
+ * </Alert>
+ * ```
+ */
+declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * AlertDialog Component
+ *
+ * A modal dialog that interrupts the user with important content and expects a response.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2673-1596
+ *
+ * @see https://ui.shadcn.com/docs/components/alert-dialog
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Delete Account?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         Deleting your account is irreversible and will erase all your data.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel>Cancel</AlertDialogCancel>
+ *       <AlertDialogAction>Continue</AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ */
+interface AlertDialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+declare const AlertDialog: {
+    ({ open, onOpenChange, children }: AlertDialogProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+interface AlertDialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    onOpenChange?: (open: boolean) => void;
+}
+declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Avatar Component
+ *
+ * An image element with a fallback for representing the user.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2673-1641
+ *
+ * @see https://ui.shadcn.com/docs/components/avatar
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="https://example.com/avatar.jpg" alt="User" />
+ *   <AvatarFallback>UN</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+declare const Avatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<React.ImgHTMLAttributes<HTMLImageElement> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Badge variants using class-variance-authority
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=620:965
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "secondary" | "outline" | "success" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+/**
+ * Badge Component
+ *
+ * Displays a badge or a component that looks like a badge.
+ *
+ * @see https://ui.shadcn.com/docs/components/badge
+ *
+ * @example
+ * ```tsx
+ * <Badge>Default</Badge>
+ * <Badge variant="secondary">Secondary</Badge>
+ * <Badge variant="destructive">Error</Badge>
+ * <Badge variant="outline">Outline</Badge>
+ * <Badge variant="success">Success</Badge>
+ * <Badge size="md">Larger Badge</Badge>
+ * ```
+ */
+declare function Badge({ className, variant, size, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Breadcrumb Component
+ *
+ * Displays the path to the current resource using a hierarchy of links.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2673-1696
+ *
+ * @see https://ui.shadcn.com/docs/components/breadcrumb
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ */
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Button variants using class-variance-authority
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2674-1721
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "success" | "destructive-subtle" | "secondary-outline" | "ghost" | "side-panel" | null | undefined;
+    size?: "default" | "sm" | "icon" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Button Group Component
+ *
+ * A container for grouping multiple buttons together with consistent spacing.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=4720-4795
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button variant="outline">Cancel</Button>
+ *   <Button>Save</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup orientation="vertical">
+ *   <Button>First</Button>
+ *   <Button>Second</Button>
+ *   <Button>Third</Button>
+ * </ButtonGroup>
+ * ```
+ */
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The orientation of the button group
+     * @default "horizontal"
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Card Component
+ *
+ * Displays a card with header, content, and footer.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2778-1195
+ *
+ * @see https://ui.shadcn.com/docs/components/card
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Card Title</CardTitle>
+ *     <CardDescription>Card Description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>Card Content</p>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+interface CarouselContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    setTotalItems?: (count: number) => void;
+}
+declare const CarouselContent: React.ForwardRefExoticComponent<CarouselContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Checkbox Component
+ *
+ * A control that allows the user to toggle between checked and not checked.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2674-1733
+ *
+ * @see https://ui.shadcn.com/docs/components/checkbox
+ *
+ * @example
+ * ```tsx
+ * <Checkbox id="terms" />
+ * <label htmlFor="terms">Accept terms and conditions</label>
+ * ```
+ */
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Dialog Component
+ *
+ * A window overlaid on either the primary window or another dialog window.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2730-1719
+ *
+ * @see https://ui.shadcn.com/docs/components/dialog
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={isOpen} onOpenChange={setIsOpen}>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       <DialogTitle>Dialog Title</DialogTitle>
+ *       <DialogDescription>Dialog Description</DialogDescription>
+ *     </DialogHeader>
+ *     <div>Main content</div>
+ *     <DialogFooter>
+ *       <Button>Action</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+interface DialogProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+declare const Dialog: {
+    ({ open, onOpenChange, children }: DialogProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    onOpenChange?: (open: boolean) => void;
+}
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DialogFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Drawer Component
+ *
+ * A window overlaid on either the primary window or another dialog window,
+ * rendering the content underneath inert. Slides up from the bottom of the screen.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2786-829
+ *
+ * @see https://ui.shadcn.com/docs/components/drawer
+ *
+ * @example
+ * ```tsx
+ * <Drawer open={isOpen} onOpenChange={setIsOpen}>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Drawer Title</DrawerTitle>
+ *       <DrawerDescription>Drawer Description</DrawerDescription>
+ *     </DrawerHeader>
+ *     <div>Main content</div>
+ *     <DrawerFooter>
+ *       <Button>Action</Button>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+interface DrawerProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+declare const Drawer: {
+    ({ open, onOpenChange, children }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    onOpenChange?: (open: boolean) => void;
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Header Component
+ *
+ * A page header component that combines breadcrumbs, title, actions, and supporting text.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=4741-3916
+ *
+ * @example
+ * ```tsx
+ * <Header>
+ *   <HeaderBreadcrumbs>
+ *     <Breadcrumb>
+ *       <BreadcrumbList>
+ *         <BreadcrumbItem>
+ *           <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *         </BreadcrumbItem>
+ *         <BreadcrumbSeparator />
+ *         <BreadcrumbItem>
+ *           <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *         </BreadcrumbItem>
+ *       </BreadcrumbList>
+ *     </Breadcrumb>
+ *   </HeaderBreadcrumbs>
+ *   <HeaderContent>
+ *     <HeaderTitle>Page Title</HeaderTitle>
+ *     <HeaderActions>
+ *       <Button>Action</Button>
+ *     </HeaderActions>
+ *   </HeaderContent>
+ *   <HeaderDescription>Supporting text goes here</HeaderDescription>
+ * </Header>
+ * ```
+ */
+declare const Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+declare const HeaderBreadcrumbs: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const HeaderContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const HeaderTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const HeaderActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const HeaderDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Icon Component
+ *
+ * A wrapper around lucide-react icons to ensure consistent styling across the design system.
+ * All icons are 24x24px by default to match the Figma design system.
+ *
+ * @see https://lucide.dev/icons
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@circuitandchisel/design-system';
+ * import { AlertCircle } from 'lucide-react';
+ *
+ * <Icon icon={AlertCircle} />
+ * <Icon icon={AlertCircle} size={16} />
+ * <Icon icon={AlertCircle} className="text-destructive" />
+ * ```
+ */
+interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+    /** The lucide icon component to render */
+    icon: LucideIcon;
+    /** Size of the icon in pixels. Defaults to 24 */
+    size?: number;
+}
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+
+/**
+ * Radio Component
+ *
+ * A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2674-2166
+ *
+ * @see https://ui.shadcn.com/docs/components/radio-group
+ *
+ * @example
+ * ```tsx
+ * <Radio name="notify" id="notify-yes" value="yes" />
+ * <label htmlFor="notify-yes">Notify me</label>
+ * ```
+ */
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Select Component
+ *
+ * Displays a list of options for the user to pick from—triggered by a button.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2695-404
+ *
+ * @see https://ui.shadcn.com/docs/components/select
+ * @see https://www.radix-ui.com/docs/primitives/components/select
+ *
+ * @example
+ * ```tsx
+ * <Select>
+ *   <SelectTrigger className="w-[220px]">
+ *     <SelectValue placeholder="Select option" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectGroup>
+ *       <SelectLabel>Fruits</SelectLabel>
+ *       <SelectItem value="apple">Apple</SelectItem>
+ *       <SelectItem value="banana">Banana</SelectItem>
+ *       <SelectItem value="blueberry">Blueberry</SelectItem>
+ *     </SelectGroup>
+ *     <SelectSeparator />
+ *     <SelectGroup>
+ *       <SelectItem value="grapes">Grapes</SelectItem>
+ *       <SelectItem value="pineapple">Pineapple</SelectItem>
+ *     </SelectGroup>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Separator Component
+ *
+ * Visually or semantically separates content.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2723-432
+ *
+ * @see https://ui.shadcn.com/docs/components/separator
+ * @see https://www.radix-ui.com/docs/primitives/components/separator
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Item 1</p>
+ *   <Separator />
+ *   <p>Item 2</p>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <div className="flex h-5 items-center">
+ *   <span>Link 1</span>
+ *   <Separator orientation="vertical" />
+ *   <span>Link 2</span>
+ * </div>
+ * ```
+ */
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sheet Component
+ *
+ * Extends Dialog to display content that complements the main content of the screen.
+ * A slide-in panel that can appear from any side of the screen.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2774-707
+ *
+ * @see https://ui.shadcn.com/docs/components/sheet
+ *
+ * @example
+ * ```tsx
+ * <Sheet open={isOpen} onOpenChange={setIsOpen}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitle>Sheet Title</SheetTitle>
+ *       <SheetDescription>Sheet Description</SheetDescription>
+ *     </SheetHeader>
+ *     <div>Main content</div>
+ *     <SheetFooter>
+ *       <Button>Action</Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
+ */
+interface SheetProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+declare const Sheet: {
+    ({ open, onOpenChange, children }: SheetProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+type SheetSide = 'top' | 'right' | 'bottom' | 'left';
+interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    onOpenChange?: (open: boolean) => void;
+    side?: SheetSide;
+}
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const SheetFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    onOpenChange?: (open: boolean) => void;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Skeleton Component
+ *
+ * Display a placeholder preview of content before the data loads.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2824-2174
+ *
+ * @see https://ui.shadcn.com/docs/components/skeleton
+ *
+ * @example
+ * ```tsx
+ * <div className="flex flex-col gap-2">
+ *   <Skeleton className="h-32 w-60" />
+ *   <Skeleton className="h-4 w-60" />
+ *   <Skeleton className="h-4 w-48" />
+ * </div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Circle skeleton for avatars
+ * <Skeleton className="h-10 w-10 rounded-full" />
+ * ```
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Slider Component
+ *
+ * An input where the user selects a value from within a given range.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2674-2172
+ *
+ * @see https://ui.shadcn.com/docs/components/slider
+ * @see https://www.radix-ui.com/docs/primitives/components/slider
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[50]} max={100} step={1} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Range slider with multiple values
+ * <Slider defaultValue={[25, 75]} max={100} step={1} />
+ * ```
+ */
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Switch Component
+ *
+ * A control that allows the user to toggle between checked and not checked.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2674-2178
+ *
+ * @see https://ui.shadcn.com/docs/components/switch
+ * @see https://www.radix-ui.com/docs/primitives/components/switch
+ *
+ * @example
+ * ```tsx
+ * <Switch />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <div className="flex items-center gap-2">
+ *   <Switch id="airplane-mode" />
+ *   <label htmlFor="airplane-mode">Airplane Mode</label>
+ * </div>
+ * ```
+ */
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Table Component
+ *
+ * A responsive table component with semantic HTML.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2814-1241
+ *
+ * @see https://ui.shadcn.com/docs/components/table
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead>Status</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>John Doe</TableCell>
+ *       <TableCell>Active</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+/**
+ * Tabs Component
+ *
+ * A set of layered sections of content—known as tab panels—that are displayed one at a time.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2737-489
+ *
+ * @see https://ui.shadcn.com/docs/components/tabs
+ * @see https://www.radix-ui.com/docs/primitives/components/tabs
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="account">
+ *   <TabsList>
+ *     <TabsTrigger value="account">Account</TabsTrigger>
+ *     <TabsTrigger value="password">Password</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account">Account content</TabsContent>
+ *   <TabsContent value="password">Password content</TabsContent>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Textarea Component
+ *
+ * Displays a form textarea or a component that looks like a textarea.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2674-2219
+ *
+ * @see https://ui.shadcn.com/docs/components/textarea
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Type your message here." />
+ * ```
+ */
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+/**
+ * Toast Component
+ *
+ * A succinct message that is displayed temporarily.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2806-824
+ *
+ * @see https://ui.shadcn.com/docs/components/sonner
+ * @see https://sonner.emilkowal.ski/
+ *
+ * @example
+ * ```tsx
+ * import { Toaster, toast } from '@/components/Toast';
+ *
+ * // Add Toaster to your app root
+ * <Toaster />
+ *
+ * // Show toasts
+ * toast('Event has been created')
+ * toast.success('Event has been created')
+ * toast.error('Event creation failed')
+ * ```
+ */
+type ToasterProps = React.ComponentProps<typeof Toaster$1>;
+declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Toggle Component
+ *
+ * A two-state button that can be either on or off.
+ *
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2775-856
+ *
+ * @see https://ui.shadcn.com/docs/components/toggle
+ * @see https://www.radix-ui.com/docs/primitives/components/toggle
+ *
+ * @example
+ * ```tsx
+ * <Toggle aria-label="Toggle bold">
+ *   <Bold className="h-4 w-4" />
+ * </Toggle>
+ * ```
+ */
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants> {
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Utility function to merge class names
+ * Combines clsx for conditional classes
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Available theme options
+ */
+type Theme = 'light' | 'dark' | 'atxp' | 'dbg' | 'auto';
+/**
+ * Theme context value
+ */
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    actualTheme: 'light' | 'dark' | 'atxp' | 'dbg';
+}
+/**
+ * Props for ThemeProvider component
+ */
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    /**
+     * Default theme to use
+     * @default 'auto'
+     */
+    defaultTheme?: Theme;
+    /**
+     * Storage key for persisting theme preference
+     * @default 'cc-theme'
+     */
+    storageKey?: string;
+    /**
+     * Enable localStorage persistence
+     * @default true
+     */
+    enablePersistence?: boolean;
+}
+/**
+ * ThemeProvider Component
+ *
+ * Provides theme context and manages theme switching for the application.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from '@circuitandchisel/design-system';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider defaultTheme="auto" enablePersistence>
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function ThemeProvider({ children, defaultTheme, storageKey, enablePersistence, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * useTheme Hook
+ *
+ * Access and control the current theme from any component.
+ *
+ * @example
+ * ```tsx
+ * function ThemeToggle() {
+ *   const { theme, setTheme, actualTheme } = useTheme();
+ *
+ *   return (
+ *     <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+ *       Current theme: {actualTheme}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare function useTheme(): ThemeContextValue;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, type CheckboxProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, type DialogProps, DialogTitle, Drawer, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerTitle, Header, HeaderActions, HeaderBreadcrumbs, HeaderContent, HeaderDescription, HeaderTitle, Icon, Radio, type RadioProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, type SheetProps, SheetTitle, Skeleton, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, Toaster as Toast, Toggle, type ToggleProps, badgeVariants, buttonVariants, cn, toggleVariants, useTheme };