@ramme-io/ui 4.0.1 → 4.1.1

package/dist/components/data-display/Table.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import { EmptyState as d } from "../feedback/EmptyState.js";
-const b = ({ headers: r, data: a, caption: i, className: c }) => /* @__PURE__ */ e("div", { className: `overflow-x-auto rounded-lg border border-border ${c || ""}`, children: /* @__PURE__ */ o("table", { className: "w-full text-left", children: [
-  i && /* @__PURE__ */ e("caption", { className: "p-4 text-lg font-semibold text-text bg-card-alt", children: i }),
-  /* @__PURE__ */ e("thead", { className: "bg-card-alt", children: /* @__PURE__ */ e("tr", { children: r.map((t) => /* @__PURE__ */ e("th", { scope: "col", className: "p-4 text-sm font-semibold text-text whitespace-nowrap", children: t.label }, t.key)) }) }),
-  /* @__PURE__ */ e("tbody", { className: "divide-y divide-border", children: a.length > 0 ? a.map((t, n) => /* @__PURE__ */ e("tr", { className: "hover:bg-primary/5 transition-colors", children: r.map((l) => {
-    const s = t[l.key];
-    return /* @__PURE__ */ e("td", { className: "p-4 text-sm text-text-light whitespace-nowrap", children: l.render ? l.render(s, t) : String(s) }, l.key);
-  }) }, n)) : /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: r.length, children: /* @__PURE__ */ e("div", { className: "p-8 flex justify-center items-center", children: /* @__PURE__ */ e(
+const b = ({ headers: l, data: a, caption: i, className: n }) => /* @__PURE__ */ e("div", { className: `overflow-x-auto rounded-lg border border-border ${n || ""}`, children: /* @__PURE__ */ c("table", { className: "w-full text-left", children: [
+  i && /* @__PURE__ */ e("caption", { className: "p-4 text-lg font-semibold text-foreground bg-card-alt", children: i }),
+  /* @__PURE__ */ e("thead", { className: "bg-card-alt", children: /* @__PURE__ */ e("tr", { children: l.map((t) => /* @__PURE__ */ e("th", { scope: "col", className: "p-4 text-sm font-semibold text-foreground whitespace-nowrap", children: t.label }, t.key)) }) }),
+  /* @__PURE__ */ e("tbody", { className: "divide-y divide-border", children: a.length > 0 ? a.map((t, s) => /* @__PURE__ */ e("tr", { className: "hover:bg-primary/5 transition-colors", children: l.map((r) => {
+    const o = t[r.key];
+    return /* @__PURE__ */ e("td", { className: "p-4 text-sm text-muted-foreground whitespace-nowrap", children: r.render ? r.render(o, t) : String(o) }, r.key);
+  }) }, s)) : /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: l.length, children: /* @__PURE__ */ e("div", { className: "p-8 flex justify-center items-center", children: /* @__PURE__ */ e(
     d,
     {
       title: "No Data Available",

package/dist/components/feedback/EmptyState.js

@@ -1,12 +1,12 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { Card as a } from "../layout/Card.js";
-import { Icon as c } from "../ui/Icon.js";
-const n = ({ icon: t, title: r, description: m, actionButton: s, className: l }) => /* @__PURE__ */ x(a, { className: `p-8 text-center flex flex-col items-center justify-center space-y-4 ${l || ""}`, children: [
-  t && /* @__PURE__ */ e("div", { className: "text-text-light/50 mb-4", children: /* @__PURE__ */ e(c, { name: t, size: 64, strokeWidth: 1.5 }) }),
-  /* @__PURE__ */ e("h3", { className: "text-2xl font-semibold text-text", children: r }),
-  m && /* @__PURE__ */ e("p", { className: "text-text-light max-w-md", children: m }),
-  s && /* @__PURE__ */ e("div", { className: "mt-4", children: s })
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Card as o } from "../layout/Card.js";
+import { Icon as a } from "../ui/Icon.js";
+const i = ({ icon: t, title: s, description: r, actionButton: m, className: d }) => /* @__PURE__ */ l(o, { className: `p-8 text-center flex flex-col items-center justify-center space-y-4 ${d || ""}`, children: [
+  t && /* @__PURE__ */ e("div", { className: "text-muted-foreground/50 mb-4", children: /* @__PURE__ */ e(a, { name: t, size: 64, strokeWidth: 1.5 }) }),
+  /* @__PURE__ */ e("h3", { className: "text-2xl font-semibold text-foreground", children: s }),
+  r && /* @__PURE__ */ e("p", { className: "text-muted-foreground max-w-md", children: r }),
+  m && /* @__PURE__ */ e("div", { className: "mt-4", children: m })
 ] });
 export {
-  n as EmptyState
+  i as EmptyState
 };

package/dist/components/feedback/ToastProvider.js

@@ -1,4 +1,4 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
 import p, { useState as T, useCallback as d, createContext as v, useContext as g } from "react";
 import { createPortal as h } from "react-dom";
 import { Toast as w } from "./Toast.js";
@@ -8,17 +8,17 @@ const c = v(void 0), S = () => {
     throw new Error("useToast must be used within a ToastProvider");
   return o;
 }, j = ({ children: o }) => {
-  const [m, i] = T([]), n = d((t, s = "info", r = 3e3) => {
+  const [m, i] = T([]), a = d((t, s = "info", r = 3e3) => {
     const l = Date.now().toString() + Math.random().toString(36).substring(2, 9);
     i((x) => [...x, { id: l, message: t, type: s, duration: r }]);
   }, []), e = d((t) => {
     i((s) => s.filter((r) => r.id !== t));
-  }, []), u = p.useMemo(() => ({ addToast: n, dismissToast: e }), [n, e]);
+  }, []), u = p.useMemo(() => ({ addToast: a, dismissToast: e }), [a, e]);
   return /* @__PURE__ */ f(c.Provider, { value: u, children: [
     o,
     h(
       // This container holds all the toasts and positions them on the screen
-      /* @__PURE__ */ a("div", { className: "fixed bottom-4 right-4 z-50 w-80 max-w-full space-y-2", children: m.map((t) => /* @__PURE__ */ a(
+      /* @__PURE__ */ n("div", { className: "fixed bottom-4 right-4 z-toast w-80 max-w-full space-y-2", children: m.map((t) => /* @__PURE__ */ n(
         w,
         {
           id: t.id,

package/dist/components/forms/Checkbox.js

@@ -1,9 +1,9 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { useState as a } from "react";
-const u = ({ label: e, id: r, className: o, ...c }) => {
-  const [t] = a(() => r || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
+const u = ({ label: e, id: s, className: o, ...c }) => {
+  const [t] = a(() => s || `checkbox-${Math.random().toString(36).substr(2, 9)}`);
   return /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ r(
       "input",
       {
         id: t,
@@ -12,7 +12,7 @@ const u = ({ label: e, id: r, className: o, ...c }) => {
         ...c
       }
     ),
-    e && /* @__PURE__ */ s("label", { htmlFor: t, className: "ml-2 text-sm text-text cursor-pointer", children: e })
+    e && /* @__PURE__ */ r("label", { htmlFor: t, className: "ml-2 text-sm text-foreground cursor-pointer", children: e })
   ] });
 };
 export {

package/dist/components/forms/ComboBox.js

@@ -2,7 +2,7 @@ import { jsxs as D, jsx as i } from "react/jsx-runtime";
 import { useState as l, useRef as g, useEffect as f, useCallback as K } from "react";
 import { Input as q } from "./Input.js";
 import { cn as p } from "../../utils/cn.js";
-const $ = ({
+const _ = ({
   options: t,
   label: v,
   value: a,
@@ -73,5 +73,5 @@ const $ = ({
   ] });
 };
 export {
-  $ as ComboBox
+  _ as ComboBox
 };

package/dist/components/forms/DatePicker.js

@@ -1,9 +1,10 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import n from "react-datepicker";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import s from "react";
+import b from "react-datepicker";
 import { cn as e } from "../../utils/cn.js";
-import { Icon as s } from "../ui/Icon.js";
+import { Icon as u } from "../ui/Icon.js";
 import "react-datepicker/dist/react-datepicker.css";
-const m = `
+const f = `
   .react-datepicker {
     font-family: inherit !important;
     background-color: rgb(var(--app-card-bg-color)) !important;
@@ -28,36 +29,40 @@ const m = `
   .react-datepicker__navigation-icon::before {
     border-color: rgb(var(--app-text-color)) !important;
   }
-`, x = ({
+`, y = ({
   label: o,
-  selected: i,
-  onChange: d,
-  className: l,
+  selected: l,
+  onChange: n,
+  className: p,
   error: t,
   helperText: a,
-  ...p
-}) => /* @__PURE__ */ c("div", { className: e("w-full flex flex-col", l), children: [
-  /* @__PURE__ */ r("style", { children: m }),
-  o && /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: o }),
-  /* @__PURE__ */ c("div", { className: "relative", children: [
-    /* @__PURE__ */ r(
-      n,
-      {
-        selected: i,
-        onChange: d,
-        className: e(
-          "flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          t ? "border-destructive" : "border-input"
-        ),
-        wrapperClassName: "w-full",
-        showPopperArrow: !1,
-        ...p
-      }
-    ),
-    /* @__PURE__ */ r("div", { className: "absolute right-3 top-2.5 pointer-events-none text-muted-foreground", children: /* @__PURE__ */ r(s, { name: "calendar", className: "h-4 w-4" }) })
-  ] }),
-  a && /* @__PURE__ */ r("p", { className: e("mt-1.5 text-xs", t ? "text-destructive" : "text-muted-foreground"), children: a })
-] });
+  ...c
+}) => {
+  const m = s.useId(), i = c.id || m;
+  return /* @__PURE__ */ d("div", { className: e("w-full flex flex-col", p), children: [
+    /* @__PURE__ */ r("style", { children: f }),
+    o && /* @__PURE__ */ r("label", { htmlFor: i, className: "block text-sm font-medium text-foreground mb-1.5", children: o }),
+    /* @__PURE__ */ d("div", { className: "relative", children: [
+      /* @__PURE__ */ r(
+        b,
+        {
+          id: i,
+          selected: l,
+          onChange: n,
+          className: e(
+            "flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            t ? "border-destructive" : "border-input"
+          ),
+          wrapperClassName: "w-full",
+          showPopperArrow: !1,
+          ...c
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "absolute right-3 top-2.5 pointer-events-none text-muted-foreground", children: /* @__PURE__ */ r(u, { name: "calendar", className: "h-4 w-4" }) })
+    ] }),
+    a && /* @__PURE__ */ r("p", { className: e("mt-1.5 text-xs", t ? "text-destructive" : "text-muted-foreground"), children: a })
+  ] });
+};
 export {
-  x as DatePicker
+  y as DatePicker
 };

package/dist/components/forms/FileUpload.js

@@ -1,41 +1,41 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { useState as x, useRef as A, useCallback as l } from "react";
+import F, { useState as v, useRef as I, useCallback as i } from "react";
 import { Button as j } from "../ui/Button.js";
-import { Icon as i } from "../ui/Icon.js";
-import { cn as v } from "../../utils/cn.js";
-const S = ({
-  onFileUpload: b,
-  multiple: n = !1,
-  acceptedFileTypes: o,
-  label: c,
-  className: N,
+import { Icon as c } from "../ui/Icon.js";
+import { cn as b } from "../../utils/cn.js";
+const $ = ({
+  onFileUpload: N,
+  multiple: o = !1,
+  acceptedFileTypes: n,
+  label: s,
+  className: y,
   helperText: m
 }) => {
-  const [y, s] = x(!1), [f, u] = x([]), p = A(null), d = l((e) => {
-    e.preventDefault(), e.stopPropagation(), e.type === "dragenter" || e.type === "dragover" ? s(!0) : e.type === "dragleave" && s(!1);
+  const [D, d] = v(!1), [f, u] = v([]), p = I(null), l = i((e) => {
+    e.preventDefault(), e.stopPropagation(), e.type === "dragenter" || e.type === "dragover" ? d(!0) : e.type === "dragleave" && d(!1);
   }, []), g = (e) => {
-    u((a) => n ? [...a, ...e] : [e[0]]), b(e);
-  }, D = l((e) => {
-    e.preventDefault(), e.stopPropagation(), s(!1), e.dataTransfer.files && e.dataTransfer.files.length > 0 && g(Array.from(e.dataTransfer.files));
-  }, [n]), w = l((e) => {
+    u((a) => o ? [...a, ...e] : [e[0]]), N(e);
+  }, w = i((e) => {
+    e.preventDefault(), e.stopPropagation(), d(!1), e.dataTransfer.files && e.dataTransfer.files.length > 0 && g(Array.from(e.dataTransfer.files));
+  }, [o]), C = i((e) => {
     e.preventDefault(), e.target.files && e.target.files.length > 0 && g(Array.from(e.target.files));
-  }, [n]), k = (e) => {
-    u((a) => a.filter((h, C) => C !== e));
-  };
-  return /* @__PURE__ */ t("div", { className: v("w-full", N), children: [
-    c && /* @__PURE__ */ r("label", { className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
+  }, [o]), k = (e) => {
+    u((a) => a.filter((x, A) => A !== e));
+  }, h = F.useId();
+  return /* @__PURE__ */ t("div", { className: b("w-full", y), children: [
+    s && /* @__PURE__ */ r("label", { htmlFor: h, className: "block text-sm font-medium text-foreground mb-1.5", children: s }),
     /* @__PURE__ */ t(
       "div",
       {
-        className: v(
+        className: b(
           "relative flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg transition-colors duration-200 ease-in-out cursor-pointer",
-          y ? "border-primary bg-primary/5" : "border-border bg-card hover:bg-muted/50",
+          D ? "border-primary bg-primary/5" : "border-border bg-card hover:bg-muted/50",
           "min-h-[150px]"
         ),
-        onDragEnter: d,
-        onDragLeave: d,
-        onDragOver: d,
-        onDrop: D,
+        onDragEnter: l,
+        onDragLeave: l,
+        onDragOver: l,
+        onDrop: w,
         onClick: () => {
           var e;
           return (e = p.current) == null ? void 0 : e.click();
@@ -45,28 +45,30 @@ const S = ({
             "input",
             {
               ref: p,
+              id: h,
               type: "file",
               className: "hidden",
-              multiple: n,
-              accept: o,
-              onChange: w
+              "aria-label": s || "Choose files to upload",
+              multiple: o,
+              accept: n,
+              onChange: C
             }
           ),
-          /* @__PURE__ */ r("div", { className: "bg-muted p-3 rounded-full mb-3", children: /* @__PURE__ */ r(i, { name: "upload-cloud", className: "h-6 w-6 text-muted-foreground" }) }),
+          /* @__PURE__ */ r("div", { className: "bg-muted p-3 rounded-full mb-3", children: /* @__PURE__ */ r(c, { name: "upload-cloud", className: "h-6 w-6 text-muted-foreground" }) }),
           /* @__PURE__ */ t("p", { className: "text-sm font-medium text-foreground text-center", children: [
             /* @__PURE__ */ r("span", { className: "text-primary font-semibold hover:underline", children: "Click to upload" }),
             " or drag and drop"
           ] }),
           /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground mt-1", children: [
-            o ? o.replace(/,/g, ", ") : "Any file type",
-            n ? "" : " (Single file)"
+            n ? n.replace(/,/g, ", ") : "Any file type",
+            o ? "" : " (Single file)"
           ] })
         ]
       }
     ),
     f.length > 0 && /* @__PURE__ */ r("div", { className: "mt-4 space-y-2", children: f.map((e, a) => /* @__PURE__ */ t("div", { className: "flex items-center justify-between p-2 rounded-md border border-border bg-card", children: [
       /* @__PURE__ */ t("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-        /* @__PURE__ */ r("div", { className: "bg-primary/10 p-2 rounded text-primary", children: /* @__PURE__ */ r(i, { name: "file", className: "h-4 w-4" }) }),
+        /* @__PURE__ */ r("div", { className: "bg-primary/10 p-2 rounded text-primary", children: /* @__PURE__ */ r(c, { name: "file", className: "h-4 w-4" }) }),
         /* @__PURE__ */ t("div", { className: "min-w-0", children: [
           /* @__PURE__ */ r("p", { className: "text-sm font-medium text-foreground truncate", children: e.name }),
           /* @__PURE__ */ t("p", { className: "text-xs text-muted-foreground", children: [
@@ -81,10 +83,10 @@ const S = ({
           variant: "ghost",
           size: "icon",
           className: "h-8 w-8 text-muted-foreground hover:text-destructive",
-          onClick: (h) => {
-            h.stopPropagation(), k(a);
+          onClick: (x) => {
+            x.stopPropagation(), k(a);
           },
-          children: /* @__PURE__ */ r(i, { name: "x", className: "h-4 w-4" })
+          children: /* @__PURE__ */ r(c, { name: "x", className: "h-4 w-4" })
         }
       )
     ] }, `${e.name}-${a}`)) }),
@@ -92,5 +94,5 @@ const S = ({
   ] });
 };
 export {
-  S as FileUpload
+  $ as FileUpload
 };

package/dist/components/forms/Input.js

@@ -1,43 +1,44 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import b from "react";
-import { Icon as g } from "../ui/Icon.js";
+import c from "react";
+import { Icon as N } from "../ui/Icon.js";
 import { cn as o } from "../../utils/cn.js";
-const v = b.forwardRef(
+const h = c.forwardRef(
   ({
     label: r,
     icon: t,
     helperText: i,
-    error: a = !1,
+    error: d = !1,
     required: s = !1,
-    showOptionalLabel: d = !1,
-    className: m,
-    containerClassName: c,
+    showOptionalLabel: m = !1,
+    className: f,
+    containerClassName: u,
     ...l
-  }, f) => {
-    const u = "flex h-10 w-full rounded-md border bg-background py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", p = a ? "border-destructive" : "border-input", x = t ? "pl-10 pr-3" : "px-3";
-    return /* @__PURE__ */ n("div", { className: o("w-full", c), children: [
-      r && /* @__PURE__ */ n("label", { htmlFor: l.id || l.name, className: "block text-sm font-medium text-foreground mb-1", children: [
+  }, p) => {
+    const b = c.useId(), a = l.id || l.name || b, x = "flex h-10 w-full rounded-md border bg-background py-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", g = d ? "border-destructive" : "border-input", v = t ? "pl-10 pr-3" : "px-3";
+    return /* @__PURE__ */ n("div", { className: o("w-full", u), children: [
+      r && /* @__PURE__ */ n("label", { htmlFor: a, className: "block text-sm font-medium text-foreground mb-1", children: [
         r,
         s && /* @__PURE__ */ e("span", { className: "text-destructive ml-1", children: "*" }),
-        !s && d && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
+        !s && m && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground ml-1", children: "(optional)" })
       ] }),
       /* @__PURE__ */ n("div", { className: "relative w-full", children: [
-        t && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(g, { name: t, className: "text-muted-foreground", size: 16 }) }),
+        t && /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(N, { name: t, className: "text-muted-foreground", size: 16 }) }),
         /* @__PURE__ */ e(
           "input",
           {
-            ref: f,
-            className: o(u, p, x, m),
+            ref: p,
+            id: a,
+            className: o(x, g, v, f),
             required: s,
             ...l
           }
         )
       ] }),
-      i && /* @__PURE__ */ e("p", { className: o("mt-1.5 text-xs", a ? "text-destructive" : "text-muted-foreground"), children: i })
+      i && /* @__PURE__ */ e("p", { className: o("mt-1.5 text-xs", d ? "text-destructive" : "text-muted-foreground"), children: i })
     ] });
   }
 );
-v.displayName = "Input";
+h.displayName = "Input";
 export {
-  v as Input
+  h as Input
 };

package/dist/components/forms/MultiSelect.js

@@ -7,24 +7,24 @@ const R = (a) => /* @__PURE__ */ e(d.DropdownIndicator, { ...a, children: /* @__
   options: a,
   value: u,
   onChange: m,
-  label: t,
+  label: c,
   placeholder: s = "Select...",
   isClearable: b = !0,
   isDisabled: g = !1,
   isLoading: v = !1,
   isSearchable: x = !0,
   className: f,
-  error: c,
-  helperText: l
+  error: l,
+  helperText: n
 }) => {
-  const n = S(), h = (r, o) => {
+  const t = S(), h = (r, o) => {
     const C = r ? Array.from(r) : null;
     m(C);
   }, y = {
     control: (r, o) => ({
       ...r,
       backgroundColor: "rgb(var(--app-card-bg-color))",
-      borderColor: c ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
+      borderColor: l ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
       color: "rgb(var(--app-text-color))",
       borderRadius: "var(--app-border-radius-md)",
       boxShadow: o.isFocused ? "0 0 0 1px rgb(var(--app-primary-color))" : "none",
@@ -83,11 +83,12 @@ const R = (a) => /* @__PURE__ */ e(d.DropdownIndicator, { ...a, children: /* @__
     })
   };
   return /* @__PURE__ */ I("div", { className: p("w-full", f), children: [
-    t && /* @__PURE__ */ e("label", { htmlFor: n, className: "block text-sm font-medium text-foreground mb-1.5", children: t }),
+    c && /* @__PURE__ */ e("label", { htmlFor: t, className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
     /* @__PURE__ */ e(
       k,
       {
-        instanceId: n,
+        instanceId: t,
+        inputId: t,
         styles: y,
         components: { DropdownIndicator: R, MultiValueRemove: w },
         options: a,
@@ -103,7 +104,7 @@ const R = (a) => /* @__PURE__ */ e(d.DropdownIndicator, { ...a, children: /* @__
         menuPosition: "fixed"
       }
     ),
-    l && /* @__PURE__ */ e("p", { className: p("mt-1.5 text-xs", c ? "text-destructive" : "text-muted-foreground"), children: l })
+    n && /* @__PURE__ */ e("p", { className: p("mt-1.5 text-xs", l ? "text-destructive" : "text-muted-foreground"), children: n })
   ] });
 };
 export {

package/dist/components/forms/Radio.js

@@ -1,17 +1,17 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-const m = ({ label: t, id: s, className: o, ...i }) => {
-  const e = s || `radio-${Math.random().toString(36).substr(2, 9)}`;
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+const m = ({ label: e, id: s, className: o, ...i }) => {
+  const r = s || `radio-${Math.random().toString(36).substr(2, 9)}`;
   return /* @__PURE__ */ a("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ t(
       "input",
       {
-        id: e,
+        id: r,
         type: "radio",
         className: `form-radio h-4 w-4 transition-colors duration-200 ease-in-out cursor-pointer text-primary border-border bg-card focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed ${o || ""}`,
         ...i
       }
     ),
-    t && /* @__PURE__ */ r("label", { htmlFor: e, className: "ml-2 text-sm text-text cursor-pointer", children: t })
+    e && /* @__PURE__ */ t("label", { htmlFor: r, className: "ml-2 text-sm text-foreground cursor-pointer", children: e })
   ] });
 };
 export {

package/dist/components/forms/SegmentedControl.d.ts

@@ -19,7 +19,7 @@ export interface SegmentedControlProps {
 /**
  * @wizard
  * @name SegmentedControl
- * @description A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List").
+ * @description A theme-aware linear toggle component. Ideal for switching between discrete modes (e.g., "Map / List"). Every size clears the 24px WCAG 2.5.8 (AA) target-size minimum — xs 24px, sm ~25px, md ~36px. None reaches the 44px 2.5.5 (AAA) figure, so for a primary control on a touch screen prefer md or give the control its own 44px row; xs and sm are density sizes for pointer-driven toolbars.
  * @tags input, toggle, switch, radio, control
  * @category form
  * @id segmented-control

package/dist/components/forms/SegmentedControl.js

@@ -1,29 +1,46 @@
-import { jsx as d } from "react/jsx-runtime";
-import { cn as t } from "../../utils/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+import { cn as d } from "../../utils/cn.js";
 const m = ({
   options: n,
-  value: o,
+  value: i,
   onChange: l,
   size: r = "md",
-  className: a
-}) => /* @__PURE__ */ d("div", { className: t(
+  className: o
+}) => /* @__PURE__ */ t("div", { className: d(
   // Container: Use 'muted' background for the track (works in all themes)
   "inline-flex bg-muted border border-border",
   r === "xs" ? "rounded-md p-0.5" : "rounded-lg p-1",
-  a
+  o
 ), children: n.map((e) => {
-  const i = e.value === o;
-  return /* @__PURE__ */ d(
+  const s = e.value === i;
+  return /* @__PURE__ */ t(
     "button",
     {
       onClick: () => !e.disabled && l(e.value),
       disabled: e.disabled,
-      className: t(
+      className: d(
         "relative rounded-md font-medium transition-all duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
         // Size Variants
-        r === "xs" ? "text-[10px] px-2 py-0.5" : r === "sm" ? "text-xs px-3 py-1" : "text-sm px-4 py-1.5",
+        //
+        // `xs` carries a stated 24px floor rather than a padding value
+        // tuned to reach one. WCAG 2.5.8 Target Size (Minimum, level AA)
+        // is 24x24; this variant measured 19px, so it was the only size
+        // in the set that failed. min-h-6 cannot drift when the fluid
+        // scale interpolates or when a theme changes the base font size,
+        // where padding arithmetic silently can.
+        //
+        // It also drops `text-[10px]`: an arbitrary type size is banned
+        // outright by AGENTS.md, and being outside the scale made this
+        // the one size that ignored both the viewport and
+        // useTheme().setFontSize — it measured 19px at 360px and 19px at
+        // 1280px while every other size moved.
+        //
+        // inline-flex is scoped to `xs` on purpose. Applying it to all
+        // three would re-resolve the line box for `sm` and `md`, and
+        // those two already clear AA and must not move.
+        r === "xs" ? "inline-flex items-center justify-center min-h-6 text-2xs px-2 py-0.5" : r === "sm" ? "text-xs px-3 py-1" : "text-sm px-4 py-1.5",
         // State Styles (Theme Aware)
-        i ? "bg-card text-foreground shadow-sm ring-1 ring-black/5 dark:ring-white/10" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
+        s ? "bg-card text-foreground shadow-sm ring-1 ring-black/5 dark:ring-white/10" : "text-muted-foreground hover:text-foreground hover:bg-background/50",
         e.disabled && "opacity-50 cursor-not-allowed"
       ),
       type: "button",

package/dist/components/forms/Select.js

@@ -7,21 +7,21 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
   options: a,
   value: l,
   onChange: i,
-  label: c,
+  label: p,
   placeholder: m = "Select...",
   isDisabled: s = !1,
   isLoading: u = !1,
   isClearable: b = !0,
   isSearchable: g = !0,
   className: v,
-  error: p,
-  helperText: t
+  error: t,
+  helperText: d
 }) => {
-  const d = h(), x = {
+  const c = h(), x = {
     control: (r, o) => ({
       ...r,
       backgroundColor: "rgb(var(--app-card-bg-color))",
-      borderColor: p ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
+      borderColor: t ? "rgb(var(--app-danger-color))" : o.isFocused ? "rgb(var(--app-primary-color))" : "rgb(var(--app-border-color))",
       color: "rgb(var(--app-text-color))",
       borderRadius: "var(--app-border-radius-md)",
       boxShadow: o.isFocused ? "0 0 0 1px rgb(var(--app-primary-color))" : "none",
@@ -65,11 +65,12 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
     })
   };
   return /* @__PURE__ */ f("div", { className: n("w-full", v), children: [
-    c && /* @__PURE__ */ e("label", { htmlFor: d, className: "block text-sm font-medium text-foreground mb-1.5", children: c }),
+    p && /* @__PURE__ */ e("label", { htmlFor: c, className: "block text-sm font-medium text-foreground mb-1.5", children: p }),
     /* @__PURE__ */ e(
       y,
       {
-        instanceId: d,
+        instanceId: c,
+        inputId: c,
         styles: x,
         components: { DropdownIndicator: S },
         options: a,
@@ -84,7 +85,7 @@ const S = (a) => /* @__PURE__ */ e(I.DropdownIndicator, { ...a, children: /* @__
         menuPosition: "fixed"
       }
     ),
-    t && /* @__PURE__ */ e("p", { className: n("mt-1.5 text-xs", p ? "text-destructive" : "text-muted-foreground"), children: t })
+    d && /* @__PURE__ */ e("p", { className: n("mt-1.5 text-xs", t ? "text-destructive" : "text-muted-foreground"), children: d })
   ] });
 };
 export {

package/dist/components/forms/Textarea.d.ts

@@ -1,22 +1,24 @@
 import React from 'react';
-interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
+    helperText?: string;
+    error?: boolean;
+    required?: boolean;
+    showOptionalLabel?: boolean;
     containerClassName?: string;
 }
 /**
  * @wizard
  * @name Textarea
- * @description A theme-aware textarea component for multi-line text input.
- * @tags form, input, ui
- * @props
- * - name: label
- * type: string
- * description: An optional label to display above the textarea.
- * - name: containerClassName
- * type: string
- * description: Optional additional CSS classes for the container div.
+ * @description A theme-aware multi-line text input with label, helper text, and validation state support. Strategic purpose: the multi-line sibling of Input, styled identically so the two are indistinguishable when stacked in one form. Forwards all standard HTML textarea attributes via spread.
+ * @tags form, input, ui, text, multiline
  * @category form
  * @id textarea
+ * @param {string} label - Optional label displayed above the textarea.
+ * @param {string} helperText - Supporting text rendered below the textarea. Appears in destructive color when error is true.
+ * @param {boolean} error - If true, applies destructive border styling to indicate a validation error. Defaults to false.
+ * @param {boolean} required - If true, appends a required (*) indicator next to the label. Defaults to false.
+ * @param {boolean} showOptionalLabel - If true, appends an (optional) label when the field is not required. Defaults to false.
+ * @param {string} containerClassName - Additional CSS classes applied to the outer container div.
  */
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export {};