@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/inputphonenumber/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonClasses = void 0;
+var commonClasses = function (_a) {
+    var isFirefoxBased = _a.isFirefoxBased, invalidInput = _a.invalidInput;
+    return [
+        { 'ring-[1px]': isFirefoxBased, 'ring-[0.5px]': !isFirefoxBased },
+        { '!ring-danger-500': invalidInput },
+        'ring-inset',
+        'ring-general-400',
+        '[&:has(:focus)]:bg-none',
+        '[&:has(:focus)]:ring-primary-400',
+        'bg-white',
+        'z-[0] [&:has(:focus)]:z-[12]',
+    ];
+};
+exports.commonClasses = commonClasses;
+exports.default = {
+    dialcode: function (ctx) { return ({
+        class: __spreadArray(__spreadArray([], (0, exports.commonClasses)(ctx), true), ['rounded-l rounded-r-none'], false),
+    }); },
+    inputnumber: function (ctx) { return ({
+        class: __spreadArray(__spreadArray([], (0, exports.commonClasses)(ctx), true), ['rounded-r rounded-l-none -ml-[1px]'], false),
+    }); },
+};

package/wangsvue/inputswitch/index.d.ts

@@ -0,0 +1,67 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'select-none pointer-events-none cursor-default': any;
+        })[];
+    };
+    function slider({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'before:bg-white before:bg-white': boolean;
+            'before:bg-primary-200': boolean;
+            'before:bg-general-50': any;
+            'before:transform before:translate-x-3.5'?: undefined;
+            'border-primary-200'?: undefined;
+            'border-transparent'?: undefined;
+            'bg-white'?: undefined;
+            'bg-primary-500'?: undefined;
+            'bg-primary-100'?: undefined;
+            'bg-general-100'?: undefined;
+        } | {
+            'before:transform before:translate-x-3.5': boolean;
+            'before:bg-white before:bg-white'?: undefined;
+            'before:bg-primary-200'?: undefined;
+            'before:bg-general-50'?: undefined;
+            'border-primary-200'?: undefined;
+            'border-transparent'?: undefined;
+            'bg-white'?: undefined;
+            'bg-primary-500'?: undefined;
+            'bg-primary-100'?: undefined;
+            'bg-general-100'?: undefined;
+        } | {
+            'border-primary-200': boolean;
+            'border-transparent': boolean;
+            'before:bg-white before:bg-white'?: undefined;
+            'before:bg-primary-200'?: undefined;
+            'before:bg-general-50'?: undefined;
+            'before:transform before:translate-x-3.5'?: undefined;
+            'bg-white'?: undefined;
+            'bg-primary-500'?: undefined;
+            'bg-primary-100'?: undefined;
+            'bg-general-100'?: undefined;
+        } | {
+            'bg-white': boolean;
+            'bg-primary-500': boolean;
+            'bg-primary-100': any;
+            'bg-general-100': any;
+            'before:bg-white before:bg-white'?: undefined;
+            'before:bg-primary-200'?: undefined;
+            'before:bg-general-50'?: undefined;
+            'before:transform before:translate-x-3.5'?: undefined;
+            'border-primary-200'?: undefined;
+            'border-transparent'?: undefined;
+        })[];
+    };
+    function input({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'cursor-default': any;
+            'cursor-pointer': boolean;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/inputswitch/index.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Alignments
+                'inline-flex relative align-middle',
+                'shrink-0',
+                // Shape
+                'rounded-[60px]',
+                // Size
+                'h-4 w-8',
+                // Misc
+                'cursor-pointer',
+                // States
+                {
+                    'select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    slider: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Position
+                'absolute top-0 left-0 right-0 bottom-0',
+                // Shape
+                'rounded-[60px]',
+                // Before:
+                'before:absolute before:top-1/2',
+                'before:-mt-[6px] before:ml-0.5',
+                'before:h-3 before:w-3',
+                'before:rounded-full',
+                'before:duration-200 before:transition before:ease-in-out',
+                'before:shadow',
+                {
+                    'before:bg-white before:bg-white': props.modelValue == props.trueValue,
+                    'before:bg-primary-200': props.modelValue !== props.trueValue && !props.disabled,
+                    'before:bg-general-50': props.modelValue !== props.trueValue && props.disabled,
+                },
+                {
+                    'before:transform before:translate-x-3.5': props.modelValue == props.trueValue,
+                },
+                // Colors
+                'border',
+                {
+                    'border-primary-200': props.modelValue !== props.trueValue && !props.disabled,
+                    'border-transparent': props.modelValue == props.trueValue,
+                },
+                {
+                    'bg-white': props.modelValue !== props.trueValue && !props.disabled,
+                    'bg-primary-500': props.modelValue == props.trueValue && !props.disabled,
+                    'bg-primary-100': props.modelValue == props.trueValue && props.disabled,
+                    'bg-general-100': props.modelValue !== props.trueValue && props.disabled,
+                },
+                // States
+                'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500',
+                // Transition
+                'transition-colors duration-200',
+                // Misc
+                'cursor-pointer',
+            ],
+        });
+    },
+    input: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'peer',
+                // Size
+                'w-full ',
+                'h-full',
+                // Position
+                'absolute',
+                'top-0 left-0',
+                'z-10',
+                // Spacing
+                'p-0',
+                'm-0',
+                // Shape
+                'rounded',
+                'border',
+                // Shape
+                'opacity-0',
+                'rounded-md',
+                'outline-none',
+                'border-2 border-surface-300',
+                // Misc
+                'appearance-none',
+                {
+                    'cursor-default': props.disabled,
+                    'cursor-pointer': !props.disabled,
+                },
+            ],
+        });
+    },
+};

package/wangsvue/inputtext/index.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    function root({ props, context, parent }: {
+        props: any;
+        context: any;
+        parent: any;
+    }): {
+        class: (string | {
+            'max-h-[43px]': any;
+            'outline-none'?: undefined;
+            '!text-general-200 select-none pointer-events-none cursor-default'?: undefined;
+        } | {
+            'outline-none': boolean;
+            '!text-general-200 select-none pointer-events-none cursor-default': any;
+            'max-h-[43px]'?: undefined;
+        })[];
+    };
+}
+export default _default;

package/wangsvue/inputtext/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var _b, _c;
+        var props = _a.props, context = _a.context, parent = _a.parent;
+        return ({
+            class: [
+                'px-3 py-1 w-full bg-transparent',
+                // Size
+                'h-full',
+                {
+                    'max-h-[43px]': (_c = (_b = parent.instance) === null || _b === void 0 ? void 0 : _b.placeholder) === null || _c === void 0 ? void 0 : _c.includes('password'),
+                },
+                // Font
+                'text-grayscale-900 text-xs font-normal',
+                'placeholder:text-general-200',
+                'placeholder:!font-normal',
+                'appearance-none',
+                // Interactions
+                {
+                    'outline-none': !context.disabled,
+                    '!text-general-200 select-none pointer-events-none cursor-default': context.disabled,
+                },
+            ],
+        });
+    },
+};

package/wangsvue/knob/index.d.ts

@@ -0,0 +1,22 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+        }[];
+    };
+    namespace range {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace value {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace label {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+}
+export default _default;

package/wangsvue/knob/index.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Misc
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    range: {
+        class: [
+            // Stroke
+            'stroke-current',
+            // Color
+            'stroke-surface-200',
+            // Fill
+            'fill-none',
+            // Transition
+            'transition duration-100 ease-in',
+        ],
+    },
+    value: {
+        class: [
+            // Animation
+            'animate-dash-frame',
+            // Color
+            'stroke-primary-500',
+            // Fill
+            'fill-none',
+        ],
+    },
+    label: {
+        class: [
+            // Text Style
+            'text-center text-xl',
+            // Color
+            'fill-surface-600',
+        ],
+    },
+};

package/wangsvue/listbox/index.d.ts

@@ -0,0 +1,79 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace wrapper {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace list {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    function item({ context }: {
+        context: any;
+    }): {
+        class: (string | {
+            'font-normal': boolean;
+            'font-bold': any;
+            'text-surface-700/80'?: undefined;
+            'bg-surface-200 text-surface-700/80'?: undefined;
+            'bg-primary-500 text-white'?: undefined;
+            'bg-surface-100 text-primary-500'?: undefined;
+        } | {
+            'text-surface-700/80': boolean;
+            'font-normal'?: undefined;
+            'font-bold'?: undefined;
+            'bg-surface-200 text-surface-700/80'?: undefined;
+            'bg-primary-500 text-white'?: undefined;
+            'bg-surface-100 text-primary-500'?: undefined;
+        } | {
+            'bg-surface-200 text-surface-700/80': boolean;
+            'font-normal'?: undefined;
+            'font-bold'?: undefined;
+            'text-surface-700/80'?: undefined;
+            'bg-primary-500 text-white'?: undefined;
+            'bg-surface-100 text-primary-500'?: undefined;
+        } | {
+            'bg-primary-500 text-white': any;
+            'font-normal'?: undefined;
+            'font-bold'?: undefined;
+            'text-surface-700/80'?: undefined;
+            'bg-surface-200 text-surface-700/80'?: undefined;
+            'bg-surface-100 text-primary-500'?: undefined;
+        } | {
+            'bg-surface-100 text-primary-500': any;
+            'font-normal'?: undefined;
+            'font-bold'?: undefined;
+            'text-surface-700/80'?: undefined;
+            'bg-surface-200 text-surface-700/80'?: undefined;
+            'bg-primary-500 text-white'?: undefined;
+        })[];
+    };
+    namespace itemgroup {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace header {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace filtercontainer {
+        let _class_5: string;
+        export { _class_5 as class };
+    }
+    namespace filterinput {
+        let _class_6: string[];
+        export { _class_6 as class };
+    }
+    namespace filtericon {
+        let _class_7: string[];
+        export { _class_7 as class };
+    }
+    namespace emptymessage {
+        let _class_8: string[];
+        export { _class_8 as class };
+    }
+}
+export default _default;

package/wangsvue/listbox/index.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            // Sizing and Shape
+            'min-w-[12rem]',
+            'rounded-md',
+            // Spacing
+            // Colors
+            'bg-surface-0',
+            'text-surface-700/80',
+            'ring-1 ring-surface-200',
+        ],
+    },
+    wrapper: {
+        class: [
+            // Overflow
+            'overflow-auto',
+        ],
+    },
+    list: {
+        class: 'py-1 list-none m-0',
+    },
+    item: function (_a) {
+        var context = _a.context;
+        return ({
+            class: [
+                // Font
+                'sm:text-sm',
+                'leading-none',
+                { 'font-normal': !context.selected, 'font-bold': context.selected },
+                // Position
+                'relative',
+                // Shape
+                'border-0',
+                'rounded-none',
+                // Spacing
+                'm-0',
+                'py-2 px-4',
+                // Color
+                {
+                    'text-surface-700/80': !context.focused && !context.selected,
+                },
+                {
+                    'bg-surface-200 text-surface-700/80': context.focused && !context.selected,
+                },
+                {
+                    'bg-primary-500 text-white': context.focused && context.selected,
+                },
+                {
+                    'bg-surface-100 text-primary-500': !context.focused && context.selected,
+                },
+                //States
+                'hover:bg-primary-500 hover:text-white',
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
+                // Misc
+                'cursor-pointer',
+                'overflow-hidden',
+                'whitespace-nowrap',
+            ],
+        });
+    },
+    itemgroup: {
+        class: [
+            //Font
+            'font-bold',
+            'sm:text-sm',
+            // Spacing
+            'm-0',
+            'py-2 px-4',
+            // Color
+            'text-surface-800/80',
+            'bg-surface-0',
+            // Misc
+            'cursor-auto',
+        ],
+    },
+    header: {
+        class: [
+            // Spacing
+            'p-0',
+            'm-0',
+            //Shape
+            'rounded-tl-md',
+            'rounded-tr-md',
+            'border-b border-surface-200',
+            // Color
+            'text-surface-700/80',
+            'bg-surface-100',
+        ],
+    },
+    filtercontainer: {
+        class: 'relative',
+    },
+    filterinput: {
+        class: [
+            // Font
+            'font-sans',
+            'leading-none',
+            'sm:text-sm',
+            // Sizing
+            'py-1.5 px-3',
+            'pr-7',
+            '-mr-7',
+            'w-full',
+            //Color
+            'text-surface-700/80',
+            'bg-surface-0',
+            'placeholder:text-surface-400',
+            // Shape
+            'border-0',
+            'rounded-tl-md',
+            'rounded-tr-md',
+            'appearance-none',
+            // States
+            'focus:ring-2 focus:ring-inset focus:outline-none focus:outline-offset-0',
+            'focus:ring-primary-600',
+            // Misc
+            'appearance-none',
+        ],
+    },
+    filtericon: {
+        class: ['absolute', 'top-1/2 right-3', '-mt-2'],
+    },
+    emptymessage: {
+        class: [
+            // Font
+            'leading-none',
+            'sm:text-sm',
+            // Spacing
+            'py-2 px-4',
+            // Color
+            'text-surface-800/80',
+            'bg-transparent',
+        ],
+    },
+};

package/wangsvue/megamenu/index.d.ts

@@ -0,0 +1,105 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'items-center px-2 sm:px-6': boolean;
+            'flex-col justify-center sm:justify-start sm:w-48 px-2': boolean;
+        })[];
+    };
+    function menu({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            hidden: boolean;
+            flex: any;
+        })[];
+    };
+    function menuitem({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'sm:w-auto w-full': any;
+            'w-full': boolean;
+        })[];
+    };
+    function content({ props, context }: {
+        props: any;
+        context: any;
+    }): {
+        class: (string | {
+            'rounded-md': boolean;
+            'text-surface-500/70'?: undefined;
+            'text-surface-500/70 bg-surface-200'?: undefined;
+            'text-surface-900/80 bg-surface-50'?: undefined;
+            'hover:bg-surface-50'?: undefined;
+            'hover:bg-surface-100 text-surface-900/80'?: undefined;
+        } | {
+            'text-surface-500/70': boolean;
+            'text-surface-500/70 bg-surface-200': boolean;
+            'text-surface-900/80 bg-surface-50': any;
+            'rounded-md'?: undefined;
+            'hover:bg-surface-50'?: undefined;
+            'hover:bg-surface-100 text-surface-900/80'?: undefined;
+        } | {
+            'hover:bg-surface-50': boolean;
+            'hover:bg-surface-100 text-surface-900/80': any;
+            'rounded-md'?: undefined;
+            'text-surface-500/70'?: undefined;
+            'text-surface-500/70 bg-surface-200'?: undefined;
+            'text-surface-900/80 bg-surface-50'?: undefined;
+        })[];
+    };
+    namespace action {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace icon {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    function submenuicon({ props }: {
+        props: any;
+    }): {
+        class: {
+            'ml-auto sm:ml-2': any;
+            'ml-auto': boolean;
+        }[];
+    };
+    function panel({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'sm:left-full top-0': boolean;
+        })[];
+    };
+    namespace grid {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    namespace column {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    namespace submenu {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+    namespace submenuheader {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    namespace separator {
+        let _class_6: string;
+        export { _class_6 as class };
+    }
+    namespace menubutton {
+        let _class_7: string[];
+        export { _class_7 as class };
+    }
+    namespace end {
+        let _class_8: string;
+        export { _class_8 as class };
+    }
+}
+export default _default;