@caspeco/casper-ui-library 0.0.1

package/dist/components/combobox/combobox-button.js

@@ -0,0 +1,162 @@
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import { Fragment as A } from "react";
+import { useStyleConfig as E, Flex as u, Box as c, Input as F } from "@chakra-ui/react";
+import { ComboboxItem as s } from "./combobox-item.js";
+import { Tag as L } from "../tag/tag.js";
+import { Icon as N } from "../icon/icon.js";
+import { Icons as X } from "../icon/types.js";
+import { ThemeColorVariable as n, ThemeSpaceVariable as d, ThemeRadiusVariable as K, ThemeIconSizeVariable as T } from "../../theme/theme-types.js";
+function O() {
+  return /* @__PURE__ */ i(
+    c,
+    {
+      backgroundColor: n.NeutralContainer,
+      width: "8px",
+      borderRadius: "4px",
+      marginRight: "-8px",
+      _before: {
+        content: "''",
+        borderRadius: "4px",
+        marginLeft: "2px",
+        height: "100%",
+        width: "8px",
+        display: "block",
+        backgroundColor: n.Surface
+      }
+    }
+  );
+}
+function Y({
+  id: y,
+  asPlainText: a,
+  inputValue: b,
+  selectedItems: r,
+  displayItems: S,
+  toggleItem: g,
+  highlightState: f,
+  openState: l,
+  parentStrings: _,
+  size: D,
+  variant: j,
+  label: w,
+  placeHolderText: B,
+  isDisabled: m,
+  isReadOnly: h,
+  isInvalid: R,
+  collapsed: x,
+  setInputValue: C,
+  onSearch: e,
+  isSingleSelect: V
+}) {
+  var t;
+  const W = E("Combobox", { size: D, variant: j }), v = (o) => {
+    if (o.key === "Enter" && (o.preventDefault(), o.stopPropagation(), l.isOpen ? g(S[f.index]) : l.open()), o.key === "Escape") {
+      if (!l.isOpen) return;
+      o.preventDefault(), o.stopPropagation(), l.close(), a || (C(""), e == null || e(""));
+    }
+    o.key === "Backspace" && b.length === 0 && r.length > 0 && !a && g(r[r.length - 1]), o.key === "ArrowDown" && (l.isOpen ? f.next() : l.open()), o.key === "ArrowUp" && (l.isOpen ? f.previous() : l.open());
+  }, z = (o) => {
+    o.preventDefault(), o.stopPropagation();
+    const k = o.target.value;
+    C(k), e == null || e(k), f.set(0), l.open();
+  };
+  return /* @__PURE__ */ p(
+    u,
+    {
+      __css: W,
+      "aria-disabled": m,
+      "aria-readonly": h,
+      borderRadius: K.Small,
+      padding: d.Small,
+      _focusWithin: {
+        borderColor: n.Info,
+        boxShadow: `0 0 0 4px ${n.InfoContainer}`,
+        backgroundColor: n.Surface
+      },
+      _disabled: {
+        borderColor: "transparent",
+        backgroundColor: n.SurfaceDisabled
+      },
+      children: [
+        /* @__PURE__ */ p(
+          u,
+          {
+            flexWrap: x || V ? "nowrap" : "wrap",
+            gap: d.Small,
+            overflow: "hidden",
+            children: [
+              w && /* @__PURE__ */ i(c, { whiteSpace: "nowrap", children: w }),
+              !a && (x ? r.length > 0 && /* @__PURE__ */ p(
+                u,
+                {
+                  gap: d.XSmall,
+                  flexShrink: "1",
+                  overflow: "hidden",
+                  whiteSpace: "nowrap",
+                  textOverflow: "ellipsis",
+                  children: [
+                    r.length > 3 && /* @__PURE__ */ i(O, {}),
+                    r.length > 2 && /* @__PURE__ */ i(O, {}),
+                    r.length > 1 && /* @__PURE__ */ i(L, { children: r.length - 1 }),
+                    /* @__PURE__ */ i(s, { item: r[r.length - 1], asPlainText: a })
+                  ]
+                }
+              ) : r.map((o) => /* @__PURE__ */ i(s, { item: o, asPlainText: a }, o.id))),
+              a && r.length > 0 && b === r[0].label && ((t = _[r[0].id]) == null ? void 0 : t.map((o) => /* @__PURE__ */ p(A, { children: [
+                /* @__PURE__ */ i(
+                  c,
+                  {
+                    color: n.OnSurfaceSubdued,
+                    textOverflow: "ellipsis",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    children: o
+                  }
+                ),
+                /* @__PURE__ */ i(c, { color: n.OnSurfaceSubdued, children: "/" })
+              ] }, o))),
+              /* @__PURE__ */ i(
+                F,
+                {
+                  id: y,
+                  isDisabled: m,
+                  isReadOnly: h,
+                  isInvalid: R,
+                  onKeyDown: v,
+                  variant: "unstyled",
+                  value: b,
+                  autoComplete: "off",
+                  minWidth: d.XLarge,
+                  onChange: z,
+                  placeholder: B,
+                  border: "none",
+                  flex: 1,
+                  color: n.OnSurface,
+                  outline: "none",
+                  _placeholder: {
+                    color: n.OnSurfaceSubdued
+                  },
+                  _disabled: {
+                    cursor: "not-allowed",
+                    color: n.OnSurfaceSubdued
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(u, { className: "combobox-dropdown-icon", justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ i(
+          N,
+          {
+            icon: X.TreeViewCollapse,
+            size: T.Small,
+            color: m || h ? n.OnSurfaceSubdued : n.OnSurface
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Y as ComboboxButton
+};

package/dist/components/combobox/combobox-item.d.ts

@@ -0,0 +1,8 @@
+import { ComboboxItem as ComboboxItemType } from './types.js';
+type ComboboxItemProps = {
+    item: ComboboxItemType;
+    asPlainText?: boolean;
+};
+export declare function ComboboxItem({ item, asPlainText }: ComboboxItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=combobox-item.d.ts.map

package/dist/components/combobox/combobox-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAahE,KAAK,iBAAiB,GAAG;IACxB,IAAI,EAAE,gBAAgB,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,iBAAiB,2CAiBpE"}

package/dist/components/combobox/combobox-item.js

@@ -0,0 +1,25 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Flex as t } from "@chakra-ui/react";
+import { Box as n } from "../box/box.js";
+import { Tag as r } from "../tag/tag.js";
+import { ThemeSpaceVariable as d } from "../../theme/theme-types.js";
+const c = {
+  info: r.Info,
+  success: r.Success,
+  warning: r.Warning,
+  error: r.Error,
+  primary: r.Primary,
+  secondary: r.Secondary,
+  neutral: r,
+  undefined: r.ComboboxItem
+};
+function x({ item: o, asPlainText: a }) {
+  const l = o.variant || "neutral", p = c[l];
+  return a ? /* @__PURE__ */ i(t, { gap: d.XSmall, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: [
+    o.prepend,
+    o.label
+  ] }) : /* @__PURE__ */ e(n, { overflow: "hidden", children: /* @__PURE__ */ e(p, { prepend: o.prepend, dot: o.dot, children: /* @__PURE__ */ e(n, { display: "block", overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", children: o.label }) }) });
+}
+export {
+  x as ComboboxItem
+};

package/dist/components/combobox/combobox-menu.d.ts

@@ -0,0 +1,7 @@
+import { ComboboxInnerProps } from './types.js';
+export declare function CheckboxOrRadioButton({ isSingleSelect, isChecked, }: {
+    isSingleSelect: boolean;
+    isChecked: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ComboboxMenu({ asPlainText, inputValue, selectedItems, displayItems, toggleItem, highlightState, openState, parentStrings, isSingleSelect, isSearching, isReadOnly, isHidingItems, popoverWidth, popoverPlacement, previousSelectedItems, parentRef, popupRef, footerContent, subMenuState, translation, }: ComboboxInnerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=combobox-menu.d.ts.map

package/dist/components/combobox/combobox-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-menu.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox-menu.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuClD,wBAAgB,qBAAqB,CAAC,EACrC,cAAc,EACd,SAAS,GACT,EAAE;IACF,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;CACnB,2CAwBA;AAED,wBAAgB,YAAY,CAAC,EAC5B,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,UAAU,EACV,cAAc,EACd,SAAS,EACT,aAAa,EACb,cAAc,EACd,WAAW,EACX,UAAU,EACV,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,SAAS,EACT,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,WAAW,GACX,EAAE,kBAAkB,2CAqJpB"}

package/dist/components/combobox/combobox-menu.js

@@ -0,0 +1,217 @@
+import { jsxs as l, jsx as i, Fragment as K } from "react/jsx-runtime";
+import { autoUpdate as L, computePosition as N, flip as Q } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { Fragment as D, useState as Z, useEffect as R } from "react";
+import { Box as d, Flex as g } from "@chakra-ui/react";
+import { ComboboxItem as oo } from "./combobox-item.js";
+import { interpolate as ro } from "./translations.js";
+import { ThemeColorVariable as o, ThemeShadowVariable as no, ThemeRadiusVariable as X, ThemeSpaceVariable as t, ThemeIconSizeVariable as P, ThemeFontSizeVariable as eo, ThemeBorderVariable as to } from "../../theme/theme-types.js";
+import { Text as I } from "../text/text.js";
+import { Icon as B } from "../icon/icon.js";
+import { Icons as C } from "../icon/types.js";
+const io = (n, e, u, a, b) => {
+  const [m, s] = Z({
+    transform: "translate(0, 0)",
+    minWidth: 0
+  });
+  return R(() => {
+    if (!n.current || !e.current || !u) return () => {
+    };
+    const S = async () => {
+      if (n.current && e.current && u) {
+        const { width: p } = n.current.getBoundingClientRect(), { x: h, y: x } = await N(n.current, e.current, {
+          placement: b || "bottom-start",
+          middleware: [Q()]
+        });
+        s({
+          transform: `translate(${h}px, ${x}px)`,
+          minWidth: a || p
+        });
+      }
+    };
+    return L(n.current, e.current, S);
+  }, [n, e, u, b, a]), m;
+};
+function ao({
+  isSingleSelect: n,
+  isChecked: e
+}) {
+  return /* @__PURE__ */ i(
+    d,
+    {
+      position: "relative",
+      width: "24px",
+      height: "24px",
+      flexShrink: "0",
+      border: `${n && e ? 8 : 2}px solid ${e ? o.Primary : o.OnBackground}`,
+      backgroundColor: e && !n ? o.Primary : "auto",
+      borderRadius: n ? "50%" : X.Small,
+      children: !n && e && /* @__PURE__ */ i(
+        B,
+        {
+          top: "-2px",
+          position: "absolute",
+          width: P.Small,
+          color: o.Surface,
+          icon: C.Checkbox
+        }
+      )
+    }
+  );
+}
+function So({
+  asPlainText: n,
+  inputValue: e,
+  selectedItems: u,
+  displayItems: a,
+  toggleItem: b,
+  highlightState: m,
+  openState: s,
+  parentStrings: S,
+  isSingleSelect: p,
+  isSearching: h,
+  isReadOnly: x,
+  isHidingItems: j,
+  popoverWidth: H,
+  popoverPlacement: A,
+  previousSelectedItems: k,
+  parentRef: E,
+  popupRef: O,
+  footerContent: v,
+  subMenuState: M,
+  translation: T
+}) {
+  const U = io(
+    E,
+    O,
+    s.isOpen,
+    H,
+    A
+  ), W = (r) => {
+    m.set(r);
+  };
+  return /* @__PURE__ */ l(
+    d,
+    {
+      display: s.isOpen ? "block" : "none",
+      inset: "0 auto auto 0",
+      position: "fixed",
+      zIndex: "50",
+      visibility: "visible",
+      backgroundColor: o.Surface,
+      borderRadius: X.Medium,
+      boxShadow: no.Medium,
+      color: o.OnSurface,
+      overflow: "hidden",
+      style: U,
+      ref: O,
+      onClick: (r) => {
+        r.preventDefault(), r.stopPropagation(), p && s.close();
+      },
+      children: [
+        /* @__PURE__ */ l(
+          g,
+          {
+            as: "ul",
+            flexDirection: "column",
+            maxHeight: "300px",
+            overflowY: "auto",
+            overflowX: "hidden",
+            padding: `${t.Small} 0`,
+            children: [
+              h && a.length === 0 && e.length > 0 && /* @__PURE__ */ i(
+                I,
+                {
+                  px: t.Small,
+                  color: o.OnSurfaceSubdued,
+                  children: `${T.noMatchFor} "${e}"`
+                }
+              ),
+              a.map((r, f) => {
+                var z, V;
+                const y = u.some((c) => c.id === r.id), Y = (c) => {
+                  c.stopPropagation(), c.preventDefault(), b(r);
+                }, _ = (z = r.children) == null ? void 0 : z.length, w = r.id === "_back", $ = M.opened[M.opened.length - 1], F = r.id === ($ == null ? void 0 : $.id), q = w ? /* @__PURE__ */ l(g, { gap: t.XSmall, alignItems: "center", children: [
+                  /* @__PURE__ */ i(B, { icon: C.Back, size: P.Small }),
+                  r.label
+                ] }) : /* @__PURE__ */ l(K, { children: [
+                  /* @__PURE__ */ l(g, { gap: t.XSmall, alignItems: "center", whiteSpace: "nowrap", children: [
+                    (V = S[r.id]) == null ? void 0 : V.map((c) => /* @__PURE__ */ l(D, { children: [
+                      /* @__PURE__ */ i(d, { color: o.OnSurfaceSubdued, children: c }),
+                      /* @__PURE__ */ i(d, { color: o.OnSurfaceSubdued, children: "/" })
+                    ] }, c)),
+                    /* @__PURE__ */ i(oo, { item: r, asPlainText: n })
+                  ] }),
+                  x ? void 0 : _ && !F && !h ? /* @__PURE__ */ i(
+                    B,
+                    {
+                      icon: C.Forward,
+                      size: P.Small,
+                      color: o.OnBackgroundSubdued
+                    }
+                  ) : /* @__PURE__ */ i(ao, { isSingleSelect: p, isChecked: y })
+                ] }), G = k.length > 0 && k.length - 1 === f && k.length < a.length, J = !x && !h && (G || (w || F));
+                return /* @__PURE__ */ l(D, { children: [
+                  /* @__PURE__ */ i(
+                    g,
+                    {
+                      as: "li",
+                      width: "100%",
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      padding: `${t.Small} ${t.Medium}`,
+                      gap: t.Medium,
+                      textDecoration: "none",
+                      backgroundColor: m.index === f ? o.AccentHoverAlpha : "",
+                      onClick: Y,
+                      tabIndex: -1,
+                      onMouseEnter: () => W(f),
+                      "data-is-active-index": m.index === f,
+                      "aria-selected": y,
+                      children: q
+                    }
+                  ),
+                  J && /* @__PURE__ */ i(
+                    d,
+                    {
+                      margin: `${t.Small} ${w ? 0 : t.Medium}`,
+                      height: "1px",
+                      flexShrink: 0,
+                      backgroundColor: o.OnBackgroundBorder
+                    }
+                  )
+                ] }, r.id);
+              }),
+              j && /* @__PURE__ */ i(
+                I,
+                {
+                  px: t.Small,
+                  py: t.Small,
+                  color: o.OnSurfaceSubdued,
+                  fontSize: eo.Small,
+                  children: ro(T.showMaxItems, {
+                    count: a.length
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        v && /* @__PURE__ */ i(
+          d,
+          {
+            position: "sticky",
+            bottom: "0",
+            backgroundColor: o.Surface,
+            padding: `${t.Small} ${t.Medium}`,
+            borderTop: `${to.XSmall} ${o.OnSurfaceBorder}`,
+            children: v
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ao as CheckboxOrRadioButton,
+  So as ComboboxMenu
+};

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

@@ -0,0 +1,9 @@
+export declare const SingleSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const MultiSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const Invalid: () => import("react/jsx-runtime").JSX.Element;
+export declare const Sizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const GhostVariant: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithItemsAsPlainText: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithFooterContent: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=combobox.composition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.composition.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.composition.tsx"],"names":[],"mappings":"AAgJA,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,WAAW,+CAmBvB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAiDpB,CAAC;AAEF,eAAO,MAAM,OAAO,+CAoBnB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAyEjB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAoBxB,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAyBhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,+CAyB7B,CAAC"}

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

@@ -0,0 +1,10 @@
+import { ComboboxProps } from './types.js';
+/**
+ * A combination of a select and autocomplete input. Use as input where the options
+ * are many and can benefit from having a search filter. Can be used as both single select
+ * and multiselect.
+ *
+ * @see Docs https://bit.cloud/caspeco/casper-ui-library/components/combobox
+ */
+export declare function Combobox({ id, label, isSingleSelect, selectedItems, locale, size, variant, asPlainText, onSearch, items, maxVisibleItems, onChange, onBlur, isDisabled, isReadOnly, isRequired, placeholder, isInvalid, footerContent, popoverWidth, popoverPlacement, collapsed, ...props }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAIX,aAAa,EAKb,MAAM,SAAS,CAAC;AAoGjB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EACxB,EAAE,EACF,KAAU,EACV,cAAsB,EACtB,aAAkB,EAClB,MAAgB,EAChB,IAAW,EACX,OAAmB,EACnB,WAAmB,EACnB,QAAQ,EACR,KAAK,EACL,eAAe,EACf,QAAQ,EACR,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,EACX,SAAS,EACT,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAiB,EACjB,GAAG,KAAK,EACR,EAAE,aAAa,2CAsLf"}

package/dist/components/combobox/combobox.js

@@ -0,0 +1,189 @@
+import { jsxs as te, jsx as U } from "react/jsx-runtime";
+import { useState as b, useRef as W, useEffect as P, useMemo as z } from "react";
+import { Box as re } from "@chakra-ui/react";
+import { translations as oe } from "./translations.js";
+import { ComboboxMenu as le } from "./combobox-menu.js";
+import { ComboboxButton as ie } from "./combobox-button.js";
+const ce = (o, s) => {
+  const [n, e] = b(0), c = (l) => {
+    var p;
+    if (!s.current) return;
+    const S = [...s.current.querySelectorAll("li")];
+    S[l] && ((p = S[l]) == null || p.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    }), e(l));
+  };
+  return {
+    index: n,
+    set: c,
+    next: () => c((n + 1) % o.length),
+    previous: () => c((n - 1 + o.length) % o.length)
+  };
+}, se = (o, s, n, e) => {
+  const [c, r] = b(!1);
+  return P(() => {
+    e && r(!1);
+  }, [e, r]), { isOpen: c, close: () => {
+    s || n(""), r(!1);
+  }, open: () => {
+    c || e || (r(!0), o.set(0));
+  } };
+}, ae = (o, s) => {
+  const [n, e] = b([]), c = z(() => {
+    if (!n.length) return o;
+    const r = n[n.length - 1], f = {
+      id: "_back",
+      label: s.back
+    }, l = n[n.length - 1].children || [];
+    return r.isSelectableParent ? [f, r, ...l] : [f, ...l];
+  }, [n, o, s]);
+  return {
+    open: (r) => {
+      e((f) => [...f, r]);
+    },
+    back: () => {
+      n.length && e((r) => [...r.slice(0, n.length - 1)]);
+    },
+    opened: n,
+    current: c
+  };
+}, ue = (o) => z(() => {
+  const s = {};
+  function n(e, c) {
+    s[e.id] = [...c], e.children && e.children.forEach((r) => n(r, [...c, e.label]));
+  }
+  return o.forEach((e) => n(e, [])), s;
+}, [o]);
+function xe({
+  id: o,
+  label: s = "",
+  isSingleSelect: n = !1,
+  selectedItems: e = [],
+  locale: c = "en-US",
+  size: r = "md",
+  variant: f = "outline",
+  asPlainText: l = !1,
+  onSearch: S,
+  items: p,
+  maxVisibleItems: B,
+  onChange: j,
+  onBlur: y,
+  isDisabled: x,
+  isReadOnly: v,
+  isRequired: G,
+  placeholder: J,
+  isInvalid: A,
+  footerContent: K,
+  popoverWidth: Q,
+  popoverPlacement: X,
+  collapsed: Y = !1,
+  ...Z
+}) {
+  var _;
+  const [C, g] = b(""), k = oe[c], w = W(null), O = W(null), d = ae(p, k), $ = C.toLowerCase() === ((_ = e[0]) == null ? void 0 : _.label.toLowerCase()), H = C.length > 0 && !(l && $);
+  let u = d.current;
+  if (H) {
+    const t = [], h = (i) => {
+      t.push(i), i.children && i.children.forEach(h);
+    };
+    p.forEach(h), u = t.filter((i) => {
+      const I = i.label.toLowerCase().includes(C.toLowerCase());
+      return (!(i.children && i.children.length > 0) || i.isSelectableParent) && I;
+    });
+  }
+  const E = ce(u, O), a = se(E, l, g, x);
+  P(() => {
+    var t;
+    l && !a.isOpen && g(((t = e[0]) == null ? void 0 : t.label) || "");
+  }, [a.isOpen, e, l]);
+  const [q, R] = b([]);
+  P(() => {
+    !a.isOpen || n || R(e);
+  }, [a.isOpen]), H || (u = [
+    ...q,
+    ...u.filter((t) => !q.find((h) => h.label === t.label))
+  ]);
+  let F = !1;
+  v ? u = e : (F = u.length > (B ?? 1 / 0), u = u.slice(0, B));
+  const T = ue(p), D = (t) => {
+    var I, M, L, m;
+    if (v || x)
+      return;
+    if (t.id === "_back") {
+      d.back();
+      return;
+    }
+    (L = (M = (I = O.current) == null ? void 0 : I.parentNode) == null ? void 0 : M.querySelector("input")) == null || L.focus();
+    const h = d.opened.length > 0 && d.opened[d.opened.length - 1].id === t.id;
+    if (!H && !h && t.children && t.children.length > 0) {
+      d.open(t), requestAnimationFrame(() => E.set(1));
+      return;
+    }
+    let i = [t];
+    n || (e.some((N) => N.id === t.id) ? i = e.filter((N) => N.id !== t.id) : i = [...e, t]), g(l ? (m = i[0]) == null ? void 0 : m.label : ""), n && (i.length === 0 ? a.open() : a.close()), j && j(i);
+  }, ee = e.length === 0 ? J ?? k.search : void 0, ne = (t) => {
+    var h;
+    (h = w.current) != null && h.contains(t.relatedTarget) || (a.close(), y && y(e));
+  }, V = {
+    id: o,
+    asPlainText: l,
+    inputValue: C,
+    selectedItems: e,
+    displayItems: u,
+    toggleItem: D,
+    highlightState: E,
+    openState: a,
+    parentStrings: T,
+    // Button
+    size: r,
+    variant: f,
+    label: s,
+    placeHolderText: ee,
+    isDisabled: x,
+    isReadOnly: v,
+    isInvalid: A,
+    collapsed: Y,
+    setInputValue: g,
+    onSearch: S,
+    // Menu
+    isSingleSelect: n,
+    isSearching: H,
+    isHidingItems: F,
+    popoverWidth: Q,
+    popoverPlacement: X,
+    previousSelectedItems: q,
+    parentRef: w,
+    popupRef: O,
+    footerContent: K,
+    subMenuState: d,
+    translation: k
+  };
+  return /* @__PURE__ */ te(
+    re,
+    {
+      role: "combobox",
+      as: "label",
+      htmlFor: o,
+      className: "combobox",
+      ref: w,
+      onClick: a.open,
+      onBlur: ne,
+      overflow: "visible",
+      width: "100%",
+      "aria-expanded": a.isOpen,
+      "aria-invalid": A,
+      "aria-required": G,
+      "aria-disabled": x,
+      "aria-readonly": v,
+      ...Z,
+      children: [
+        /* @__PURE__ */ U(ie, { ...V }),
+        a.isOpen && /* @__PURE__ */ U(le, { ...V })
+      ]
+    }
+  );
+}
+export {
+  xe as Combobox
+};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=combobox.spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.spec.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/combobox.spec.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,3 @@
+export { Combobox } from './combobox.js';
+export type { ComboboxProps, Locales, ComboboxItem, ComboboxTagVariant, Placement } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,9 @@
+import { Translation } from './types.js';
+export type Locales = "en-US" | "nb-NO" | "da-DK" | "sv-SE" | "en-GB";
+export declare function interpolate(template: string, variables: {
+    [key: string]: string | number;
+}): string;
+export declare const translations: {
+    [key in Locales]: Translation;
+};
+//# sourceMappingURL=translations.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../lib/components/combobox/translations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAEtE,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;CAAE,UAE1F;AAUD,eAAO,MAAM,YAAY,EAAE;KACzB,GAAG,IAAI,OAAO,GAAG,WAAW;CAyB7B,CAAC"}