@atxp/design-system 0.1.0 → 0.1.2

package/dist/index.d.ts

@@ -447,6 +447,34 @@ declare const HeaderTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<
 declare const HeaderActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const HeaderDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 
+/**
+ * HoverCard Component
+ *
+ * For sighted users to preview content available behind a link.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2785-828
+ *
+ * @see https://ui.shadcn.com/docs/components/hover-card
+ *
+ * @example
+ * ```tsx
+ * <HoverCard>
+ *   <HoverCardHeader>
+ *     <HoverCardTitle>Hover Card Title</HoverCardTitle>
+ *     <HoverCardDescription>Hover Card Description</HoverCardDescription>
+ *   </HoverCardHeader>
+ *   <div>Main content goes here</div>
+ * </HoverCard>
+ * ```
+ */
+type HoverCardProps = React.HTMLAttributes<HTMLDivElement>;
+declare const HoverCard: React.ForwardRefExoticComponent<HoverCardProps & React.RefAttributes<HTMLDivElement>>;
+type HoverCardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+declare const HoverCardHeader: React.ForwardRefExoticComponent<HoverCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+type HoverCardTitleProps = React.HTMLAttributes<HTMLParagraphElement>;
+declare const HoverCardTitle: React.ForwardRefExoticComponent<HoverCardTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+type HoverCardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+declare const HoverCardDescription: React.ForwardRefExoticComponent<HoverCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+
 /**
  * Icon Component
  *
@@ -473,6 +501,317 @@ interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
 }
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 
+/**
+ * Indicator variants using class-variance-authority
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=4717-4109
+ */
+declare const indicatorDotVariants: (props?: ({
+    status?: "high" | "low" | "medium" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IndicatorDotProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof indicatorDotVariants> {
+}
+/**
+ * IndicatorDot Component
+ *
+ * Displays a small colored dot indicator for status visualization.
+ *
+ * @example
+ * ```tsx
+ * <IndicatorDot status="high" />
+ * <IndicatorDot status="medium" />
+ * <IndicatorDot status="low" />
+ * ```
+ */
+declare const IndicatorDot: React.ForwardRefExoticComponent<IndicatorDotProps & React.RefAttributes<HTMLDivElement>>;
+declare const indicatorCircleVariants: (props?: ({
+    status?: "complete" | "partial" | "minimal" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IndicatorCircleProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof indicatorCircleVariants> {
+}
+/**
+ * IndicatorCircle Component
+ *
+ * Displays a circular progress indicator.
+ *
+ * @example
+ * ```tsx
+ * <IndicatorCircle status="complete" />
+ * <IndicatorCircle status="partial" />
+ * <IndicatorCircle status="minimal" />
+ * ```
+ */
+declare const IndicatorCircle: React.ForwardRefExoticComponent<IndicatorCircleProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Input Component
+ *
+ * Displays a form input field or a component that looks like an input field.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2630-194
+ *
+ * @see https://ui.shadcn.com/docs/components/input
+ *
+ * @example
+ * ```tsx
+ * <Input type="email" placeholder="Email" />
+ * <Input type="password" placeholder="Password" disabled />
+ * ```
+ */
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Optional icon to display at the end of the input
+     */
+    icon?: React.ReactNode;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * InputGroup Component
+ *
+ * Groups form inputs with labels and optional help text.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2818-1785
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupLabel>Email</InputGroupLabel>
+ *   <Input type="email" placeholder="Enter email" />
+ *   <InputGroupHelpText>We'll never share your email.</InputGroupHelpText>
+ * </InputGroup>
+ * ```
+ */
+type InputGroupProps = React.HTMLAttributes<HTMLDivElement>;
+declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
+type InputGroupLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+declare const InputGroupLabel: React.ForwardRefExoticComponent<InputGroupLabelProps & React.RefAttributes<HTMLLabelElement>>;
+type InputGroupHelpTextProps = React.HTMLAttributes<HTMLParagraphElement>;
+declare const InputGroupHelpText: React.ForwardRefExoticComponent<InputGroupHelpTextProps & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Label Component
+ *
+ * Renders an accessible label associated with controls.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2604-4202
+ *
+ * @see https://ui.shadcn.com/docs/components/label
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" />
+ * ```
+ */
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * Menubar Component
+ *
+ * A visually persistent menu common in desktop applications that provides
+ * quick access to a consistent set of commands.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2760-2489
+ *
+ * @see https://ui.shadcn.com/docs/components/menubar
+ */
+type MenubarProps = React.HTMLAttributes<HTMLDivElement>;
+declare const Menubar: React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>>;
+declare const menubarTriggerVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface MenubarTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof menubarTriggerVariants> {
+}
+declare const MenubarTrigger: React.ForwardRefExoticComponent<MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+type MenubarDropdownProps = React.HTMLAttributes<HTMLDivElement>;
+declare const MenubarDropdown: React.ForwardRefExoticComponent<MenubarDropdownProps & React.RefAttributes<HTMLDivElement>>;
+declare const menubarItemVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface MenubarItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof menubarItemVariants> {
+    /**
+     * Optional keyboard shortcut to display
+     */
+    shortcut?: string;
+    /**
+     * Whether to show a checkmark
+     */
+    checked?: boolean;
+    /**
+     * Whether this item has a submenu
+     */
+    hasSubmenu?: boolean;
+}
+declare const MenubarItem: React.ForwardRefExoticComponent<MenubarItemProps & React.RefAttributes<HTMLButtonElement>>;
+type MenubarSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const MenubarSeparator: React.ForwardRefExoticComponent<MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+type MenubarLabelProps = React.HTMLAttributes<HTMLDivElement>;
+declare const MenubarLabel: React.ForwardRefExoticComponent<MenubarLabelProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * NavHeader Component
+ *
+ * A horizontal navigation header for application navigation.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=4722-5662
+ *
+ * @example
+ * ```tsx
+ * <NavHeader>
+ *   <NavHeaderBrand>My App</NavHeaderBrand>
+ *   <NavHeaderNav>
+ *     <NavHeaderItem selected>Dashboard</NavHeaderItem>
+ *     <NavHeaderItem>Settings</NavHeaderItem>
+ *   </NavHeaderNav>
+ * </NavHeader>
+ * ```
+ */
+type NavHeaderProps = React.HTMLAttributes<HTMLElement>;
+declare const NavHeader: React.ForwardRefExoticComponent<NavHeaderProps & React.RefAttributes<HTMLElement>>;
+type NavHeaderBrandProps = React.HTMLAttributes<HTMLDivElement>;
+declare const NavHeaderBrand: React.ForwardRefExoticComponent<NavHeaderBrandProps & React.RefAttributes<HTMLDivElement>>;
+type NavHeaderNavProps = React.HTMLAttributes<HTMLElement>;
+declare const NavHeaderNav: React.ForwardRefExoticComponent<NavHeaderNavProps & React.RefAttributes<HTMLElement>>;
+declare const navHeaderItemVariants: (props?: ({
+    variant?: "default" | "selected" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NavHeaderItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof navHeaderItemVariants> {
+    /**
+     * Whether this item is currently selected
+     */
+    selected?: boolean;
+    /**
+     * Optional icon to display
+     */
+    icon?: React.ReactNode;
+}
+declare const NavHeaderItem: React.ForwardRefExoticComponent<NavHeaderItemProps & React.RefAttributes<HTMLButtonElement>>;
+type NavHeaderDividerProps = React.HTMLAttributes<HTMLDivElement>;
+declare const NavHeaderDivider: React.ForwardRefExoticComponent<NavHeaderDividerProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * NavSidePanel Component
+ *
+ * A vertical side navigation panel for application navigation.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=4722-5838
+ *
+ * @example
+ * ```tsx
+ * <NavSidePanel>
+ *   <NavSidePanelHeader>My App</NavSidePanelHeader>
+ *   <NavSidePanelNav>
+ *     <NavSidePanelItem selected icon={<Icon />}>Dashboard</NavSidePanelItem>
+ *     <NavSidePanelItem icon={<Icon />}>Settings</NavSidePanelItem>
+ *   </NavSidePanelNav>
+ * </NavSidePanel>
+ * ```
+ */
+type NavSidePanelProps = React.HTMLAttributes<HTMLDivElement>;
+declare const NavSidePanel: React.ForwardRefExoticComponent<NavSidePanelProps & React.RefAttributes<HTMLDivElement>>;
+type NavSidePanelHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+declare const NavSidePanelHeader: React.ForwardRefExoticComponent<NavSidePanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
+type NavSidePanelBrandProps = React.HTMLAttributes<HTMLDivElement>;
+declare const NavSidePanelBrand: React.ForwardRefExoticComponent<NavSidePanelBrandProps & React.RefAttributes<HTMLDivElement>>;
+type NavSidePanelSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
+declare const NavSidePanelSeparator: React.ForwardRefExoticComponent<NavSidePanelSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+type NavSidePanelNavProps = React.HTMLAttributes<HTMLElement>;
+declare const NavSidePanelNav: React.ForwardRefExoticComponent<NavSidePanelNavProps & React.RefAttributes<HTMLElement>>;
+declare const navSidePanelItemVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NavSidePanelItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof navSidePanelItemVariants> {
+    /**
+     * Optional icon to display
+     */
+    icon?: React.ReactNode;
+}
+declare const NavSidePanelItem: React.ForwardRefExoticComponent<NavSidePanelItemProps & React.RefAttributes<HTMLButtonElement>>;
+type NavSidePanelFooterProps = React.HTMLAttributes<HTMLDivElement>;
+declare const NavSidePanelFooter: React.ForwardRefExoticComponent<NavSidePanelFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Pagination Component
+ *
+ * Pagination with page navigation, next and previous links.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2648-223
+ *
+ * @see https://ui.shadcn.com/docs/components/pagination
+ */
+type PaginationProps = React.HTMLAttributes<HTMLElement>;
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+declare const paginationItemVariants: (props?: ({
+    variant?: "default" | "active" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof paginationItemVariants> {
+    /**
+     * Whether this page is currently active
+     */
+    isActive?: boolean;
+}
+declare const PaginationItem: React.ForwardRefExoticComponent<PaginationItemProps & React.RefAttributes<HTMLButtonElement>>;
+interface PaginationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Direction of the link
+     */
+    direction?: 'previous' | 'next';
+}
+declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
+type PaginationEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const PaginationEllipsis: React.ForwardRefExoticComponent<PaginationEllipsisProps & React.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Popover Component
+ *
+ * Displays rich content in a portal, triggered by a button.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2782-1741
+ *
+ * @see https://ui.shadcn.com/docs/components/popover
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverHeader>
+ *     <PopoverTitle>Popover Title</PopoverTitle>
+ *     <PopoverDescription>Popover Description</PopoverDescription>
+ *   </PopoverHeader>
+ *   <div>Content goes here</div>
+ * </Popover>
+ * ```
+ */
+type PopoverProps = React.HTMLAttributes<HTMLDivElement>;
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+type PopoverHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+declare const PopoverHeader: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
+type PopoverTitleProps = React.HTMLAttributes<HTMLParagraphElement>;
+declare const PopoverTitle: React.ForwardRefExoticComponent<PopoverTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+type PopoverDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+declare const PopoverDescription: React.ForwardRefExoticComponent<PopoverDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Progress Component
+ *
+ * Displays an indicator showing the completion progress of a task,
+ * typically displayed as a progress bar.
+ * Based on Figma component: https://www.figma.com/design/nadcKNlrnZUHbbLwm9GdK4?node-id=2641-182
+ *
+ * @see https://ui.shadcn.com/docs/components/progress
+ *
+ * @example
+ * ```tsx
+ * <Progress value={33} />
+ * <Progress value={66} />
+ * <Progress value={100} />
+ * ```
+ */
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The progress value (0-100)
+     */
+    value?: number;
+    /**
+     * Optional max value (defaults to 100)
+     */
+    max?: number;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Radio Component
  *
@@ -898,4 +1237,4 @@ declare function ThemeProvider({ children, defaultTheme, storageKey, enablePersi
  */
 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 };
+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, HoverCard, HoverCardDescription, type HoverCardDescriptionProps, HoverCardHeader, type HoverCardHeaderProps, type HoverCardProps, HoverCardTitle, type HoverCardTitleProps, Icon, IndicatorCircle, type IndicatorCircleProps, IndicatorDot, type IndicatorDotProps, Input, InputGroup, InputGroupHelpText, type InputGroupHelpTextProps, InputGroupLabel, type InputGroupLabelProps, type InputGroupProps, type InputProps, Label, type LabelProps, Menubar, MenubarDropdown, type MenubarDropdownProps, MenubarItem, type MenubarItemProps, MenubarLabel, type MenubarLabelProps, type MenubarProps, MenubarSeparator, type MenubarSeparatorProps, MenubarTrigger, type MenubarTriggerProps, NavHeader, NavHeaderBrand, type NavHeaderBrandProps, NavHeaderDivider, type NavHeaderDividerProps, NavHeaderItem, type NavHeaderItemProps, NavHeaderNav, type NavHeaderNavProps, type NavHeaderProps, NavSidePanel, NavSidePanelBrand, type NavSidePanelBrandProps, NavSidePanelFooter, type NavSidePanelFooterProps, NavSidePanelHeader, type NavSidePanelHeaderProps, NavSidePanelItem, type NavSidePanelItemProps, NavSidePanelNav, type NavSidePanelNavProps, type NavSidePanelProps, NavSidePanelSeparator, type NavSidePanelSeparatorProps, Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, type PaginationProps, Popover, PopoverDescription, type PopoverDescriptionProps, PopoverHeader, type PopoverHeaderProps, type PopoverProps, PopoverTitle, type PopoverTitleProps, Progress, type ProgressProps, 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, indicatorCircleVariants, indicatorDotVariants, menubarItemVariants, menubarTriggerVariants, navHeaderItemVariants, navSidePanelItemVariants, paginationItemVariants, toggleVariants, useTheme };