@ramme-io/ui 4.1.0 → 4.2.0

package/dist/components/auth/LoginPage.js

@@ -1,98 +1,106 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { Link as p } from "react-router-dom";
-import { Button as g } from "../ui/Button.js";
-import { Input as h } from "../forms/Input.js";
-import { Alert as b } from "../feedback/Alert.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { Link as x } from "react-router-dom";
+import { Button as v } from "../ui/Button.js";
+import { Input as f } from "../forms/Input.js";
+import { Alert as y } from "../feedback/Alert.js";
 import { Icon as s } from "../ui/Icon.js";
-const S = ({ onLogin: f, error: l, loading: i, quickProfiles: r }) => {
-  const [n, o] = u(""), [c, d] = u(""), x = (a) => {
-    a.preventDefault(), f(n, c);
-  }, m = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-foreground/90";
-  return /* @__PURE__ */ t("div", { className: "w-full max-w-[400px] space-y-6 animate-in fade-in zoom-in-95 duration-300", children: [
-    /* @__PURE__ */ t("div", { className: "flex flex-col items-center space-y-2 text-center mb-8", children: [
+const A = ({
+  onLogin: g,
+  error: l,
+  loading: i,
+  quickProfiles: r,
+  signupHref: n = "/auth/signup",
+  signupLabel: b = "Create one",
+  forgotHref: o = "#"
+}) => {
+  const [c, d] = h(""), [m, u] = h(""), N = (t) => {
+    t.preventDefault(), g(c, m);
+  }, p = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2 block text-foreground/90";
+  return /* @__PURE__ */ a("div", { className: "w-full max-w-[400px] space-y-6 animate-in fade-in zoom-in-95 duration-300", children: [
+    /* @__PURE__ */ a("div", { className: "flex flex-col items-center space-y-2 text-center mb-8", children: [
       /* @__PURE__ */ e("div", { className: "h-10 w-10 bg-primary/10 rounded-xl flex items-center justify-center mb-2 border border-primary/20", children: /* @__PURE__ */ e(s, { name: "hexagon", className: "text-primary fill-primary/20", size: 24, strokeWidth: 2.5 }) }),
       /* @__PURE__ */ e("h1", { className: "text-2xl font-bold tracking-tight", children: "Welcome back" }),
       /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "Enter your credentials to access your workspace" })
     ] }),
-    /* @__PURE__ */ t("div", { className: "bg-card text-card-foreground border shadow-sm rounded-xl overflow-hidden", children: [
-      /* @__PURE__ */ e("div", { className: "p-6 pt-6", children: /* @__PURE__ */ t("form", { onSubmit: x, className: "space-y-4", children: [
-        l && /* @__PURE__ */ e(b, { variant: "danger", title: "Authentication Error", className: "mb-4", children: l }),
-        /* @__PURE__ */ t("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ e("label", { htmlFor: "email", className: m, children: "Email" }),
-          /* @__PURE__ */ t("div", { className: "relative group", children: [
+    /* @__PURE__ */ a("div", { className: "bg-card text-card-foreground border shadow-sm rounded-xl overflow-hidden", children: [
+      /* @__PURE__ */ e("div", { className: "p-6 pt-6", children: /* @__PURE__ */ a("form", { onSubmit: N, className: "space-y-4", children: [
+        l && /* @__PURE__ */ e(y, { variant: "danger", title: "Authentication Error", className: "mb-4", children: l }),
+        /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ e("label", { htmlFor: "email", className: p, children: "Email" }),
+          /* @__PURE__ */ a("div", { className: "relative group", children: [
             /* @__PURE__ */ e(s, { name: "mail", className: "absolute left-3 top-2.5 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" }),
             /* @__PURE__ */ e(
-              h,
+              f,
               {
                 id: "email",
                 type: "email",
                 placeholder: "name@example.com",
                 className: "pl-9 h-10 bg-background/50",
-                value: n,
-                onChange: (a) => o(a.target.value),
+                value: c,
+                onChange: (t) => d(t.target.value),
                 required: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ t("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ e("label", { htmlFor: "password", className: m, children: "Password" }),
-            /* @__PURE__ */ e(p, { to: "#", className: "text-xs text-primary hover:underline font-medium", children: "Forgot?" })
+        /* @__PURE__ */ a("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ e("label", { htmlFor: "password", className: p, children: "Password" }),
+            o !== null && /* @__PURE__ */ e(x, { to: o, className: "text-xs text-primary hover:underline font-medium", children: "Forgot?" })
           ] }),
-          /* @__PURE__ */ t("div", { className: "relative group", children: [
+          /* @__PURE__ */ a("div", { className: "relative group", children: [
             /* @__PURE__ */ e(s, { name: "lock", className: "absolute left-3 top-2.5 h-4 w-4 text-muted-foreground group-focus-within:text-primary transition-colors" }),
             /* @__PURE__ */ e(
-              h,
+              f,
               {
                 id: "password",
                 type: "password",
                 className: "pl-9 h-10 bg-background/50",
-                value: c,
-                onChange: (a) => d(a.target.value),
+                value: m,
+                onChange: (t) => u(t.target.value),
                 required: !0
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ e(g, { type: "submit", className: "w-full mt-2", size: "lg", disabled: i, children: i ? "Authenticating..." : "Sign In" })
+        /* @__PURE__ */ e(v, { type: "submit", className: "w-full mt-2", size: "lg", disabled: i, children: i ? "Authenticating..." : "Sign In" })
       ] }) }),
-      r && r.length > 0 && /* @__PURE__ */ t("div", { className: "px-6 pb-6 space-y-3", children: [
-        /* @__PURE__ */ t("div", { className: "relative mb-4", children: [
+      r && r.length > 0 && /* @__PURE__ */ a("div", { className: "px-6 pb-6 space-y-3", children: [
+        /* @__PURE__ */ a("div", { className: "relative mb-4", children: [
           /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ e("span", { className: "w-full border-t border-border/50" }) }),
           /* @__PURE__ */ e("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ e("span", { className: "bg-card px-2 text-muted-foreground", children: "Quick Select Profiles" }) })
         ] }),
-        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: r.map((a) => /* @__PURE__ */ t(
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: r.map((t) => /* @__PURE__ */ a(
           "button",
           {
             type: "button",
             onClick: () => {
-              o(a.email), d("demo");
+              d(t.email), u("demo");
             },
             className: "flex flex-col items-start p-3 text-left border rounded-lg hover:border-primary hover:bg-primary/5 transition-all w-full focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 focus:ring-offset-card",
             children: [
-              /* @__PURE__ */ e("span", { className: "font-medium text-sm text-foreground", children: a.name }),
-              /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: a.role })
+              /* @__PURE__ */ e("span", { className: "font-medium text-sm text-foreground", children: t.name }),
+              /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: t.role })
             ]
           },
-          a.email
+          t.email
         )) })
       ] }),
-      /* @__PURE__ */ t("div", { className: "p-6 pt-0 text-center", children: [
-        /* @__PURE__ */ t("div", { className: "relative mb-4", children: [
+      n !== null && /* @__PURE__ */ a("div", { className: "p-6 pt-0 text-center", children: [
+        /* @__PURE__ */ a("div", { className: "relative mb-4", children: [
           /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ e("span", { className: "w-full border-t" }) }),
           /* @__PURE__ */ e("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ e("span", { className: "bg-card px-2 text-muted-foreground", children: "Or continue with" }) })
         ] }),
-        /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ a("p", { className: "text-sm text-muted-foreground", children: [
           "Don't have an account?",
           " ",
-          /* @__PURE__ */ e(p, { to: "/auth/signup", className: "font-semibold text-primary hover:underline transition-all", children: "Create one" })
+          /* @__PURE__ */ e(x, { to: n, className: "font-semibold text-primary hover:underline transition-all", children: b })
         ] })
       ] })
     ] })
   ] });
 };
 export {
-  S as LoginPage
+  A as LoginPage
 };

package/dist/components/data-display/StatusBadge.d.ts

@@ -4,8 +4,9 @@ export interface StatusBadgeProps {
     /** One of the 5 built-in presets. Omit and use `color` + `label` for a
      * status this preset set doesn't cover (e.g. a domain-specific state). */
     status?: StatusType;
-    /** Tailwind background class for the dot, e.g. 'bg-emerald-500'. Overrides
-     * the `status` preset's color when both are given. */
+    /** Background class for the dot, e.g. 'bg-success' or 'bg-chart-2'. Overrides
+     * the `status` preset's colour when both are given. Use a semantic token: a
+     * numeric shade is fixed across all five themes. */
     color?: string;
     /**
      * Optional custom label. If not provided, uses the default status name.
@@ -27,7 +28,7 @@ export interface StatusBadgeProps {
  * description: One of the 5 built-in presets. Determines the color of the dot. Omit and use `color`+`label` for a status outside this set.
  * - name: color
  * type: string
- * description: Tailwind background class for the dot (e.g. 'bg-emerald-500'). Overrides the `status` preset's color when both are given.
+ * description: Background class for the dot (e.g. 'bg-success'). Use a semantic token — a numeric shade does not adapt to the active theme. Overrides the `status` preset's colour when both are given.
  * - name: label
  * type: string
  * description: Custom text to display next to the dot. If omitted, displays the status name (e.g., "Online").

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

@@ -1,28 +1,28 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { cn as t } from "../../utils/cn.js";
-const d = {
-  online: { color: "bg-green-500", label: "Online" },
-  offline: { color: "bg-gray-400", label: "Offline" },
-  error: { color: "bg-red-500", label: "Error" },
-  warning: { color: "bg-yellow-500", label: "Warning" },
-  active: { color: "bg-blue-500", label: "Active" }
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+const g = {
+  online: { color: "bg-success", label: "Online" },
+  offline: { color: "bg-muted-foreground", label: "Offline" },
+  error: { color: "bg-destructive", label: "Error" },
+  warning: { color: "bg-warning", label: "Warning" },
+  active: { color: "bg-info", label: "Active" }
 }, m = ({
-  status: e,
-  color: a,
-  label: n,
-  className: i,
-  showDot: c = !0
+  status: n,
+  color: t,
+  label: r,
+  className: c,
+  showDot: a = !0
 }) => {
-  const l = e ? d[e] : void 0, s = a ?? (l == null ? void 0 : l.color) ?? "bg-muted-foreground", o = n === null ? null : n ?? (l == null ? void 0 : l.label) ?? null;
-  return /* @__PURE__ */ g("div", { className: t("inline-flex items-center gap-2", i), children: [
-    c && /* @__PURE__ */ r(
+  const o = n ? g[n] : void 0, s = t ?? (o == null ? void 0 : o.color) ?? "bg-muted-foreground", l = r === null ? null : r ?? (o == null ? void 0 : o.label) ?? null;
+  return /* @__PURE__ */ d("div", { className: i("inline-flex items-center gap-2", c), children: [
+    a && /* @__PURE__ */ e(
       "span",
       {
-        className: t("h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-slate-900", s),
+        className: i("h-2.5 w-2.5 rounded-full ring-2 ring-card", s),
         "aria-hidden": "true"
       }
     ),
-    o && /* @__PURE__ */ r("span", { className: "text-sm font-medium text-slate-700 dark:text-slate-300", children: o })
+    l && /* @__PURE__ */ e("span", { className: "text-sm font-medium text-foreground", children: l })
   ] });
 };
 export {

package/dist/components/feedback/Alert.js

@@ -1,37 +1,37 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Icon as c } from "../ui/Icon.js";
-const i = {
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { Icon as o } from "../ui/Icon.js";
+const a = {
   info: {
     icon: "info",
-    classes: "bg-primary/10 border-primary/50 text-primary"
+    classes: "bg-info/10 border-info/50 text-info-strong"
   },
   success: {
     icon: "check-circle",
-    classes: "bg-green-500/10 border-green-500/50 text-green-700 dark:text-green-400"
+    classes: "bg-success/10 border-success/50 text-success-strong"
   },
   warning: {
     icon: "alert-triangle",
-    classes: "bg-yellow-500/10 border-yellow-500/50 text-yellow-700 dark:text-yellow-400"
+    classes: "bg-warning/10 border-warning/50 text-warning-strong"
   },
   danger: {
     icon: "x-circle",
-    classes: "bg-red-500/10 border-red-500/50 text-red-700 dark:text-red-500"
+    classes: "bg-destructive/10 border-destructive/50 text-destructive-strong"
   }
-}, m = ({
-  title: o,
-  children: r,
-  variant: t = "info",
-  className: a
+}, g = ({
+  title: n,
+  children: e,
+  variant: i = "info",
+  className: t
 }) => {
-  const s = i[t];
-  return /* @__PURE__ */ l("div", { className: `flex items-start gap-4 p-4 border-l-4 rounded-r-lg ${s.classes} ${a || ""}`, role: "alert", children: [
-    /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(c, { name: s.icon, size: 20 }) }),
-    /* @__PURE__ */ l("div", { className: "flex-grow", children: [
-      /* @__PURE__ */ e("h4", { className: "font-semibold", children: o }),
-      r && /* @__PURE__ */ e("div", { className: "text-sm mt-1", children: r })
+  const r = a[i];
+  return /* @__PURE__ */ c("div", { className: `flex items-start gap-4 p-4 border-l-4 rounded-r-lg ${r.classes} ${t || ""}`, role: "alert", children: [
+    /* @__PURE__ */ s("div", { className: "flex-shrink-0", children: /* @__PURE__ */ s(o, { name: r.icon, size: 20 }) }),
+    /* @__PURE__ */ c("div", { className: "flex-grow", children: [
+      /* @__PURE__ */ s("h4", { className: "font-semibold", children: n }),
+      e && /* @__PURE__ */ s("div", { className: "text-sm mt-1", children: e })
     ] })
   ] });
 };
 export {
-  m as Alert
+  g as Alert
 };

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 {