Cu 86eunvbgj implement the input group component navid shad

.cursor/rules/Storybook-development-guidelines.mdc

@@ -132,6 +132,42 @@ alwaysApply: false
   };
   ```
 
+- **Args-to-Props Consistency**: All story args must be passed to the rendered component via props. Never hardcode props in templates when they should come from args:
+  - ✅ **Correct**: Use `v-bind="args"` to pass all args as props
+  ```typescript
+  template: `
+    <ComponentName v-bind="args" />
+  `
+  ```
+  - ❌ **Incorrect**: Hardcoding props that should come from args
+  ```typescript
+  template: `
+    <ComponentName 
+      :label="'Hardcoded Label'" 
+      :placeholder="'Hardcoded Placeholder'"
+    />
+  `
+  ```
+  - ✅ **Correct**: When overriding specific props, still use `v-bind="args"` first, then override:
+  ```typescript
+  template: `
+    <ComponentName 
+      v-bind="args"
+      :model-value="reactiveValue"
+      @update:model-value="handleChange"
+    />
+  `
+  ```
+  - **Story Args**: All component props should be controllable through story args. Define props in the story's `args` object rather than hardcoding them in templates:
+  ```typescript
+  args: {
+    label: "Custom Label",
+    placeholder: "Custom Placeholder",
+    options: ["Option 1", "Option 2"]
+  }
+  ```
+  - **Verification**: Ensure that when users modify controls in Storybook, those changes are reflected in the rendered component through the args binding.
+
 ### 4. ArgTypes & Controls Configuration
 
 - **ArgTypes Definition**: Define comprehensive argTypes for all props:
@@ -413,6 +449,7 @@ Note: Avoid embedding code in this section; Storybook auto-generates usage code.
 
 - **Story Creation**: Automatically create comprehensive stories for new components with proper structure, argTypes, and documentation.
 - **Pattern Consistency**: Follow established patterns from existing stories in the project.
+- **Args-to-Props Matching**: Always ensure story args are passed to rendered components via `v-bind="args"`. Never hardcode props in templates that should come from story args. All component props must be controllable through Storybook controls.
 - **TypeScript Integration**: Ensure proper TypeScript typing for all stories and meta configurations.
 - **Theme Integration**: Leverage global theme controls and main decorator for consistent theming.
 - **Documentation Quality**: Include comprehensive component documentation with usage examples.

src/elements/Button.vue

@@ -24,7 +24,9 @@
             computedFocusColor,
             computedHoverNeutralizeClasses,
             // Handle disabled styling when in InputGroup
-            (isInInputGroup && context && context.disabled) ||
+            (isInInputGroup &&
+              context &&
+              (disabled !== undefined ? disabled : context.disabled)) ||
             disabled ||
             cardDisabled
               ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200 dark:bg-gray-800 dark:border-gray-700'
@@ -51,7 +53,11 @@
             props.chip ? 'is-chip' : undefined,
           ],
     ]"
-    :disabled="disabled || cardDisabled || isLoading ? true : undefined"
+    :disabled="
+      isInInputGroup && context
+        ? (disabled !== undefined ? disabled : context.disabled) || isLoading
+        : disabled || cardDisabled || isLoading
+    "
     @focus="handleFocusEvent"
     @blur="handleBlurEvent"
   >

src/form/Input.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-1">
+  <div :class="['flex flex-col gap-1', isInInputGroup ? 'flex-1' : 'w-full']">
     <label
       v-if="label && !isInInputGroup"
       :for="id"
@@ -21,6 +21,7 @@
       />
       <input
         :class="[
+          'w-full',
           iconName && actualIconPosition === 'left' ? 'pl-10' : '',
           iconName && actualIconPosition === 'right' ? 'pr-10' : '',
           // base classes - only apply form-input when NOT in InputGroup
@@ -33,13 +34,15 @@
           isInInputGroup
             ? [
                 ...inputGroupClasses,
-                'flex-1',
+
                 'h-10',
                 'focus:ring-2 focus:ring-primary/20 focus:border-primary',
                 // Ensure error state is applied even in InputGroup
                 effectiveError ? '!border-red-500' : '',
                 // Handle disabled styling when in InputGroup
-                (isInInputGroup && context && context.disabled) ||
+                (isInInputGroup &&
+                  context &&
+                  (disabled !== undefined ? disabled : context.disabled)) ||
                 disabled ||
                 cardDisabled
                   ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-200 dark:bg-gray-800 dark:border-gray-700'
@@ -58,7 +61,9 @@
         :placeholder="placeholder"
         :disabled="
           isInInputGroup && context
-            ? context.disabled
+            ? disabled !== undefined
+              ? disabled
+              : context.disabled
             : disabled || cardDisabled
         "
         :required="required"
@@ -113,7 +118,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   modelValue: "",
   type: "text",
   placeholder: "",
-  disabled: false,
+  disabled: undefined,
   required: false,
   error: false,
   errorMessage: "",

src/form/InputGroup.vue

@@ -18,9 +18,9 @@
             'data-input-group-total': children.length,
             'data-input-group-remove-right-border': index < children.length - 1,
             'data-input-group-index': index,
-            // Pass error and disabled state to children for styling
+            // Pass error state to children for styling
             error: props.error,
-            disabled: props.disabled,
+            // Don't pass disabled directly - let children handle priority
           }"
           :class="getChildBorderClasses(index)"
           @focus="handleChildFocus(index)"