@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/inputs/radio-group.mjs

@@ -0,0 +1,131 @@
+import { jsxs as G, jsx as r } from "react/jsx-runtime";
+import { forwardRef as H, useState as L, useEffect as q, Children as A, isValidElement as B, cloneElement as I } from "react";
+import l from "classnames";
+import { Radio as J } from "./radio.mjs";
+import { FieldError as K } from "./helpers/field-error-text.mjs";
+import { FieldHelperText as M } from "./helpers/field-helper-text.mjs";
+const Q = {
+  vertical: {
+    sm: "space-y-[4px]",
+    md: "space-y-[8px]",
+    lg: "space-y-[12px]",
+    xl: "space-y-[16px]"
+  },
+  horizontal: {
+    sm: "space-x-[8px] rtl:space-x-reverse",
+    md: "space-x-[16px] rtl:space-x-reverse",
+    lg: "space-x-[24px] rtl:space-x-reverse",
+    xl: "space-x-[32px] rtl:space-x-reverse"
+  }
+}, _ = H(
+  ({
+    value: s,
+    defaultValue: C,
+    variant: p = "ghost",
+    size: c = "md",
+    color: i,
+    labelPlacement: n = "end",
+    disabled: m = !1,
+    label: d,
+    error: o,
+    helperText: x,
+    className: N,
+    containerClassName: h,
+    labelClassName: k,
+    errorClassName: y,
+    helperClassName: S,
+    direction: f = "vertical",
+    gap: V = "md",
+    options: v,
+    children: w,
+    onChange: z,
+    ...E
+  }, R) => {
+    const [t, u] = L(s !== void 0 ? s : C);
+    q(() => {
+      s !== void 0 && u(s);
+    }, [s]);
+    const g = (e) => {
+      const a = e.target.value;
+      s === void 0 && u(a), z?.(a);
+    }, j = () => v ? v.map((e) => {
+      const a = t !== void 0 && t.toString() === e.value.toString(), {
+        name: F,
+        label: O,
+        value: b,
+        disabled: P,
+        ...D
+      } = e;
+      return /* @__PURE__ */ r(
+        J,
+        {
+          name: F,
+          label: O,
+          value: b,
+          disabled: m || P,
+          checked: a,
+          variant: p,
+          size: c,
+          color: i,
+          labelPlacement: n,
+          onChange: g,
+          activeClassName: a ? "active" : "",
+          ...D
+        },
+        b
+      );
+    }) : A.map(w, (e) => {
+      if (!B(e)) return e;
+      const a = t !== void 0 && t.toString() === e.props.value?.toString();
+      return I(e, {
+        checked: a,
+        onChange: g,
+        disabled: m || e.props.disabled,
+        variant: e.props.variant || p,
+        size: e.props.size || c,
+        color: e.props.color ?? i,
+        labelPlacement: e.props.labelPlacement || n,
+        activeClassName: a ? "active" : ""
+      });
+    });
+    return /* @__PURE__ */ G(
+      "div",
+      {
+        ref: R,
+        "data-tucu": "radio-group",
+        className: l("flex flex-col", N),
+        ...E,
+        children: [
+          d && /* @__PURE__ */ r(
+            "label",
+            {
+              className: l(
+                "block text-sm font-medium mb-[6px] text-gray-800 dark:text-gray-100",
+                k
+              ),
+              children: d
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: l(
+                "flex",
+                f === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
+                Q[f][V],
+                h
+              ),
+              children: j()
+            }
+          ),
+          !o && x && /* @__PURE__ */ r(M, { size: "md", className: S, children: x }),
+          o && /* @__PURE__ */ r(K, { size: "md", error: o, className: y })
+        ]
+      }
+    );
+  }
+);
+export {
+  _ as RadioGroup,
+  _ as default
+};

package/components/inputs/radio.mjs

@@ -0,0 +1,168 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import d from "classnames";
+import { FieldError as C } from "./helpers/field-error-text.mjs";
+import { FieldHelperText as j } from "./helpers/field-helper-text.mjs";
+const c = {
+  base: "appearance-none cursor-pointer rounded-full disabled:bg-muted/10 disabled:border-border disabled:cursor-not-allowed transition-all duration-200",
+  size: {
+    sm: "h-[16px] w-[16px]",
+    md: "h-[20px] w-[20px]",
+    lg: "h-[24px] w-[24px]",
+    xl: "h-[28px] w-[28px]"
+  },
+  variant: {
+    ghost: {
+      base: "border-[2px] bg-white dark:bg-gray-800 hover:enabled:bg-gray-100 dark:hover:enabled:bg-gray-700 transition-colors",
+      defaultColor: "border-border focus:ring-[2px] focus:ring-brand/30 checked:border-brand checked:bg-brand checked:hover:enabled:bg-brand/90 checked:hover:enabled:border-brand/90 checked:hover:enabled:scale-105",
+      color: {
+        primary: "border-brand focus:ring-[2px] focus:ring-brand/30 checked:border-brand checked:bg-brand checked:hover:enabled:bg-brand/90 checked:hover:enabled:border-brand/90 checked:hover:enabled:scale-105",
+        secondary: "border-gray-500 focus:ring-[2px] focus:ring-gray-500/30 checked:border-gray-500 checked:bg-gray-500 checked:hover:enabled:bg-gray-600 checked:hover:enabled:border-gray-600 checked:hover:enabled:scale-105",
+        danger: "border-red-500 focus:ring-[2px] focus:ring-red-500/30 checked:border-red-500 checked:bg-red-500 checked:hover:enabled:bg-red-600 checked:hover:enabled:border-red-600 checked:hover:enabled:scale-105",
+        info: "border-blue-500 focus:ring-[2px] focus:ring-blue-500/30 checked:border-blue-500 checked:bg-blue-500 checked:hover:enabled:bg-blue-600 checked:hover:enabled:border-blue-600 checked:hover:enabled:scale-105",
+        success: "border-green-500 focus:ring-[2px] focus:ring-green-500/30 checked:border-green-500 checked:bg-green-500 checked:hover:enabled:bg-green-600 checked:hover:enabled:border-green-600 checked:hover:enabled:scale-105",
+        warning: "border-orange-500 focus:ring-[2px] focus:ring-orange-500/30 checked:border-orange-500 checked:bg-orange-500 checked:hover:enabled:bg-orange-600 checked:hover:enabled:border-orange-600 checked:hover:enabled:scale-105"
+      }
+    },
+    solid: {
+      base: "border-[2px] bg-gray-200/70 dark:bg-gray-800 hover:enabled:bg-gray-300 dark:hover:enabled:bg-gray-700 transition-colors",
+      defaultColor: "border-transparent focus:ring-[2px] focus:ring-brand/30 checked:border-brand checked:bg-brand checked:hover:enabled:bg-brand/90 checked:hover:enabled:border-brand/90 checked:hover:enabled:scale-105",
+      color: {
+        primary: "border-transparent focus:ring-[2px] focus:ring-brand/30 checked:border-brand checked:bg-brand checked:hover:enabled:bg-brand/90 checked:hover:enabled:border-brand/90 checked:hover:enabled:scale-105",
+        secondary: "border-transparent focus:ring-[2px] focus:ring-gray-500/30 checked:border-gray-500 checked:bg-gray-500 checked:hover:enabled:bg-gray-600 checked:hover:enabled:border-gray-600 checked:hover:enabled:scale-105",
+        danger: "border-transparent focus:ring-[2px] focus:ring-red-500/30 checked:border-red-500 checked:bg-red-500 checked:hover:enabled:bg-red-600 checked:hover:enabled:border-red-600 checked:hover:enabled:scale-105",
+        info: "border-transparent focus:ring-[2px] focus:ring-blue-500/30 checked:border-blue-500 checked:bg-blue-500 checked:hover:enabled:bg-blue-600 checked:hover:enabled:border-blue-600 checked:hover:enabled:scale-105",
+        success: "border-transparent focus:ring-[2px] focus:ring-green-500/30 checked:border-green-500 checked:bg-green-500 checked:hover:enabled:bg-green-600 checked:hover:enabled:border-green-600 checked:hover:enabled:scale-105",
+        warning: "border-transparent focus:ring-[2px] focus:ring-orange-500/30 checked:border-orange-500 checked:bg-orange-500 checked:hover:enabled:bg-orange-600 checked:hover:enabled:border-orange-600 checked:hover:enabled:scale-105"
+      }
+    },
+    transparent: {
+      base: "",
+      defaultColor: "border-[2px] border-transparent focus:ring-[2px] focus:ring-brand/30 checked:border-brand checked:bg-brand checked:hover:enabled:bg-brand/90 checked:hover:enabled:border-brand/90 checked:hover:enabled:scale-105",
+      color: {
+        primary: "border-[2px] border-transparent focus:ring-[2px] focus:ring-brand/30 checked:border-brand checked:bg-brand checked:hover:enabled:bg-brand/90 checked:hover:enabled:border-brand/90 checked:hover:enabled:scale-105",
+        secondary: "border-[2px] border-transparent focus:ring-[2px] focus:ring-gray-500/30 checked:border-gray-500 checked:bg-gray-500 checked:hover:enabled:bg-gray-600 checked:hover:enabled:border-gray-600 checked:hover:enabled:scale-105",
+        danger: "border-[2px] border-transparent focus:ring-[2px] focus:ring-red-500/30 checked:border-red-500 checked:bg-red-500 checked:hover:enabled:bg-red-600 checked:hover:enabled:border-red-600 checked:hover:enabled:scale-105",
+        info: "border-[2px] border-transparent focus:ring-[2px] focus:ring-blue-500/30 checked:border-blue-500 checked:bg-blue-500 checked:hover:enabled:bg-blue-600 checked:hover:enabled:border-blue-600 checked:hover:enabled:scale-105",
+        success: "border-[2px] border-transparent focus:ring-[2px] focus:ring-green-500/30 checked:border-green-500 checked:bg-green-500 checked:hover:enabled:bg-green-600 checked:hover:enabled:border-green-600 checked:hover:enabled:scale-105",
+        warning: "border-[2px] border-transparent focus:ring-[2px] focus:ring-orange-500/30 checked:border-orange-500 checked:bg-orange-500 checked:hover:enabled:bg-orange-600 checked:hover:enabled:border-orange-600 checked:hover:enabled:scale-105"
+      }
+    }
+  }
+}, t = {
+  size: {
+    text: {
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-lg"
+    },
+    margin: {
+      start: {
+        sm: "mr-[4px] rtl:ml-[4px]",
+        md: "mr-[6px] rtl:ml-[6px]",
+        lg: "mr-[8px] rtl:ml-[8px]",
+        xl: "mr-[8px] rlt:ml-[8px]"
+      },
+      end: {
+        sm: "ml-[4px] rtl:mr-[4px]",
+        md: "ml-[6px] rtl:mr-[6px]",
+        lg: "ml-[8px] rtl:mr-[8px]",
+        xl: "ml-[8px] rtl:mr-[8px]"
+      }
+    }
+  }
+}, q = N(
+  ({
+    variant: a = "ghost",
+    size: e = "md",
+    color: o,
+    labelPlacement: l = "end",
+    label: g,
+    disabled: n,
+    error: b,
+    helperText: s,
+    className: k,
+    activeClassName: p,
+    containerClassName: i,
+    labelClassName: u,
+    inputClassName: x,
+    errorClassName: v,
+    helperClassName: f,
+    ...m
+  }, y) => {
+    const w = o ? c.variant[a].color[o] : c.variant[a].defaultColor;
+    return /* @__PURE__ */ h("div", { className: d("flex flex-col", k, p), children: [
+      /* @__PURE__ */ h(
+        "label",
+        {
+          className: d(
+            "flex flex-row items-center",
+            n && "cursor-not-allowed",
+            i
+          ),
+          children: [
+            /* @__PURE__ */ h("div", { className: "relative inline-flex items-center justify-center", children: [
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  type: "radio",
+                  ref: y,
+                  "data-tucu": "radio",
+                  "data-variant": a,
+                  "data-size": e,
+                  "data-color": o,
+                  disabled: n,
+                  className: d(
+                    c.base,
+                    c.size[e],
+                    c.variant[a].base,
+                    w,
+                    n && "cursor-not-allowed bg-muted/10! border-border! dark:border-border!",
+                    "peer",
+                    x
+                  ),
+                  ...m
+                }
+              ),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: d(
+                    "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none",
+                    "peer-checked:block peer-checked:bg-white",
+                    "peer-checked:transition-all",
+                    e === "sm" && "w-[6px] h-[6px]",
+                    e === "md" && "w-[8px] h-[8px]",
+                    e === "lg" && "w-[10px] h-[10px]",
+                    e === "xl" && "w-[12px] h-[12px]",
+                    "hidden"
+                  )
+                }
+              )
+            ] }),
+            g && /* @__PURE__ */ r(
+              "span",
+              {
+                className: d(
+                  "text-gray-800 dark:text-gray-100",
+                  t.size.text[e],
+                  t.size.margin[l][e],
+                  l === "start" && "order-first",
+                  u
+                ),
+                children: g
+              }
+            )
+          ]
+        }
+      ),
+      !b && s && /* @__PURE__ */ r(j, { size: "md", className: f, children: s }),
+      b && /* @__PURE__ */ r(C, { size: "md", error: b, className: v })
+    ] });
+  }
+);
+export {
+  q as Radio,
+  q as default
+};

package/components/inputs/select.mjs

@@ -0,0 +1,314 @@
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { useCallback as x, useState as y, useRef as I, useEffect as w, useMemo as J } from "react";
+import { createPortal as ue } from "react-dom";
+import f from "classnames";
+import { ChevronDown as me } from "../icons/chevron-down.mjs";
+import { Search as fe, X as ge, Check as pe } from "lucide-react";
+import { FieldError as he } from "./helpers/field-error-text.mjs";
+import { FieldHelperText as xe } from "./helpers/field-helper-text.mjs";
+import { controlAccentTextClasses as ye, textControlColorClasses as we } from "./helpers/control-colors.mjs";
+import { textControlSizeClasses as be } from "./helpers/control-sizes.mjs";
+const ve = {
+  ghost: "transition-shadow rounded-xl border border-border bg-white text-gray-900 hover:border-border hover:ring-1 hover:ring-gray-300 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-600 dark:hover:ring-gray-600",
+  solid: "transition-colors rounded-xl bg-gray-200/70 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700",
+  transparent: ""
+};
+function ze({
+  options: g,
+  onChange: N,
+  onSelect: S,
+  variant: A = "ghost",
+  selectedOption: j,
+  className: M,
+  children: B,
+  disabled: p,
+  label: F,
+  useUppercaseLabel: Q,
+  required: W,
+  color: b,
+  value: C,
+  name: K,
+  errorMessage: O,
+  helperText: P,
+  placeholder: Y,
+  buttonClassName: Z,
+  size: q = "md",
+  searchable: v = !1,
+  searchPlaceholder: _ = "Search...",
+  showCheck: ee = !1
+}) {
+  const z = x(
+    (e) => e !== void 0 ? g.find((t) => t.value === e) : void 0,
+    [g]
+  ), [te, V] = y(j ?? z(C)), [r, X] = y(!1), [n, l] = y(-1), [re, H] = y(!1), [h, k] = y(""), u = I(null), R = I(null), T = I([]), G = I(null), [ne, oe] = y({}), ae = b ? ye[b] : "text-brand";
+  w(() => {
+    if (C !== void 0) {
+      const e = z(C);
+      e && V(e);
+    }
+  }, [C, z]);
+  const m = j || te, U = J(
+    () => m ? g.findIndex((e) => e.value === m.value) : -1,
+    [g, m]
+  ), E = x(() => {
+    if (!u.current) return;
+    const e = u.current.getBoundingClientRect(), t = 220, c = window.innerHeight - e.bottom, D = e.top, i = c < t && D > c;
+    oe({
+      position: "fixed",
+      ...i ? { bottom: window.innerHeight - e.top + 4 } : { top: e.bottom + 4 },
+      left: e.left,
+      width: e.width,
+      zIndex: 9999
+    });
+  }, []), $ = x(() => {
+    p || (E(), l(U >= 0 ? U : 0), H(!1), k(""), X(!0));
+  }, [p, U, E]), s = x(() => {
+    H(!0);
+    const e = setTimeout(() => {
+      X(!1), H(!1), l(-1);
+    }, 100);
+    return () => clearTimeout(e);
+  }, []), se = x(() => {
+    r ? s() : $();
+  }, [r, $, s]), L = x(
+    (e) => {
+      V(e), N && typeof N == "function" && N(e), S && S(e.value), s(), u.current?.focus();
+    },
+    [N, S, s]
+  );
+  w(() => {
+    if (!r) return;
+    const e = (t) => {
+      u.current && !u.current.contains(t.target) && R.current && !R.current.contains(t.target) && s();
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [r, s]), w(() => {
+    if (!r) return;
+    const e = (t) => {
+      t.key === "Escape" && (s(), u.current?.focus());
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [r, s]), w(() => {
+    if (!r) return;
+    const e = () => E();
+    return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+    };
+  }, [r, E]), w(() => {
+    n >= 0 && T.current[n] && T.current[n]?.scrollIntoView({
+      block: "nearest"
+    });
+  }, [n]), w(() => {
+    r && v && requestAnimationFrame(() => G.current?.focus()), r || k("");
+  }, [r, v]);
+  const a = J(() => {
+    if (!v || !h.trim()) return g;
+    const e = h.toLowerCase();
+    return g.filter(
+      (t) => t.name.toLowerCase().includes(e) || t.value.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e)
+    );
+  }, [g, h, v]), ie = (e) => {
+    if (!r) {
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowUp":
+        case "Enter":
+        case " ":
+          e.preventDefault(), $();
+          break;
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), l(
+          (t) => t < a.length - 1 ? t + 1 : 0
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault(), l(
+          (t) => t > 0 ? t - 1 : a.length - 1
+        );
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), n >= 0 && a[n] && !a[n].disabled && L(a[n]);
+        break;
+      case "Escape":
+      case "Tab":
+        e.preventDefault(), s();
+        break;
+    }
+  }, ce = K ? /* @__PURE__ */ o("input", { type: "hidden", name: K, value: m?.value ?? "" }) : null, de = r && ue(
+    /* @__PURE__ */ d(
+      "div",
+      {
+        "data-tucu": "select-menu",
+        ref: R,
+        role: "listbox",
+        tabIndex: -1,
+        "aria-activedescendant": n >= 0 ? `select-option-${n}` : void 0,
+        style: ne,
+        className: f(
+          "max-h-55 overflow-hidden rounded-xl border border-border bg-white shadow-large outline-hidden dark:bg-gray-800",
+          "transition ease-in duration-100",
+          re ? "opacity-0" : "opacity-100"
+        ),
+        children: [
+          v && /* @__PURE__ */ d("div", { className: "flex items-center gap-2 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ o(fe, { className: "h-3.5 w-3.5 shrink-0 text-gray-400 dark:text-gray-500" }),
+            /* @__PURE__ */ o(
+              "input",
+              {
+                "data-tucu": "select-search",
+                ref: G,
+                type: "text",
+                value: h,
+                onChange: (e) => {
+                  k(e.target.value), l(0);
+                },
+                placeholder: _,
+                className: "flex-1 bg-transparent text-sm text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 outline-none",
+                onKeyDown: (e) => {
+                  e.stopPropagation(), e.key === "Escape" && (h ? k("") : (s(), u.current?.focus())), e.key === "ArrowDown" && (e.preventDefault(), l(
+                    (t) => t < a.length - 1 ? t + 1 : 0
+                  )), e.key === "ArrowUp" && (e.preventDefault(), l(
+                    (t) => t > 0 ? t - 1 : a.length - 1
+                  )), e.key === "Enter" && (e.preventDefault(), n >= 0 && a[n] && !a[n].disabled && L(a[n]));
+                }
+              }
+            ),
+            h && /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                onClick: () => k(""),
+                className: "shrink-0 text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+                children: /* @__PURE__ */ o(ge, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ d("div", { className: "max-h-44 overflow-auto grid gap-0.5 p-1 min-[500px]:p-2", children: [
+            a.length === 0 ? /* @__PURE__ */ o("div", { className: "px-3 py-3 text-center text-sm text-gray-500 dark:text-gray-400", children: "No results" }) : a.map((e, t) => {
+              const c = m?.value === e.value, D = t === n, i = e.disabled;
+              return /* @__PURE__ */ d(
+                "div",
+                {
+                  "data-tucu": "select-option",
+                  "data-selected": c ? "true" : void 0,
+                  "data-highlighted": D ? "true" : void 0,
+                  id: `select-option-${t}`,
+                  ref: (le) => {
+                    T.current[t] = le;
+                  },
+                  role: "option",
+                  "aria-selected": c,
+                  "aria-disabled": i,
+                  onClick: () => !i && L(e),
+                  onTouchStart: () => !i && L(e),
+                  onMouseEnter: () => !i && l(t),
+                  className: f(
+                    "flex items-center rounded-md px-3 py-2 text-sm transition",
+                    i ? "cursor-not-allowed opacity-50 text-gray-400 dark:text-gray-600" : "cursor-pointer text-gray-900 dark:text-gray-100",
+                    !i && c && "bg-gray-200/70 font-medium dark:bg-gray-600/60",
+                    !i && !c && D && "bg-gray-300 dark:bg-gray-600",
+                    !i && !c && !D && "hover:bg-gray-300 dark:hover:bg-gray-600"
+                  ),
+                  children: [
+                    e.icon && /* @__PURE__ */ o("span", { className: "mr-2 shrink-0", children: e.icon }),
+                    /* @__PURE__ */ d("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ o("span", { className: "block truncate", children: e.name }),
+                      e.description && /* @__PURE__ */ o("span", { className: "block text-[11px] text-gray-500 dark:text-gray-400 truncate", children: e.description })
+                    ] }),
+                    ee && c && /* @__PURE__ */ o(
+                      pe,
+                      {
+                        className: f("h-4 w-4 shrink-0 ml-2", ae)
+                      }
+                    )
+                  ]
+                },
+                `${e.value}-${t}`
+              );
+            }),
+            B && B
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "data-tucu": "select",
+      "data-variant": A,
+      "data-color": b,
+      "data-size": q,
+      className: f("relative text-sm sm:text-sm", M),
+      children: [
+        ce,
+        F && /* @__PURE__ */ d(
+          "span",
+          {
+            className: f(
+              "block font-medium tracking-widest text-gray-800 dark:text-gray-100",
+              Q ? "mb-2 uppercase sm:mb-3" : "mb-1.5 ml-1.5"
+            ),
+            children: [
+              F,
+              W && /* @__PURE__ */ o("sup", { className: "inline-block text-[13px] text-red-500 ltr:ml-1 rtl:mr-1", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ d(
+          "button",
+          {
+            "data-tucu": "select-trigger",
+            ref: u,
+            type: "button",
+            role: "combobox",
+            "aria-haspopup": "listbox",
+            "aria-expanded": r,
+            "aria-controls": "select-listbox",
+            "aria-disabled": p,
+            disabled: p,
+            onClick: se,
+            onKeyDown: ie,
+            className: f(
+              "text-case-inherit letter-space-inherit flex w-full items-center justify-between font-medium outline-hidden duration-200",
+              be.select[q],
+              ve[A],
+              b && we[A][b],
+              p && "cursor-not-allowed bg-muted/10!",
+              Z
+            ),
+            children: [
+              /* @__PURE__ */ d("div", { className: f("flex items-center", p && "text-gray-500"), children: [
+                m?.icon && /* @__PURE__ */ o("span", { className: "mr-1", children: m.icon }),
+                m?.name || Y || "Select an option"
+              ] }),
+              /* @__PURE__ */ o(
+                me,
+                {
+                  className: f(
+                    "transition-transform duration-200",
+                    p && "text-gray-500",
+                    r && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        de,
+        O && /* @__PURE__ */ o(he, { error: O, size: "md" }),
+        !O && P && /* @__PURE__ */ o(xe, { size: "md", children: P })
+      ]
+    }
+  );
+}
+export {
+  ze as Select,
+  ze as default
+};