vueless 0.0.629 → 0.0.630

package/constants.js

@@ -21,7 +21,9 @@ export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
+export const DEFAULT_ROUNDING_SM = 4; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
+export const DEFAULT_ROUNDING_LG = 16; /* pixels */
 
 /* Vueless supported colors and shades */
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
@@ -171,21 +173,21 @@ export const TAILWIND_MERGE_EXTENSION = {
       "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
-      rounded: [{ rounded: ["dynamic", "inherit"] }],
-      "rounded-s": [{ "rounded-s": ["dynamic", "inherit"] }],
-      "rounded-e": [{ "rounded-e": ["dynamic", "inherit"] }],
-      "rounded-t": [{ "rounded-t": ["dynamic", "inherit"] }],
-      "rounded-r": [{ "rounded-r": ["dynamic", "inherit"] }],
-      "rounded-b": [{ "rounded-b": ["dynamic", "inherit"] }],
-      "rounded-l": [{ "rounded-l": ["dynamic", "inherit"] }],
-      "rounded-ss": [{ "rounded-ss": ["dynamic", "inherit"] }],
-      "rounded-se": [{ "rounded-se": ["dynamic", "inherit"] }],
-      "rounded-ee": [{ "rounded-ee": ["dynamic", "inherit"] }],
-      "rounded-es": [{ "rounded-es": ["dynamic", "inherit"] }],
-      "rounded-tl": [{ "rounded-tl": ["dynamic", "inherit"] }],
-      "rounded-tr": [{ "rounded-tr": ["dynamic", "inherit"] }],
-      "rounded-br": [{ "rounded-br": ["dynamic", "inherit"] }],
-      "rounded-bl": [{ "rounded-bl": ["dynamic", "inherit"] }],
+      rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-s": [{ "rounded-s": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-e": [{ "rounded-e": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-t": [{ "rounded-t": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-r": [{ "rounded-r": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-b": [{ "rounded-b": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-l": [{ "rounded-l": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-ss": [{ "rounded-ss": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-se": [{ "rounded-se": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-ee": [{ "rounded-ee": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-es": [{ "rounded-es": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-tl": [{ "rounded-tl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-tr": [{ "rounded-tr": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-br": [{ "rounded-br": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-bl": [{ "rounded-bl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
     },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.629",
+  "version": "0.0.630",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -27,13 +27,13 @@
     "access": "public"
   },
   "scripts": {
-    "pre:start": "npx @vueless/web-types && node .scripts/icons",
+    "pre:start": "npx node .scripts/icons",
     "dev:docs": "npm run pre:start && storybook dev -p 6006 --docs --no-open",
     "dev": "npm run pre:start && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "build": "npm run pre:start && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md node_modules/.cache/vueless/web-types.json dist/ && node .scripts/package",
+    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
@@ -66,8 +66,7 @@
     "@vue/eslint-config-prettier": "^10.0.0",
     "@vue/eslint-config-typescript": "^14.1.1",
     "@vue/tsconfig": "^0.5.1",
-    "@vueless/storybook": "^0.0.53",
-    "@vueless/web-types": "^0.0.21",
+    "@vueless/storybook": "^0.0.54",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^9.12.0",

package/plugin-vite.js

@@ -11,6 +11,7 @@ import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tail
 import { getNuxtFiles, getVueFiles } from "./utils/node/helper.js";
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
 import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicProps.js";
+import { buildWebTypes } from "./utils/node/webTypes.js";
 
 /* Automatically importing Vueless components on demand */
 export const VuelessUnpluginComponents = (options) =>
@@ -66,6 +67,10 @@ export const Vueless = function (options = {}) {
         await createTailwindSafelist({ mode, env, debug, targetFiles });
       }
 
+      if ((config.command.includes("sb:") && mode === "storybook") || isVuelessEnv) {
+        await buildWebTypes();
+      }
+
       if (config.command === "build") {
         /* remove cached icons */
         await removeIconsCache(mirrorCacheDir, debug);

package/preset-tailwind.js

@@ -11,7 +11,9 @@ import {
   GRAY_COLOR,
   COOL_COLOR,
   DARK_MODE_SELECTOR,
+  DEFAULT_ROUNDING_SM,
   DEFAULT_ROUNDING,
+  DEFAULT_ROUNDING_LG,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
@@ -88,7 +90,9 @@ export const vuelessTailwindConfig = {
       },
       borderRadius: {
         inherit: "inherit",
+        "dynamic-sm": "var(--vl-rounding-sm)",
         dynamic: "var(--vl-rounding)",
+        "dynamic-lg": "var(--vl-rounding-lg)",
       },
       ringWidth: {
         dynamic: "var(--vl-ring)",
@@ -106,7 +110,9 @@ export const vuelessTailwindConfig = {
         "var(--vl-ring)": DEFAULT_RING,
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
+        "var(--vl-rounding-sm)": DEFAULT_ROUNDING_SM,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
+        "var(--vl-rounding-lg)": DEFAULT_ROUNDING_LG,
         ...getReplacementColors(GRAY_COLOR, grayColor),
         ...getReplacementColors(BRAND_COLOR, brandColor),
       },

package/types.ts

@@ -77,11 +77,21 @@ export interface ThemeConfig {
    */
   gray?: GrayColors;
 
+  /**
+   * Default components "sm" size rounding (border-radius).
+   */
+  roundingSm?: number;
+
   /**
    * Default components rounding (border-radius).
    */
   rounding?: number;
 
+  /**
+   * Default components "lg" size rounding (border-radius).
+   */
+  roundingLg?: number;
+
   /**
    * Default components ring width.
    */
@@ -324,7 +334,9 @@ export interface VuelessCssVariables {
   "--vl-ring": string;
   "--vl-ring-offset": string;
   "--vl-ring-offset-color": string;
+  "--vl-rounding-sm": string;
   "--vl-rounding": string;
+  "--vl-rounding-lg": string;
   /* Gray CSS variables */
   "--vl-color-gray-50": string;
   "--vl-color-gray-100": string;

package/ui.button-link/config.ts

@@ -48,6 +48,12 @@ export default /*tw*/ {
         false: "no-underline",
       },
       color: {
+        gray: `
+          text-gray-500 decoration-gray-500
+          hover:text-gray-600 hover:decoration-gray-600
+          focus:text-gray-600 focus:decoration-gray-600
+          active:text-gray-700 active:decoration-gray-700
+        `,
         grayscale: `
           text-gray-900 decoration-gray-900
           hover:text-gray-800 hover:decoration-gray-800

package/ui.button-toggle-item/config.ts

@@ -9,6 +9,7 @@ export default /*tw*/ {
     base: "{UButton} font-normal !bg-{color}-600/15",
     defaults: {
       variant: "thirdary",
+      color: "brand",
       filled: true,
     },
   },

package/ui.container-card/config.ts

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "p-4 md:p-5 border rounded-dynamic border-gray-200 bg-white space-y-4 w-full",
+  wrapper: "p-4 md:p-5 border rounded-dynamic-lg border-gray-200 bg-white space-y-4 w-full",
   header: "flex justify-between",
   headerLeft: "flex items-center gap-2 w-fit",
   headerLeftFallback: "flex flex-col w-fit",

package/ui.form-checkbox/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   checkboxLabel: "{ULabel}",
   checkbox: {
     base: `
-      border rounded bg-white cursor-pointer transition checked:text-{color}-600
+      border rounded-dynamic-sm bg-white cursor-pointer transition checked:text-{color}-600
       border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
@@ -23,7 +23,7 @@ export default /*tw*/ {
   },
   iconWrapper: {
     base: `
-      flex items-center justify-center absolute rounded cursor-pointer transition
+      flex items-center justify-center absolute rounded-dynamic-sm cursor-pointer transition
       bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800
     `,
     variants: {

package/ui.form-label/config.ts

@@ -66,7 +66,7 @@ export default /*tw*/ {
     ],
   },
   description: {
-    base: "font-normal text-gray-500 text-left !leading-none",
+    base: "font-normal text-gray-500 text-left !leading-tight",
     variants: {
       size: {
         sm: "text-2xs",
@@ -74,21 +74,16 @@ export default /*tw*/ {
         lg: "text-sm",
       },
       align: {
-        top: "pl-0 -mt-0.5",
-        topInside: "pl-3",
-        topWithDesc: "pt-1",
-        left: "pt-1 pl-0",
-        right: "pt-1 pl-0",
+        top: "pl-3",
+        topInside: "pl-3 mt-1.5",
+        topWithDesc: "pt-0.5",
+        left: "pt-0.5",
+        right: "pt-0.5",
       },
       error: {
         true: "text-red-500",
       },
     },
-    compoundVariants: [
-      { align: "topInside", size: "sm", class: "mt-1.5" },
-      { align: "topInside", size: "md", class: "mt-2" },
-      { align: "topInside", size: "lg", class: "mt-2.5" },
-    ],
   },
   defaults: {
     align: "top",

package/ui.form-select/config.ts

@@ -90,7 +90,7 @@ export default /*tw*/ {
     ],
   },
   toggle: "{>caret} mr-3",
-  toggleIcon: "{UIcon} {>selectIcon}",
+  toggleIcon: "{UIcon} {>selectIcon} transition duration-300 group-[]/active:rotate-180",
   clear: "{>caret}",
   clearIcon: "{UIcon} {>selectIcon}",
   clearMultiple: "flex items-center",

package/utils/node/webTypes.js

@@ -0,0 +1,12 @@
+import { vuelessConfig } from "./vuelessConfig.js";
+
+export async function buildWebTypes() {
+  try {
+    const { default: build } = await import("@vueless/storybook/webTypes");
+
+    await build(vuelessConfig);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(error);
+  }
+}

package/utils/theme.ts

@@ -9,7 +9,9 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
+  DEFAULT_ROUNDING_SM,
   DEFAULT_ROUNDING,
+  DEFAULT_ROUNDING_LG,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
@@ -98,7 +100,9 @@ export function setColorMode(colorMode: `${ColorMode}`) {
 export function setTheme(config: Config = {}) {
   setColorMode(config?.colorMode || vuelessConfig?.colorMode || ColorMode.Auto);
 
+  const roundingSm = config?.roundingSm ?? vuelessConfig?.roundingSm ?? DEFAULT_ROUNDING_SM;
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
+  const roundingLg = config?.roundingLg ?? vuelessConfig?.roundingLg ?? DEFAULT_ROUNDING_LG;
   const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
   let brand: BrandColors | GrayColors | typeof GRAY_COLOR =
@@ -148,7 +152,9 @@ export function setTheme(config: Config = {}) {
   const colors: DefaultColors = merge(tailwindColors, tailwindConfig?.theme?.extend?.colors || {});
 
   const variables: Partial<VuelessCssVariables> = {
+    "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
+    "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),