@inkeep/cxkit-styled 0.5.114 → 0.5.115

package/dist/components/intelligent-form.js

@@ -1,14 +1,15 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import { IntelligentFormPrimitive as o } from "@inkeep/cxkit-primitives";
+import { jsx as l, Fragment as d, jsxs as F } from "react/jsx-runtime";
+import { IntelligentFormPrimitive as o, useComboboxItems as g } from "@inkeep/cxkit-primitives";
 import { cn as n } from "../utils.js";
-import { button as a } from "../ui/recipes/button.js";
-import { checkbox as i } from "../ui/recipes/checkbox.js";
-import { input as s } from "../ui/recipes/input.js";
-import { select as r } from "../ui/recipes/select.js";
-import { merge as m } from "merge-anything";
-import { markdownStyles as d } from "../ui/markdown-styles.js";
-const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
+import { button as s } from "../ui/recipes/button.js";
+import { checkbox as m } from "../ui/recipes/checkbox.js";
+import { combobox as r } from "../ui/recipes/combobox.js";
+import { input as i } from "../ui/recipes/input.js";
+import { select as a } from "../ui/recipes/select.js";
+import { merge as x } from "merge-anything";
+import { markdownStyles as u } from "../ui/markdown-styles.js";
+const v = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), P = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -23,7 +24,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     ),
     ...t
   }
-), b = ({
+), B = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -32,7 +33,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("px-5 py-4 font-medium shrink-0", e),
     ...t
   }
-), C = ({
+), H = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -41,10 +42,10 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("flex-1 overflow-hidden", e),
     ...t
   }
-), w = ({
+), R = ({
   className: e,
   ...t
-}) => /* @__PURE__ */ l(o.ContentScrollArea, { className: n("h-full", e), ...t }), k = ({
+}) => /* @__PURE__ */ l(o.ContentScrollArea, { className: n("h-full", e), ...t }), L = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -59,7 +60,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     ),
     ...t
   }
-), A = ({
+), E = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -73,7 +74,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     ),
     ...t
   }
-), B = ({
+), V = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -82,7 +83,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("relative flex-1 rounded-full", "bg-gray-300 dark:bg-white-alpha-200", e),
     ...t
   }
-), T = o.ContentScrollAreaCorner, v = ({
+), z = o.ContentScrollAreaCorner, _ = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -91,7 +92,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("flex flex-col items-center", "justify-center mx-1 pt-12 pb-6", e),
     ...t
   }
-), P = ({
+), q = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -100,7 +101,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("w-6 h-6 text-green-500 mb-5", e),
     ...t
   }
-), H = ({
+), D = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -109,7 +110,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("text-xl font-semibold", "mb-3 tracking-tight", e),
     ...t
   }
-), R = ({
+), j = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -118,7 +119,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("text-gray-800 dark:text-white-alpha-950", e),
     ...t
   }
-), L = ({
+), M = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -127,7 +128,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("w-full flex flex-col py-6", e),
     ...t
   }
-), E = ({
+), G = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -136,7 +137,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("text-gray-700 dark:text-white-alpha-700 text-sm", e),
     ...t
   }
-), V = ({
+), J = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -145,21 +146,21 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("w-full gap-8", e),
     ...t
   }
-), z = ({
+), K = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.PrimaryFormSubmit,
   {
     className: n(
-      a({ preset: "neutralFilled", size: "sm" }),
+      s({ preset: "neutralFilled", size: "sm" }),
       "ml-auto data-[loading]:cursor-wait",
       "data-[submitted]:hidden",
       e
     ),
     ...t
   }
-), _ = ({
+), O = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -172,7 +173,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     ),
     ...t
   }
-), q = ({
+), Q = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -193,32 +194,32 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     ),
     ...t
   }
-), D = ({
+), U = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldText,
   {
-    className: n(s({ size: "sm", variant: "outline" }), e),
+    className: n(i({ size: "sm", variant: "outline" }), e),
     ...t
   }
-), M = ({
+), W = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldEmail,
   {
-    className: n(s({ size: "sm", variant: "outline" }), e),
+    className: n(i({ size: "sm", variant: "outline" }), e),
     ...t
   }
-), j = ({
+), X = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldFile,
   {
     className: n(
-      s({ size: "sm", variant: "outline" }),
+      i({ size: "sm", variant: "outline" }),
       "text-sm pl-2 file:h-full file:cursor-pointer py-0",
       "file:bg-transparent file:border-none file:font-medium",
       "file:text-sm file:text-gray-700 dark:file:text-white-alpha-700",
@@ -226,43 +227,43 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     ),
     ...t
   }
-), G = ({
+), Y = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldTextArea,
   {
-    className: n(s({ size: "sm", variant: "outline" }), "min-h-20 px-4 py-2", e),
+    className: n(i({ size: "sm", variant: "outline" }), "min-h-20 px-4 py-2", e),
     ...t
   }
-), J = ({
+), Z = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldCheckbox,
   {
-    className: n(i({ slot: "root" }), e),
+    className: n(m({ slot: "root" }), e),
     ...t
   }
-), K = ({
+), $ = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldCheckboxIndicator,
   {
-    className: n(i({ slot: "indicator" }), e),
+    className: n(m({ slot: "indicator" }), e),
     ...t
   }
-), O = o.FormFieldSelect, Q = ({
+), ee = o.FormFieldSelect, te = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldSelectTrigger,
   {
-    className: n(r({ slot: "trigger" }), "text-sm", e),
+    className: n(a({ slot: "trigger" }), "text-sm", e),
     ...t
   }
-), U = o.FormFieldSelectValue, W = ({
+), oe = o.FormFieldSelectValue, le = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -271,43 +272,118 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("h-4 w-4 opacity-45", e),
     ...t
   }
-), X = ({
+), ne = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldSelectContent,
   {
-    className: n(r({ slot: "content" }), e),
+    className: n(a({ slot: "content" }), e),
     ...t
   }
-), Y = ({
+), re = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldSelectViewport,
   {
-    className: n(r({ slot: "viewport" }), e),
+    className: n(a({ slot: "viewport" }), e),
     ...t
   }
-), Z = ({
+), ae = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldSelectItem,
   {
-    className: n(r({ slot: "item" }), "text-sm", e),
+    className: n(a({ slot: "item" }), "text-sm", e),
     ...t
   }
-), $ = o.FormFieldSelectItemText, ee = ({
+), se = o.FormFieldSelectItemText, ie = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.FormFieldSelectItemIndicator,
+  {
+    className: n(a({ slot: "itemIndicator" }), e),
+    ...t
+  }
+), me = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ l(o.FormFieldCombobox, { className: n("w-full", e), ...t }), ce = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ l(
+  o.FormFieldComboboxControl,
+  {
+    className: n(r({ slot: "control" }), "text-sm", e),
+    ...t
+  }
+), de = (e) => /* @__PURE__ */ l(
+  o.FormFieldComboboxInput,
+  {
+    className: n(r({ slot: "input" }), e.className),
+    ...e
+  }
+), Fe = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ l(
+  o.FormFieldComboboxTrigger,
+  {
+    className: n(r({ slot: "trigger" }), "h-4 w-4 opacity-45", e),
+    ...t
+  }
+), ge = (e) => /* @__PURE__ */ l(o.FormFieldComboboxPositioner, { ...e }), xe = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ l(
+  o.FormFieldComboboxContent,
+  {
+    className: n(r({ slot: "content" }), e),
+    ...t
+  }
+), b = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ l(
+  o.FormFieldComboboxItem,
+  {
+    className: n(r({ slot: "item" }), "text-sm", e),
+    ...t
+  }
+), I = (e) => /* @__PURE__ */ l(
+  o.FormFieldComboboxItemText,
+  {
+    className: n(r({ slot: "itemText" }), e.className),
+    ...e
+  }
+), ue = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ l(
+  o.FormFieldComboboxSelectedTags,
+  {
+    className: n(r({ slot: "selectedTags" }), e),
+    ...t
+  }
+), p = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ l(
+  o.FormFieldComboboxItemIndicator,
   {
     className: n(r({ slot: "itemIndicator" }), e),
     ...t
   }
-), te = ({
+), be = () => {
+  const e = g();
+  return e.length === 0 ? /* @__PURE__ */ l("div", { className: "py-6 text-center text-sm text-gray-500 dark:text-gray-dark-400", children: "No results found" }) : /* @__PURE__ */ l(d, { children: e.map((t) => /* @__PURE__ */ F(b, { item: t, children: [
+    /* @__PURE__ */ l(I, { children: t.label }),
+    /* @__PURE__ */ l(p, { item: t })
+  ] }, t.value)) });
+}, Ie = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -316,7 +392,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("text-sm flex items-center text-red-500 dark:text-red-300", e),
     ...t
   }
-), oe = ({
+), pe = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -325,7 +401,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("flex items-center gap-2", e),
     ...t
   }
-), le = ({
+), Se = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -340,7 +416,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     ),
     ...t
   }
-), ne = ({
+), fe = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -349,7 +425,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("text-gray-800 dark:text-white-alpha-950 text-sm font-semibold", e),
     ...t
   }
-), re = ({
+), Ce = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -363,7 +439,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     ),
     ...t
   }
-), ae = ({
+), Ne = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -372,7 +448,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("w-full flex flex-col py-6 gap-6 min-w-0 text-sm", e),
     ...t
   }
-), se = ({
+), he = ({
   className: e,
   componentStyles: t,
   ...c
@@ -380,26 +456,26 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
   o.ConfidentAnswer,
   {
     className: n("max-w-full ", e),
-    componentStyles: m(d, t ?? {}),
+    componentStyles: x(u, t ?? {}),
     ...c
   }
-), ie = ({
+), ye = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.ConfidentResponseButton,
   {
     className: n(
-      a({ preset: "neutralFilled", size: "sm" }),
+      s({ preset: "neutralFilled", size: "sm" }),
       "ml-auto gap-2 data-[escalated]:hidden",
       e
     ),
     ...t
   }
-), ce = ({
+), we = ({
   className: e,
   ...t
-}) => /* @__PURE__ */ l(o.ConfidentResponseButtonIcon, { className: n("", e), ...t }), me = o.ConfidentResponseButtonLabel, de = ({
+}) => /* @__PURE__ */ l(o.ConfidentResponseButtonIcon, { className: n("", e), ...t }), ke = o.ConfidentResponseButtonLabel, Te = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -408,7 +484,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("w-full flex flex-col py-6 gap-6", e),
     ...t
   }
-), Fe = ({
+), Ae = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -417,7 +493,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("text-gray-700 dark:text-white-alpha-700 text-sm", e),
     ...t
   }
-), ge = ({
+), ve = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -426,21 +502,21 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("w-full gap-8", e),
     ...t
   }
-), ue = ({
+), Pe = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.SecondaryFormSubmit,
   {
     className: n(
-      a({ preset: "neutralFilled", size: "sm" }),
+      s({ preset: "neutralFilled", size: "sm" }),
       "ml-auto data-[loading]:cursor-wait",
       "data-[submitted]:hidden",
       e
     ),
     ...t
   }
-), pe = ({
+), Be = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -449,7 +525,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("text-red-500 dark:text-red-300", e),
     ...t
   }
-), Se = ({
+), He = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -458,7 +534,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("w-full flex flex-col gap-6", e),
     ...t
   }
-), xe = ({
+), Re = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -467,7 +543,7 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("text-gray-700 dark:text-white-alpha-700 text-sm", e),
     ...t
   }
-), fe = ({
+), Le = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
@@ -476,80 +552,91 @@ const y = (e) => /* @__PURE__ */ l(o.Provider, { ...e }), N = ({
     className: n("w-full flex flex-wrap gap-2 items-center", e),
     ...t
   }
-), Ie = ({
+), Ee = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(
   o.Source,
   {
     className: n(
-      a({ size: "xs", variant: "outline" }),
+      s({ size: "xs", variant: "outline" }),
       "text-gray-600 dark:text-white-alpha-700 gap-1",
       e
     ),
     ...t
   }
-), he = ({
+), Ve = ({
   className: e,
   ...t
-}) => /* @__PURE__ */ l(o.SourceIcon, { className: n("", e), ...t }), ye = ({
+}) => /* @__PURE__ */ l(o.SourceIcon, { className: n("", e), ...t }), ze = ({
   className: e,
   ...t
 }) => /* @__PURE__ */ l(o.SourceTitle, { className: n("line-clamp-1", e), ...t });
 export {
-  oe as BotHeading,
-  le as BotHeadingIcon,
-  ne as BotHeadingName,
-  J as Checkbox,
-  K as CheckboxIndicator,
-  se as ConfidentAnswer,
-  ae as ConfidentResponse,
-  ie as ConfidentResponseButton,
-  ce as ConfidentResponseButtonIcon,
-  me as ConfidentResponseButtonLabel,
-  C as Content,
-  w as ContentScrollArea,
-  T as ContentScrollAreaCorner,
-  A as ContentScrollAreaScrollbar,
-  B as ContentScrollAreaThumb,
-  k as ContentScrollAreaViewport,
-  M as Email,
-  pe as Error,
-  _ as Field,
-  te as FieldError,
-  q as FieldLabel,
-  j as File,
-  b as Heading,
-  re as Loading,
-  L as PrimaryForm,
-  E as PrimaryFormDescription,
-  V as PrimaryFormFields,
-  z as PrimaryFormSubmit,
-  y as Provider,
-  N as Root,
-  de as SecondaryForm,
-  Fe as SecondaryFormDescription,
-  ge as SecondaryFormFields,
-  ue as SecondaryFormSubmit,
-  O as Select,
-  X as SelectContent,
-  W as SelectIcon,
-  Z as SelectItem,
-  ee as SelectItemIndicator,
-  $ as SelectItemText,
-  Q as SelectTrigger,
-  U as SelectValue,
-  Y as SelectViewport,
-  Ie as Source,
-  he as SourceIcon,
-  ye as SourceTitle,
-  Se as Sources,
-  xe as SourcesCaption,
-  fe as SourcesList,
-  v as Success,
-  H as SuccessHeading,
-  P as SuccessIcon,
-  R as SuccessMessage,
-  D as Text,
-  G as TextArea
+  pe as BotHeading,
+  Se as BotHeadingIcon,
+  fe as BotHeadingName,
+  Z as Checkbox,
+  $ as CheckboxIndicator,
+  he as ConfidentAnswer,
+  Ne as ConfidentResponse,
+  ye as ConfidentResponseButton,
+  we as ConfidentResponseButtonIcon,
+  ke as ConfidentResponseButtonLabel,
+  H as Content,
+  R as ContentScrollArea,
+  z as ContentScrollAreaCorner,
+  E as ContentScrollAreaScrollbar,
+  V as ContentScrollAreaThumb,
+  L as ContentScrollAreaViewport,
+  W as Email,
+  Be as Error,
+  O as Field,
+  Ie as FieldError,
+  Q as FieldLabel,
+  X as File,
+  me as FormFieldCombobox,
+  xe as FormFieldComboboxContent,
+  ce as FormFieldComboboxControl,
+  de as FormFieldComboboxInput,
+  b as FormFieldComboboxItem,
+  p as FormFieldComboboxItemIndicator,
+  be as FormFieldComboboxItemList,
+  I as FormFieldComboboxItemText,
+  ge as FormFieldComboboxPositioner,
+  ue as FormFieldComboboxSelectedTags,
+  Fe as FormFieldComboboxTrigger,
+  B as Heading,
+  Ce as Loading,
+  M as PrimaryForm,
+  G as PrimaryFormDescription,
+  J as PrimaryFormFields,
+  K as PrimaryFormSubmit,
+  v as Provider,
+  P as Root,
+  Te as SecondaryForm,
+  Ae as SecondaryFormDescription,
+  ve as SecondaryFormFields,
+  Pe as SecondaryFormSubmit,
+  ee as Select,
+  ne as SelectContent,
+  le as SelectIcon,
+  ae as SelectItem,
+  ie as SelectItemIndicator,
+  se as SelectItemText,
+  te as SelectTrigger,
+  oe as SelectValue,
+  re as SelectViewport,
+  Ee as Source,
+  Ve as SourceIcon,
+  ze as SourceTitle,
+  He as Sources,
+  Re as SourcesCaption,
+  Le as SourcesList,
+  _ as Success,
+  D as SuccessHeading,
+  q as SuccessIcon,
+  j as SuccessMessage,
+  U as Text,
+  Y as TextArea
 };