vueless 1.2.15-beta.4 → 1.2.15-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.15-beta.4",
+  "version": "1.2.15-beta.6",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.data-list/config.ts

@@ -53,7 +53,7 @@ export default /*tw*/ {
   defaults: {
     size: "md",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     animationDuration: 200,
     /* icons */
     dragIcon: "drag_indicator",

package/ui.data-list/storybook/stories.ts

@@ -30,9 +30,9 @@ export default {
   component: UDataList,
   args: {
     list: [
-      { label: "Expenses", id: 1 },
-      { label: "Revenue Streams", id: 2 },
-      { label: "Departments", id: 3 },
+      { label: "Expenses", value: 1 },
+      { label: "Revenue Streams", value: 2 },
+      { label: "Departments", value: 3 },
     ],
   },
   argTypes: {
@@ -87,29 +87,29 @@ Nesting.args = {
   list: [
     {
       label: "Expenses",
-      id: 1,
+      value: 1,
       children: [
-        { label: "Office Supplies", id: 1.1 },
-        { label: "Travel & Lodging", id: 1.2 },
-        { label: "Utilities", id: 1.3 },
+        { label: "Office Supplies", value: 1.1 },
+        { label: "Travel & Lodging", value: 1.2 },
+        { label: "Utilities", value: 1.3 },
       ],
     },
     {
       label: "Revenue Streams",
-      id: 2,
+      value: 2,
       children: [
-        { label: "Product Sales", id: 2.1 },
-        { label: "Subscription Services", id: 2.2 },
-        { label: "Consulting", id: 2.3 },
+        { label: "Product Sales", value: 2.1 },
+        { label: "Subscription Services", value: 2.2 },
+        { label: "Consulting", value: 2.3 },
       ],
     },
     {
       label: "Departments",
-      id: 3,
+      value: 3,
       children: [
-        { label: "Engineering", id: 3.1 },
-        { label: "Marketing", id: 3.2 },
-        { label: "Finance", id: 3.3 },
+        { label: "Engineering", value: 3.1 },
+        { label: "Marketing", value: 3.2 },
+        { label: "Finance", value: 3.3 },
       ],
     },
   ],
@@ -159,17 +159,17 @@ DragSlot.args = {
   list: [
     {
       label: "John Doe (Engineering)",
-      id: 1,
+      value: 1,
       avatar: "https://cdn-icons-png.flaticon.com/128/1999/1999625.png",
     },
     {
       label: "Michael Johnson (Finance)",
-      id: 2,
+      value: 2,
       avatar: "https://cdn-icons-png.flaticon.com/128/4140/4140057.png",
     },
     {
       label: "Emma Smith (Marketing)",
-      id: 3,
+      value: 3,
       avatar: "https://cdn-icons-png.flaticon.com/128/4140/4140047.png",
     },
   ],
@@ -183,18 +183,18 @@ DragSlot.args = {
 export const ActionsSlot = DefaultTemplate.bind({});
 ActionsSlot.args = {
   list: [
-    { label: "Expenses", id: 1 },
+    { label: "Expenses", value: 1 },
     {
       label: "Revenue Streams",
-      id: 2,
+      value: 2,
       actions: false,
       children: [
-        { label: "Product Sales", id: 2.1 },
-        { label: "Subscription Services", id: 2.2 },
-        { label: "Consulting", id: 2.3, actions: false },
+        { label: "Product Sales", value: 2.1 },
+        { label: "Subscription Services", value: 2.2 },
+        { label: "Consulting", value: 2.3, actions: false },
       ],
     },
-    { label: "Departments", id: 3, crossed: true },
+    { label: "Departments", value: 3, crossed: true },
   ],
   slotTemplate: `
     <template #actions="{ item }">

package/ui.data-list/tests/UDataList.test.ts

@@ -10,21 +10,21 @@ import type { Props, DataListItem } from "../types";
 
 describe("UDataList.vue", () => {
   const defaultList: DataListItem[] = [
-    { id: 1, label: "Item 1" },
-    { id: 2, label: "Item 2", crossed: true },
-    { id: 3, label: "Item 3", actions: false },
+    { value: 1, label: "Item 1" },
+    { value: 2, label: "Item 2", crossed: true },
+    { value: 3, label: "Item 3", actions: false },
   ];
 
   const nestedList: DataListItem[] = [
     {
-      id: 1,
+      value: 1,
       label: "Parent 1",
       children: [
-        { id: 11, label: "Child 1.1" },
-        { id: 12, label: "Child 1.2" },
+        { value: 11, label: "Child 1.1" },
+        { value: 12, label: "Child 1.2" },
       ],
     },
-    { id: 2, label: "Parent 2" },
+    { value: 2, label: "Parent 2" },
   ];
 
   describe("Props", () => {

package/ui.dropdown-badge/config.ts

@@ -37,7 +37,7 @@ export default /*tw*/ {
     size: "md",
     variant: "solid",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     groupLabelKey: "label",
     yPosition: "bottom",
     xPosition: "left",

package/ui.dropdown-badge/storybook/stories.ts

@@ -41,9 +41,9 @@ export default {
   args: {
     label: "Order Status",
     options: [
-      { label: "Pending", id: "pending" },
-      { label: "Delivered", id: "delivered" },
-      { label: "Cancelled", id: "cancelled" },
+      { label: "Pending", value: "pending" },
+      { label: "Delivered", value: "delivered" },
+      { label: "Cancelled", value: "cancelled" },
     ],
   },
   argTypes: {

package/ui.dropdown-badge/tests/UDropdownBadge.test.ts

@@ -10,9 +10,9 @@ import type { Props } from "../types";
 
 describe("UDropdownBadge.vue", () => {
   const defaultOptions = [
-    { id: 1, label: "Option 1" },
-    { id: 2, label: "Option 2" },
-    { id: 3, label: "Option 3" },
+    { value: 1, label: "Option 1" },
+    { value: 2, label: "Option 2" },
+    { value: 3, label: "Option 3" },
   ];
 
   // Props tests
@@ -43,7 +43,7 @@ describe("UDropdownBadge.vue", () => {
       });
 
       // Find the selected option's label
-      const selectedOption = defaultOptions.find((option) => option.id === modelValue);
+      const selectedOption = defaultOptions.find((option) => option.value === modelValue);
 
       expect(component.findComponent(UBadge).props("label")).toBe(selectedOption?.label);
     });
@@ -61,7 +61,7 @@ describe("UDropdownBadge.vue", () => {
       });
 
       // Find the selected options' labels
-      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.id));
+      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.value));
       const expectedLabel = selectedOptions.map((option) => option.label).join(", ");
 
       expect(component.findComponent(UBadge).props("label")).toBe(expectedLabel);

package/ui.dropdown-button/config.ts

@@ -50,7 +50,7 @@ export default /*tw*/ {
     size: "md",
     variant: "solid",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     groupLabelKey: "label",
     yPosition: "bottom",
     xPosition: "left",

package/ui.dropdown-button/storybook/stories.ts

@@ -41,9 +41,9 @@ export default {
   args: {
     label: "Actions",
     options: [
-      { label: "Edit", id: "edit" },
-      { label: "Copy", id: "copy" },
-      { label: "Remove", id: "delete" },
+      { label: "Edit", value: "edit" },
+      { label: "Copy", value: "copy" },
+      { label: "Remove", value: "delete" },
     ],
   },
   argTypes: {
@@ -365,7 +365,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -373,7 +373,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -381,7 +381,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -389,7 +389,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

package/ui.dropdown-button/tests/UDropdownButton.test.ts

@@ -10,9 +10,9 @@ import type { Props } from "../types";
 
 describe("UDropdownButton.vue", () => {
   const defaultOptions = [
-    { id: 1, label: "Option 1" },
-    { id: 2, label: "Option 2" },
-    { id: 3, label: "Option 3" },
+    { value: 1, label: "Option 1" },
+    { value: 2, label: "Option 2" },
+    { value: 3, label: "Option 3" },
   ];
 
   // Props tests
@@ -43,7 +43,7 @@ describe("UDropdownButton.vue", () => {
       });
 
       // Find the selected option's label
-      const selectedOption = defaultOptions.find((option) => option.id === modelValue);
+      const selectedOption = defaultOptions.find((option) => option.value === modelValue);
 
       expect(component.findComponent(UButton).props("label")).toBe(selectedOption?.label);
     });
@@ -61,7 +61,7 @@ describe("UDropdownButton.vue", () => {
       });
 
       // Find the selected options' labels
-      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.id));
+      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.value));
       const expectedLabel = selectedOptions.map((option) => option.label).join(", ");
 
       expect(component.findComponent(UButton).props("label")).toBe(expectedLabel);

package/ui.dropdown-link/config.ts

@@ -32,7 +32,7 @@ export default /*tw*/ {
     color: "primary",
     size: "md",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     groupLabelKey: "label",
     yPosition: "bottom",
     xPosition: "left",

package/ui.dropdown-link/storybook/stories.ts

@@ -40,9 +40,9 @@ export default {
   args: {
     label: "Account",
     options: [
-      { label: "Profile", id: "profile" },
-      { label: "Settings", id: "settings" },
-      { label: "Logout", id: "logout" },
+      { label: "Profile", value: "profile" },
+      { label: "Settings", value: "settings" },
+      { label: "Logout", value: "logout" },
     ],
   },
   argTypes: {

package/ui.dropdown-link/tests/UDropdownLink.test.ts

@@ -10,9 +10,9 @@ import type { Props } from "../types";
 
 describe("UDropdownLink.vue", () => {
   const defaultOptions = [
-    { id: 1, label: "Option 1" },
-    { id: 2, label: "Option 2" },
-    { id: 3, label: "Option 3" },
+    { value: 1, label: "Option 1" },
+    { value: 2, label: "Option 2" },
+    { value: 3, label: "Option 3" },
   ];
 
   // Props tests
@@ -43,7 +43,7 @@ describe("UDropdownLink.vue", () => {
       });
 
       // Find the selected option's label
-      const selectedOption = defaultOptions.find((option) => option.id === modelValue);
+      const selectedOption = defaultOptions.find((option) => option.value === modelValue);
 
       expect(component.findComponent(ULink).props("label")).toBe(selectedOption?.label);
     });
@@ -61,7 +61,7 @@ describe("UDropdownLink.vue", () => {
       });
 
       // Find the selected options' labels
-      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.id));
+      const selectedOptions = defaultOptions.filter((option) => modelValue.includes(option.value));
       const expectedLabel = selectedOptions.map((option) => option.label).join(", ");
 
       expect(component.findComponent(ULink).props("label")).toBe(expectedLabel);

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -103,10 +103,10 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
           v-for="(option, index) in options"
           :key="index"
           :model-value="modelValue"
-          :value="option.value"
+          :value="option[valueKey]"
           :true-value="option.trueValue"
           :false-value="option.falseValue"
-          :label="option.label"
+          :label="String(option[labelKey] || undefined)"
           :description="option.description"
           :disabled="disabled"
           v-bind="groupCheckboxAttrs"

package/ui.form-checkbox-group/config.ts

@@ -14,6 +14,8 @@ export default /*tw*/ {
   defaults: {
     color: "primary",
     size: "md",
+    labelKey: "label",
+    valueKey: "value",
     disabled: false,
   },
 };

package/ui.form-checkbox-group/storybook/stories.ts

@@ -33,9 +33,9 @@ export default {
   args: {
     label: "Select your preferred communication methods:",
     options: [
-      { label: "Email Notifications", value: "email" },
-      { label: "SMS Alerts", value: "sms" },
-      { label: "Push Notifications", value: "push" },
+      { label: "Email Notifications", id: "email" },
+      { label: "SMS Alerts", id: "sms" },
+      { label: "Push Notifications", id: "push" },
     ],
   },
   argTypes: {
@@ -108,7 +108,7 @@ export const Options: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) =
       <UAlert
         :description="modelValue"
         size="sm"
-        variant="ghost"
+        variant="soft"
         color="success"
         bordered
       />
@@ -144,11 +144,48 @@ export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
   name: "LabelSlot",
   slotTemplate: `
-    <template #label>
-      <URow gap="2xs" align="center">
-        <UText>Select your <ULink label="notification preferences" /></UText>
-        <UIcon name="notifications" size="xs" />
-      </URow>
+    <template #label="{ label }">
+      {{ label }}
+      <span class="text-red-500">*</span>
     </template>
   `,
 };
+
+export const CustomKeys: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) => ({
+  components: { UCheckboxGroup, UCol, UAlert },
+  setup: () => ({ args, modelValue: ref([]) }),
+  template: `
+    <UCol>
+      <UCheckboxGroup v-bind="args" v-model="modelValue" />
+
+      <UAlert
+        :description="modelValue"
+        size="sm"
+        variant="soft"
+        color="success"
+        bordered
+      />
+    </UCol>
+  `,
+});
+CustomKeys.args = {
+  name: "CustomKeys",
+  label: "Select your preferred features:",
+  labelKey: "name",
+  valueKey: "id",
+  options: [
+    { id: "dark-mode", name: "Dark Mode" },
+    { id: "auto-save", name: "Auto-save" },
+    { id: "notifications", name: "Notifications" },
+    { id: "two-factor", name: "Two-factor Authentication" },
+  ],
+};
+CustomKeys.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use `labelKey` and `valueKey` props to specify custom keys for label and value in option objects. " +
+        "This is useful when working with data from APIs that use different property names.",
+    },
+  },
+};

package/ui.form-checkbox-group/tests/UCheckboxGroup.test.ts

@@ -185,6 +185,71 @@ describe("UCheckboxGroup.vue", () => {
         expect(checkbox.attributes("data-test")).toBe(`${dataTestValue}-item-${idx}-label`);
       });
     });
+
+    it("LabelKey – uses custom label key for option labels", () => {
+      const customOptions = [
+        { value: "option-1", name: "Option 1" },
+        { value: "option-2", name: "Option 2" },
+        { value: "option-3", name: "Option 3" },
+      ];
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          options: customOptions,
+          labelKey: "name",
+        },
+      });
+
+      const checkboxes = component.findAllComponents(UCheckbox);
+
+      checkboxes.forEach((checkbox, index) => {
+        expect(checkbox.props("label")).toBe(customOptions[index].name);
+      });
+    });
+
+    it("ValueKey – uses custom value key for option values", () => {
+      const customOptions = [
+        { id: "option-1", label: "Option 1" },
+        { id: "option-2", label: "Option 2" },
+        { id: "option-3", label: "Option 3" },
+      ];
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          options: customOptions,
+          valueKey: "id",
+        },
+      });
+
+      const checkboxes = component.findAllComponents(UCheckbox);
+
+      checkboxes.forEach((checkbox, index) => {
+        expect(checkbox.props("value")).toBe(customOptions[index].id);
+      });
+    });
+
+    it("LabelKey and ValueKey – works with complex objects", async () => {
+      const customOptions = [
+        { planId: "basic", title: "Basic Plan" },
+        { planId: "pro", title: "Pro Plan" },
+      ];
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          options: customOptions,
+          labelKey: "title",
+          valueKey: "planId",
+          modelValue: [],
+        },
+      });
+
+      const checkboxes = component.findAllComponents(UCheckbox);
+
+      expect(checkboxes[0].props("label")).toBe("Basic Plan");
+      expect(checkboxes[0].props("value")).toBe("basic");
+      expect(checkboxes[1].props("label")).toBe("Pro Plan");
+      expect(checkboxes[1].props("value")).toBe("pro");
+    });
   });
 
   describe("Slots", () => {

package/ui.form-checkbox-group/types.ts

@@ -16,6 +16,16 @@ export interface Props {
    */
   options?: UCheckboxOption[];
 
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey?: string;
+
   /**
    * Checkbox group label.
    */

package/ui.form-listbox/config.ts

@@ -100,7 +100,7 @@ export default /*tw*/ {
     color: "primary",
     size: "md",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     visibleOptions: undefined,
     debounce: 0,
     optionsLimit: 0,

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

@@ -37,11 +37,11 @@ export default {
   component: UListbox,
   args: {
     options: [
-      { label: "New York", id: 1 },
-      { label: "Los Angeles", id: 2 },
-      { label: "Chicago", id: 3 },
-      { label: "Houston", id: 4 },
-      { label: "San Francisco", id: 5 },
+      { label: "New York", value: 1 },
+      { label: "Los Angeles", value: 2 },
+      { label: "Chicago", value: 3 },
+      { label: "Houston", value: 4 },
+      { label: "San Francisco", value: 5 },
     ],
   },
   argTypes: {
@@ -176,12 +176,12 @@ GroupedOptions.parameters = {
 export const Divider = DefaultTemplate.bind({});
 Divider.args = {
   options: [
-    { label: "North America", id: "1" },
-    { label: "South America", id: "2" },
+    { label: "North America", value: "1" },
+    { label: "South America", value: "2" },
     { divider: true },
-    { label: "Europe", id: "3" },
+    { label: "Europe", value: "3" },
     { divider: true },
-    { label: "Asia", id: "4" },
+    { label: "Asia", value: "4" },
   ],
 };
 Divider.parameters = {
@@ -198,12 +198,12 @@ export const OptionSettings = DefaultTemplate.bind({});
 OptionSettings.args = {
   multiple: true,
   options: [
-    { label: "New York", id: "1", disabled: true },
-    { label: "Kyiv", id: "2", disabled: true },
-    { label: "Los Angeles", id: "3", isHidden: true },
+    { label: "New York", value: "1", disabled: true },
+    { label: "Kyiv", value: "2", disabled: true },
+    { label: "Los Angeles", value: "3", isHidden: true },
     {
       label: "Chicago",
-      id: "4",
+      value: "4",
       onClick: (option: Option) =>
         alert("onClick function for the third option: " + JSON.stringify(option)),
     },
@@ -244,7 +244,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -252,7 +252,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -260,7 +260,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -268,7 +268,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -287,7 +287,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -295,7 +295,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -303,7 +303,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -311,7 +311,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -341,7 +341,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -349,7 +349,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -357,7 +357,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -365,7 +365,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

package/ui.form-listbox/tests/UListbox.test.ts

@@ -9,9 +9,9 @@ import type { Props } from "../types";
 
 describe("UListbox.vue", () => {
   const defaultOptions = [
-    { label: "Option 1", id: "option1" },
-    { label: "Option 2", id: "option2" },
-    { label: "Option 3", id: "option3" },
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
   ];
 
   const highlightedClass = "bg-primary/5";
@@ -140,10 +140,10 @@ describe("UListbox.vue", () => {
 
       await options[1].trigger("click");
 
-      expect(component.emitted("update:modelValue")![0][0]).toEqual([defaultOptions[0].id]);
+      expect(component.emitted("update:modelValue")![0][0]).toEqual([defaultOptions[0].value]);
       expect(component.emitted("update:modelValue")![1][0]).toEqual([
-        defaultOptions[0].id,
-        defaultOptions[1].id,
+        defaultOptions[0].value,
+        defaultOptions[1].value,
       ]);
     });
 

package/ui.form-radio-group/URadioGroup.vue

@@ -86,8 +86,8 @@ const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Confi
           v-for="(option, index) in options"
           :key="index"
           :model-value="selectedItem"
-          :value="option.value"
-          :label="option.label"
+          :value="option[valueKey]"
+          :label="String(option[labelKey] || undefined)"
           :description="option.description"
           :disabled="disabled"
           v-bind="groupRadioAttrs"

package/ui.form-radio-group/config.ts

@@ -14,6 +14,8 @@ export default /*tw*/ {
   defaults: {
     color: "primary",
     size: "md",
+    labelKey: "label",
+    valueKey: "value",
     disabled: false,
   },
 };

package/ui.form-radio-group/storybook/stories.ts

@@ -8,10 +8,11 @@ import {
 
 import URadioGroup from "../../ui.form-radio-group/URadioGroup.vue";
 import URadio from "../../ui.form-radio/URadio.vue";
+import UAlert from "../../ui.text-alert/UAlert.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UText from "../../ui.text-block/UText.vue";
-import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -28,9 +29,9 @@ export default {
   args: {
     label: "Select your preferred delivery option:",
     options: [
-      { value: "standard", label: "Standard Shipping (3-5 business days)" },
-      { value: "express", label: "Express Shipping (1-2 business days)" },
-      { value: "pickup", label: "In-Store Pickup (Available same day)" },
+      { id: "standard", label: "Standard Shipping (3-5 business days)" },
+      { id: "express", label: "Express Shipping (1-2 business days)" },
+      { id: "pickup", label: "In-Store Pickup (Available same day)" },
     ],
   },
   argTypes: {
@@ -54,16 +55,17 @@ const DefaultTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
 });
 
 const EnumTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs, { argTypes }) => ({
-  components: { URadioGroup, UCol },
+  components: { URadioGroup, URow },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UCol>
+    <URow>
       <URadioGroup
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        :name="option"
       />
-    </UCol>
+    </URow>
   `,
 });
 
@@ -125,8 +127,46 @@ LabelSlot.args = {
   name: "LabelSlot",
   slotTemplate: `
     <template #label="{ label }">
-      <span class="text-red-500">*</span>
       {{ label }}
+      <span class="text-red-500">*</span>
     </template>
   `,
 };
+
+export const CustomKeys: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
+  components: { URadioGroup, UCol, UAlert },
+  setup: () => ({ args }),
+  template: `
+    <UCol>
+      <URadioGroup v-bind="args" v-model="args.modelValue" />
+
+      <UAlert
+        :description="args.modelValue"
+        size="sm"
+        variant="soft"
+        color="success"
+        bordered
+      />
+    </UCol>
+  `,
+});
+CustomKeys.args = {
+  name: "CustomKeys",
+  label: "Select your subscription plan:",
+  labelKey: "title",
+  valueKey: "id",
+  options: [
+    { id: "basic", title: "Basic Plan - $9.99/month" },
+    { id: "pro", title: "Pro Plan - $19.99/month" },
+    { id: "enterprise", title: "Enterprise Plan - $49.99/month" },
+  ],
+};
+CustomKeys.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use `labelKey` and `valueKey` props to specify custom keys for label and value in option objects. " +
+        "This is useful when working with data from APIs that use different property names.",
+    },
+  },
+};

package/ui.form-radio-group/tests/URadioGroup.test.ts

@@ -194,6 +194,74 @@ describe("URadioGroup.vue", () => {
         expect(radio.attributes("data-test")).toBe(`${dataTestValue}-item-${idx}-label`);
       });
     });
+
+    it("LabelKey – uses custom label key for option labels", () => {
+      const customOptions = [
+        { value: "option-1", name: "Option 1" },
+        { value: "option-2", name: "Option 2" },
+        { value: "option-3", name: "Option 3" },
+      ];
+
+      const component = mount(URadioGroup, {
+        props: {
+          name: defaultName,
+          options: customOptions,
+          labelKey: "name",
+        },
+      });
+
+      const radios = component.findAllComponents(URadio);
+
+      radios.forEach((radio, index) => {
+        expect(radio.props("label")).toBe(customOptions[index].name);
+      });
+    });
+
+    it("ValueKey – uses custom value key for option values", () => {
+      const customOptions = [
+        { id: "option-1", label: "Option 1" },
+        { id: "option-2", label: "Option 2" },
+        { id: "option-3", label: "Option 3" },
+      ];
+
+      const component = mount(URadioGroup, {
+        props: {
+          name: defaultName,
+          options: customOptions,
+          valueKey: "id",
+        },
+      });
+
+      const radios = component.findAllComponents(URadio);
+
+      radios.forEach((radio, index) => {
+        expect(radio.props("value")).toBe(customOptions[index].id);
+      });
+    });
+
+    it("LabelKey and ValueKey – works with complex objects", async () => {
+      const customOptions = [
+        { planId: "basic", title: "Basic Plan" },
+        { planId: "pro", title: "Pro Plan" },
+      ];
+
+      const component = mount(URadioGroup, {
+        props: {
+          name: defaultName,
+          options: customOptions,
+          labelKey: "title",
+          valueKey: "planId",
+          modelValue: "",
+        },
+      });
+
+      const radios = component.findAllComponents(URadio);
+
+      expect(radios[0].props("label")).toBe("Basic Plan");
+      expect(radios[0].props("value")).toBe("basic");
+      expect(radios[1].props("label")).toBe("Pro Plan");
+      expect(radios[1].props("value")).toBe("pro");
+    });
   });
 
   describe("Slots", () => {

package/ui.form-radio-group/types.ts

@@ -4,12 +4,16 @@ import type { UnknownObject, UnknownArray, ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface URadioGroupOption {
-  value: string | number | boolean | UnknownArray | UnknownObject;
-  label: string;
+export interface BaseOption {
+  value?: string | number | boolean | UnknownArray | UnknownObject;
+  label?: string;
   description?: string;
 }
 
+export interface Option extends BaseOption {
+  [key: string]: string | number | boolean | UnknownArray | UnknownObject | undefined;
+}
+
 export type SetRadioGroupSelectedItem =
   | ((value: string | number | boolean | UnknownArray | UnknownObject) => void)
   | null;
@@ -23,7 +27,17 @@ export interface Props {
   /**
    * Radio group options.
    */
-  options?: URadioGroupOption[];
+  options?: Option[];
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey?: string;
 
   /**
    * Radio group label.

package/ui.form-select/config.ts

@@ -138,7 +138,7 @@ export default /*tw*/ {
     size: "md",
     labelAlign: "topInside",
     openDirection: "auto",
-    valueKey: "id",
+    valueKey: "value",
     labelKey: "label",
     groupLabelKey: "label",
     multipleVariant: "inline",

package/ui.form-select/tests/USelect.test.ts

@@ -11,9 +11,9 @@ import type { Props } from "../types";
 
 describe("USelect.vue", () => {
   const defaultOptions = [
-    { label: "Option 1", id: "option1" },
-    { label: "Option 2", id: "option2" },
-    { label: "Option 3", id: "option3" },
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
   ];
 
   describe("Props", () => {

package/icons/storybook/notifications.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-194.02v-68.13h77.85v-298.02q0-86.08 50.34-154.77 50.33-68.69 133.72-86.41v-20.56q0-26.8 18.69-45.55 18.69-18.76 45.38-18.76t45.38 18.76q18.69 18.75 18.69 45.55v20.56q83.39 17.48 133.84 86.25 50.46 68.77 50.46 154.93v298.02h77.85v68.13h-652.2ZM480-501.04Zm.12 429.17q-33.83 0-57.93-24.13t-24.1-58.02h164.06q0 33.95-24.15 58.05-24.15 24.1-57.88 24.1ZM300-262.15h360v-298.02q0-74.76-52.5-127.38Q555-740.17 480-740.17t-127.5 52.62Q300-634.93 300-560.17v298.02Z"/></svg>