@gluhar/theme 2.0.0-dev.0

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

@@ -0,0 +1,306 @@
+export default {
+    content: ({ parent, props }) => ({
+        class: [
+            'flex',
+            {
+                'flex-col': props.fullScreen
+            },
+            {
+                'flex-col': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+                'flex-row': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    itemwrapper: ({ parent, props }) => ({
+        class: [
+            'group',
+            'flex relative',
+            {
+                'grow shrink w-0 justify-center': props.fullScreen
+            },
+            {
+                'flex-col': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'top',
+                'flex-row items-center': parent.props.indicatorsPosition === 'left' || parent.props.indicatorsPosition === 'right'
+            },
+            {
+                'order-2': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left',
+                'flex-row': parent.props.thumbnailsPosition === 'right'
+            }
+        ]
+    }),
+
+    itemcontainer: ({ parent }) => ({
+        class: [
+            'flex h-full relative',
+            {
+                'order-1': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'right',
+                'order-2': parent.props.indicatorsPosition === 'top' || parent.props.indicatorsPosition === 'left'
+            }
+        ]
+    }),
+    item: {
+        class: [
+            // Flex
+            'flex justify-center items-center h-full w-full',
+
+            // Sizing
+            'h-full w-full'
+        ]
+    },
+    thumbnailwrapper: ({ parent }) => ({
+        class: [
+            // Flex
+            'flex flex-col shrink-0',
+
+            {
+                'order-1': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left'
+            },
+
+            // Misc
+            'overflow-auto'
+        ]
+    }),
+    thumbnailcontainer: ({ parent }) => ({
+        class: [
+            // Flex
+            'flex',
+
+            // Spacing
+            'p-4',
+
+            // Colors
+            'bg-black/90',
+
+            {
+                'flex-row': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
+                'flex-col grow': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    previousthumbnailbutton: {
+        class: [
+            // Positioning
+            'self-center relative',
+
+            // Display & Flexbox
+            'flex shrink-0 justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effects
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    thumbnailitemscontainer: {
+        class: 'overflow-hidden w-full'
+    },
+    thumbnailitems: ({ parent }) => ({
+        class: [
+            'flex',
+            {
+                'flex-col h-full': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
+            }
+        ]
+    }),
+    thumbnailitem: ({ parent }) => ({
+        class: [
+            // Flexbox
+            'flex items-center justify-center',
+            'grow shrink-0',
+
+            // Sizing
+            {
+                'w-full md:w-[25%] lg:w-[20%]': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom'
+            },
+
+            // Misc
+            'overflow-auto',
+            'cursor-pointer',
+            'opacity-50',
+
+            // States
+            'hover:opacity-100',
+            'hover:transition-opacity',
+            'hover:duration-300'
+        ]
+    }),
+    nextthumbnailbutton: {
+        class: [
+            // Positioning
+            'self-center relative',
+
+            // Display & Flexbox
+            'flex shrink-0 justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effects
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    indicators: ({ parent }) => ({
+        class: [
+            // flex
+            'flex items-center justify-center',
+
+            // Spacing
+            'p-4',
+
+            // Indicators Position
+            {
+                'order-2': parent.props.indicatorsPosition == 'bottom',
+                'order-1': parent.props.indicatorsPosition == 'top',
+                'order-1 flex-col': parent.props.indicatorsPosition == 'left',
+                'flex-col order-2': parent.props.indicatorsPosition == 'right'
+            },
+            {
+                'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem
+            },
+
+            {
+                'bottom-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'bottom' && parent.props.showIndicatorsOnItem,
+                'top-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'top' && parent.props.showIndicatorsOnItem,
+                'left-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'left' && parent.props.showIndicatorsOnItem,
+                'right-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'right' && parent.props.showIndicatorsOnItem
+            }
+        ]
+    }),
+    indicator: ({ parent }) => ({
+        class: [
+            {
+                'mr-2': parent.props.indicatorsPosition == 'bottom' || parent.props.indicatorsPosition == 'top',
+                'mb-2': parent.props.indicatorsPosition == 'left' || parent.props.indicatorsPosition == 'right'
+            }
+        ]
+    }),
+    indicatorbutton: ({ context }) => ({
+        class: [
+            // Size
+            'w-4 h-4',
+
+            // Appearance
+            'rounded-full transition duration-200',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
+
+            // Conditional Appearance: Not Highlighted
+            { 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted },
+
+            // Conditional Appearance: Highlighted
+            { 'bg-primary-500 hover:bg-primary-600': context.highlighted }
+        ]
+    }),
+    mask: {
+        class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black/90']
+    },
+    closebutton: {
+        class: [
+            // Positioning
+            '!absolute top-0 right-0',
+
+            // Display & Flexbox
+            'flex justify-center items-center overflow-hidden',
+
+            // Spacing
+            'm-2',
+
+            // Appearance
+            'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
+
+            // Hover Effect
+            'hover:text-white hover:bg-surface-0/10',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    },
+    closeicon: {
+        class: 'w-6 h-6'
+    },
+    previousitembutton: ({ parent }) => ({
+        class: [
+            // Display & Flexbox
+            'inline-flex justify-center items-center overflow-hidden',
+
+            // Appearance
+            'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+            {
+                'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+            },
+
+            // Spacing
+            'mx-2',
+
+            // Positioning
+            'top-1/2 mt-[-0.5rem] left-0',
+            {
+                '!absolute': parent.props.showItemNavigators,
+                '!fixed': !parent.props.showItemNavigators
+            },
+
+            // Hover Effect
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    }),
+    nextitembutton: ({ parent }) => ({
+        class: [
+            // Display & Flexbox
+            'inline-flex justify-center items-center overflow-hidden',
+
+            // Appearance
+            'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
+            {
+                'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
+            },
+
+            // Spacing
+            'mx-2',
+
+            // Positioning
+            'top-1/2 mt-[-0.5rem] right-0',
+            {
+                '!absolute': parent.props.showItemNavigators,
+                '!fixed': !parent.props.showItemNavigators
+            },
+
+            // Hover Effect
+            'hover:bg-surface-0/10 hover:text-white',
+
+            // Focus Effects
+            'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
+        ]
+    }),
+    caption: {
+        class: [
+            // Positioning
+            'absolute bottom-0 left-0 w-full',
+
+            // Appearance
+            'bg-black/50 text-white p-4'
+        ]
+    },
+    transition: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-all duration-150 ease-in-out',
+        leaveActiveClass: 'transition-all duration-150 ease-in',
+        leaveToClass: 'opacity-0 scale-75'
+    }
+};

package/dist/runtime/presets/lara/global.d.ts

@@ -0,0 +1,4 @@
+declare namespace _default {
+    let css: string;
+}
+export default _default;

package/dist/runtime/presets/lara/global.js

@@ -0,0 +1,90 @@
+export default {
+    css: `
+    *[data-pd-ripple="true"]{
+        overflow: hidden;
+        position: relative;
+    }
+    span[data-p-ink-active="true"]{
+        animation: ripple 0.4s linear;
+    }
+    @keyframes ripple {
+        100% {
+            opacity: 0;
+            transform: scale(2.5);
+        }
+    }
+
+    .progress-spinner-circle {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: 0;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+
+    @keyframes p-progress-spinner-dash{
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -35px;
+        }
+        100% {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: -124px;
+        }
+    }
+    @keyframes p-progress-spinner-color {
+        100%, 0% {
+            stroke: #ff5757;
+        }
+        40% {
+            stroke: #696cff;
+        }
+        66% {
+            stroke: #1ea97c;
+        }
+        80%, 90% {
+            stroke: #cc8925;
+        }
+    }
+
+    .progressbar-value-animate::after {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    }
+    .progressbar-value-animate::before {
+        will-change: left, right;
+        animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    }
+    @keyframes p-progressbar-indeterminate-anim {
+        0% {
+            left: -35%;
+            right: 100%;
+        }
+        60% {
+            left: 100%;
+            right: -90%;
+        }
+        100% {
+            left: 100%;
+            right: -90%;
+        }
+    }
+
+    .p-fadein {
+        animation: p-fadein 250ms linear;
+    }
+
+    @keyframes p-fadein {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+`
+};

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

@@ -0,0 +1,18 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            '[&>*:first-child]:right-3': boolean;
+            '[&>*:first-child]:left-3': boolean;
+            '[&>*:last-child]:pr-10'?: undefined;
+            '[&>*:last-child]:pl-10'?: undefined;
+        } | {
+            '[&>*:last-child]:pr-10': boolean;
+            '[&>*:last-child]:pl-10': boolean;
+            '[&>*:first-child]:right-3'?: undefined;
+            '[&>*:first-child]:left-3'?: undefined;
+        })[];
+    };
+}
+export default _default;

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

@@ -0,0 +1,22 @@
+export default {
+    root: ({ props }) => ({
+        class: [
+            'relative',
+            '[&>input]:w-full',
+
+            '[&>*:first-child]:absolute',
+            '[&>*:first-child]:top-1/2',
+            '[&>*:first-child]:-mt-2',
+            '[&>*:first-child]:leading-none',
+            '[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
+            {
+                '[&>*:first-child]:right-3': props.iconPosition === 'right',
+                '[&>*:first-child]:left-3': props.iconPosition === 'left'
+            },
+            {
+                '[&>*:last-child]:pr-10': props.iconPosition === 'right',
+                '[&>*:last-child]:pl-10': props.iconPosition === 'left'
+            }
+        ]
+    })
+};

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

@@ -0,0 +1,65 @@
+declare namespace _default {
+    namespace root {
+        let _class: string;
+        export { _class as class };
+    }
+    namespace button {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace mask {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace toolbar {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace rotaterightbutton {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace rotaterighticon {
+        let _class_5: string;
+        export { _class_5 as class };
+    }
+    namespace rotateleftbutton {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+    namespace rotatelefticon {
+        let _class_7: string;
+        export { _class_7 as class };
+    }
+    namespace zoomoutbutton {
+        let _class_8: string[];
+        export { _class_8 as class };
+    }
+    namespace zoomouticon {
+        let _class_9: string;
+        export { _class_9 as class };
+    }
+    namespace zoominbutton {
+        let _class_10: string[];
+        export { _class_10 as class };
+    }
+    namespace zoominicon {
+        let _class_11: string;
+        export { _class_11 as class };
+    }
+    namespace closebutton {
+        let _class_12: string[];
+        export { _class_12 as class };
+    }
+    namespace closeicon {
+        let _class_13: string;
+        export { _class_13 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;