@llmnative/react 1.18.1 → 1.19.1

package/themes/default.ts

@@ -1,495 +1,502 @@
-import type { Theme, ThemeDefinition, ThemePresetConfig } from '../src/Theme';
-import type { MotionRegistry } from '../src/motion';
-
-export const preset: ThemePresetConfig = {
-    mode: 'light',
-    radius: 0.5,
-    colors: {
-        background:           '0 0% 100%',
-        foreground:           '222.2 84% 4.9%',
-        card:                 '0 0% 100%',
-        cardForeground:       '222.2 84% 4.9%',
-        popover:              '0 0% 100%',
-        popoverForeground:    '222.2 84% 4.9%',
-        primary:              '221.2 83.2% 53.3%',
-        primaryForeground:    '210 40% 98%',
-        secondary:            '210 40% 96.1%',
-        secondaryForeground:  '222.2 47.4% 11.2%',
-        muted:                '210 40% 96.1%',
-        mutedForeground:      '215.4 16.3% 46.9%',
-        accent:               '210 40% 96.1%',
-        accentForeground:     '222.2 47.4% 11.2%',
-        destructive:          '0 84.2% 60.2%',
-        destructiveForeground:'210 40% 98%',
-        success:              '142.1 76.2% 36.3%',
-        successForeground:    '0 0% 100%',
-        warning:              '32.1 94.6% 43.7%',
-        warningForeground:    '0 0% 100%',
-        info:                 '198.6 88.7% 48.4%',
-        infoForeground:       '0 0% 100%',
-        border:               '214.3 31.8% 91.4%',
-        input:                '214.3 31.8% 91.4%',
-        ring:                 '221.2 83.2% 53.3%',
-    },
-    dark: {
-        background:           '222.2 84% 4.9%',
-        foreground:           '210 40% 98%',
-        card:                 '222.2 84% 4.9%',
-        cardForeground:       '210 40% 98%',
-        popover:              '222.2 84% 4.9%',
-        popoverForeground:    '210 40% 98%',
-        primary:              '217.2 91.2% 59.8%',
-        primaryForeground:    '222.2 47.4% 11.2%',
-        secondary:            '217.2 32.6% 17.5%',
-        secondaryForeground:  '210 40% 98%',
-        muted:                '217.2 32.6% 17.5%',
-        mutedForeground:      '215 20.2% 65.1%',
-        accent:               '217.2 32.6% 17.5%',
-        accentForeground:     '210 40% 98%',
-        destructive:          '0 62.8% 30.6%',
-        destructiveForeground:'210 40% 98%',
-        success:              '142.1 70.6% 45.3%',
-        successForeground:    '0 0% 100%',
-        warning:              '32.1 94.6% 55%',
-        warningForeground:    '0 0% 100%',
-        info:                 '198.6 88.7% 60%',
-        infoForeground:       '0 0% 100%',
-        border:               '217.2 32.6% 17.5%',
-        input:                '217.2 32.6% 17.5%',
-        ring:                 '224.3 76.3% 48%',
-    },
-};
-
-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: 160, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity'] },
-        reducedMotion: 'respect-user',
-    },
-    fadeUp: {
-        from: { opacity: 0, transform: 'translateY(8px)' },
-        to: { opacity: 1, transform: 'translateY(0)' },
-        transition: { duration: 160, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity', 'transform'] },
-        reducedMotion: 'respect-user',
-    },
-    fadeDown: {
-        from: { opacity: 0, transform: 'translateY(-8px)' },
-        to: { opacity: 1, transform: 'translateY(0)' },
-        transition: { duration: 140, easing: 'cubic-bezier(0.2, 0, 0, 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.98)' },
-        transition: { duration: 100, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['transform', 'box-shadow'] },
-        reducedMotion: 'respect-user',
-    },
-    imageZoom: {
-        from: { transform: 'scale(1)' },
-        to: { transform: 'scale(1.06)' },
-        transition: { duration: 300, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['transform'] },
-        reducedMotion: 'respect-user',
-    },
-};
-
-export const components: Theme = {
-    Grid: {
-        // REVERT NOTE (2026-07-15): before this change, `Card.className` was 'border-0' only
-        // (outer border removed, but bg-card/rounded/shadow kept — header+footer still sat in
-        // a white rounded box), `Table.wrapperClassName`/`Gallery.wrapperClassName` were both
-        // ''. The change moves the "raised card" surface (border+bg+shadow+radius) from the
-        // Card wrapper (which held header+body+footer together) down into Table/Gallery's own
-        // wrapper — so the toolbar row (view toggle, column picker, New component…) sits
-        // directly on the page's floor background with no box of its own, and only the actual
-        // data surface reads as a raised panel. To revert: restore the four blocks below to
-        // the values in this note.
-        Card: {
-            wrapperClassName: '',
-            // Fully transparent/borderless/shapeless now — header and footer (when used) are
-            // meant to float on the page's own background, not sit inside a card of their own;
-            // the "raised surface" look lives in Table/Gallery's wrapperClassName instead.
-            className: 'rounded-none border-0 bg-transparent shadow-none',
-            headerClassName: 'flex justify-between border-b-0 bg-transparent px-0 py-2',
-            bodyClassName: 'p-0 mt-2',
-            footerClassName: 'border-t-0 bg-transparent px-0 py-2',
-            loading: false,
-        },
-        Table: {
-            // The table's own raised surface — previously this border+bg lived on the
-            // shared Card wrapper (see revert note above).
-            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm',
-            className: '',
-            headerClassName: '',
-            bodyClassName: '',
-            footerClassName: '',
-            scrollClassName: 'overflow-x-auto',
-            selectedClassName: 'bg-primary/10',
-        },
-        Gallery: {
-            // Same rationale as Table above; `p-3` so cards don't sit flush against the border.
-            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm p-3',
-            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: 'loader-2',
-        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: 'border-border/60 bg-popover/95 shadow-xl shadow-black/5 backdrop-blur supports-[backdrop-filter]:bg-popover/90 dark:shadow-black/20',
-        menuHeaderClass: 'text-muted-foreground/70',
-        menuItemClass: '',
-        menuDividerClass: 'bg-border/60',
-        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: '',
-    },
-    AddressAutocomplete: {
-        wrapperClassName: '',
-        className: '',
-        menuClassName: 'border-border/60 bg-popover/95 shadow-xl shadow-black/5 backdrop-blur supports-[backdrop-filter]:bg-popover/90 dark:shadow-black/20',
-        itemClassName: '',
-    },
-    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/80 text-foreground backdrop-blur supports-[backdrop-filter]:bg-card/70',
-        overlayClassName: 'shadow-xl',
-        headerClassName: 'border-b border-border/60 px-1.5 py-2',
-        navClassName: 'px-1.5 py-2',
-        footerClassName: 'border-t border-border/60 px-1.5 py-2',
-        groupLabelClassName: 'text-[10.5px] font-semibold uppercase tracking-widest text-muted-foreground/60 select-none',
-        groupDividerClassName: 'bg-border/50',
-        itemClassName: 'rounded-lg',
-        itemActiveClassName: 'bg-primary/10 text-primary font-medium shadow-sm',
-        itemChildActiveClassName: 'bg-accent/80 text-foreground font-medium',
-        itemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/70',
-        itemIconClassName: '',
-        itemTextClassName: '',
-        itemBadgeClassName: 'ml-auto shrink-0 text-[10px] font-semibold leading-none px-1.5 py-[3px] rounded-full bg-primary/15 text-primary',
-        itemCollapsedBadgeClassName: 'absolute -top-0.5 -right-1 h-[7px] w-[7px] rounded-full bg-primary ring-1 ring-card',
-        itemToggleClassName: 'shrink-0 flex items-center justify-center w-6 h-6 rounded-md transition-colors text-muted-foreground/50 hover:text-foreground hover:bg-accent/70',
-        subItemClassName: 'rounded-md',
-        subItemActiveClassName: 'bg-primary/10 text-primary font-medium',
-        subItemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/70',
-        collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-md w-8 h-8 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent/70',
-    },
-    Toolbar: {
-        wrapperClassName: 'z-20 w-full',
-        stickyClassName: 'sticky top-0',
-        restingClassName: 'bg-transparent border-transparent shadow-none',
-        scrolledClassName: 'border-b border-border/60 bg-background/85 backdrop-blur supports-[backdrop-filter]:bg-background/75',
-        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: 'shadow-sm',
-        activeClassName: 'border-primary/30 bg-primary/10 shadow-sm',
-        inactiveClassName: 'hover:bg-accent/40',
-        disabledClassName: 'cursor-not-allowed opacity-60',
-        dashedClassName: 'border-dashed',
-        compactClassName: 'p-3',
-        leadingClassName: '',
-        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-xl px-1.5 py-1.5 text-left text-sm font-semibold text-foreground transition-colors hover:bg-accent/40',
-        disabledClassName: 'pointer-events-none opacity-60',
-        iconWrapperClassName: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg 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: '',
-        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: false,
-        },
-    },
-    ImageAvatar: {
-        wrapperClassName: '',
-        className: '',
-        motion: { enter: 'fade', hover: false },
-    },
-    Percentage: {
-        wrapperClassName: '',
-        className: '',
-    },
-    Tab: {
-        wrapperClassName: '',
-        className: '',
-        menuClassName: '',
-        itemClassName: '',
-        contentClassName: '',
-        triggerClassName: '',
-        activeTriggerClassName: '',
-        inactiveTriggerClassName: '',
-        motion: {
-            enter: 'fadeUp',
-        },
-    },
-    Code: {
-        wrapperClassName: '',
-        className: '',
-    },
-    CodeEditor: {
-        wrapperClassName: '',
-        className: '',
-    },
-    Prompt: {
-        wrapperClassName: '',
-        className: '',
-    },
-    Repeat: {
-        itemClassName: '',
-        inlineItemClassName: '',
-        addButtonClassName: '',
-    },
-};
-
-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: 'light',
+    radius: 0.5,
+    colors: {
+        background:           '0 0% 100%',
+        foreground:           '222.2 84% 4.9%',
+        card:                 '0 0% 100%',
+        cardForeground:       '222.2 84% 4.9%',
+        popover:              '0 0% 100%',
+        popoverForeground:    '222.2 84% 4.9%',
+        primary:              '221.2 83.2% 53.3%',
+        primaryForeground:    '210 40% 98%',
+        secondary:            '210 40% 96.1%',
+        secondaryForeground:  '222.2 47.4% 11.2%',
+        muted:                '210 40% 96.1%',
+        mutedForeground:      '215.4 16.3% 46.9%',
+        accent:               '210 40% 96.1%',
+        accentForeground:     '222.2 47.4% 11.2%',
+        destructive:          '0 84.2% 60.2%',
+        destructiveForeground:'210 40% 98%',
+        success:              '142.1 76.2% 36.3%',
+        successForeground:    '0 0% 100%',
+        warning:              '32.1 94.6% 43.7%',
+        warningForeground:    '0 0% 100%',
+        info:                 '198.6 88.7% 48.4%',
+        infoForeground:       '0 0% 100%',
+        border:               '214.3 31.8% 91.4%',
+        input:                '214.3 31.8% 91.4%',
+        ring:                 '221.2 83.2% 53.3%',
+    },
+    dark: {
+        background:           '222.2 84% 4.9%',
+        foreground:           '210 40% 98%',
+        card:                 '222.2 84% 4.9%',
+        cardForeground:       '210 40% 98%',
+        popover:              '222.2 84% 4.9%',
+        popoverForeground:    '210 40% 98%',
+        primary:              '217.2 91.2% 59.8%',
+        primaryForeground:    '222.2 47.4% 11.2%',
+        secondary:            '217.2 32.6% 17.5%',
+        secondaryForeground:  '210 40% 98%',
+        muted:                '217.2 32.6% 17.5%',
+        mutedForeground:      '215 20.2% 65.1%',
+        accent:               '217.2 32.6% 17.5%',
+        accentForeground:     '210 40% 98%',
+        destructive:          '0 62.8% 30.6%',
+        destructiveForeground:'210 40% 98%',
+        success:              '142.1 70.6% 45.3%',
+        successForeground:    '0 0% 100%',
+        warning:              '32.1 94.6% 55%',
+        warningForeground:    '0 0% 100%',
+        info:                 '198.6 88.7% 60%',
+        infoForeground:       '0 0% 100%',
+        border:               '217.2 32.6% 17.5%',
+        input:                '217.2 32.6% 17.5%',
+        ring:                 '224.3 76.3% 48%',
+    },
+};
+
+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: 160, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity'] },
+        reducedMotion: 'respect-user',
+    },
+    fadeUp: {
+        from: { opacity: 0, transform: 'translateY(8px)' },
+        to: { opacity: 1, transform: 'translateY(0)' },
+        transition: { duration: 160, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity', 'transform'] },
+        reducedMotion: 'respect-user',
+    },
+    fadeDown: {
+        from: { opacity: 0, transform: 'translateY(-8px)' },
+        to: { opacity: 1, transform: 'translateY(0)' },
+        transition: { duration: 140, easing: 'cubic-bezier(0.2, 0, 0, 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.98)' },
+        transition: { duration: 100, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['transform', 'box-shadow'] },
+        reducedMotion: 'respect-user',
+    },
+    imageZoom: {
+        from: { transform: 'scale(1)' },
+        to: { transform: 'scale(1.06)' },
+        transition: { duration: 300, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['transform'] },
+        reducedMotion: 'respect-user',
+    },
+};
+
+export const components: Theme = {
+    Grid: {
+        // REVERT NOTE (2026-07-15): before this change, `Card.className` was 'border-0' only
+        // (outer border removed, but bg-card/rounded/shadow kept — header+footer still sat in
+        // a white rounded box), `Table.wrapperClassName`/`Gallery.wrapperClassName` were both
+        // ''. The change moves the "raised card" surface (border+bg+shadow+radius) from the
+        // Card wrapper (which held header+body+footer together) down into Table/Gallery's own
+        // wrapper — so the toolbar row (view toggle, column picker, New component…) sits
+        // directly on the page's floor background with no box of its own, and only the actual
+        // data surface reads as a raised panel. To revert: restore the four blocks below to
+        // the values in this note.
+        Card: {
+            wrapperClassName: '',
+            // Fully transparent/borderless/shapeless now — header and footer (when used) are
+            // meant to float on the page's own background, not sit inside a card of their own;
+            // the "raised surface" look lives in Table/Gallery's wrapperClassName instead.
+            className: 'rounded-none border-0 bg-transparent shadow-none',
+            headerClassName: 'flex justify-between border-b-0 bg-transparent px-0 py-2',
+            bodyClassName: 'p-0 mt-2',
+            footerClassName: 'border-t-0 bg-transparent px-0 py-2',
+            loading: false,
+        },
+        Table: {
+            // The table's own raised surface — previously this border+bg lived on the
+            // shared Card wrapper (see revert note above).
+            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm',
+            className: '',
+            headerClassName: '',
+            bodyClassName: '',
+            footerClassName: '',
+            scrollClassName: 'overflow-x-auto',
+            selectedClassName: 'bg-primary/10',
+        },
+        Gallery: {
+            // Same rationale as Table above; `p-3` so cards don't sit flush against the border.
+            wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm p-3',
+            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: 'loader-2',
+        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: 'border-border/60 bg-popover/95 shadow-xl shadow-black/5 backdrop-blur supports-[backdrop-filter]:bg-popover/90 dark:shadow-black/20',
+        menuHeaderClass: 'text-muted-foreground/70',
+        menuItemClass: '',
+        menuDividerClass: 'bg-border/60',
+        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: '',
+    },
+    AddressAutocomplete: {
+        wrapperClassName: '',
+        className: '',
+        menuClassName: 'border-border/60 bg-popover/95 shadow-xl shadow-black/5 backdrop-blur supports-[backdrop-filter]:bg-popover/90 dark:shadow-black/20',
+        itemClassName: '',
+    },
+    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/80 text-foreground backdrop-blur supports-[backdrop-filter]:bg-card/70',
+        overlayClassName: 'shadow-xl',
+        headerClassName: 'border-b border-border/60 px-1.5 py-2',
+        navClassName: 'px-1.5 py-2',
+        footerClassName: 'border-t border-border/60 px-1.5 py-2',
+        groupLabelClassName: 'text-[10.5px] font-semibold uppercase tracking-widest text-muted-foreground/60 select-none',
+        groupDividerClassName: 'bg-border/50',
+        itemClassName: 'rounded-lg',
+        itemActiveClassName: 'bg-primary/10 text-primary font-medium shadow-sm',
+        itemChildActiveClassName: 'bg-accent/80 text-foreground font-medium',
+        itemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/70',
+        itemIconClassName: '',
+        itemTextClassName: '',
+        itemBadgeClassName: 'ml-auto shrink-0 text-[10px] font-semibold leading-none px-1.5 py-[3px] rounded-full bg-primary/15 text-primary',
+        itemCollapsedBadgeClassName: 'absolute -top-0.5 -right-1 h-[7px] w-[7px] rounded-full bg-primary ring-1 ring-card',
+        itemToggleClassName: 'shrink-0 flex items-center justify-center w-6 h-6 rounded-md transition-colors text-muted-foreground/50 hover:text-foreground hover:bg-accent/70',
+        subItemClassName: 'rounded-md',
+        subItemActiveClassName: 'bg-primary/10 text-primary font-medium',
+        subItemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/70',
+        collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-md w-8 h-8 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent/70',
+    },
+    Toolbar: {
+        wrapperClassName: 'z-20 w-full',
+        stickyClassName: 'sticky top-0',
+        restingClassName: 'bg-transparent border-transparent shadow-none',
+        scrolledClassName: 'border-b border-border/60 bg-background/85 backdrop-blur supports-[backdrop-filter]:bg-background/75',
+        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: 'shadow-sm',
+        activeClassName: 'border-primary/30 bg-primary/10 shadow-sm',
+        inactiveClassName: 'hover:bg-accent/40',
+        disabledClassName: 'cursor-not-allowed opacity-60',
+        dashedClassName: 'border-dashed',
+        compactClassName: 'p-3',
+        leadingClassName: '',
+        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-xl px-1.5 py-1.5 text-left text-sm font-semibold text-foreground transition-colors hover:bg-accent/40',
+        disabledClassName: 'pointer-events-none opacity-60',
+        iconWrapperClassName: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg 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: '',
+        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: false,
+        },
+    },
+    ImageAvatar: {
+        wrapperClassName: '',
+        className: '',
+        motion: { enter: 'fade', hover: false },
+    },
+    Percentage: {
+        wrapperClassName: '',
+        className: '',
+    },
+    DescriptionList: {
+        wrapperClassName: '',
+        className: '',
+        itemClassName: '',
+        labelClassName: '',
+        valueClassName: '',
+    },
+    Tab: {
+        wrapperClassName: '',
+        className: '',
+        menuClassName: '',
+        itemClassName: '',
+        contentClassName: '',
+        triggerClassName: '',
+        activeTriggerClassName: '',
+        inactiveTriggerClassName: '',
+        motion: {
+            enter: 'fadeUp',
+        },
+    },
+    Code: {
+        wrapperClassName: '',
+        className: '',
+    },
+    CodeEditor: {
+        wrapperClassName: '',
+        className: '',
+    },
+    Prompt: {
+        wrapperClassName: '',
+        className: '',
+    },
+    Repeat: {
+        itemClassName: '',
+        inlineItemClassName: '',
+        addButtonClassName: '',
+    },
+};
+
+const definition: ThemeDefinition = { preset, motion, components };
+
+export default definition;
+