@gluhar/theme 2.0.0-dev.0

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

@@ -0,0 +1,76 @@
+declare namespace _default {
+    namespace panel {
+        let _class: string;
+        export { _class as class };
+    }
+    namespace header {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    function headercontent({ context, instance }: {
+        context: any;
+        instance: any;
+    }): {
+        class: (string | {
+            'rounded-br-md rounded-bl-md': boolean;
+            'rounded-br-0 rounded-bl-0': any;
+            'text-surface-900'?: undefined;
+        } | {
+            'text-surface-900': any;
+            'rounded-br-md rounded-bl-md'?: undefined;
+            'rounded-br-0 rounded-bl-0'?: undefined;
+        })[];
+    };
+    namespace headeraction {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace headerlabel {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    namespace headerIcon {
+        let _class_4: string;
+        export { _class_4 as class };
+    }
+    namespace submenuicon {
+        let _class_5: string;
+        export { _class_5 as class };
+    }
+    namespace menucontent {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+    namespace menu {
+        let _class_7: string[];
+        export { _class_7 as class };
+    }
+    namespace content {
+        let _class_8: string[];
+        export { _class_8 as class };
+    }
+    function action({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-600/90': any;
+        })[];
+    };
+    namespace icon {
+        let _class_9: string;
+        export { _class_9 as class };
+    }
+    namespace submenu {
+        let _class_10: string;
+        export { _class_10 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let enterToClass: string;
+        let leaveFromClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

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

@@ -0,0 +1,127 @@
+export default {
+    panel: {
+        class: 'mb-1'
+    },
+    header: {
+        class: ['rounded-md', 'outline-none', 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50']
+    },
+    headercontent: ({ context, instance }) => ({
+        class: [
+            // Shape
+            'rounded-t-md',
+            { 'rounded-br-md rounded-bl-md': !context.active || instance.activeItem?.items === undefined, 'rounded-br-0 rounded-bl-0': context.active && instance.activeItem?.items !== undefined },
+
+            // Color
+            'border border-surface-200 dark:border-surface-700',
+            'bg-surface-50 dark:bg-surface-800',
+            'text-surface-600 dark:text-surface-0/80',
+            { 'text-surface-900': context.active },
+
+            // States
+            'hover:bg-surface-100 dark:hover:bg-surface-700/80',
+            'hover:text-surface-900',
+
+            // Transition
+            'transition duration-200 ease-in-out',
+            'transition-shadow duration-200'
+        ]
+    }),
+    headeraction: {
+        class: [
+            'relative',
+
+            // Font
+            'font-bold',
+            'leading-none',
+
+            // Flex & Alignments
+            'flex items-center',
+
+            // Spacing
+            'p-5',
+
+            // Misc
+            'select-none cursor-pointer no-underline'
+        ]
+    },
+    headerlabel: {
+        class: 'leading-none'
+    },
+    headerIcon: {
+        class: 'mr-2'
+    },
+    submenuicon: {
+        class: 'mr-2'
+    },
+    menucontent: {
+        class: [
+            // Spacing
+            'py-2',
+
+            // Shape
+            'border border-t-0',
+            'rounded-t-none rounded-br-md rounded-bl-md',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+            'bg-surface-0 dark:bg-surface-800',
+            'border-surface-200 dark:border-surface-700'
+        ]
+    },
+    menu: {
+        class: ['outline-none', 'm-0 p-0 list-none']
+    },
+    content: {
+        class: [
+            // Shape
+            'border-none rounded-none',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // Transition
+            'transition-shadow duration-200'
+        ]
+    },
+    action: ({ context }) => ({
+        class: [
+            'relative',
+
+            // Font
+            'leading-none',
+
+            // Flex & Alignments
+            'flex items-center',
+
+            // Spacing
+            'py-3 px-5',
+
+            // Color
+            'text-surface-700 dark:text-white/80',
+
+            // States
+            'hover:bg-surface-100 dark:hover:bg-surface-700/80 hover:text-surface-700 dark:hover:text-white/80',
+            {
+                'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-600/90': context.focused
+            },
+
+            // Misc
+            'cursor-pointer no-underline',
+            'select-none overflow-hidden'
+        ]
+    }),
+    icon: {
+        class: 'mr-2'
+    },
+    submenu: {
+        class: 'p-0 pl-4 m-0 list-none'
+    },
+    transition: {
+        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'
+    }
+};

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

@@ -0,0 +1,181 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+            '[&>input]:pr-10'?: undefined;
+        } | {
+            '[&>input]:pr-10': any;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        })[];
+    };
+    namespace panel {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace meter {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    function meterlabel({ instance }: {
+        instance: any;
+    }): {
+        class: (string | {
+            'bg-red-500 dark:bg-red-400/50': boolean;
+            'bg-orange-500 dark:bg-orange-400/50': boolean;
+            'bg-green-500 dark:bg-green-400/50': boolean;
+        })[];
+    };
+    namespace showicon {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace hideicon {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace input {
+        export function root_1({ props, context, parent }: {
+            props: any;
+            context: any;
+            parent: any;
+        }): {
+            class: (string | {
+                'flex-1 w-[1%]': boolean;
+                'px-4 py-4'?: undefined;
+                'px-2 py-2'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 -ml-px'?: undefined;
+                'border-surface-300 dark:border-surface-600'?: undefined;
+                '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 focus:z-10'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+            } | {
+                'px-4 py-4': boolean;
+                'px-2 py-2': boolean;
+                'p-3': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 -ml-px'?: undefined;
+                'border-surface-300 dark:border-surface-600'?: undefined;
+                '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 focus:z-10'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+            } | {
+                'rounded-md': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'px-4 py-4'?: undefined;
+                'px-2 py-2'?: undefined;
+                'p-3'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 -ml-px'?: undefined;
+                'border-surface-300 dark:border-surface-600'?: undefined;
+                '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 focus:z-10'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+            } | {
+                'first:rounded-l-md rounded-none last:rounded-r-md': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'px-4 py-4'?: undefined;
+                'px-2 py-2'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 -ml-px'?: undefined;
+                'border-surface-300 dark:border-surface-600'?: undefined;
+                '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 focus:z-10'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+            } | {
+                'border-0 border-y border-l last:border-r': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'px-4 py-4'?: undefined;
+                'px-2 py-2'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'first:ml-0 -ml-px'?: undefined;
+                'border-surface-300 dark:border-surface-600'?: undefined;
+                '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 focus:z-10'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+            } | {
+                'first:ml-0 -ml-px': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'px-4 py-4'?: undefined;
+                'px-2 py-2'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'border-surface-300 dark:border-surface-600'?: undefined;
+                '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 focus:z-10'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+            } | {
+                'border-surface-300 dark:border-surface-600': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'px-4 py-4'?: undefined;
+                'px-2 py-2'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 -ml-px'?: undefined;
+                '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 focus:z-10'?: undefined;
+                'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+            } | {
+                'border-red-500 dark:border-red-400': any;
+                'flex-1 w-[1%]'?: undefined;
+                'px-4 py-4'?: undefined;
+                'px-2 py-2'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 -ml-px'?: undefined;
+                '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 focus:z-10'?: 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 focus:z-10': boolean;
+                'opacity-60 select-none pointer-events-none cursor-default': any;
+                'flex-1 w-[1%]'?: undefined;
+                'px-4 py-4'?: undefined;
+                'px-2 py-2'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 -ml-px'?: undefined;
+                'border-surface-300 dark:border-surface-600'?: undefined;
+                'border-red-500 dark:border-red-400'?: undefined;
+            })[];
+        };
+        export { root_1 as root };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

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

@@ -0,0 +1,118 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-flex relative',
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            },
+            { '[&>input]:pr-10': props.toggleMask }
+        ]
+    }),
+    panel: {
+        class: [
+            // Spacing
+            'p-5',
+
+            // Shape
+            'border-0 dark:border',
+            'shadow-md rounded-md',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-900',
+            'text-surface-700 dark:text-white/80',
+            'dark:border-surface-700'
+        ]
+    },
+    meter: {
+        class: [
+            // Position and Overflow
+            'overflow-hidden',
+            'relative',
+
+            // Shape and Size
+            'border-0',
+            'h-3',
+
+            // Spacing
+            'mb-2',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700'
+        ]
+    },
+    meterlabel: ({ instance }) => ({
+        class: [
+            // Size
+            'h-full',
+
+            // Colors
+            {
+                'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
+                'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium',
+                'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong'
+            },
+
+            // Transitions
+            'transition-all duration-1000 ease-in-out'
+        ]
+    }),
+    showicon: {
+        class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+    },
+    hideicon: {
+        class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
+    },
+    input: {
+        root: ({ props, context, parent }) => ({
+            class: [
+                // Font
+                'font-sans leading-none',
+
+                // Flex
+                { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+                // Spacing
+                'm-0',
+                {
+                    'px-4 py-4': props.size == 'large',
+                    'px-2 py-2': props.size == 'small',
+                    'p-3': props.size == null
+                },
+                'w-full',
+
+                // Shape
+                { 'rounded-md': parent.instance.$name !== 'InputGroup' },
+                { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
+                { 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
+                { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+                // 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': !parent.props.invalid },
+
+                // Invalid State
+                { 'border-red-500 dark:border-red-400': parent.props.invalid },
+
+                // States
+                {
+                    'hover:border-primary-500 dark:hover:border-primary-400': !context.disabled && !parent.props.invalid,
+                    'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50 focus:z-10': !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                },
+
+                // Misc
+                'appearance-none',
+                'transition-colors duration-200'
+            ]
+        })
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-y-[0.8]',
+        enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
+        leaveActiveClass: 'transition-opacity duration-100 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};