@gluhar/theme 2.0.0-dev.0

package/dist/runtime/presets/lara/stepper/index.d.ts

@@ -0,0 +1,66 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: string[];
+    };
+    namespace nav {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace stepperpanel {
+        function panel({ context, parent }: {
+            context: any;
+            parent: any;
+        }): {
+            class: string[];
+        };
+        function header({ parent, context }: {
+            parent: any;
+            context: any;
+        }): {
+            class: string[];
+        };
+        namespace action {
+            let _class_1: string[];
+            export { _class_1 as class };
+        }
+        function number({ context }: {
+            context: any;
+        }): {
+            class: string[];
+        };
+        function title({ context }: {
+            context: any;
+        }): {
+            class: string[];
+        };
+        function separator({ context, state, parent }: {
+            context: any;
+            state: any;
+            parent: any;
+        }): {
+            class: (string | string[])[];
+        };
+        namespace transition {
+            let _class_2: string[];
+            export { _class_2 as class };
+            export let enterFromClass: string;
+            export let enterActiveClass: string;
+            export let enterToClass: string;
+            export let leaveFromClass: string;
+            export let leaveActiveClass: string;
+            export let leaveToClass: string;
+        }
+        function content({ parent }: {
+            parent: any;
+        }): {
+            class: string[];
+        };
+    }
+    namespace panelcontainer {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+}
+export default _default;

package/dist/runtime/presets/lara/stepper/index.js

@@ -0,0 +1,161 @@
+export default {
+    root: ({ props }) => ({
+        class: ['flex-1', props.orientation === 'vertical' ? 'flex-col' : 'flex-row']
+    }),
+    nav: {
+        class: [
+            // Flexbox
+            'flex',
+            'justify-between',
+            'items-center',
+
+            // Spacing
+            'm-0',
+            'p-0',
+
+            // Positioning
+            'relative',
+
+            // Lists
+            'list-none',
+
+            // Overflow
+            'overflow-x-auto'
+        ]
+    },
+    stepperpanel: {
+        panel: ({ context, parent }) => ({
+            class: [context.active ? 'flex-1' : '', parent.props.orientation === 'vertical' ? 'flex flex-col flex-initial' : '']
+        }),
+        header: ({ parent, context }) => ({
+            class: [
+                // Position
+                'relative',
+
+                // Flexbox
+                'flex',
+                'items-center',
+                context.last ? 'flex-initial' : 'flex-1',
+                parent.props.orientation === 'vertical' ? 'flex-initial' : '',
+
+                // Spacing
+                'p-2'
+            ]
+        }),
+        action: {
+            class: [
+                // Borders
+                'border-0',
+                'border-none',
+
+                // Flexbox
+                'inline-flex',
+                'items-center',
+
+                // Text
+                'text-decoration-none',
+
+                // Transitions
+                'transition',
+                'transition-shadow',
+                'duration-200',
+
+                // Shape
+                'rounded-md',
+
+                // Backgrounds
+                'bg-transparent',
+
+                // Focus
+                'outline-none'
+            ]
+        },
+        number: ({ context }) => ({
+            class: [
+                // Flexbox
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Colors (Conditional)
+                context.active ? 'bg-primary-500 dark:bg-primary-400 text-surface-0 dark:text-surface-900' : 'border border-surface-200 dark:border-surface-700 text-surface-900 dark:text-surface-0', // Adjust colors as needed
+
+                // Size and Shape
+                'min-w-[2rem]',
+                'h-[2rem]',
+                'line-height-[2rem]',
+                'rounded-full',
+
+                // Text
+                'text-lg',
+
+                // Borders
+                context.active ? 'border-0 border-none' : 'border-solid border-2',
+
+                // Transitions
+                'transition',
+                'transition-colors',
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        title: ({ context }) => ({
+            class: [
+                // Layout
+                'block',
+                'whitespace-nowrap',
+                'overflow-hidden',
+                'text-ellipsis',
+                'max-w-full',
+
+                // Spacing
+                'ml-2',
+
+                // Text
+                context.active ? 'text-surface-900 dark:text-surface-0' : 'text-surface-700 dark:text-surface-0/80',
+                'font-bold',
+
+                // Transitions
+                'transition',
+                'transition-colors',
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        separator: ({ context, state, parent }) => ({
+            class: [
+                // Colors (Conditional for active step)
+                state.d_activeStep <= context.index ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary-500 dark:bg-primary-400',
+
+                // Conditional for Vertical Orientation
+                parent.props.orientation === 'vertical' ? ['flex-none', 'w-[2px]', 'h-auto', 'ml-[calc(1.29rem+2px)]'] : ['flex-1', 'w-full', 'h-[2px]', 'ml-4'],
+
+                // Transitions
+                'transition-shadow',
+                'duration-200'
+            ]
+        }),
+        transition: {
+            class: ['flex flex-1', 'bg-surface-0 dark:bg-surface-800', 'text-surface-900 dark:text-surface-0'],
+            enterFromClass: 'max-h-0',
+            enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+            enterToClass: 'max-h-[1000px]',
+            leaveFromClass: 'max-h-[1000px]',
+            leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+            leaveToClass: 'max-h-0'
+        },
+        content: ({ parent }) => ({
+            class: [parent.props.orientation === 'vertical' ? 'w-full pl-4' : '']
+        })
+    },
+    panelcontainer: {
+        class: [
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-900 dark:text-surface-0',
+
+            // Spacing
+            'p-4'
+        ]
+    }
+};

package/dist/runtime/presets/lara/steps/index.d.ts

@@ -0,0 +1,57 @@
+declare namespace _default {
+    namespace root {
+        let _class: string;
+        export { _class as class };
+    }
+    namespace menu {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace menuitem {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    function action({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'cursor-pointer': boolean;
+        })[];
+    };
+    function step({ context, props }: {
+        context: any;
+        props: any;
+    }): {
+        class: (string | {
+            'text-surface-400 dark:text-white/60': boolean;
+            'border-surface-100 dark:border-surface-700': boolean;
+            'bg-surface-0 dark:bg-surface-800': boolean;
+            'bg-primary-500 dark:bg-primary-400': any;
+            'border-primary-500 dark:border-primary-400': any;
+            'text-surface-0 dark:text-surface-900': any;
+            'hover:border-surface-300 dark:hover:border-surface-500'?: undefined;
+        } | {
+            'hover:border-surface-300 dark:hover:border-surface-500': boolean;
+            'text-surface-400 dark:text-white/60'?: undefined;
+            'border-surface-100 dark:border-surface-700'?: undefined;
+            'bg-surface-0 dark:bg-surface-800'?: undefined;
+            'bg-primary-500 dark:bg-primary-400'?: undefined;
+            'border-primary-500 dark:border-primary-400'?: undefined;
+            'text-surface-0 dark:text-surface-900'?: undefined;
+        })[];
+    };
+    function label({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'font-bold': any;
+            'text-surface-400 dark:text-white/60'?: undefined;
+            'text-surface-800 dark:text-white/80'?: undefined;
+        } | {
+            'text-surface-400 dark:text-white/60': boolean;
+            'text-surface-800 dark:text-white/80': any;
+            'font-bold'?: undefined;
+        })[];
+    };
+}
+export default _default;

package/dist/runtime/presets/lara/steps/index.js

@@ -0,0 +1,111 @@
+export default {
+    root: {
+        class: 'relative'
+    },
+    menu: {
+        class: 'p-0 m-0 list-none flex'
+    },
+    menuitem: {
+        class: [
+            // Flexbox and Position
+            'relative',
+            'flex',
+            'justify-center',
+            'flex-1',
+            'overflow-hidden',
+
+            // Before
+            'before:border-t',
+            'before:border-surface-200',
+            'before:dark:border-surface-700',
+            'before:w-full',
+            'before:absolute',
+            'before:top-1/2',
+            'before:left-0',
+            'before:transform',
+            'before:-mt-4'
+        ]
+    },
+    action: ({ props }) => ({
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+            'flex-col',
+
+            // Transitions and Shape
+            'transition-shadow',
+            'rounded-md',
+
+            // Colors
+            'bg-surface-0',
+            'dark:bg-transparent',
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden',
+            { 'cursor-pointer': !props.readonly }
+        ]
+    }),
+    step: ({ context, props }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+
+            // Position
+            'z-20',
+
+            // Shape
+            'rounded-full',
+            'border',
+
+            // Size
+            'w-[2rem]',
+            'h-[2rem]',
+            'text-sm',
+            'leading-[2rem]',
+
+            // Colors
+            {
+                'text-surface-400 dark:text-white/60': !context.active,
+                'border-surface-100 dark:border-surface-700': !context.active,
+                'bg-surface-0 dark:bg-surface-800': !context.active,
+                'bg-primary-500 dark:bg-primary-400': context.active,
+                'border-primary-500 dark:border-primary-400': context.active,
+                'text-surface-0 dark:text-surface-900': context.active
+            },
+
+            // States
+            {
+                'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly
+            },
+
+            // Transition
+            'transition-colors duration-200 ease-in-out'
+        ]
+    }),
+    label: ({ context }) => ({
+        class: [
+            // Font
+            'leading-5',
+            { 'font-bold': context.active },
+
+            // Display
+            'block',
+
+            // Spacing
+            'mt-2',
+
+            // Colors
+            { 'text-surface-400 dark:text-white/60': !context.active, 'text-surface-800 dark:text-white/80': context.active },
+
+            // Text and Overflow
+            'whitespace-nowrap',
+            'overflow-hidden',
+            'overflow-ellipsis',
+            'max-w-full'
+        ]
+    })
+};

package/dist/runtime/presets/lara/tabmenu/index.d.ts

@@ -0,0 +1,43 @@
+declare namespace _default {
+    namespace root {
+        let _class: string;
+        export { _class as class };
+    }
+    namespace menu {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace menuitem {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    function action({ context, state }: {
+        context: any;
+        state: any;
+    }): {
+        class: (string | {
+            'border-surface-200 dark:border-surface-700': boolean;
+            'bg-surface-0 dark:bg-surface-800': boolean;
+            'text-surface-700 dark:text-surface-0/80': boolean;
+            'border-primary-500 dark:border-primary-400': boolean;
+            'text-primary-500 dark:text-primary-400': boolean;
+            'hover:bg-surface-0 dark:hover:bg-surface-800/80'?: undefined;
+            'hover:border-surface-400 dark:hover:border-primary-400'?: undefined;
+            'hover:text-surface-900 dark:hover:text-surface-0'?: undefined;
+        } | {
+            'hover:bg-surface-0 dark:hover:bg-surface-800/80': boolean;
+            'hover:border-surface-400 dark:hover:border-primary-400': boolean;
+            'hover:text-surface-900 dark:hover:text-surface-0': boolean;
+            'border-surface-200 dark:border-surface-700'?: undefined;
+            'bg-surface-0 dark:bg-surface-800'?: undefined;
+            'text-surface-700 dark:text-surface-0/80'?: undefined;
+            'border-primary-500 dark:border-primary-400'?: undefined;
+            'text-primary-500 dark:text-primary-400'?: undefined;
+        })[];
+    };
+    namespace icon {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+}
+export default _default;

package/dist/runtime/presets/lara/tabmenu/index.js

@@ -0,0 +1,73 @@
+export default {
+    root: {
+        class: 'overflow-x-auto'
+    },
+    menu: {
+        class: [
+            // Flexbox
+            'flex flex-1',
+
+            // Spacing
+            'list-none',
+            'p-0 m-0',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'border-b-2 border-surface-200 dark:border-surface-700',
+            'text-surface-900 dark:text-surface-0/80'
+        ]
+    },
+    menuitem: {
+        class: 'mr-0'
+    },
+    action: ({ context, state }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'font-bold',
+
+            // Flexbox and Alignment
+            'flex items-center',
+
+            // Spacing
+            'p-5',
+            '-mb-[2px]',
+
+            // Shape
+            'border-b-2',
+            'rounded-t-md',
+
+            // Colors and Conditions
+            {
+                'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index,
+                'bg-surface-0 dark:bg-surface-800': state.d_activeIndex !== context.index,
+                'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index,
+
+                'bg-surface-0 dark:bg-surface-800': state.d_activeIndex === context.index,
+                'border-primary-500 dark:border-primary-400': state.d_activeIndex === context.index,
+                'text-primary-500 dark:text-primary-400': state.d_activeIndex === context.index
+            },
+
+            // States
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-inset',
+            'focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50',
+            {
+                'hover:bg-surface-0 dark:hover:bg-surface-800/80': state.d_activeIndex !== context.index,
+                'hover:border-surface-400 dark:hover:border-primary-400': state.d_activeIndex !== context.index,
+                'hover:text-surface-900 dark:hover:text-surface-0': state.d_activeIndex !== context.index
+            },
+
+            // Transitions
+            'transition-all duration-200',
+
+            // Misc
+            'cursor-pointer select-none text-decoration-none',
+            'overflow-hidden',
+            'user-select-none'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    }
+};

package/dist/runtime/presets/lara/tabview/index.d.ts

@@ -0,0 +1,67 @@
+declare namespace _default {
+    function navContainer({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'overflow-hidden': any;
+        })[];
+    };
+    namespace navContent {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace previousButton {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace nextButton {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace nav {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace tabpanel {
+        function header({ props }: {
+            props: any;
+        }): {
+            class: (string | {
+                'opacity-60 cursor-default user-select-none select-none pointer-events-none': any;
+            })[];
+        };
+        function headerAction({ parent, context }: {
+            parent: any;
+            context: any;
+        }): {
+            class: (string | {
+                'border-surface-200 dark:border-surface-700': boolean;
+                'bg-surface-0 dark:bg-surface-800': boolean;
+                'text-surface-700 dark:text-surface-0/80': boolean;
+                'border-primary-500 dark:border-primary-400': boolean;
+                'text-primary-500 dark:text-primary-400': boolean;
+                'hover:bg-surface-0 dark:hover:bg-surface-800/80'?: undefined;
+                'hover:border-surface-400 dark:hover:border-primary-400'?: undefined;
+                'hover:text-surface-900 dark:hover:text-surface-0'?: undefined;
+            } | {
+                'hover:bg-surface-0 dark:hover:bg-surface-800/80': boolean;
+                'hover:border-surface-400 dark:hover:border-primary-400': boolean;
+                'hover:text-surface-900 dark:hover:text-surface-0': boolean;
+                'border-surface-200 dark:border-surface-700'?: undefined;
+                'bg-surface-0 dark:bg-surface-800'?: undefined;
+                'text-surface-700 dark:text-surface-0/80'?: undefined;
+                'border-primary-500 dark:border-primary-400'?: undefined;
+                'text-primary-500 dark:text-primary-400'?: undefined;
+            })[];
+        };
+        namespace headerTitle {
+            let _class_4: string[];
+            export { _class_4 as class };
+        }
+        namespace content {
+            let _class_5: string[];
+            export { _class_5 as class };
+        }
+    }
+}
+export default _default;