@nergora/ui 0.0.0-stage → 1.0.9

package/dist/esm/components/code-block/code-block.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export type CodeSnippet = {
+    /**
+     * The label of the code snippet's tab.
+     */
+    label: string;
+    /**
+     * The language of the code snippet. For example, `tsx`.
+     */
+    language: string;
+    /**
+     * The code snippet.
+     */
+    code: string;
+    /**
+     * Whether to hide the line numbers shown as the side of the code snippet.
+     */
+    hideLineNumbers?: boolean;
+    /**
+     * Whether to hide the copy button.
+     */
+    hideCopy?: boolean;
+};
+type RootProps = {
+    snippets: CodeSnippet[];
+};
+type HeaderProps = {
+    hideLabels?: boolean;
+};
+declare const CodeBlock: {
+    ({ snippets, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & RootProps): React.JSX.Element;
+    displayName: string;
+} & {
+    Body: {
+        ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ children, className, hideLabels, ...props }: React.HTMLAttributes<HTMLDivElement> & HeaderProps): React.JSX.Element;
+        displayName: string;
+    } & {
+        Meta: {
+            ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+            displayName: string;
+        };
+    };
+    Meta: {
+        ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+        displayName: string;
+    };
+};
+export { CodeBlock };
+//# sourceMappingURL=code-block.d.ts.map

package/dist/esm/components/code-block/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAC7B;AAQD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,WAAW,EAAE,CAAA;CACxB,CAAA;AAgCD,KAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AA+QD,QAAA,MAAM,SAAS;kDApSZ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,SAAS;;;;4CA6IhD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;;;wDA3GpC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG,WAAW;;;;sCAqFlD,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;;;;kCAApC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;;;CA6KsB,CAAA;AAE7D,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/esm/components/code-block/code-block.js

@@ -0,0 +1,172 @@
+"use client";
+import { Highlight, Prism, themes } from "prism-react-renderer";
+import * as React from "react";
+(typeof globalThis !== "undefined" ? globalThis : window).Prism = Prism;
+// @ts-ignore
+import("prismjs/components/prism-json");
+import { Copy } from "../copy/index.js";
+import { clx } from "../../utils/clx.js";
+const CodeBlockContext = React.createContext(null);
+const useCodeBlockContext = () => {
+    const context = React.useContext(CodeBlockContext);
+    if (context === null)
+        throw new Error("useCodeBlockContext can only be used within a CodeBlockContext");
+    return context;
+};
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
+const Root = ({ 
+/**
+ * The code snippets.
+ */
+snippets, className, children, ...props }) => {
+    const [active, setActive] = React.useState(snippets[0]);
+    return (React.createElement(CodeBlockContext.Provider, { value: { snippets, active, setActive } },
+        React.createElement("div", { className: clx("bg-ui-contrast-bg-base shadow-elevation-code-block flex flex-col overflow-hidden rounded-xl", className), ...props }, children)));
+};
+Root.displayName = "CodeBlock";
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
+const HeaderComponent = ({ children, className, 
+/**
+ * Whether to hide the code snippets' labels.
+ */
+hideLabels = false, ...props }) => {
+    const { snippets, active, setActive } = useCodeBlockContext();
+    const tabRefs = React.useRef([]);
+    const tabIndicatorRef = React.useRef(null);
+    React.useEffect(() => {
+        const activeTabRef = tabRefs.current.find((ref) => (ref === null || ref === void 0 ? void 0 : ref.dataset.label) === active.label);
+        if (activeTabRef && tabIndicatorRef.current) {
+            const activeTabIndex = tabRefs.current.indexOf(activeTabRef);
+            const prevTabRef = activeTabIndex > 0 ? tabRefs.current[activeTabIndex - 1] : null;
+            tabIndicatorRef.current.style.width = `${activeTabRef.offsetWidth}px`;
+            tabIndicatorRef.current.style.left = prevTabRef
+                ? `${tabRefs.current
+                    .slice(0, activeTabIndex)
+                    .reduce((total, tab) => total + ((tab === null || tab === void 0 ? void 0 : tab.offsetWidth) || 0) + 12, 0) +
+                    15}px`
+                : "15px";
+        }
+    }, [active]);
+    return (React.createElement("div", null,
+        React.createElement("div", { className: clx("flex items-start px-4 pt-2.5", className), ...props },
+            !hideLabels &&
+                snippets.map((snippet, idx) => (React.createElement("div", { className: clx("text-ui-contrast-fg-secondary txt-compact-small-plus transition-fg relative cursor-pointer pb-[9px] pr-3", {
+                        "text-ui-contrast-fg-primary cursor-default": active.label === snippet.label,
+                    }), key: snippet.label, onClick: () => setActive(snippet) },
+                    React.createElement("span", { ref: (ref) => {
+                            tabRefs.current[idx] = ref;
+                            return undefined;
+                        }, "data-label": snippet.label }, snippet.label)))),
+            children),
+        React.createElement("div", { className: "w-full px-0.5" },
+            React.createElement("div", { className: "bg-ui-contrast-border-top relative h-px w-full" },
+                React.createElement("div", { ref: tabIndicatorRef, className: clx("absolute bottom-0 transition-all motion-reduce:transition-none", "duration-150 ease-linear") },
+                    React.createElement("div", { className: "bg-ui-contrast-fg-primary h-px rounded-full" }))))));
+};
+HeaderComponent.displayName = "CodeBlock.Header";
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
+const Meta = ({ className, ...props }) => {
+    return (React.createElement("div", { className: clx("txt-compact-small text-ui-contrast-fg-secondary ml-auto", className), ...props }));
+};
+Meta.displayName = "CodeBlock.Header.Meta";
+const Header = Object.assign(HeaderComponent, { Meta });
+/**
+ * This component is based on the `div` element and supports all of its props
+ */
+const Body = ({ className, children, ...props }) => {
+    const { active } = useCodeBlockContext();
+    const showToolbar = children || !active.hideCopy;
+    return (React.createElement("div", null,
+        showToolbar && (React.createElement("div", { className: "border-ui-contrast-border-bot flex min-h-10 items-center gap-x-3 border-t px-4 py-2" },
+            React.createElement("div", { className: "code-body text-ui-contrast-fg-secondary flex-1" }, children),
+            !active.hideCopy && (React.createElement(Copy, { content: active.code, className: "text-ui-contrast-fg-secondary" })))),
+        React.createElement("div", { className: "flex h-full flex-col overflow-hidden px-[5px] pb-[5px]" },
+            React.createElement("div", { className: clx("bg-ui-contrast-bg-subtle border-ui-contrast-border-bot relative h-full overflow-y-auto rounded-lg border p-4", className), ...props },
+                React.createElement("div", { className: "max-w-[90%]" },
+                    React.createElement(Highlight, { theme: {
+                            ...themes.palenight,
+                            plain: {
+                                color: "rgba(249, 250, 251, 1)",
+                                backgroundColor: "var(--contrast-fg-primary)",
+                            },
+                            styles: [
+                                ...themes.palenight.styles,
+                                {
+                                    types: ["keyword"],
+                                    style: {
+                                        fontStyle: "normal",
+                                        color: "rgb(187,160,255)",
+                                    },
+                                },
+                                {
+                                    types: ["punctuation", "operator"],
+                                    style: {
+                                        fontStyle: "normal",
+                                        color: "rgb(255,255,255)",
+                                    },
+                                },
+                                {
+                                    types: ["constant", "boolean"],
+                                    style: {
+                                        fontStyle: "normal",
+                                        color: "rgb(187,77,96)",
+                                    },
+                                },
+                                {
+                                    types: ["function"],
+                                    style: {
+                                        fontStyle: "normal",
+                                        color: "rgb(27,198,242)",
+                                    },
+                                },
+                                {
+                                    types: ["number"],
+                                    style: {
+                                        color: "rgb(247,208,25)",
+                                    },
+                                },
+                                {
+                                    types: ["property"],
+                                    style: {
+                                        color: "rgb(247,208,25)",
+                                    },
+                                },
+                                {
+                                    types: ["maybe-class-name"],
+                                    style: {
+                                        color: "rgb(255,203,107)",
+                                    },
+                                },
+                                {
+                                    types: ["string"],
+                                    style: {
+                                        color: "rgb(73,209,110)",
+                                    },
+                                },
+                                {
+                                    types: ["comment"],
+                                    style: {
+                                        color: "var(--contrast-fg-secondary)",
+                                        fontStyle: "normal",
+                                    },
+                                },
+                            ],
+                        }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: clx("code-body whitespace-pre-wrap bg-transparent", {
+                            "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
+                        }), style: {
+                            ...style,
+                            background: "transparent",
+                        } },
+                        !active.hideLineNumbers && (React.createElement("div", { role: "presentation", className: "flex flex-col text-right" }, tokens.map((_, i) => (React.createElement("span", { key: i, className: "text-ui-contrast-fg-secondary tabular-nums" }, i + 1))))),
+                        React.createElement("div", null, tokens.map((line, i) => (React.createElement("div", { key: i, ...getLineProps({ line }) }, line.map((token, key) => (React.createElement("span", { key: key, ...getTokenProps({ token }) })))))))))))))));
+};
+Body.displayName = "CodeBlock.Body";
+const CodeBlock = Object.assign(Root, { Body, Header, Meta });
+export { CodeBlock };
+//# sourceMappingURL=code-block.js.map

package/dist/esm/components/code-block/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, Prism, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n;(typeof globalThis !== \"undefined\" ? globalThis : window).Prism = Prism\n\n// @ts-ignore\nimport(\"prismjs/components/prism-json\")\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n  /**\n   * The label of the code snippet's tab.\n   */\n  label: string\n  /**\n   * The language of the code snippet. For example, `tsx`.\n   */\n  language: string\n  /**\n   * The code snippet.\n   */\n  code: string\n  /**\n   * Whether to hide the line numbers shown as the side of the code snippet.\n   */\n  hideLineNumbers?: boolean\n  /**\n   * Whether to hide the copy button.\n   */\n  hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n  snippets: CodeSnippet[]\n  active: CodeSnippet\n  setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n  const context = React.useContext(CodeBlockContext)\n\n  if (context === null)\n    throw new Error(\n      \"useCodeBlockContext can only be used within a CodeBlockContext\"\n    )\n\n  return context\n}\n\ntype RootProps = {\n  snippets: CodeSnippet[]\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Root = ({\n  /**\n   * The code snippets.\n   */\n  snippets,\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n  const [active, setActive] = React.useState(snippets[0])\n\n  return (\n    <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n      <div\n        className={clx(\n          \"bg-ui-contrast-bg-base shadow-elevation-code-block flex flex-col overflow-hidden rounded-xl\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </CodeBlockContext.Provider>\n  )\n}\nRoot.displayName = \"CodeBlock\"\n\ntype HeaderProps = {\n  hideLabels?: boolean\n}\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst HeaderComponent = ({\n  children,\n  className,\n  /**\n   * Whether to hide the code snippets' labels.\n   */\n  hideLabels = false,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n  const { snippets, active, setActive } = useCodeBlockContext()\n\n  const tabRefs = React.useRef<Array<HTMLSpanElement | null>>([])\n  const tabIndicatorRef = React.useRef<HTMLDivElement | null>(null)\n\n  React.useEffect(() => {\n    const activeTabRef = tabRefs.current.find(\n      (ref) => ref?.dataset.label === active.label\n    )\n\n    if (activeTabRef && tabIndicatorRef.current) {\n      const activeTabIndex = tabRefs.current.indexOf(activeTabRef)\n\n      const prevTabRef =\n        activeTabIndex > 0 ? tabRefs.current[activeTabIndex - 1] : null\n\n      tabIndicatorRef.current.style.width = `${activeTabRef.offsetWidth}px`\n      tabIndicatorRef.current.style.left = prevTabRef\n        ? `${\n            tabRefs.current\n              .slice(0, activeTabIndex)\n              .reduce((total, tab) => total + (tab?.offsetWidth || 0) + 12, 0) +\n            15\n          }px`\n        : \"15px\"\n    }\n  }, [active])\n\n  return (\n    <div>\n      <div\n        className={clx(\"flex items-start px-4 pt-2.5\", className)}\n        {...props}\n      >\n        {!hideLabels &&\n          snippets.map((snippet, idx) => (\n            <div\n              className={clx(\n                \"text-ui-contrast-fg-secondary txt-compact-small-plus transition-fg relative cursor-pointer pb-[9px] pr-3\",\n                {\n                  \"text-ui-contrast-fg-primary cursor-default\":\n                    active.label === snippet.label,\n                }\n              )}\n              key={snippet.label}\n              onClick={() => setActive(snippet)}\n            >\n              <span\n                ref={(ref) => {\n                  tabRefs.current[idx] = ref\n                  return undefined\n                }}\n                data-label={snippet.label}\n              >\n                {snippet.label}\n              </span>\n            </div>\n          ))}\n        {children}\n      </div>\n      <div className=\"w-full px-0.5\">\n        <div className=\"bg-ui-contrast-border-top relative h-px w-full\">\n          <div\n            ref={tabIndicatorRef}\n            className={clx(\n              \"absolute bottom-0 transition-all motion-reduce:transition-none\",\n              \"duration-150 ease-linear\"\n            )}\n          >\n            <div className=\"bg-ui-contrast-fg-primary h-px rounded-full\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\nHeaderComponent.displayName = \"CodeBlock.Header\"\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Meta = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  return (\n    <div\n      className={clx(\n        \"txt-compact-small text-ui-contrast-fg-secondary ml-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\nMeta.displayName = \"CodeBlock.Header.Meta\"\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\n/**\n * This component is based on the `div` element and supports all of its props\n */\nconst Body = ({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n  const { active } = useCodeBlockContext()\n\n  const showToolbar = children || !active.hideCopy\n\n  return (\n    <div>\n      {showToolbar && (\n        <div className=\"border-ui-contrast-border-bot flex min-h-10 items-center gap-x-3 border-t px-4 py-2\">\n          <div className=\"code-body text-ui-contrast-fg-secondary flex-1\">\n            {children}\n          </div>\n          {!active.hideCopy && (\n            <Copy\n              content={active.code}\n              className=\"text-ui-contrast-fg-secondary\"\n            />\n          )}\n        </div>\n      )}\n      <div className=\"flex h-full flex-col overflow-hidden px-[5px] pb-[5px]\">\n        <div\n          className={clx(\n            \"bg-ui-contrast-bg-subtle border-ui-contrast-border-bot relative h-full overflow-y-auto rounded-lg border p-4\",\n            className\n          )}\n          {...props}\n        >\n          <div className=\"max-w-[90%]\">\n            <Highlight\n              theme={{\n                ...themes.palenight,\n                plain: {\n                  color: \"rgba(249, 250, 251, 1)\",\n                  backgroundColor: \"var(--contrast-fg-primary)\",\n                },\n                styles: [\n                  ...themes.palenight.styles,\n                  {\n                    types: [\"keyword\"],\n                    style: {\n                      fontStyle: \"normal\",\n                      color: \"rgb(187,160,255)\",\n                    },\n                  },\n                  {\n                    types: [\"punctuation\", \"operator\"],\n                    style: {\n                      fontStyle: \"normal\",\n                      color: \"rgb(255,255,255)\",\n                    },\n                  },\n                  {\n                    types: [\"constant\", \"boolean\"],\n                    style: {\n                      fontStyle: \"normal\",\n                      color: \"rgb(187,77,96)\",\n                    },\n                  },\n                  {\n                    types: [\"function\"],\n                    style: {\n                      fontStyle: \"normal\",\n                      color: \"rgb(27,198,242)\",\n                    },\n                  },\n                  {\n                    types: [\"number\"],\n                    style: {\n                      color: \"rgb(247,208,25)\",\n                    },\n                  },\n                  {\n                    types: [\"property\"],\n                    style: {\n                      color: \"rgb(247,208,25)\",\n                    },\n                  },\n                  {\n                    types: [\"maybe-class-name\"],\n                    style: {\n                      color: \"rgb(255,203,107)\",\n                    },\n                  },\n                  {\n                    types: [\"string\"],\n                    style: {\n                      color: \"rgb(73,209,110)\",\n                    },\n                  },\n                  {\n                    types: [\"comment\"],\n                    style: {\n                      color: \"var(--contrast-fg-secondary)\",\n                      fontStyle: \"normal\",\n                    },\n                  },\n                ],\n              }}\n              code={active.code}\n              language={active.language}\n            >\n              {({ style, tokens, getLineProps, getTokenProps }) => (\n                <pre\n                  className={clx(\n                    \"code-body whitespace-pre-wrap bg-transparent\",\n                    {\n                      \"grid grid-cols-[auto,1fr] gap-x-4\":\n                        !active.hideLineNumbers,\n                    }\n                  )}\n                  style={{\n                    ...style,\n                    background: \"transparent\",\n                  }}\n                >\n                  {!active.hideLineNumbers && (\n                    <div\n                      role=\"presentation\"\n                      className=\"flex flex-col text-right\"\n                    >\n                      {tokens.map((_, i) => (\n                        <span\n                          key={i}\n                          className=\"text-ui-contrast-fg-secondary tabular-nums\"\n                        >\n                          {i + 1}\n                        </span>\n                      ))}\n                    </div>\n                  )}\n                  <div>\n                    {tokens.map((line, i) => (\n                      <div key={i} {...getLineProps({ line })}>\n                        {line.map((token, key) => (\n                          <span key={key} {...getTokenProps({ token })} />\n                        ))}\n                      </div>\n                    ))}\n                  </div>\n                </pre>\n              )}\n            </Highlight>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\nBody.displayName = \"CodeBlock.Body\"\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}

package/dist/esm/components/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./code-block";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/code-block/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/code-block/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/esm/components/code-block/index.js

@@ -0,0 +1,2 @@
+export * from "./code-block";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/code-block/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/code-block/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA","sourcesContent":["export * from \"./code-block\"\n"]}

package/dist/esm/components/collapsible/collapsible.d.ts

@@ -0,0 +1,14 @@
+import { Collapsible as RadixCollapsible } from "radix-ui";
+import * as React from "react";
+type CollapsibleProps = React.ComponentPropsWithoutRef<typeof RadixCollapsible.Root>;
+type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof RadixCollapsible.Trigger>;
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<RadixCollapsible.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof RadixCollapsible.Content>;
+declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<RadixCollapsible.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Collapsible: React.ForwardRefExoticComponent<Omit<RadixCollapsible.CollapsibleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<RadixCollapsible.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<RadixCollapsible.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+export type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps, };
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/esm/components/collapsible/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../../src/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CACpD,OAAO,gBAAgB,CAAC,IAAI,CAC7B,CAAA;AAUD,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAC3D,OAAO,gBAAgB,CAAC,OAAO,CAChC,CAAA;AAED,QAAA,MAAM,kBAAkB,0KAWtB,CAAA;AAGF,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAC3D,OAAO,gBAAgB,CAAC,OAAO,CAChC,CAAA;AAED,QAAA,MAAM,kBAAkB,oKAWtB,CAAA;AAGF,QAAA,MAAM,WAAW;;;CAGf,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA;AAC9D,YAAY,EACV,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,GACxB,CAAA"}

package/dist/esm/components/collapsible/collapsible.js

@@ -0,0 +1,21 @@
+"use client";
+import { Collapsible as RadixCollapsible } from "radix-ui";
+import * as React from "react";
+const CollapsibleRoot = React.forwardRef((props, ref) => {
+    return React.createElement(RadixCollapsible.Root, { ref: ref, "data-slot": "collapsible", ...props });
+});
+CollapsibleRoot.displayName = "Collapsible";
+const CollapsibleTrigger = React.forwardRef((props, ref) => {
+    return (React.createElement(RadixCollapsible.Trigger, { ref: ref, "data-slot": "collapsible-trigger", ...props }));
+});
+CollapsibleTrigger.displayName = "Collapsible.Trigger";
+const CollapsibleContent = React.forwardRef((props, ref) => {
+    return (React.createElement(RadixCollapsible.Content, { ref: ref, "data-slot": "collapsible-content", ...props }));
+});
+CollapsibleContent.displayName = "Collapsible.Content";
+const Collapsible = Object.assign(CollapsibleRoot, {
+    Trigger: CollapsibleTrigger,
+    Content: CollapsibleContent,
+});
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };
+//# sourceMappingURL=collapsible.js.map

package/dist/esm/components/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","sourceRoot":"","sources":["../../../../src/components/collapsible/collapsible.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAC1D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,OAAO,oBAAC,gBAAgB,CAAC,IAAI,IAAC,GAAG,EAAE,GAAG,eAAY,aAAa,KAAK,KAAK,GAAI,CAAA;AAC/E,CAAC,CAAC,CAAA;AACF,eAAe,CAAC,WAAW,GAAG,aAAa,CAAA;AAM3C,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAGzC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,OAAO,CACL,oBAAC,gBAAgB,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,eACE,qBAAqB,KAC3B,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,kBAAkB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAMtD,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAGzC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACf,OAAO,CACL,oBAAC,gBAAgB,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,eACE,qBAAqB,KAC3B,KAAK,GACT,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AACF,kBAAkB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEtD,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACjD,OAAO,EAAE,kBAAkB;IAC3B,OAAO,EAAE,kBAAkB;CAC5B,CAAC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,CAAA","sourcesContent":["\"use client\"\n\nimport { Collapsible as RadixCollapsible } from \"radix-ui\"\nimport * as React from \"react\"\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<\n  typeof RadixCollapsible.Root\n>\n\nconst CollapsibleRoot = React.forwardRef<\n  React.ElementRef<typeof RadixCollapsible.Root>,\n  CollapsibleProps\n>((props, ref) => {\n  return <RadixCollapsible.Root ref={ref} data-slot=\"collapsible\" {...props} />\n})\nCollapsibleRoot.displayName = \"Collapsible\"\n\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<\n  typeof RadixCollapsible.Trigger\n>\n\nconst CollapsibleTrigger = React.forwardRef<\n  React.ElementRef<typeof RadixCollapsible.Trigger>,\n  CollapsibleTriggerProps\n>((props, ref) => {\n  return (\n    <RadixCollapsible.Trigger\n      ref={ref}\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n})\nCollapsibleTrigger.displayName = \"Collapsible.Trigger\"\n\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<\n  typeof RadixCollapsible.Content\n>\n\nconst CollapsibleContent = React.forwardRef<\n  React.ElementRef<typeof RadixCollapsible.Content>,\n  CollapsibleContentProps\n>((props, ref) => {\n  return (\n    <RadixCollapsible.Content\n      ref={ref}\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n})\nCollapsibleContent.displayName = \"Collapsible.Content\"\n\nconst Collapsible = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger }\nexport type {\n  CollapsibleContentProps,\n  CollapsibleProps,\n  CollapsibleTriggerProps,\n}\n"]}

package/dist/esm/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./collapsible";
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/collapsible/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/dist/esm/components/collapsible/index.js

@@ -0,0 +1,2 @@
+export * from "./collapsible";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/collapsible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/collapsible/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA","sourcesContent":["export * from \"./collapsible\"\n"]}

package/dist/esm/components/combobox/combobox.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { InputGroupButton, InputGroupInput } from "../input-group/index.js";
+interface ComboboxProps extends React.ComponentPropsWithoutRef<"div"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function Combobox({ value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputValueChange, open, defaultOpen, onOpenChange, className, ...props }: ComboboxProps): React.JSX.Element;
+declare function ComboboxValue({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: React.ComponentProps<typeof InputGroupButton>): React.JSX.Element;
+declare function ComboboxClear({ className, ...props }: React.ComponentProps<typeof InputGroupButton>): React.JSX.Element;
+declare function ComboboxInput({ className, disabled, showTrigger, showClear, children, ...props }: React.ComponentProps<typeof InputGroupInput> & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+}): React.JSX.Element;
+declare function ComboboxContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxList({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxItem({ className, value, textValue, children, onClick, onMouseMove, ...props }: React.ComponentProps<"button"> & {
+    value: string;
+    textValue?: string;
+}): React.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxLabel({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxCollection(props: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxChips({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, ...props }: React.ComponentProps<"span"> & {
+    showRemove?: boolean;
+}): React.JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+declare const ComboboxRoot: typeof Combobox & {
+    Value: typeof ComboboxValue;
+    Trigger: typeof ComboboxTrigger;
+    Clear: typeof ComboboxClear;
+    Input: typeof ComboboxInput;
+    Content: typeof ComboboxContent;
+    List: typeof ComboboxList;
+    Item: typeof ComboboxItem;
+    Group: typeof ComboboxGroup;
+    Label: typeof ComboboxLabel;
+    Collection: typeof ComboboxCollection;
+    Empty: typeof ComboboxEmpty;
+    Separator: typeof ComboboxSeparator;
+    Chips: typeof ComboboxChips;
+    Chip: typeof ComboboxChip;
+    ChipsInput: typeof ComboboxChipsInput;
+};
+export { ComboboxRoot as Combobox, ComboboxChips, ComboboxChipsInput, ComboboxChip, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
+//# sourceMappingURL=combobox.d.ts.map

package/dist/esm/components/combobox/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../../src/components/combobox/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/combobox/combobox.js

@@ -0,0 +1,200 @@
+"use client";
+import { Check, ChevronDownMini, XMarkMini } from "@nergora/icons";
+import * as React from "react";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "../input-group/index.js";
+import { clx } from "../../utils/clx.js";
+const ComboboxContext = React.createContext(null);
+function useComboboxContext() {
+    const context = React.useContext(ComboboxContext);
+    if (!context) {
+        throw new Error("Combobox components must be used within <Combobox />");
+    }
+    return context;
+}
+function Combobox({ value, defaultValue = "", onValueChange, inputValue, defaultInputValue, onInputValueChange, open, defaultOpen = false, onOpenChange, className, ...props }) {
+    var _a;
+    const [localValue, setLocalValue] = React.useState(defaultValue);
+    const [localOpen, setLocalOpen] = React.useState(defaultOpen);
+    const [localInputValue, setLocalInputValue] = React.useState((_a = defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : value) !== null && _a !== void 0 ? _a : defaultValue);
+    const [activeValue, setActiveValue] = React.useState("");
+    const itemsRef = React.useRef(new Map());
+    const contentId = React.useId();
+    const currentValue = value !== null && value !== void 0 ? value : localValue;
+    const currentOpen = open !== null && open !== void 0 ? open : localOpen;
+    const currentInputValue = inputValue !== null && inputValue !== void 0 ? inputValue : localInputValue;
+    const setInputValue = React.useCallback((nextInputValue) => {
+        if (inputValue === undefined)
+            setLocalInputValue(nextInputValue);
+        onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(nextInputValue);
+    }, [inputValue, onInputValueChange]);
+    const setOpen = React.useCallback((nextOpen) => {
+        if (open === undefined)
+            setLocalOpen(nextOpen);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }, [open, onOpenChange]);
+    const selectValue = React.useCallback((nextValue, textValue) => {
+        var _a;
+        if (value === undefined)
+            setLocalValue(nextValue);
+        setInputValue((_a = textValue !== null && textValue !== void 0 ? textValue : itemsRef.current.get(nextValue)) !== null && _a !== void 0 ? _a : nextValue);
+        setActiveValue(nextValue);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
+    }, [setInputValue, value, onValueChange]);
+    const registerItem = React.useCallback((itemValue, textValue) => {
+        itemsRef.current.set(itemValue, textValue);
+        return () => itemsRef.current.delete(itemValue);
+    }, []);
+    const itemValues = React.useCallback(() => [...itemsRef.current.keys()], []);
+    React.useEffect(() => {
+        if (inputValue !== undefined || !currentValue)
+            return;
+        const selectedText = itemsRef.current.get(currentValue);
+        if (selectedText)
+            setLocalInputValue(selectedText);
+    }, [currentOpen, currentValue, inputValue]);
+    return (React.createElement(ComboboxContext.Provider, { value: {
+            value: currentValue,
+            selectValue,
+            open: currentOpen,
+            setOpen,
+            inputValue: currentInputValue,
+            setInputValue,
+            activeValue,
+            setActiveValue,
+            registerItem,
+            itemValues,
+            contentId,
+        } },
+        React.createElement("div", { "data-slot": "combobox", className: clx("relative w-full", className), ...props })));
+}
+function ComboboxValue({ className, ...props }) {
+    var _a;
+    const { value } = useComboboxContext();
+    return (React.createElement("span", { "data-slot": "combobox-value", className: clx("text-ui-fg-base", className), ...props }, (_a = props.children) !== null && _a !== void 0 ? _a : value));
+}
+function ComboboxTrigger({ className, children, ...props }) {
+    const { open, setOpen } = useComboboxContext();
+    return (React.createElement(InputGroupButton, { "data-slot": "combobox-trigger", size: "icon-xs", variant: "ghost", className: className, "aria-label": "Toggle options", "aria-expanded": open, onClick: () => setOpen(!open), ...props }, children !== null && children !== void 0 ? children : React.createElement(ChevronDownMini, { className: "text-ui-fg-muted" })));
+}
+function ComboboxClear({ className, ...props }) {
+    const { selectValue } = useComboboxContext();
+    return (React.createElement(InputGroupButton, { "data-slot": "combobox-clear", size: "icon-xs", variant: "ghost", className: className, "aria-label": "Clear selection", onClick: () => {
+            selectValue("", "");
+        }, ...props },
+        React.createElement(XMarkMini, null)));
+}
+function ComboboxInput({ className, disabled = false, showTrigger = true, showClear = false, children, ...props }) {
+    const { inputValue, setInputValue, setOpen, open, activeValue, setActiveValue, selectValue, itemValues, contentId, } = useComboboxContext();
+    const moveActive = (direction) => {
+        var _a;
+        const values = itemValues();
+        if (!values.length)
+            return;
+        const currentIndex = values.indexOf(activeValue);
+        const nextIndex = currentIndex < 0
+            ? direction === 1 ? 0 : values.length - 1
+            : (currentIndex + direction + values.length) % values.length;
+        setActiveValue((_a = values[nextIndex]) !== null && _a !== void 0 ? _a : "");
+    };
+    return (React.createElement(InputGroup, { className: clx("w-full min-w-0", className) },
+        React.createElement(InputGroupInput, { ...props, disabled: disabled, value: inputValue, role: "combobox", "aria-autocomplete": "list", "aria-expanded": open, "aria-controls": contentId, "aria-activedescendant": activeValue ? `${contentId}-${encodeURIComponent(activeValue)}` : undefined, onChange: (event) => {
+                var _a;
+                setInputValue(event.target.value);
+                setOpen(true);
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            }, onKeyDown: (event) => {
+                var _a;
+                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                    event.preventDefault();
+                    setOpen(true);
+                    moveActive(event.key === "ArrowDown" ? 1 : -1);
+                }
+                else if (event.key === "Enter" && open && activeValue) {
+                    event.preventDefault();
+                    selectValue(activeValue);
+                    setOpen(false);
+                }
+                else if (event.key === "Escape" && open) {
+                    event.preventDefault();
+                    setOpen(false);
+                }
+                (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
+            } }),
+        React.createElement(InputGroupAddon, { align: "inline-end" },
+            showTrigger && React.createElement(ComboboxTrigger, { disabled: disabled }),
+            showClear && React.createElement(ComboboxClear, { disabled: disabled })),
+        children));
+}
+function ComboboxContent({ className, ...props }) {
+    const { open, contentId } = useComboboxContext();
+    return (React.createElement("div", { id: contentId, "data-slot": "combobox-content", "data-state": open ? "open" : "closed", hidden: !open, className: clx("absolute z-50 mt-1 max-h-72 w-full min-w-0 max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout", className), ...props }));
+}
+function ComboboxList({ className, ...props }) {
+    return (React.createElement("div", { "data-slot": "combobox-list", role: "listbox", className: clx("max-h-64 overflow-y-auto overscroll-contain p-1", className), ...props }));
+}
+function ComboboxItem({ className, value, textValue, children, onClick, onMouseMove, ...props }) {
+    const context = useComboboxContext();
+    const selected = context.value === value;
+    const resolvedTextValue = textValue !== null && textValue !== void 0 ? textValue : (typeof children === "string" ? children : value);
+    React.useEffect(() => context.registerItem(value, resolvedTextValue), [context.registerItem, resolvedTextValue, value]);
+    return (React.createElement("button", { ...props, id: `${context.contentId}-${encodeURIComponent(value)}`, type: "button", role: "option", "aria-selected": selected, "data-slot": "combobox-item", "data-value": value, "data-selected": selected, "data-highlighted": context.activeValue === value, className: clx("txt-compact-small relative flex w-full min-w-0 cursor-default items-center gap-2 rounded-md py-1 pl-1.5 pr-8 text-left outline-none hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover data-[highlighted=true]:bg-ui-bg-base-hover disabled:pointer-events-none disabled:opacity-50 [&>*]:min-w-0 [&>*]:truncate", className), onMouseMove: (event) => {
+            context.setActiveValue(value);
+            onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(event);
+        }, onClick: (event) => {
+            context.selectValue(value, resolvedTextValue);
+            context.setOpen(false);
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        } },
+        children,
+        selected && (React.createElement("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" },
+            React.createElement(Check, null)))));
+}
+function ComboboxGroup({ className, ...props }) {
+    return React.createElement("div", { "data-slot": "combobox-group", className: className, ...props });
+}
+function ComboboxLabel({ className, ...props }) {
+    return (React.createElement("div", { "data-slot": "combobox-label", className: clx("txt-compact-xsmall-plus px-2 py-1.5 text-ui-fg-muted", className), ...props }));
+}
+function ComboboxCollection(props) {
+    return React.createElement("div", { "data-slot": "combobox-collection", ...props });
+}
+function ComboboxEmpty({ className, ...props }) {
+    return (React.createElement("div", { "data-slot": "combobox-empty", className: clx("txt-compact-small py-2 text-center text-ui-fg-muted", className), ...props }));
+}
+function ComboboxSeparator({ className, ...props }) {
+    return (React.createElement("div", { "data-slot": "combobox-separator", className: clx("-mx-1 my-1 h-px bg-ui-border-base", className), ...props }));
+}
+function ComboboxChips({ className, ...props }) {
+    return (React.createElement("div", { "data-slot": "combobox-chips", className: clx("flex min-h-8 flex-wrap items-center gap-1 rounded-md bg-ui-bg-field px-2.5 py-1 shadow-borders-base focus-within:shadow-borders-interactive-with-active", className), ...props }));
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+    return (React.createElement("span", { "data-slot": "combobox-chip", className: clx("txt-compact-xsmall-plus flex h-5 w-fit items-center justify-center gap-1 rounded bg-ui-bg-subtle px-1.5 text-ui-fg-base", className), ...props },
+        children,
+        showRemove && (React.createElement("button", { type: "button", className: "-mr-1 rounded text-ui-fg-muted hover:text-ui-fg-base", "data-slot": "combobox-chip-remove" },
+            React.createElement(XMarkMini, null)))));
+}
+function ComboboxChipsInput({ className, ...props }) {
+    return (React.createElement("input", { "data-slot": "combobox-chip-input", className: clx("txt-compact-small min-w-16 flex-1 bg-transparent text-ui-fg-base outline-none placeholder:text-ui-fg-muted", className), ...props }));
+}
+function useComboboxAnchor() {
+    return React.useRef(null);
+}
+const ComboboxRoot = Object.assign(Combobox, {
+    Value: ComboboxValue,
+    Trigger: ComboboxTrigger,
+    Clear: ComboboxClear,
+    Input: ComboboxInput,
+    Content: ComboboxContent,
+    List: ComboboxList,
+    Item: ComboboxItem,
+    Group: ComboboxGroup,
+    Label: ComboboxLabel,
+    Collection: ComboboxCollection,
+    Empty: ComboboxEmpty,
+    Separator: ComboboxSeparator,
+    Chips: ComboboxChips,
+    Chip: ComboboxChip,
+    ChipsInput: ComboboxChipsInput,
+});
+export { ComboboxRoot as Combobox, ComboboxChips, ComboboxChipsInput, ComboboxChip, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
+//# sourceMappingURL=combobox.js.map