@konstructio/ui 0.1.2-alpha.112 → 0.1.2-alpha.114

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,18 @@
+import { t as a } from "../../utils-DnIJruo0.js";
+import { skeletonVariants as n } from "./Skeleton.variants.js";
+import { jsx as e } from "react/jsx-runtime";
+var d = ({ className: r, count: t = 1, label: l = "Loading", shape: o, theme: s, wrapperClassName: i }) => /* @__PURE__ */ e("div", {
+  role: "status",
+  "aria-label": l,
+  "aria-busy": "true",
+  "data-theme": s,
+  className: a("flex w-full flex-col gap-2", i),
+  children: Array.from({ length: t }, (f, m) => /* @__PURE__ */ e("span", {
+    "aria-hidden": "true",
+    className: a(n({ shape: o }), r)
+  }, m))
+});
+d.displayName = "KonstructSkeleton";
+export {
+  d as Skeleton
+};

package/dist/components/Skeleton/Skeleton.variants.js

@@ -0,0 +1,25 @@
+import { t as a } from "../../dist-B9GE4SXf.js";
+var r = a([
+  "block",
+  "animate-pulse",
+  "bg-gray-200",
+  "dark:bg-metal-700"
+], {
+  variants: { shape: {
+    rect: [
+      "h-5",
+      "w-full",
+      "rounded"
+    ],
+    text: [
+      "h-3.5",
+      "w-full",
+      "rounded"
+    ],
+    circle: ["size-10", "rounded-full"]
+  } },
+  defaultVariants: { shape: "rect" }
+});
+export {
+  r as skeletonVariants
+};

package/dist/components/Slider/Slider.js

@@ -1,5 +1,5 @@
 import { t } from "../../utils-DnIJruo0.js";
-import { i as v, r as N, t as S } from "../../dist-CNui_Egg.js";
+import { i as v, r as N, t as S } from "../../dist-fPYIsxyx.js";
 import { sliderVariants as V, thumbVariants as g, trackVariants as j } from "./Slider.variants.js";
 import { forwardRef as b, useEffect as w, useImperativeHandle as y, useRef as R, useState as k } from "react";
 import { jsx as r, jsxs as l } from "react/jsx-runtime";

package/dist/components/Spinner/Spinner.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as r } from "../../Spinner-smR3esbL.js";
+import { t as r } from "../../Spinner-CTonkSzG.js";
 export {
   r as Spinner
 };

package/dist/components/Stepper/Stepper.js

@@ -1,13 +1,13 @@
-import { t as s } from "../../utils-DnIJruo0.js";
-import { stepItemVariants as S, stepListVariants as b, stepperVariants as k } from "./Stepper.variants.js";
-import { StepItem as C } from "./components/StepItem/StepItem.js";
-import { useMemo as I } from "react";
-import { jsx as e } from "react/jsx-runtime";
-var P = ({ className: u, classNames: r, clickable: c = !1, currentStep: a, icons: f, orientation: p = "vertical", showConnector: v = !0, size: h = "sm", steps: l, theme: d, variant: g = "inline", onStepClick: z }) => {
-  const m = g ?? "inline", o = m === "horizontal" ? "horizontal" : p ?? "vertical", V = h ?? "sm", n = I(() => l.map((t, i) => t.status ? t : a !== void 0 ? i < a ? {
+import { t as l } from "../../utils-DnIJruo0.js";
+import { stepItemVariants as b, stepListVariants as k, stepperVariants as C } from "./Stepper.variants.js";
+import { StepItem as I } from "./components/StepItem/StepItem.js";
+import { useMemo as L } from "react";
+import { jsx as o } from "react/jsx-runtime";
+var q = ({ className: u, classNames: i, clickable: f = !1, currentStep: a, fullWidth: n = !1, icons: p, orientation: v = "vertical", showConnector: h = !0, size: d = "sm", steps: m, theme: g, variant: z = "inline", onStepClick: V }) => {
+  const c = z ?? "inline", e = c === "horizontal" ? "horizontal" : v ?? "vertical", S = d ?? "sm", s = L(() => m.map((t, r) => t.status ? t : a !== void 0 ? r < a ? {
     ...t,
     status: "completed"
-  } : i === a ? {
+  } : r === a ? {
     ...t,
     status: "active"
   } : {
@@ -16,33 +16,42 @@ var P = ({ className: u, classNames: r, clickable: c = !1, currentStep: a, icons
   } : {
     ...t,
     status: "pending"
-  }), [l, a]);
-  return /* @__PURE__ */ e("nav", {
-    className: s(k({ orientation: o }), u, r?.root),
-    "data-theme": d,
+  }), [m, a]);
+  return /* @__PURE__ */ o("nav", {
+    className: l(C({
+      orientation: e,
+      fullWidth: n
+    }), u, i?.root),
+    "data-theme": g,
     "aria-label": "Progress steps",
-    children: /* @__PURE__ */ e("ol", {
-      className: s(b({ orientation: o }), r?.list),
-      children: n.map((t, i) => /* @__PURE__ */ e("li", {
-        className: s(S({ orientation: o }), r?.item),
-        children: /* @__PURE__ */ e(C, {
+    children: /* @__PURE__ */ o("ol", {
+      className: l(k({
+        orientation: e,
+        fullWidth: n
+      }), i?.list),
+      children: s.map((t, r) => /* @__PURE__ */ o("li", {
+        className: l(b({
+          orientation: e,
+          fullWidth: n
+        }), i?.item),
+        children: /* @__PURE__ */ o(I, {
           step: t,
-          index: i,
-          isLast: i === n.length - 1,
-          orientation: o,
-          clickable: c ?? !1,
-          onClick: () => z?.(t, i),
-          size: V,
-          showConnector: v ?? !0,
-          nextStepStatus: n[i + 1]?.status,
-          variant: m,
-          classNames: r,
-          icons: f
+          index: r,
+          isLast: r === s.length - 1,
+          orientation: e,
+          clickable: f ?? !1,
+          onClick: () => V?.(t, r),
+          size: S,
+          showConnector: h ?? !0,
+          nextStepStatus: s[r + 1]?.status,
+          variant: c,
+          classNames: i,
+          icons: p
         })
       }, t.id))
     })
   });
 };
 export {
-  P as Stepper
+  q as Stepper
 };

package/dist/components/Stepper/Stepper.variants.js

@@ -1,27 +1,63 @@
 import { t } from "../../dist-B9GE4SXf.js";
 var e = t(["flex"], {
-  variants: { orientation: {
-    vertical: ["flex-col"],
-    horizontal: ["flex-row", "items-start"]
-  } },
-  defaultVariants: { orientation: "vertical" }
+  variants: {
+    orientation: {
+      vertical: ["flex-col"],
+      horizontal: ["flex-row", "items-start"]
+    },
+    fullWidth: {
+      true: ["w-full"],
+      false: []
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    fullWidth: !1
+  }
 }), r = t([
   "flex",
   "list-none",
   "p-0",
   "m-0"
 ], {
-  variants: { orientation: {
-    vertical: ["flex-col"],
-    horizontal: ["flex-row"]
-  } },
-  defaultVariants: { orientation: "vertical" }
+  variants: {
+    orientation: {
+      vertical: ["flex-col"],
+      horizontal: ["flex-row"]
+    },
+    fullWidth: {
+      true: ["w-full"],
+      false: []
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    fullWidth: !1
+  }
 }), i = t(["list-none"], {
-  variants: { orientation: {
-    vertical: [],
-    horizontal: []
-  } },
-  defaultVariants: { orientation: "vertical" }
+  variants: {
+    orientation: {
+      vertical: [],
+      horizontal: []
+    },
+    fullWidth: {
+      true: [],
+      false: []
+    }
+  },
+  compoundVariants: [{
+    orientation: "horizontal",
+    fullWidth: !0,
+    class: [
+      "flex-1",
+      "min-w-0",
+      "last:flex-none"
+    ]
+  }],
+  defaultVariants: {
+    orientation: "vertical",
+    fullWidth: !1
+  }
 }), n = t([
   "flex",
   "group",
@@ -59,7 +95,7 @@ var e = t(["flex"], {
     variant: "inline",
     clickable: !1
   }
-}), s = t([
+}), l = t([
   "flex",
   "items-center",
   "justify-center",
@@ -128,7 +164,7 @@ var e = t(["flex"], {
     status: "pending",
     size: "sm"
   }
-}), l = t([
+}), s = t([
   "flex",
   "flex-col",
   "gap-0.5"
@@ -308,9 +344,9 @@ var e = t(["flex"], {
 export {
   m as horizontalConnectorWrapperVariants,
   c as stepConnectorVariants,
-  l as stepContentVariants,
+  s as stepContentVariants,
   d as stepDescriptionVariants,
-  s as stepIndicatorVariants,
+  l as stepIndicatorVariants,
   i as stepItemVariants,
   o as stepLabelVariants,
   r as stepListVariants,

package/dist/components/Stepper/hooks/useStepItemLogic.js

@@ -1,4 +1,4 @@
-import { t as f } from "../../../dist-xCbHbMLA.js";
+import { t as f } from "../../../dist-CK8FUUUn.js";
 function b({ clickable: s, onClick: e, step: n }) {
   const a = n.status ?? "pending", i = n.disabled || a === "active", c = !!(n.onClick || e), t = s && !i && c, r = typeof n.label == "string" ? "span" : f, l = () => {
     t && (n.onClick ? n.onClick() : e && e());

package/dist/components/Switch/Switch.js

@@ -1,4 +1,4 @@
-import { t as o } from "../../Switch-CPE8v6Zh.js";
+import { t as o } from "../../Switch-5cdUxbhX.js";
 export {
   o as Switch
 };

package/dist/components/Tabs/Tabs.js

@@ -1,28 +1,56 @@
-import { t as s } from "../../utils-DnIJruo0.js";
-import { r as e } from "../../dist-CR3FMRzF.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";
+import { t as j } from "../../utils-DnIJruo0.js";
+import { t as x } from "../../dist-C1a-68Kb.js";
+import { rootVariants as F } from "./Tabs.variants.js";
+import { Content as p } from "./components/Content.js";
+import { List as h } from "./components/List.js";
 import { Trigger as g } from "./components/Trigger.js";
-import { jsx as T } from "react/jsx-runtime";
-var r = ({ children: o, theme: a, className: m, orientation: t, ...i }) => /* @__PURE__ */ T(e, {
-  ...i,
-  "data-theme": a,
-  "data-orientation": t,
-  "aria-orientation": t,
-  className: s(p({
-    variant: t,
-    className: m
-  })),
-  children: o
-});
-r.displayName = "KonstructTabs";
-r.Content = n;
-r.List = f;
-r.Trigger = g;
+import { useEffect as L, useState as $ } from "react";
+import { Fragment as y, jsx as m, jsxs as d } from "react/jsx-runtime";
+var o = ({ children: v, className: C, defaultValue: c, items: r, listClassName: N, orientation: n, theme: T, value: u, onValueChange: b, ...V }) => {
+  const s = r?.at(0)?.value, [l, f] = $(c ?? s), t = !!r && u === void 0;
+  return L(() => {
+    t && (r.some((a) => a.value === l) || f(s));
+  }, [
+    s,
+    l,
+    t,
+    r
+  ]), /* @__PURE__ */ d(x, {
+    ...V,
+    value: t ? l : u,
+    defaultValue: t ? void 0 : c,
+    onValueChange: (a) => {
+      t && f(a), b?.(a);
+    },
+    "data-theme": T,
+    "data-orientation": n,
+    "aria-orientation": n,
+    className: j(F({
+      variant: n,
+      className: C
+    })),
+    children: [r ? /* @__PURE__ */ d(y, { children: [/* @__PURE__ */ m(h, {
+      orientation: n ?? "horizontal",
+      className: N,
+      children: r.map(({ label: a, triggerClassName: i, value: e }) => /* @__PURE__ */ m(g, {
+        tab: e,
+        label: a,
+        className: i
+      }, e))
+    }), r.map(({ content: a, contentClassName: i, value: e }) => /* @__PURE__ */ m(p, {
+      value: e,
+      className: i,
+      children: a
+    }, e))] }) : null, v]
+  });
+};
+o.displayName = "KonstructTabs";
+o.Content = p;
+o.List = h;
+o.Trigger = g;
 export {
-  n as Content,
-  f as List,
-  r as Tabs,
+  p as Content,
+  h as List,
+  o as Tabs,
   g as Trigger
 };

package/dist/components/Tabs/Tabs.variants.js

@@ -1,21 +1,21 @@
-import { t as a } from "../../dist-B9GE4SXf.js";
-var r = a([""], {
+import { t } from "../../dist-B9GE4SXf.js";
+var r = t([""], {
   variants: { variant: {
     horizontal: "",
     vertical: "flex gap-6"
   } },
   defaultVariants: { variant: "horizontal" }
-}), e = a([""], {
+}), e = t([""], {
   variants: { variant: { default: "" } },
   defaultVariants: { variant: "default" }
-}), i = a(["flex"], {
+}), i = t(["flex"], {
   variants: { variant: {
     default: "flex gap-6",
     horizontal: "",
     vertical: "flex-col min-w-33 h-full items-center"
   } },
   defaultVariants: { variant: "default" }
-}), n = a([
+}), f = t([
   "cursor-pointer",
   "h-[27px]",
   "w-fit",
@@ -49,6 +49,15 @@ var r = a([""], {
       "text-slate-500",
       "font-semibold",
       "dark:text-metal-400"
+    ],
+    auto: [
+      "text-slate-500",
+      "font-semibold",
+      "dark:text-metal-400",
+      "group-data-[state=active]/tab:text-zinc-700",
+      "group-data-[state=active]/tab:after:scale-y-100",
+      "group-data-[state=active]/tab:hover:after:scale-y-140",
+      "dark:group-data-[state=active]/tab:text-metal-100"
     ]
   } },
   defaultVariants: { variant: "default" }
@@ -57,5 +66,5 @@ export {
   e as contentVariants,
   i as listVariants,
   r as rootVariants,
-  n as triggerVariants
+  f as triggerVariants
 };

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

@@ -1,12 +1,12 @@
-import { t as r } from "../../../utils-DnIJruo0.js";
-import { t as n } from "../../../dist-CR3FMRzF.js";
+import { t as n } from "../../../utils-DnIJruo0.js";
+import { n as r } from "../../../dist-C1a-68Kb.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, {
-  ...a,
-  className: r(m({
+var e = ({ children: t, className: a, ...o }) => /* @__PURE__ */ s(r, {
+  ...o,
+  className: n(m({
     variant: "default",
-    className: o
+    className: a
   })),
   children: t
 });

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

@@ -1,19 +1,19 @@
 import { t as a } from "../../../utils-DnIJruo0.js";
-import { n } from "../../../dist-CR3FMRzF.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", {
-  className: a(t({ variant: "default" })),
-  children: /* @__PURE__ */ r(n, {
-    className: a(t({
+import { r as e } from "../../../dist-C1a-68Kb.js";
+import { listVariants as r } from "../Tabs.variants.js";
+import { jsx as s } from "react/jsx-runtime";
+var l = ({ children: t, className: i, orientation: m, ...o }) => /* @__PURE__ */ s("div", {
+  className: a(r({ variant: "default" })),
+  children: /* @__PURE__ */ s(e, {
+    className: a(r({
       variant: m,
       className: i
     })),
     ...o,
-    children: s
+    children: t
   })
 });
-e.displayName = "KonstructTabsList";
+l.displayName = "KonstructTabsList";
 export {
-  e as List
+  l as List
 };

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

@@ -1,21 +1,22 @@
 import { t as e } from "../../../utils-DnIJruo0.js";
 import { Typography as m } from "../../Typography/Typography.js";
-import { i as n } from "../../../dist-CR3FMRzF.js";
+import { i as n } from "../../../dist-C1a-68Kb.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, {
-  value: a,
-  children: /* @__PURE__ */ r(m, {
+import { jsx as a } from "react/jsx-runtime";
+var s = (r) => r === void 0 ? "auto" : r ? "active" : "inactive", g = ({ tab: r, label: t, isActive: i, className: o }) => /* @__PURE__ */ a(n, {
+  value: r,
+  className: "group/tab",
+  children: /* @__PURE__ */ a(m, {
     variant: "body2",
     component: "span",
     className: e(p({
-      variant: o ? "active" : "inactive",
-      className: t
+      variant: s(i),
+      className: o
     })),
-    children: i
+    children: t
   })
 });
-s.displayName = "KonstructTabsTrigger";
+g.displayName = "KonstructTabsTrigger";
 export {
-  s as Trigger
+  g as Trigger
 };

package/dist/components/Tag/Tag.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../dist-xCbHbMLA.js";
+import { t as e } from "../../dist-CK8FUUUn.js";
 import { t as o } from "../../utils-DnIJruo0.js";
 import { tagVariants as c } from "./Tag.variants.js";
 import { jsx as a, jsxs as d } from "react/jsx-runtime";

package/dist/components/TagsInput/TagsInput.js

@@ -0,0 +1,159 @@
+import { n as te, t as x } from "../../utils-DnIJruo0.js";
+import { LoaderIcon as re } from "../../assets/icons/components/Loader.js";
+import { Badge as ae } from "../Badge/Badge.js";
+import { Typography as w } from "../Typography/Typography.js";
+import { forwardRef as ne, useId as le, useMemo as se, useRef as oe, useState as k } from "react";
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+var ie = ["Enter", ","], de = ne(({ className: K, commitOnBlur: M = !0, delimiters: S = ie, disabled: u = !1, error: h, errorClassName: $, helperText: I, helperTextClassName: O, id: U, isLoading: g = !1, isRequired: N = !1, label: b, labelAction: D, loadingText: v = "Loading suggestions", placeholder: q, suggestions: T = [], theme: H, value: r, onBlur: V, onChange: C, onFocus: _, ...G }, f) => {
+  const J = le(), o = U ?? J, E = `${o}-suggestions`, L = `${o}-error`, B = `${o}-helper-text`, F = oe(null), [l, R] = k(""), [j, i] = k(!1), [d, s] = k(-1), c = typeof h == "string" && h.length > 0, z = !c && !!I, P = te(c && L, z && B), n = se(() => {
+    const e = l.trim().toLowerCase();
+    return T.filter((t) => !r.includes(t) && t.toLowerCase().includes(e));
+  }, [
+    l,
+    T,
+    r
+  ]), y = j && !u && (g || n.length > 0), Q = (e) => {
+    F.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
+  }, p = (e) => {
+    const t = e.trim();
+    t && !r.includes(t) && C([...r, t]), R(""), s(-1);
+  }, A = (e) => {
+    C(r.filter((t) => t !== e));
+  }, W = (e) => {
+    if (e.key === "ArrowDown" && n.length > 0) {
+      e.preventDefault(), i(!0), s((t) => (t + 1) % n.length);
+      return;
+    }
+    if (e.key === "ArrowUp" && n.length > 0) {
+      e.preventDefault(), s((t) => t <= 0 ? n.length - 1 : t - 1);
+      return;
+    }
+    if (e.key === "Escape") {
+      i(!1), s(-1);
+      return;
+    }
+    if (S.includes(e.key)) {
+      if (e.preventDefault(), j && d >= 0 && n[d]) {
+        p(n[d]);
+        return;
+      }
+      p(l);
+      return;
+    }
+    e.key === "Backspace" && l === "" && r.length > 0 && (e.preventDefault(), A(r[r.length - 1]));
+  }, X = (e) => {
+    R(e.target.value), i(!0), s(-1);
+  }, Y = (e) => {
+    i(!0), _?.(e);
+  }, Z = (e) => {
+    M && p(l), i(!1), s(-1), V?.(e);
+  };
+  return /* @__PURE__ */ m("div", {
+    className: "flex w-full flex-col gap-2",
+    "data-theme": H,
+    children: [
+      b || D ? /* @__PURE__ */ m("div", {
+        className: "flex items-center justify-between",
+        children: [b ? /* @__PURE__ */ m(w, {
+          component: "label",
+          variant: "labelLarge",
+          htmlFor: o,
+          className: "cursor-pointer text-slate-800 dark:text-metal-50",
+          children: [b, N ? /* @__PURE__ */ a("span", {
+            "aria-hidden": "true",
+            className: "ml-1 text-red-600 dark:text-red-500",
+            children: "*"
+          }) : null]
+        }) : null, D]
+      }) : null,
+      /* @__PURE__ */ m("div", {
+        role: "presentation",
+        className: x("relative flex min-h-10 w-full flex-wrap items-center gap-2 rounded border bg-white px-2.5 py-2 transition-all", "focus-within:border-transparent focus-within:ring-1", "dark:bg-metal-800", c ? "border-red-600 focus-within:ring-red-600 dark:border-red-500 dark:focus-within:ring-red-500" : "border-gray-200 focus-within:ring-aurora-500 dark:border-metal-700", u && "cursor-not-allowed bg-gray-100 dark:bg-metal-900", K),
+        onClick: () => {
+          F.current?.focus();
+        },
+        children: [
+          r.map((e) => /* @__PURE__ */ a(ae, {
+            label: e,
+            dismissible: !0,
+            onDismiss: () => {
+              u || A(e);
+            }
+          }, e)),
+          /* @__PURE__ */ a("input", {
+            ...G,
+            ref: Q,
+            id: o,
+            type: "text",
+            role: "combobox",
+            value: l,
+            placeholder: r.length === 0 ? q : void 0,
+            disabled: u,
+            autoComplete: "off",
+            "aria-expanded": y,
+            "aria-controls": y ? E : void 0,
+            "aria-autocomplete": "list",
+            "aria-invalid": c || void 0,
+            "aria-describedby": P,
+            "aria-required": N || void 0,
+            className: "min-w-24 flex-1 bg-transparent text-sm text-slate-800 outline-none placeholder:text-slate-400 disabled:cursor-not-allowed dark:text-metal-50 dark:placeholder:text-metal-400",
+            onChange: X,
+            onKeyDown: W,
+            onFocus: Y,
+            onBlur: Z
+          }),
+          g ? /* @__PURE__ */ m("span", {
+            role: "status",
+            className: "flex items-center",
+            children: [/* @__PURE__ */ a(re, {
+              size: 16,
+              "aria-hidden": "true",
+              className: "animate-spin text-metal-400"
+            }), /* @__PURE__ */ a("span", {
+              className: "sr-only",
+              children: v
+            })]
+          }) : null,
+          y ? /* @__PURE__ */ a("div", {
+            id: E,
+            role: "listbox",
+            className: "absolute left-0 top-full z-10 mt-1 flex max-h-44 w-full flex-col overflow-y-auto rounded border border-gray-200 bg-white py-2 shadow-2xs animate-in fade-in-50 zoom-in-95 duration-200 dark:border-metal-700 dark:bg-metal-800",
+            children: g ? /* @__PURE__ */ a("span", {
+              className: "select-none px-6 py-1.5 text-sm text-slate-500 dark:text-metal-300",
+              children: v
+            }) : n.map((e, t) => /* @__PURE__ */ a("button", {
+              type: "button",
+              role: "option",
+              tabIndex: -1,
+              "aria-selected": t === d,
+              className: x("flex min-h-10 w-full cursor-pointer items-center px-6 py-1.5 text-left text-sm text-slate-800 transition-colors hover:bg-gray-50 dark:text-metal-50 dark:hover:bg-metal-700", t === d && "bg-gray-50 dark:bg-metal-700"),
+              onMouseDown: (ee) => {
+                ee.preventDefault();
+              },
+              onClick: () => {
+                p(e);
+              },
+              children: e
+            }, e))
+          }) : null
+        ]
+      }),
+      c ? /* @__PURE__ */ a(w, {
+        component: "span",
+        id: L,
+        className: x("text-xs tracking-normal text-red-700 dark:text-red-400", $),
+        children: h
+      }) : null,
+      z ? /* @__PURE__ */ a(w, {
+        component: "span",
+        id: B,
+        className: x("text-xs text-slate-600 dark:text-slate-200", O),
+        children: I
+      }) : null
+    ]
+  });
+});
+de.displayName = "KonstructTagsInput";
+export {
+  de as TagsInput
+};