key-value

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { PlusIcon, XIcon } from "lucide-react";
6import * as React from "react";
7import { cn } from "@/lib/utils";
8import { VisuallyHiddenInput } from "@/registry/bases/base/components/visually-hidden-input";
9import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
10import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
11import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
12import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
13import { Button } from "@/registry/bases/base/ui/button";
14import { Input } from "@/registry/bases/base/ui/input";
15import { Textarea } from "@/registry/bases/base/ui/textarea";
16 
17const ROOT_NAME = "KeyValue";
18const LIST_NAME = "KeyValueList";
19const ITEM_NAME = "KeyValueItem";
20const KEY_INPUT_NAME = "KeyValueKeyInput";
21const VALUE_INPUT_NAME = "KeyValueValueInput";
22const REMOVE_NAME = "KeyValueRemove";
23const ADD_NAME = "KeyValueAdd";
24const ERROR_NAME = "KeyValueError";
25 
26type Orientation = "vertical" | "horizontal";
27type Field = "key" | "value";
28 
29interface DivProps
30  extends React.ComponentProps<"div">,
31    useRender.ComponentProps<"div"> {}
32 
33type RootElement = HTMLDivElement;
34type KeyInputElement = HTMLInputElement;
35type RemoveElement = HTMLButtonElement;
36type AddElement = HTMLButtonElement;
37 
38function getErrorId(rootId: string, itemId: string, field: Field) {
39  return `${rootId}-${itemId}-${field}-error`;
40}
41 
42function removeQuotes(string: string, shouldStrip: boolean): string {
43  if (!shouldStrip) return string;
44 
45  const trimmed = string.trim();
46  if (
47    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
48    (trimmed.startsWith("'") && trimmed.endsWith("'"))
49  ) {
50    return trimmed.slice(1, -1);
51  }
52  return trimmed;
53}
54 
55interface Store {
56  subscribe: (callback: () => void) => () => void;
57  getState: () => KeyValueState;
58  setState: <K extends keyof KeyValueState>(
59    key: K,
60    value: KeyValueState[K],
61  ) => void;
62  notify: () => void;
63}
64 
65function useStore<T>(
66  selector: (state: KeyValueState) => T,
67  ogStore?: Store | null,
68): T {
69  const contextStore = React.useContext(StoreContext);
70 
71  const store = ogStore ?? contextStore;
72 
73  if (!store) {
74    throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
75  }
76 
77  const getSnapshot = React.useCallback(
78    () => selector(store.getState()),
79// … truncated