@fewangsit/wangsvue-presets 1.0.80

package/wangsvue/checkbox/index.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            'relative',
+            'w-4 h-4',
+            'shrink-0',
+            // Alignment
+            'inline-flex',
+            'align-bottom',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+    box: function (_a) {
+        var props = _a.props, context = _a.context;
+        return ({
+            class: [
+                // Alignment
+                'flex',
+                'items-center',
+                'justify-center',
+                // Size
+                'w-full',
+                'h-full',
+                // Shape
+                'rounded',
+                'border-2',
+                // Colors
+                'text-white',
+                {
+                    'border-general-300': props.disabled,
+                    'border-grayscale-900': !props.disabled,
+                    'bg-white': !context.checked && !props.disabled,
+                    'bg-general-50': !context.checked && props.disabled,
+                    'bg-grayscale-900': context.checked && !props.disabled,
+                    'bg-general-300': context.checked && props.disabled,
+                },
+                {
+                    'ring-8 ring-primary-400/[12%]': !props.disabled && context.focused,
+                },
+                // States
+                {
+                    'peer-focus-visible:ring-8 peer-focus-visible:ring-offset-0 peer-focus-visible:ring-primary-400/[8%]': !props.disabled,
+                    'peer-active:ring-8 peer-active:ring-offset-0 peer-active:ring-primary-400/[12%]': !props.disabled,
+                    'cursor-default bg-general-50 border-general-200': props.disabled && !context.checked,
+                    'bg-general-200 border-general-200': props.disabled && context.checked,
+                },
+                // Icon state
+                {
+                    '[&_i]:bg-transparent': props.disabled && !context.checked,
+                    '[&_i]:text-white': context.checked,
+                    '[&_i]:text-transparent': !context.checked,
+                },
+                // Transitions
+                'transition-all',
+                'duration-200',
+            ],
+        });
+    },
+    input: {
+        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
+            'appareance-none',
+            // Transitions
+            'transition-all',
+            'duration-200',
+            // Misc
+            'cursor-pointer',
+        ],
+    },
+    icon: {
+        class: [
+            // Font
+            'text-normal',
+            // Size
+            'w-3',
+            'h-3',
+            // Colors
+            // 'text-white',
+            // Transitions
+            'transition-all',
+            'duration-200',
+        ],
+    },
+};

package/wangsvue/chip/index.d.ts

@@ -0,0 +1,23 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace label {
+        let _class_1: string;
+        export { _class_1 as class };
+    }
+    namespace icon {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    namespace image {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace removeIcon {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+}
+export default _default;

package/wangsvue/chip/index.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+            // Spacing
+            'px-2 py-0.5',
+            // Shape
+            'rounded-[1.14rem]',
+            // Colors
+            'text-surface-700',
+            'bg-surface-200',
+        ],
+    },
+    label: {
+        class: 'text-xs leading-6 mx-0',
+    },
+    icon: {
+        class: 'leading-6 mr-2',
+    },
+    image: {
+        class: ['w-6 h-6 mr-2', 'rounded-full'],
+    },
+    removeIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+            // Spacing
+            'ml-2',
+            // Size
+            'w-4 h-4',
+            // Transition
+            'transition duration-200 ease-in-out',
+            // Misc
+            'cursor-pointer',
+        ],
+    },
+};

package/wangsvue/chips/index.d.ts

@@ -0,0 +1,38 @@
+declare namespace _default {
+    function root({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'opacity-60 select-none pointer-events-none cursor-default': any;
+        })[];
+    };
+    function container({ state }: {
+        state: any;
+    }): {
+        class: (string | {
+            'ring-1 ring-inset ring-surface-300': boolean;
+            'ring-2 ring-primary-500': any;
+        })[];
+    };
+    namespace inputtoken {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace input {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace token {
+        let _class_2: string[];
+        export { _class_2 as class };
+    }
+    namespace label {
+        let _class_3: string;
+        export { _class_3 as class };
+    }
+    namespace removeTokenIcon {
+        let _class_4: string[];
+        export { _class_4 as class };
+    }
+}
+export default _default;

package/wangsvue/chips/index.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                'flex',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    container: function (_a) {
+        var state = _a.state;
+        return ({
+            class: [
+                // Font
+                'font-sans sm:text-sm leading-none',
+                // Flex
+                'flex items-center flex-wrap gap-1',
+                // Spacing
+                'm-0 py-1 px-3',
+                // Size
+                'w-full',
+                // Shape
+                'list-none',
+                'rounded-md',
+                // Color
+                'text-surface-900',
+                'bg-surface-0',
+                'placeholder:text-surface-400',
+                'shadow-sm',
+                // States
+                {
+                    'ring-1 ring-inset ring-surface-300': !state.focused,
+                    'ring-2 ring-primary-500': state.focused,
+                },
+                // Transition
+                'transition-colors duration-200',
+                // Misc
+                'cursor-text overflow-hidden',
+                'appearance-none',
+            ],
+        });
+    },
+    inputtoken: {
+        class: ['py-0.5 px-0', 'inline-flex flex-auto'],
+    },
+    input: {
+        class: [
+            // Font
+            'font-sans sm:text-sm leading-none',
+            // Size
+            'w-full',
+            // Spacing
+            'p-0 m-0',
+            // Shape
+            'appearance-none rounded-none',
+            'border-0 outline-none',
+            // Color
+            'text-surface-700/80',
+            'bg-transparent',
+            'placeholder:text-surface-400',
+        ],
+    },
+    token: {
+        class: [
+            // Flexbox
+            'inline-flex items-center',
+            // Spacing
+            'py-0.5 px-3',
+            // Shape
+            'rounded-[1.14rem]',
+            // Colors
+            'text-surface-700/70',
+            'bg-surface-200',
+        ],
+    },
+    label: {
+        class: 'leading-5',
+    },
+    removeTokenIcon: {
+        class: [
+            // Shape
+            'rounded-md leading-6',
+            // Spacing
+            'ml-2',
+            // Size
+            'w-4 h-4',
+            // Transition
+            'transition duration-200 ease-in-out',
+            // Misc
+            'cursor-pointer',
+        ],
+    },
+};

package/wangsvue/colorpicker/index.d.ts

@@ -0,0 +1,51 @@
+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 };
+    }
+    function panel({ props }: {
+        props: any;
+    }): {
+        class: (string | {
+            'relative h-48 w-52': any;
+            'absolute h-48 w-52': boolean;
+        })[];
+    };
+    namespace selector {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace color {
+        let _class_2: string[];
+        export { _class_2 as class };
+        export let style: string;
+    }
+    namespace colorhandle {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace hue {
+        let _class_4: string[];
+        export { _class_4 as class };
+        let style_1: string;
+        export { style_1 as style };
+    }
+    namespace huehandle {
+        let _class_5: string[];
+        export { _class_5 as class };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/colorpicker/index.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Display
+                'inline-block',
+                // Misc
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled,
+                },
+            ],
+        });
+    },
+    input: {
+        class: [
+            // Font
+            'font-sans text-base ',
+            // Spacing
+            'm-0',
+            // Size & Shape
+            'rounded',
+            'w-4',
+            'h-4',
+            // Colors
+            'bg-surface-0',
+            'border border-surface-300',
+            // States
+            'hover:border-primary-500',
+            'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-500',
+            // Transition
+            'transition-colors duration-200',
+            // Misc
+            'cursor-default',
+            'select-none',
+        ],
+    },
+    panel: function (_a) {
+        var props = _a.props;
+        return ({
+            class: [
+                // Position & Size
+                {
+                    'relative h-48 w-52': props.inline,
+                    'absolute h-48 w-52': !props.inline,
+                },
+                // Shape
+                'shadow-md',
+                'border-0',
+                'rounded-md',
+                // Colors
+                'bg-surface-800',
+                'ring-1 ring-inset ring-surface-900',
+            ],
+        });
+    },
+    selector: {
+        class: [
+            // Position
+            'absolute top-2 left-2',
+            // Size
+            'h-44 w-40',
+        ],
+    },
+    color: {
+        class: [
+            // Size
+            'h-44 w-40',
+        ],
+        style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)',
+    },
+    colorhandle: {
+        class: [
+            'absolute',
+            // Shape
+            'rounded-full border border-solid',
+            // Size
+            'h-3 w-3',
+            // Colors
+            'border-white',
+            // Misc
+            'cursor-pointer  opacity-85',
+        ],
+    },
+    hue: {
+        class: [
+            // Position
+            'absolute top-2 left-44',
+            // Size
+            'h-44 w-6',
+            // Opacity
+            'opacity-85',
+        ],
+        style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)',
+    },
+    huehandle: {
+        class: [
+            // Position
+            'absolute left-0 -ml-1',
+            // Size
+            'h-2 w-8',
+            // Shape
+            'border-solid border-2 rounded',
+            // Colors
+            'border-white',
+            // Misc
+            'opacity-85',
+        ],
+    },
+    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',
+    },
+};

package/wangsvue/colors.config.json

@@ -0,0 +1,77 @@
+{
+  "primary-50": "#F8F7EE",
+  "primary-100": "#EEEBD3",
+  "primary-200": "#DFD7A9",
+  "primary-300": "#CDBC77",
+  "primary-400": "#BDA552",
+  "primary-500": "#9F7C3C",
+  "primary-600": "#856732",
+  "primary-700": "#785930",
+  "primary-800": "#65492E",
+  "primary-900": "#583F2B",
+  "primary-950": "#322116",
+  "primary-1000": "#695200",
+
+  "danger-50": "#E7C3B6",
+  "danger-100": "#E7C3B6",
+  "danger-200": "#DBA592",
+  "danger-300": "#CF876D",
+  "danger-400": "#C36948",
+  "danger-500": "#B74B24",
+  "danger-600": "#993F1E",
+  "danger-700": "#7A3218",
+  "danger-800": "#5C2612",
+  "danger-900": "#3D190C",
+  "danger-950": "#1F0D06",
+
+  "warning-50": "#F9EFD9",
+  "warning-100": "#F3E0B3",
+  "warning-200": "#EDD08E",
+  "warning-300": "#E7C068",
+  "warning-400": "#E1B142",
+  "warning-500": "#DBA11C",
+  "warning-600": "#B78617",
+  "warning-700": "#926B13",
+  "warning-800": "#6E510E",
+  "warning-900": "#493609",
+  "warning-950": "#251B05",
+
+  "success-50": "#D5EDEB",
+  "success-100": "#AADBD6",
+  "success-200": "#80C9C2",
+  "success-300": "#55B7AD",
+  "success-400": "#2AA599",
+  "success-500": "#009384",
+  "success-600": "#007B6E",
+  "success-700": "#006258",
+  "success-800": "#004A42",
+  "success-900": "#00312C",
+  "success-950": "#001916",
+  "success-1000": "#00A455",
+  
+  "grayscale-50": "#f7f7f7",
+  "grayscale-100": "#f2f2f2",
+  "grayscale-200": "#e5e6e6",
+  "grayscale-300": "#d8d9d9",
+  "grayscale-400": "#cbcccd",
+  "grayscale-500": "#bdbebf",
+  "grayscale-600": "#97999b",
+  "grayscale-700": "#717374",
+  "grayscale-800": "#4b4d4e",
+  "grayscale-900": "#262627",
+  "grayscale-950": "#121212",
+
+  "general-50": "#EBEAF0",
+  "general-100": "#DAD9E3",
+  "general-200": "#B5B3C7",
+  "general-300": "#908CAB",
+  "general-400": "#6C688D",
+  "general-500": "#4E4B66",
+  "general-600": "#3F3C52",
+  "general-700": "#2F2D3E",
+  "general-800": "#201E29",
+  "general-900": "#100F15",
+  "general-950": "#070609",
+
+  "link": "#0000EE"
+}

package/wangsvue/confirmpopup/index.d.ts

@@ -0,0 +1,39 @@
+declare namespace _default {
+    namespace root {
+        let _class: string[];
+        export { _class as class };
+    }
+    namespace content {
+        let _class_1: string[];
+        export { _class_1 as class };
+    }
+    namespace icon {
+        let _class_2: string;
+        export { _class_2 as class };
+    }
+    namespace footer {
+        let _class_3: string[];
+        export { _class_3 as class };
+    }
+    namespace rejectbutton {
+        export namespace root_1 {
+            let _class_4: string[];
+            export { _class_4 as class };
+        }
+        export { root_1 as root };
+    }
+    namespace acceptbutton {
+        export namespace root_2 {
+            let _class_5: string[];
+            export { _class_5 as class };
+        }
+        export { root_2 as root };
+    }
+    namespace transition {
+        let enterFromClass: string;
+        let enterActiveClass: string;
+        let leaveActiveClass: string;
+        let leaveToClass: string;
+    }
+}
+export default _default;

package/wangsvue/confirmpopup/index.js

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    root: {
+        class: [
+            // Shape
+            'rounded-lg',
+            'shadow-xl',
+            'border-0',
+            // Positioning
+            'z-40 transform origin-center',
+            'mt-3 absolute left-0 top-0',
+            // Color
+            '',
+            'bg-surface-0',
+            'text-surface-700/80',
+            // Before: Arrow
+            'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-surface-0',
+        ],
+    },
+    content: {
+        class: [
+            // Font
+            'text-sm',
+            // Spacing
+            'px-6',
+            'py-3',
+            // Colors
+            'bg-surface-0',
+            'text-surface-600',
+            // Misc
+            'overflow-y-auto',
+        ],
+    },
+    icon: {
+        class: 'text-xl mr-2',
+    },
+    footer: {
+        class: [
+            // Flexbox and Alignment
+            'flex items-center justify-end',
+            'shrink-0',
+            'text-right',
+            'gap-3',
+            // Spacing
+            'px-6',
+            'py-3',
+            // Shape
+            'border-t-0',
+            'rounded-b-lg',
+            // Colors
+            'bg-surface-50',
+            'text-surface-700/80',
+        ],
+    },
+    rejectbutton: {
+        root: {
+            class: [
+                'relative',
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+                // Sizes & Spacing
+                'px-2.5 py-1.5 min-w-[2rem]',
+                'text-sm',
+                // Shape
+                'rounded-md',
+                // Color
+                'text-primary-500',
+                // States
+                'hover:bg-primary-300/20',
+                'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset',
+                'focus:ring-primary-500',
+            ],
+        },
+    },
+    acceptbutton: {
+        root: {
+            class: [
+                'relative',
+                // Alignments
+                'items-center inline-flex text-center align-bottom justify-center',
+                // Sizes & Spacing
+                'px-2.5 py-1.5 min-w-[2rem]',
+                'text-sm',
+                // Shape
+                'rounded-md',
+                // Color
+                'text-white',
+                'bg-primary-500',
+                'ring-1 ring-primary-500',
+                // States
+                'hover:bg-primary-600 hover:border-primary-600',
+                'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
+                'focus:ring-primary-500',
+            ],
+        },
+    },
+    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',
+    },
+};