@gluhar/theme 2.0.0-dev.0

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

@@ -0,0 +1,156 @@
+export default {
+    navContainer: ({ props }) => ({
+        class: [
+            // Position
+            'relative',
+
+            // Misc
+            { 'overflow-hidden': props.scrollable }
+        ]
+    }),
+    navContent: {
+        class: [
+            // Overflow and Scrolling
+            'overflow-y-hidden overscroll-contain',
+            'overscroll-auto',
+            'scroll-smooth',
+            '[&::-webkit-scrollbar]:hidden'
+        ]
+    },
+    previousButton: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Position
+            '!absolute',
+            'top-0 left-0',
+            'z-20',
+
+            // Size and Shape
+            'h-full w-12',
+            'rounded-none',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-primary-500 dark:text-primary-400',
+            'shadow-md'
+        ]
+    },
+    nextButton: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Position
+            '!absolute',
+            'top-0 right-0',
+            'z-20',
+
+            // Size and Shape
+            'h-full w-12',
+            'rounded-none',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-primary-500 dark:text-primary-400',
+            'shadow-md'
+        ]
+    },
+    nav: {
+        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'
+        ]
+    },
+    tabpanel: {
+        header: ({ props }) => ({
+            class: [
+                // Spacing
+                'mr-0',
+
+                // Misc
+                {
+                    'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
+                }
+            ]
+        }),
+        headerAction: ({ parent, context }) => ({
+            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': parent.state.d_activeIndex !== context.index,
+                    'bg-surface-0 dark:bg-surface-800': parent.state.d_activeIndex !== context.index,
+                    'text-surface-700 dark:text-surface-0/80': parent.state.d_activeIndex !== context.index,
+
+                    'bg-surface-0 dark:bg-surface-800': parent.state.d_activeIndex === context.index,
+                    'border-primary-500 dark:border-primary-400': parent.state.d_activeIndex === context.index,
+                    'text-primary-500 dark:text-primary-400': parent.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': parent.state.d_activeIndex !== context.index,
+                    'hover:border-surface-400 dark:hover:border-primary-400': parent.state.d_activeIndex !== context.index,
+                    'hover:text-surface-900 dark:hover:text-surface-0': parent.state.d_activeIndex !== context.index
+                },
+
+                // Transitions
+                'transition-all duration-200',
+
+                // Misc
+                'cursor-pointer select-none text-decoration-none',
+                'overflow-hidden',
+                'user-select-none'
+            ]
+        }),
+        headerTitle: {
+            class: [
+                // Text
+                'leading-none',
+                'whitespace-nowrap'
+            ]
+        },
+        content: {
+            class: [
+                // Spacing
+                'p-5',
+
+                // Shape
+                'rounded-b-md',
+
+                // Colors
+                'bg-surface-0 dark:bg-surface-800',
+                'text-surface-700 dark:text-surface-0/80',
+                'border-0'
+            ]
+        }
+    }
+};

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

@@ -0,0 +1,32 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'rounded-md': boolean;
+            'rounded-full': any;
+            'bg-primary-500 dark:bg-primary-400'?: undefined;
+            'bg-green-500 dark:bg-green-400'?: undefined;
+            'bg-blue-500 dark:bg-blue-400'?: undefined;
+            'bg-orange-500 dark:bg-orange-400'?: undefined;
+            'bg-red-500 dark:bg-red-400'?: undefined;
+        } | {
+            'bg-primary-500 dark:bg-primary-400': boolean;
+            'bg-green-500 dark:bg-green-400': boolean;
+            'bg-blue-500 dark:bg-blue-400': boolean;
+            'bg-orange-500 dark:bg-orange-400': boolean;
+            'bg-red-500 dark:bg-red-400': boolean;
+            'rounded-md'?: undefined;
+            'rounded-full'?: undefined;
+        })[];
+    };
+    namespace value {
+        let _class: string;
+        export { _class as class };
+    }
+    namespace icon {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+}
+export default _default;

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

@@ -0,0 +1,36 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            //Font
+            'text-xs font-bold',
+
+            //Alignments
+            'inline-flex items-center justify-center',
+
+            //Spacing
+            'px-2 py-1',
+
+            //Shape
+            {
+                'rounded-md': !props.rounded,
+                'rounded-full': props.rounded
+            },
+
+            //Colors
+            'text-white dark:text-surface-900',
+            {
+                'bg-primary-500 dark:bg-primary-400': props.severity == null || props.severity == 'primary',
+                'bg-green-500 dark:bg-green-400': props.severity == 'success',
+                'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
+                'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
+                'bg-red-500 dark:bg-red-400': props.severity == 'danger'
+            }
+        ]
+    }),
+    value: {
+        class: 'leading-normal'
+    },
+    icon: {
+        class: 'mr-1 text-sm'
+    }
+};

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

@@ -0,0 +1,27 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace container {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace prompt {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace response {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace command {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace commandtext {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+}
+export default _default;

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

@@ -0,0 +1,60 @@
+export default {
+    root: {
+        class: [
+            // Spacing
+            'p-5',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-900 text-white',
+            'border border-surface-700',
+
+            // Sizing & Overflow
+            'h-72 overflow-auto'
+        ]
+    },
+    container: {
+        class: [
+            // Flexbox
+            'flex items-center'
+        ]
+    },
+    prompt: {
+        class: [
+            // Color
+            'text-surface-400'
+        ]
+    },
+    response: {
+        class: [
+            // Color
+            'text-primary-400'
+        ]
+    },
+    command: {
+        class: [
+            // Color
+            'text-primary-400'
+        ]
+    },
+    commandtext: {
+        class: [
+            // Flexbox
+            'flex-1 shrink grow-0',
+
+            // Shape
+            'border-0',
+
+            // Spacing
+            'p-0',
+
+            // Color
+            'bg-transparent text-inherit',
+
+            // Outline
+            'outline-none'
+        ]
+    }
+};

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

@@ -0,0 +1,27 @@
+declare namespace _default {
+    function root({ context, props }: {
+        context: any;
+        props: any;
+    }): {
+        class: (string | {
+            'border-surface-300 dark:border-surface-600': boolean;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'hover:border-primary-500 dark:hover:border-primary-400'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50'?: undefined;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'border-red-500 dark:border-red-400': any;
+            'border-surface-300 dark:border-surface-600'?: undefined;
+            'hover:border-primary-500 dark:hover:border-primary-400'?: undefined;
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50'?: undefined;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'hover:border-primary-500 dark:hover:border-primary-400': boolean;
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': boolean;
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+            'border-surface-300 dark:border-surface-600'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+        })[];
+    };
+}
+export default _default;

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

@@ -0,0 +1,36 @@
+export default {
+    root: ({ context, props }) => ({
+        class: [
+            // Font
+            'font-sans leading-none',
+
+            // Spacing
+            'm-0',
+            'p-3',
+
+            // Shape
+            'rounded-md',
+
+            // Colors
+            'text-surface-600 dark:text-surface-200',
+            'placeholder:text-surface-400 dark:placeholder:text-surface-500',
+            'bg-surface-0 dark:bg-surface-900',
+            'border',
+            { 'border-surface-300 dark:border-surface-600': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            {
+                'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !props.invalid,
+                'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50': !context.disabled,
+                'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+            },
+
+            // Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    })
+};

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

@@ -0,0 +1,56 @@
+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 content({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'text-surface-500 dark:text-white/70': boolean;
+            'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': any;
+            'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': any;
+            'hover:bg-surface-100 dark:hover:bg-surface-600/80'?: undefined;
+            'hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80'?: undefined;
+        } | {
+            'hover:bg-surface-100 dark:hover:bg-surface-600/80': boolean;
+            'hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80': any;
+            'text-surface-500 dark:text-white/70'?: undefined;
+            'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90'?: undefined;
+            'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30'?: undefined;
+        })[];
+    };
+    namespace action {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace icon {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace label {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    namespace submenuicon {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+    namespace submenu {
+        let _class_7: string[];
+        export { _class_7 as class };
+    }
+    namespace separator {
+        let _class_8: string;
+        export { _class_8 as class };
+    }
+}
+export default _default;

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

@@ -0,0 +1,120 @@
+export default {
+    root: {
+        class: [
+            // Shape
+            'rounded-md',
+
+            // Size
+            'min-w-[12rem]',
+            'py-1',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-700',
+            'border border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: [
+            // Spacings and Shape
+            'list-none',
+            'm-0',
+            'p-0',
+            'outline-none'
+        ]
+    },
+    menuitem: {
+        class: [
+            // Position
+            'relative'
+        ]
+    },
+    content: ({ context }) => ({
+        class: [
+            //Shape
+            'rounded-none',
+
+            //  Colors
+            {
+                'text-surface-500 dark:text-white/70': !context.focused && !context.active,
+                'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-surface-600/90': context.focused && !context.active,
+                'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': context.focused && context.active,
+                'text-primary-700 dark:text-surface-0/80 bg-primary-50 dark:bg-primary-400/30': !context.focused && context.active
+            },
+
+            // Hover States
+            {
+                'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.active,
+                'hover:bg-primary-500/50 dark:hover:bg-primary-300/30 text-primary-700 dark:text-surface-0/80': context.active
+            },
+
+            // Transitions
+            'transition-shadow',
+            'duration-200'
+        ]
+    }),
+    action: {
+        class: [
+            'relative',
+            // Flexbox
+
+            'flex',
+            'items-center',
+
+            // Spacing
+            'py-3',
+            'px-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Misc
+            'no-underline',
+            'overflow-hidden',
+            'cursor-pointer',
+            'select-none'
+        ]
+    },
+    icon: {
+        class: [
+            // Spacing
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    label: {
+        class: ['leading-none']
+    },
+    submenuicon: {
+        class: [
+            // Position
+            'ml-auto'
+        ]
+    },
+    submenu: {
+        class: [
+            // Size
+            'w-full sm:w-48',
+
+            // Spacing
+            'py-1',
+            'm-0',
+            'list-none',
+
+            // Shape
+            'shadow-none sm:shadow-md',
+            'border-0',
+
+            // Position
+            'static sm:absolute',
+            'z-10',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-700'
+        ]
+    },
+    separator: {
+        class: 'border-t border-surface-200 dark:border-surface-600 my-1'
+    }
+};

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

@@ -0,0 +1,84 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'flex-col': boolean;
+            'flex-row flex-1': boolean;
+        })[];
+    };
+    function event({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'flex-row-reverse': boolean;
+            'flex-col flex-1': boolean;
+            'flex-col-reverse ': boolean;
+        })[];
+    };
+    function opposite({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'px-4': boolean;
+            'py-4': boolean;
+            'text-right'?: undefined;
+            'text-left'?: undefined;
+        } | {
+            'text-right': boolean;
+            'text-left': boolean;
+            'px-4'?: undefined;
+            'py-4'?: undefined;
+        })[];
+    };
+    function separator({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'flex-col': boolean;
+            'flex-row': boolean;
+        })[];
+    };
+    namespace marker {
+        let _class: string[];
+        export { _class as class };
+    }
+    function connector({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'w-[2px]': boolean;
+            'w-full h-[2px]': boolean;
+        })[];
+    };
+    function content({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'px-4': boolean;
+            'py-4': boolean;
+            'text-left'?: undefined;
+            'text-right'?: undefined;
+            'min-h-0'?: undefined;
+            'grow-0'?: undefined;
+        } | {
+            'text-left': boolean;
+            'text-right': boolean;
+            'px-4'?: undefined;
+            'py-4'?: undefined;
+            'min-h-0'?: undefined;
+            'grow-0'?: undefined;
+        } | {
+            'min-h-0': boolean;
+            'grow-0': boolean;
+            'px-4'?: undefined;
+            'py-4'?: undefined;
+            'text-left'?: undefined;
+            'text-right'?: undefined;
+        })[];
+    };
+}
+export default _default;