@orion-ds/react 4.2.14 → 4.3.1

package/dist/components/Drawer/Drawer.mjs

@@ -0,0 +1,132 @@
+import { jsxs as m, jsx as d } from "react/jsx-runtime";
+import { forwardRef as s, useCallback as u, useEffect as j } from "react";
+import { createPortal as L } from "react-dom";
+import o from "./Drawer.module.css.mjs";
+const w = s(
+  ({ children: e, className: r, ...t }, a) => /* @__PURE__ */ d(
+    "div",
+    {
+      ref: a,
+      className: `${o.header} ${r || ""}`,
+      ...t,
+      children: e
+    }
+  )
+);
+w.displayName = "Drawer.Header";
+const y = s(
+  ({ children: e, className: r, ...t }, a) => /* @__PURE__ */ d("div", { ref: a, className: `${o.body} ${r || ""}`, ...t, children: e })
+);
+y.displayName = "Drawer.Body";
+const f = s(
+  ({ children: e, className: r, ...t }, a) => /* @__PURE__ */ d(
+    "div",
+    {
+      ref: a,
+      className: `${o.footer} ${r || ""}`,
+      ...t,
+      children: e
+    }
+  )
+);
+f.displayName = "Drawer.Footer";
+const v = s(
+  ({
+    open: e,
+    onClose: r,
+    placement: t = "right",
+    size: a = "md",
+    closeOnBackdrop: n = !0,
+    closeOnEscape: c = !0,
+    showCloseButton: h = !0,
+    children: b,
+    className: k,
+    ...p
+  }, N) => {
+    const i = u(
+      (l) => {
+        c && l.key === "Escape" && r();
+      },
+      [c, r]
+    ), D = u(() => {
+      n && r();
+    }, [n, r]);
+    if (j(() => {
+      if (e) {
+        const l = document.body.style.overflow;
+        return document.body.style.overflow = "hidden", document.addEventListener("keydown", i), () => {
+          document.body.style.overflow = l, document.removeEventListener("keydown", i);
+        };
+      }
+    }, [e, i]), !e)
+      return null;
+    const g = [o.overlay, e && o.overlayVisible].filter(Boolean).join(" "), B = [
+      o.drawer,
+      o[t],
+      o[`size-${a}`],
+      e && o.drawerVisible,
+      k
+    ].filter(Boolean).join(" "), $ = /* @__PURE__ */ m("div", { className: g, children: [
+      /* @__PURE__ */ d(
+        "div",
+        {
+          className: o.backdrop,
+          onClick: D,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ m(
+        "div",
+        {
+          ref: N,
+          className: B,
+          role: "dialog",
+          "aria-modal": "true",
+          ...p,
+          children: [
+            h && /* @__PURE__ */ d(
+              "button",
+              {
+                type: "button",
+                className: o.closeButton,
+                onClick: r,
+                "aria-label": "Close drawer",
+                children: /* @__PURE__ */ d(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ d(
+                      "path",
+                      {
+                        d: "M15 5L5 15M5 5L15 15",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            b
+          ]
+        }
+      )
+    ] });
+    return L($, document.body);
+  }
+);
+v.displayName = "Drawer";
+const H = Object.assign(v, {
+  Header: w,
+  Body: y,
+  Footer: f
+});
+export {
+  H as Drawer
+};

package/dist/components/Dropdown/Dropdown.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react"),U=require("react-dom"),i=require("./Dropdown.module.css.cjs"),V=(e,l,m)=>{const r=window.scrollX,c=window.scrollY,u=4;let n=0,h=0;switch(m){case"bottom-start":n=e.bottom+c+u,h=e.left+r;break;case"bottom":n=e.bottom+c+u,h=e.left+r+(e.width-l.width)/2;break;case"bottom-end":n=e.bottom+c+u,h=e.right+r-l.width;break;case"top-start":n=e.top+c-l.height-u,h=e.left+r;break;case"top":n=e.top+c-l.height-u,h=e.left+r+(e.width-l.width)/2;break;case"top-end":n=e.top+c-l.height-u,h=e.right+r-l.width;break}return{top:n,left:h}},_=({item:e,onSelect:l,onNavigate:m})=>{const r=()=>{e.disabled||(e.onClick?.(),l())},c=n=>{n.key==="Enter"||n.key===" "?(n.preventDefault(),r()):n.key==="ArrowDown"?(n.preventDefault(),m?.("down")):n.key==="ArrowUp"&&(n.preventDefault(),m?.("up"))},u=[i.default.item,e.disabled&&i.default.disabled,e.danger&&i.default.danger].filter(Boolean).join(" ");return a.jsxs("div",{className:u,role:"menuitem",tabIndex:e.disabled?-1:0,"aria-disabled":e.disabled,onClick:r,onKeyDown:c,children:[e.icon&&a.jsx("span",{className:i.default.icon,"aria-hidden":"true",children:e.icon}),a.jsx("span",{className:i.default.label,children:e.label}),e.shortcut&&a.jsx("span",{className:i.default.shortcut,"aria-hidden":"true",children:e.shortcut})]})},P=s.forwardRef(({trigger:e,items:l=[],groups:m=[],placement:r="bottom-start",open:c,onOpenChange:u,onSelect:n,minWidth:h=180,closeOnSelect:y=!0,className:F,...S},A)=>{const[B,M]=s.useState(!1),[C,z]=s.useState({top:0,left:0}),[v,E]=s.useState(-1),w=s.useRef(null),k=s.useRef(null),x=s.useRef(new Map);s.useImperativeHandle(A,()=>w.current);const j=c!==void 0,f=j?c:B,I=(m.length>0?m:[{items:l}]).flatMap(t=>t.items).filter(t=>!t.disabled),b=s.useCallback(t=>{j||M(t),u?.(t),t||E(-1)},[j,u]),p=s.useCallback(()=>{if(!w.current||!k.current)return;const t=w.current.getBoundingClientRect(),d=k.current.getBoundingClientRect(),o=V(t,d,r);z(o)},[r]);s.useEffect(()=>{if(f)return requestAnimationFrame(p),window.addEventListener("resize",p),window.addEventListener("scroll",p,!0),requestAnimationFrame(()=>{const t=x.current.get(0);t&&(t.focus(),E(0))}),()=>{window.removeEventListener("resize",p),window.removeEventListener("scroll",p,!0)}},[f,p]),s.useEffect(()=>{if(!f)return;const t=d=>{const o=d.target;w.current&&!w.current.contains(o)&&k.current&&!k.current.contains(o)&&b(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[f,b]),s.useEffect(()=>{if(!f)return;const t=d=>{d.key==="Escape"&&b(!1)};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[f,b]);const K=s.useCallback(()=>{b(!f)},[f,b]),T=s.useCallback(t=>{n?.(t),y&&b(!1)},[y,n,b]),X=s.useCallback(t=>{const d=I.length;if(d===0)return;let o;t==="down"?o=v<d-1?v+1:0:o=v>0?v-1:d-1,E(o),x.current.get(o)?.focus()},[v,I.length]),Y=s.isValidElement(e)?s.cloneElement(e,{onClick:K,"aria-expanded":f,"aria-haspopup":"menu"}):e,D=m.length>0?m:[{items:l}],H=[i.default.menu,f&&i.default.visible,F].filter(Boolean).join(" ");let N=0;const O=a.jsx("div",{ref:k,className:H,style:{top:C.top,left:C.left,minWidth:h},role:"menu","aria-orientation":"vertical",...S,children:D.map((t,d)=>a.jsxs("div",{className:i.default.group,children:[t.label&&a.jsx("div",{className:i.default.groupLabel,children:t.label}),t.items.map(o=>{const L=N;return o.disabled||N++,a.jsx("div",{ref:q=>{q&&!o.disabled&&x.current.set(L,q)},children:a.jsx(_,{item:o,onSelect:()=>T(o),onNavigate:X})},o.id)}),d<D.length-1&&a.jsx("div",{className:i.default.separator,role:"separator"})]},d))});return a.jsxs(a.Fragment,{children:[a.jsx("div",{ref:w,className:i.default.trigger,children:Y}),f&&U.createPortal(O,document.body)]})});P.displayName="Dropdown";exports.Dropdown=P;

package/dist/components/Dropdown/Dropdown.mjs

@@ -0,0 +1,176 @@
+import { jsx as m, jsxs as L, Fragment as O } from "react/jsx-runtime";
+import { forwardRef as Q, useState as N, useRef as C, useImperativeHandle as W, useCallback as k, useEffect as x, isValidElement as Z, cloneElement as _ } from "react";
+import { createPortal as $ } from "react-dom";
+import r from "./Dropdown.module.css.mjs";
+const g = (e, s, u) => {
+  const a = window.scrollX, i = window.scrollY, d = 4;
+  let n = 0, f = 0;
+  switch (u) {
+    case "bottom-start":
+      n = e.bottom + i + d, f = e.left + a;
+      break;
+    case "bottom":
+      n = e.bottom + i + d, f = e.left + a + (e.width - s.width) / 2;
+      break;
+    case "bottom-end":
+      n = e.bottom + i + d, f = e.right + a - s.width;
+      break;
+    case "top-start":
+      n = e.top + i - s.height - d, f = e.left + a;
+      break;
+    case "top":
+      n = e.top + i - s.height - d, f = e.left + a + (e.width - s.width) / 2;
+      break;
+    case "top-end":
+      n = e.top + i - s.height - d, f = e.right + a - s.width;
+      break;
+  }
+  return { top: n, left: f };
+}, R = ({
+  item: e,
+  onSelect: s,
+  onNavigate: u
+}) => {
+  const a = () => {
+    e.disabled || (e.onClick?.(), s());
+  }, i = (n) => {
+    n.key === "Enter" || n.key === " " ? (n.preventDefault(), a()) : n.key === "ArrowDown" ? (n.preventDefault(), u?.("down")) : n.key === "ArrowUp" && (n.preventDefault(), u?.("up"));
+  }, d = [
+    r.item,
+    e.disabled && r.disabled,
+    e.danger && r.danger
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ L(
+    "div",
+    {
+      className: d,
+      role: "menuitem",
+      tabIndex: e.disabled ? -1 : 0,
+      "aria-disabled": e.disabled,
+      onClick: a,
+      onKeyDown: i,
+      children: [
+        e.icon && /* @__PURE__ */ m("span", { className: r.icon, "aria-hidden": "true", children: e.icon }),
+        /* @__PURE__ */ m("span", { className: r.label, children: e.label }),
+        e.shortcut && /* @__PURE__ */ m("span", { className: r.shortcut, "aria-hidden": "true", children: e.shortcut })
+      ]
+    }
+  );
+}, ee = Q(
+  ({
+    trigger: e,
+    items: s = [],
+    groups: u = [],
+    placement: a = "bottom-start",
+    open: i,
+    onOpenChange: d,
+    onSelect: n,
+    minWidth: f = 180,
+    closeOnSelect: D = !0,
+    className: q,
+    ...z
+  }, K) => {
+    const [X, Y] = N(!1), [F, H] = N({ top: 0, left: 0 }), [b, E] = N(-1), p = C(null), v = C(null), I = C(/* @__PURE__ */ new Map());
+    W(K, () => p.current);
+    const y = i !== void 0, c = y ? i : X, P = (u.length > 0 ? u : [{ items: s }]).flatMap((t) => t.items).filter((t) => !t.disabled), h = k(
+      (t) => {
+        y || Y(t), d?.(t), t || E(-1);
+      },
+      [y, d]
+    ), w = k(() => {
+      if (!p.current || !v.current) return;
+      const t = p.current.getBoundingClientRect(), l = v.current.getBoundingClientRect(), o = g(t, l, a);
+      H(o);
+    }, [a]);
+    x(() => {
+      if (c)
+        return requestAnimationFrame(w), window.addEventListener("resize", w), window.addEventListener("scroll", w, !0), requestAnimationFrame(() => {
+          const t = I.current.get(0);
+          t && (t.focus(), E(0));
+        }), () => {
+          window.removeEventListener("resize", w), window.removeEventListener("scroll", w, !0);
+        };
+    }, [c, w]), x(() => {
+      if (!c) return;
+      const t = (l) => {
+        const o = l.target;
+        p.current && !p.current.contains(o) && v.current && !v.current.contains(o) && h(!1);
+      };
+      return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+    }, [c, h]), x(() => {
+      if (!c) return;
+      const t = (l) => {
+        l.key === "Escape" && h(!1);
+      };
+      return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+    }, [c, h]);
+    const S = k(() => {
+      h(!c);
+    }, [c, h]), T = k(
+      (t) => {
+        n?.(t), D && h(!1);
+      },
+      [D, n, h]
+    ), U = k(
+      (t) => {
+        const l = P.length;
+        if (l === 0) return;
+        let o;
+        t === "down" ? o = b < l - 1 ? b + 1 : 0 : o = b > 0 ? b - 1 : l - 1, E(o), I.current.get(o)?.focus();
+      },
+      [b, P.length]
+    ), V = Z(e) ? _(e, {
+      onClick: S,
+      "aria-expanded": c,
+      "aria-haspopup": "menu"
+    }) : e, j = u.length > 0 ? u : [{ items: s }], G = [r.menu, c && r.visible, q].filter(Boolean).join(" ");
+    let A = 0;
+    const J = /* @__PURE__ */ m(
+      "div",
+      {
+        ref: v,
+        className: G,
+        style: {
+          top: F.top,
+          left: F.left,
+          minWidth: f
+        },
+        role: "menu",
+        "aria-orientation": "vertical",
+        ...z,
+        children: j.map((t, l) => /* @__PURE__ */ L("div", { className: r.group, children: [
+          t.label && /* @__PURE__ */ m("div", { className: r.groupLabel, children: t.label }),
+          t.items.map((o) => {
+            const B = A;
+            return o.disabled || A++, /* @__PURE__ */ m(
+              "div",
+              {
+                ref: (M) => {
+                  M && !o.disabled && I.current.set(B, M);
+                },
+                children: /* @__PURE__ */ m(
+                  R,
+                  {
+                    item: o,
+                    onSelect: () => T(o),
+                    onNavigate: U
+                  }
+                )
+              },
+              o.id
+            );
+          }),
+          l < j.length - 1 && /* @__PURE__ */ m("div", { className: r.separator, role: "separator" })
+        ] }, l))
+      }
+    );
+    return /* @__PURE__ */ L(O, { children: [
+      /* @__PURE__ */ m("div", { ref: p, className: r.trigger, children: V }),
+      c && $(J, document.body)
+    ] });
+  }
+);
+ee.displayName = "Dropdown";
+export {
+  ee as Dropdown
+};

package/dist/components/EmptyState/EmptyState.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),f=require("react"),e=require("./EmptyState.module.css.cjs"),r=f.forwardRef(({icon:a,title:i,description:s,action:l,secondaryAction:d,size:c="md",className:m,...u},n)=>{const o=[e.default.emptyState,e.default[c],m].filter(Boolean).join(" ");return t.jsxs("div",{ref:n,className:o,...u,children:[a&&t.jsx("div",{className:e.default.icon,"aria-hidden":"true",children:a}),t.jsx("h3",{className:e.default.title,children:i}),s&&t.jsx("p",{className:e.default.description,children:s}),(l||d)&&t.jsxs("div",{className:e.default.actions,children:[l,d]})]})});r.displayName="EmptyState";exports.EmptyState=r;

package/dist/components/EmptyState/EmptyState.mjs

@@ -0,0 +1,30 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import e from "./EmptyState.module.css.mjs";
+const N = h(
+  ({
+    icon: a,
+    title: l,
+    description: t,
+    action: r,
+    secondaryAction: m,
+    size: d = "md",
+    className: c,
+    ...o
+  }, n) => {
+    const p = [e.emptyState, e[d], c].filter(Boolean).join(" ");
+    return /* @__PURE__ */ i("div", { ref: n, className: p, ...o, children: [
+      a && /* @__PURE__ */ s("div", { className: e.icon, "aria-hidden": "true", children: a }),
+      /* @__PURE__ */ s("h3", { className: e.title, children: l }),
+      t && /* @__PURE__ */ s("p", { className: e.description, children: t }),
+      (r || m) && /* @__PURE__ */ i("div", { className: e.actions, children: [
+        r,
+        m
+      ] })
+    ] });
+  }
+);
+N.displayName = "EmptyState";
+export {
+  N as EmptyState
+};

package/dist/components/ErrorBoundary/ErrorBoundary.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("lucide-react"),t=require("./ErrorBoundary.module.css.cjs");class i extends o.Component{constructor(r){super(r),this.reset=()=>{this.setState({hasError:!1,error:null})},this.state={hasError:!1,error:null}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,s){this.props.onError?.(r,s)}componentDidUpdate(r){this.state.hasError&&this.props.resetKey!==void 0&&r.resetKey!==this.props.resetKey&&this.reset()}render(){if(this.state.hasError&&this.state.error){const{fallback:r}=this.props;return typeof r=="function"?r(this.state.error,this.reset):r||e.jsxs("div",{className:t.default.errorBoundary,role:"alert",children:[e.jsx(a.AlertCircle,{size:32,className:t.default.icon}),e.jsx("p",{className:t.default.title,children:"Something went wrong"}),e.jsx("p",{className:t.default.message,children:this.state.error.message}),e.jsx("button",{className:t.default.resetButton,onClick:this.reset,type:"button",children:"Try again"})]})}return this.props.children}}exports.ErrorBoundary=i;

package/dist/components/ErrorBoundary/ErrorBoundary.mjs

@@ -0,0 +1,43 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import i from "react";
+import { AlertCircle as a } from "lucide-react";
+import e from "./ErrorBoundary.module.css.mjs";
+class m extends i.Component {
+  constructor(r) {
+    super(r), this.reset = () => {
+      this.setState({ hasError: !1, error: null });
+    }, this.state = { hasError: !1, error: null };
+  }
+  static getDerivedStateFromError(r) {
+    return { hasError: !0, error: r };
+  }
+  componentDidCatch(r, s) {
+    this.props.onError?.(r, s);
+  }
+  componentDidUpdate(r) {
+    this.state.hasError && this.props.resetKey !== void 0 && r.resetKey !== this.props.resetKey && this.reset();
+  }
+  render() {
+    if (this.state.hasError && this.state.error) {
+      const { fallback: r } = this.props;
+      return typeof r == "function" ? r(this.state.error, this.reset) : r || /* @__PURE__ */ o("div", { className: e.errorBoundary, role: "alert", children: [
+        /* @__PURE__ */ t(a, { size: 32, className: e.icon }),
+        /* @__PURE__ */ t("p", { className: e.title, children: "Something went wrong" }),
+        /* @__PURE__ */ t("p", { className: e.message, children: this.state.error.message }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            className: e.resetButton,
+            onClick: this.reset,
+            type: "button",
+            children: "Try again"
+          }
+        )
+      ] });
+    }
+    return this.props.children;
+  }
+}
+export {
+  m as ErrorBoundary
+};

package/dist/components/Field/Field.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),x=require("react"),b=require("lucide-react"),e=require("./Field.module.css.cjs"),v=x.forwardRef(({label:i,error:s,helperText:t,leftIcon:r,rightIcon:d,fullWidth:I=!1,size:c="md",optional:u=!1,className:g,id:$,disabled:f,required:o,"aria-label":h,"aria-describedby":p,...y},F)=>{const C=x.useId(),n=$||`field-${C}`,m=`${n}-error`,j=`${n}-helper`,N=s&&!d,l=[];s&&l.push(m),t&&!s&&l.push(j),p&&l.push(p);const R=l.length>0?l.join(" "):void 0;!(i||h)&&process.env.NODE_ENV==="development"&&console.warn("Field: Missing accessible name. Provide either a `label` prop or `aria-label` for screen reader users.");const q=[e.default.fieldContainer,I&&e.default.fullWidth,s&&e.default.error,f&&e.default.disabled,g].filter(Boolean).join(" "),A=[e.default.input,e.default[c],r&&e.default.hasLeftIcon,(d||N)&&e.default.hasRightIcon].filter(Boolean).join(" "),B=c==="sm"?14:c==="lg"?20:16;return a.jsxs("div",{className:q,children:[i&&a.jsxs("label",{htmlFor:n,className:e.default.label,children:[a.jsx("span",{className:e.default.labelText,children:i}),u&&a.jsx("span",{className:e.default.optional,"aria-hidden":"true",children:"(optional)"}),o&&!u&&a.jsx("span",{className:e.default.required,"aria-hidden":"true",children:"*"})]}),a.jsxs("div",{className:e.default.inputWrapper,children:[r&&a.jsx("span",{className:e.default.leftIcon,"aria-hidden":"true",children:r}),a.jsx("input",{ref:F,id:n,className:A,disabled:f,required:o,"aria-required":o||void 0,"aria-invalid":s?"true":"false","aria-describedby":R,"aria-label":i?void 0:h,...y}),d&&a.jsx("span",{className:`${e.default.rightIcon} ${e.default.rightIconInteractive}`,children:d}),N&&a.jsx("span",{className:`${e.default.rightIcon} ${e.default.errorIconInline}`,"aria-hidden":"true",children:a.jsx(b.AlertCircle,{size:B})})]}),t&&!s&&a.jsx("p",{id:j,className:e.default.helperText,children:t}),s&&a.jsxs("p",{id:m,className:e.default.errorMessage,role:"alert","aria-live":"assertive",children:[a.jsx(b.AlertCircle,{size:14,"aria-hidden":"true",className:e.default.errorIconMessage}),a.jsx("span",{children:s})]})]})});v.displayName="Field";exports.Field=v;

package/dist/components/Field/Field.mjs

@@ -0,0 +1,107 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { forwardRef as E, useId as M } from "react";
+import { AlertCircle as b } from "lucide-react";
+import e from "./Field.module.css.mjs";
+const R = E(
+  ({
+    label: n,
+    error: a,
+    helperText: d,
+    leftIcon: o,
+    rightIcon: r,
+    fullWidth: g = !1,
+    size: t = "md",
+    optional: h = !1,
+    className: $,
+    id: j,
+    disabled: m,
+    required: p,
+    "aria-label": f,
+    "aria-describedby": u,
+    ...y
+  }, B) => {
+    const C = M(), l = j || `field-${C}`, N = `${l}-error`, v = `${l}-helper`, I = a && !r, i = [];
+    a && i.push(N), d && !a && i.push(v), u && i.push(u);
+    const F = i.length > 0 ? i.join(" ") : void 0;
+    !(n || f) && process.env.NODE_ENV === "development" && console.warn(
+      "Field: Missing accessible name. Provide either a `label` prop or `aria-label` for screen reader users."
+    );
+    const w = [
+      e.fieldContainer,
+      g && e.fullWidth,
+      a && e.error,
+      m && e.disabled,
+      $
+    ].filter(Boolean).join(" "), x = [
+      e.input,
+      e[t],
+      o && e.hasLeftIcon,
+      (r || I) && e.hasRightIcon
+    ].filter(Boolean).join(" "), A = t === "sm" ? 14 : t === "lg" ? 20 : 16;
+    return /* @__PURE__ */ c("div", { className: w, children: [
+      n && /* @__PURE__ */ c("label", { htmlFor: l, className: e.label, children: [
+        /* @__PURE__ */ s("span", { className: e.labelText, children: n }),
+        h && /* @__PURE__ */ s("span", { className: e.optional, "aria-hidden": "true", children: "(optional)" }),
+        p && !h && /* @__PURE__ */ s("span", { className: e.required, "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ c("div", { className: e.inputWrapper, children: [
+        o && /* @__PURE__ */ s("span", { className: e.leftIcon, "aria-hidden": "true", children: o }),
+        /* @__PURE__ */ s(
+          "input",
+          {
+            ref: B,
+            id: l,
+            className: x,
+            disabled: m,
+            required: p,
+            "aria-required": p || void 0,
+            "aria-invalid": a ? "true" : "false",
+            "aria-describedby": F,
+            "aria-label": n ? void 0 : f,
+            ...y
+          }
+        ),
+        r && /* @__PURE__ */ s(
+          "span",
+          {
+            className: `${e.rightIcon} ${e.rightIconInteractive}`,
+            children: r
+          }
+        ),
+        I && /* @__PURE__ */ s(
+          "span",
+          {
+            className: `${e.rightIcon} ${e.errorIconInline}`,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ s(b, { size: A })
+          }
+        )
+      ] }),
+      d && !a && /* @__PURE__ */ s("p", { id: v, className: e.helperText, children: d }),
+      a && /* @__PURE__ */ c(
+        "p",
+        {
+          id: N,
+          className: e.errorMessage,
+          role: "alert",
+          "aria-live": "assertive",
+          children: [
+            /* @__PURE__ */ s(
+              b,
+              {
+                size: 14,
+                "aria-hidden": "true",
+                className: e.errorIconMessage
+              }
+            ),
+            /* @__PURE__ */ s("span", { children: a })
+          ]
+        }
+      )
+    ] });
+  }
+);
+R.displayName = "Field";
+export {
+  R as Field
+};

package/dist/components/FileUploader/FileUploader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),n=require("react"),o=require("lucide-react"),s=require("./FileUploader.module.css.cjs"),G=t=>t.startsWith("image/")?o.FileImage:t.startsWith("video/")?o.FileVideo:t.startsWith("audio/")?o.FileAudio:t.includes("pdf")||t.includes("document")?o.FileText:o.File,z=t=>{if(t===0)return"0 B";const i=1024,c=["B","KB","MB","GB"],h=Math.floor(Math.log(t)/Math.log(i));return`${parseFloat((t/Math.pow(i,h)).toFixed(1))} ${c[h]}`},$=n.forwardRef(({accept:t,maxFiles:i,maxSize:c,multiple:h=!0,onFilesAdded:C,onFileRemove:D,files:p=[],disabled:l=!1,dropzoneContent:M,placeholder:B="Drag and drop files here, or click to browse",showFileList:E=!0,compact:v=!1,variant:R="default",error:g,helperText:k,className:S,...W},y)=>{const x=n.useRef(null),[A,N]=n.useState(!1),[m,w]=n.useState(null),F=n.useCallback(e=>{const u=[],r=[],I=Array.from(e);return i&&p.length+I.length>i?(r.push(`Maximum ${i} files allowed`),{valid:u,errors:r}):(I.forEach(d=>{if(c&&d.size>c){r.push(`${d.name} exceeds maximum size of ${z(c)}`);return}if(t&&t.length>0&&!t.some(f=>f.startsWith(".")?d.name.toLowerCase().endsWith(f.toLowerCase()):f.endsWith("/*")?d.type.startsWith(f.replace("/*","/")):d.type===f)){r.push(`${d.name} is not an accepted file type`);return}u.push(d)}),{valid:u,errors:r})},[t,i,c,p.length]),j=n.useCallback(e=>{if(l)return;const{valid:u,errors:r}=F(e);r.length>0&&r[0]&&(w(r[0]),setTimeout(()=>w(null),3e3)),u.length>0&&C?.(u)},[l,F,C]),L=n.useCallback(e=>{e.preventDefault(),l||N(!0)},[l]),U=n.useCallback(e=>{e.preventDefault(),N(!1)},[]),b=n.useCallback(e=>{e.preventDefault(),N(!1),j(e.dataTransfer.files)},[j]),T=n.useCallback(e=>{e.target.files&&j(e.target.files),e.target.value=""},[j]),q=()=>{l||x.current?.click()},H=e=>{(e.key==="Enter"||e.key===" ")&&!l&&(e.preventDefault(),x.current?.click())},P=t?.join(","),K=[s.default.fileUploader,s.default[R],v&&s.default.compact,S].filter(Boolean).join(" "),O=[s.default.dropzone,A&&s.default.dropzoneDragging,l&&s.default.dropzoneDisabled,(g||m)&&s.default.dropzoneError].filter(Boolean).join(" ");return a.jsxs("div",{ref:y,className:K,...W,children:[a.jsxs("div",{className:O,onDragOver:L,onDragLeave:U,onDrop:b,onClick:q,onKeyDown:H,role:"button",tabIndex:l?-1:0,"aria-disabled":l,children:[a.jsx("input",{ref:x,type:"file",className:s.default.input,accept:P,multiple:h,onChange:T,disabled:l,"aria-hidden":"true"}),M||a.jsxs("div",{className:s.default.dropzoneContent,children:[a.jsx("div",{className:s.default.dropzoneIcon,children:a.jsx(o.Upload,{size:v?20:24})}),a.jsx("p",{className:s.default.dropzonePlaceholder,children:B}),!v&&a.jsxs("div",{className:s.default.dropzoneHints,children:[t&&a.jsxs("span",{className:s.default.dropzoneHint,children:["Accepted: ",t.join(", ")]}),c&&a.jsxs("span",{className:s.default.dropzoneHint,children:["Max size: ",z(c)]}),i&&a.jsxs("span",{className:s.default.dropzoneHint,children:["Max files: ",i]})]})]})]}),(g||m||k)&&a.jsx("div",{className:`${s.default.helperText} ${g||m?s.default.helperTextError:""}`,children:g||m||k}),E&&p.length>0&&a.jsx("ul",{className:s.default.fileList,children:p.map(e=>{const u=G(e.type);return a.jsxs("li",{className:s.default.fileItem,children:[a.jsx("div",{className:s.default.fileIcon,children:e.preview?a.jsx("img",{src:e.preview,alt:"",className:s.default.filePreview}):a.jsx(u,{size:20})}),a.jsxs("div",{className:s.default.fileInfo,children:[a.jsx("span",{className:s.default.fileName,children:e.name}),a.jsx("span",{className:s.default.fileSize,children:z(e.size)})]}),a.jsxs("div",{className:s.default.fileStatus,children:[e.status==="uploading"&&a.jsxs(a.Fragment,{children:[a.jsx("div",{className:s.default.progressBar,children:a.jsx("div",{className:s.default.progressFill,style:{width:`${e.progress||0}%`}})}),a.jsx(o.Loader2,{size:16,className:s.default.fileStatusIcon})]}),e.status==="completed"&&a.jsx(o.CheckCircle,{size:16,className:s.default.fileStatusSuccess}),e.status==="error"&&a.jsx(o.AlertCircle,{size:16,className:s.default.fileStatusError})]}),D&&a.jsx("button",{type:"button",className:s.default.fileRemove,onClick:r=>{r.stopPropagation(),D(e.id)},"aria-label":`Remove ${e.name}`,children:a.jsx(o.X,{size:16})})]},e.id)})})]})});$.displayName="FileUploader";exports.FileUploader=$;