@gluhar/theme 2.0.0-dev.0

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

@@ -0,0 +1,56 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+        }[];
+    };
+    function button({ context, props }: {
+        context: any;
+        props: any;
+    }): {
+        class: (string | {
+            'bg-surface-0 dark:bg-surface-900': boolean;
+            'text-surface-700 dark:text-white/80': boolean;
+            'border-surface-200 dark:border-surface-700': boolean;
+            'bg-primary-500 dark:bg-primary-400 border-primary-500 dark:border-primary-400 text-white dark:text-surface-900': any;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'hover:bg-surface-50 dark:hover:bg-surface-800/80'?: undefined;
+            'hover:bg-primary-600 dark:hover:bg-primary-300'?: undefined;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'border-red-500 dark:border-red-400': any;
+            'bg-surface-0 dark:bg-surface-900'?: undefined;
+            'text-surface-700 dark:text-white/80'?: undefined;
+            'border-surface-200 dark:border-surface-700'?: undefined;
+            'bg-primary-500 dark:bg-primary-400 border-primary-500 dark:border-primary-400 text-white dark:text-surface-900'?: undefined;
+            'hover:bg-surface-50 dark:hover:bg-surface-800/80'?: undefined;
+            'hover:bg-primary-600 dark:hover:bg-primary-300'?: undefined;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'hover:bg-surface-50 dark:hover:bg-surface-800/80': boolean;
+            'hover:bg-primary-600 dark:hover:bg-primary-300': any;
+            'bg-surface-0 dark:bg-surface-900'?: undefined;
+            'text-surface-700 dark:text-white/80'?: undefined;
+            'border-surface-200 dark:border-surface-700'?: undefined;
+            'bg-primary-500 dark:bg-primary-400 border-primary-500 dark:border-primary-400 text-white dark:text-surface-900'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+            'bg-surface-0 dark:bg-surface-900'?: undefined;
+            'text-surface-700 dark:text-white/80'?: undefined;
+            'border-surface-200 dark:border-surface-700'?: undefined;
+            'bg-primary-500 dark:bg-primary-400 border-primary-500 dark:border-primary-400 text-white dark:text-surface-900'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'hover:bg-surface-50 dark:hover:bg-surface-800/80'?: undefined;
+            'hover:bg-primary-600 dark:hover:bg-primary-300'?: undefined;
+        })[];
+    };
+    namespace label {
+        let _class: string;
+        export { _class as class };
+    }
+}
+export default _default;

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

@@ -0,0 +1,49 @@
+export default {
+    root: ({ props }) => ({
+        class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+    }),
+    button: ({ context, props }) => ({
+        class: [
+            'relative',
+            // Font
+            'leading-none',
+
+            // Flex Alignment
+            'inline-flex items-center align-bottom text-center',
+
+            // Spacing
+            'px-4 py-3',
+
+            // Shape
+            'border border-r-0',
+            'first:rounded-l-md first:rounded-tr-none first:rounded-br-none',
+            'last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
+
+            // Color
+            {
+                'bg-surface-0 dark:bg-surface-900': !context.active,
+                'text-surface-700 dark:text-white/80': !context.active,
+                'border-surface-200 dark:border-surface-700': !context.active && !props.invalid,
+                'bg-primary-500 dark:bg-primary-400 border-primary-500 dark:border-primary-400 text-white dark:text-surface-900': context.active
+            },
+            // Invalid State
+            { 'border-red-500 dark:border-red-400': props.invalid },
+
+            // States
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50 focus:z-10',
+            {
+                'hover:bg-surface-50 dark:hover:bg-surface-800/80': !context.active && !props.invalid,
+                'hover:bg-primary-600 dark:hover:bg-primary-300': context.active
+            },
+            { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none overflow-hidden'
+        ]
+    }),
+    label: {
+        class: 'font-bold'
+    }
+};

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

@@ -0,0 +1,66 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': boolean;
+            'h-full w-80'?: undefined;
+            'h-auto w-full'?: undefined;
+        } | {
+            'h-full w-80': boolean;
+            'h-auto w-full': boolean;
+            '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0'?: undefined;
+        })[];
+    };
+    namespace header {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace title {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace icons {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace closeButton {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace closeButtonIcon {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace content {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    function mask({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'p-5': boolean;
+            'has-[.mask-active]:bg-transparent bg-black/40'?: undefined;
+            'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm'?: undefined;
+        } | {
+            'has-[.mask-active]:bg-transparent bg-black/40': any;
+            'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': any;
+            'p-5'?: undefined;
+        })[];
+    };
+    function transition({ props }: {
+        props: any;
+    }): {
+        enterFromClass: string;
+        leaveToClass: string;
+        enterActiveClass?: undefined;
+        leaveActiveClass?: undefined;
+    } | {
+        enterFromClass: string;
+        enterActiveClass: string;
+        leaveActiveClass: string;
+        leaveToClass: string;
+    };
+}
+export default _default;

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

@@ -0,0 +1,149 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            // Flexbox
+            'flex flex-col',
+
+            // Position
+            'relative',
+            { '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full' },
+
+            // Size
+            {
+                'h-full w-80': props.position == 'left' || props.position == 'right',
+                'h-auto w-full': props.position == 'top' || props.position == 'bottom'
+            },
+
+            // Shape
+            'border-0 dark:border',
+            'shadow-lg',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+            'dark:border-surface-700',
+
+            // Transitions
+            'transition-transform',
+            'duration-300',
+
+            // Misc
+            'pointer-events-auto'
+        ]
+    }),
+    header: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-between',
+            'shrink-0',
+
+            // Spacing
+            'p-5',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-surface-0/80'
+        ]
+    },
+    title: {
+        class: ['font-bold text-lg']
+    },
+    icons: {
+        class: ['flex items-center']
+    },
+    closeButton: {
+        class: [
+            'relative',
+
+            // Flexbox and Alignment
+            'flex items-center justify-center',
+
+            // Size and Spacing
+            'mr-2',
+            'last:mr-0',
+            'w-8 h-8',
+
+            // Shape
+            'border-0',
+            'rounded-full',
+
+            // Colors
+            'text-surface-500',
+            'bg-transparent',
+
+            // Transitions
+            'transition duration-200 ease-in-out',
+
+            // States
+            'hover:text-surface-700 dark:hover:text-white/80',
+            'hover:bg-surface-100 dark:hover:bg-surface-800/80',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset',
+            'focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Misc
+            'overflow-hidden'
+        ]
+    },
+    closeButtonIcon: {
+        class: [
+            // Display
+            'inline-block',
+
+            // Size
+            'w-4',
+            'h-4'
+        ]
+    },
+    content: {
+        class: [
+            // Spacing and Size
+            'p-5',
+            'pt-0',
+            'h-full',
+            'w-full',
+
+            // Growth and Overflow
+            'grow',
+            'overflow-y-auto'
+        ]
+    },
+    mask: ({ props }) => ({
+        class: [
+            // Transitions
+            'transition-all',
+            'duration-300',
+            { 'p-5': !props.position == 'full' },
+
+            // Background and Effects
+            { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal, 'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal }
+        ]
+    }),
+    transition: ({ props }) => {
+        return props.position === 'top'
+            ? {
+                  enterFromClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'bottom'
+            ? {
+                  enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active'
+              }
+            : props.position === 'left'
+            ? {
+                  enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
+                  leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : props.position === 'right'
+            ? {
+                  enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
+                  leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active'
+              }
+            : {
+                  enterFromClass: 'opacity-0 mask-active',
+                  enterActiveClass: 'transition-opacity duration-400 ease-in',
+                  leaveActiveClass: 'transition-opacity duration-400 ease-in',
+                  leaveToClass: 'opacity-0 mask-active'
+              };
+    }
+};

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

@@ -0,0 +1,16 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'animate-pulse': boolean;
+            'rounded-full'?: undefined;
+            'rounded-md'?: undefined;
+        } | {
+            'rounded-full': boolean;
+            'rounded-md': boolean;
+            'animate-pulse'?: undefined;
+        })[];
+    };
+}
+export default _default;

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

@@ -0,0 +1,16 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'overflow-hidden',
+            {
+                'animate-pulse': props.animation !== 'none'
+            },
+
+            // Round
+            { 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
+
+            // Colors
+            'bg-surface-200 dark:bg-surface-700'
+        ]
+    })
+};

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

@@ -0,0 +1,55 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'h-1 w-60': boolean;
+            'w-1 h-56': boolean;
+            'opacity-60 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+            'h-1 w-60'?: undefined;
+            'w-1 h-56'?: undefined;
+        })[];
+    };
+    function range({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'top-0 left-0': boolean;
+            'bottom-0 left-0': boolean;
+            'h-full'?: undefined;
+            'w-full'?: undefined;
+        } | {
+            'h-full': boolean;
+            'w-full': boolean;
+            'top-0 left-0'?: undefined;
+            'bottom-0 left-0'?: undefined;
+        })[];
+    };
+    function handle({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': boolean;
+            'left-[50%] mb-[-0.5715rem] ml-[-0.5715rem]': boolean;
+        })[];
+    };
+    function starthandler({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': boolean;
+            'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': boolean;
+        })[];
+    };
+    function endhandler({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': boolean;
+            'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': boolean;
+        })[];
+    };
+}
+export default _default;

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

@@ -0,0 +1,137 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+
+            // Size
+            { 'h-1 w-60': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' },
+
+            // Shape
+            'border-0',
+
+            // Colors
+            'bg-surface-100 dark:bg-surface-700',
+
+            // States
+            { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+        ]
+    }),
+    range: ({ props }) => ({
+        class: [
+            // Position
+            'block absolute',
+            {
+                'top-0 left-0': props.orientation == 'horizontal',
+                'bottom-0 left-0': props.orientation == 'vertical'
+            },
+
+            //Size
+            {
+                'h-full': props.orientation == 'horizontal',
+                'w-full': props.orientation == 'vertical'
+            },
+
+            // Colors
+            'bg-primary-500 dark:bg-primary-400'
+        ]
+    }),
+    handle: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary-500 dark:border-primary-400',
+
+            // States
+            'hover:bg-primary-500 hover:border-primary-500',
+            'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring',
+            'ring-primary-400/50 dark:ring-primary-300/50',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    }),
+    starthandler: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary-500 dark:border-primary-400',
+
+            // States
+            'hover:bg-primary-500 hover:border-primary-500',
+            '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',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    }),
+    endhandler: ({ props }) => ({
+        class: [
+            'block',
+
+            // Size
+            'h-[1.143rem]',
+            'w-[1.143rem]',
+            {
+                'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+            },
+
+            // Shape
+            'rounded-full',
+            'border-2',
+
+            // Colors
+            'bg-surface-0 dark:bg-surface-600',
+            'border-primary-500 dark:border-primary-400',
+
+            // States
+            'hover:bg-primary-500 hover:border-primary-500',
+            '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',
+
+            // Transitions
+            'transition duration-200',
+
+            // Misc
+            'cursor-grab',
+            'touch-action-none'
+        ]
+    })
+};