@pibit.ai/cure-design-system 0.4.0 → 0.5.0

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 { TextField as Z, Group as A, Input as W } from "react-aria-components";
+import { Group as Z, Input as A, TextField 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 { 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 { useState as H, useContext as ee, createContext as re, useEffect as ae } from "react";
+import { HintText as G } from "./hint-text.js";
+import { EyeOff as te, Eye as ie, XClose as se, HelpCircle as le, 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";
-const G = {
+import { getPlatformShortcutLabel as ue } from "../../utils/keyboard-shortcut.js";
+import { Badge as ge } from "../badge/badge.js";
+const X = {
   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,
+}, J = ({
+  ref: o,
+  isReadOnly: f,
+  tooltip: c,
   shortcut: N,
   groupRef: C,
   size: _ = "sm",
   isInvalid: h,
-  isDisabled: o,
-  icon: b,
-  iconTrailing: v,
+  isDisabled: u,
+  icon: v,
+  iconTrailing: x,
   placeholder: B,
-  wrapperClassName: S,
+  wrapperClassName: E,
   tooltipClassName: j,
   inputClassName: k,
   iconClassName: L,
@@ -35,11 +36,11 @@ const G = {
   trailingIconCount: g,
   mode: m,
   // Omit this prop to avoid invalid HTML attribute warning
-  isRequired: H,
-  customStyles: E,
-  ...F
+  isRequired: V,
+  customStyles: F,
+  ...P
 }) => {
-  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 = c || h || x || T, q = v, [w, y] = H([]), [d, b] = H(""), e = ee(M), s = (e == null ? void 0 : e.size) || _, l = D({
     sm: {
       root: i(
         "p-2 h-8",
@@ -87,74 +88,74 @@ const G = {
     }
   }), $ = () => {
     var t;
-    const a = x.trim();
+    const a = d.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(""));
-  }, M = (a) => {
-    var t, l, K;
+    ), y((n) => [...n, a]), b(""));
+  }, I = (a) => {
+    var t, n, K;
     if (m === "tag") {
       if (a.key === "Enter" || a.key === ",") {
         a.preventDefault();
-        const u = x.trim();
-        u && ((t = e == null ? void 0 : e.onChange) == null || t.call(
+        const p = d.trim();
+        p && ((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(""));
+          e != null && e.value ? (e == null ? void 0 : e.value) + "," + p : p
+        ), y((O) => [...O, p]), b(""));
       }
-      if (a.key === "Backspace" && !x)
+      if (a.key === "Backspace" && !d)
         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 p = e.value.split(",").map((O) => O.trim()).filter(Boolean);
+          p.pop(), (n = e.onChange) == null || n.call(e, p.join(", "));
         } else
           (K = e == null ? void 0 : e.onChange) == null || K.call(e, "");
     }
-  }, Q = (a) => {
+  }, S = (a) => {
     const t = a.target.value;
-    m === "tag" && w(t);
+    m === "tag" && b(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 = w.filter((K, p) => p !== a);
+    y(t), (n = e == null ? void 0 : e.onChange) == null || n.call(e, t.join(", "));
   };
   return ae(() => {
     if (m === "tag")
       if (e != null && e.value) {
         const a = e.value.split(",").map((t) => t.trim()).filter(Boolean);
-        p(a);
+        y(a);
       } else
-        p([]);
+        y([]);
   }, [e == null ? void 0 : e.value]), /* @__PURE__ */ R(
-    A,
+    Z,
     {
-      isDisabled: o,
+      isDisabled: u,
       isInvalid: h,
       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",
+        a && !t && !f && "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
+        E,
+        l[s].wrapper
       ),
       children: [
-        b && /* @__PURE__ */ r(
-          b,
+        v && /* @__PURE__ */ r(
+          v,
           {
             className: i(
               "pointer-events-none absolute size-5 text-fg-quaternary",
-              o && "text-fg-disabled",
-              n[s].iconLeading,
+              u && "text-fg-disabled",
+              l[s].iconLeading,
               e == null ? void 0 : e.iconClassName,
               L
             )
@@ -165,12 +166,12 @@ const G = {
           {
             className: i(
               "flex flex-wrap w-full items-center justify-start gap-1 pl-1.5",
-              o && "text-fg-disabled"
+              u && "text-fg-disabled"
             ),
             children: [
-              f.map((a, t) => (
+              w.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__ */ R(ge, { className: "rounded-md bg-primary border border-secondary px-2 py-1 pointer-events-auto!", children: [
                   a,
                   /* @__PURE__ */ r(
                     se,
@@ -185,17 +186,17 @@ const G = {
                 "input",
                 {
                   type: "text",
-                  value: x,
-                  onChange: Q,
-                  onKeyDown: M,
-                  placeholder: f.length === 0 ? B : "",
-                  disabled: o,
+                  value: d,
+                  onChange: S,
+                  onKeyDown: I,
+                  placeholder: w.length === 0 ? B : "",
+                  disabled: u,
                   onBlur: $,
                   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],
+                    "disabled:cursor-not-allowed disabled:text-disabled group-disabled:pointer-events-none",
+                    l[s].root,
+                    X[s],
                     k
                   )
                 }
@@ -204,51 +205,51 @@ const G = {
           }
         ),
         m !== "tag" && /* @__PURE__ */ r(
-          W,
+          A,
           {
-            ...F,
-            ref: d,
+            ...P,
+            ref: o,
             placeholder: B,
             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],
+              "disabled:cursor-not-allowed disabled:text-disabled group-disabled:pointer-events-none",
+              l[s].root,
+              X[s],
               e == null ? void 0 : e.inputClassName,
               k
             ),
-            style: { ...E }
+            style: { ...F }
           }
         ),
-        T && !v && /* @__PURE__ */ r(
+        T && !x && /* @__PURE__ */ r(
           "div",
           {
             className: i(
               "absolute flex items-center justify-center",
-              n[s].iconTrailing,
-              n[s].trailingIconCount
+              l[s].iconTrailing,
+              l[s].trailingIconCount
             ),
             children: T
           }
         ),
-        y && !h && /* @__PURE__ */ r(de, { title: y, placement: "top", children: /* @__PURE__ */ r(
+        c && !h && /* @__PURE__ */ r(de, { title: c, 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,
+              l[s].iconTrailing,
               e == null ? void 0 : e.tooltipClassName,
               j
             ),
-            children: /* @__PURE__ */ r(ne, { className: "size-4" })
+            children: /* @__PURE__ */ r(le, { className: "size-4" })
           }
         ) }),
         h && /* @__PURE__ */ r(
-          le,
+          ne,
           {
             className: i(
               "pointer-events-none absolute size-4 text-fg-error-secondary",
-              n[s].iconTrailing,
+              l[s].iconTrailing,
               e == null ? void 0 : e.tooltipClassName,
               j
             )
@@ -259,28 +260,28 @@ 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
+              l[s].shortcut
             ),
             children: /* @__PURE__ */ r(
               "span",
               {
                 className: i(
                   "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
-                  o && "bg-transparent text-disabled"
+                  u && "bg-transparent text-disabled"
                 ),
                 "aria-hidden": "true",
-                children: typeof N == "string" ? N : "⌘K"
+                children: typeof N == "string" ? N : ue(["meta"], "K")
               }
             )
           }
         ),
-        v && /* @__PURE__ */ r(
-          v,
+        x && /* @__PURE__ */ r(
+          x,
           {
             className: i(
               "pointer-events-none absolute size-5 text-fg-quaternary",
-              o && "text-fg-disabled",
-              n[s].iconTrailing,
+              u && "text-fg-disabled",
+              l[s].iconTrailing,
               e == null ? void 0 : e.iconClassName,
               L
             )
@@ -290,102 +291,108 @@ const G = {
     }
   );
 };
-I.displayName = "InputBase";
-const X = ee({}), J = ({ className: d, ...c }) => /* @__PURE__ */ r(X.Provider, { value: c, children: /* @__PURE__ */ r(
-  Z,
+J.displayName = "InputBase";
+const M = re({}), Q = ({ className: o, ...f }) => /* @__PURE__ */ r(M.Provider, { value: f, children: /* @__PURE__ */ r(
+  W,
   {
-    ...c,
+    ...f,
     "data-input-wrapper": !0,
-    className: (y) => i(
+    className: (c) => i(
       "group flex h-max w-full flex-col items-start justify-start gap-1.5",
-      typeof d == "function" ? d(y) : d
+      typeof o == "function" ? o(c) : o
     )
   }
 ) });
-J.displayName = "TextField";
-const me = ({
-  size: d = "sm",
-  placeholder: c,
-  icon: y,
+Q.displayName = "TextField";
+const fe = ({
+  size: o = "sm",
+  placeholder: f,
+  icon: c,
   iconTrailing: N,
   label: C,
   supportingText: _,
   hint: h,
-  shortcut: o,
-  hideRequiredIndicator: b,
-  className: v,
+  shortcut: u,
+  hideRequiredIndicator: v,
+  className: x,
   ref: B,
-  groupRef: S,
+  groupRef: E,
   tooltip: j,
   iconClassName: k,
   inputClassName: L,
   wrapperClassName: T,
   tooltipClassName: g,
   inputType: m = "text",
-  customStyles: H = {},
-  containerStyles: E = {},
-  trailingAction: F,
+  customStyles: V = {},
+  containerStyles: F = {},
+  trailingAction: P,
   trailingIconCount: z,
   mode: q,
-  ...f
+  isDisabled: w,
+  isInvalid: y,
+  ...d
 }) => {
-  const [p, x] = P(!1), w = m === "password", e = w ? p ? "text" : "password" : m, s = f == null ? void 0 : f.isReadOnly;
+  const [b, e] = H(!1), s = m === "password", l = s ? b ? "text" : "password" : m, $ = d == null ? void 0 : d.isReadOnly;
   return /* @__PURE__ */ r(
-    J,
+    Q,
     {
-      style: E,
-      "aria-label": C ? void 0 : c,
-      ...f,
-      className: v,
-      children: ({ isRequired: n, isInvalid: $ }) => /* @__PURE__ */ R(Y, { children: [
+      style: F,
+      "aria-label": C ? void 0 : f,
+      ...d,
+      isDisabled: w,
+      isInvalid: y,
+      className: x,
+      children: ({ isRequired: I, isInvalid: S }) => /* @__PURE__ */ R(Y, { children: [
         C && /* @__PURE__ */ r(
           oe,
           {
-            className: i("color-text-label", ge[d]),
-            isRequired: b ? !b : n,
+            className: i("color-text-label", me[o]),
+            isRequired: v ? !v : I,
             children: C
           }
         ),
-        _ && /* @__PURE__ */ r(V, { className: "mt-[-5px] text-tertiary!", isInvalid: !1, children: _ }),
+        _ && /* @__PURE__ */ r(G, { className: "mt-[-5px] text-tertiary!", isInvalid: !1, children: _ }),
         /* @__PURE__ */ r(
-          I,
+          J,
           {
             ref: B,
-            groupRef: S,
-            size: d,
-            placeholder: c,
-            isReadOnly: s,
-            icon: y,
+            groupRef: E,
+            size: o,
+            placeholder: f,
+            isReadOnly: $,
+            isDisabled: w,
+            isInvalid: S,
+            icon: c,
             iconTrailing: N,
-            shortcut: o,
+            shortcut: u,
             iconClassName: k,
             inputClassName: L,
             wrapperClassName: T,
             tooltipClassName: g,
             tooltip: j,
-            type: e,
-            customStyles: H,
+            type: l,
+            customStyles: V,
             mode: q,
-            trailingAction: w ? /* @__PURE__ */ r(
+            trailingAction: s ? /* @__PURE__ */ r(
               "button",
               {
                 type: "button",
-                onClick: () => x(!p),
+                onClick: () => e(!b),
                 className: "text-fg-quaternary hover:text-fg-quaternary_hover focus:outline-none",
-                children: p ? /* @__PURE__ */ r(te, { className: "size-5" }) : /* @__PURE__ */ r(ie, { className: "size-5" })
+                children: b ? /* @__PURE__ */ r(te, { className: "size-5" }) : /* @__PURE__ */ r(ie, { className: "size-5" })
               }
-            ) : F,
+            ) : P,
             trailingIconCount: z
           }
         ),
-        h && /* @__PURE__ */ r(V, { size: d, isInvalid: $, children: h })
+        h && /* @__PURE__ */ r(G, { size: o, isInvalid: S, children: h })
       ] })
     }
   );
 };
-me.displayName = "Input";
+fe.displayName = "Input";
 export {
-  me as Input,
-  I as InputBase,
-  J as TextField
+  fe as Input,
+  J as InputBase,
+  Q as TextField
 };

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

@@ -1,6 +1,6 @@
 import { ReactNode, Ref } from 'react';
 import { LabelProps as AriaLabelProps } from 'react-aria-components';
-interface LabelProps extends AriaLabelProps {
+export interface LabelProps extends AriaLabelProps {
     children: ReactNode;
     isRequired?: boolean;
     tooltip?: string;
@@ -11,5 +11,4 @@ export declare const Label: {
     ({ isRequired, tooltip, tooltipDescription, className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export {};
 //# sourceMappingURL=label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAK1E,UAAU,UAAW,SAAQ,cAAc;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,KAAK;uEAMf,UAAU;;CA6CZ,CAAC"}
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAK1E,MAAM,WAAW,UAAW,SAAQ,cAAc;IAChD,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,KAAK;uEAMf,UAAU;;CA6CZ,CAAC"}

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"}