@fewangsit/wangsvue-presets 1.0.81-alpha.2 → 1.0.82

package/wangsvue/checkbox/index.js

@@ -1,107 +1,127 @@
-"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',
-        ],
-    },
-};
+export default {
+  root: {
+    class: [
+      'relative',
+
+      'w-4 h-4',
+      'shrink-0',
+
+      // Alignment
+      'inline-flex',
+      'align-bottom',
+
+      // Transitions
+      'transition-all',
+      'duration-200',
+    ],
+  },
+  box: ({ props, context }) => ({
+    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.js

@@ -1,40 +1,45 @@
-"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',
-        ],
-    },
-};
+export 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.js

@@ -1,98 +1,112 @@
-"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',
-        ],
-    },
-};
+export default {
+  root: ({ props }) => ({
+    class: [
+      'flex',
+      {
+        'opacity-60 select-none pointer-events-none cursor-default':
+          props.disabled,
+      },
+    ],
+  }),
+  container: ({ state }) => ({
+    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',
+    ],
+  },
+};