vueless 1.2.15-beta.8 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.15-beta.8",
+  "version": "1.3.0",
   "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.dropdown-badge/storybook/stories.ts

@@ -283,9 +283,9 @@ DefaultSlot.args = {
   round: true,
   toggleIcon: false,
   options: [
-    { label: "Change avatar", id: "avatar" },
-    { label: "Profile settings", id: "settings" },
-    { label: "Delete profile", id: "delete" },
+    { label: "Change avatar", value: "avatar" },
+    { label: "Profile settings", value: "settings" },
+    { label: "Delete profile", value: "delete" },
   ],
   slotTemplate: `
     <template #default>
@@ -345,7 +345,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -353,7 +353,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -361,7 +361,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -369,7 +369,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -388,7 +388,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -396,7 +396,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -404,7 +404,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -412,7 +412,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -442,7 +442,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -450,7 +450,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -458,7 +458,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -466,7 +466,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownBadgeArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

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

@@ -185,9 +185,9 @@ export const NoCloseOnSelect = SelectableTemplate.bind({});
 NoCloseOnSelect.args = {
   modelValue: "pending",
   options: [
-    { label: "Active", id: "active" },
-    { label: "Pending", id: "pending" },
-    { label: "Archived", id: "archived" },
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
   ],
   closeOnSelect: false,
 };
@@ -197,9 +197,9 @@ OptionSelection.args = {
   label: "Select status",
   modelValue: "active",
   options: [
-    { label: "Active", id: "active" },
-    { label: "Pending", id: "pending" },
-    { label: "Archived", id: "archived" },
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
   ],
 };
 
@@ -209,9 +209,9 @@ MultipleOptionSelection.args = {
   modelValue: ["active", "pending", "archived"],
   multiple: true,
   options: [
-    { label: "Active", id: "active" },
-    { label: "Pending", id: "pending" },
-    { label: "Archived", id: "archived" },
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Archived", value: "archived" },
   ],
 };
 
@@ -303,9 +303,9 @@ DefaultSlot.args = {
   toggleIcon: false,
   square: true,
   options: [
-    { label: "Change avatar", id: "avatar" },
-    { label: "Profile settings", id: "settings" },
-    { label: "Delete profile", id: "delete" },
+    { label: "Change avatar", value: "avatar" },
+    { label: "Profile settings", value: "settings" },
+    { label: "Delete profile", value: "delete" },
   ],
   slotTemplate: `
     <template #default>
@@ -408,7 +408,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -416,7 +416,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -424,7 +424,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -432,7 +432,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -462,7 +462,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -470,7 +470,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -478,7 +478,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -486,7 +486,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownButtonArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

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

@@ -331,7 +331,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -339,7 +339,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -347,7 +347,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -355,7 +355,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -374,7 +374,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -382,7 +382,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -390,7 +390,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -398,7 +398,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -428,7 +428,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -436,7 +436,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -444,7 +444,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -452,7 +452,7 @@ export const OptionSlots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',

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", id: "email" },
-      { label: "SMS Alerts", id: "sms" },
-      { label: "Push Notifications", id: "push" },
+      { label: "Email Notifications", value: "email" },
+      { label: "SMS Alerts", value: "sms" },
+      { label: "Push Notifications", value: "push" },
     ],
   },
   argTypes: {
@@ -121,7 +121,7 @@ Options.args = {
     { label: "String", value: "Subscribed" },
     { label: "Number", value: 42 },
     { label: "Boolean", value: true },
-    { label: "Object", value: { id: 101, status: "active" } },
+    { label: "Object", value: { value: 101, status: "active" } },
     { label: "Array", value: ["Admin", "Editor"] },
   ],
 };

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "flex items-center gap-2",
+  wrapper: "flex items-center gap-2 w-fit",
   counterText: {
     variants: {
       size: {

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

@@ -29,9 +29,9 @@ export default {
   args: {
     label: "Select your preferred delivery option:",
     options: [
-      { 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)" },
+      { 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)" },
     ],
   },
   argTypes: {
@@ -103,7 +103,7 @@ Options.args = {
     { label: "String", value: "Subscribed" },
     { label: "Number", value: 42 },
     { label: "Boolean", value: true },
-    { label: "Object", value: { id: 101, status: "active" } },
+    { label: "Object", value: { value: 101, status: "active" } },
     { label: "Array", value: ["Admin", "Editor"] },
   ],
 };

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

@@ -39,11 +39,11 @@ export default {
     label: "Choose a city",
     modelValue: null,
     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: {
@@ -181,7 +181,7 @@ Sizes.args = { enum: "size", multiple: true, modelValue: [], label: "{enumValue}
 export const LargeItemList = DefaultTemplate.bind({});
 LargeItemList.args = {
   options: [...new Array(1000)].map((_, index) => {
-    return { id: index + 1, label: `value ${index + 1}`, badge: "badge" };
+    return { value: index + 1, label: `value ${index + 1}`, badge: "badge" };
   }),
 };
 
@@ -272,16 +272,16 @@ AddOption.parameters = {
 export const OptionSettings = DefaultTemplate.bind({});
 OptionSettings.args = {
   options: [
-    { label: "1. New York", id: "1" },
-    { label: "2. Los Angeles", id: "2", isHidden: true },
+    { label: "1. New York", value: "1" },
+    { label: "2. Los Angeles", value: "2", isHvalueden: true },
     {
       label: "3. Chicago",
-      id: "3",
+      value: "3",
       onClick: (option) =>
         alert("onClick function for the third option: " + JSON.stringify(option)),
     },
-    { label: "4. Houston", id: "4" },
-    { label: "5. San Francisco", id: "5" },
+    { label: "4. Houston", value: "4" },
+    { label: "5. San Francisco", value: "5" },
   ],
 };
 OptionSettings.parameters = {
@@ -298,17 +298,17 @@ 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" },
+      { label: "Awesome", value: "1" },
+      { label: "Good", value: "2" },
+      { label: "Could be better", value: "3" },
+      { label: "Terrible", value: "4" },
     ];
 
     const roleOptions = [
-      { label: "Admin", id: "1" },
-      { label: "CEO", id: "2" },
-      { label: "Manager", id: "3" },
-      { label: "Guest", id: "4" },
+      { label: "Admin", value: "1" },
+      { label: "CEO", value: "2" },
+      { label: "Manager", value: "3" },
+      { label: "Guest", value: "4" },
     ];
 
     return { args, levelOptions, roleOptions };
@@ -342,10 +342,10 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
         v-model="leftSlotModel"
         label="Select Payment Method"
         :options="[
-          { label: 'Visa', id: 'visa', icon: 'credit_card', details: '•••• 4242' },
-          { label: 'PayPal', id: 'paypal', icon: 'payments', details: 'user@example.com' },
-          { label: 'Bank Transfer', id: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
-          { label: 'Apple Pay', id: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
+          { label: 'Visa', value: 'visa', icon: 'credit_card', details: '•••• 4242' },
+          { label: 'PayPal', value: 'paypal', icon: 'payments', details: 'user@example.com' },
+          { label: 'Bank Transfer', value: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
+          { label: 'Apple Pay', value: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
         ]"
       >
         <template #left="{ options }">
@@ -362,10 +362,10 @@ export const Slots: StoryFn<USelectArgs> = (args) => ({
         v-model="rightSlotModel"
         label="Select Payment Method"
         :options="[
-          { label: 'Visa', id: 'visa', icon: 'credit_card', details: '•••• 4242' },
-          { label: 'PayPal', id: 'paypal', icon: 'payments', details: 'user@example.com' },
-          { label: 'Bank Transfer', id: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
-          { label: 'Apple Pay', id: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
+          { label: 'Visa', value: 'visa', icon: 'credit_card', details: '•••• 4242' },
+          { label: 'PayPal', value: 'paypal', icon: 'payments', details: 'user@example.com' },
+          { label: 'Bank Transfer', value: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
+          { label: 'Apple Pay', value: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
         ]"
       >
         <template #right="{ options }">
@@ -398,9 +398,9 @@ export const ToggleSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="beforeToggleModel"
         label="Before Toggle Slot"
         :options="[
-          { label: 'John Doe', id: '1' },
-          { label: 'Jane Smith', id: '2' },
-          { label: 'Mike Johnson', id: '3' },
+          { label: 'John Doe', value: '1' },
+          { label: 'Jane Smith', value: '2' },
+          { label: 'Mike Johnson', value: '3' },
         ]"
       >
         <template #before-toggle>
@@ -416,9 +416,9 @@ export const ToggleSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="toggleModel"
         label="Toggle Slot"
         :options="[
-          { label: 'High', id: 'high' },
-          { label: 'Medium', id: 'medium' },
-          { label: 'Low', id: 'low' }
+          { label: 'High', value: 'high' },
+          { label: 'Medium', value: 'medium' },
+          { label: 'Low', value: 'low' }
         ]"
       >
         <template #toggle="{ opened }">
@@ -435,9 +435,9 @@ export const ToggleSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="afterToggleModel"
         label="After Toggle Slot"
         :options="[
-          { label: 'In Progress', id: 'in_progress' },
-          { label: 'Done', id: 'done' },
-          { label: 'Blocked', id: 'blocked' }
+          { label: 'In Progress', value: 'in_progress' },
+          { label: 'Done', value: 'done' },
+          { label: 'Blocked', value: 'blocked' }
         ]"
       >
         <template #after-toggle>
@@ -470,10 +470,10 @@ export const SelectedOptionsSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="args.selectedOption"
         label="Selected option slot"
         :options="[
-          { label: 'Paris', id: '1', icon: 'flight' },
-          { label: 'Venice', id: '2', icon: 'sailing' },
-          { label: 'Rome', id: '3', icon: 'directions_car' },
-          { label: 'Milan', id: '4', icon: 'directions_bike' },
+          { label: 'Paris', value: '1', icon: 'flight' },
+          { label: 'Venice', value: '2', icon: 'sailing' },
+          { label: 'Rome', value: '3', icon: 'directions_car' },
+          { label: 'Milan', value: '4', icon: 'directions_bike' },
         ]"
       >
         <template #selected-option="{ option }">
@@ -492,10 +492,10 @@ export const SelectedOptionsSlots: StoryFn<USelectArgs> = (args) => ({
         v-model="args.selectedOptions"
         label="Selected options slot"
         :options="[
-          { label: 'Paris', id: '1', icon: 'flight' },
-          { label: 'Venice', id: '2', icon: 'sailing' },
-          { label: 'Rome', id: '3', icon: 'directions_car' },
-          { label: 'Milan', id: '4', icon: 'directions_bike' },
+          { label: 'Paris', value: '1', icon: 'flight' },
+          { label: 'Venice', value: '2', icon: 'sailing' },
+          { label: 'Rome', value: '3', icon: 'directions_car' },
+          { label: 'Milan', value: '4', icon: 'directions_bike' },
         ]"
         multiple
       >
@@ -568,7 +568,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -576,7 +576,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -584,7 +584,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -592,7 +592,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -611,7 +611,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -619,7 +619,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -627,7 +627,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -635,7 +635,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -665,7 +665,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -673,7 +673,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -681,7 +681,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -689,7 +689,7 @@ export const OptionSlots: StoryFn<USelectArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',