@pibit.ai/cure-design-system 0.3.26 → 0.3.30

package/dist/primitives/select/SearchInput.js

@@ -1,48 +1,50 @@
-import { jsx as n, jsxs as g, Fragment as N } from "react/jsx-runtime";
-import { useRef as C, useCallback as f, useEffect as I, useMemo as L } from "react";
-import { SearchMd as E, XClose as P } from "@untitledui/icons";
-import { ComboBox as z, Group as R, Input as _ } from "react-aria-components";
+import { jsx as a, jsxs as x, Fragment as C } from "react/jsx-runtime";
+import { useRef as I, useCallback as h, useEffect as L, useMemo as E } from "react";
+import { SearchMd as P, XClose as z } from "@untitledui/icons";
+import { ComboBox as R, Group as _, Input as j } from "react-aria-components";
 import { cx as u } from "../../utils/cn.js";
-import { getPlatformShortcutLabel as j } from "../../utils/keyboard-shortcut.js";
-import { sizes as x } from "./select.js";
-import { ButtonUtility as q } from "../button/button-utility.js";
-const B = {
+import { getPlatformShortcutLabel as q } from "../../utils/keyboard-shortcut.js";
+import { sizes as w } from "./select.js";
+import { ButtonUtility as B } from "../button/button-utility.js";
+const G = {
   sm: "h-8",
   md: "h-9",
   lg: "h-11"
-}, G = ({
+}, M = ({
   size: s,
   shortcut: i,
-  placeholder: p,
+  bordered: p = !1,
+  placeholder: m,
   shortcutClassName: d,
-  onKeyDown: m,
+  onKeyDown: f,
   onClear: o,
   hasValue: r,
   className: l
-}) => /* @__PURE__ */ n(
-  R,
+}) => /* @__PURE__ */ a(
+  _,
   {
-    className: ({ isFocusWithin: a, isDisabled: c }) => u(
+    className: ({ isFocusWithin: n, isDisabled: c }) => u(
       "relative flex w-full items-center gap-2 rounded-md bg-primary outline-hidden transition-shadow duration-100 ease-linear ring-inset",
+      p && "border border-secondary",
       c && "cursor-not-allowed bg-disabled_subtle",
-      a && "ring-1 ring-brand",
-      B[s],
-      x[s].root,
+      n && "ring-1 ring-brand",
+      G[s],
+      w[s].root,
       l
     ),
-    children: ({ isDisabled: a }) => /* @__PURE__ */ g(N, { children: [
-      /* @__PURE__ */ n(
-        E,
+    children: ({ isDisabled: n }) => /* @__PURE__ */ x(C, { children: [
+      /* @__PURE__ */ a(
+        P,
         {
           color: "var(--color-utility-gray-300)",
           className: "pointer-events-none size-4 flex-shrink-0"
         }
       ),
-      /* @__PURE__ */ n("div", { className: "relative flex w-full items-center gap-2", children: /* @__PURE__ */ n(
-        _,
+      /* @__PURE__ */ a("div", { className: "relative flex w-full items-center gap-2", children: /* @__PURE__ */ a(
+        j,
         {
-          placeholder: p,
-          onKeyDown: m,
+          placeholder: m,
+          onKeyDown: f,
           className: u(
             "z-10 w-full appearance-none bg-transparent text-sm text-primary caret-alpha-black/90 placeholder:text-placeholder_subtle focus:outline-hidden disabled:cursor-not-allowed disabled:text-disabled disabled:placeholder:text-disabled",
             r && "pr-6",
@@ -50,34 +52,34 @@ const B = {
           )
         }
       ) }),
-      /* @__PURE__ */ g("div", { className: "flex-shrink-0", children: [
-        r && !a && /* @__PURE__ */ n(
-          q,
+      /* @__PURE__ */ x("div", { className: "flex-shrink-0", children: [
+        r && !n && /* @__PURE__ */ a(
+          B,
           {
-            icon: /* @__PURE__ */ n(P, { size: 14 }),
+            icon: /* @__PURE__ */ a(z, { size: 14 }),
             color: "tertiary",
             onClick: o,
             "aria-label": "Clear search"
           }
         ),
-        i && !r && /* @__PURE__ */ n(
+        i && !r && /* @__PURE__ */ a(
           "div",
           {
             className: u(
               "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",
-              a && "to-bg-disabled_subtle",
-              x[s].shortcut,
+              n && "to-bg-disabled_subtle",
+              w[s].shortcut,
               d
             ),
-            children: /* @__PURE__ */ n(
+            children: /* @__PURE__ */ a(
               "span",
               {
                 className: u(
                   "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
-                  a && "bg-transparent text-disabled"
+                  n && "bg-transparent text-disabled"
                 ),
                 "aria-hidden": "true",
-                children: j(["meta"], "K")
+                children: q(["meta"], "K")
               }
             )
           }
@@ -86,32 +88,33 @@ const B = {
     ] })
   }
 );
-function O({
+function Q({
   size: s = "sm",
   shortcut: i = !1,
   registerShortcut: p,
+  bordered: m = !1,
   placeholder: d,
-  shortcutClassName: m,
+  shortcutClassName: f,
   value: o,
   onChange: r,
   onKeyDown: l,
-  className: a,
+  className: n,
   isDisabled: c = !1,
-  "aria-label": w,
-  ...k
+  "aria-label": k,
+  ...v
 }) {
-  const h = C(null), y = p ?? i, b = f(() => {
+  const y = I(null), b = p ?? i, g = h(() => {
     var e, t;
-    (t = (e = h.current) == null ? void 0 : e.querySelector("input")) == null || t.focus();
+    (t = (e = y.current) == null ? void 0 : e.querySelector("input")) == null || t.focus();
   }, []);
-  I(() => {
-    if (!y || c) return;
+  L(() => {
+    if (!b || c) return;
     const e = (t) => {
-      (t.metaKey || t.ctrlKey) && !t.shiftKey && !t.altKey && t.key.toLowerCase() === "k" && (t.preventDefault(), t.stopPropagation(), b());
+      (t.metaKey || t.ctrlKey) && !t.shiftKey && !t.altKey && t.key.toLowerCase() === "k" && (t.preventDefault(), t.stopPropagation(), g());
     };
     return window.addEventListener("keydown", e, { capture: !0 }), () => window.removeEventListener("keydown", e, { capture: !0 });
-  }, [y, c, b]);
-  const v = f(
+  }, [b, c, g]);
+  const S = h(
     (e) => {
       if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "k") {
         e.preventDefault(), e.stopPropagation();
@@ -120,38 +123,39 @@ function O({
       e.key === "Enter" && (e.preventDefault(), e.stopPropagation()), l == null || l(e);
     },
     [l]
-  ), S = f(() => {
+  ), K = h(() => {
     r == null || r("");
-  }, [r]), K = L(() => !!o && o.length > 0, [o]);
-  return /* @__PURE__ */ n(
-    z,
+  }, [r]), N = E(() => !!o && o.length > 0, [o]);
+  return /* @__PURE__ */ a(
+    R,
     {
-      ...k,
-      ref: h,
+      ...v,
+      ref: y,
       inputValue: o,
       onInputChange: r,
       menuTrigger: "manual",
       items: [],
       allowsCustomValue: !0,
       isDisabled: c,
-      "aria-label": w || d || "Search",
-      className: u("w-xs", a),
-      children: () => /* @__PURE__ */ n(
-        G,
+      "aria-label": k || d || "Search",
+      className: u("w-xs", n),
+      children: () => /* @__PURE__ */ a(
+        M,
         {
           size: s,
           shortcut: i,
+          bordered: m,
           placeholder: d,
-          shortcutClassName: m,
-          onKeyDown: v,
-          onClear: S,
-          hasValue: K,
-          className: a
+          shortcutClassName: f,
+          onKeyDown: S,
+          onClear: K,
+          hasValue: N,
+          className: n
         }
       )
     }
   );
 }
 export {
-  O as default
+  Q as default
 };