vueless 0.0.710 → 0.0.712

package/constants.js

@@ -18,6 +18,8 @@ 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 RING_DECREMENT = 1; /* pixels */
+export const RING_INCREMENT = 1; /* 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 */
@@ -171,7 +173,7 @@ export const TAILWIND_MERGE_EXTENSION = {
       spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
     },
     classGroups: {
-      "ring-w": [{ ring: ["dynamic", "dynamic-1"] }],
+      "ring-w": [{ ring: ["dynamic", "dynamic-sm", "dynamic-lg"] }],
       "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.710",
+  "version": "0.0.712",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -17,6 +17,10 @@ import {
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   GRAYSCALE_COLOR,
+  ROUNDING_DECREMENT,
+  ROUNDING_INCREMENT,
+  RING_INCREMENT,
+  RING_DECREMENT,
 } from "./constants.js";
 
 const globalSettings = process.env.VUELESS_GLOBAL_SETTINGS || {};
@@ -92,8 +96,9 @@ export const vuelessTailwindConfig = {
         "dynamic-lg": "var(--vl-rounding-lg)",
       },
       ringWidth: {
+        "dynamic-sm": "var(--vl-ring-sm)",
         dynamic: "var(--vl-ring)",
-        "dynamic-1": "calc(var(--vl-ring) - 1px)",
+        "dynamic-lg": "var(--vl-ring-lg)",
       },
       ringOffsetColor: {
         dynamic: twColorWithOpacity("--vl-ring-offset-color"),
@@ -101,15 +106,17 @@ export const vuelessTailwindConfig = {
     },
     configViewer: {
       themeReplacements: {
-        /* eslint-disable prettier/prettier */
+        /* eslint-disable prettier/prettier, vue/max-len */
+        "var(--vl-ring-sm)": globalSettings.ringSm || Math.max(0, (globalSettings.ring || DEFAULT_RING) - RING_DECREMENT),
         "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
+        "var(--vl-ring-lg)": globalSettings.ringLg || Math.max(0, (globalSettings.ring || DEFAULT_RING) + RING_INCREMENT),
         "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-sm)": globalSettings.roundingSm || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_DECREMENT),
         "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,
-        "var(--vl-rounding-lg)": globalSettings.roundingLg || (globalSettings.ring || DEFAULT_ROUNDING) * 2,
+        "var(--vl-rounding-lg)": globalSettings.roundingLg || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_INCREMENT),
         ...getReplacementColors(GRAY_COLOR, globalSettings.gray || DEFAULT_GRAY_COLOR),
         ...getReplacementColors(BRAND_COLOR, globalSettings.brand || DEFAULT_BRAND_COLOR),
-        /* eslint-enable prettier/prettier */
+        /* eslint-enable prettier/prettier, vue/max-len */
       },
     },
   },

package/types.ts

@@ -81,7 +81,7 @@ export interface ThemeConfig {
   gray?: GrayColors;
 
   /**
-   * Default components "sm" size rounding (border-radius).
+   * Default components small size rounding (border-radius).
    */
   roundingSm?: number;
 
@@ -91,15 +91,25 @@ export interface ThemeConfig {
   rounding?: number;
 
   /**
-   * Default components "lg" size rounding (border-radius).
+   * Default components large size rounding (border-radius).
    */
   roundingLg?: number;
 
+  /**
+   * Default components small size ring width.
+   */
+  ringSm?: number;
+
   /**
    * Default components ring width.
    */
   ring?: number;
 
+  /**
+   * Default components large size ring width.
+   */
+  ringLg?: number;
+
   /**
    * Default components ring color for light theme.
    */
@@ -339,7 +349,9 @@ export interface TailwindColorShades {
 }
 
 export interface VuelessCssVariables {
+  "--vl-ring-sm": string;
   "--vl-ring": string;
+  "--vl-ring-lg": string;
   "--vl-ring-offset-color": string;
   "--vl-rounding-sm": string;
   "--vl-rounding": string;

package/ui.dropdown-list/storybook/docs.mdx

@@ -12,7 +12,7 @@ import defaultConfig from "../config.ts?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## Row meta keys
+## Option meta keys
 Keys you may/have to provide to component in an option object.
 
 <Markdown>

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-1 focus-within:ring-brand-600
+      focus-within:ring-dynamic-sm 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-1
+      focus-within:ring-brand-600 focus-within:ring-dynamic-sm
     `,
     variants: {
       error: {

package/ui.form-select/USelect.vue

@@ -10,6 +10,7 @@ import useUI from "../composables/useUI.ts";
 import { createDebounce, hasSlotContent } from "../utils/helper.ts";
 import { getDefaults } from "../utils/ui.ts";
 import { isMac } from "../utils/platform.ts";
+import { useMutationObserver } from "../composables/useMutationObserver.ts";
 
 import {
   filterOptions,
@@ -334,6 +335,12 @@ function onMouseDownClear() {
   emit("remove", props.options);
 }
 
+useMutationObserver(leftSlotWrapperRef, (mutations) => mutations.forEach(setLabelPosition), {
+  childList: true,
+  characterData: true,
+  subtree: true,
+});
+
 function setLabelPosition() {
   if (props.labelAlign === "top" || (!hasSlotContent(slots["left"]) && !props.leftIcon)) {
     return;

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-1
+      focus-within:ring-brand-600 focus-within:ring-dynamic-sm
       focus-within:border-brand-600 focus-within:outline-none
     `,
     variants: {
@@ -114,10 +114,8 @@ export default /*tw*/ {
       selected: {
         false: "w-full",
       },
-      opened: {
-        true: "w-full",
-      },
     },
+    compoundVariants: [{ opened: true, searchable: false, class: "w-0" }],
   },
   searchInput: {
     base: `

package/ui.form-select/storybook/docs.mdx

@@ -12,5 +12,8 @@ import defaultConfig from "../config.ts?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Option meta keys
+Full list of keys you may/have to provide to component in an option object can be found here: [UDropdownList docs](https://ui.vueless.com/?path=/docs/2050--docs).
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-select/storybook/stories.ts

@@ -1,3 +1,4 @@
+import { ref, computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -7,16 +8,18 @@ import {
 
 import USelect from "../../ui.form-select/USelect.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULink from "../../ui.button-link/ULink.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
 
 interface USelectArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "openDirection";
+  enum: "size" | "openDirection" | "labelAlign";
 }
 
 interface SelectOption {
@@ -30,13 +33,14 @@ export default {
   title: "Form Inputs & Controls / Select",
   component: USelect,
   args: {
-    label: "Label",
+    label: "Choose a city",
     modelValue: null,
     options: [
-      { id: 1, label: "value 1", badge: "10%" },
-      { id: 2, label: "value 2", badge: "20%" },
-      { id: 3, label: "value 3", badge: "30%" },
-      { id: 4, label: "value 4", badge: "40%" },
+      { label: "New York", id: "1" },
+      { label: "Los Angeles", id: "2" },
+      { label: "Chicago", id: "3" },
+      { label: "Houston", id: "4" },
+      { label: "San Francisco", id: "5" },
     ],
   },
   argTypes: {
@@ -46,49 +50,63 @@ export default {
     docs: {
       ...getDocsDescription(USelect.__name),
       story: {
-        height: "280px",
+        height: "300px",
       },
     },
   },
 } as Meta;
 
 const DefaultTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
-  components: { USelect, UIcon, UBadge, ULink },
+  components: { USelect, UIcon, UBadge, ULink, UAvatar },
   setup() {
     function getSelectedBadge(options: SelectOption[], currentValue: string | number) {
       return options?.find((option) => option.id === currentValue);
     }
 
     const slots = getSlotNames(USelect.__name);
+    const errorMessage = computed(() => (!args.modelValue ? args.error : ""));
+    const showAlert = (message: string) => alert(message);
 
-    return { args, slots, getSelectedBadge };
+    return { args, slots, getSelectedBadge, errorMessage, showAlert };
   },
   template: `
-    <USelect v-bind="args" v-model="args.modelValue">
+    <USelect
+      v-bind="args"
+      v-model="args.modelValue"
+      :error="errorMessage"
+      class="max-w-96"
+      @add="showAlert('You triggered the add action!')"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </USelect>
   `,
 });
 
 const EnumVariantTemplate: StoryFn<USelectArgs> = (args: USelectArgs, { argTypes }) => ({
-  components: { USelect, URow },
+  components: { USelect, UCol },
   setup() {
-    return {
-      args,
-      options: argTypes?.[args.enum]?.options,
-    };
+    let filteredOptions = argTypes?.[args.enum]?.options;
+
+    if (args.enum === "labelAlign") {
+      filteredOptions = argTypes?.[args.enum]?.options?.filter(
+        (item) => item !== "right" && item !== "topWithDesc",
+      );
+    }
+
+    return { args, filteredOptions };
   },
   template: `
-    <URow>
+    <UCol>
       <USelect
-        v-for="(option, index) in options"
+        v-for="(option, index) in filteredOptions"
         :key="index"
         v-bind="args"
         v-model="args.modelValue"
         :[args.enum]="option"
-        :label="option"
+        :description="option"
+        class="max-w-96"
       />
-    </URow>
+    </UCol>
   `,
 });
 
@@ -118,6 +136,24 @@ const GroupValuesTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { placeholder: "Start typing to search for a city..." };
+
+export const Description = DefaultTemplate.bind({});
+Description.args = { description: "You can only select a city from the list." };
+
+export const Error = DefaultTemplate.bind({});
+Error.args = { error: "Please select a city from the list" };
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const LabelPlacement = EnumVariantTemplate.bind({});
+LabelPlacement.args = { enum: "labelAlign" };
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", multiple: true, modelValue: [] };
+
 export const LargeItemList = DefaultTemplate.bind({});
 LargeItemList.args = {
   options: [...new Array(1000)].map((_, index) => {
@@ -128,6 +164,18 @@ LargeItemList.args = {
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true, modelValue: [] };
 
+export const ClearableAndSearchable = DefaultTemplate.bind({});
+ClearableAndSearchable.args = { clearable: false, searchable: false };
+ClearableAndSearchable.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "The `clearable` and `searchable` props control whether users can clear the selected value or search within the list. <br/> In this example, both are set to `false`, meaning the selection cannot be cleared, and searching is disabled.",
+    },
+  },
+};
+
 export const OpenDirection = EnumVariantTemplate.bind({});
 OpenDirection.args = { enum: "openDirection" };
 
@@ -159,36 +207,181 @@ GroupValue.args = {
   ],
 };
 
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
-
-export const Error = DefaultTemplate.bind({});
-Error.args = { error: "some error text" };
-
-export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "some placeholder text" };
-
-export const Description = DefaultTemplate.bind({});
-Description.args = { description: "some description text" };
-
 export const OptionsLimit2 = DefaultTemplate.bind({});
 OptionsLimit2.args = { optionsLimit: 2 };
+OptionsLimit2.parameters = {
+  docs: {
+    description: {
+      story: "`optionsLimit` prop controls the number of options displayed in the dropdown.",
+    },
+  },
+};
+
+export const VisibleOptions = DefaultTemplate.bind({});
+VisibleOptions.args = { visibleOptions: 3 };
+VisibleOptions.parameters = {
+  docs: {
+    description: {
+      story: "`visibleOptions` prop controls the number of options you can see without a scroll.",
+    },
+  },
+};
 
 export const AddOption = DefaultTemplate.bind({});
 AddOption.args = { addOption: true };
+AddOption.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "The `addOption` prop displays an 'Add option' button, while the `add` event allows handling custom functionality when the button is clicked.",
+    },
+  },
+};
 
-export const OptionIsHidden = DefaultTemplate.bind({});
-OptionIsHidden.args = {
+export const OptionSettings = DefaultTemplate.bind({});
+OptionSettings.args = {
   options: [
-    { id: 1, label: "value 1", isHidden: true },
-    { id: 2, label: "value 2" },
-    { id: 3, label: "value 3" },
-    { id: 4, label: "value 4" },
+    { label: "1. New York", id: "1" },
+    { label: "2. Los Angeles", id: "2", isHidden: true },
+    {
+      label: "3. Chicago",
+      id: "3",
+      onClick: (option) =>
+        alert("onClick function for the third option: " + JSON.stringify(option)),
+    },
+    { label: "4. Houston", id: "4" },
+    { label: "5. San Francisco", id: "5" },
   ],
 };
+OptionSettings.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "The second option of the array is hidden (`isHidden` object property is set to `true`). <br/> The third option has `onClick` event handler: <br/> `onClick: (option: Option) => alert('onClick function for option 3: ' + JSON.stringify(option))`",
+    },
+  },
+};
 
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "size", multiple: true, modelValue: [] };
+export const IconProps: StoryFn<USelectArgs> = (args) => ({
+  components: { USelect, URow },
+  setup() {
+    const levelOptions = [
+      { label: "Awesome", id: "1" },
+      { label: "Good", id: "2" },
+      { label: "Could be better", id: "3" },
+      { label: "Terrible", id: "4" },
+    ];
+
+    const roleOptions = [
+      { label: "Admin", id: "1" },
+      { label: "CEO", id: "2" },
+      { label: "Manager", id: "3" },
+      { label: "Guest", id: "4" },
+    ];
+
+    return { args, levelOptions, roleOptions };
+  },
+  template: `
+    <URow no-mobile>
+      <USelect
+        left-icon="feedback"
+        label="Choose the level of our services"
+        placeholder="Share your feedback with us"
+        :options="levelOptions"
+      />
+      <USelect
+        right-icon="person"
+        label="Select your role"
+        placeholder="Choose a role from the list"
+        :options="roleOptions"
+      />
+    </URow>
+  `,
+});
+
+export const Slots: StoryFn<USelectArgs> = (args) => ({
+  components: { USelect, UCol, URow, ULink, UBadge, UAvatar },
+  setup() {
+    const clearModel = ref(null);
+    const clearMultipleModel = ref([]);
+    const beforeToggleModel = ref(null);
+    const afterToggleModel = ref(null);
+    const leftModel = ref(null);
+    const rightModel = ref(null);
+
+    return {
+      args,
+      clearModel,
+      clearMultipleModel,
+      beforeToggleModel,
+      afterToggleModel,
+      leftModel,
+      rightModel,
+    };
+  },
+  template: `
+    <UCol no-mobile>
+      <USelect v-bind="args" v-model="args.clearModel" label="Slot clear">
+        <template #clear>
+          <ULink label="Close" />
+        </template>
+      </USelect>
+
+      <USelect
+        v-bind="args"
+        v-model="args.clearMultipleModel"
+        multiple
+        label="Slot clear-multiple"
+      >
+        <template #clear-multiple>
+          <ULink label="Close" color="green" />
+        </template>
+      </USelect>
+
+      <URow no-mobile>
+        <USelect v-bind="args" v-model="args.beforeToggleModel" label="Slot before-toggle">
+          <template #before-toggle>
+            <UAvatar />
+          </template>
+        </USelect>
+
+        <USelect
+          v-bind="args"
+          v-model="args.afterToggleModel"
+          :config="{ afterToggle: 'pt-0 items-center' }"
+          label="Slot after-toggle"
+        >
+          <template #after-toggle>
+            <UAvatar />
+          </template>
+        </USelect>
+      </URow>
+
+      <URow no-mobile>
+        <USelect v-bind="args" v-model="args.leftModel" label="Slot left">
+          <template #left>
+            <UAvatar />
+          </template>
+        </USelect>
+
+        <USelect v-bind="args" v-model="args.rightModel" label="Slot right">
+          <template #right>
+            <UAvatar />
+          </template>
+        </USelect>
+      </URow>
+    </UCol>
+  `,
+});
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "500px",
+    },
+  },
+};
 
 export const SlotToggle = DefaultTemplate.bind({});
 SlotToggle.args = {
@@ -202,67 +395,29 @@ SlotToggle.args = {
   `,
 };
 
-export const SlotClear = DefaultTemplate.bind({});
-SlotClear.args = {
-  slotTemplate: `
-    <template #clear>
-      <ULink label="Close" />
-    </template>
-  `,
-};
-
-export const SlotClearMultiple = DefaultTemplate.bind({});
-SlotClearMultiple.args = {
-  multiple: true,
-  modelValue: [],
-  slotTemplate: `
-    <template #clear-multiple>
-      <ULink label="Close" />
-    </template>
-  `,
-};
-
 export const SlotSelectedValueLabel = DefaultTemplate.bind({});
 SlotSelectedValueLabel.args = {
   slotTemplate: `
-    <template #selected-label>
-      🤘🤘🤘
+    <template #selected-label="{ selectedLabel }">
+      <UBadge :label="selectedLabel" color="green" />
     </template>
   `,
 };
 
 export const SlotSelectedValueLabelAfter = DefaultTemplate.bind({});
 SlotSelectedValueLabelAfter.args = {
+  options: [
+    { label: "Venice", id: "1", icon: "sailing", color: "green" },
+    { label: "Paris", id: "2", icon: "flight", color: "orange" },
+  ],
   slotTemplate: `
-    <template #selected-label-after>
-      🤘🤘🤘
-    </template>
-  `,
-};
-
-export const SlotOption = DefaultTemplate.bind({});
-SlotOption.args = {
-  slotTemplate: `
-    <template #option>
-      🤘🤘🤘
-    </template>
-  `,
-};
-
-export const SlotAfterToggle = DefaultTemplate.bind({});
-SlotAfterToggle.args = {
-  slotTemplate: `
-    <template #after-toggle>
-      🤘
-    </template>
-  `,
-};
-
-export const SlotBeforeToggle = DefaultTemplate.bind({});
-SlotBeforeToggle.args = {
-  slotTemplate: `
-    <template #before-toggle>
-      🤘
+    <template #selected-label-after="{ option }">
+      <UIcon
+        :name="option.icon"
+        :color="option.color"
+        size="xs"
+        class="ml-1"
+      />
     </template>
   `,
 };
@@ -270,32 +425,26 @@ SlotBeforeToggle.args = {
 export const SlotBeforeOption = DefaultTemplate.bind({});
 SlotBeforeOption.args = {
   slotTemplate: `
-    <template #before-option>
-      🤘
+    <template #before-option="{ option, index }">
+      <UBadge v-if="index === 3" label="Special offer!" color="blue" class="mr-1" />
     </template>
   `,
 };
 
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star" };
-
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star" };
-
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
+export const SlotOption = DefaultTemplate.bind({});
+SlotOption.args = {
   slotTemplate: `
-    <template #left>
-      🤘
+    <template #option="{ option, index }">
+      <UBadge v-if="index === 1" :label="option.label" />
     </template>
   `,
 };
 
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
+export const SlotAfterOption = DefaultTemplate.bind({});
+SlotAfterOption.args = {
   slotTemplate: `
-    <template #right>
-      🤘
+    <template #after-option="{ option, index }">
+      <UBadge v-if="index === 2" label="Special offer!" color="blue" class="ml-1" />
     </template>
   `,
 };

package/ui.form-select/types.ts

@@ -24,7 +24,7 @@ export interface Props {
   /**
    * Label placement.
    */
-  labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
+  labelAlign?: "topInside" | "top" | "topWithDesc" | "left" | "right";
 
   /**
    * Select placeholder.

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-1
+      focus-within:border-brand-600 focus-within:ring-dynamic-sm
       focus-within:ring-brand-600 focus-within:outline-none
     `,
     variants: {

package/utils/theme.ts

@@ -10,12 +10,14 @@ import {
   DARK_MODE_SELECTOR,
   GRAYSCALE_COLOR,
   TAILWIND_COLORS,
-  DEFAULT_RING,
-  DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
+  DEFAULT_RING,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
   DEFAULT_RING_OFFSET_COLOR_DARK,
+  RING_DECREMENT,
+  RING_INCREMENT,
+  DEFAULT_ROUNDING,
   ROUNDING_DECREMENT,
   ROUNDING_INCREMENT,
 } from "../constants.js";
@@ -40,7 +42,9 @@ declare interface RootCSSVariableOptions {
   colors: Colors;
   brand: string;
   gray: string;
+  ringSm: number;
   ring: number;
+  ringLg: number;
   ringOffsetColorDark: string;
   ringOffsetColorLight: string;
   roundingSm: number;
@@ -155,7 +159,11 @@ export function setTheme(config: Config = {}) {
   let gray: GrayColors =
     config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
-  const ring = config.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
+  const { ringSm, ring, ringLg } = getRings(
+    config.ringSm ?? vuelessConfig.ringSm,
+    config.ring ?? vuelessConfig.ring,
+    config.ringLg ?? vuelessConfig.ringLg,
+  );
 
   const ringOffsetColorDark =
     config.ringOffsetColorDark ??
@@ -198,7 +206,9 @@ export function setTheme(config: Config = {}) {
     colors,
     brand,
     gray,
+    ringSm,
     ring,
+    ringLg,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -207,6 +217,22 @@ export function setTheme(config: Config = {}) {
   });
 }
 
+function getRings(sm?: number, md?: number, lg?: number) {
+  const ring = Math.max(0, md ?? DEFAULT_RING);
+  const ringSm = Math.max(0, ring - RING_DECREMENT);
+  let ringLg = Math.max(0, ring + RING_INCREMENT);
+
+  if (ring === 0) {
+    ringLg = 0;
+  }
+
+  return {
+    ring,
+    ringSm: sm === undefined ? ringSm : Math.max(0, sm),
+    ringLg: lg === undefined ? ringLg : Math.max(0, lg),
+  };
+}
+
 function getRoundings(sm?: number, md?: number, lg?: number) {
   const rounding = Math.max(0, md ?? DEFAULT_ROUNDING);
   let roundingSm = Math.max(0, rounding - ROUNDING_DECREMENT);
@@ -240,7 +266,9 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     colors,
     brand,
     gray,
+    ringSm,
     ring,
+    ringLg,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -257,7 +285,9 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     "--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": `${Math.max(0, ring)}px`,
+    "--vl-ring-sm": `${ringSm}px`,
+    "--vl-ring": `${ring}px`,
+    "--vl-ring-lg": `${ringLg}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),