@orion-ds/react 4.2.13 → 4.3.1

package/dist/components/FileUploader/FileUploader.mjs

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

package/dist/components/FilterBar/FilterBar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),r=require("lucide-react"),l=require("./FilterBar.module.css.cjs"),$=({filter:c,onSelect:a,onClose:d})=>{const[n,i]=o.useState([]),p=t=>{if(c.type==="multi-select"){const m=n.includes(t.value)?n.filter(f=>f!==t.value):[...n,t.value];i(m)}else a(t.value),d()},h=()=>{n.length>0&&a(n),d()};return e.jsxs("div",{className:l.default.dropdown,children:[c.options?.map(t=>e.jsxs("button",{type:"button",className:`${l.default.dropdownItem} ${n.includes(t.value)?l.default.dropdownItemSelected:""}`,onClick:()=>p(t),children:[c.type==="multi-select"&&e.jsx("span",{className:l.default.checkbox,children:n.includes(t.value)&&"✓"}),e.jsx("span",{children:t.label}),t.count!==void 0&&e.jsx("span",{className:l.default.optionCount,children:t.count})]},t.value)),c.type==="multi-select"&&e.jsxs("div",{className:l.default.dropdownFooter,children:[e.jsx("button",{type:"button",className:l.default.dropdownCancel,onClick:d,children:"Cancel"}),e.jsx("button",{type:"button",className:l.default.dropdownApply,onClick:h,children:"Apply"})]})]})},N=o.forwardRef(({filters:c,activeFilters:a,onFilterChange:d,onFilterRemove:n,onClearAll:i,searchable:p=!1,searchValue:h="",onSearchChange:t,searchPlaceholder:m="Search...",showCount:f=!0,compact:b=!1,className:k,...g},w)=>{const[C,x]=o.useState(null),j=o.useRef(null);o.useEffect(()=>{const s=u=>{j.current&&!j.current.contains(u.target)&&x(null)};return document.addEventListener("mousedown",s),()=>document.removeEventListener("mousedown",s)},[]);const S=(s,u)=>{d(s,u)},R=[l.default.filterBar,b&&l.default.compact,k].filter(Boolean).join(" ");return e.jsxs("div",{ref:w,className:R,...g,children:[p&&e.jsxs("div",{className:l.default.searchWrapper,children:[e.jsx(r.Search,{size:16,className:l.default.searchIcon}),e.jsx("input",{type:"text",className:l.default.searchInput,placeholder:m,value:h,onChange:s=>t?.(s.target.value)})]}),e.jsx("div",{className:l.default.filters,ref:j,children:c.map(s=>{const u=a.some(v=>v.key===s.key),y=C===s.key;return e.jsxs("div",{className:l.default.filterWrapper,children:[e.jsxs("button",{type:"button",className:`${l.default.filterTrigger} ${u?l.default.filterActive:""}`,onClick:()=>x(y?null:s.key),children:[s.icon||(s.type.includes("date")?e.jsx(r.Calendar,{size:14}):e.jsx(r.Filter,{size:14})),e.jsx("span",{children:s.label}),e.jsx(r.ChevronDown,{size:14,className:`${l.default.chevron} ${y?l.default.chevronOpen:""}`})]}),y&&s.type!=="text"&&e.jsx($,{filter:s,onSelect:v=>S(s.key,v),onClose:()=>x(null)})]},s.key)})}),a.length>0&&e.jsxs("div",{className:l.default.activeFilters,children:[a.map(s=>e.jsxs("span",{className:l.default.chip,children:[e.jsx("span",{className:l.default.chipLabel,children:s.label}),e.jsx("button",{type:"button",className:l.default.chipRemove,onClick:()=>n(s.key),"aria-label":`Remove ${s.label} filter`,children:e.jsx(r.X,{size:12})})]},s.key)),i&&a.length>1&&e.jsx("button",{type:"button",className:l.default.clearAll,onClick:i,children:"Clear all"})]}),f&&a.length>0&&e.jsxs("span",{className:l.default.count,children:[a.length," filter",a.length!==1?"s":""," ","active"]})]})});N.displayName="FilterBar";exports.FilterBar=N;

package/dist/components/FilterBar/FilterBar.mjs

@@ -0,0 +1,164 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { forwardRef as z, useState as k, useRef as A, useEffect as O } from "react";
+import { Search as R, Calendar as B, Filter as I, ChevronDown as j, X as E } from "lucide-react";
+import e from "./FilterBar.module.css.mjs";
+const F = ({
+  filter: r,
+  onSelect: a,
+  onClose: o
+}) => {
+  const [t, i] = k([]), u = (s) => {
+    if (r.type === "multi-select") {
+      const m = t.includes(s.value) ? t.filter((h) => h !== s.value) : [...t, s.value];
+      i(m);
+    } else
+      a(s.value), o();
+  }, p = () => {
+    t.length > 0 && a(t), o();
+  };
+  return /* @__PURE__ */ c("div", { className: e.dropdown, children: [
+    r.options?.map((s) => /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        className: `${e.dropdownItem} ${t.includes(s.value) ? e.dropdownItemSelected : ""}`,
+        onClick: () => u(s),
+        children: [
+          r.type === "multi-select" && /* @__PURE__ */ n("span", { className: e.checkbox, children: t.includes(s.value) && "✓" }),
+          /* @__PURE__ */ n("span", { children: s.label }),
+          s.count !== void 0 && /* @__PURE__ */ n("span", { className: e.optionCount, children: s.count })
+        ]
+      },
+      s.value
+    )),
+    r.type === "multi-select" && /* @__PURE__ */ c("div", { className: e.dropdownFooter, children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: e.dropdownCancel,
+          onClick: o,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: e.dropdownApply,
+          onClick: p,
+          children: "Apply"
+        }
+      )
+    ] })
+  ] });
+}, L = z(
+  ({
+    filters: r,
+    activeFilters: a,
+    onFilterChange: o,
+    onFilterRemove: t,
+    onClearAll: i,
+    searchable: u = !1,
+    searchValue: p = "",
+    onSearchChange: s,
+    searchPlaceholder: m = "Search...",
+    showCount: h = !0,
+    compact: w = !1,
+    className: C,
+    ...g
+  }, f) => {
+    const [$, y] = k(null), v = A(null);
+    O(() => {
+      const l = (d) => {
+        v.current && !v.current.contains(d.target) && y(null);
+      };
+      return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
+    }, []);
+    const x = (l, d) => {
+      o(l, d);
+    }, S = [e.filterBar, w && e.compact, C].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c("div", { ref: f, className: S, ...g, children: [
+      u && /* @__PURE__ */ c("div", { className: e.searchWrapper, children: [
+        /* @__PURE__ */ n(R, { size: 16, className: e.searchIcon }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            type: "text",
+            className: e.searchInput,
+            placeholder: m,
+            value: p,
+            onChange: (l) => s?.(l.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n("div", { className: e.filters, ref: v, children: r.map((l) => {
+        const d = a.some((b) => b.key === l.key), N = $ === l.key;
+        return /* @__PURE__ */ c("div", { className: e.filterWrapper, children: [
+          /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              className: `${e.filterTrigger} ${d ? e.filterActive : ""}`,
+              onClick: () => y(N ? null : l.key),
+              children: [
+                l.icon || (l.type.includes("date") ? /* @__PURE__ */ n(B, { size: 14 }) : /* @__PURE__ */ n(I, { size: 14 })),
+                /* @__PURE__ */ n("span", { children: l.label }),
+                /* @__PURE__ */ n(
+                  j,
+                  {
+                    size: 14,
+                    className: `${e.chevron} ${N ? e.chevronOpen : ""}`
+                  }
+                )
+              ]
+            }
+          ),
+          N && l.type !== "text" && /* @__PURE__ */ n(
+            F,
+            {
+              filter: l,
+              onSelect: (b) => x(l.key, b),
+              onClose: () => y(null)
+            }
+          )
+        ] }, l.key);
+      }) }),
+      a.length > 0 && /* @__PURE__ */ c("div", { className: e.activeFilters, children: [
+        a.map((l) => /* @__PURE__ */ c("span", { className: e.chip, children: [
+          /* @__PURE__ */ n("span", { className: e.chipLabel, children: l.label }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: e.chipRemove,
+              onClick: () => t(l.key),
+              "aria-label": `Remove ${l.label} filter`,
+              children: /* @__PURE__ */ n(E, { size: 12 })
+            }
+          )
+        ] }, l.key)),
+        i && a.length > 1 && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: e.clearAll,
+            onClick: i,
+            children: "Clear all"
+          }
+        )
+      ] }),
+      h && a.length > 0 && /* @__PURE__ */ c("span", { className: e.count, children: [
+        a.length,
+        " filter",
+        a.length !== 1 ? "s" : "",
+        " ",
+        "active"
+      ] })
+    ] });
+  }
+);
+L.displayName = "FilterBar";
+export {
+  L as FilterBar
+};

package/dist/components/FontLoader/FontLoader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),s=require("../../utils/fonts.cjs");function m({onLoad:r,onError:i,showLoadingState:h=!1,loadingComponent:u,children:d}){const[g,t]=l.useState(!1),[f,F]=l.useState(!1);return l.useEffect(()=>{if(typeof document>"u"||f)return;const c=document.head;if(c.querySelector('link[href*="fonts.googleapis.com"]')){F(!0),t(!0),r?.();return}try{s.FONT_PRECONNECT_URLS.forEach((a,y)=>{const n=document.createElement("link");n.rel="preconnect",n.href=a,y===1&&(n.crossOrigin="anonymous"),n.setAttribute("data-orion-fonts","preconnect"),c.appendChild(n)});const e=document.createElement("link");e.rel="stylesheet",e.href=s.GOOGLE_FONTS_URL,e.setAttribute("data-orion-fonts","stylesheet"),e.onload=async()=>{try{await s.waitForFonts([...s.ALL_FONTS]),t(!0),r?.()}catch{t(!0),r?.()}},e.onerror=()=>{const a=new Error("Failed to load Google Fonts");console.error("[Orion] Failed to load fonts from Google Fonts"),i?.(a),t(!0)},c.appendChild(e),F(!0)}catch(e){console.error("[Orion] Error injecting font links:",e),i?.(e instanceof Error?e:new Error("Font injection failed")),t(!0)}},[f,r,i]),h&&!g?u?o.jsx(o.Fragment,{children:u}):null:d?o.jsx(o.Fragment,{children:d}):null}m.displayName="FontLoader";exports.FontLoader=m;

package/dist/components/FontLoader/FontLoader.mjs

@@ -0,0 +1,47 @@
+import { jsx as d, Fragment as u } from "react/jsx-runtime";
+import { useState as m, useEffect as y } from "react";
+import { FONT_PRECONNECT_URLS as E, GOOGLE_FONTS_URL as O, waitForFonts as g, ALL_FONTS as L } from "../../utils/fonts.mjs";
+function k({
+  onLoad: n,
+  onError: o,
+  showLoadingState: p = !1,
+  loadingComponent: c,
+  children: a
+}) {
+  const [F, t] = m(!1), [l, f] = m(!1);
+  return y(() => {
+    if (typeof document > "u" || l) return;
+    const s = document.head;
+    if (s.querySelector(
+      'link[href*="fonts.googleapis.com"]'
+    )) {
+      f(!0), t(!0), n?.();
+      return;
+    }
+    try {
+      E.forEach((i, h) => {
+        const r = document.createElement("link");
+        r.rel = "preconnect", r.href = i, h === 1 && (r.crossOrigin = "anonymous"), r.setAttribute("data-orion-fonts", "preconnect"), s.appendChild(r);
+      });
+      const e = document.createElement("link");
+      e.rel = "stylesheet", e.href = O, e.setAttribute("data-orion-fonts", "stylesheet"), e.onload = async () => {
+        try {
+          await g([...L]), t(!0), n?.();
+        } catch {
+          t(!0), n?.();
+        }
+      }, e.onerror = () => {
+        const i = new Error("Failed to load Google Fonts");
+        console.error("[Orion] Failed to load fonts from Google Fonts"), o?.(i), t(!0);
+      }, s.appendChild(e), f(!0);
+    } catch (e) {
+      console.error("[Orion] Error injecting font links:", e), o?.(
+        e instanceof Error ? e : new Error("Font injection failed")
+      ), t(!0);
+    }
+  }, [l, n, o]), p && !F ? c ? /* @__PURE__ */ d(u, { children: c }) : null : a ? /* @__PURE__ */ d(u, { children: a }) : null;
+}
+k.displayName = "FontLoader";
+export {
+  k as FontLoader
+};

package/dist/components/FormSection/FormSection.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("react"),$=require("lucide-react"),e=require("./FormSection.module.css.cjs"),m=r.forwardRef(({label:t,helpText:d,children:o,columns:l=1,className:s,...n},i)=>{const u=[e.default.group,e.default[`columns-${l}`],s].filter(Boolean).join(" ");return a.jsxs("div",{ref:i,className:u,...n,children:[t&&a.jsx("div",{className:e.default.groupLabel,children:t}),a.jsx("div",{className:e.default.groupFields,children:o}),d&&a.jsx("div",{className:e.default.groupHelp,children:d})]})});m.displayName="FormSection.Group";const j=r.forwardRef(({children:t,align:d="end",className:o,...l},s)=>{const n=[e.default.actions,e.default[`align-${d}`],o].filter(Boolean).join(" ");return a.jsx("div",{ref:s,className:n,...l,children:t})});j.displayName="FormSection.Actions";const N=r.forwardRef(({title:t,description:d,children:o,actions:l,collapsible:s=!1,defaultCollapsed:n=!1,divider:i=!1,variant:u="default",icon:f,disabled:h=!1,className:x,...p},v)=>{const[c,S]=r.useState(n),g=[e.default.formSection,e.default[`variant-${u}`],i&&e.default.divider,h&&e.default.disabled,s&&e.default.collapsible,c&&e.default.collapsed,x].filter(Boolean).join(" "),F=()=>{s&&S(!c)},y=s?"button":"div",R=s?{type:"button",onClick:F,"aria-expanded":!c}:{},C=t||f||s;return a.jsxs("div",{ref:v,className:g,...p,children:[C&&a.jsxs(y,{className:e.default.header,...R,children:[a.jsxs("div",{className:e.default.headerContent,children:[f&&a.jsx("span",{className:e.default.icon,children:f}),(t||d)&&a.jsxs("div",{className:e.default.headerText,children:[t&&a.jsx("h3",{className:e.default.title,children:t}),d&&a.jsx("p",{className:e.default.description,children:d})]})]}),s&&a.jsx($.ChevronDown,{size:20,className:`${e.default.collapseIcon} ${c?e.default.iconCollapsed:""}`})]}),(!s||!c)&&a.jsxs("div",{className:e.default.content,children:[a.jsx("div",{className:e.default.fields,children:o}),l&&a.jsx("div",{className:e.default.actionsWrapper,children:l})]})]})});N.displayName="FormSection";const q=Object.assign(N,{Group:m,Actions:j});exports.FormSection=q;

package/dist/components/FormSection/FormSection.mjs

@@ -0,0 +1,84 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { forwardRef as p, useState as B } from "react";
+import { ChevronDown as H } from "lucide-react";
+import e from "./FormSection.module.css.mjs";
+const h = p(
+  ({ label: o, helpText: n, children: i, columns: r = 1, className: s, ...d }, t) => {
+    const m = [e.group, e[`columns-${r}`], s].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c("div", { ref: t, className: m, ...d, children: [
+      o && /* @__PURE__ */ a("div", { className: e.groupLabel, children: o }),
+      /* @__PURE__ */ a("div", { className: e.groupFields, children: i }),
+      n && /* @__PURE__ */ a("div", { className: e.groupHelp, children: n })
+    ] });
+  }
+);
+h.displayName = "FormSection.Group";
+const f = p(
+  ({ children: o, align: n = "end", className: i, ...r }, s) => {
+    const d = [e.actions, e[`align-${n}`], i].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a("div", { ref: s, className: d, ...r, children: o });
+  }
+);
+f.displayName = "FormSection.Actions";
+const u = p(
+  ({
+    title: o,
+    description: n,
+    children: i,
+    actions: r,
+    collapsible: s = !1,
+    defaultCollapsed: d = !1,
+    divider: t = !1,
+    variant: m = "default",
+    icon: N,
+    disabled: v = !1,
+    className: g,
+    ...S
+  }, F) => {
+    const [l, j] = B(d), y = [
+      e.formSection,
+      e[`variant-${m}`],
+      t && e.divider,
+      v && e.disabled,
+      s && e.collapsible,
+      l && e.collapsed,
+      g
+    ].filter(Boolean).join(" "), C = () => {
+      s && j(!l);
+    }, $ = s ? "button" : "div", x = s ? {
+      type: "button",
+      onClick: C,
+      "aria-expanded": !l
+    } : {};
+    return /* @__PURE__ */ c("div", { ref: F, className: y, ...S, children: [
+      (o || N || s) && /* @__PURE__ */ c($, { className: e.header, ...x, children: [
+        /* @__PURE__ */ c("div", { className: e.headerContent, children: [
+          N && /* @__PURE__ */ a("span", { className: e.icon, children: N }),
+          (o || n) && /* @__PURE__ */ c("div", { className: e.headerText, children: [
+            o && /* @__PURE__ */ a("h3", { className: e.title, children: o }),
+            n && /* @__PURE__ */ a("p", { className: e.description, children: n })
+          ] })
+        ] }),
+        s && /* @__PURE__ */ a(
+          H,
+          {
+            size: 20,
+            className: `${e.collapseIcon} ${l ? e.iconCollapsed : ""}`
+          }
+        )
+      ] }),
+      (!s || !l) && /* @__PURE__ */ c("div", { className: e.content, children: [
+        /* @__PURE__ */ a("div", { className: e.fields, children: i }),
+        r && /* @__PURE__ */ a("div", { className: e.actionsWrapper, children: r })
+      ] })
+    ] });
+  }
+);
+u.displayName = "FormSection";
+const z = Object.assign(u, {
+  Group: h,
+  Actions: f
+});
+export {
+  z as FormSection
+};

package/dist/components/Icon/Icon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react/jsx-runtime"),t=require("react"),n=require("./Icon.module.css.cjs"),S={xs:12,sm:16,md:20,lg:24,xl:32},l=t.forwardRef(({icon:i,size:e="md",color:s="current",strokeWidth:d=2,label:a,decorative:c=!1,disabled:f=!1,className:o,style:u,...m},p)=>{const h=t.useMemo(()=>typeof e=="number"?e:S[e],[e]),g=t.useMemo(()=>{const r=[n.default.icon];return typeof e=="string"&&r.push(n.default[e]),r.push(n.default[s]),f&&r.push(n.default.disabled),o&&r.push(o),r.filter(Boolean).join(" ")},[e,s,f,o]),y=t.useMemo(()=>c?{"aria-hidden":!0,role:"presentation"}:{"aria-label":a,role:"img"},[c,a]),M=t.useMemo(()=>typeof e=="number"?{width:e,height:e,...u}:u,[e,u]);return I.jsx(i,{ref:p,className:g,size:h,strokeWidth:d,style:M,...y,...m})});l.displayName="Icon";exports.Icon=l;

package/dist/components/Icon/Icon.mjs

@@ -0,0 +1,54 @@
+import { jsx as x } from "react/jsx-runtime";
+import { forwardRef as I, useMemo as n } from "react";
+import o from "./Icon.module.css.mjs";
+const S = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+}, b = I(
+  ({
+    icon: i,
+    size: r = "md",
+    color: f = "current",
+    strokeWidth: a = 2,
+    label: u,
+    decorative: m = !1,
+    disabled: p = !1,
+    className: e,
+    style: s,
+    ...c
+  }, l) => {
+    const d = n(() => typeof r == "number" ? r : S[r], [r]), h = n(() => {
+      const t = [o.icon];
+      return typeof r == "string" && t.push(o[r]), t.push(o[f]), p && t.push(o.disabled), e && t.push(e), t.filter(Boolean).join(" ");
+    }, [r, f, p, e]), y = n(() => m ? {
+      "aria-hidden": !0,
+      role: "presentation"
+    } : {
+      "aria-label": u,
+      role: "img"
+    }, [m, u]), g = n(() => typeof r == "number" ? {
+      width: r,
+      height: r,
+      ...s
+    } : s, [r, s]);
+    return /* @__PURE__ */ x(
+      i,
+      {
+        ref: l,
+        className: h,
+        size: d,
+        strokeWidth: a,
+        style: g,
+        ...y,
+        ...c
+      }
+    );
+  }
+);
+b.displayName = "Icon";
+export {
+  b as Icon
+};

package/dist/components/IconGallery/IconGallery.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),d=require("lucide-react"),a=require("./IconGallery.module.css.cjs"),C={Navigation:["Menu","X","ChevronDown","ChevronUp","ChevronLeft","ChevronRight","ArrowDown","ArrowUp","ArrowLeft","ArrowRight","Home","Settings","Bell","User","LogOut","LogIn","Search","MapPin","Navigation"],Actions:["Plus","Minus","Check","Copy","Download","Upload","Share2","Trash2","Edit","Eye","EyeOff","Lock","Unlock","Zap","Refresh","RotateCw","Save","Send","Archive","Flag"],Status:["AlertCircle","CheckCircle","XCircle","Info","HelpCircle","AlertTriangle","CheckCircle2","Circle","Loader","Loader2","Clock","Calendar"],Media:["Image","Video","Music","FileText","File","Folder","FolderOpen","Camera","Paperclip","Play","Pause","Volume2","VolumeX"],Communication:["Mail","MessageSquare","Heart","Star","Share","MessageCircle","Phone","Smartphone","Gift","ThumbsUp","ThumbsDown"],Commerce:["ShoppingCart","DollarSign","CreditCard","Tag","Briefcase","TrendingUp","TrendingDown","BarChart","PieChart","Activity"]},m=({className:u})=>{const[r,f]=s.useState(""),[n,h]=s.useState(null),[g,p]=s.useState(null),c=s.useMemo(()=>Object.keys(d.icons).sort(),[]),o=s.useMemo(()=>{let e=c;if(n){const l=C[n];l&&(e=e.filter(i=>l.includes(i)))}if(r){const l=r.toLowerCase();e=e.filter(i=>i.toLowerCase().includes(l))}return e.sort()},[c,r,n]),j=s.useCallback(e=>{const l=`import { ${e} } from 'lucide-react';`;navigator.clipboard.writeText(l),p(e),setTimeout(()=>p(null),1500)},[]),x=s.useCallback(e=>{const l=d.icons[e];return l?t.jsx(l,{size:24}):null},[]);return t.jsxs("div",{className:`${a.default.gallery}${u?` ${u}`:""}`,children:[t.jsxs("div",{className:a.default.header,children:[t.jsx("h1",{children:"Icon Browser"}),t.jsxs("p",{children:[c.length.toLocaleString()," icons available"]})]}),t.jsxs("div",{className:a.default.searchContainer,children:[t.jsx(d.Search,{size:20,className:a.default.searchIcon}),t.jsx("input",{type:"text",placeholder:"Search icons...",value:r,onChange:e=>f(e.target.value),className:a.default.searchInput}),r&&t.jsxs("span",{className:a.default.resultCount,children:[o.length," results"]})]}),t.jsxs("div",{className:a.default.categories,children:[t.jsx("button",{className:`${a.default.categoryBtn} ${n?"":a.default.active}`,onClick:()=>h(null),type:"button",children:"All"}),Object.keys(C).map(e=>t.jsx("button",{className:`${a.default.categoryBtn} ${n===e?a.default.active:""}`,onClick:()=>h(e),type:"button",children:e},e))]}),t.jsx("div",{className:a.default.iconGrid,children:o.map(e=>t.jsxs("button",{className:a.default.iconItem,onClick:()=>j(e),title:e,type:"button",children:[t.jsx("span",{className:a.default.iconDisplay,children:x(e)}),t.jsx("span",{className:a.default.iconName,children:e}),g===e&&t.jsx("span",{className:a.default.copiedBadge,children:"Copied!"})]},e))}),o.length===0&&t.jsx("div",{className:a.default.noResults,children:t.jsxs("p",{children:['No icons found for "',r,'"']})}),t.jsxs("div",{className:a.default.usageInfo,children:[t.jsx("h3",{children:"Usage"}),t.jsx("pre",{className:a.default.codeBlock,children:`import { Search, Download } from 'lucide-react';
+
+<Button icon={<Search size={20} />}>Search</Button>`})]})]})};m.displayName="IconGallery";exports.IconGallery=m;