@yomologic/react-ui 0.2.5 → 0.2.7

package/README.md

@@ -60,7 +60,8 @@ function App() {
 
 - **Container** - Responsive page container
 - **SectionLayout** - Layout wrapper for sections
-- **SidebarNav** - Navigation sidebar
+- **Drawer** - Navigation drawer/sidebar
+- **SidebarNav** - (Deprecated, use Drawer instead)
 
 ### Shared Components
 

package/dist/index.d.mts

@@ -4,7 +4,7 @@ import { ClassValue } from 'clsx';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     isLoading?: boolean;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
@@ -35,7 +35,7 @@ declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<H
 
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     variant?: "default" | "primary" | "success" | "warning" | "danger" | "info";
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     dot?: boolean;
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
@@ -47,8 +47,9 @@ interface CheckboxProps {
     disabled?: boolean;
     className?: string;
     id?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
-declare function Checkbox({ label, checked, onChange, disabled, className, id, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ label, checked, onChange, disabled, className, id, size, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 interface CheckboxOption {
     value: string;
     label: string;
@@ -64,8 +65,9 @@ interface CheckboxGroupProps {
     orientation?: "vertical" | "horizontal";
     required?: boolean;
     disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
-declare function CheckboxGroup({ label, name, options, value, onChange, className, orientation, required, disabled, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+declare function CheckboxGroup({ label, name, options, value, onChange, className, orientation, required, disabled, size, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
 
 interface RadioOption {
     value: string;
@@ -82,8 +84,9 @@ interface RadioGroupProps {
     orientation?: "vertical" | "horizontal";
     required?: boolean;
     disabled?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
-declare function RadioGroup({ label, name, options, value, onChange, className, orientation, required, disabled, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+declare function RadioGroup({ label, name, options, value, onChange, className, orientation, required, disabled, size, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
 interface DropdownOption {
     value: string | number;
@@ -131,12 +134,16 @@ interface DropdownProps {
      * Mark the field as required
      */
     required?: boolean;
+    /**
+     * Size of the dropdown
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     /**
      * Additional CSS classes
      */
     className?: string;
 }
-declare function Dropdown({ label, placeholder, options, value, onChange, children, disabled, error, helperText, required, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ label, placeholder, options, value, onChange, children, disabled, error, helperText, required, size, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
     size?: "sm" | "md" | "lg" | "xl";
@@ -179,21 +186,75 @@ interface SectionLayoutProps {
  */
 declare function SectionLayout({ children, hasStickyPreview, }: SectionLayoutProps): react_jsx_runtime.JSX.Element | null;
 
+interface NavItem$2 {
+    id: string;
+    label?: string;
+    type?: "link" | "button" | "dropdown" | "divider" | "custom";
+    href?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    badge?: string | number;
+    disabled?: boolean;
+    target?: "_blank" | "_self";
+    children?: NavItem$2[];
+    render?: () => React.ReactNode;
+}
+interface NavProps extends React.HTMLAttributes<HTMLElement> {
+    items: NavItem$2[];
+    variant?: "primary" | "secondary" | "outline" | "ghost";
+    orientation?: "horizontal" | "vertical";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    mobileBreakpoint?: "sm" | "md" | "lg";
+    mobileMenuDirection?: "top" | "left" | "right";
+    logo?: React.ReactNode;
+    actions?: React.ReactNode;
+    sticky?: boolean;
+    activeId?: string;
+    onItemClick?: (item: NavItem$2) => void;
+}
+declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<HTMLElement>>;
+
+interface NavItem$1 {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+interface NavSection$1 {
+    title: string;
+    items: NavItem$1[];
+}
+interface DrawerProps {
+    title: string;
+    subtitle?: string;
+    items?: NavItem$1[];
+    sections?: NavSection$1[];
+    activeItem: string;
+    onItemClick: (itemId: string) => void;
+    footer?: React.ReactNode;
+    position?: "left" | "right";
+}
+declare function Drawer({ title, subtitle, items, sections, activeItem, onItemClick, footer, position, }: DrawerProps): react_jsx_runtime.JSX.Element;
+
 interface NavItem {
     id: string;
     label: string;
     icon?: React.ReactNode;
 }
+interface NavSection {
+    title: string;
+    items: NavItem[];
+}
 interface SidebarNavProps {
     title: string;
     subtitle?: string;
-    items: NavItem[];
+    items?: NavItem[];
+    sections?: NavSection[];
     activeItem: string;
     onItemClick: (itemId: string) => void;
     footer?: React.ReactNode;
     position?: "left" | "right";
 }
-declare function SidebarNav({ title, subtitle, items, activeItem, onItemClick, footer, position, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+declare function SidebarNav({ title, subtitle, items, sections, activeItem, onItemClick, footer, position, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
 
 interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: React.ReactNode;
@@ -203,6 +264,337 @@ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Theme System Types
+ *
+ * This defines the structure for customizable themes that can be
+ * edited in the Theme Builder and applied across all components.
+ */
+interface ColorShades {
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+}
+interface ThemeColors {
+    primary: ColorShades;
+    secondary: ColorShades;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    gray: ColorShades;
+    background: string;
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+}
+interface ThemeSpacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+}
+interface ThemeBorderRadius {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+interface ThemeTypography {
+    fontFamily: {
+        sans: string[];
+        mono: string[];
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    fontWeight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+}
+interface ButtonTheme {
+    padding: {
+        xs: {
+            x: string;
+            y: string;
+        };
+        sm: {
+            x: string;
+            y: string;
+        };
+        md: {
+            x: string;
+            y: string;
+        };
+        lg: {
+            x: string;
+            y: string;
+        };
+        xl: {
+            x: string;
+            y: string;
+        };
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderRadius: string;
+    fontWeight: string;
+}
+interface CardTheme {
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    borderRadius: string;
+    borderWidth: string;
+    shadow: {
+        flat: string;
+        elevated: string;
+    };
+}
+interface InputTheme {
+    padding: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderRadius: string;
+    borderWidth: string;
+}
+interface CheckboxTheme {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    labelSpacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    labelFontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderRadius: string;
+}
+interface RadioTheme {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    labelSpacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    labelFontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}
+interface DropdownTheme {
+    padding: {
+        xs: {
+            x: string;
+            y: string;
+        };
+        sm: {
+            x: string;
+            y: string;
+        };
+        md: {
+            x: string;
+            y: string;
+        };
+        lg: {
+            x: string;
+            y: string;
+        };
+        xl: {
+            x: string;
+            y: string;
+        };
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    iconSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    optionPadding: {
+        xs: {
+            x: string;
+            y: string;
+        };
+        sm: {
+            x: string;
+            y: string;
+        };
+        md: {
+            x: string;
+            y: string;
+        };
+        lg: {
+            x: string;
+            y: string;
+        };
+        xl: {
+            x: string;
+            y: string;
+        };
+    };
+    optionFontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderRadius: string;
+    borderWidth: string;
+}
+interface NavTheme {
+    height: string;
+    itemPadding: {
+        xs: {
+            x: string;
+            y: string;
+        };
+        sm: {
+            x: string;
+            y: string;
+        };
+        md: {
+            x: string;
+            y: string;
+        };
+        lg: {
+            x: string;
+            y: string;
+        };
+        xl: {
+            x: string;
+            y: string;
+        };
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    borderRadius: string;
+    gap: string;
+}
+interface ZIndexScale {
+    dropdown: number;
+    popover: number;
+    tooltip: number;
+    overlay: number;
+    nav: number;
+    navMobileOverlay: number;
+    navMobileMenu: number;
+    drawerHeader: number;
+    drawerButton: number;
+    drawerOverlay: number;
+    drawerPanel: number;
+    modalBackdrop: number;
+    modal: number;
+    snackbar: number;
+    toast: number;
+}
+interface ComponentThemes {
+    button: ButtonTheme;
+    card: CardTheme;
+    input: InputTheme;
+    checkbox: CheckboxTheme;
+    radio: RadioTheme;
+    dropdown: DropdownTheme;
+    nav: NavTheme;
+}
+interface Theme {
+    name: string;
+    version: string;
+    colors: ThemeColors;
+    spacing: ThemeSpacing;
+    borderRadius: ThemeBorderRadius;
+    typography: ThemeTypography;
+    zIndex: ZIndexScale;
+    components: ComponentThemes;
+}
+
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    applyTheme: (theme: Theme) => void;
+    resetTheme: () => void;
+}
+declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextType;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dropdown, EmptyState, Input, type NavItem, RadioGroup, SectionLayout, SidebarNav, Spinner, cn };
+export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Drawer, type NavItem$1 as DrawerNavItem, type NavSection$1 as DrawerNavSection, type DrawerProps, Dropdown, EmptyState, Input, Nav, type NavItem$2 as NavItem, type NavProps, type NavSection, RadioGroup, SectionLayout, SidebarNav, type NavItem as SidebarNavItem, Spinner, type Theme, ThemeProvider, cn, useTheme };