@gluhar/theme 2.0.0-dev.0

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

@@ -0,0 +1,258 @@
+export default {
+    root: {
+        class: [
+            // Space
+            'p-5',
+
+            // Shape
+            'rounded-md',
+
+            // Color
+            'bg-surface-0 dark:bg-surface-800',
+            'text-surface-700 dark:text-white/80',
+            'border border-solid border-surface-200 dark:border-surface-700'
+        ]
+    },
+    wrapper: {
+        class: ['overflow-auto']
+    },
+    container: {
+        class: [
+            // Spacing
+            'm-0 p-0',
+
+            // Misc
+            'list-none overflow-auto'
+        ]
+    },
+    node: {
+        class: ['p-1', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-inset focus:ring-primary-400/50 dark:focus:ring-primary-300/50']
+    },
+    content: ({ context, props }) => ({
+        class: [
+            // Flex and Alignment
+            'flex items-center',
+
+            // Shape
+            'rounded-md',
+
+            // Spacing
+            'p-2',
+
+            // Colors
+            'text-surface-600 dark:text-white/70',
+            { 'bg-primary-50 dark:bg-primary-400/30 text-primary-600 dark:text-surface-0': context.selected },
+
+            // States
+            { 'hover:bg-surface-50 dark:hover:bg-surface-700/40': (props.selectionMode == 'single' || props.selectionMode == 'multiple') && !context.selected },
+
+            // Transition
+            'transition-shadow duration-200',
+
+            { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+        ]
+    }),
+    toggler: ({ context }) => ({
+        class: [
+            // Flex and Alignment
+            'inline-flex items-center justify-center',
+
+            // Shape
+            'border-0 rounded-full',
+
+            // Size
+            'w-8 h-8',
+
+            // Spacing
+            'mr-2',
+
+            // Colors
+            'bg-transparent',
+            {
+                'text-surface-500 dark:text-white': !context.selected,
+                'text-primary-600 dark:text-white': context.selected,
+                invisible: context.leaf
+            },
+
+            // States
+            'hover:bg-surface-200/20 dark:hover:bg-surface-500/20',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Transition
+            'transition duration-200',
+
+            // Misc
+            'cursor-pointer select-none'
+        ]
+    }),
+    nodeCheckbox: ({ props, context, instance }) => ({
+        root: {
+            class: [
+                'relative',
+
+                // Alignment
+                'inline-flex',
+                'align-bottom',
+
+                // Size
+                'w-6',
+                'h-6',
+
+                // Spacing
+                'mr-2',
+
+                // Misc
+                'cursor-pointer',
+                'select-none'
+            ]
+        },
+        box: {
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+
+                // Size
+                'w-6',
+                'h-6',
+
+                // Shape
+                'rounded-md',
+                'border-2',
+
+                // Colors
+                {
+                    'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
+                    'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked
+                },
+
+                // States
+                {
+                    'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': !props.disabled && !context.checked,
+                    'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': !props.disabled && context.checked,
+                    'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                },
+
+                // Transitions
+                'transition-colors',
+                'duration-200'
+            ]
+        },
+        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-md',
+                'outline-none',
+                'border-2 border-surface-200 dark:border-surface-700',
+
+                // Misc
+                'appearance-none',
+                'cursor-pointer'
+            ]
+        },
+        icon: {
+            class: [
+                // Font
+                'text-base leading-none',
+
+                // Size
+                'w-4',
+                'h-4',
+
+                // Colors
+                {
+                    'text-white dark:text-surface-900': !instance.partialChecked,
+                    'text-gray dark:text-white': instance.partialChecked
+                },
+
+                // Transitions
+                'transition-all',
+                'duration-200'
+            ]
+        }
+    }),
+    nodeicon: {
+        class: [
+            // Space
+            'mr-2',
+
+            // Color
+            'text-surface-600 dark:text-white/70'
+        ]
+    },
+    subgroup: {
+        class: ['m-0 list-none p-0 pl-2 mt-1']
+    },
+    filtercontainer: {
+        class: [
+            'relative block',
+
+            // Space
+            'mb-2',
+
+            // Size
+            'w-full'
+        ]
+    },
+    input: {
+        class: [
+            'relative',
+            // Font
+            'font-sans leading-none',
+
+            // Spacing
+            'm-0',
+            'p-3 pr-10',
+
+            // Size
+            'w-full',
+
+            // 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',
+
+            // States
+            'hover:border-primary-500 dark:hover:border-primary-400',
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-500/50 dark:focus:ring-primary-400/50',
+
+            // Transition & Misc
+            'appearance-none',
+            'transition-colors duration-200'
+        ]
+    },
+    loadingicon: {
+        class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
+    },
+    searchicon: {
+        class: [
+            // Position
+            'absolute top-1/2 -mt-2 right-3',
+
+            // Color
+            'text-surface-600 dark:hover:text-white/70'
+        ]
+    }
+};

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

@@ -0,0 +1,181 @@
+declare namespace _default {
+    function root({ props, state }: {
+        props: any;
+        state: 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-300'?: undefined;
+            'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50'?: undefined;
+            'opacity-60'?: undefined;
+            'pointer-events-none'?: undefined;
+            '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-300'?: undefined;
+            'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50'?: undefined;
+            'opacity-60'?: undefined;
+            'pointer-events-none'?: undefined;
+            'cursor-default'?: undefined;
+        } | {
+            'hover:border-primary-500 dark:hover:border-primary-300': boolean;
+            'border-surface-300 dark:border-surface-600'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50'?: undefined;
+            'opacity-60'?: undefined;
+            'pointer-events-none'?: undefined;
+            'cursor-default'?: undefined;
+        } | {
+            'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50': any;
+            'border-surface-300 dark:border-surface-600'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'hover:border-primary-500 dark:hover:border-primary-300'?: undefined;
+            'opacity-60'?: undefined;
+            'pointer-events-none'?: undefined;
+            'cursor-default'?: undefined;
+        } | {
+            'opacity-60': any;
+            'pointer-events-none': any;
+            'cursor-default': any;
+            'border-surface-300 dark:border-surface-600'?: undefined;
+            'border-red-500 dark:border-red-400'?: undefined;
+            'hover:border-primary-500 dark:hover:border-primary-300'?: undefined;
+            'outline-none outline-offset-0 ring ring-primary-400/50 dark:ring-primary-300/50'?: undefined;
+        })[];
+    };
+    namespace labelContainer {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace label {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace trigger {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace panel {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace wrapper {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace tree {
+        export namespace root_1 {
+            let _class_5: string[];
+            export { _class_5 as class };
+        }
+        export { root_1 as root };
+        export namespace wrapper_1 {
+            let _class_6: string[];
+            export { _class_6 as class };
+        }
+        export { wrapper_1 as wrapper };
+        export namespace container {
+            let _class_7: string[];
+            export { _class_7 as class };
+        }
+        export namespace node {
+            let _class_8: string[];
+            export { _class_8 as class };
+        }
+        export function content({ context, props }: {
+            context: any;
+            props: any;
+        }): {
+            class: (string | {
+                'bg-primary-50 dark:bg-primary-400/30 text-primary-600 dark:text-surface-0': any;
+                'hover:bg-surface-50 dark:hover:bg-surface-700/40'?: undefined;
+                'cursor-pointer select-none'?: undefined;
+            } | {
+                'hover:bg-surface-50 dark:hover:bg-surface-700/40': boolean;
+                'bg-primary-50 dark:bg-primary-400/30 text-primary-600 dark:text-surface-0'?: undefined;
+                'cursor-pointer select-none'?: undefined;
+            } | {
+                'cursor-pointer select-none': boolean;
+                'bg-primary-50 dark:bg-primary-400/30 text-primary-600 dark:text-surface-0'?: undefined;
+                'hover:bg-surface-50 dark:hover:bg-surface-700/40'?: undefined;
+            })[];
+        };
+        export function toggler({ context }: {
+            context: any;
+        }): {
+            class: (string | {
+                'text-surface-500 dark:text-white': boolean;
+                'text-primary-600 dark:text-white': any;
+                invisible: any;
+            })[];
+        };
+        export function nodeCheckbox({ props, context, instance }: {
+            props: any;
+            context: any;
+            instance: any;
+        }): {
+            root: {
+                class: string[];
+            };
+            box: {
+                class: (string | {
+                    'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': boolean;
+                    'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': any;
+                    'peer-hover:border-primary-500 dark:peer-hover:border-primary-400'?: undefined;
+                    'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300'?: undefined;
+                    'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20'?: undefined;
+                    'cursor-default opacity-60'?: undefined;
+                } | {
+                    'peer-hover:border-primary-500 dark:peer-hover:border-primary-400': boolean;
+                    'peer-hover:bg-primary-600 dark:peer-hover:bg-primary-300 peer-hover:border-primary-700 dark:peer-hover:border-primary-300': any;
+                    'peer-focus-visible:border-primary-500 dark:peer-focus-visible:border-primary-400 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-400/20 dark:peer-focus-visible:ring-primary-300/20': boolean;
+                    'cursor-default opacity-60': any;
+                    'border-surface-200 bg-surface-0 dark:border-surface-700 dark:bg-surface-900'?: undefined;
+                    'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'?: undefined;
+                })[];
+            };
+            input: {
+                class: string[];
+            };
+            icon: {
+                class: (string | {
+                    'text-white dark:text-surface-900': boolean;
+                    'text-gray dark:text-white': any;
+                })[];
+            };
+        };
+        export namespace nodeicon {
+            let _class_9: string[];
+            export { _class_9 as class };
+        }
+        export namespace subgroup {
+            let _class_10: string[];
+            export { _class_10 as class };
+        }
+        export namespace filtercontainer {
+            let _class_11: string[];
+            export { _class_11 as class };
+        }
+        export namespace input {
+            let _class_12: string[];
+            export { _class_12 as class };
+        }
+        export namespace loadingicon {
+            let _class_13: string[];
+            export { _class_13 as class };
+        }
+        export namespace searchicon {
+            let _class_14: string[];
+            export { _class_14 as class };
+        }
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;