@pibit.ai/cure-design-system 0.3.21 → 0.3.24

package/dist/primitives/badge/badge.js

@@ -15,27 +15,27 @@ const y = {
     addonButton: "hover:bg-utility-gray-100 text-utility-gray-400 hover:text-utility-gray-500"
   },
   brand: {
-    root: "bg-utility-brand-50 text-utility-brand-600 ring-utility-brand-50",
+    root: "bg-utility-brand-50 text-utility-brand-700 ring-utility-brand-50",
     addon: "text-utility-brand-500",
     addonButton: "hover:bg-utility-brand-100 text-utility-brand-400 hover:text-utility-brand-500"
   },
   error: {
-    root: "bg-utility-error-100 text-utility-error-700 ring-utility-error-100",
+    root: "bg-utility-error-50 text-utility-error-700 ring-utility-error-50",
     addon: "text-utility-error-500",
     addonButton: "hover:bg-utility-error-100 text-utility-error-400 hover:text-utility-error-500"
   },
   warning: {
-    root: "bg-utility-warning-100 text-utility-warning-700 ring-utility-warning-100",
+    root: "bg-utility-warning-50 text-utility-warning-700 ring-utility-warning-50",
     addon: "text-utility-warning-500",
     addonButton: "hover:bg-utility-warning-100 text-utility-warning-400 hover:text-utility-warning-500"
   },
   success: {
-    root: "bg-utility-success-100 text-utility-success-700 ring-utility-success-100",
+    root: "bg-utility-success-50 text-utility-success-700 ring-utility-success-50",
     addon: "text-utility-success-500",
     addonButton: "hover:bg-utility-success-100 text-utility-success-400 hover:text-utility-success-500"
   },
   "gray-blue": {
-    root: "bg-utility-gray-blue-100 text-utility-gray-blue-700 ring-utility-gray-blue-100",
+    root: "bg-utility-gray-blue-100 text-utility-gray-blue-500 ring-utility-gray-blue-100",
     addon: "text-utility-gray-blue-500",
     addonButton: "hover:bg-utility-gray-blue-100 text-utility-gray-blue-400 hover:text-utility-gray-blue-500"
   },

package/dist/primitives/input/input.d.ts

@@ -20,7 +20,7 @@ export interface InputBaseProps extends TextFieldProps {
     wrapperClassName?: string;
     /** Class name for the tooltip. */
     tooltipClassName?: string;
-    /** Keyboard shortcut to display. */
+    /** Keyboard shortcut to display. When `true`, shows the platform-specific primary shortcut hint (⌘K on Apple platforms, Ctrl+K elsewhere). */
     shortcut?: string | boolean;
     ref?: Ref<HTMLInputElement>;
     groupRef?: Ref<HTMLDivElement>;

package/dist/primitives/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,cAAc,IAAI,kBAAkB,EACrC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAqB3E,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvD,gEAAgE;IAChE,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC/D,2DAA2D;IAC3D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED,eAAO,MAAM,SAAS;2SAuBnB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;;CAmTxC,CAAC;AAIF,UAAU,SAAS;IACjB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,cACf,SACE,SAAS,EACT,kBAAkB,EAClB,IAAI,CACF,cAAc,EACZ,MAAM,GACN,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,CACrB;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAID,eAAO,MAAM,SAAS;8BAA6B,cAAc;;CAehE,CAAC;AAIF,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,SAAS;IAC3D,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,sCAAsC;IACtC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,6BAA6B;IAC7B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;qUAyBf,UAAU;;CA+EZ,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,cAAc,IAAI,kBAAkB,EACrC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAsB3E,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IACvD,gEAAgE;IAChE,YAAY,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC/D,2DAA2D;IAC3D,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED,eAAO,MAAM,SAAS;2SAuBnB,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,MAAM,CAAC;;CAqTxC,CAAC;AAIF,UAAU,SAAS;IACjB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,cACf,SACE,SAAS,EACT,kBAAkB,EAClB,IAAI,CACF,cAAc,EACZ,MAAM,GACN,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,CACrB;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAID,eAAO,MAAM,SAAS;8BAA6B,cAAc;;CAehE,CAAC;AAIF,MAAM,WAAW,UAAW,SAAQ,cAAc,EAAE,SAAS;IAC3D,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACnC,sCAAsC;IACtC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,6BAA6B;IAC7B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,gDAAgD;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,KAAK;qUAyBf,UAAU;;CA+EZ,CAAC"}

package/dist/primitives/input/input.js

@@ -1,33 +1,34 @@
-import { jsx as r, jsxs as R, Fragment as Y } from "react/jsx-runtime";
+import { jsx as r, jsxs as S, Fragment as Y } from "react/jsx-runtime";
 import { TextField as Z, Group as A, Input as W } from "react-aria-components";
 import { cx as i, sortCx as D } from "../../utils/cn.js";
-import { useState as P, createContext as ee, useContext as re, useEffect as ae } from "react";
+import { useState as O, createContext as ee, useContext as re, useEffect as ae } from "react";
 import { HintText as V } from "./hint-text.js";
-import { EyeOff as te, Eye as ie, XClose as se, HelpCircle as ne, InfoCircle as le } from "@untitledui/icons";
+import { EyeOff as te, Eye as ie, XClose as le, HelpCircle as se, InfoCircle as ne } from "@untitledui/icons";
 import { Label as oe } from "./label.js";
 import { Tooltip as de, TooltipTrigger as pe } from "../tooltip/tooltip.js";
-import { Badge as ue } from "../badge/badge.js";
+import { getPlatformShortcutLabel as ue } from "../../utils/keyboard-shortcut.js";
+import { Badge as ge } from "../badge/badge.js";
 const G = {
   sm: "text-xs",
   md: "text-sm",
   lg: "text-md"
-}, ge = {
+}, me = {
   sm: "text-xs",
   md: "text-xs",
   lg: "text-sm"
 }, I = ({
   ref: d,
   isReadOnly: c,
-  tooltip: y,
+  tooltip: h,
   shortcut: N,
   groupRef: C,
   size: _ = "sm",
-  isInvalid: h,
+  isInvalid: y,
   isDisabled: o,
   icon: b,
   iconTrailing: v,
   placeholder: B,
-  wrapperClassName: S,
+  wrapperClassName: R,
   tooltipClassName: j,
   inputClassName: k,
   iconClassName: L,
@@ -39,7 +40,7 @@ const G = {
   customStyles: E,
   ...F
 }) => {
-  const z = y || h || v || T, q = b, [f, p] = P([]), [x, w] = P(""), e = re(X), s = (e == null ? void 0 : e.size) || _, n = D({
+  const z = h || y || v || T, q = b, [f, p] = O([]), [x, w] = O(""), e = re(X), l = (e == null ? void 0 : e.size) || _, s = D({
     sm: {
       root: i(
         "p-2 h-8",
@@ -85,15 +86,15 @@ const G = {
       tag: "rounded-md bg-primary border border-secondary p-2.5",
       wrapper: "rounded-lg"
     }
-  }), $ = () => {
+  }), P = () => {
     var t;
     const a = x.trim();
     a && ((t = e == null ? void 0 : e.onChange) == null || t.call(
       e,
       e != null && e.value ? (e == null ? void 0 : e.value) + "," + a : a
-    ), p((l) => [...l, a]), w(""));
+    ), p((n) => [...n, a]), w(""));
   }, M = (a) => {
-    var t, l, K;
+    var t, n, $;
     if (m === "tag") {
       if (a.key === "Enter" || a.key === ",") {
         a.preventDefault();
@@ -101,22 +102,22 @@ const G = {
         u && ((t = e == null ? void 0 : e.onChange) == null || t.call(
           e,
           e != null && e.value ? (e == null ? void 0 : e.value) + "," + u : u
-        ), p((O) => [...O, u]), w(""));
+        ), p((K) => [...K, u]), w(""));
       }
       if (a.key === "Backspace" && !x)
         if (e != null && e.value) {
-          const u = e.value.split(",").map((O) => O.trim()).filter(Boolean);
-          u.pop(), (l = e.onChange) == null || l.call(e, u.join(", "));
+          const u = e.value.split(",").map((K) => K.trim()).filter(Boolean);
+          u.pop(), (n = e.onChange) == null || n.call(e, u.join(", "));
         } else
-          (K = e == null ? void 0 : e.onChange) == null || K.call(e, "");
+          ($ = e == null ? void 0 : e.onChange) == null || $.call(e, "");
     }
   }, Q = (a) => {
     const t = a.target.value;
     m === "tag" && w(t);
   }, U = (a) => {
-    var l;
-    const t = f.filter((K, u) => u !== a);
-    p(t), (l = e == null ? void 0 : e.onChange) == null || l.call(e, t.join(", "));
+    var n;
+    const t = f.filter(($, u) => u !== a);
+    p(t), (n = e == null ? void 0 : e.onChange) == null || n.call(e, t.join(", "));
   };
   return ae(() => {
     if (m === "tag")
@@ -125,27 +126,27 @@ const G = {
         p(a);
       } else
         p([]);
-  }, [e == null ? void 0 : e.value]), /* @__PURE__ */ R(
+  }, [e == null ? void 0 : e.value]), /* @__PURE__ */ S(
     A,
     {
       isDisabled: o,
-      isInvalid: h,
+      isInvalid: y,
       ref: C,
-      className: ({ isFocusWithin: a, isDisabled: t, isInvalid: l }) => i(
+      className: ({ isFocusWithin: a, isDisabled: t, isInvalid: n }) => i(
         "relative flex w-full flex-row place-content-center place-items-center bg-primary border border-secondary duration-100 ease-linear",
         a && !t && !c && "ring-1 ring-brand",
         // Disabled state styles
         t && "cursor-not-allowed bg-disabled_subtle ring-disabled",
         "group-disabled:cursor-not-allowed group-disabled:bg-disabled_subtle group-disabled:ring-disabled",
         // Invalid state styles
-        l && "ring-error_subtle",
+        n && "ring-error_subtle",
         "group-invalid:ring-error_subtle",
         // Invalid state with focus-within styles
-        l && a && "ring-2 ring-error",
+        n && a && "ring-2 ring-error",
         a && "group-invalid:ring-2 group-invalid:ring-error",
         e == null ? void 0 : e.wrapperClassName,
-        S,
-        n[s].wrapper
+        R,
+        s[l].wrapper
       ),
       children: [
         b && /* @__PURE__ */ r(
@@ -154,13 +155,13 @@ const G = {
             className: i(
               "pointer-events-none absolute size-5 text-fg-quaternary",
               o && "text-fg-disabled",
-              n[s].iconLeading,
+              s[l].iconLeading,
               e == null ? void 0 : e.iconClassName,
               L
             )
           }
         ),
-        m === "tag" && /* @__PURE__ */ R(
+        m === "tag" && /* @__PURE__ */ S(
           "div",
           {
             className: i(
@@ -170,10 +171,10 @@ const G = {
             children: [
               f.map((a, t) => (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                /* @__PURE__ */ r("div", { onClick: (l) => l.stopPropagation(), children: /* @__PURE__ */ R(ue, { className: "rounded-md bg-primary border border-secondary px-2 py-1 pointer-events-auto!", children: [
+                /* @__PURE__ */ r("div", { onClick: (n) => n.stopPropagation(), children: /* @__PURE__ */ S(ge, { className: "rounded-md bg-primary border border-secondary px-2 py-1 pointer-events-auto!", children: [
                   a,
                   /* @__PURE__ */ r(
-                    se,
+                    le,
                     {
                       className: "size-4 cursor-pointer text-fg-quaternary hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
                       onClick: () => U(t)
@@ -190,12 +191,12 @@ const G = {
                   onKeyDown: M,
                   placeholder: f.length === 0 ? B : "",
                   disabled: o,
-                  onBlur: $,
+                  onBlur: P,
                   className: i(
                     "bg-transparent outline-none flex-1 min-w-[50px] w-full text-primary placeholder:text-placeholder_subtle",
                     o && "cursor-not-allowed text-disabled",
-                    n[s].root,
-                    G[s],
+                    s[l].root,
+                    G[l],
                     k
                   )
                 }
@@ -212,8 +213,8 @@ const G = {
             className: i(
               "m-0 w-full bg-transparent text-primary ring-0 outline-hidden placeholder:text-placeholder_subtle autofill:rounded-lg autofill:text-primary",
               o && "cursor-not-allowed text-disabled",
-              n[s].root,
-              G[s],
+              s[l].root,
+              G[l],
               e == null ? void 0 : e.inputClassName,
               k
             ),
@@ -225,30 +226,30 @@ const G = {
           {
             className: i(
               "absolute flex items-center justify-center",
-              n[s].iconTrailing,
-              n[s].trailingIconCount
+              s[l].iconTrailing,
+              s[l].trailingIconCount
             ),
             children: T
           }
         ),
-        y && !h && /* @__PURE__ */ r(de, { title: y, placement: "top", children: /* @__PURE__ */ r(
+        h && !y && /* @__PURE__ */ r(de, { title: h, placement: "top", children: /* @__PURE__ */ r(
           pe,
           {
             className: i(
               "absolute cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
-              n[s].iconTrailing,
+              s[l].iconTrailing,
               e == null ? void 0 : e.tooltipClassName,
               j
             ),
-            children: /* @__PURE__ */ r(ne, { className: "size-4" })
+            children: /* @__PURE__ */ r(se, { className: "size-4" })
           }
         ) }),
-        h && /* @__PURE__ */ r(
-          le,
+        y && /* @__PURE__ */ r(
+          ne,
           {
             className: i(
               "pointer-events-none absolute size-4 text-fg-error-secondary",
-              n[s].iconTrailing,
+              s[l].iconTrailing,
               e == null ? void 0 : e.tooltipClassName,
               j
             )
@@ -259,7 +260,7 @@ const G = {
           {
             className: i(
               "pointer-events-none absolute inset-y-0.5 right-0.5 z-10 flex items-center rounded-r-[inherit] bg-linear-to-r from-transparent pl-8",
-              n[s].shortcut
+              s[l].shortcut
             ),
             children: /* @__PURE__ */ r(
               "span",
@@ -269,7 +270,7 @@ const G = {
                   o && "bg-transparent text-disabled"
                 ),
                 "aria-hidden": "true",
-                children: typeof N == "string" ? N : "⌘K"
+                children: typeof N == "string" ? N : ue(["meta"], "K")
               }
             )
           }
@@ -280,7 +281,7 @@ const G = {
             className: i(
               "pointer-events-none absolute size-5 text-fg-quaternary",
               o && "text-fg-disabled",
-              n[s].iconTrailing,
+              s[l].iconTrailing,
               e == null ? void 0 : e.iconClassName,
               L
             )
@@ -296,26 +297,26 @@ const X = ee({}), J = ({ className: d, ...c }) => /* @__PURE__ */ r(X.Provider,
   {
     ...c,
     "data-input-wrapper": !0,
-    className: (y) => i(
+    className: (h) => i(
       "group flex h-max w-full flex-col items-start justify-start gap-1.5",
-      typeof d == "function" ? d(y) : d
+      typeof d == "function" ? d(h) : d
     )
   }
 ) });
 J.displayName = "TextField";
-const me = ({
+const fe = ({
   size: d = "sm",
   placeholder: c,
-  icon: y,
+  icon: h,
   iconTrailing: N,
   label: C,
   supportingText: _,
-  hint: h,
+  hint: y,
   shortcut: o,
   hideRequiredIndicator: b,
   className: v,
   ref: B,
-  groupRef: S,
+  groupRef: R,
   tooltip: j,
   iconClassName: k,
   inputClassName: L,
@@ -329,7 +330,7 @@ const me = ({
   mode: q,
   ...f
 }) => {
-  const [p, x] = P(!1), w = m === "password", e = w ? p ? "text" : "password" : m, s = f == null ? void 0 : f.isReadOnly;
+  const [p, x] = O(!1), w = m === "password", e = w ? p ? "text" : "password" : m, l = f == null ? void 0 : f.isReadOnly;
   return /* @__PURE__ */ r(
     J,
     {
@@ -337,12 +338,12 @@ const me = ({
       "aria-label": C ? void 0 : c,
       ...f,
       className: v,
-      children: ({ isRequired: n, isInvalid: $ }) => /* @__PURE__ */ R(Y, { children: [
+      children: ({ isRequired: s, isInvalid: P }) => /* @__PURE__ */ S(Y, { children: [
         C && /* @__PURE__ */ r(
           oe,
           {
-            className: i("color-text-label", ge[d]),
-            isRequired: b ? !b : n,
+            className: i("color-text-label", me[d]),
+            isRequired: b ? !b : s,
             children: C
           }
         ),
@@ -351,11 +352,11 @@ const me = ({
           I,
           {
             ref: B,
-            groupRef: S,
+            groupRef: R,
             size: d,
             placeholder: c,
-            isReadOnly: s,
-            icon: y,
+            isReadOnly: l,
+            icon: h,
             iconTrailing: N,
             shortcut: o,
             iconClassName: k,
@@ -378,14 +379,14 @@ const me = ({
             trailingIconCount: z
           }
         ),
-        h && /* @__PURE__ */ r(V, { size: d, isInvalid: $, children: h })
+        y && /* @__PURE__ */ r(V, { size: d, isInvalid: P, children: y })
       ] })
     }
   );
 };
-me.displayName = "Input";
+fe.displayName = "Input";
 export {
-  me as Input,
+  fe as Input,
   I as InputBase,
   J as TextField
 };

package/dist/primitives/multi-chips-select/MultiChipsSelect.d.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface SelectOption {
+    id: string;
+    label: string;
+}
+export interface MultiChipsSelectProps {
+    loading?: boolean;
+    options: SelectOption[];
+    selectedValues: SelectOption[];
+    onChange: Dispatch<SetStateAction<SelectOption[]>>;
+    /** Renders above the control (e.g. "Add document tags"). */
+    fieldLabel?: string;
+    placeholder?: string;
+    /** Invoked when the user chooses **Create "…"**; parent decides persistence / options refresh. */
+    onAddOption?: (label: string, key: string) => Promise<void>;
+    isDisabled?: boolean;
+    isSearchable?: boolean;
+}
+export declare function MultiChipsSelect({ loading, options, selectedValues, onChange, fieldLabel, placeholder, onAddOption, isDisabled, isSearchable, }: MultiChipsSelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MultiChipsSelect.d.ts.map

package/dist/primitives/multi-chips-select/MultiChipsSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiChipsSelect.d.ts","sourceRoot":"","sources":["../../../src/primitives/multi-chips-select/MultiChipsSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAGb,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAMf,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,cAAc,EAAE,YAAY,EAAE,CAAC;IAC/B,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC;IACnD,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kGAAkG;IAClG,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAoBD,wBAAgB,gBAAgB,CAAC,EAC/B,OAAe,EACf,OAAO,EACP,cAAc,EACd,QAAQ,EACR,UAAU,EACV,WAAmC,EACnC,WAAW,EACX,UAAkB,EAClB,YAAmB,GACpB,EAAE,qBAAqB,2CAoSvB"}

package/dist/primitives/multi-chips-select/MultiChipsSelect.js

@@ -0,0 +1,233 @@
+import { jsxs as m, jsx as o, Fragment as X } from "react/jsx-runtime";
+import { useState as E, useRef as z, useMemo as I, useCallback as $, useEffect as q } from "react";
+import { XClose as G, ChevronDown as H } from "@untitledui/icons";
+import { LoadingIndicator as J } from "../../applications/loading-indicator/loading-indicator.js";
+import { cx as F } from "../../utils/cn.js";
+import { tagKeyFromLabel as K } from "./tagKeyFromLabel.js";
+function _(f, l) {
+  const n = l.trim().toLowerCase();
+  return n ? f.some((d) => d.label.trim().toLowerCase() === n) : !1;
+}
+function A(f, l) {
+  const n = l.trim().toLowerCase();
+  if (!n) return !1;
+  const d = K(l);
+  return f.some(
+    (g) => g.label.trim().toLowerCase() === n || g.id === d
+  );
+}
+function re({
+  loading: f = !1,
+  options: l,
+  selectedValues: n,
+  onChange: d,
+  fieldLabel: g,
+  placeholder: O = "Search or add tags…",
+  onAddOption: w,
+  isDisabled: t = !1,
+  isSearchable: Q = !0
+}) {
+  const [x, s] = E(!1), [N, S] = E(""), [i, p] = E(0), C = z(null), h = z(null), c = N.trim(), v = c.toLowerCase(), k = I(() => {
+    const e = new Set(n.map((r) => r.id));
+    return l.filter((r) => !e.has(r.id));
+  }, [l, n]), a = I(() => v ? k.filter(
+    (e) => e.label.toLowerCase().includes(v)
+  ) : k, [k, v]), y = I(() => !(!c || t || _(l, c) || A(n, c)), [c, l, n, t]), L = $(() => {
+    s(!1);
+  }, []), b = a.length + (y ? 1 : 0);
+  q(() => {
+    p(0);
+  }, [v, a.length, y]), q(() => {
+    x || p(0);
+  }, [x]), q(() => {
+    const e = (r) => {
+      C.current && !C.current.contains(r.target) && L();
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [L]);
+  const M = (e) => {
+    n.some((r) => r.id === e.id) || (d((r) => [...r, e]), S(""), s(!0), p(0));
+  }, R = async () => {
+    if (!c || t || f) return;
+    const e = K(c), r = c.replace(/\s+/g, " ").trim();
+    _(l, r) || A(n, r) || (await (w == null ? void 0 : w(r, e)), M({ id: e, label: r }));
+  }, T = (e) => {
+    d(n.filter((r) => r.id !== e));
+  }, B = () => {
+    t || (s(!0), requestAnimationFrame(() => {
+      var e;
+      return (e = h.current) == null ? void 0 : e.focus();
+    }));
+  }, P = (e) => {
+    if (t) return;
+    const r = e.target;
+    if (!r.closest("button[data-chip-remove]")) {
+      if (h.current && (r === h.current || h.current.contains(r))) {
+        x || s(!0);
+        return;
+      }
+      e.preventDefault(), B();
+    }
+  }, U = (e) => {
+    var r;
+    if (e.key === "Escape") {
+      L(), (r = h.current) == null || r.blur();
+      return;
+    }
+    if (e.key === "ArrowDown" && !t && b > 0) {
+      e.preventDefault(), s(!0), p((u) => u < 0 ? 0 : u < b - 1 ? u + 1 : u);
+      return;
+    }
+    if (e.key === "ArrowUp" && !t && b > 0) {
+      e.preventDefault(), s(!0), p((u) => u <= 0 ? 0 : u - 1);
+      return;
+    }
+    if (e.key === "Enter") {
+      x && !t && i >= 0 && i < b && (e.preventDefault(), y && i === a.length ? R() : i < a.length && M(a[i]));
+      return;
+    }
+    e.key === "Backspace" && !N && n.length > 0 && (e.preventDefault(), d(n.slice(0, -1)));
+  }, j = x && !t && (a.length > 0 || y);
+  return /* @__PURE__ */ m("div", { ref: C, className: "relative w-full", children: [
+    g ? /* @__PURE__ */ o("span", { className: "mb-1.5 block text-xs font-medium text-secondary", children: g }) : null,
+    /* @__PURE__ */ m(
+      "div",
+      {
+        role: "combobox",
+        "aria-expanded": j,
+        "aria-haspopup": "listbox",
+        "aria-disabled": t,
+        onMouseDown: P,
+        className: F(
+          "flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border border-secondary bg-primary px-2 py-1 text-xs transition-all",
+          !t && "cursor-text",
+          t && "cursor-not-allowed opacity-60",
+          x && !t && "ring-1 ring-brand border-brand"
+        ),
+        children: [
+          n.map((e) => /* @__PURE__ */ m(
+            "span",
+            {
+              className: "flex max-w-full items-center gap-0.5 rounded py-px pl-1 pr-0.5 ring-1 ring-[var(--color-gray-200)]",
+              children: [
+                /* @__PURE__ */ o("span", { className: "max-w-[200px] truncate font-medium text-secondary", children: e.label }),
+                /* @__PURE__ */ o(
+                  "button",
+                  {
+                    type: "button",
+                    "data-chip-remove": !0,
+                    disabled: t,
+                    onClick: (r) => {
+                      r.stopPropagation(), t || T(e.id);
+                    },
+                    className: "flex shrink-0 items-center justify-center rounded-sm text-fg-quaternary hover:text-error-600 disabled:pointer-events-none",
+                    "aria-label": `Remove ${e.label}`,
+                    children: /* @__PURE__ */ o(G, { size: 12 })
+                  }
+                )
+              ]
+            },
+            e.id
+          )),
+          /* @__PURE__ */ o(
+            "input",
+            {
+              ref: h,
+              type: "text",
+              disabled: t,
+              className: "min-w-[4ch] flex-1 border-0 bg-transparent py-0.5 text-xs outline-none ring-0 focus:ring-0 disabled:cursor-not-allowed",
+              placeholder: n.length === 0 ? O : void 0,
+              value: N,
+              onChange: (e) => {
+                S(e.target.value), t || s(!0);
+              },
+              onFocus: () => {
+                t || s(!0);
+              },
+              onKeyDown: U,
+              readOnly: !Q
+            }
+          ),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              disabled: t,
+              className: "ml-auto flex shrink-0 items-center text-fg-quaternary",
+              "aria-label": "Toggle tag list",
+              onMouseDown: (e) => {
+                e.preventDefault(), !t && (s((r) => !r), requestAnimationFrame(() => {
+                  var r;
+                  return (r = h.current) == null ? void 0 : r.focus();
+                }));
+              },
+              children: /* @__PURE__ */ o(H, { size: 14 })
+            }
+          )
+        ]
+      }
+    ),
+    j ? /* @__PURE__ */ m(
+      "div",
+      {
+        className: "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-secondary bg-white shadow-lg",
+        role: "listbox",
+        children: [
+          /* @__PURE__ */ o("div", { className: "max-h-60 overflow-y-auto py-1", children: a.map((e, r) => /* @__PURE__ */ o(
+            "div",
+            {
+              role: "option",
+              "aria-selected": i === r,
+              onMouseEnter: () => p(r),
+              onMouseDown: (u) => {
+                u.preventDefault(), M(e);
+              },
+              className: F(
+                "cursor-pointer px-3 py-2 text-xs font-medium text-primary transition-colors hover:bg-primary_hover",
+                i === r && "bg-primary_hover"
+              ),
+              children: e.label
+            },
+            e.id
+          )) }),
+          y && w ? /* @__PURE__ */ m(X, { children: [
+            /* @__PURE__ */ o("div", { className: "border-t border-secondary" }),
+            /* @__PURE__ */ m(
+              "button",
+              {
+                type: "button",
+                disabled: f,
+                "aria-selected": i === a.length,
+                onMouseEnter: () => p(a.length),
+                className: F(
+                  "flex w-full items-center justify-between cursor-pointer px-3 py-2.5 text-left text-xs transition-colors hover:bg-primary_hover",
+                  i === a.length && "bg-primary_hover",
+                  f && "cursor-not-allowed opacity-60"
+                ),
+                onMouseDown: (e) => {
+                  e.preventDefault(), R();
+                },
+                children: [
+                  /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ o("span", { className: "text-tertiary", children: "Create " }),
+                    /* @__PURE__ */ m("span", { className: "font-medium text-primary", children: [
+                      '"',
+                      c,
+                      '"'
+                    ] })
+                  ] }),
+                  f ? /* @__PURE__ */ o(J, { size: "xs" }) : null
+                ]
+              }
+            )
+          ] }) : null,
+          a.length === 0 && !y ? /* @__PURE__ */ o("div", { className: "px-3 py-4 text-center text-xs text-tertiary", children: "No matching tags" }) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  re as MultiChipsSelect
+};

package/dist/primitives/multi-chips-select/index.d.ts

@@ -0,0 +1,3 @@
+export { MultiChipsSelect, type MultiChipsSelectProps, type SelectOption, } from './MultiChipsSelect';
+export { tagKeyFromLabel } from './tagKeyFromLabel';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/multi-chips-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/multi-chips-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,GAClB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}