@raxrai/stylelab-ui 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,418 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, ElementType, AnchorHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, RefObject } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+/**
+ * StyleLab Theme Resolver
+ * Maps component + variant to theme-specific class names.
+ */
+type StyleLabTheme = "minimal" | "night" | "glass" | "neubrutal" | "clay" | "cyberpunk" | "retro" | "motion";
+type ComponentName = "button" | "input" | "toggle" | "badge" | "slider" | "tabs" | "card" | "bento" | "navbar" | "sidebar" | "sectionHeader" | "modal" | "toast" | "progress" | "tooltip" | "dataTable" | "pricingCard" | "terminal" | "statsCard" | "commandPalette" | "accordion" | "skeleton" | "avatar" | "breadcrumbs" | "alert" | "calendar" | "timeline";
+type Variant = string;
+declare function getThemeClass(theme: StyleLabTheme, component: ComponentName, variant?: Variant): string;
+declare const THEMES: StyleLabTheme[];
+
+type AccordionItem = {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+};
+type AccordionProps = {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    /** Optional ids that should be open by default. */
+    defaultOpenIds?: string[];
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: StyleLabTheme;
+};
+declare function Accordion({ items, allowMultiple, defaultOpenIds, className, style, theme: themeProp, }: AccordionProps): react.JSX.Element;
+
+type AlertIntent = "default" | "info" | "success" | "warning" | "danger";
+declare const Alert: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    intent?: AlertIntent;
+    title?: ReactNode;
+    children?: ReactNode;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare const Avatar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    src?: string | null;
+    alt?: string;
+    /** Fallback when no image: initials (e.g. "JD") or any string */
+    fallback?: string;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLDivElement>>;
+type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    max?: number;
+    theme?: StyleLabTheme;
+};
+declare function AvatarGroup({ children, max, className, theme: themeProp, ...props }: AvatarGroupProps): react.JSX.Element;
+
+declare const Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
+    variant?: "default" | "success" | "warning" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    dot?: boolean;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLSpanElement>>;
+
+declare function BentoGrid({ children, className, style, }: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): react.JSX.Element;
+
+type BreadcrumbItem = {
+    label: ReactNode;
+    href?: string;
+};
+type BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    className?: string;
+    theme?: StyleLabTheme;
+};
+declare function Breadcrumbs({ items, separator, className, theme: themeProp, }: BreadcrumbsProps): react.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonProps<T extends ElementType = "button"> = {
+    as?: T;
+    variant?: ButtonVariant;
+    size?: VariantProps<typeof buttonVariants>["size"];
+    /** @deprecated Use isLoading */
+    loading?: boolean;
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+} & (T extends "a" ? AnchorHTMLAttributes<HTMLAnchorElement> : ButtonHTMLAttributes<HTMLButtonElement>);
+declare const Button: <T extends ElementType = "button">(props: ButtonProps<T> & {
+    ref?: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>;
+}) => React.ReactElement;
+
+type CalendarProps = {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onSelect?: (date: Date) => void;
+    min?: Date;
+    max?: Date;
+    className?: string;
+    theme?: StyleLabTheme;
+};
+declare function Calendar({ value: controlledValue, defaultValue, onSelect, min, max, className, theme: themeProp, }: CalendarProps): react.JSX.Element;
+
+declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    padding?: "none" | "sm" | "md" | null | undefined;
+    isHoverable?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    header?: ReactNode;
+    footer?: ReactNode;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type DashboardNavItem = {
+    href: string;
+    label: string;
+};
+type DashboardShellProps = {
+    children: ReactNode;
+    navItems: DashboardNavItem[];
+    adminNavItems?: DashboardNavItem[];
+    currentPath?: string;
+    userEmail?: string;
+    userRole?: string;
+    onLogout?: () => void;
+    logo?: ReactNode;
+    className?: string;
+};
+declare function DashboardShell({ children, navItems, adminNavItems, currentPath, userEmail, userRole, onLogout, logo, className, }: DashboardShellProps): react.JSX.Element;
+
+type CommandItem = {
+    id: string;
+    label: string;
+    shortcut?: string;
+    onSelect: () => void;
+};
+type CommandPaletteProps = {
+    open: boolean;
+    onClose: () => void;
+    commands: CommandItem[];
+    placeholder?: string;
+    theme?: StyleLabTheme;
+};
+declare function CommandPalette({ open, onClose, commands, placeholder, theme: themeProp, }: CommandPaletteProps): react.JSX.Element | null;
+
+type DocumentAccordionProps = {
+    title: ReactNode;
+    content?: ReactNode;
+    pdfUrl?: string;
+    /**
+     * Whether the panel should be open by default.
+     * Defaults to false.
+     */
+    defaultOpen?: boolean;
+    className?: string;
+    theme?: StyleLabTheme;
+};
+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;
+    disabled?: boolean;
+};
+type DropdownProps = {
+    trigger: ReactNode;
+    items: DropdownItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: StyleLabTheme;
+};
+declare function Dropdown({ trigger, items, value: controlledValue, defaultValue, onValueChange, className, style, theme: themeProp, }: DropdownProps): react.JSX.Element;
+
+type FlashcardProps = {
+    question: string;
+    answer: string;
+} & HTMLAttributes<HTMLDivElement>;
+declare function Flashcard({ question, answer, className, ...props }: FlashcardProps): react.JSX.Element;
+
+type GraphicCardProps = {
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>;
+declare function GraphicCard({ children, className, ...props }: GraphicCardProps): react.JSX.Element;
+
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLInputElement>>;
+
+declare const modalVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ModalProps = VariantProps<typeof modalVariants> & {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+    theme?: StyleLabTheme;
+};
+declare function Modal({ open, onClose, title, size, className, style, children, theme: themeProp, }: ModalProps): react.JSX.Element | null;
+
+declare function Navbar({ children, className, style, }: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): react.JSX.Element;
+
+type Tier = {
+    name: string;
+    price: string;
+    description?: string;
+    features: string[];
+    cta: string;
+    highlighted?: boolean;
+};
+declare function PricingCard({ tier, onSelect, className, style, }: {
+    tier: Tier;
+    onSelect?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}): react.JSX.Element;
+
+type Props = {
+    value: number;
+    max?: number;
+    segmented?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare function ProgressBar({ value, max, segmented, className, style, }: Props): react.JSX.Element;
+
+declare function SectionHeader({ title, subtitle, className, style, }: {
+    title: string;
+    subtitle?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}): react.JSX.Element;
+
+declare function Sidebar({ children, className, style, }: {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): react.JSX.Element;
+
+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 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> & {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLInputElement>>;
+
+declare function StatsCard({ label, value, trend, className, style, }: {
+    label: string;
+    value: string | number;
+    trend?: {
+        direction: "up" | "down";
+        value: string;
+    };
+    className?: string;
+    style?: React.CSSProperties;
+}): react.JSX.Element;
+
+declare const tabsListVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TabItem = {
+    label: string;
+    value: string;
+    content: ReactNode;
+};
+type TabsProps = VariantProps<typeof tabsListVariants> & {
+    items: TabItem[];
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: StyleLabTheme;
+};
+declare function Tabs({ items, defaultValue, value: controlledValue, onValueChange, className, style, theme: themeProp, }: TabsProps): react.JSX.Element;
+
+declare function Terminal({ title, children, className, style, }: {
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}): react.JSX.Element;
+
+type TimelineItem = {
+    title: ReactNode;
+    description?: ReactNode;
+    time?: ReactNode;
+};
+type TimelineProps = {
+    items: TimelineItem[];
+    className?: string;
+    theme?: StyleLabTheme;
+};
+declare function Timeline({ items, className, theme: themeProp, }: TimelineProps): react.JSX.Element;
+
+declare function Toast({ message, onDismiss, className, style, }: {
+    message: string;
+    onDismiss: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}): react.JSX.Element;
+
+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;
+    onCheckedChange?: (checked: boolean) => void;
+    theme?: StyleLabTheme;
+} & react.RefAttributes<HTMLInputElement>>;
+
+declare const tooltipVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TooltipProps = VariantProps<typeof tooltipVariants> & {
+    content: ReactNode;
+    children: ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    className?: string;
+    style?: React.CSSProperties;
+    theme?: StyleLabTheme;
+};
+declare function Tooltip({ content, children, placement, className, style, theme: themeProp, }: TooltipProps): react.JSX.Element;
+
+type ThemeContextValue = {
+    theme: StyleLabTheme;
+    setTheme: (theme: StyleLabTheme) => void;
+};
+declare function ThemeProvider({ children, defaultTheme, }: {
+    children: ReactNode;
+    defaultTheme?: StyleLabTheme;
+}): react.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+/**
+ * Merges class names with Tailwind-aware deduplication.
+ * Use for all component className composition.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Traps focus within the container element while active.
+ * Used for Modal, Dialog, Drawer. Restores focus to previously focused element on cleanup.
+ */
+declare function useFocusTrap(active: boolean, options?: {
+    returnFocus?: boolean;
+}): react.RefObject<HTMLElement | null>;
+
+/**
+ * Invokes callback when a click occurs outside the given element(s).
+ * Used for Dropdown, Modal overlay, Popover.
+ */
+declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], handler: (e: MouseEvent | TouchEvent) => void, options?: {
+    enabled?: boolean;
+}): void;
+
+type KeyHandler = (e: KeyboardEvent) => void;
+/**
+ * Registers keyboard handlers (Escape to close, Arrow keys for lists/tabs).
+ * Returns a stable register function so handlers can be updated without re-running the effect.
+ */
+declare function useKeyboardNavigation(options: {
+    onEscape?: KeyHandler;
+    onArrowDown?: KeyHandler;
+    onArrowUp?: KeyHandler;
+    onArrowLeft?: KeyHandler;
+    onArrowRight?: KeyHandler;
+    enabled?: boolean;
+}): void;
+/**
+ * Returns the next index when moving in a list (for arrow-key navigation).
+ * Wrap: from last goes to first, from first with ArrowUp goes to last.
+ */
+declare function getNextListIndex(current: number, direction: "up" | "down", length: number): number;
+
+export { Accordion, Alert, Avatar, AvatarGroup, Badge, BentoGrid, Breadcrumbs, Button, Calendar, Card, CommandPalette, type ComponentName, DashboardShell, DataTable, DocumentAccordion, Dropdown, Flashcard, GraphicCard, Input, Modal, Navbar, PricingCard, ProgressBar, SectionHeader, Sidebar, Skeleton, Slider, StatsCard, type StyleLabTheme, THEMES, Tabs, Terminal, ThemeProvider, Timeline, Toast, Toggle, Tooltip, cn, getNextListIndex, getThemeClass, useClickOutside, useFocusTrap, useKeyboardNavigation, useTheme };