@llmnative/react 0.1.1 → 1.0.0

package/themes/cyber.ts

@@ -1,405 +1,469 @@
-import type { Theme, ThemeDefinition, ThemePresetConfig } from '../src/Theme';
-import type { MotionRegistry } from '../src/motion';
-
-export const preset: ThemePresetConfig = {
-    mode: 'dark' as const,
-    radius: 0,
-    colors: {
-        background:           '0 0% 98%',
-        foreground:           '215 25% 16%',
-        card:                 '0 0% 100%',
-        cardForeground:       '215 25% 16%',
-        popover:              '0 0% 100%',
-        popoverForeground:    '215 25% 16%',
-        primary:              '160 84% 39%',
-        primaryForeground:    '0 0% 0%',
-        secondary:            '160 20% 92%',
-        secondaryForeground:  '160 25% 20%',
-        muted:                '160 15% 93%',
-        mutedForeground:      '215 15% 50%',
-        accent:               '160 30% 90%',
-        accentForeground:     '160 84% 25%',
-        destructive:          '0 72% 51%',
-        destructiveForeground:'0 0% 100%',
-        success:              '160 84% 39%',
-        successForeground:    '0 0% 0%',
-        warning:              '45 96% 48%',
-        warningForeground:    '0 0% 0%',
-        info:                 '199 89% 48%',
-        infoForeground:       '0 0% 0%',
-        border:               '160 20% 85%',
-        input:                '160 20% 85%',
-        ring:                 '160 84% 39%',
-    },
-    dark: {
-        background:           '220 20% 7%',
-        foreground:           '160 10% 90%',
-        card:                 '220 20% 10%',
-        cardForeground:       '160 10% 90%',
-        popover:              '220 20% 10%',
-        popoverForeground:    '160 10% 90%',
-        primary:              '160 84% 39%',
-        primaryForeground:    '0 0% 0%',
-        secondary:            '220 20% 15%',
-        secondaryForeground:  '160 10% 75%',
-        muted:                '220 20% 14%',
-        mutedForeground:      '220 10% 55%',
-        accent:               '160 60% 15%',
-        accentForeground:     '160 84% 70%',
-        destructive:          '0 72% 51%',
-        destructiveForeground:'0 0% 100%',
-        success:              '160 84% 45%',
-        successForeground:    '0 0% 0%',
-        warning:              '45 96% 55%',
-        warningForeground:    '0 0% 0%',
-        info:                 '199 89% 55%',
-        infoForeground:       '0 0% 0%',
-        border:               '220 20% 18%',
-        input:                '220 20% 18%',
-        ring:                 '160 84% 39%',
-    },
-};
-
-export const motion: MotionRegistry = {
-    none: {
-        from: {},
-        to: {},
-        transition: { duration: 0, easing: 'linear', properties: ['opacity', 'transform', 'box-shadow'] },
-        reducedMotion: 'always',
-    },
-    fade: {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
-        transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity'] },
-        reducedMotion: 'respect-user',
-    },
-    fadeUp: {
-        from: { opacity: 0, transform: 'translateY(10px)' },
-        to: { opacity: 1, transform: 'translateY(0)' },
-        transition: { duration: 200, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
-        reducedMotion: 'respect-user',
-    },
-    fadeDown: {
-        from: { opacity: 0, transform: 'translateY(-10px)' },
-        to: { opacity: 1, transform: 'translateY(0)' },
-        transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform', 'visibility'] },
-        reducedMotion: 'respect-user',
-    },
-    slideFromRight: {
-        from: { opacity: 0, transform: 'translateX(100%)' },
-        to: { opacity: 1, transform: 'translateX(0)' },
-        transition: { duration: 220, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
-        reducedMotion: 'respect-user',
-    },
-    slideFromLeft: {
-        from: { opacity: 0, transform: 'translateX(-100%)' },
-        to: { opacity: 1, transform: 'translateX(0)' },
-        transition: { duration: 220, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
-        reducedMotion: 'respect-user',
-    },
-    slideFromTop: {
-        from: { opacity: 0, transform: 'translateY(-100%)' },
-        to: { opacity: 1, transform: 'translateY(0)' },
-        transition: { duration: 220, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
-        reducedMotion: 'respect-user',
-    },
-    slideFromBottom: {
-        from: { opacity: 0, transform: 'translateY(100%)' },
-        to: { opacity: 1, transform: 'translateY(0)' },
-        transition: { duration: 220, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
-        reducedMotion: 'respect-user',
-    },
-    press: {
-        from: {},
-        to: { transform: 'scale(0.97)' },
-        transition: { duration: 110, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['transform', 'box-shadow'] },
-        reducedMotion: 'respect-user',
-    },
-    imageZoom: {
-        from: { transform: 'scale(1)' },
-        to: { transform: 'scale(1.06)' },
-        transition: { duration: 280, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['transform'] },
-        reducedMotion: 'respect-user',
-    },
-};
-
-export const components: Theme = {
-    Grid: {
-        Card: {
-            wrapClass: '',
-            className: '',
-            headerClass: 'flex justify-between',
-            bodyClass: 'p-0',
-            footerClass: '',
-            showArrow: false,
-            showLoader: false,
-        },
-        Table: {
-            wrapClass: '',
-            className: 'table-striped',
-            headerClass: '',
-            bodyClass: '',
-            footerClass: '',
-            scrollClass: 'fixed-table-container',
-            selectedClass: 'table-info',
-        },
-        Gallery: {
-            wrapClass: '',
-            className: '',
-            scrollClass: '',
-            headerClass: '',
-            bodyClass: '',
-            footerClass: '',
-            selectedClass: 'bg-primary/20',
-            gutterSize: 1,
-            rowCols: 4,
-        },
-        Modal: {
-            mode: 'form',
-            size: 'lg',
-            position: 'center',
-            wrapClass: '',
-            className: '',
-            headerClass: '',
-            titleClass: '',
-            subTitleClass: 'pr-1 text-muted-foreground',
-            bodyClass: '',
-            footerClass: '',
-            iconExpand: 'fullscreen',
-            iconCollapse: 'fullscreen-exit',
-            motion: {
-                center: 'fade',
-                top: 'slideFromTop',
-                left: 'slideFromLeft',
-                right: 'slideFromRight',
-                bottom: 'slideFromBottom',
-                backdrop: 'fade',
-            },
-        },
-        i18n: {
-            headerAdd: 'Aggiungi',
-            headerEdit: 'Modifica',
-            buttonAdd: 'Aggiungi',
-        },
-    },
-    Table: {
-        wrapClass: 'bootstrap-table',
-        className: 'table-striped',
-        headerClass: '',
-        bodyClass: '',
-        footerClass: '',
-        scrollClass: 'fixed-table-container',
-        selectedClass: 'table-info',
-    },
-    Gallery: {
-        wrapClass: '',
-        className: '',
-        scrollClass: '',
-        headerClass: '',
-        bodyClass: '',
-        footerClass: '',
-        selectedClass: 'bg-primary/20',
-        gutterSize: 4,
-        rowCols: 2,
-    },
-    Pagination: {
-        wrapClass: '',
-        className: '',
-        stickyClass: 'fixed-bottom mx-5',
-        scrollToTop: false,
-        scrollBehavior: 'auto',
-        maxItems: 5,
-        sticky: true,
-        align: 'end',
-    },
-    Carousel: {
-        showIndicators: true,
-        showControls: true,
-        showCaption: true,
-        layoutDark: false,
-        autoPlay: true,
-    },
-    Card: {
-        wrapClass: '',
-        className: '',
-        headerClass: 'flex justify-between bg-white/[.15] font-normal',
-        bodyClass: 'flex flex-col',
-        footerClass: '',
-        showLoader: false,
-        showArrow: false,
-    },
-    Loader: {
-        wrapClass: '',
-        className: '',
-        icon: 'custom-loader',
-        title: 'Loading..',
-        description: '',
-    },
-    ActionButton: {
-        className: 'btn-primary',
-        badgeClass: 'rounded-full bg-destructive text-destructive-foreground',
-        motion: {
-            press: 'press',
-        },
-    },
-    LoadingButton: {
-        className: 'btn-primary',
-        badgeClass: 'rounded-full bg-destructive text-destructive-foreground',
-        motion: {
-            press: 'press',
-        },
-    },
-    LinkButton: {
-        className: 'btn-outline-secondary',
-    },
-    Alert: {
-        className: '',
-    },
-    Badge: {
-        className: '',
-    },
-    Modal: {
-        size: 'lg',
-        position: 'center',
-        wrapClass: '',
-        className: '',
-        headerClass: '',
-        titleClass: '',
-        subTitleClass: 'pr-1 text-muted-foreground',
-        bodyClass: '',
-        footerClass: '',
-        iconExpand: 'fullscreen',
-        iconCollapse: 'fullscreen-exit',
-        motion: {
-            center: 'fade',
-            top: 'slideFromTop',
-            left: 'slideFromLeft',
-            right: 'slideFromRight',
-            bottom: 'slideFromBottom',
-            backdrop: 'fade',
-        },
-    },
-    Dropdown: {
-        wrapClass: '',
-        className: '',
-        buttonClass: 'btn btn-outline-primary',
-        badgeClass: '',
-        menuClass: '',
-        menuHeaderClass: '',
-        menuItemClass: '',
-        menuDividerClass: '',
-        headerClass: '',
-        footerClass: '',
-        Menu: {
-            wrapClass: '',
-            className: 'list-none p-0 m-0',
-            headerClass: '',
-            itemClass: '',
-            linkClass: 'flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent',
-            iconClass: 'text-muted-foreground',
-            textClass: '',
-            badgeClass: '',
-            arrowClass: '',
-            submenuClass: '',
-        },
-        motion: {
-            open: 'fadeDown',
-            close: 'fadeDown',
-            press: 'press',
-        },
-    },
-    Notifications: {
-        wrapClass: 'menu-item',
-        Dropdown: {
-            className: '',
-            buttonClass: 'btn btn-link',
-            menuClass: 'mt-1 fs-11px w-300px pt-1',
-        },
-    },
-    Select: {
-        wrapClass: '',
-        className: '',
-    },
-    Autocomplete: {
-        wrapClass: '',
-        className: '',
-    },
-    Form: {
-        wrapClass: '',
-        buttonSaveClass: 'btn-outline-primary',
-        buttonDeleteClass: 'btn-outline-danger',
-        buttonBackClass: 'btn-link',
-        Card: {
-            headerClass: '',
-            bodyClass: '',
-            footerClass: 'text-right',
-        },
-        i18n: {
-            headerAdd: 'Aggiungi',
-            headerEdit: 'Modifica',
-            headerNewRecord: 'Nuovo Record',
-            buttonSave: 'Salva',
-            buttonDelete: 'Elimina',
-            buttonBack: 'Indietro',
-            noticeRequiredFields: 'Per favore, compila tutti i campi obbligatori',
-        },
-    },
-    Menu: {
-        wrapClass: 'flex-1 overflow-auto p-4',
-        className: 'navbar-nav flex-col mb-auto',
-        headerClass: '',
-        itemClass: 'nav-item',
-        linkClass: 'nav-link',
-        iconClass: 'mr-1',
-        textClass: 'flex-grow-1',
-        badgeClass: 'ml-1',
-        arrowClass: '',
-        submenuClass: 'nav flex-col ml-4',
-    },
-    Brand: {
-        wrapClass: '',
-        className: 'brand',
-        logoClass: 'navbar-brand',
-        labelClass: 'navbar-text',
-    },
-    SignIn: {
-        className: 'flex items-center',
-        avatarClass: 'avatar rounded-full mx-2',
-    },
-    Image: {
-        wrapClass: '',
-        className: '',
-        motion: {
-            enter: 'fade',
-            hover: 'imageZoom',
-        },
-    },
-    ImageAvatar: {
-        wrapClass: '',
-        className: '',
-        motion: { enter: 'fade', hover: 'imageZoom' },
-    },
-    Percentage: {
-        wrapClass: '',
-        className: '',
-    },
-    Tab: {
-        wrapClass: '',
-        className: '',
-        motion: {
-            enter: 'fadeUp',
-        },
-    },
-    Code: {
-        wrapClass: '',
-        className: '',
-    },
-    Prompt: {
-        wrapClass: '',
-        className: '',
-    },
-};
-
-const definition: ThemeDefinition = { preset, motion, components };
-
-export default definition;
+import type { Theme, ThemeDefinition, ThemePresetConfig } from '../src/Theme';
+import type { MotionRegistry } from '../src/motion';
+
+export const preset: ThemePresetConfig = {
+    mode: 'dark' as const,
+    radius: 0,
+    colors: {
+        background:           '0 0% 98%',
+        foreground:           '215 25% 16%',
+        card:                 '0 0% 100%',
+        cardForeground:       '215 25% 16%',
+        popover:              '0 0% 100%',
+        popoverForeground:    '215 25% 16%',
+        primary:              '160 84% 39%',
+        primaryForeground:    '0 0% 0%',
+        secondary:            '160 20% 92%',
+        secondaryForeground:  '160 25% 20%',
+        muted:                '160 15% 93%',
+        mutedForeground:      '215 15% 50%',
+        accent:               '160 30% 90%',
+        accentForeground:     '160 84% 25%',
+        destructive:          '0 72% 51%',
+        destructiveForeground:'0 0% 100%',
+        success:              '160 84% 39%',
+        successForeground:    '0 0% 0%',
+        warning:              '45 96% 48%',
+        warningForeground:    '0 0% 0%',
+        info:                 '199 89% 48%',
+        infoForeground:       '0 0% 0%',
+        border:               '160 20% 85%',
+        input:                '160 20% 85%',
+        ring:                 '160 84% 39%',
+    },
+    dark: {
+        background:           '220 20% 7%',
+        foreground:           '160 10% 90%',
+        card:                 '220 20% 10%',
+        cardForeground:       '160 10% 90%',
+        popover:              '220 20% 10%',
+        popoverForeground:    '160 10% 90%',
+        primary:              '160 84% 39%',
+        primaryForeground:    '0 0% 0%',
+        secondary:            '220 20% 15%',
+        secondaryForeground:  '160 10% 75%',
+        muted:                '220 20% 14%',
+        mutedForeground:      '220 10% 55%',
+        accent:               '160 60% 15%',
+        accentForeground:     '160 84% 70%',
+        destructive:          '0 72% 51%',
+        destructiveForeground:'0 0% 100%',
+        success:              '160 84% 45%',
+        successForeground:    '0 0% 0%',
+        warning:              '45 96% 55%',
+        warningForeground:    '0 0% 0%',
+        info:                 '199 89% 55%',
+        infoForeground:       '0 0% 0%',
+        border:               '220 20% 18%',
+        input:                '220 20% 18%',
+        ring:                 '160 84% 39%',
+    },
+};
+
+export const motion: MotionRegistry = {
+    none: {
+        from: {},
+        to: {},
+        transition: { duration: 0, easing: 'linear', properties: ['opacity', 'transform', 'box-shadow'] },
+        reducedMotion: 'always',
+    },
+    fade: {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+        transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity'] },
+        reducedMotion: 'respect-user',
+    },
+    fadeUp: {
+        from: { opacity: 0, transform: 'translateY(10px)' },
+        to: { opacity: 1, transform: 'translateY(0)' },
+        transition: { duration: 200, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
+        reducedMotion: 'respect-user',
+    },
+    fadeDown: {
+        from: { opacity: 0, transform: 'translateY(-10px)' },
+        to: { opacity: 1, transform: 'translateY(0)' },
+        transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform', 'visibility'] },
+        reducedMotion: 'respect-user',
+    },
+    slideFromRight: {
+        from: { opacity: 0, transform: 'translateX(100%)' },
+        to: { opacity: 1, transform: 'translateX(0)' },
+        transition: { duration: 220, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
+        reducedMotion: 'respect-user',
+    },
+    slideFromLeft: {
+        from: { opacity: 0, transform: 'translateX(-100%)' },
+        to: { opacity: 1, transform: 'translateX(0)' },
+        transition: { duration: 220, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
+        reducedMotion: 'respect-user',
+    },
+    slideFromTop: {
+        from: { opacity: 0, transform: 'translateY(-100%)' },
+        to: { opacity: 1, transform: 'translateY(0)' },
+        transition: { duration: 220, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
+        reducedMotion: 'respect-user',
+    },
+    slideFromBottom: {
+        from: { opacity: 0, transform: 'translateY(100%)' },
+        to: { opacity: 1, transform: 'translateY(0)' },
+        transition: { duration: 220, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
+        reducedMotion: 'respect-user',
+    },
+    press: {
+        from: {},
+        to: { transform: 'scale(0.97)' },
+        transition: { duration: 110, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['transform', 'box-shadow'] },
+        reducedMotion: 'respect-user',
+    },
+    imageZoom: {
+        from: { transform: 'scale(1)' },
+        to: { transform: 'scale(1.06)' },
+        transition: { duration: 280, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['transform'] },
+        reducedMotion: 'respect-user',
+    },
+};
+
+export const components: Theme = {
+    Grid: {
+        Card: {
+            wrapperClassName: '',
+            className: '',
+            headerClassName: 'flex justify-between',
+            bodyClassName: 'p-0',
+            footerClassName: '',
+            loading: false,
+        },
+        Table: {
+            wrapperClassName: '',
+            className: '',
+            headerClassName: '',
+            bodyClassName: '',
+            footerClassName: '',
+            scrollClassName: 'overflow-x-auto',
+            selectedClassName: 'bg-primary/10',
+        },
+        Gallery: {
+            wrapperClassName: '',
+            className: '',
+            scrollClassName: '',
+            headerClassName: '',
+            bodyClassName: '',
+            footerClassName: '',
+            selectedClassName: 'bg-primary/20',
+            gap: 1,
+            rowCols: 4,
+        },
+        Modal: {
+            mode: 'form',
+            size: 'lg',
+            position: 'center',
+            wrapperClassName: '',
+            className: '',
+            headerClassName: '',
+            titleClassName: '',
+            subtitleClassName: 'pr-1 text-muted-foreground',
+            bodyClassName: '',
+            footerClassName: '',
+            iconExpand: 'fullscreen',
+            iconCollapse: 'fullscreen-exit',
+            motion: {
+                center: 'fade',
+                top: 'slideFromTop',
+                left: 'slideFromLeft',
+                right: 'slideFromRight',
+                bottom: 'slideFromBottom',
+                backdrop: 'fade',
+            },
+        },
+    },
+    Table: {
+        wrapperClassName: '',
+        className: '',
+        headerClassName: '',
+        bodyClassName: '',
+        footerClassName: '',
+        scrollClassName: 'overflow-x-auto',
+        selectedClassName: 'bg-primary/10',
+    },
+    Gallery: {
+        wrapperClassName: '',
+        className: '',
+        scrollClassName: '',
+        headerClassName: '',
+        bodyClassName: '',
+        footerClassName: '',
+        selectedClassName: 'bg-primary/20',
+        gap: 4,
+        rowCols: 2,
+    },
+    Pagination: {
+        wrapperClassName: '',
+        className: '',
+        stickyClassName: 'fixed bottom-0 left-0 right-0 mx-5',
+        scrollToTop: false,
+        scrollBehavior: 'auto',
+        maxItems: 5,
+        sticky: true,
+        align: 'end',
+    },
+    Carousel: {
+        showIndicators: true,
+        showControls: true,
+        showCaption: true,
+        dark: false,
+        autoPlay: true,
+    },
+    Card: {
+        wrapperClassName: '',
+        className: '',
+        headerClassName: 'flex justify-between bg-white/[.15] font-normal',
+        bodyClassName: 'flex flex-col',
+        footerClassName: '',
+        loading: false,
+    },
+    Loader: {
+        wrapperClassName: '',
+        className: '',
+        icon: 'custom-loader',
+        title: 'Loading..',
+        description: '',
+    },
+    ActionButton: {
+        className: 'btn-primary',
+        badgeClassName: 'rounded-full bg-destructive text-destructive-foreground',
+        motion: {
+            press: 'press',
+        },
+    },
+    LoadingButton: {
+        className: 'btn-primary',
+        badgeClassName: 'rounded-full bg-destructive text-destructive-foreground',
+        motion: {
+            press: 'press',
+        },
+    },
+    LinkButton: {
+        className: 'btn-outline-secondary',
+    },
+    Alert: {
+        className: '',
+    },
+    Badge: {
+        className: '',
+    },
+    Modal: {
+        size: 'lg',
+        position: 'center',
+        wrapperClassName: '',
+        className: '',
+        headerClassName: '',
+        titleClassName: '',
+        subtitleClassName: 'pr-1 text-muted-foreground',
+        bodyClassName: '',
+        footerClassName: '',
+        iconExpand: 'fullscreen',
+        iconCollapse: 'fullscreen-exit',
+        motion: {
+            center: 'fade',
+            top: 'slideFromTop',
+            left: 'slideFromLeft',
+            right: 'slideFromRight',
+            bottom: 'slideFromBottom',
+            backdrop: 'fade',
+        },
+    },
+    Dropdown: {
+        wrapperClassName: '',
+        className: '',
+        triggerClassName: 'btn btn-outline-primary',
+        badgeClassName: '',
+        menuClassName: 'rounded-none border-border/70 bg-popover/95 shadow-[0_0_0_1px_hsl(var(--border)/0.55),0_12px_32px_rgba(0,0,0,0.35)] supports-[backdrop-filter]:bg-popover/92',
+        menuHeaderClass: 'text-muted-foreground/75',
+        menuItemClass: '',
+        menuDividerClass: 'bg-border/70',
+        headerClassName: '',
+        footerClassName: '',
+        Menu: {
+            wrapperClassName: '',
+            className: 'list-none p-0 m-0',
+            headerClassName: '',
+            itemClassName: '',
+            linkClassName: 'flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent',
+            iconClassName: 'text-muted-foreground',
+            textClassName: '',
+            badgeClassName: '',
+            arrowClassName: '',
+            submenuClassName: '',
+        },
+        motion: {
+            open: 'fadeDown',
+            close: 'fadeDown',
+            press: 'press',
+        },
+    },
+    Notifications: {
+        wrapperClassName: '',
+        Dropdown: {
+            className: '',
+            triggerClassName: 'btn btn-link',
+            menuClassName: 'mt-1 text-[11px] w-[300px] pt-1',
+        },
+    },
+    Select: {
+        wrapperClassName: '',
+        className: '',
+    },
+    Autocomplete: {
+        wrapperClassName: '',
+        className: '',
+    },
+    Form: {
+        wrapperClassName: '',
+        buttonSaveClass: 'btn-outline-primary',
+        buttonDeleteClass: 'btn-outline-danger',
+        buttonBackClass: 'btn-link',
+        Card: {
+            headerClassName: '',
+            bodyClassName: '',
+            footerClassName: 'flex items-center justify-end gap-3',
+        },
+    },
+    Menu: {
+        wrapperClassName: 'flex-1 overflow-auto p-4',
+        className: 'flex flex-col mb-auto',
+        headerClassName: '',
+        itemClassName: '',
+        linkClassName: 'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground',
+        iconClassName: 'mr-1 shrink-0',
+        textClassName: 'flex-1',
+        badgeClassName: 'ml-1',
+        arrowClassName: '',
+        submenuClassName: 'mt-1 flex flex-col gap-1 pl-4',
+    },
+    SideNav: {
+        wrapperClassName: '',
+        shellClassName: 'border-r border-border bg-card/95 text-foreground',
+        overlayClassName: 'shadow-[0_0_32px_rgba(16,185,129,0.18)]',
+        headerClassName: 'border-b border-border px-1.5 py-2',
+        navClassName: 'px-1.5 py-2',
+        footerClassName: 'border-t border-border px-1.5 py-2',
+        groupLabelClassName: 'text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/70 select-none',
+        groupDividerClassName: 'bg-border/70',
+        itemClassName: 'rounded-none',
+        itemActiveClassName: 'bg-primary/12 text-primary font-medium',
+        itemChildActiveClassName: 'bg-accent/90 text-foreground font-medium',
+        itemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/80',
+        itemIconClassName: '',
+        itemTextClassName: '',
+        itemBadgeClassName: 'ml-auto shrink-0 text-[10px] font-semibold leading-none px-1.5 py-[3px] rounded-none bg-primary/15 text-primary',
+        itemCollapsedBadgeClassName: 'absolute -top-0.5 -right-1 h-[7px] w-[7px] rounded-none bg-primary ring-1 ring-card',
+        itemToggleClassName: 'shrink-0 flex items-center justify-center w-6 h-6 rounded-none transition-colors text-muted-foreground/50 hover:text-foreground hover:bg-accent/80',
+        subItemClassName: 'rounded-none',
+        subItemActiveClassName: 'bg-primary/12 text-primary font-medium',
+        subItemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/80',
+        collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-none w-8 h-8 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent/80',
+    },
+    Toolbar: {
+        wrapperClassName: 'z-20 w-full',
+        stickyClassName: 'sticky top-0',
+        restingClassName: 'bg-transparent border-transparent shadow-none',
+        scrolledClassName: 'border-b border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/85',
+        innerClassName: 'flex min-h-14 items-center gap-3 px-4 md:px-6',
+        leadingClassName: 'flex min-w-0 items-center gap-2 shrink-0',
+        centerClassName: 'flex min-w-0 flex-1 items-center gap-3',
+        trailingClassName: 'flex items-center gap-2 shrink-0',
+    },
+    ListCard: {
+        wrapperClassName: '',
+        className: 'rounded-none shadow-[0_0_0_1px_hsl(var(--border)/0.7)]',
+        activeClassName: 'border-primary/50 bg-primary/10 text-foreground',
+        inactiveClassName: 'hover:bg-accent/70',
+        disabledClassName: 'cursor-not-allowed opacity-60',
+        dashedClassName: 'border-dashed',
+        compactClassName: 'p-3',
+        leadingClassName: 'rounded-none',
+        bodyClassName: '',
+        headerClassName: '',
+        titleClassName: '',
+        descriptionClassName: '',
+        metaClassName: '',
+        badgeClassName: '',
+        trailingClassName: '',
+        footerClassName: '',
+        motion: {
+            press: 'press',
+        },
+    },
+    ProviderSwitcher: {
+        wrapperClassName: 'w-full',
+        className: 'w-full',
+        triggerClassName: 'flex w-full items-center gap-2 rounded-none px-1.5 py-1.5 text-left text-sm font-semibold text-foreground transition-colors hover:bg-accent/70',
+        disabledClassName: 'pointer-events-none opacity-60',
+        iconWrapperClassName: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-none bg-primary/10 text-primary',
+        labelClassName: 'block truncate',
+        captionClassName: 'block truncate text-[11px] font-normal text-muted-foreground/80',
+        chevronClassName: 'ml-auto shrink-0 text-muted-foreground/70',
+        itemClassName: 'rounded-none',
+        itemActiveClassName: '',
+        itemInactiveClassName: '',
+        itemMetaClassName: 'text-xs text-muted-foreground',
+        checkClassName: 'text-primary',
+    },
+    Brand: {
+        wrapperClassName: '',
+        className: 'flex items-center',
+        logoClassName: 'flex items-center gap-2 font-semibold',
+        labelClassName: 'text-sm font-medium',
+    },
+    SignIn: {
+        className: 'flex items-center',
+        avatarClass: 'mx-2 rounded-full object-cover',
+    },
+    Image: {
+        wrapperClassName: '',
+        className: '',
+        motion: {
+            enter: 'fade',
+            hover: 'imageZoom',
+        },
+    },
+    ImageAvatar: {
+        wrapperClassName: '',
+        className: '',
+        motion: { enter: 'fade', hover: 'imageZoom' },
+    },
+    Percentage: {
+        wrapperClassName: '',
+        className: '',
+    },
+    Tab: {
+        wrapperClassName: '',
+        className: '',
+        menuClassName: '',
+        itemClassName: '',
+        contentClassName: '',
+        triggerClassName: '',
+        activeTriggerClassName: '',
+        inactiveTriggerClassName: '',
+        motion: {
+            enter: 'fadeUp',
+        },
+    },
+    Code: {
+        wrapperClassName: '',
+        className: '',
+    },
+    CodeEditor: {
+        wrapperClassName: '',
+        className: '',
+    },
+    Prompt: {
+        wrapperClassName: '',
+        className: '',
+    },
+};
+
+const definition: ThemeDefinition = { preset, motion, components };
+
+export default definition;
+