vueless 0.0.707 → 0.0.709

package/bin/constants.js

@@ -10,7 +10,6 @@ export default {
   gray: "cool",
   darkMode: "auto",
   ring: 2,
-  ringOffset: 2,
   ringOffsetColorLight: "#ffffff", // white
   ringOffsetColorDark: "#111827", // gray-900
   rounding: 8,

package/constants.js

@@ -18,7 +18,6 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
 export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 2; /* pixels */
-export const DEFAULT_RING_OFFSET = 2; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */
@@ -172,8 +171,7 @@ export const TAILWIND_MERGE_EXTENSION = {
       spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
     },
     classGroups: {
-      "ring-w": [{ ring: ["dynamic"] }],
-      "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
+      "ring-w": [{ ring: ["dynamic", "dynamic-1"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
       rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.707",
+  "version": "0.0.709",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -13,7 +13,6 @@ import {
   TAILWIND_COLORS,
   DEFAULT_ROUNDING,
   DEFAULT_RING,
-  DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
@@ -94,9 +93,7 @@ export const vuelessTailwindConfig = {
       },
       ringWidth: {
         dynamic: "var(--vl-ring)",
-      },
-      ringOffsetWidth: {
-        dynamic: "var(--vl-ring-offset)",
+        "dynamic-1": "calc(var(--vl-ring) - 1px)",
       },
       ringOffsetColor: {
         dynamic: twColorWithOpacity("--vl-ring-offset-color"),
@@ -106,7 +103,6 @@ export const vuelessTailwindConfig = {
       themeReplacements: {
         /* eslint-disable prettier/prettier */
         "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
-        "var(--vl-ring-offset)": globalSettings.ringOffset || DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": globalSettings.ringOffsetColorLight || DEFAULT_RING_OFFSET_COLOR_LIGHT,
         "var(--vl-rounding-sm)": globalSettings.roundingSm || (globalSettings.ring || DEFAULT_ROUNDING) / 2,
         "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,

package/types.ts

@@ -100,11 +100,6 @@ export interface ThemeConfig {
    */
   ring?: number;
 
-  /**
-   * Default components ring offset width.
-   */
-  ringOffset?: number;
-
   /**
    * Default components ring color for light theme.
    */
@@ -345,7 +340,6 @@ export interface TailwindColorShades {
 
 export interface VuelessCssVariables {
   "--vl-ring": string;
-  "--vl-ring-offset": string;
   "--vl-ring-offset-color": string;
   "--vl-rounding-sm": string;
   "--vl-rounding": string;

package/ui.button/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       flex items-center justify-center font-medium !leading-snug whitespace-nowrap
       border border-transparent outline-none transition cursor-pointer
-      focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      focus-visible:ring-dynamic focus-visible:ring-offset-2
       focus-visible:ring-{color}-600 dark:focus-visible:ring-{color}-400
       disabled:cursor-not-allowed disabled:ring-0 disabled:ring-offset-0
     `,

package/ui.dropdown-list/config.ts

@@ -29,7 +29,7 @@ export default /*tw*/ {
       },
     },
   },
-  optionActive: "{>option} font-semibold bg-{color}-600/10 hover:bg-{color}-600/10 text-brand-600",
+  optionActive: "{>option} bg-{color}-600/10 hover:bg-{color}-600/10 text-brand-600",
   optionHighlighted: "bg-{color}-50",
   optionContent: "overflow-visible text-ellipsis",
   groupBase: {

package/ui.form-checkbox/config.ts

@@ -5,9 +5,9 @@ export default /*tw*/ {
       border border-gray-300 rounded-dynamic-sm bg-white cursor-pointer transition
       hover:border-gray-400
       active:border-{color}-600 active:bg-{color}-200
-      focus:ring-0 focus:ring-offset-0
       checked:text-{color}-600
-      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      focus:ring-0 focus:ring-offset-0
+      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-2
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
     `,
     variants: {

package/ui.form-date-picker/config.ts

@@ -4,7 +4,7 @@ export default /*tw*/ {
   datepickerInputActive: {
     base: "{UInput} {>datepickerInput}",
     wrapper: {
-      base: "ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
+      base: "ring-dynamic ring-offset-2 ring-brand-700/15 border-brand-500 hover:border-brand-500",
       variants: {
         error: {
           true: "ring-red-700/15 border-red-500 hover:border-red-500",

package/ui.form-date-picker-range/config.ts

@@ -4,7 +4,7 @@ export default /*tw*/ {
   datepickerInputActive: {
     base: "{>datepickerInput}",
     wrapper: {
-      base: "ring-dynamic ring-offset-0 ring-brand-600 border-brand-600 hover:border-brand-600",
+      base: "ring-dynamic ring-brand-600 border-brand-600 hover:border-brand-600",
       variants: {
         error: {
           true: "!border-red-600 ring-red-600",

package/ui.form-input/config.ts

@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       border rounded-dynamic border-gray-300 relative flex w-full bg-white transition
       hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
-      focus-within:ring-dynamic focus-within:ring-offset-0 focus-within:ring-brand-600
+      focus-within:ring-dynamic-1 focus-within:ring-brand-600
     `,
     variants: {
       error: {

package/ui.form-input-file/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       p-3 size-auto w-full bg-white transition
       rounded-dynamic border border-solid border-gray-300
       hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
-      focus-within:ring-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
+      focus-within:ring-brand-600 focus-within:ring-dynamic-1
     `,
     variants: {
       error: {

package/ui.form-input-number/UInputNumber.vue

@@ -86,7 +86,7 @@ const {
 
     <UButton
       variant="thirdary"
-      size="sm"
+      size="2xs"
       filled
       square
       round
@@ -110,7 +110,7 @@ const {
 
     <UButton
       variant="thirdary"
-      size="sm"
+      size="2xs"
       filled
       square
       round

package/ui.form-input-number/config.ts

@@ -1,23 +1,42 @@
 export default /*tw*/ {
   label: {
     base: "{ULabel}",
-    content: "gap-6 items-center",
+    content: {
+      base: "items-center",
+      variants: {
+        size: {
+          sm: "gap-3",
+          md: "gap-3.5",
+          lg: "gap-4",
+        },
+      },
+    },
   },
   number: "",
-  removeButton: "{UButton}",
-  removeIcon: "{UIcon}",
   addButton: "{UButton}",
-  addIcon: "{UIcon}",
+  removeButton: "{UButton}",
+  actionIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
+  addIcon: "{>actionIcon}",
+  removeIcon: "{>actionIcon}",
   value: {
     base: "font-bold select-none !leading-none",
     variants: {
       size: {
-        sm: "text-sm",
-        md: "text-base",
-        lg: "text-lg",
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
       },
       disabled: {
-        true: "focus-within:ring-0 focus-within:ring-offset-0 pointer-events-none",
+        true: "pointer-events-none",
       },
     },
   },

package/ui.form-radio/config.ts

@@ -5,9 +5,9 @@ export default /*tw*/ {
       border border-gray-300 bg-white cursor-pointer transition
       hover:border-gray-400
       active:border-{color}-600 active:bg-{color}-200
-      focus:ring-0 focus:ring-offset-0
       checked:text-{color}-600
-      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-dynamic
+      focus:ring-0 focus:ring-offset-0
+      focus-visible:ring-{color}-600 focus-visible:ring-dynamic focus-visible:ring-offset-2
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
       disabled:checked:bg-gray-400 disabled:checked:border-transparent
     `,

package/ui.form-select/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-dynamic border border-gray-300 bg-white
       hover:border-gray-400 hover:transition hover:focus-within:border-brand-600
-      focus-within:ring-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
+      focus-within:ring-brand-600 focus-within:ring-dynamic-1
       focus-within:border-brand-600 focus-within:outline-none
     `,
     variants: {
@@ -14,7 +14,7 @@ export default /*tw*/ {
       },
       disabled: {
         true: `
-          focus-within:ring-0 focus-within:ring-offset-0 bg-gray-100
+          focus-within:ring-0 bg-gray-100
           hover:border-gray-300 focus-within:border-gray-300 hover:focus-within:border-gray-300
         `,
       },

package/ui.form-switch/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex items-center p-0.5 relative rounded-full cursor-pointer transition
-      focus-visible:ring-dynamic focus-visible:ring-offset-dynamic ring-{color}-600 outline-0
+      focus-visible:ring-dynamic focus-visible:ring-offset-2 ring-{color}-600 outline-0
     `,
     variants: {
       size: {

package/ui.form-textarea/config.ts

@@ -7,7 +7,7 @@ export default /*tw*/ {
     base: `
       flex bg-white transition w-full
       rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-600
-      focus-within:border-brand-600 focus-within:ring-dynamic focus-within:ring-offset-0
+      focus-within:border-brand-600 focus-within:ring-dynamic-1
       focus-within:ring-brand-600 focus-within:outline-none
     `,
     variants: {

package/ui.text-badge/config.ts

@@ -16,7 +16,7 @@ export default /*tw*/ {
         true: "rounded-full",
       },
       tabindex: {
-        true: "cursor-pointer focus-visible:ring-dynamic focus-visible:ring-offset-dynamic focus-visible:ring-{color}-600",
+        true: "cursor-pointer focus-visible:ring-dynamic focus-visible:ring-offset-2 focus-visible:ring-{color}-600",
       },
       color: {
         grayscale: "focus-visible:ring-gray-900",

package/utils/theme.ts

@@ -11,7 +11,6 @@ import {
   GRAYSCALE_COLOR,
   TAILWIND_COLORS,
   DEFAULT_RING,
-  DEFAULT_RING_OFFSET,
   DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
@@ -42,7 +41,6 @@ declare interface RootCSSVariableOptions {
   brand: string;
   gray: string;
   ring: number;
-  ringOffset: number;
   ringOffsetColorDark: string;
   ringOffsetColorLight: string;
   roundingSm: number;
@@ -158,7 +156,6 @@ export function setTheme(config: Config = {}) {
     config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
   const ring = config.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
-  const ringOffset = config.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
 
   const ringOffsetColorDark =
     config.ringOffsetColorDark ??
@@ -202,7 +199,6 @@ export function setTheme(config: Config = {}) {
     brand,
     gray,
     ring,
-    ringOffset,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -245,7 +241,6 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     brand,
     gray,
     ring,
-    ringOffset,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -263,7 +258,6 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
     "--vl-ring": `${Math.max(0, ring)}px`,
-    "--vl-ring-offset": `${Math.max(0, ringOffset)}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),