@raxrai/stylelab-ui 0.3.2 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, HTMLAttributes, ElementType, AnchorHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, RefObject } from 'react';
+import { ReactNode, HTMLAttributes, ElementType, AnchorHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, Ref, RefCallback, RefObject } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
@@ -28,9 +28,15 @@ type AccordionProps = {
     style?: React.CSSProperties;
     theme?: StyleLabTheme;
 };
-declare function Accordion({ items, allowMultiple, defaultOpenIds, className, style, theme: themeProp, }: AccordionProps): react.JSX.Element;
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
 
 type AlertIntent = "default" | "info" | "success" | "warning" | "danger";
+type AlertProps = HTMLAttributes<HTMLDivElement> & {
+    intent?: AlertIntent;
+    title?: ReactNode;
+    children?: ReactNode;
+    theme?: StyleLabTheme;
+};
 declare const Alert: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     intent?: AlertIntent;
     title?: ReactNode;
@@ -38,6 +44,13 @@ declare const Alert: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivEleme
     theme?: StyleLabTheme;
 } & react.RefAttributes<HTMLDivElement>>;
 
+type AvatarProps = HTMLAttributes<HTMLDivElement> & {
+    src?: string | null;
+    alt?: string;
+    /** Fallback when no image: initials (e.g. "JD") or any string */
+    fallback?: string;
+    theme?: StyleLabTheme;
+};
 declare const Avatar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     src?: string | null;
     alt?: string;
@@ -52,6 +65,17 @@ type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
 };
 declare function AvatarGroup({ children, max, className, theme: themeProp, ...props }: AvatarGroupProps): react.JSX.Element;
 
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "success" | "warning" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants> & {
+    dot?: boolean;
+    theme?: StyleLabTheme;
+    /** Override background (e.g. hex) when you need a specific color. */
+    bgOverride?: string;
+    /** Override text color (e.g. hex). */
+    textOverride?: string;
+};
 declare const Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     variant?: "default" | "success" | "warning" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
@@ -63,11 +87,11 @@ declare const Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElem
     textOverride?: string;
 } & react.RefAttributes<HTMLSpanElement>>;
 
-declare function BentoGrid({ children, className, style, }: {
+declare const BentoGrid: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-}): react.JSX.Element;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type BreadcrumbItem = {
     label: ReactNode;
@@ -77,9 +101,10 @@ type BreadcrumbsProps = {
     items: BreadcrumbItem[];
     separator?: ReactNode;
     className?: string;
+    style?: React.CSSProperties;
     theme?: StyleLabTheme;
 };
-declare function Breadcrumbs({ items, separator, className, theme: themeProp, }: BreadcrumbsProps): react.JSX.Element;
+declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
 
 declare const buttonVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -108,9 +133,10 @@ type CalendarProps = {
     min?: Date;
     max?: Date;
     className?: string;
+    style?: React.CSSProperties;
     theme?: StyleLabTheme;
 };
-declare function Calendar({ value: controlledValue, defaultValue, onSelect, min, max, className, theme: themeProp, }: CalendarProps): react.JSX.Element;
+declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const cardVariants: (props?: ({
     padding?: "none" | "sm" | "md" | null | undefined;
@@ -138,6 +164,23 @@ declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElemen
     classNames?: CardClassNames;
 } & react.RefAttributes<HTMLDivElement>>;
 
+type CommandItem = {
+    id: string;
+    label: string;
+    shortcut?: string;
+    onSelect: () => void;
+};
+type CommandPaletteProps = {
+    open: boolean;
+    onClose: () => void;
+    commands: CommandItem[];
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: StyleLabTheme;
+};
+declare const CommandPalette: react.ForwardRefExoticComponent<CommandPaletteProps & react.RefAttributes<HTMLDivElement>>;
+
 type DashboardNavItem = {
     href: string;
     label: string;
@@ -152,23 +195,26 @@ type DashboardShellProps = {
     onLogout?: () => void;
     logo?: ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 };
-declare function DashboardShell({ children, navItems, adminNavItems, currentPath, userEmail, userRole, onLogout, logo, className, }: DashboardShellProps): react.JSX.Element;
+declare const DashboardShell: react.ForwardRefExoticComponent<DashboardShellProps & react.RefAttributes<HTMLDivElement>>;
 
-type CommandItem = {
-    id: string;
-    label: string;
-    shortcut?: string;
-    onSelect: () => void;
+type Column<T> = {
+    key: keyof T | string;
+    header: string;
+    render?: (row: T) => React.ReactNode;
 };
-type CommandPaletteProps = {
-    open: boolean;
-    onClose: () => void;
-    commands: CommandItem[];
-    placeholder?: string;
-    theme?: StyleLabTheme;
+type DataTableProps<T extends Record<string, unknown>> = {
+    columns: Column<T>[];
+    data: T[];
+    /** Return a unique key for each row (e.g. row.id). Defaults to row index. */
+    getRowKey?: (row: T, index: number) => string | number;
+    className?: string;
+    style?: React.CSSProperties;
 };
-declare function CommandPalette({ open, onClose, commands, placeholder, theme: themeProp, }: CommandPaletteProps): react.JSX.Element | null;
+declare const DataTable: <T extends Record<string, unknown>>(props: DataTableProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement;
 
 type DocumentAccordionProps = {
     title: ReactNode;
@@ -184,20 +230,6 @@ type DocumentAccordionProps = {
 };
 declare function DocumentAccordion({ title, content, pdfUrl, defaultOpen, className, theme: themeProp, }: DocumentAccordionProps): react.JSX.Element;
 
-type Column<T> = {
-    key: keyof T | string;
-    header: string;
-    render?: (row: T) => React.ReactNode;
-};
-declare function DataTable<T extends Record<string, unknown>>({ columns, data, getRowKey, className, style, }: {
-    columns: Column<T>[];
-    data: T[];
-    /** Return a unique key for each row (e.g. row.id). Defaults to row index. */
-    getRowKey?: (row: T, index: number) => string | number;
-    className?: string;
-    style?: React.CSSProperties;
-}): react.JSX.Element;
-
 type DropdownItem = {
     value: string;
     label: ReactNode;
@@ -225,19 +257,35 @@ type DropdownProps = {
     /** Slot classNames for trigger, popover, and item. */
     classNames?: DropdownClassNames;
 };
-declare function Dropdown({ trigger: triggerProp, placeholder, items, value: controlledValue, defaultValue, onValueChange, disabled, className, style, theme: themeProp, classNames, }: DropdownProps): react.JSX.Element;
+declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLDivElement>>;
 
 type FlashcardProps = {
     question: string;
     answer: string;
 } & HTMLAttributes<HTMLDivElement>;
-declare function Flashcard({ question, answer, className, ...props }: FlashcardProps): react.JSX.Element;
+declare const Flashcard: react.ForwardRefExoticComponent<{
+    question: string;
+    answer: string;
+} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
 type GraphicCardProps = {
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
-declare function GraphicCard({ children, className, ...props }: GraphicCardProps): react.JSX.Element;
+declare const GraphicCard: react.ForwardRefExoticComponent<{
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<typeof inputVariants> & {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    theme?: StyleLabTheme;
+};
 declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
@@ -262,7 +310,18 @@ type ModalProps = VariantProps<typeof modalVariants> & {
     children?: ReactNode;
     theme?: StyleLabTheme;
 };
-declare function Modal({ open, onClose, title, size, className, style, children, theme: themeProp, }: ModalProps): react.JSX.Element | null;
+declare const Modal: react.ForwardRefExoticComponent<VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type NavbarItem = {
     href: string;
@@ -280,7 +339,7 @@ type NavbarProps = {
     className?: string;
     style?: React.CSSProperties;
 };
-declare function Navbar({ children, logo, items, right, className, style, }: NavbarProps): react.JSX.Element;
+declare const Navbar: react.ForwardRefExoticComponent<NavbarProps & react.RefAttributes<HTMLElement>>;
 
 type Tier = {
     name: string;
@@ -290,12 +349,12 @@ type Tier = {
     cta: string;
     highlighted?: boolean;
 };
-declare function PricingCard({ tier, onSelect, className, style, }: {
+declare const PricingCard: react.ForwardRefExoticComponent<{
     tier: Tier;
     onSelect?: () => void;
     className?: string;
     style?: React.CSSProperties;
-}): react.JSX.Element;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type ProgressBarProps = {
     value: number;
@@ -303,32 +362,52 @@ type ProgressBarProps = {
     segmented?: boolean;
     className?: string;
     style?: React.CSSProperties;
+    /** Accessible label for the progress bar (e.g. "Loading" or "Upload progress"). */
+    "aria-label"?: string;
     /** Override track background (e.g. hex). */
     trackColor?: string;
     /** Override fill/active bar color (e.g. hex). */
     activeColor?: string;
 };
-declare function ProgressBar({ value, max, segmented, className, style, trackColor, activeColor, }: ProgressBarProps): react.JSX.Element;
+declare const ProgressBar: react.ForwardRefExoticComponent<ProgressBarProps & react.RefAttributes<HTMLDivElement>>;
 
-declare function SectionHeader({ title, subtitle, className, style, }: {
+declare const SectionHeader: react.ForwardRefExoticComponent<{
     title: string;
     subtitle?: string;
     className?: string;
     style?: React.CSSProperties;
-}): react.JSX.Element;
+} & react.RefAttributes<HTMLElement>>;
 
-declare function Sidebar({ children, className, style, }: {
+declare const Sidebar: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-}): react.JSX.Element;
+} & react.RefAttributes<HTMLElement>>;
 
+declare const skeletonVariants: (props?: ({
+    variant?: "circle" | "text" | "rectangle" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SkeletonProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof skeletonVariants> & {
+    theme?: StyleLabTheme;
+};
 declare const Skeleton: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     variant?: "circle" | "text" | "rectangle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     theme?: StyleLabTheme;
 } & react.RefAttributes<HTMLDivElement>>;
 
+declare const sliderVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SliderProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "size"> & VariantProps<typeof sliderVariants> & {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    theme?: StyleLabTheme;
+};
 declare const Slider: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange" | "size" | "defaultValue"> & VariantProps<(props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
@@ -341,7 +420,7 @@ declare const Slider: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<H
     theme?: StyleLabTheme;
 } & react.RefAttributes<HTMLInputElement>>;
 
-declare function StatsCard({ label, value, trend, className, style, }: {
+declare const StatsCard: react.ForwardRefExoticComponent<{
     label: string;
     value: string | number;
     trend?: {
@@ -350,7 +429,7 @@ declare function StatsCard({ label, value, trend, className, style, }: {
     };
     className?: string;
     style?: React.CSSProperties;
-}): react.JSX.Element;
+} & react.RefAttributes<HTMLDivElement>>;
 
 declare const tabsListVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
 type TabItem = {
@@ -367,14 +446,22 @@ type TabsProps = VariantProps<typeof tabsListVariants> & {
     style?: React.CSSProperties;
     theme?: StyleLabTheme;
 };
-declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, style, theme: themeProp, }: TabsProps): react.JSX.Element;
+declare const Tabs: react.ForwardRefExoticComponent<VariantProps<(props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    items: TabItem[];
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLDivElement>>;
 
-declare function Terminal({ title, children, className, style, }: {
+declare const Terminal: react.ForwardRefExoticComponent<{
     title?: string;
     children: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
-}): react.JSX.Element;
+} & react.RefAttributes<HTMLDivElement>>;
 
 type TimelineItem = {
     title: ReactNode;
@@ -384,17 +471,25 @@ type TimelineItem = {
 type TimelineProps = {
     items: TimelineItem[];
     className?: string;
+    style?: React.CSSProperties;
     theme?: StyleLabTheme;
 };
-declare function Timeline({ items, className, theme: themeProp, }: TimelineProps): react.JSX.Element;
+declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLDivElement>>;
 
-declare function Toast({ message, onDismiss, className, style, }: {
+declare const Toast: react.ForwardRefExoticComponent<{
     message: string;
     onDismiss: () => void;
     className?: string;
     style?: React.CSSProperties;
-}): react.JSX.Element;
+} & react.RefAttributes<HTMLDivElement>>;
 
+declare const toggleVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "onChange"> & VariantProps<typeof toggleVariants> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    theme?: StyleLabTheme;
+};
 declare const Toggle: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange" | "size"> & VariantProps<(props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string> & {
     checked?: boolean;
     defaultChecked?: boolean;
@@ -411,7 +506,14 @@ type TooltipProps = VariantProps<typeof tooltipVariants> & {
     style?: React.CSSProperties;
     theme?: StyleLabTheme;
 };
-declare function Tooltip({ content, children, placement, className, style, theme: themeProp, }: TooltipProps): react.JSX.Element;
+declare const Tooltip: react.ForwardRefExoticComponent<VariantProps<(props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    content: ReactNode;
+    children: ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLSpanElement>>;
 
 type ThemeContextValue = {
     theme: StyleLabTheme;
@@ -457,6 +559,10 @@ declare const THEME_RECOMMENDATIONS: Record<StyleLabTheme, ThemeRecommendation>;
  * Use for all component className composition.
  */
 declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Merges multiple refs (e.g. forwardRef + internal ref) into a single callback ref.
+ */
+declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T>;
 
 /**
  * Traps focus within the container element while active.
@@ -493,4 +599,4 @@ declare function useKeyboardNavigation(options: {
  */
 declare function getNextListIndex(current: number, direction: "up" | "down", length: number): number;
 
-export { Accordion, Alert, Avatar, AvatarGroup, Badge, BentoGrid, Breadcrumbs, Button, Calendar, Card, type CardClassNames, type CardProps, CommandPalette, type ComponentName, DashboardShell, DataTable, DocumentAccordion, Dropdown, type DropdownClassNames, type DropdownItem, type DropdownProps, Flashcard, GraphicCard, Input, Modal, Navbar, type NavbarItem, type NavbarProps, PricingCard, ProgressBar, SectionHeader, Sidebar, Skeleton, Slider, StatsCard, type StyleLabTheme, THEMES, THEME_BACKGROUNDS, THEME_NAVBAR, THEME_RECOMMENDATIONS, Tabs, Terminal, ThemeProvider, type ThemeRecommendation, Timeline, Toast, Toggle, Tooltip, cn, getNextListIndex, getThemeClass, useClickOutside, useFocusTrap, useKeyboardNavigation, useTheme };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertIntent, type AlertProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BentoGrid, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardClassNames, type CardProps, CommandPalette, type CommandPaletteProps, type ComponentName, type DashboardNavItem, DashboardShell, type DashboardShellProps, DataTable, type DataTableProps, DocumentAccordion, type DocumentAccordionProps, Dropdown, type DropdownClassNames, type DropdownItem, type DropdownProps, Flashcard, type FlashcardProps, GraphicCard, type GraphicCardProps, Input, type InputProps, Modal, type ModalProps, Navbar, type NavbarItem, type NavbarProps, PricingCard, ProgressBar, type ProgressBarProps, SectionHeader, Sidebar, Skeleton, type SkeletonProps, Slider, type SliderProps, StatsCard, type StyleLabTheme, THEMES, THEME_BACKGROUNDS, THEME_NAVBAR, THEME_RECOMMENDATIONS, type TabItem, Tabs, type TabsProps, Terminal, ThemeProvider, type ThemeRecommendation, Timeline, type TimelineItem, type TimelineProps, Toast, Toggle, type ToggleProps, Tooltip, type TooltipProps, cn, getNextListIndex, getThemeClass, mergeRefs, useClickOutside, useFocusTrap, useKeyboardNavigation, useTheme };