@konstructio/ui 0.1.2-alpha.105 → 0.1.2-alpha.107

package/dist/components/Tabs/Tabs.js

@@ -1,5 +1,5 @@
-import { t as s } from "../../utils-Cx-WzRZF.js";
-import { r as e } from "../../dist-BlPTJNIm.js";
+import { t as s } from "../../utils-B-6R7kNE.js";
+import { r as e } from "../../dist-pxvIAJzo.js";
 import { rootVariants as p } from "./Tabs.variants.js";
 import { Content as n } from "./components/Content.js";
 import { List as f } from "./components/List.js";

package/dist/components/Tabs/components/Content.js

@@ -1,5 +1,5 @@
-import { t as r } from "../../../utils-Cx-WzRZF.js";
-import { t as n } from "../../../dist-BlPTJNIm.js";
+import { t as r } from "../../../utils-B-6R7kNE.js";
+import { t as n } from "../../../dist-pxvIAJzo.js";
 import { contentVariants as m } from "../Tabs.variants.js";
 import { jsx as s } from "react/jsx-runtime";
 var e = ({ children: t, className: o, ...a }) => /* @__PURE__ */ s(n, {

package/dist/components/Tabs/components/List.js

@@ -1,5 +1,5 @@
-import { t as a } from "../../../utils-Cx-WzRZF.js";
-import { n } from "../../../dist-BlPTJNIm.js";
+import { t as a } from "../../../utils-B-6R7kNE.js";
+import { n } from "../../../dist-pxvIAJzo.js";
 import { listVariants as t } from "../Tabs.variants.js";
 import { jsx as r } from "react/jsx-runtime";
 var e = ({ children: s, className: i, orientation: m, ...o }) => /* @__PURE__ */ r("div", {

package/dist/components/Tabs/components/Trigger.js

@@ -1,6 +1,6 @@
-import { t as e } from "../../../utils-Cx-WzRZF.js";
+import { t as e } from "../../../utils-B-6R7kNE.js";
 import { Typography as m } from "../../Typography/Typography.js";
-import { i as n } from "../../../dist-BlPTJNIm.js";
+import { i as n } from "../../../dist-pxvIAJzo.js";
 import { triggerVariants as p } from "../Tabs.variants.js";
 import { jsx as r } from "react/jsx-runtime";
 var s = ({ tab: a, label: i, isActive: o, className: t }) => /* @__PURE__ */ r(n, {

package/dist/components/Tag/Tag.js

@@ -1,13 +1,13 @@
 import { t as e } from "../../dist-xCbHbMLA.js";
-import { t as n } from "../../utils-Cx-WzRZF.js";
-import { tagVariants as o } from "./Tag.variants.js";
-import { jsx as a, jsxs as c } from "react/jsx-runtime";
-var u = ({ label: i, color: s, rightIcon: t, leftIcon: r, className: l, "data-value": m }) => /* @__PURE__ */ c("div", {
-  className: n(o({
+import { t as o } from "../../utils-B-6R7kNE.js";
+import { tagVariants as c } from "./Tag.variants.js";
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+var v = ({ label: i, color: s, component: l = "div", rightIcon: t, leftIcon: r, className: m, "data-value": n }) => /* @__PURE__ */ d(l, {
+  className: o(c({
     color: s,
-    className: l
+    className: m
   })),
-  "data-value": m,
+  "data-value": n,
   children: [
     r ? /* @__PURE__ */ a(e, {
       className: "text-inherit",
@@ -24,5 +24,5 @@ var u = ({ label: i, color: s, rightIcon: t, leftIcon: r, className: l, "data-va
   ]
 });
 export {
-  u as Tag
+  v as Tag
 };

package/dist/components/TagSelect/TagSelect.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as m } from "../../Wrapper-CVJSuYWx.js";
+import { t as m } from "../../Wrapper-CyHxGs4E.js";
 import { TagSelectProvider as p } from "./contexts/TagSelect.provider.js";
 import { forwardRef as a } from "react";
 import { jsx as r } from "react/jsx-runtime";

package/dist/components/TagSelect/components/Item/Item.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../../../utils-Cx-WzRZF.js";
+import { t as o } from "../../../../utils-B-6R7kNE.js";
 import { Tag as a } from "../../../Tag/Tag.js";
 import { useTagSelect as i } from "../../contexts/TagSelect.hook.js";
 import { wrapperVariants as c } from "./Item.variants.js";

package/dist/components/TagSelect/components/List/List.js

@@ -1,4 +1,4 @@
-import { t as a } from "../../../../utils-Cx-WzRZF.js";
+import { t as a } from "../../../../utils-B-6R7kNE.js";
 import { useTagSelect as m } from "../../contexts/TagSelect.hook.js";
 import { Item as s } from "../Item/Item.js";
 import { wrapperVariants as i } from "./List.variants.js";

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -1,4 +1,4 @@
-import { t as p } from "../../../../Wrapper-CVJSuYWx.js";
+import { t as p } from "../../../../Wrapper-CyHxGs4E.js";
 export {
   p as Wrapper
 };

package/dist/components/TagSelect/components/index.js

@@ -1,4 +1,4 @@
-import { t as m } from "../../../Wrapper-CVJSuYWx.js";
+import { t as m } from "../../../Wrapper-CyHxGs4E.js";
 import { Item as t } from "./Item/Item.js";
 import { List as i } from "./List/List.js";
 export {

package/dist/components/TagSelect/hooks/useTagSelect.js

@@ -1,15 +1,15 @@
-import { useClickOutside as o } from "../../../hooks/useClickOutside.js";
-import { useTagSelect as s } from "../contexts/TagSelect.hook.js";
-import { useCallback as l, useEffect as c, useRef as u } from "react";
-var m = () => {
-  const n = u(null), { onOpen: e } = s();
-  return o(n, l(() => {
+import { useClickOutside as s } from "../../../hooks/useClickOutside.js";
+import { useTagSelect as l } from "../contexts/TagSelect.hook.js";
+import { useCallback as c, useEffect as u, useRef as d } from "react";
+var g = () => {
+  const n = d(null), { onOpen: e } = l(), a = c(() => {
     e(!1);
-  }, [e])), c(() => {
-    const t = new AbortController(), r = (a) => {
-      a.key === "Escape" && e(!1);
+  }, [e]);
+  return s(n, a), u(() => {
+    const t = new AbortController(), o = (r) => {
+      r.key === "Escape" && e(!1);
     };
-    return document.addEventListener("keydown", r, { signal: t.signal }), () => {
+    return document.addEventListener("keydown", o, { signal: t.signal }), () => {
       t.abort();
     };
   }, [e]), {
@@ -20,5 +20,5 @@ var m = () => {
   };
 };
 export {
-  m as useTagSelect
+  g as useTagSelect
 };

package/dist/components/TextArea/TextArea.js

@@ -1,30 +1,75 @@
-import { t as m } from "../../utils-Cx-WzRZF.js";
-import { textAreaVariants as h } from "./TextArea.variants.js";
-import { forwardRef as u, useId as p } from "react";
-import { jsx as e, jsxs as v } from "react/jsx-runtime";
-var g = u(({ initialValue: s, label: r, labelWrapperClassName: o, name: i, placeholder: c, rows: d = 3, theme: n, className: f, ...a }, x) => {
-  const t = p(), l = i ? `${t}-name` : t;
-  return /* @__PURE__ */ v("div", {
-    className: "flex flex-col gap-2",
-    "data-theme": n,
-    children: [r ? /* @__PURE__ */ e("div", {
-      className: m(o),
-      children: /* @__PURE__ */ e("label", {
-        htmlFor: l,
-        className: "cursor-pointer",
-        children: r
-      })
-    }) : null, /* @__PURE__ */ e("textarea", {
-      id: l,
-      ref: x,
-      className: m(h({ className: f })),
-      rows: d,
-      placeholder: c,
-      value: s ?? a.value,
-      ...a
-    })]
+import { n as E, t } from "../../utils-B-6R7kNE.js";
+import { WarningIcon as F } from "../../assets/icons/components/Warning.js";
+import { Typography as n } from "../Typography/Typography.js";
+import { textAreaVariants as H } from "./TextArea.variants.js";
+import { forwardRef as L, useId as W } from "react";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+var M = L(({ className: f, defaultValue: h, error: s, helperText: l, helperTextClassName: u, id: v, initialValue: g, isExpandable: N = !1, isRequired: d = !1, label: i, labelClassName: b, labelWrapperClassName: y, name: I, placeholder: k, rows: w = 3, theme: j, value: c, variant: T, ...A }, V) => {
+  const $ = W(), a = v ?? $, m = `${a}-error`, x = `${a}-helper-text`, B = c !== void 0, e = typeof s == "string" && s.length > 0, p = !e && !!l, C = E(e && m, p && x);
+  return /* @__PURE__ */ o("div", {
+    className: "flex flex-col gap-2 w-full relative",
+    "data-theme": j,
+    children: [
+      i ? /* @__PURE__ */ r("div", {
+        className: t("flex items-center justify-between", y),
+        children: /* @__PURE__ */ o(n, {
+          component: "label",
+          variant: "labelLarge",
+          htmlFor: a,
+          className: t("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", b),
+          children: [
+            i,
+            " ",
+            d && /* @__PURE__ */ r(n, {
+              component: "span",
+              "aria-hidden": "true",
+              className: t("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5"),
+              children: "*"
+            })
+          ]
+        })
+      }) : null,
+      /* @__PURE__ */ o("div", {
+        className: "relative",
+        children: [/* @__PURE__ */ r("textarea", {
+          ...A,
+          id: a,
+          ref: V,
+          name: I,
+          "data-error": e,
+          "aria-invalid": e || void 0,
+          "aria-describedby": C,
+          "aria-required": d || void 0,
+          className: t(H({
+            className: f,
+            isExpandable: N,
+            variant: e ? "error" : T ?? "default"
+          })),
+          rows: w,
+          placeholder: k,
+          value: c,
+          defaultValue: B ? void 0 : h ?? g
+        }), e ? /* @__PURE__ */ r("i", {
+          className: t("absolute", "right-3", "top-2.5", "text-red-700", "dark:text-red-500"),
+          children: /* @__PURE__ */ r(F, { className: "w-5 h-5" })
+        }) : null]
+      }),
+      e ? /* @__PURE__ */ r(n, {
+        component: "span",
+        id: m,
+        className: t("text-xs", "tracking-normal", "text-red-700", "dark:text-red-400"),
+        children: s
+      }) : null,
+      p ? /* @__PURE__ */ r(n, {
+        component: "span",
+        id: x,
+        variant: "body1",
+        className: t("text-xs", "text-slate-600", "dark:text-slate-200", "select-none", "tracking-normal", u),
+        children: l
+      }) : null
+    ]
   });
 });
 export {
-  g as TextArea
+  M as TextArea
 };

package/dist/components/TextArea/TextArea.variants.js

@@ -1,20 +1,56 @@
-import { t as r } from "../../dist-B9GE4SXf.js";
-var i = r([
+import { t as e } from "../../dist-B9GE4SXf.js";
+var r = e([
+  "bg-white",
   "border",
-  "border-gray-200",
+  "border-gray-300",
+  "caret-text-slate-800",
   "disabled:cursor-not-allowed",
-  "disabled:opacity-50",
+  "disabled:text-slate-500",
+  "flex",
+  "focus-visible:border-transparent",
   "focus-visible:outline-none",
   "focus-visible:ring-1",
-  "focus-visible:ring-ring",
-  "p-2",
-  "placeholder:text-gray-300",
-  "resize-none",
-  "rounded-md",
-  "shadow-xs",
+  "px-2.5",
+  "py-2",
+  "rounded",
+  "text-slate-800",
+  "text-sm",
+  "transition-all",
   "w-full",
-  "focus:ring-kubefirst-primary"
-]);
+  "disabled:bg-gray-50",
+  "placeholder:text-slate-400",
+  "data-[error=false]:dark:focus:ring-aurora-500",
+  "data-[error=false]:focus:ring-aurora-500",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:caret-text-metal-50",
+  "dark:disabled:bg-metal-900",
+  "dark:disabled:placeholder:text-metal-400",
+  "dark:disabled:text-metal-400",
+  "dark:placeholder:text-metal-300",
+  "dark:text-slate-50"
+], {
+  variants: {
+    variant: {
+      default: "",
+      error: [
+        "pr-8",
+        "border-red-600",
+        "focus-visible:border-red-600",
+        "focus-visible:ring-transparent",
+        "dark:border-red-500"
+      ]
+    },
+    isExpandable: {
+      true: "resize-y",
+      false: "resize-none"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    isExpandable: !1
+  }
+});
 export {
-  i as textAreaVariants
+  r as textAreaVariants
 };

package/dist/components/TimePicker/components/HoursList/HoursList.js

@@ -1,4 +1,4 @@
-import { t as s } from "../../../../utils-Cx-WzRZF.js";
+import { t as s } from "../../../../utils-B-6R7kNE.js";
 import { useTimePickerContext as S } from "../../contexts/time-picker.hook.js";
 import { buttonVariants as d, liVariants as k, ulVariants as H } from "../../TimePicker.variants.js";
 import { useEffect as A, useRef as D } from "react";

package/dist/components/TimePicker/components/MeridianList/MeridianList.js

@@ -1,4 +1,4 @@
-import { t } from "../../../../utils-Cx-WzRZF.js";
+import { t } from "../../../../utils-B-6R7kNE.js";
 import { useTimePickerContext as w } from "../../contexts/time-picker.hook.js";
 import { buttonVariants as d, liVariants as p } from "../../TimePicker.variants.js";
 import { useRef as N } from "react";

package/dist/components/TimePicker/components/MinutesList/MinutesList.js

@@ -1,4 +1,4 @@
-import { t as l } from "../../../../utils-Cx-WzRZF.js";
+import { t as l } from "../../../../utils-B-6R7kNE.js";
 import { useTimePickerContext as h } from "../../contexts/time-picker.hook.js";
 import { buttonVariants as k, liVariants as d, ulVariants as M } from "../../TimePicker.variants.js";
 import { useEffect as p, useRef as m } from "react";

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -1,138 +1,153 @@
-import { t as y } from "../../../../utils-Cx-WzRZF.js";
-import { useClickOutside as Q } from "../../../../hooks/useClickOutside.js";
-import { t as X } from "../../../../chevron-down-DNP-OOAQ.js";
-import { Typography as w } from "../../../Typography/Typography.js";
-import { parseTimeString as P } from "../../utils/index.js";
-import { useTimePickerContext as Y } from "../../contexts/time-picker.hook.js";
-import { timePickerVariants as Z } from "../../TimePicker.variants.js";
-import { WrapperList as _ } from "../WrapperList/WrapperList.js";
-import { useCallback as ee, useEffect as S, useId as te, useRef as C, useState as I } from "react";
-import { jsx as s, jsxs as p } from "react/jsx-runtime";
-var ue = ({ name: A, label: N, isRequired: D, scrollBehavior: O, className: R, listClassName: V, listItemClassName: F, listItemButtonClassName: W, disabled: l, mode: T = "select", showList: $ = !0, error: j, placeholder: B }) => {
-  const H = te(), [u, a] = I(!1), m = C(!1), b = C(null), M = C(null), { format: f, formattedTime: i, setTimeDirectly: E, setIsTyping: v } = Y(), g = A ?? `time-${H}`, [k, h] = I(i), [L, n] = I(), x = j || L;
-  S(() => {
-    m.current || (h(i), n(void 0));
-  }, [i]);
-  const K = () => {
-    l || a((t) => !t);
-  }, U = () => {
-    !l && $ && a(!0), n(void 0);
-  }, q = (t) => {
-    t.target !== M.current && (m.current = !1, v(!1));
-  }, z = (t) => {
-    if (b.current?.contains(t.relatedTarget)) return;
-    m.current = !1, v(!1), a(!1);
-    const r = t.currentTarget.value.trim();
-    if (r === "") {
-      n(void 0);
+import { t as T } from "../../../../utils-B-6R7kNE.js";
+import { useClickOutside as te } from "../../../../hooks/useClickOutside.js";
+import { t as re } from "../../../../chevron-down-DNP-OOAQ.js";
+import { Typography as M } from "../../../Typography/Typography.js";
+import { parseTimeString as V } from "../../utils/index.js";
+import { useTimePickerContext as ae } from "../../contexts/time-picker.hook.js";
+import { timePickerVariants as oe } from "../../TimePicker.variants.js";
+import { WrapperList as ne } from "../WrapperList/WrapperList.js";
+import { useCallback as ie, useEffect as F, useId as le, useRef as E, useState as P } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+var xe = ({ ariaLabel: g, id: W, name: j, label: v, isRequired: y, scrollBehavior: B, className: H, listClassName: R, listItemClassName: K, listItemButtonClassName: U, disabled: c, mode: S = "select", showList: k = !0, error: q, placeholder: z }) => {
+  const G = le(), [o, n] = P(!1), h = E(!1), I = E(null), A = E(null), { format: x, formattedTime: p, setTimeDirectly: D, setIsTyping: w } = ae(), i = W ?? `time-${G}`, $ = `${i}-label`, O = `${i}-listbox`, C = `${i}-error`, [N, b] = P(p), [J, l] = P(), r = q || J;
+  F(() => {
+    h.current || (b(p), l(void 0));
+  }, [p]);
+  const Q = () => {
+    c || n((t) => !t);
+  }, X = () => {
+    !c && k && n(!0), l(void 0);
+  }, Y = (t) => {
+    t.target !== A.current && (h.current = !1, w(!1));
+  }, Z = (t) => {
+    if (I.current?.contains(t.relatedTarget)) return;
+    h.current = !1, w(!1), n(!1);
+    const a = t.currentTarget.value.trim();
+    if (a === "") {
+      l(void 0);
       return;
     }
-    const e = P(r, f);
+    const e = V(a, x);
     if (e) {
-      n(void 0), E(e);
-      const o = e.getHours(), d = e.getMinutes().toString().padStart(2, "0");
-      if (f === "24") h(`${o.toString().padStart(2, "0")}:${d}`);
+      l(void 0), D(e);
+      const s = e.getHours(), u = e.getMinutes().toString().padStart(2, "0");
+      if (x === "24") b(`${s.toString().padStart(2, "0")}:${u}`);
       else {
-        const c = o % 12 || 12;
-        h(`${c}:${d} ${o >= 12 ? "PM" : "AM"}`);
+        const m = s % 12 || 12;
+        b(`${m}:${u} ${s >= 12 ? "PM" : "AM"}`);
       }
-    } else n("Invalid time");
-  }, G = (t) => {
-    const r = t.target.value;
+    } else l("Invalid time");
+  }, _ = (t) => {
+    const a = t.target.value;
     let e = "";
-    m.current = !0, v(!0);
-    const o = r.length < k.length;
-    if (f === "12") {
-      const c = r.replace(/[^0-9:apmAPM\s]/g, "").replace(/[apm]/gi, (J) => J.toUpperCase());
-      c.match(/^(\d{0,2}):?(\d{0,2})\s?(A|AM|P|PM)?$/i) || c === "" ? (e = c.slice(0, 8), !o && /^\d{2}$/.test(e) && (e = e + ":")) : e = k;
+    h.current = !0, w(!0);
+    const s = a.length < N.length;
+    if (x === "12") {
+      const m = a.replace(/[^0-9:apmAPM\s]/g, "").replace(/[apm]/gi, (ee) => ee.toUpperCase());
+      m.match(/^(\d{0,2}):?(\d{0,2})\s?(A|AM|P|PM)?$/i) || m === "" ? (e = m.slice(0, 8), !s && /^\d{2}$/.test(e) && (e = e + ":")) : e = N;
     } else
-      e = r.replace(/[^0-9:]/g, "").replace(/:+/g, ":").slice(0, 5), !o && /^\d{2}$/.test(e) && (e = e + ":");
-    h(e), n(void 0);
-    const d = P(e, f);
-    d && E(d);
-  };
-  return Q(b, ee(() => {
-    a(!1);
-  }, [])), S(() => {
-    const t = new AbortController(), r = (e) => {
-      e.key === "Escape" && a(!1);
+      e = a.replace(/[^0-9:]/g, "").replace(/:+/g, ":").slice(0, 5), !s && /^\d{2}$/.test(e) && (e = e + ":");
+    b(e), l(void 0);
+    const u = V(e, x);
+    u && D(u);
+  }, L = ie(() => {
+    n(!1);
+  }, []);
+  return te(I, L), F(() => {
+    const t = new AbortController(), a = (e) => {
+      e.key === "Escape" && n(!1);
     };
-    return document.addEventListener("keydown", r, { signal: t.signal }), () => {
+    return document.addEventListener("keydown", a, { signal: t.signal }), () => {
       t.abort();
     };
-  }, []), /* @__PURE__ */ p("div", {
-    ref: b,
-    onMouseDown: T === "input" ? q : void 0,
-    className: y("w-full", "text-slate-800", "text-sm", "flex", "flex-col", "gap-2"),
+  }, []), /* @__PURE__ */ f("div", {
+    ref: I,
+    onMouseDown: S === "input" ? Y : void 0,
+    className: T("w-full", "text-slate-800", "text-sm", "flex", "flex-col", "gap-2"),
     children: [
-      N ? /* @__PURE__ */ p(w, {
+      v ? /* @__PURE__ */ f(M, {
         component: "label",
         variant: "labelLarge",
-        htmlFor: g,
+        id: $,
+        htmlFor: i,
         className: "font-medium",
         children: [
-          N,
+          v,
           " ",
-          D && /* @__PURE__ */ s(w, {
+          y && /* @__PURE__ */ d(M, {
             component: "span",
+            "aria-hidden": "true",
             className: "text-red-600 dark:text-red-500 text-sm font-normal",
             children: "*"
           })
         ]
       }) : null,
-      /* @__PURE__ */ p("div", {
+      /* @__PURE__ */ f("div", {
         className: "relative",
-        children: [T === "select" ? /* @__PURE__ */ p("button", {
-          "aria-label": g,
-          "aria-haspopup": "listbox",
-          "aria-expanded": "true",
-          "aria-controls": "time-options",
-          className: y(Z({ className: R }), l && "opacity-50 cursor-not-allowed"),
-          "data-open": u,
-          onClick: K,
-          disabled: l,
-          children: [i, /* @__PURE__ */ s(X, {
-            className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
-            "data-open": u
-          })]
-        }) : /* @__PURE__ */ p("div", {
+        children: [/* @__PURE__ */ f("div", {
           className: "flex flex-col gap-1",
-          children: [/* @__PURE__ */ s("input", {
-            ref: M,
+          children: [S === "select" ? /* @__PURE__ */ f("button", {
+            type: "button",
+            id: i,
+            "aria-label": g,
+            "aria-labelledby": !g && v ? $ : void 0,
+            "aria-haspopup": "listbox",
+            "aria-expanded": o,
+            "aria-controls": o && k ? O : void 0,
+            "aria-invalid": !!r || void 0,
+            "aria-describedby": r ? C : void 0,
+            "aria-required": y || void 0,
+            className: T(oe({ className: H }), c && "opacity-50 cursor-not-allowed"),
+            "data-open": o,
+            onClick: Q,
+            disabled: c,
+            children: [p, /* @__PURE__ */ d(re, {
+              className: "w-4 h-4 transition-all text-gray-400 data-[open=true]:rotate-180",
+              "data-open": o
+            })]
+          }) : /* @__PURE__ */ d("input", {
+            ref: A,
             type: "text",
+            id: i,
             "aria-label": g,
-            value: k,
-            onChange: G,
-            onFocus: U,
-            onBlur: z,
-            disabled: l,
-            "data-error": !!x,
-            "data-open": u,
-            placeholder: B,
-            className: y("w-full", "h-10", "px-2.5", "text-sm", "rounded", "border", "border-gray-300", "bg-white", "text-slate-800", "transition-all", "placeholder:text-slate-400", "focus-visible:outline-none", "data-[open=true]:ring-1", "data-[open=true]:ring-aurora-500", "dark:bg-metal-800", "dark:border-metal-700", "dark:text-white", "dark:placeholder:text-metal-300", "dark:data-[open=true]:ring-aurora-500", "disabled:cursor-not-allowed", "disabled:bg-gray-50", "disabled:text-slate-500", "dark:disabled:bg-metal-900", "dark:disabled:text-metal-400", { "border-red-600 data-[open=true]:border-red-600 data-[open=true]:ring-transparent dark:border-red-500": x })
-          }), x && /* @__PURE__ */ s(w, {
+            "aria-labelledby": !g && v ? $ : void 0,
+            "aria-invalid": !!r || void 0,
+            "aria-describedby": r ? C : void 0,
+            "aria-required": y || void 0,
+            value: N,
+            onChange: _,
+            onFocus: X,
+            onBlur: Z,
+            disabled: c,
+            "data-error": !!r,
+            "data-open": o,
+            placeholder: z,
+            className: T("w-full", "h-10", "px-2.5", "text-sm", "rounded", "border", "border-gray-300", "bg-white", "text-slate-800", "transition-all", "placeholder:text-slate-400", "focus-visible:outline-none", "data-[open=true]:ring-1", "data-[open=true]:ring-aurora-500", "dark:bg-metal-800", "dark:border-metal-700", "dark:text-white", "dark:placeholder:text-metal-300", "dark:data-[open=true]:ring-aurora-500", "disabled:cursor-not-allowed", "disabled:bg-gray-50", "disabled:text-slate-500", "dark:disabled:bg-metal-900", "dark:disabled:text-metal-400", { "border-red-600 data-[open=true]:border-red-600 data-[open=true]:ring-transparent dark:border-red-500": r })
+          }), r && /* @__PURE__ */ d(M, {
             component: "span",
+            id: C,
             className: "text-red-600 dark:text-red-500 text-xs",
-            children: x
+            children: r
           })]
-        }), $ && /* @__PURE__ */ s(_, {
-          isOpen: u,
-          scrollBehavior: O,
-          listClassName: V,
-          listItemClassName: F,
-          listItemButtonClassName: W,
-          onClose: () => a(!1)
+        }), k && /* @__PURE__ */ d(ne, {
+          id: O,
+          isOpen: o,
+          scrollBehavior: B,
+          listClassName: R,
+          listItemClassName: K,
+          listItemButtonClassName: U,
+          onClose: () => n(!1)
         })]
       }),
-      /* @__PURE__ */ s("input", {
+      /* @__PURE__ */ d("input", {
         type: "hidden",
-        name: g,
-        value: i,
+        name: j,
+        value: p,
         className: "hidden"
       })
     ]
   });
 };
 export {
-  ue as Wrapper
+  xe as Wrapper
 };