@pibit.ai/cure-design-system 0.3.8 → 0.3.11

package/dist/primitives/input/input.js

@@ -1,80 +1,391 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { TextField as p, Label as b, Input as h, Text as m } from "react-aria-components";
-import { cva as g } from "class-variance-authority";
-import { cn as y } from "../../utils/cn.js";
-const N = g(
-  [
-    "w-full rounded-lg border bg-white",
-    "transition-colors",
-    "focus:outline-none focus:ring-2 focus:ring-offset-0",
-    "disabled:opacity-50 disabled:cursor-not-allowed",
-    "placeholder:text-gray-400"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-8 px-3 text-sm",
-        md: "h-10 px-3 text-sm",
-        lg: "h-11 px-4 text-base"
-      },
-      variant: {
-        default: [
-          "border-gray-300",
-          "focus:border-brand-600 focus:ring-brand-600"
-        ],
-        error: [
-          "border-error-300",
-          "focus:border-error-600 focus:ring-error-600"
-        ]
-      }
+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 { 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 { 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 = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-md"
+}, ge = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm"
+}, I = ({
+  ref: d,
+  isReadOnly: c,
+  tooltip: y,
+  shortcut: N,
+  groupRef: C,
+  size: _ = "sm",
+  isInvalid: h,
+  isDisabled: o,
+  icon: b,
+  iconTrailing: v,
+  placeholder: B,
+  wrapperClassName: S,
+  tooltipClassName: j,
+  inputClassName: k,
+  iconClassName: L,
+  trailingAction: T,
+  trailingIconCount: g,
+  mode: m,
+  // Omit this prop to avoid invalid HTML attribute warning
+  isRequired: H,
+  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({
+    sm: {
+      root: i(
+        "p-2 h-8",
+        z && "pr-9",
+        q && "pl-10",
+        g && "pr-16"
+      ),
+      iconLeading: "left-3 size-4",
+      trailingIconCount: g === 2 ? "right-6 size-4" : "",
+      iconTrailing: "right-3 size-4",
+      shortcut: "pr-2.5",
+      tags: "flex gap-1",
+      tag: "rounded-md bg-primary border border-secondary px-2 py-1",
+      wrapper: "rounded-md"
+    },
+    md: {
+      root: i(
+        "px-3 py-2 h-9",
+        z && "pr-9.5",
+        q && "pl-10.5",
+        g && "pr-16"
+      ),
+      iconLeading: "left-3.5",
+      trailingIconCount: g === 2 ? "right-6.5" : "",
+      iconTrailing: "right-3.5",
+      shortcut: "pr-3",
+      tags: "flex gap-1",
+      tag: "rounded-md bg-primary border border-secondary px-2 py-1",
+      wrapper: "rounded-md"
     },
-    defaultVariants: {
-      size: "md",
-      variant: "default"
+    lg: {
+      root: i(
+        "px-3.5 py-2.5 h-11",
+        z && "pr-10",
+        q && "pl-11",
+        g && "pr-18"
+      ),
+      iconLeading: "left-4 size-5",
+      trailingIconCount: g === 2 ? "right-7 size-5" : "",
+      iconTrailing: "right-4 size-5",
+      shortcut: "pr-3.5",
+      tags: "flex gap-1",
+      tag: "rounded-md bg-primary border border-secondary p-2.5",
+      wrapper: "rounded-lg"
+    }
+  }), $ = () => {
+    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(""));
+  }, M = (a) => {
+    var t, l, 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(
+          e,
+          e != null && e.value ? (e == null ? void 0 : e.value) + "," + u : u
+        ), p((O) => [...O, 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(", "));
+        } else
+          (K = e == null ? void 0 : e.onChange) == null || K.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(", "));
+  };
+  return ae(() => {
+    if (m === "tag")
+      if (e != null && e.value) {
+        const a = e.value.split(",").map((t) => t.trim()).filter(Boolean);
+        p(a);
+      } else
+        p([]);
+  }, [e == null ? void 0 : e.value]), /* @__PURE__ */ R(
+    A,
+    {
+      isDisabled: o,
+      isInvalid: h,
+      ref: C,
+      className: ({ isFocusWithin: a, isDisabled: t, isInvalid: l }) => 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",
+        "group-invalid:ring-error_subtle",
+        // Invalid state with focus-within styles
+        l && a && "ring-2 ring-error",
+        a && "group-invalid:ring-2 group-invalid:ring-error",
+        e == null ? void 0 : e.wrapperClassName,
+        S,
+        n[s].wrapper
+      ),
+      children: [
+        b && /* @__PURE__ */ r(
+          b,
+          {
+            className: i(
+              "pointer-events-none absolute size-5 text-fg-quaternary",
+              o && "text-fg-disabled",
+              n[s].iconLeading,
+              e == null ? void 0 : e.iconClassName,
+              L
+            )
+          }
+        ),
+        m === "tag" && /* @__PURE__ */ R(
+          "div",
+          {
+            className: i(
+              "flex flex-wrap w-full items-center justify-start gap-1 pl-1.5",
+              o && "text-fg-disabled"
+            ),
+            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: [
+                  a,
+                  /* @__PURE__ */ r(
+                    se,
+                    {
+                      className: "size-4 cursor-pointer text-fg-quaternary hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+                      onClick: () => U(t)
+                    }
+                  )
+                ] }) }, `${a}-${t}`)
+              )),
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  type: "text",
+                  value: x,
+                  onChange: Q,
+                  onKeyDown: M,
+                  placeholder: f.length === 0 ? B : "",
+                  disabled: o,
+                  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],
+                    k
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        m !== "tag" && /* @__PURE__ */ r(
+          W,
+          {
+            ...F,
+            ref: d,
+            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],
+              e == null ? void 0 : e.inputClassName,
+              k
+            ),
+            style: { ...E }
+          }
+        ),
+        T && !v && /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              "absolute flex items-center justify-center",
+              n[s].iconTrailing,
+              n[s].trailingIconCount
+            ),
+            children: T
+          }
+        ),
+        y && !h && /* @__PURE__ */ r(de, { title: y, 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,
+              e == null ? void 0 : e.tooltipClassName,
+              j
+            ),
+            children: /* @__PURE__ */ r(ne, { className: "size-4" })
+          }
+        ) }),
+        h && /* @__PURE__ */ r(
+          le,
+          {
+            className: i(
+              "pointer-events-none absolute size-4 text-fg-error-secondary",
+              n[s].iconTrailing,
+              e == null ? void 0 : e.tooltipClassName,
+              j
+            )
+          }
+        ),
+        N && /* @__PURE__ */ r(
+          "div",
+          {
+            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
+            ),
+            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"
+                ),
+                "aria-hidden": "true",
+                children: typeof N == "string" ? N : "⌘K"
+              }
+            )
+          }
+        ),
+        v && /* @__PURE__ */ r(
+          v,
+          {
+            className: i(
+              "pointer-events-none absolute size-5 text-fg-quaternary",
+              o && "text-fg-disabled",
+              n[s].iconTrailing,
+              e == null ? void 0 : e.iconClassName,
+              L
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+I.displayName = "InputBase";
+const X = ee({}), J = ({ className: d, ...c }) => /* @__PURE__ */ r(X.Provider, { value: c, children: /* @__PURE__ */ r(
+  Z,
+  {
+    ...c,
+    "data-input-wrapper": !0,
+    className: (y) => i(
+      "group flex h-max w-full flex-col items-start justify-start gap-1.5",
+      typeof d == "function" ? d(y) : d
+    )
   }
-);
-function v({
-  label: o,
+) });
+J.displayName = "TextField";
+const me = ({
+  size: d = "sm",
   placeholder: c,
-  description: l,
-  errorMessage: t,
-  type: u = "text",
-  size: x,
-  variant: i,
-  className: f,
-  leftIcon: e,
-  rightIcon: a,
-  ...n
-}) {
-  const d = !!t || i === "error";
-  return /* @__PURE__ */ s(p, { ...n, isInvalid: d, className: "w-full", children: [
-    o && /* @__PURE__ */ s(b, { className: "block text-sm font-medium text-gray-700 mb-1", children: [
-      o,
-      n.isRequired && /* @__PURE__ */ r("span", { className: "text-error-600 ml-1", children: "*" })
-    ] }),
-    /* @__PURE__ */ s("div", { className: "relative", children: [
-      e && /* @__PURE__ */ r("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400", children: e }),
-      /* @__PURE__ */ r(
-        h,
-        {
-          type: u,
-          placeholder: c,
-          className: y(
-            N({ size: x, variant: d ? "error" : i }),
-            e && "pl-10",
-            a && "pr-10",
-            f
-          )
-        }
-      ),
-      a && /* @__PURE__ */ r("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", children: a })
-    ] }),
-    l && !t && /* @__PURE__ */ r(m, { slot: "description", className: "text-sm text-gray-500 mt-1", children: l }),
-    t && /* @__PURE__ */ r(m, { slot: "errorMessage", className: "text-sm text-error-600 mt-1", children: t })
-  ] });
-}
-v.displayName = "Input";
+  icon: y,
+  iconTrailing: N,
+  label: C,
+  supportingText: _,
+  hint: h,
+  shortcut: o,
+  hideRequiredIndicator: b,
+  className: v,
+  ref: B,
+  groupRef: S,
+  tooltip: j,
+  iconClassName: k,
+  inputClassName: L,
+  wrapperClassName: T,
+  tooltipClassName: g,
+  inputType: m = "text",
+  customStyles: H = {},
+  containerStyles: E = {},
+  trailingAction: F,
+  trailingIconCount: z,
+  mode: q,
+  ...f
+}) => {
+  const [p, x] = P(!1), w = m === "password", e = w ? p ? "text" : "password" : m, s = f == null ? void 0 : f.isReadOnly;
+  return /* @__PURE__ */ r(
+    J,
+    {
+      style: E,
+      "aria-label": C ? void 0 : c,
+      ...f,
+      className: v,
+      children: ({ isRequired: n, isInvalid: $ }) => /* @__PURE__ */ R(Y, { children: [
+        C && /* @__PURE__ */ r(
+          oe,
+          {
+            className: i("color-text-label", ge[d]),
+            isRequired: b ? !b : n,
+            children: C
+          }
+        ),
+        _ && /* @__PURE__ */ r(V, { className: "mt-[-5px] text-tertiary!", isInvalid: !1, children: _ }),
+        /* @__PURE__ */ r(
+          I,
+          {
+            ref: B,
+            groupRef: S,
+            size: d,
+            placeholder: c,
+            isReadOnly: s,
+            icon: y,
+            iconTrailing: N,
+            shortcut: o,
+            iconClassName: k,
+            inputClassName: L,
+            wrapperClassName: T,
+            tooltipClassName: g,
+            tooltip: j,
+            type: e,
+            customStyles: H,
+            mode: q,
+            trailingAction: w ? /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                onClick: () => x(!p),
+                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" })
+              }
+            ) : F,
+            trailingIconCount: z
+          }
+        ),
+        h && /* @__PURE__ */ r(V, { size: d, isInvalid: $, children: h })
+      ] })
+    }
+  );
+};
+me.displayName = "Input";
 export {
-  v as Input
+  me as Input,
+  I as InputBase,
+  J as TextField
 };

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

@@ -0,0 +1,15 @@
+import { ReactNode, Ref } from 'react';
+import { LabelProps as AriaLabelProps } from 'react-aria-components';
+interface LabelProps extends AriaLabelProps {
+    children: ReactNode;
+    isRequired?: boolean;
+    tooltip?: string;
+    tooltipDescription?: string;
+    ref?: Ref<HTMLLabelElement>;
+}
+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

@@ -0,0 +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"}

package/dist/primitives/input/label.js

@@ -0,0 +1,56 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { HelpCircle as n } from "@untitledui/icons";
+import { Label as c } from "react-aria-components";
+import { Tooltip as m, TooltipTrigger as d } from "../tooltip/tooltip.js";
+import { cx as o } from "../../utils/cn.js";
+const f = ({
+  isRequired: r,
+  tooltip: t,
+  tooltipDescription: i,
+  className: l,
+  ...a
+}) => /* @__PURE__ */ s(
+  c,
+  {
+    "data-label": "true",
+    ...a,
+    className: o(
+      "flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary",
+      l
+    ),
+    children: [
+      a.children,
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: o(
+            "hidden text-brand-tertiary",
+            r && "block",
+            typeof r > "u" && "group-required:block"
+          ),
+          children: "*"
+        }
+      ),
+      t && /* @__PURE__ */ e(
+        m,
+        {
+          title: t,
+          description: i,
+          placement: "top",
+          children: /* @__PURE__ */ e(
+            d,
+            {
+              isDisabled: !1,
+              className: "cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+              children: /* @__PURE__ */ e(n, { className: "size-4" })
+            }
+          )
+        }
+      )
+    ]
+  }
+);
+f.displayName = "Label";
+export {
+  f as Label
+};

package/dist/primitives/select/ExpandableSearchInput.d.ts

@@ -0,0 +1,15 @@
+import { FocusEventHandler, KeyboardEventHandler } from 'react';
+export interface ExpandableSearchInputProps {
+    placeholder?: string;
+    size?: "sm" | "md" | "lg";
+    value?: string;
+    onChange?: (value: string) => void;
+    onBlur?: FocusEventHandler;
+    onFocus?: FocusEventHandler;
+    onKeyDown?: KeyboardEventHandler;
+    className?: string;
+    expandedWidth?: number;
+    "aria-label"?: string;
+}
+export declare const ExpandableSearchInput: ({ size, placeholder, value, onChange, onBlur, onFocus, onKeyDown, className, expandedWidth, "aria-label": ariaLabel, }: ExpandableSearchInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExpandableSearchInput.d.ts.map

package/dist/primitives/select/ExpandableSearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableSearchInput.d.ts","sourceRoot":"","sources":["../../../src/primitives/select/ExpandableSearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,OAAO,CAAC;AAOf,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,eAAO,MAAM,qBAAqB,GAAI,wHAWnC,0BAA0B,4CAgH5B,CAAC"}

package/dist/primitives/select/ExpandableSearchInput.js

@@ -0,0 +1,115 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as q, useRef as A, useEffect as l, useCallback as x } from "react";
+import { SearchMd as I } from "@untitledui/icons";
+import { ButtonUtility as W } from "../button/button-utility.js";
+import C from "./SearchInput.js";
+import { cx as b } from "../../utils/cn.js";
+import { motion as f } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+import { AnimatePresence as F } from "../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js";
+const L = { sm: 36, md: 40, lg: 44 }, R = 300, G = ({
+  size: p = "sm",
+  placeholder: u,
+  value: c,
+  onChange: y,
+  onBlur: m,
+  onFocus: g,
+  onKeyDown: d,
+  className: E,
+  expandedWidth: S = R,
+  "aria-label": h
+}) => {
+  const e = !!(c != null && c.trim()), [r, o] = q(e), s = A(null), w = L[p];
+  l(() => {
+    e && o(!0);
+  }, [e]), l(() => {
+    var t;
+    if (r) {
+      const i = (t = s.current) == null ? void 0 : t.querySelector("input");
+      if (i) {
+        const n = requestAnimationFrame(() => i.focus());
+        return () => cancelAnimationFrame(n);
+      }
+    }
+  }, [r]), l(() => {
+    if (!r) return;
+    const t = (i) => {
+      var n;
+      (n = s.current) != null && n.contains(i.target) || e || o(!1);
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [r, e]);
+  const N = x(
+    (t) => {
+      var n;
+      const i = t.relatedTarget;
+      i && ((n = s.current) != null && n.contains(i)) || (e || o(!1), m == null || m(t));
+    },
+    [m, e]
+  ), k = x(
+    (t) => {
+      var i, n;
+      t.key === "Escape" && (e || (o(!1), (n = (i = s.current) == null ? void 0 : i.querySelector("button")) == null || n.focus())), d == null || d(t);
+    },
+    [d, e]
+  ), v = { type: "spring", damping: 25, stiffness: 300 };
+  return /* @__PURE__ */ a(
+    f.div,
+    {
+      ref: s,
+      className: b("flex items-center overflow-hidden", E),
+      onBlur: N,
+      animate: { width: r ? S : w },
+      transition: v,
+      children: /* @__PURE__ */ a(F, { initial: !1, mode: "popLayout", children: r ? /* @__PURE__ */ a(
+        f.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.08 },
+          className: "min-w-0 flex-1",
+          children: /* @__PURE__ */ a(
+            C,
+            {
+              size: p,
+              placeholder: u,
+              value: c,
+              onChange: y,
+              onFocus: g,
+              onKeyDown: k,
+              className: "w-full min-w-0",
+              "aria-label": h
+            }
+          )
+        },
+        "input"
+      ) : /* @__PURE__ */ a(
+        f.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: 0.08 },
+          className: "flex flex-shrink-0",
+          children: /* @__PURE__ */ a(
+            W,
+            {
+              icon: I,
+              size: "xs",
+              color: "tertiary",
+              tooltip: h || u || "Search",
+              className: b(
+                e && "bg-brand_subtle text-brand-500 hover:text-brand-600 hover:bg-brand_subtle/80"
+              ),
+              onClick: () => o(!0)
+            }
+          )
+        },
+        "icon"
+      ) })
+    }
+  );
+};
+export {
+  G as ExpandableSearchInput
+};