@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/panel/index.d.ts

@@ -0,0 +1,43 @@
+declare namespace _default {
+    namespace root {
+        let _class: string;
+        export { _class as class };
+    }
+    function header({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'px-5 md:px-6 py-5': boolean;
+            'py-3 px-5 md:px-6': any;
+        })[];
+    };
+    namespace title {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace toggler {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace togglerIcon {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    namespace content {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace footer {
+        let _class_5: string[];
+        export { _class_5 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/wangsvue/panel/index.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: 'shadow-md rounded-lg',
+    },
+    header: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Alignments
+                'flex items-center justify-between',
+                // Colors
+                'text-surface-700/80',
+                'bg-surface-0',
+                'border-b border-surface-200',
+                //Shape
+                'rounded-tl-lg rounded-tr-lg',
+                // Conditional Spacing
+                {
+                    'px-5 md:px-6 py-5': !props.toggleable,
+                    'py-3 px-5 md:px-6': props.toggleable,
+                },
+            ],
+        });
+    },
+    title: {
+        class: 'leading-none font-medium',
+    },
+    toggler: {
+        class: [
+            // Alignments
+            'inline-flex items-center justify-center',
+            // Sized
+            'w-8 h-8',
+            //Shape
+            'border-0 rounded-full',
+            //Color
+            'bg-transparent',
+            'text-surface-600',
+            // States
+            'hover:text-surface-900',
+            'hover:bg-surface-50',
+            'focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-inset',
+            // Transitions
+            'transition duration-200 ease-in-out',
+            // Misc
+            'overflow-hidden relative no-underline',
+        ],
+    },
+    togglerIcon: {
+        class: 'inline-block',
+    },
+    content: {
+        class: [
+            // Spacing
+            'py-6 px-5 md:px-6',
+            // Shape
+            'last:rounded-br-lg last:rounded-bl-lg',
+            //Color
+            'bg-surface-0',
+            'text-surface-700/80',
+        ],
+    },
+    footer: {
+        class: [
+            // Spacing
+            'py-6 px-5 md:px-6',
+            //Shape
+            'rounded-bl-lg rounded-br-lg',
+            // Color
+            'bg-surface-0',
+            'text-surface-600',
+            'border-t border-surface-200',
+        ],
+    },
+    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/wangsvue/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': boolean;
+            'text-surface-900 ark:text-surface-0'?: undefined;
+        } | {
+            'text-surface-900 ark:text-surface-0': 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/80': 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/wangsvue/panelmenu/index.js

@@ -0,0 +1,124 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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',
+        ],
+    },
+    headercontent: function (_a) {
+        var _b, _c;
+        var context = _a.context, instance = _a.instance;
+        return ({
+            class: [
+                // Shape
+                'rounded-t-md',
+                {
+                    'rounded-br-md rounded-bl-md': !context.active || ((_b = instance.activeItem) === null || _b === void 0 ? void 0 : _b.items) === undefined,
+                    'rounded-br-0 rounded-bl-0': context.active && ((_c = instance.activeItem) === null || _c === void 0 ? void 0 : _c.items) !== undefined,
+                },
+                // Color
+                'border border-surface-200',
+                'bg-surface-0',
+                'text-surface-600/80',
+                { 'text-surface-900 ark:text-surface-0': context.active },
+                // Transition
+                'transition duration-200 ease-in-out',
+                'transition-shadow duration-200',
+            ],
+        });
+    },
+    headeraction: {
+        class: [
+            'relative',
+            // Font
+            'font-semibold',
+            'text-sm',
+            'leading-none',
+            // Flex & Alignments
+            'flex items-center',
+            // Spacing
+            'px-3 py-2',
+            // Misc
+            'select-none cursor-pointer no-underline',
+        ],
+    },
+    headerlabel: {
+        class: 'leading-none',
+    },
+    headerIcon: {
+        class: 'mr-2 text-sm',
+    },
+    submenuicon: {
+        class: 'ml-auto order-last text-sm',
+    },
+    menucontent: {
+        class: [
+            // Spacing
+            'py-1',
+            // Shape
+            'border border-t-0',
+            'rounded-t-none rounded-br-md rounded-bl-md',
+            // Color
+            'text-surface-700/80',
+            'bg-surface-0',
+            'border-surface-200',
+        ],
+    },
+    menu: {
+        class: ['outline-none', 'm-0 p-0 list-none'],
+    },
+    content: {
+        class: [
+            // Shape
+            'border-none rounded-none',
+            // Color
+            'text-surface-700/80',
+            // Transition
+            'transition-shadow duration-200',
+        ],
+    },
+    action: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                'relative',
+                // Font
+                'text-sm leading-none',
+                // Flex & Alignments
+                'flex items-center',
+                // Spacing
+                'py-2 px-3',
+                // Color
+                'text-surface-700/80',
+                // States
+                'hover:bg-surface-100/80 hover:text-surface-700',
+                {
+                    'bg-surface-200 text-surface-700/80': 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/wangsvue/password/index.d.ts

@@ -0,0 +1,45 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+        })[];
+    };
+    namespace input {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace panel {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace meter {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    function meterlabel({ instance }: {
+        instance: any;
+    }): {
+        class: (string | {
+            'bg-red-500/50': boolean;
+            'bg-orange-500/50': boolean;
+            'bg-green-500/50': boolean;
+        })[];
+    };
+    namespace showicon {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace hideicon {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/password/index.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'w-full',
+                'inline-flex relative',
+                // 'border-[0.5px] border-general-200 rounded',
+                'text-general-800',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    input: {
+        class: [
+            '!bg-primary-500',
+            'placeholder:!font-normal',
+            // 'bg-white text-general-800 placeholder:text-general-200 placeholder:font-light',
+            // 'w-full h-full !max-h-[43px]',
+            // 'py-1 px-3 items-center space-x-1',
+            // 'flex flex-shrink-0 self-stretch',
+            // 'text-xs leading-[133.333%] tracking-[0.24px]',
+            // 'rounded shadow-sm',
+            // 'appearance-none outline-none focus:ring-primary-500',
+        ],
+    },
+    panel: {
+        class: [
+            // Spacing
+            'p-3',
+            // Shape
+            'border-0',
+            'shadow-md rounded-md',
+            // Colors
+            'bg-white',
+            'text-general-800',
+            '',
+        ],
+    },
+    meter: {
+        class: [
+            // Position and Overflow
+            'overflow-hidden',
+            'relative',
+            // Shape and Size
+            'border-0',
+            'h-2',
+            'rounded-md',
+            // Spacing
+            'mb-2',
+            // Colors
+            'bg-surface-100',
+        ],
+    },
+    meterlabel: function (_a) {
+        var _b, _c, _d;
+        var instance = _a.instance;
+        return ({
+            class: [
+                // Size
+                'h-full',
+                // Colors
+                {
+                    'bg-red-500/50': ((_b = instance === null || instance === void 0 ? void 0 : instance.meter) === null || _b === void 0 ? void 0 : _b.strength) == 'weak',
+                    'bg-orange-500/50': ((_c = instance === null || instance === void 0 ? void 0 : instance.meter) === null || _c === void 0 ? void 0 : _c.strength) == 'medium',
+                    'bg-green-500/50': ((_d = instance === null || instance === void 0 ? void 0 : instance.meter) === null || _d === void 0 ? void 0 : _d.strength) == 'strong',
+                },
+                // Transitions
+                'transition-all duration-1000 ease-in-out',
+            ],
+        });
+    },
+    showicon: {
+        class: [
+            'absolute top-[54%] right-3 -mt-2',
+            'text-general-200',
+            'focus-visible:text-general-500 hover:text-general-500',
+        ],
+    },
+    hideicon: {
+        class: [
+            'absolute top-[54%] right-3 -mt-2',
+            'text-general-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',
+    },
+};