key-value

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