@docyrus/shadcn 1.0.0 → 1.2.0

package/dist/radix-vega/key-value.js

@@ -0,0 +1,765 @@
+import { Slot } from '@radix-ui/react-slot';
+import { XIcon, PlusIcon } from 'lucide-react';
+import * as React6 from 'react';
+import { cva } from 'class-variance-authority';
+import { Slot as Slot$1 } from 'radix-ui';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as ReactDOM from 'react-dom';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot$1.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React6.useCallback(composeRefs(...refs), refs);
+}
+var VisuallyHiddenInput = React6.forwardRef(({ className, control, ...props }, ref) => {
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      className: cn(
+        "absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0",
+        "[clip:rect(0,0,0,0)]",
+        className
+      ),
+      ...props
+    }
+  );
+  if (control) {
+    return ReactDOM.createPortal(input, control);
+  }
+  return input;
+});
+VisuallyHiddenInput.displayName = "VisuallyHiddenInput";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React6.useLayoutEffect : React6.useEffect;
+
+// src/hooks/use-as-ref.ts
+function useAsRef(props) {
+  const ref = React6.useRef(props);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+  return ref;
+}
+function useLazyRef(fn) {
+  const ref = React6.useRef(null);
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+  return ref;
+}
+var ROOT_NAME = "KeyValue";
+var LIST_NAME = "KeyValueList";
+var ITEM_NAME = "KeyValueItem";
+var KEY_INPUT_NAME = "KeyValueKeyInput";
+var VALUE_INPUT_NAME = "KeyValueValueInput";
+var REMOVE_NAME = "KeyValueRemove";
+var ADD_NAME = "KeyValueAdd";
+var ERROR_NAME = "KeyValueError";
+function getErrorId(rootId, itemId, field) {
+  return `${rootId}-${itemId}-${field}-error`;
+}
+function removeQuotes(string, shouldStrip) {
+  if (!shouldStrip) return string;
+  const trimmed = string.trim();
+  if (trimmed.startsWith('"') && trimmed.endsWith('"') || trimmed.startsWith("'") && trimmed.endsWith("'")) {
+    return trimmed.slice(1, -1);
+  }
+  return trimmed;
+}
+function useStore(selector, ogStore) {
+  const contextStore = React6.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React6.useCallback(
+    () => selector(store.getState()),
+    [store, selector]
+  );
+  return React6.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+var StoreContext = React6.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React6.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+var KeyValueContext = React6.createContext(null);
+function useKeyValueContext(consumerName) {
+  const context = React6.useContext(KeyValueContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function KeyValue(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onPaste,
+    onAdd,
+    onRemove,
+    onKeyValidate,
+    onValueValidate,
+    maxItems,
+    minItems = 0,
+    keyPlaceholder = "Key",
+    valuePlaceholder = "Value",
+    allowDuplicateKeys = false,
+    asChild,
+    enablePaste = true,
+    trim = true,
+    stripQuotes = true,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    className,
+    id,
+    name,
+    ref,
+    ...rootProps
+  } = props;
+  const instanceId = React6.useId();
+  const rootId = id ?? instanceId;
+  const [formTrigger, setFormTrigger] = React6.useState(
+    null
+  );
+  const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+  const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    value: valueProp ?? defaultValue ?? [{ id: crypto.randomUUID(), key: "", value: "" }],
+    focusedId: null,
+    errors: {}
+  }));
+  const propsRef = useAsRef({ onValueChange });
+  const store = React6.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, val) => {
+        if (Object.is(stateRef.current[key], val)) return;
+        if (key === "value" && Array.isArray(val)) {
+          stateRef.current.value = val;
+          propsRef.current.onValueChange?.(val);
+        } else {
+          stateRef.current[key] = val;
+        }
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef, propsRef]);
+  const value = useStore((state) => state.value, store);
+  const errors = useStore((state) => state.errors, store);
+  const isInvalid = Object.keys(errors).length > 0;
+  useIsomorphicLayoutEffect(() => {
+    if (valueProp !== void 0) {
+      store.setState("value", valueProp);
+    }
+  }, [valueProp]);
+  const contextValue = React6.useMemo(
+    () => ({
+      onPaste,
+      onAdd,
+      onRemove,
+      onKeyValidate,
+      onValueValidate,
+      rootId,
+      maxItems,
+      minItems,
+      keyPlaceholder,
+      valuePlaceholder,
+      allowDuplicateKeys,
+      enablePaste,
+      trim,
+      stripQuotes,
+      disabled,
+      readOnly,
+      required
+    }),
+    [
+      onPaste,
+      onAdd,
+      onRemove,
+      onKeyValidate,
+      onValueValidate,
+      rootId,
+      disabled,
+      readOnly,
+      required,
+      maxItems,
+      minItems,
+      keyPlaceholder,
+      valuePlaceholder,
+      allowDuplicateKeys,
+      enablePaste,
+      trim,
+      stripQuotes
+    ]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxs(KeyValueContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(
+      RootPrimitive,
+      {
+        id,
+        "data-slot": "key-value",
+        "data-disabled": disabled ? "" : void 0,
+        "data-invalid": isInvalid ? "" : void 0,
+        "data-readonly": readOnly ? "" : void 0,
+        ...rootProps,
+        ref: composedRef,
+        className: cn("flex flex-col gap-2", className)
+      }
+    ),
+    isFormControl && /* @__PURE__ */ jsx(
+      VisuallyHiddenInput,
+      {
+        type: "hidden",
+        control: formTrigger,
+        name,
+        value: JSON.stringify(value),
+        disabled,
+        readOnly,
+        required
+      }
+    )
+  ] }) });
+}
+function KeyValueList(props) {
+  const { orientation = "vertical", asChild, className, ...listProps } = props;
+  const value = useStore((state) => state.value);
+  const ListPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ListPrimitive,
+    {
+      role: "list",
+      "aria-orientation": orientation,
+      "data-slot": "key-value-list",
+      "data-orientation": orientation,
+      ...listProps,
+      className: cn(
+        "flex",
+        orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-2",
+        className
+      ),
+      children: value.map((item) => {
+        const children = React6.Children.toArray(props.children);
+        return /* @__PURE__ */ jsx(KeyValueItemContext.Provider, { value: item, children }, item.id);
+      })
+    }
+  );
+}
+var KeyValueItemContext = React6.createContext(null);
+function useKeyValueItemContext(consumerName) {
+  const context = React6.useContext(KeyValueItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${LIST_NAME}\``);
+  }
+  return context;
+}
+function KeyValueItem(props) {
+  const { asChild, className, ...itemProps } = props;
+  const itemData = useKeyValueItemContext(ITEM_NAME);
+  const focusedId = useStore((state) => state.focusedId);
+  const ItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ItemPrimitive,
+    {
+      role: "listitem",
+      "data-slot": "key-value-item",
+      "data-highlighted": focusedId === itemData.id ? "" : void 0,
+      ...itemProps,
+      className: cn("flex items-start gap-2", className)
+    }
+  );
+}
+function KeyValueKeyInput(props) {
+  const {
+    onChange: onChangeProp,
+    onPaste: onPasteProp,
+    asChild,
+    disabled,
+    readOnly,
+    required,
+    ...keyInputProps
+  } = props;
+  const context = useKeyValueContext(KEY_INPUT_NAME);
+  const itemData = useKeyValueItemContext(KEY_INPUT_NAME);
+  const store = useStoreContext(KEY_INPUT_NAME);
+  const errors = useStore((state) => state.errors);
+  const propsRef = useAsRef({
+    onChange: onChangeProp,
+    onPaste: onPasteProp
+  });
+  const isDisabled = disabled || context.disabled;
+  const isReadOnly = readOnly || context.readOnly;
+  const isRequired = required || context.required;
+  const isInvalid = errors[itemData.id]?.key !== void 0;
+  const onChange = React6.useCallback(
+    (event) => {
+      const state = store.getState();
+      const newValue = state.value.map((item) => {
+        if (item.id !== itemData.id) return item;
+        const updated = { ...item, key: event.target.value };
+        if (context.trim) updated.key = updated.key.trim();
+        return updated;
+      });
+      store.setState("value", newValue);
+      const updatedItemData = newValue.find((item) => item.id === itemData.id);
+      if (updatedItemData) {
+        const errors2 = {};
+        if (context.onKeyValidate) {
+          const keyError = context.onKeyValidate(updatedItemData.key, newValue);
+          if (keyError) errors2.key = keyError;
+        }
+        if (!context.allowDuplicateKeys) {
+          const duplicateKey = newValue.find(
+            (item) => item.id !== updatedItemData.id && item.key === updatedItemData.key && updatedItemData.key !== ""
+          );
+          if (duplicateKey) {
+            errors2.key = "Duplicate key";
+          }
+        }
+        if (context.onValueValidate) {
+          const valueError = context.onValueValidate(
+            updatedItemData.value,
+            updatedItemData.key,
+            newValue
+          );
+          if (valueError) errors2.value = valueError;
+        }
+        const newErrorsState = { ...state.errors };
+        if (Object.keys(errors2).length > 0) {
+          newErrorsState[itemData.id] = errors2;
+        } else {
+          delete newErrorsState[itemData.id];
+        }
+        store.setState("errors", newErrorsState);
+      }
+      propsRef.current.onChange?.(event);
+    },
+    [store, itemData.id, context, propsRef]
+  );
+  const onPaste = React6.useCallback(
+    (event) => {
+      if (!context.enablePaste) return;
+      propsRef.current.onPaste?.(event);
+      if (event.defaultPrevented) return;
+      const content = event.clipboardData.getData("text");
+      const lines = content.split(/\r?\n/).filter((line) => line.trim());
+      if (lines.length > 1) {
+        event.preventDefault();
+        const parsed = [];
+        for (const line of lines) {
+          let key = "";
+          let value = "";
+          if (line.includes("=")) {
+            const parts = line.split("=");
+            key = parts[0]?.trim() ?? "";
+            value = removeQuotes(
+              parts.slice(1).join("=").trim(),
+              context.stripQuotes
+            );
+          } else if (line.includes(":")) {
+            const parts = line.split(":");
+            key = parts[0]?.trim() ?? "";
+            value = removeQuotes(
+              parts.slice(1).join(":").trim(),
+              context.stripQuotes
+            );
+          } else if (/\s{2,}|\t/.test(line)) {
+            const parts = line.split(/\s{2,}|\t/);
+            key = parts[0]?.trim() ?? "";
+            value = removeQuotes(
+              parts.slice(1).join(" ").trim(),
+              context.stripQuotes
+            );
+          }
+          if (key) {
+            parsed.push({ id: crypto.randomUUID(), key, value });
+          }
+        }
+        if (parsed.length > 0) {
+          const state = store.getState();
+          const currentIndex = state.value.findIndex(
+            (item) => item.id === itemData.id
+          );
+          let newValue;
+          if (itemData.key === "" && itemData.value === "") {
+            newValue = [
+              ...state.value.slice(0, currentIndex),
+              ...parsed,
+              ...state.value.slice(currentIndex + 1)
+            ];
+          } else {
+            newValue = [
+              ...state.value.slice(0, currentIndex + 1),
+              ...parsed,
+              ...state.value.slice(currentIndex + 1)
+            ];
+          }
+          if (context.maxItems !== void 0) {
+            newValue = newValue.slice(0, context.maxItems);
+          }
+          store.setState("value", newValue);
+          if (context.onPaste) {
+            context.onPaste(
+              event.nativeEvent,
+              parsed
+            );
+          }
+        }
+      }
+    },
+    [context, store, itemData, propsRef]
+  );
+  const KeyInputPrimitive = asChild ? Slot : Input;
+  return /* @__PURE__ */ jsx(
+    KeyInputPrimitive,
+    {
+      "aria-invalid": isInvalid,
+      "aria-describedby": isInvalid ? getErrorId(context.rootId, itemData.id, "key") : void 0,
+      "data-slot": "key-value-key-input",
+      autoCapitalize: "off",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      placeholder: context.keyPlaceholder,
+      ...keyInputProps,
+      value: itemData.key,
+      onChange,
+      onPaste
+    }
+  );
+}
+function KeyValueValueInput(props) {
+  const {
+    onChange: onChangeProp,
+    asChild,
+    disabled,
+    readOnly,
+    required,
+    className,
+    maxRows,
+    style,
+    ...valueInputProps
+  } = props;
+  const context = useKeyValueContext(VALUE_INPUT_NAME);
+  const itemData = useKeyValueItemContext(VALUE_INPUT_NAME);
+  const store = useStoreContext(VALUE_INPUT_NAME);
+  const errors = useStore((state) => state.errors);
+  const propsRef = useAsRef({
+    onChange: onChangeProp
+  });
+  const isDisabled = disabled || context.disabled;
+  const isReadOnly = readOnly || context.readOnly;
+  const isRequired = required || context.required;
+  const isInvalid = errors[itemData.id]?.value !== void 0;
+  const maxHeight = maxRows ? `calc(${maxRows} * 1.5em + 1rem)` : void 0;
+  const onChange = React6.useCallback(
+    (event) => {
+      propsRef.current.onChange?.(event);
+      const state = store.getState();
+      const newValue = state.value.map((item) => {
+        if (item.id !== itemData.id) return item;
+        const updated = { ...item, value: event.target.value };
+        if (context.trim) updated.value = updated.value.trim();
+        return updated;
+      });
+      store.setState("value", newValue);
+      const updatedItemData = newValue.find((item) => item.id === itemData.id);
+      if (updatedItemData) {
+        const errors2 = {};
+        if (context.onKeyValidate) {
+          const keyError = context.onKeyValidate(updatedItemData.key, newValue);
+          if (keyError) errors2.key = keyError;
+        }
+        if (!context.allowDuplicateKeys) {
+          const duplicateKey = newValue.find(
+            (item) => item.id !== updatedItemData.id && item.key === updatedItemData.key && updatedItemData.key !== ""
+          );
+          if (duplicateKey) {
+            errors2.key = "Duplicate key";
+          }
+        }
+        if (context.onValueValidate) {
+          const valueError = context.onValueValidate(
+            updatedItemData.value,
+            updatedItemData.key,
+            newValue
+          );
+          if (valueError) errors2.value = valueError;
+        }
+        const newErrorsState = { ...state.errors };
+        if (Object.keys(errors2).length > 0) {
+          newErrorsState[itemData.id] = errors2;
+        } else {
+          delete newErrorsState[itemData.id];
+        }
+        store.setState("errors", newErrorsState);
+      }
+    },
+    [store, itemData.id, context, propsRef]
+  );
+  const ValueInputPrimitive = asChild ? Slot : Textarea;
+  return /* @__PURE__ */ jsx(
+    ValueInputPrimitive,
+    {
+      "aria-invalid": isInvalid,
+      "aria-describedby": isInvalid ? getErrorId(context.rootId, itemData.id, "value") : void 0,
+      "data-slot": "key-value-value-input",
+      autoCapitalize: "off",
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired,
+      placeholder: context.valuePlaceholder,
+      ...valueInputProps,
+      className: cn(
+        "field-sizing-content min-h-9 resize-none",
+        maxRows && "overflow-y-auto",
+        className
+      ),
+      style: {
+        ...style,
+        ...maxHeight && { maxHeight }
+      },
+      value: itemData.value,
+      onChange
+    }
+  );
+}
+function KeyValueRemove(props) {
+  const { onClick: onClickProp, children, ...removeProps } = props;
+  const context = useKeyValueContext(REMOVE_NAME);
+  const itemData = useKeyValueItemContext(REMOVE_NAME);
+  const store = useStoreContext(REMOVE_NAME);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const value = useStore((state) => state.value);
+  const isDisabled = context.disabled || value.length <= context.minItems;
+  const onClick = React6.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      const state = store.getState();
+      if (state.value.length <= context.minItems) return;
+      const itemToRemove = state.value.find((item) => item.id === itemData.id);
+      if (!itemToRemove) return;
+      const newValue = state.value.filter((item) => item.id !== itemData.id);
+      const newErrors = { ...state.errors };
+      delete newErrors[itemData.id];
+      store.setState("value", newValue);
+      store.setState("errors", newErrors);
+      context.onRemove?.(itemToRemove);
+    },
+    [store, context, itemData.id, propsRef]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "data-slot": "key-value-remove",
+      variant: "outline",
+      size: "icon",
+      disabled: isDisabled,
+      ...removeProps,
+      onClick,
+      children: children ?? /* @__PURE__ */ jsx(XIcon, {})
+    }
+  );
+}
+function KeyValueAdd(props) {
+  const { onClick: onClickProp, children, ...addProps } = props;
+  const context = useKeyValueContext(ADD_NAME);
+  const store = useStoreContext(ADD_NAME);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const value = useStore((state) => state.value);
+  const isDisabled = context.disabled || context.maxItems !== void 0 && value.length >= context.maxItems;
+  const onClick = React6.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      const state = store.getState();
+      if (context.maxItems !== void 0 && state.value.length >= context.maxItems) {
+        return;
+      }
+      const newItem = {
+        id: crypto.randomUUID(),
+        key: "",
+        value: ""
+      };
+      const newValue = [...state.value, newItem];
+      store.setState("value", newValue);
+      store.setState("focusedId", newItem.id);
+      context.onAdd?.(newItem);
+    },
+    [store, context, propsRef]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "data-slot": "key-value-add",
+      variant: "outline",
+      disabled: isDisabled,
+      ...addProps,
+      onClick,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PlusIcon, {}),
+        "Add"
+      ] })
+    }
+  );
+}
+function KeyValueError(props) {
+  const { field, asChild, className, ...errorProps } = props;
+  const context = useKeyValueContext(ERROR_NAME);
+  const itemData = useKeyValueItemContext(ERROR_NAME);
+  const errors = useStore((state) => state.errors);
+  const error = errors[itemData.id]?.[field];
+  if (!error) return null;
+  const ErrorPrimitive = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    ErrorPrimitive,
+    {
+      id: getErrorId(context.rootId, itemData.id, field),
+      role: "alert",
+      ...errorProps,
+      className: cn("font-medium text-destructive text-sm", className),
+      children: error
+    }
+  );
+}
+
+export { KeyValue, KeyValueAdd, KeyValueError, KeyValueItem, KeyValueKeyInput, KeyValueList, KeyValueRemove, KeyValueValueInput, useStore as useKeyValueStore };
+//# sourceMappingURL=key-value.js.map
+//# sourceMappingURL=key-value.js.map