myoperator-ui 0.0.116 → 0.0.118

package/dist/index.js

@@ -5647,6 +5647,8 @@ export const KeyValueInput = React.forwardRef<
       valuePlaceholder = "Value",
       keyLabel = "Key",
       valueLabel = "Value",
+      keyRequired = true,
+      valueRequired = true,
       value: controlledValue,
       onChange,
       defaultValue = [],
@@ -5662,10 +5664,13 @@ export const KeyValueInput = React.forwardRef<
     const isControlled = controlledValue !== undefined;
     const pairs = isControlled ? controlledValue : internalPairs;
 
-    // Track which keys have been touched for validation
+    // Track which fields have been touched for validation
     const [touchedKeys, setTouchedKeys] = React.useState<Set<string>>(
       new Set()
     );
+    const [touchedValues, setTouchedValues] = React.useState<Set<string>>(
+      new Set()
+    );
 
     const handlePairsChange = React.useCallback(
       (newPairs: KeyValuePair[]) => {
@@ -5719,6 +5724,7 @@ export const KeyValueInput = React.forwardRef<
       handlePairsChange(
         pairs.map((pair) => (pair.id === id ? { ...pair, value } : pair))
       );
+      setTouchedValues((prev) => new Set(prev).add(id));
     };
 
     // Delete row
@@ -5729,6 +5735,11 @@ export const KeyValueInput = React.forwardRef<
         next.delete(id);
         return next;
       });
+      setTouchedValues((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
     };
 
     const isAtLimit = pairs.length >= maxItems;
@@ -5756,12 +5767,13 @@ export const KeyValueInput = React.forwardRef<
               <div className="flex-1">
                 <span className="text-sm font-medium text-[#333333]">
                   {keyLabel}
-                  <span className="text-[#FF3B3B] ml-0.5">*</span>
+                  {keyRequired && <span className="text-[#FF3B3B] ml-0.5">*</span>}
                 </span>
               </div>
               <div className="flex-1">
                 <span className="text-sm font-medium text-[#333333]">
                   {valueLabel}
+                  {valueRequired && <span className="text-[#FF3B3B] ml-0.5">*</span>}
                 </span>
               </div>
               {/* Spacer for delete button column */}
@@ -5776,6 +5788,9 @@ export const KeyValueInput = React.forwardRef<
                   pair={pair}
                   isDuplicateKey={duplicateKeys.has(pair.key.toLowerCase())}
                   isKeyEmpty={touchedKeys.has(pair.id) && !pair.key.trim()}
+                  isValueEmpty={touchedValues.has(pair.id) && !pair.value.trim()}
+                  keyRequired={keyRequired}
+                  valueRequired={valueRequired}
                   keyPlaceholder={keyPlaceholder}
                   valuePlaceholder={valuePlaceholder}
                   onKeyChange={handleKeyChange}
@@ -5834,6 +5849,9 @@ export const KeyValueRow = React.forwardRef<
       pair,
       isDuplicateKey,
       isKeyEmpty,
+      isValueEmpty,
+      keyRequired = true,
+      valueRequired = true,
       keyPlaceholder = "Key",
       valuePlaceholder = "Value",
       onKeyChange,
@@ -5844,15 +5862,9 @@ export const KeyValueRow = React.forwardRef<
     },
     ref
   ) => {
-    // Determine if key input should show error state
-    const keyHasError = isDuplicateKey || isKeyEmpty;
-
-    // Determine error message
-    const errorMessage = isDuplicateKey
-      ? "Duplicate key"
-      : isKeyEmpty
-        ? "Key is required"
-        : null;
+    // Determine if inputs should show error state
+    const keyHasError = isDuplicateKey || (keyRequired && isKeyEmpty);
+    const valueHasError = valueRequired && isValueEmpty;
 
     return (
       <div
@@ -5867,13 +5879,9 @@ export const KeyValueRow = React.forwardRef<
             onChange={(e) => onKeyChange(pair.id, e.target.value)}
             placeholder={keyPlaceholder}
             state={keyHasError ? "error" : "default"}
+            required={keyRequired}
             aria-label="Key"
           />
-          {errorMessage && (
-            <span className="text-xs text-[#FF3B3B] mt-1 block">
-              {errorMessage}
-            </span>
-          )}
         </div>
 
         {/* Value Input */}
@@ -5882,6 +5890,8 @@ export const KeyValueRow = React.forwardRef<
             value={pair.value}
             onChange={(e) => onValueChange(pair.id, e.target.value)}
             placeholder={valuePlaceholder}
+            state={valueHasError ? "error" : "default"}
+            required={valueRequired}
             aria-label="Value"
           />
         </div>
@@ -5940,6 +5950,12 @@ export interface KeyValueInputProps {
   /** Label for value column header (default: "Value") */
   valueLabel?: string
 
+  // Validation
+  /** Whether key field is required (default: true) */
+  keyRequired?: boolean
+  /** Whether value field is required (default: true) */
+  valueRequired?: boolean
+
   // State (controlled mode)
   /** Array of key-value pairs (controlled) */
   value?: KeyValuePair[]
@@ -5965,6 +5981,12 @@ export interface KeyValueRowProps {
   isDuplicateKey: boolean
   /** Whether key is empty (for validation) */
   isKeyEmpty: boolean
+  /** Whether value is empty (for validation) */
+  isValueEmpty: boolean
+  /** Whether key field is required */
+  keyRequired?: boolean
+  /** Whether value field is required */
+  valueRequired?: boolean
   /** Placeholder for key input */
   keyPlaceholder?: string
   /** Placeholder for value input */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.116",
+  "version": "0.0.118",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",