@gluhar/theme 2.0.0-dev.0

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

@@ -0,0 +1,164 @@
+export default {
+    root: ({ props, parent }) => ({
+        class: [
+            // Flex
+            'inline-flex',
+            { 'flex-col': props.showButtons && props.buttonLayout == 'vertical' },
+            { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+
+            // Shape
+            { 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons },
+            { 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' && !props.showButtons },
+            { 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
+
+            //Sizing
+            { '!w-16': props.showButtons && props.buttonLayout == 'vertical' }
+        ]
+    }),
+    input: {
+        root: ({ parent, context }) => ({
+            class: [
+                // Display
+                'flex flex-auto',
+
+                // Font
+                'font-sans leading-none',
+
+                //Text
+                { 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Spacing
+                'p-3',
+                'm-0',
+
+                // Shape
+                'rounded-lg',
+                { 'rounded-tr-none rounded-br-none': parent.props.showButtons },
+                { 'rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                { '!rounded-none': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons },
+                { 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.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': !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',
+                { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+                //Position
+                { 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' }
+            ]
+        })
+    },
+    buttongroup: ({ props }) => ({
+        class: [
+            // Flex
+            'flex',
+            'flex-col'
+        ]
+    }),
+
+    incrementbutton: {
+        root: ({ parent }) => ({
+            class: [
+                // Display
+                'flex flex-auto',
+
+                // Alignment
+                'items-center',
+                'justify-center',
+                'text-center align-bottom',
+
+                //Position
+                'relative',
+                { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //Color
+                'text-white dark:text-surface-900',
+                'bg-primary-500 dark:bg-primary-400',
+                'border border-primary-500 dark:border-primary-400',
+
+                // Sizing
+                'w-[3rem]',
+                { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
+                { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Shape
+                'rounded-md',
+                { 'rounded-tl-none rounded-br-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'rounded-bl-none rounded-tl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-bl-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //States
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
+
+                //Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: {
+            class: 'h-0 w-0'
+        }
+    },
+    decrementbutton: {
+        root: ({ parent }) => ({
+            class: [
+                // Display
+                'flex flex-auto',
+
+                // Alignment
+                'items-center',
+                'justify-center',
+                'text-center align-bottom',
+
+                //Position
+                'relative',
+                { 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //Color
+                'text-white dark:text-surface-900',
+                'bg-primary-500 dark:bg-primary-400',
+                'border border-primary-500 dark:border-primary-400',
+
+                // Sizing
+                'w-[3rem]',
+                { 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
+                { 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                // Shape
+                'rounded-md',
+                { 'rounded-tr-none rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
+                { 'rounded-tr-none rounded-br-none ': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
+                { 'rounded-tr-none rounded-tl-none ': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
+
+                //States
+                'focus:outline-none focus:outline-offset-0 focus:ring',
+                'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
+
+                //Misc
+                'cursor-pointer overflow-hidden select-none'
+            ]
+        }),
+        label: {
+            class: 'h-0 w-0'
+        }
+    }
+};

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

@@ -0,0 +1,147 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace input {
+        export function root_1({ props, context, parent }: {
+            props: any;
+            context: any;
+            parent: any;
+        }): {
+            class: (string | {
+                'flex-1 w-[1%]': boolean;
+                '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-[-1px]'?: 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;
+                filled?: undefined;
+            } | {
+                '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-[-1px]'?: 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;
+                filled?: undefined;
+            } | {
+                'rounded-md': boolean;
+                'flex-1 w-[1%]'?: 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-[-1px]'?: 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;
+                filled?: undefined;
+            } | {
+                'first:rounded-l-md rounded-none last:rounded-r-md': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'border-0 border-y border-l last:border-r'?: undefined;
+                'first:ml-0 ml-[-1px]'?: 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;
+                filled?: undefined;
+            } | {
+                'border-0 border-y border-l last:border-r': boolean;
+                'flex-1 w-[1%]'?: undefined;
+                'p-3'?: undefined;
+                'rounded-md'?: undefined;
+                'first:rounded-l-md rounded-none last:rounded-r-md'?: undefined;
+                'first:ml-0 ml-[-1px]'?: 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;
+                filled?: undefined;
+            } | {
+                'first:ml-0 ml-[-1px]': boolean;
+                'flex-1 w-[1%]'?: 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;
+                filled?: undefined;
+            } | {
+                'border-surface-300 dark:border-surface-600': boolean;
+                'flex-1 w-[1%]'?: 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-[-1px]'?: 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;
+                filled?: undefined;
+            } | {
+                'border-red-500 dark:border-red-400': any;
+                'flex-1 w-[1%]'?: 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-[-1px]'?: 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;
+                filled?: 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;
+                '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-[-1px]'?: undefined;
+                'border-surface-300 dark:border-surface-600'?: undefined;
+                'border-red-500 dark:border-red-400'?: undefined;
+                filled?: undefined;
+            } | {
+                filled: any;
+                'flex-1 w-[1%]'?: 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-[-1px]'?: 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;
+            })[];
+        };
+        export { root_1 as root };
+    }
+}
+export default _default;

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

@@ -0,0 +1,60 @@
+export default {
+    root: {
+        class: [
+            // Alignment
+            'flex items-center',
+            'gap-2'
+        ]
+    },
+    input: {
+        root: ({ props, context, parent }) => ({
+            class: [
+                // Font
+                'font-sans leading-none',
+
+                // Flex & Alignment
+                { 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
+                'text-center',
+
+                // Spacing
+                'm-0',
+                {
+                    'p-3': props.size == null
+                },
+
+                // Size
+                'w-10',
+
+                // 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-[-1px]': 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': !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 focus:z-10': !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                },
+
+                // Filled State *for FloatLabel
+                { filled: parent.instance?.$name == 'FloatLabel' && context.filled },
+
+                // Misc
+                'appearance-none',
+                'transition-colors duration-200'
+            ]
+        })
+    }
+};

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

@@ -0,0 +1,67 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+        })[];
+    };
+    function slider({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'before:transform before:translate-x-5': boolean;
+            'bg-surface-200 dark:bg-surface-700'?: undefined;
+            'bg-primary-500 dark:bg-primary-400'?: undefined;
+            'border-transparent'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 '?: undefined;
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 '?: undefined;
+        } | {
+            'bg-surface-200 dark:bg-surface-700': boolean;
+            'bg-primary-500 dark:bg-primary-400': boolean;
+            'before:transform before:translate-x-5'?: undefined;
+            'border-transparent'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 '?: undefined;
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 '?: undefined;
+        } | {
+            'border-transparent': boolean;
+            'before:transform before:translate-x-5'?: undefined;
+            'bg-surface-200 dark:bg-surface-700'?: undefined;
+            'bg-primary-500 dark:bg-primary-400'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 '?: undefined;
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 '?: undefined;
+        } | {
+            'border-red-500 dark:border-red-400': any;
+            'before:transform before:translate-x-5'?: undefined;
+            'bg-surface-200 dark:bg-surface-700'?: undefined;
+            'bg-primary-500 dark:bg-primary-400'?: undefined;
+            'border-transparent'?: undefined;
+            'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 '?: undefined;
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 '?: undefined;
+        } | {
+            'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 ': boolean;
+            'before:transform before:translate-x-5'?: undefined;
+            'bg-surface-200 dark:bg-surface-700'?: undefined;
+            'bg-primary-500 dark:bg-primary-400'?: undefined;
+            'border-transparent'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 '?: undefined;
+        } | {
+            'peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 ': boolean;
+            'before:transform before:translate-x-5'?: undefined;
+            'bg-surface-200 dark:bg-surface-700'?: undefined;
+            'bg-primary-500 dark:bg-primary-400'?: undefined;
+            'border-transparent'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 '?: undefined;
+        })[];
+    };
+    namespace input {
+        let _class: string[];
+        export { _class as class };
+    }
+}
+export default _default;

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

@@ -0,0 +1,80 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'inline-block relative',
+            'w-12 h-7',
+            'rounded-2xl',
+            {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            }
+        ]
+    }),
+    slider: ({ props }) => ({
+        class: [
+            // Position
+            'absolute top-0 left-0 right-0 bottom-0',
+            { 'before:transform before:translate-x-5': props.modelValue == props.trueValue },
+
+            // Shape
+            'rounded-2xl',
+
+            // Before:
+            'before:absolute before:top-1/2 before:left-1',
+            'before:-mt-2.5',
+            'before:h-5 before:w-5',
+            'before:rounded-full',
+            'before:duration-200',
+            'before:bg-surface-0 before:dark:bg-surface-900',
+
+            // Colors
+            'border',
+            {
+                'bg-surface-200 dark:bg-surface-700': !(props.modelValue == props.trueValue),
+                'bg-primary-500 dark:bg-primary-400': props.modelValue == props.trueValue
+            },
+
+            { 'border-transparent': !props.invalid },
+
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            { 'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 ': !(props.modelValue == props.trueValue) && !props.disabled },
+            { 'peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 ': props.modelValue == props.trueValue && !props.disabled },
+            'peer-focus-visible:ring peer-focus-visible:ring-primary-400/50 dark:peer-focus-visible:ring-primary-300/50',
+
+            // Transition
+            'transition-colors duration-200',
+
+            // Misc
+            'cursor-pointer'
+        ]
+    }),
+    input: {
+        class: [
+            'peer',
+
+            // Size
+            'w-full ',
+            'h-full',
+
+            // Position
+            'absolute',
+            'top-0 left-0',
+            'z-10',
+
+            // Spacing
+            'p-0',
+            'm-0',
+
+            // Shape
+            'opacity-0',
+            'rounded-[2.5rem]',
+            'outline-none',
+
+            // Misc
+            'appearance-none',
+            'cursor-pointer'
+        ]
+    }
+};