@nebula-demo/ui 0.1.3

package/dist/components/DropdownSelect/DropdownSelect.js

@@ -0,0 +1,342 @@
+import { jsxs as d, jsx as a, Fragment as G } from "react/jsx-runtime";
+import * as r from "react";
+import { RadioIndicator as _, CheckboxIndicator as J } from "../_shared/SelectionIndicators.js";
+import { FOCUS_RING as Q } from "../../utils/focusRing.js";
+import { cn as x } from "../../utils/cn.js";
+import { Popover as V, PopoverTrigger as X, PopoverContent as Y } from "../Popover/Popover.js";
+import { Avatar as Z } from "../Avatar/Avatar.js";
+const ee = () => /* @__PURE__ */ a(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ a("path", { d: "M6 9l6 6 6-6" })
+  }
+), ae = () => /* @__PURE__ */ d(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ a("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ a("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ a("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+    ]
+  }
+), te = {
+  online: "cai-bg-[var(--comp-success-bg)]",
+  busy: "cai-bg-[var(--comp-error-bg)]",
+  offline: "cai-bg-[var(--icon-tertiary)]"
+};
+function L(n) {
+  return n == null ? [] : Array.isArray(n) ? n : [n];
+}
+const ie = ({ status: n }) => /* @__PURE__ */ a(
+  "span",
+  {
+    className: x(
+      "cai-h-2 cai-w-2 cai-shrink-0 cai-rounded-full",
+      n ? te[n] : "cai-bg-[var(--icon-tertiary)]"
+    ),
+    "aria-hidden": "true"
+  }
+), re = ({
+  id: n,
+  item: t,
+  variant: o,
+  selected: u,
+  active: m,
+  onToggle: h,
+  onHover: g
+}) => {
+  const y = r.useCallback(() => {
+    h(t.value);
+  }, [t.value, h]);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      id: n,
+      role: "option",
+      "aria-selected": u,
+      onClick: y,
+      onMouseEnter: g,
+      className: x(
+        /* DropdownMenu item pattern: rounded-md, p-lg padding, transparent border, transition-colors. */
+        "cai-flex cai-cursor-pointer cai-select-none cai-items-center cai-gap-md cai-rounded-md cai-border cai-border-transparent cai-p-lg",
+        "cai-text-subbody cai-font-medium cai-text-primary",
+        "cai-outline-none cai-transition-colors",
+        /* Precedence: the avatar selected state (persistent lock-in) wins
+         * over hover/keyboard-active. For single + multi variants, selection
+         * is conveyed by the radio/checkbox indicator alone — only
+         * hover/keyboard-active rows tint via bg-tertiary.
+         *
+         * - Avatar selected (resting OR hovered): bg-secondary (selected wins)
+         * - Avatar unselected, hover/active: bg-tertiary
+         * - Avatar unselected, resting: transparent
+         * - Single/multi resting: transparent
+         * - Single/multi hover/active: bg-tertiary
+         * - Single/multi never receive bg-secondary
+         */
+        o === "avatar" && u ? "cai-bg-secondary" : m && "cai-bg-tertiary"
+      ),
+      children: [
+        o === "single" && /* @__PURE__ */ a(_, { checked: u }),
+        o === "multi" && /* @__PURE__ */ a(J, { checked: u }),
+        o === "avatar" && /* @__PURE__ */ a(ie, { status: t.status }),
+        o === "avatar" && t.avatar ? /* @__PURE__ */ a("span", { className: "cai-flex cai-shrink-0 cai-items-center", children: t.avatar }) : o === "avatar" ? /* @__PURE__ */ a(Z, { variant: "initials", size: "sm", initials: t.label.slice(0, 2) }) : null,
+        o === "avatar" ? /* @__PURE__ */ d(G, { children: [
+          /* @__PURE__ */ a("span", { className: "cai-truncate cai-font-semibold cai-text-primary", children: t.label }),
+          t.supportText && /* @__PURE__ */ a("span", { className: "cai-ml-auto cai-text-subbody cai-text-secondary", children: t.supportText })
+        ] }) : /* @__PURE__ */ d("span", { className: "cai-flex cai-flex-col cai-gap-y-xxs", children: [
+          /* @__PURE__ */ a("span", { className: "cai-font-semibold cai-text-primary", children: t.label }),
+          t.supportText && /* @__PURE__ */ a("span", { className: "cai-text-subbody cai-text-secondary", children: t.supportText })
+        ] })
+      ]
+    }
+  );
+}, ce = r.forwardRef(
+  ({
+    variant: n = "single",
+    items: t = [],
+    selectedValue: o,
+    onSelect: u,
+    placeholder: m = "Select an option",
+    label: h,
+    labelRight: g,
+    errorText: y,
+    required: R = !1,
+    disabled: T = !1,
+    id: P,
+    className: B
+  }, F) => {
+    const W = r.useId(), b = P ?? W, j = `${b}-listbox`, $ = y ? `${b}-message` : void 0, N = r.useCallback((e) => `${b}-opt-${e}`, [b]), f = n === "multi" || n === "avatar", v = !!y, [k, I] = r.useState(!1), [l, p] = r.useState(-1), D = r.useRef(null), H = r.useRef({ text: "", timer: null }), w = o !== void 0, [K, M] = r.useState(() => L(o));
+    r.useEffect(() => {
+      w && M(L(o));
+    }, [w, o]);
+    const c = w ? L(o) : K, S = r.useCallback(
+      (e) => {
+        w || M(e), u && u(f ? e : e[0]);
+      },
+      [w, f, u]
+    ), A = r.useCallback(
+      (e) => {
+        if (f) {
+          const s = c.includes(e) ? c.filter((C) => C !== e) : [...c, e];
+          S(s);
+        } else {
+          const i = c[0] === e ? [] : [e];
+          S(i), I(!1);
+        }
+      },
+      [S, c, f]
+    );
+    r.useEffect(() => {
+      if (!k) return;
+      const e = t.findIndex((s) => c.includes(s.value));
+      p(e >= 0 ? e : 0);
+      const i = setTimeout(() => D.current?.focus(), 0);
+      return () => clearTimeout(i);
+    }, [k, t, c]), r.useEffect(() => {
+      if (!k || l < 0) return;
+      D.current?.querySelector(
+        `#${CSS.escape(N(l))}`
+      )?.scrollIntoView({ block: "nearest" });
+    }, [l, k, N]);
+    const U = r.useCallback(
+      (e) => {
+        if (t.length) {
+          if (e.key === "ArrowDown")
+            e.preventDefault(), p((i) => (i + 1) % t.length);
+          else if (e.key === "ArrowUp")
+            e.preventDefault(), p((i) => i <= 0 ? t.length - 1 : i - 1);
+          else if (e.key === "Home")
+            e.preventDefault(), p(0);
+          else if (e.key === "End")
+            e.preventDefault(), p(t.length - 1);
+          else if (e.key === "Enter" || e.key === " ")
+            e.preventDefault(), l >= 0 && A(t[l].value);
+          else if (e.key === "Escape")
+            e.preventDefault(), I(!1);
+          else if (e.key.length === 1 && /\S/.test(e.key)) {
+            const i = H.current;
+            i.timer && clearTimeout(i.timer), i.text = (i.text + e.key).toLowerCase();
+            const s = l >= 0 ? l + 1 : 0, C = t.length;
+            for (let E = 0; E < C; E += 1) {
+              const O = (s + E) % C;
+              if (t[O].label.toLowerCase().startsWith(i.text)) {
+                p(O);
+                break;
+              }
+            }
+            i.timer = setTimeout(() => {
+              i.text = "";
+            }, 600);
+          }
+        }
+      },
+      [t, l, A]
+    ), q = r.useMemo(() => {
+      if (f) {
+        const s = c.length;
+        return s > 0 ? `${s} Selected` : m;
+      }
+      const e = c[0];
+      return e ? t.find((s) => s.value === e)?.label ?? m : m;
+    }, [c, f, t, m]), z = r.useMemo(() => f ? c.length === 0 : !c[0], [c, f]);
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: x(
+          "cai-flex cai-w-full cai-flex-col cai-gap-y-xs cai-font-sans",
+          T && "cai-pointer-events-none cai-opacity-40",
+          B
+        ),
+        children: [
+          (h || g) && /* @__PURE__ */ d("div", { className: "cai-flex cai-items-center cai-justify-between", children: [
+            h ? /* @__PURE__ */ d(
+              "label",
+              {
+                htmlFor: b,
+                className: "cai-text-[13px] cai-font-medium cai-text-primary",
+                children: [
+                  h,
+                  R && /* @__PURE__ */ a("span", { className: "cai-ml-0.5 cai-text-icon-error", "aria-hidden": "true", children: "*" })
+                ]
+              }
+            ) : /* @__PURE__ */ a("span", {}),
+            g && /* @__PURE__ */ a("span", { className: "cai-ml-auto cai-text-eyebrow1 cai-font-medium cai-text-primary", children: g })
+          ] }),
+          /* @__PURE__ */ d(V, { open: k, onOpenChange: I, children: [
+            /* @__PURE__ */ a(X, { asChild: !0, children: /* @__PURE__ */ d(
+              "button",
+              {
+                ref: F,
+                id: b,
+                type: "button",
+                disabled: T,
+                "aria-required": R || void 0,
+                "aria-invalid": v || void 0,
+                "aria-describedby": $,
+                "aria-controls": j,
+                className: x(
+                  "cai-group cai-flex cai-w-full cai-items-center cai-justify-between cai-gap-md cai-rounded-md cai-border cai-px-[14px] cai-py-[10px]",
+                  "cai-text-[12px] cai-font-medium",
+                  "cai-outline-none cai-transition-colors",
+                  Q,
+                  v ? "cai-border-error cai-bg-error cai-text-primary-alt focus-visible:cai-border-error" : [
+                    "cai-border-septenary cai-bg-primary-invert cai-text-primary",
+                    /* Wrapper hover applies only in the default state. Scoping
+                     * via data-[state=closed] keeps hover from competing with
+                     * the open-state border treatment, and focus-visible (via
+                     * the FOCUS_RING utility) takes precedence over the hover
+                     * background by source order. */
+                    "data-[state=closed]:hover:cai-border-nonary data-[state=closed]:hover:cai-bg-secondary",
+                    "focus-visible:cai-border-brand-primary",
+                    "data-[state=open]:cai-border-nonary"
+                  ]
+                ),
+                children: [
+                  /* @__PURE__ */ a(
+                    "span",
+                    {
+                      className: x(
+                        "cai-flex-1 cai-truncate cai-text-left",
+                        z && !v && "cai-text-primary",
+                        v && "cai-text-primary-alt"
+                      ),
+                      children: q
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    "span",
+                    {
+                      className: x(
+                        "cai-flex cai-shrink-0 cai-items-center cai-transition-transform cai-duration-200",
+                        "group-data-[state=open]:cai-rotate-180",
+                        v ? "cai-text-icon-primary-alt" : "cai-text-tertiary"
+                      ),
+                      children: /* @__PURE__ */ a(ee, {})
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ a(
+              Y,
+              {
+                align: "start",
+                sideOffset: 4,
+                className: x(
+                  /* Panel matches the DropdownMenuContent pattern: rounded-md (8px),
+                   * 1px tertiary border, primary-invert background, p-lg padding,
+                   * shallow shadow. */
+                  "cai-w-[var(--radix-popover-trigger-width)] cai-max-w-none",
+                  "cai-rounded-md cai-border cai-border-tertiary cai-bg-primary-invert cai-p-lg cai-shadow-shallow"
+                ),
+                children: /* @__PURE__ */ a(
+                  "div",
+                  {
+                    ref: D,
+                    id: j,
+                    role: "listbox",
+                    tabIndex: -1,
+                    "aria-multiselectable": f || void 0,
+                    "aria-activedescendant": l >= 0 ? N(l) : void 0,
+                    onKeyDown: U,
+                    className: "cai-flex cai-max-h-[280px] cai-flex-col cai-gap-y-xxs cai-overflow-y-auto cai-outline-none",
+                    children: t.map((e, i) => {
+                      const s = c.includes(e.value);
+                      return /* @__PURE__ */ a(
+                        re,
+                        {
+                          id: N(i),
+                          item: e,
+                          variant: n,
+                          selected: s,
+                          active: i === l,
+                          onToggle: A,
+                          onHover: () => p(i)
+                        },
+                        e.value
+                      );
+                    })
+                  }
+                )
+              }
+            )
+          ] }),
+          y && /* @__PURE__ */ d(
+            "div",
+            {
+              id: $,
+              role: "alert",
+              className: "cai-mt-xs cai-flex cai-items-center cai-gap-1",
+              children: [
+                /* @__PURE__ */ a("span", { className: "cai-flex cai-items-center cai-text-icon-error", children: /* @__PURE__ */ a(ae, {}) }),
+                /* @__PURE__ */ a("span", { className: "cai-font-sans cai-text-xs cai-font-medium cai-pt-[3px] cai-text-error", children: y })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ce.displayName = "DropdownSelect";
+export {
+  ce as DropdownSelect
+};

package/dist/components/DropdownSelect/index.d.ts

@@ -0,0 +1,3 @@
+export { DropdownSelect } from './DropdownSelect';
+export type { DropdownSelectProps, DropdownSelectItemProps, DropdownSelectVariant, DropdownSelectStatus, } from './DropdownSelect';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DropdownSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EACV,mBAAmB,EACnB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,kBAAkB,CAAA"}

package/dist/components/FileStatus/FileStatus.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),w=require("react"),n=require("../../utils/cn.cjs"),v=require("../../utils/focusRing.cjs"),I=require("../ProgressCircle/ProgressCircle.cjs"),t=require("../Icon/Icon.cjs");function N(a){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const r in a)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(a,r);Object.defineProperty(i,r,o.get?o:{enumerable:!0,get:()=>a[r]})}}return i.default=a,Object.freeze(i)}const z=N(w),O={uploaded:e.jsx(t.Icon,{name:"trash-01",size:16}),uploading:e.jsx(t.Icon,{name:"x-close",size:16}),error:e.jsx(t.Icon,{name:"refresh-cw-01",size:16}),download:e.jsx(t.Icon,{name:"download-01",size:16})},R={uploaded:"Delete file",uploading:"Cancel upload",error:"Retry upload",download:"Download file"},s=z.forwardRef(({fileName:a,variant:i="uploading",fileSize:r,filetypeIcon:o,errorMessage:l="Upload your files again. There was a problem with the server.",loadingLabel:d="Loading",onActionClick:u,iconLabel:x,actionIcon:m,className:p,...f},y)=>{const c=i==="error",b=i==="uploading",h=m??O[i],g=x??R[i],j=o??e.jsx(t.Icon,{name:"file-04",size:24,strokeWidth:1.5});return e.jsxs("div",{ref:y,className:n.cn("cai-flex cai-w-full cai-min-w-[180px] cai-items-center","cai-rounded-xl cai-border cai-border-tertiary cai-bg-primary-invert","cai-p-[8px] cai-text-primary","focus-within:cai-border-brand-primary focus-within:cai-outline",v.FOCUS_WITHIN_RING,c&&"!cai-border-error-alt !cai-bg-error",p),...f,children:[e.jsxs("div",{className:"cai-flex cai-items-center cai-gap-x-[8px] cai-min-w-0 cai-flex-1",children:[e.jsx("div",{className:"cai-flex cai-items-center cai-justify-center cai-flex-shrink-0",style:{width:40,height:40,color:c?"var(--icon-primary-alt)":"var(--icon-primary)"},children:b?e.jsx(I.ProgressCircle,{size:"xxs",indeterminate:!0,label:d}):j}),e.jsxs("div",{className:"cai-flex cai-flex-col cai-gap-y-xxs cai-min-w-0",children:[e.jsx("span",{className:"cai-text-subbody cai-font-semibold cai-truncate",style:c?{color:"var(--text-primary-alt)"}:void 0,children:a}),c?e.jsxs("div",{className:"cai-flex cai-items-center cai-gap-x-[4px] cai-min-w-0",style:{color:"var(--text-error-alt)"},children:[e.jsx("span",{className:"cai-flex-shrink-0 cai-inline-flex cai-items-center",style:{color:"var(--icon-error-alt)"},children:e.jsx(t.Icon,{name:"alert-circle",size:12})}),e.jsx("span",{className:"cai-text-micro1 cai-font-semibold cai-truncate cai-min-w-0",style:{color:"var(--text-error-alt)"},children:l})]}):r&&e.jsx("span",{className:"cai-text-micro1 cai-text-tertiary",children:r})]})]}),e.jsx("button",{type:"button",onClick:u,"aria-label":g,className:n.cn("cai-flex cai-items-center cai-justify-center","cai-border-none cai-bg-transparent cai-cursor-pointer",!c&&"cai-text-secondary hover:cai-text-primary","cai-rounded-sm cai-flex-shrink-0 cai-transition-colors","focus:cai-outline-none"),style:{width:32,height:32,padding:0,marginLeft:12,...c?{color:"var(--icon-primary-alt)"}:{}},children:h})]})});s.displayName="FileStatus";exports.FileStatus=s;

package/dist/components/FileStatus/FileStatus.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+type FileStatusVariant = 'uploaded' | 'uploading' | 'error' | 'download';
+export interface FileStatusProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** File name to display (required). */
+    fileName: string;
+    /** Current status variant. */
+    variant?: FileStatusVariant;
+    /** File size text (e.g. "200 KB"). */
+    fileSize?: string;
+    /** Icon element for the file type indicator. Rendered when not uploading. */
+    filetypeIcon?: React.ReactElement;
+    /** Error description (error variant only). */
+    errorMessage?: string;
+    /** Aria-label for the progress circle in uploading state. */
+    loadingLabel?: string;
+    /** Click handler for the action button (delete, cancel, retry, download). */
+    onActionClick: () => void;
+    /** Aria-label for the action button. */
+    iconLabel?: string;
+    /** Custom action icon override. */
+    actionIcon?: React.ReactElement;
+}
+declare const FileStatus: React.ForwardRefExoticComponent<FileStatusProps & React.RefAttributes<HTMLDivElement>>;
+export { FileStatus };
+//# sourceMappingURL=FileStatus.d.ts.map

package/dist/components/FileStatus/FileStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileStatus.d.ts","sourceRoot":"","sources":["../../../src/components/FileStatus/FileStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,KAAK,iBAAiB,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,CAAA;AAExE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC7F,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAA;IAChB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IACjC,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;CAChC;AAgBD,QAAA,MAAM,UAAU,wFAkHf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/FileStatus/FileStatus.js

@@ -0,0 +1,127 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import * as v from "react";
+import { cn as t } from "../../utils/cn.js";
+import { FOCUS_WITHIN_RING as N } from "../../utils/focusRing.js";
+import { ProgressCircle as I } from "../ProgressCircle/ProgressCircle.js";
+import { Icon as a } from "../Icon/Icon.js";
+const z = {
+  uploaded: /* @__PURE__ */ e(a, { name: "trash-01", size: 16 }),
+  uploading: /* @__PURE__ */ e(a, { name: "x-close", size: 16 }),
+  error: /* @__PURE__ */ e(a, { name: "refresh-cw-01", size: 16 }),
+  download: /* @__PURE__ */ e(a, { name: "download-01", size: 16 })
+}, k = {
+  uploaded: "Delete file",
+  uploading: "Cancel upload",
+  error: "Retry upload",
+  download: "Download file"
+}, j = v.forwardRef(
+  ({
+    fileName: l,
+    variant: r = "uploading",
+    fileSize: o,
+    filetypeIcon: n,
+    errorMessage: s = "Upload your files again. There was a problem with the server.",
+    loadingLabel: d = "Loading",
+    onActionClick: m,
+    iconLabel: p,
+    actionIcon: x,
+    className: f,
+    ...u
+  }, h) => {
+    const i = r === "error", y = r === "uploading", b = x ?? z[r], g = p ?? k[r], w = n ?? /* @__PURE__ */ e(a, { name: "file-04", size: 24, strokeWidth: 1.5 });
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: h,
+        className: t(
+          "cai-flex cai-w-full cai-min-w-[180px] cai-items-center",
+          "cai-rounded-xl cai-border cai-border-tertiary cai-bg-primary-invert",
+          "cai-p-[8px] cai-text-primary",
+          "focus-within:cai-border-brand-primary focus-within:cai-outline",
+          N,
+          i && "!cai-border-error-alt !cai-bg-error",
+          f
+        ),
+        ...u,
+        children: [
+          /* @__PURE__ */ c("div", { className: "cai-flex cai-items-center cai-gap-x-[8px] cai-min-w-0 cai-flex-1", children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "cai-flex cai-items-center cai-justify-center cai-flex-shrink-0",
+                style: {
+                  width: 40,
+                  height: 40,
+                  color: i ? "var(--icon-primary-alt)" : "var(--icon-primary)"
+                },
+                children: y ? /* @__PURE__ */ e(I, { size: "xxs", indeterminate: !0, label: d }) : w
+              }
+            ),
+            /* @__PURE__ */ c("div", { className: "cai-flex cai-flex-col cai-gap-y-xxs cai-min-w-0", children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "cai-text-subbody cai-font-semibold cai-truncate",
+                  style: i ? { color: "var(--text-primary-alt)" } : void 0,
+                  children: l
+                }
+              ),
+              i ? /* @__PURE__ */ c(
+                "div",
+                {
+                  className: "cai-flex cai-items-center cai-gap-x-[4px] cai-min-w-0",
+                  style: { color: "var(--text-error-alt)" },
+                  children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: "cai-flex-shrink-0 cai-inline-flex cai-items-center",
+                        style: { color: "var(--icon-error-alt)" },
+                        children: /* @__PURE__ */ e(a, { name: "alert-circle", size: 12 })
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: "cai-text-micro1 cai-font-semibold cai-truncate cai-min-w-0",
+                        style: { color: "var(--text-error-alt)" },
+                        children: s
+                      }
+                    )
+                  ]
+                }
+              ) : o && /* @__PURE__ */ e("span", { className: "cai-text-micro1 cai-text-tertiary", children: o })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: m,
+              "aria-label": g,
+              className: t(
+                "cai-flex cai-items-center cai-justify-center",
+                "cai-border-none cai-bg-transparent cai-cursor-pointer",
+                !i && "cai-text-secondary hover:cai-text-primary",
+                "cai-rounded-sm cai-flex-shrink-0 cai-transition-colors",
+                "focus:cai-outline-none"
+              ),
+              style: {
+                width: 32,
+                height: 32,
+                padding: 0,
+                marginLeft: 12,
+                ...i ? { color: "var(--icon-primary-alt)" } : {}
+              },
+              children: b
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+j.displayName = "FileStatus";
+export {
+  j as FileStatus
+};

package/dist/components/FileStatus/index.d.ts

@@ -0,0 +1,3 @@
+export { FileStatus } from './FileStatus';
+export type { FileStatusProps } from './FileStatus';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FileStatus/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/FileUpload/FileUpload.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),B=require("react"),N=require("../../utils/cn.cjs"),K=require("../../utils/focusRing.cjs"),W=require("../Icon/Icon.cjs");function G(o){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const n in o)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(o,n);Object.defineProperty(i,n,l.get?l:{enumerable:!0,get:()=>o[n]})}}return i.default=o,Object.freeze(i)}const r=G(B),w=r.forwardRef(({name:o,accept:i,multiple:n=!1,maxSize:l,disabled:t=!1,files:p,icon:I,instructionTextStrong:O="Select to upload",instructionTextNormal:R="or drag and drop",uploadSpecificationText:x="PDF or TXT files only (3 MB max)",ariaLabel:P="File upload drop zone",onChange:d,onDrag:g,onDrop:v,onError:m,className:L,...M},T)=>{const D=r.useId(),j=`${D}-file-input`,y=`${D}-file-spec`,[$,b]=r.useState(!1),h=r.useRef(null),k=r.useCallback(e=>{const a=[];for(const c of e){if(i){const S=i.split(",").map(u=>u.trim().toLowerCase()),z=`.${c.name.split(".").pop()?.toLowerCase()}`,F=c.type.toLowerCase();if(!S.some(u=>u===z||u===F||u.endsWith("/*")&&F.startsWith(u.replace("/*","/")))){m?.(new Error(`File "${c.name}" is not an accepted file type.`));continue}}if(l&&c.size>l){m?.(new Error(`File "${c.name}" exceeds the maximum size of ${Math.round(l/1024/1024)} MB.`));continue}a.push(c)}return a},[i,l,m]),f=r.useCallback(e=>{const a=k(e);a.length!==0&&d?.(p!==void 0&&n?[...p,...a]:a)},[k,p,d,n]),q=r.useCallback(e=>{const a=e.target.files;!a||a.length===0||(f(Array.from(a)),e.target.value="")},[f]),C=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),!t&&(b(!0),g?.(e))},[t,g]),A=r.useCallback(e=>{e.preventDefault(),e.stopPropagation(),b(!1)},[]),U=r.useCallback(e=>{if(e.preventDefault(),e.stopPropagation(),b(!1),t)return;const a=Array.from(e.dataTransfer.files);if(a.length===0)return;const c=n?a:[a[0]];v?.(c),f(c)},[t,n,v,f]),_=r.useCallback(()=>{t||h.current?.click()},[t]),E=r.useCallback(e=>{t||(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),h.current?.click())},[t]);return s.jsx("div",{ref:T,className:N.cn("cai-w-full",L),...M,children:s.jsxs("label",{htmlFor:j,className:"cai-block cai-cursor-pointer",children:[s.jsxs("div",{role:"button",tabIndex:t?-1:0,"aria-label":P,"aria-disabled":t||void 0,"aria-describedby":y,onDragOver:C,onDragEnter:C,onDragLeave:A,onDrop:U,onClick:_,onKeyDown:E,className:N.cn("cai-flex cai-w-full cai-flex-col cai-items-center","cai-rounded-xl cai-border","cai-bg-secondary cai-px-3xl cai-py-4xl","cai-transition-colors cai-cursor-pointer",K.FOCUS_RING,$?"cai-border-2 cai-border-brand-primary":"cai-border-tertiary hover:cai-border-brand-primary",t&&"cai-pointer-events-none cai-opacity-40"),children:[s.jsx("span",{className:"cai-text-primary cai-mb-2",children:I??s.jsx(W.Icon,{name:"upload-02",size:24})}),s.jsxs("div",{className:"cai-font-sans cai-text-base",children:[s.jsx("span",{className:"cai-font-semibold cai-text-primary",children:O}),s.jsx("span",{className:"cai-ml-1 cai-font-medium cai-text-secondary",children:R})]}),x&&s.jsx("p",{id:y,className:"cai-font-sans cai-text-sm cai-font-normal cai-text-tertiary cai-mt-1",children:x})]}),s.jsx("input",{ref:h,id:j,type:"file",name:o,accept:i,multiple:n,disabled:t,onChange:q,"aria-describedby":y,className:"cai-sr-only",tabIndex:-1})]})})});w.displayName="FileUpload";exports.FileUpload=w;

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onError' | 'onDrop' | 'onDrag'> {
+    /** Input name attribute. */
+    name?: string;
+    /** Accepted file types (e.g. '.jpg, .png'). */
+    accept?: string;
+    /** Allow multiple file selection. */
+    multiple?: boolean;
+    /** Maximum file size in bytes. */
+    maxSize?: number;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Controlled file list. */
+    files?: File[];
+    /** Upload icon element (rendered above instruction text). */
+    icon?: React.ReactNode;
+    /** Bold instruction text (default: 'Select to upload'). */
+    instructionTextStrong?: string;
+    /** Regular instruction text (default: 'or drag and drop'). */
+    instructionTextNormal?: string;
+    /** File type/size hint text (default: 'PDF or TXT files only (3 MB max)'). */
+    uploadSpecificationText?: string;
+    /** Accessible label for the drop zone. */
+    ariaLabel?: string;
+    /** File selection callback. */
+    onChange?: (files: File[]) => void;
+    /** Drag-over callback. */
+    onDrag?: (event: React.DragEvent<HTMLDivElement>) => void;
+    /** Drop callback. */
+    onDrop?: (files: File[]) => void;
+    /** Validation error callback. */
+    onError?: (error: Error) => void;
+    /** Additional class names on the outer wrapper. */
+    className?: string;
+}
+declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLDivElement>>;
+export { FileUpload };
+//# sourceMappingURL=FileUpload.d.ts.map

package/dist/components/FileUpload/FileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAC7C;IACC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAA;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,2DAA2D;IAC3D,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,8DAA8D;IAC9D,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,8EAA8E;IAC9E,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IACzD,qBAAqB;IACrB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChC,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD,QAAA,MAAM,UAAU,wFA6Nf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}