@treeal/ds 0.2.0 → 0.2.2

package/dist/index.esm15.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm15.js","sources":["../components/Tab/Tab.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Tab.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface TabItem {\n  /** Unique identifier for the tab */\n  id: string;\n  /** Label displayed inside the tab */\n  label: string;\n  /** Optional icon rendered before the label */\n  icon?: React.ReactNode;\n  /** Whether this tab is disabled */\n  disabled?: boolean;\n}\n\nexport interface TabProps {\n  /** List of tab items */\n  items: TabItem[];\n  /** ID of the currently active tab */\n  activeId: string;\n  /** Called when a tab is clicked */\n  onChange: (id: string) => void;\n  className?: string;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function Tab({ items, activeId, onChange, className }: TabProps) {\n  return (\n    <div\n      className={[styles.tabList, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n    >\n      {items.map((item) => {\n        const isActive = item.id === activeId;\n        const isDisabled = item.disabled ?? false;\n\n        const tabClass = [\n          styles.tab,\n          isActive ? styles.active : '',\n          isDisabled ? styles.disabled : '',\n        ]\n          .filter(Boolean)\n          .join(' ');\n\n        return (\n          <button\n            key={item.id}\n            role=\"tab\"\n            aria-selected={isActive}\n            aria-disabled={isDisabled}\n            disabled={isDisabled}\n            className={tabClass}\n            onClick={() => !isDisabled && onChange(item.id)}\n          >\n            {item.icon && (\n              <span className={styles.icon} aria-hidden=\"true\">\n                {item.icon}\n              </span>\n            )}\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["Tab","items","activeId","onChange","className","jsx","styles","item","isActive","isDisabled","tabClass","jsxs"],"mappings":";;AA4BO,SAASA,EAAI,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAAuB;AACtE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,SAASF,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC/D,MAAK;AAAA,MAEJ,UAAAH,EAAM,IAAI,CAACM,MAAS;AACnB,cAAMC,IAAWD,EAAK,OAAOL,GACvBO,IAAaF,EAAK,YAAY,IAE9BG,IAAW;AAAA,UACfJ,EAAO;AAAA,UACPE,IAAWF,EAAO,SAAS;AAAA,UAC3BG,IAAaH,EAAO,WAAW;AAAA,QAAA,EAE9B,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,eACE,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,iBAAeH;AAAA,YACf,iBAAeC;AAAA,YACf,UAAUA;AAAA,YACV,WAAWC;AAAA,YACX,SAAS,MAAM,CAACD,KAAcN,EAASI,EAAK,EAAE;AAAA,YAE7C,UAAA;AAAA,cAAAA,EAAK,0BACH,QAAA,EAAK,WAAWD,EAAO,MAAM,eAAY,QACvC,UAAAC,EAAK,KAAA,CACR;AAAA,cAEDA,EAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAbDA,EAAK;AAAA,QAAA;AAAA,MAgBhB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"index.esm15.js","sources":["../components/Steps/Steps.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Steps.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface StepItem {\n  label: string;\n  description?: string;\n}\n\nexport interface StepsProps {\n  steps: StepItem[];\n  /** 0-based index of the currently active step */\n  current: number;\n  /** Compact dot version — for mobile or tight spaces */\n  minified?: boolean;\n  className?: string;\n}\n\ntype StepState = 'Default' | 'Active' | 'Complete';\ntype StepType = 'Start' | 'Step' | 'End';\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\nfunction getState(index: number, current: number): StepState {\n  if (index < current) return 'Complete';\n  if (index === current) return 'Active';\n  return 'Default';\n}\n\nfunction getType(index: number, total: number): StepType {\n  if (index === 0) return 'Start';\n  if (index === total - 1) return 'End';\n  return 'Step';\n}\n\n// ─── Double-check icon (tabler:checks) — inline SVG ──────────────────────────\n\nfunction IconChecks() {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      {/* left check */}\n      <polyline points=\"2,12.5 6,16.5 13,9.5\" />\n      {/* right check (shifted) */}\n      <polyline points=\"9,12.5 13,16.5 21,9.5\" />\n    </svg>\n  );\n}\n\n// ─── Minified (dots) version ──────────────────────────────────────────────────\n\nfunction MinifiedSteps({ steps, current }: Pick<StepsProps, 'steps' | 'current'>) {\n  return (\n    <div className={styles.minified} role=\"list\" aria-label=\"Steps\">\n      {steps.map((step, i) => {\n        const state = getState(i, current);\n        const isLast = i === steps.length - 1;\n\n        const dotClass = [\n          styles.minDot,\n          state === 'Default' ? styles.minDefault : '',\n          state === 'Active' ? styles.minActive : '',\n          state === 'Complete' ? styles.minComplete : '',\n        ]\n          .filter(Boolean)\n          .join(' ');\n\n        // Connector color: complete if the step TO THE LEFT is complete\n        const connectorClass = [\n          styles.minConnector,\n          state === 'Complete' ? styles.minConnectorComplete : styles.minConnectorDefault,\n        ].join(' ');\n\n        return (\n          <React.Fragment key={i}>\n            <div\n              role=\"listitem\"\n              className={dotClass}\n              aria-label={`Step ${i + 1}: ${step.label}${\n                state === 'Active' ? ' (current)' : state === 'Complete' ? ' (completed)' : ''\n              }`}\n              aria-current={state === 'Active' ? 'step' : undefined}\n            />\n            {!isLast && <div className={connectorClass} aria-hidden=\"true\" />}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n}\n\n// ─── Full Steps ───────────────────────────────────────────────────────────────\n\nexport function Steps({ steps, current, minified = false, className }: StepsProps) {\n  const wrapperClass = [styles.steps, className].filter(Boolean).join(' ');\n\n  if (minified) {\n    return (\n      <div className={wrapperClass}>\n        <MinifiedSteps steps={steps} current={current} />\n      </div>\n    );\n  }\n\n  const total = steps.length;\n\n  return (\n    <nav\n      className={wrapperClass}\n      aria-label=\"Steps\"\n    >\n      {steps.map((step, i) => {\n        const state = getState(i, current);\n        const type = getType(i, total);\n        const isLight = state === 'Active' || state === 'Complete';\n\n        /*\n         * z-index stacking: first item (Start) is highest.\n         * Its arrow paints on top of the next item's notch,\n         * creating the connected-chevron effect.\n         */\n        const zIndex = total - i;\n\n        const itemClass = [\n          styles.item,\n          styles[`type${type}`],\n          styles[`state${state}`],\n        ].join(' ');\n\n        const textClass = isLight ? styles.textLight : styles.textDark;\n\n        return (\n          <div\n            key={i}\n            className={itemClass}\n            style={{ zIndex }}\n            role=\"listitem\"\n            aria-current={state === 'Active' ? 'step' : undefined}\n            aria-label={`Step ${i + 1} of ${total}: ${step.label}${\n              state === 'Active' ? ' (current)' : state === 'Complete' ? ' (completed)' : ''\n            }`}\n          >\n            {/* Label */}\n            <span className={[styles.label, textClass].join(' ')}>\n              {step.label}\n            </span>\n\n            {/* Number (Default / Active) or check icon (Complete) */}\n            {state === 'Complete' ? (\n              <span className={[styles.checkIcon, textClass].join(' ')}>\n                <IconChecks />\n              </span>\n            ) : (\n              <span className={[styles.num, textClass].join(' ')}>\n                {String(i + 1).padStart(2, '0')}\n              </span>\n            )}\n          </div>\n        );\n      })}\n    </nav>\n  );\n}\n"],"names":["getState","index","current","getType","total","IconChecks","jsxs","jsx","MinifiedSteps","steps","styles","step","i","state","isLast","dotClass","connectorClass","React","Steps","minified","className","wrapperClass","type","isLight","zIndex","itemClass","textClass"],"mappings":"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"}

package/dist/index.esm16.js

@@ -1,222 +1,38 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useRef as L, useState as w } from "react";
-import r from "./index.esm19.js";
-const y = () => /* @__PURE__ */ a("svg", { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true", children: [
-  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ a("linearGradient", { id: "fileGrad", x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
-    /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#2970FF" }),
-    /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#0040C1" })
-  ] }) }),
-  /* @__PURE__ */ e(
-    "path",
-    {
-      fill: "url(#fileGrad)",
-      d: "M2 0h5.5L10 2.5V12H2V0zm5 0v3h3L7 0zM3 5h6v1H3V5zm0 2h6v1H3V7zm0 2h4v1H3V9z"
-    }
-  )
-] }), b = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M8.707.293a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414L9.414 5.1 6.9 2.586 8.707.293zM0 9.5V12h2.5l7-7L7 2.5l-7 7zM1.5 10.5v-.793l5.5-5.5.793.793-5.5 5.5H1.5z" }) }), D = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M6 2C3.27 2 1 4 1 6s2.27 4 5 4 5-2 5-4-2.27-4-5-4zm0 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" }) }), I = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M4 1V0h4v1h3v1H1V1h3zM2 3h8l-.8 8H2.8L2 3zm2 1v6h1V4H4zm2 0v6h1V4H6z" }) }), W = () => /* @__PURE__ */ a("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", "aria-hidden": "true", children: [
-  /* @__PURE__ */ e(
-    "rect",
-    {
-      x: "18",
-      y: "10",
-      width: "10",
-      height: "13",
-      rx: "1.5",
-      fill: "#DBE8FF",
-      stroke: "#B2C9FF",
-      strokeWidth: "0.5",
-      transform: "rotate(12 18 10)"
-    }
-  ),
-  /* @__PURE__ */ e(
-    "rect",
-    {
-      x: "4",
-      y: "10",
-      width: "10",
-      height: "13",
-      rx: "1.5",
-      fill: "#DBE8FF",
-      stroke: "#B2C9FF",
-      strokeWidth: "0.5",
-      transform: "rotate(-12 4 10)"
-    }
-  ),
-  /* @__PURE__ */ e("rect", { x: "10", y: "7", width: "12", height: "16", rx: "1.5", fill: "#FFFFFF", stroke: "#B2C9FF", strokeWidth: "1" }),
-  /* @__PURE__ */ e("path", { d: "M13 12h6M13 15h6M13 18h4", stroke: "#B2C9FF", strokeWidth: "1", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("circle", { cx: "23", cy: "23", r: "5", fill: "#2970FF" }),
-  /* @__PURE__ */ e("path", { d: "M23 26v-6M20.5 22.5L23 20l2.5 2.5", stroke: "#FFF", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-] }), H = () => /* @__PURE__ */ a("svg", { width: "96", height: "64", viewBox: "0 0 96 64", fill: "none", "aria-hidden": "true", children: [
-  /* @__PURE__ */ a("g", { transform: "rotate(15 70 35)", children: [
-    /* @__PURE__ */ e("rect", { x: "55", y: "18", width: "28", height: "36", rx: "3", fill: "#DBE8FF", stroke: "#B2C9FF", strokeWidth: "1" }),
-    /* @__PURE__ */ e("path", { d: "M61 28h16M61 34h16M61 40h10", stroke: "#B2C9FF", strokeWidth: "1.5", strokeLinecap: "round" })
-  ] }),
-  /* @__PURE__ */ a("g", { transform: "rotate(-15 26 35)", children: [
-    /* @__PURE__ */ e("rect", { x: "13", y: "18", width: "28", height: "36", rx: "3", fill: "#DBE8FF", stroke: "#B2C9FF", strokeWidth: "1" }),
-    /* @__PURE__ */ e("path", { d: "M19 28h16M19 34h16M19 40h10", stroke: "#B2C9FF", strokeWidth: "1.5", strokeLinecap: "round" })
-  ] }),
-  /* @__PURE__ */ e("rect", { x: "30", y: "8", width: "36", height: "48", rx: "3", fill: "#FFFFFF", stroke: "#B2C9FF", strokeWidth: "1.5" }),
-  /* @__PURE__ */ e("path", { d: "M38 22h20M38 30h20M38 38h14", stroke: "#B2C9FF", strokeWidth: "1.5", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("circle", { cx: "76", cy: "50", r: "10", fill: "#2970FF" }),
-  /* @__PURE__ */ e("path", { d: "M76 55v-10M71 48l5-5 5 5", stroke: "#FFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
-] });
-function V({ file: t, size: n, onEdit: s, onPreview: o, onRemove: l }) {
-  const h = t.state === "loading" || t.indicator === "loader", c = n === "LG" && t.indicator !== "loader";
-  return /* @__PURE__ */ a(
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import s from "./index.esm26.js";
+function p({ items: o, activeId: n, onChange: r, className: d }) {
+  return /* @__PURE__ */ e(
     "div",
     {
-      className: [
-        r.fileItem,
-        n === "LG" ? r.fileItemLg : r.fileItemMd
-      ].join(" "),
-      children: [
-        /* @__PURE__ */ e("div", { className: r.fileBadge, children: /* @__PURE__ */ e(y, {}) }),
-        /* @__PURE__ */ a("div", { className: r.fileContent, children: [
-          /* @__PURE__ */ a("div", { className: r.fileHeader, children: [
-            /* @__PURE__ */ a("div", { className: r.fileTexts, children: [
-              /* @__PURE__ */ e("p", { className: r.fileName, children: t.name }),
-              /* @__PURE__ */ e("p", { className: r.fileSize, children: t.size })
-            ] }),
-            h ? /* @__PURE__ */ e("div", { className: r.spinner, role: "status", "aria-label": "Uploading…" }) : /* @__PURE__ */ a("div", { className: r.actions, children: [
-              /* @__PURE__ */ e(
-                "button",
-                {
-                  className: r.actionBtn,
-                  onClick: () => s == null ? void 0 : s(t.id),
-                  "aria-label": `Edit ${t.name}`,
-                  type: "button",
-                  children: /* @__PURE__ */ e(b, {})
-                }
-              ),
-              /* @__PURE__ */ e(
-                "button",
-                {
-                  className: r.actionBtn,
-                  onClick: () => o == null ? void 0 : o(t.id),
-                  "aria-label": `Preview ${t.name}`,
-                  type: "button",
-                  children: /* @__PURE__ */ e(D, {})
-                }
-              ),
-              /* @__PURE__ */ e(
-                "button",
-                {
-                  className: r.actionBtn,
-                  onClick: () => l == null ? void 0 : l(t.id),
-                  "aria-label": `Remove ${t.name}`,
-                  type: "button",
-                  children: /* @__PURE__ */ e(I, {})
-                }
-              )
-            ] })
-          ] }),
-          c && /* @__PURE__ */ a("div", { className: r.progressRow, children: [
-            /* @__PURE__ */ e("div", { className: r.progressTrack, children: /* @__PURE__ */ e(
-              "div",
-              {
-                className: r.progressFill,
-                style: { width: `${Math.min(100, Math.max(0, t.progress))}%` },
-                role: "progressbar",
-                "aria-valuenow": t.progress,
-                "aria-valuemin": 0,
-                "aria-valuemax": 100
-              }
-            ) }),
-            /* @__PURE__ */ a("p", { className: r.progressLabel, children: [
-              t.progress,
-              "%"
-            ] })
-          ] })
-        ] })
-      ]
+      className: [s.tabList, d].filter(Boolean).join(" "),
+      role: "tablist",
+      children: o.map((a) => {
+        const l = a.id === n, i = a.disabled ?? !1, t = [
+          s.tab,
+          l ? s.active : "",
+          i ? s.disabled : ""
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ c(
+          "button",
+          {
+            role: "tab",
+            "aria-selected": l,
+            "aria-disabled": i,
+            disabled: i,
+            className: t,
+            onClick: () => !i && r(a.id),
+            children: [
+              a.icon && /* @__PURE__ */ e("span", { className: s.icon, "aria-hidden": "true", children: a.icon }),
+              a.label
+            ]
+          },
+          a.id
+        );
+      })
     }
   );
 }
-function $({
-  size: t = "LG",
-  type: n = "multiple",
-  status: s = "default",
-  files: o = [],
-  onDrop: l,
-  onRemove: h,
-  onEdit: c,
-  onPreview: u,
-  accept: f,
-  className: v
-}) {
-  const m = L(null), [k, p] = w(!1), M = (i) => {
-    i.preventDefault(), p(!0);
-  }, x = (i) => {
-    i.preventDefault(), p(!1);
-  }, N = (i) => {
-    i.preventDefault(), p(!1);
-    const d = Array.from(i.dataTransfer.files);
-    d.length && (l == null || l(d));
-  }, B = (i) => {
-    const d = Array.from(i.target.files ?? []);
-    d.length && (l == null || l(d)), i.target.value = "";
-  }, g = () => {
-    var i;
-    return (i = m.current) == null ? void 0 : i.click();
-  }, z = n === "single" && s === "active" && o.length > 0, C = [
-    r.dropzone,
-    t === "MD" ? r.dropzoneMd : r.dropzoneLg,
-    k ? r.dropzoneDragging : ""
-  ].filter(Boolean).join(" "), F = n === "multiple" ? "Drop your files here, or" : "Drop your file here, or";
-  return /* @__PURE__ */ a("div", { className: [r.wrapper, v].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ e(
-      "input",
-      {
-        ref: m,
-        type: "file",
-        multiple: n === "multiple",
-        accept: f,
-        onChange: B,
-        style: { display: "none" },
-        "aria-hidden": "true",
-        tabIndex: -1
-      }
-    ),
-    !z && /* @__PURE__ */ a(
-      "div",
-      {
-        className: C,
-        onClick: g,
-        onDragOver: M,
-        onDragLeave: x,
-        onDrop: N,
-        role: "button",
-        tabIndex: 0,
-        "aria-label": `${F} browse`,
-        onKeyDown: (i) => {
-          (i.key === " " || i.key === "Enter") && g();
-        },
-        children: [
-          t === "MD" ? /* @__PURE__ */ e("div", { className: r.dropzoneIconMd, children: /* @__PURE__ */ e(W, {}) }) : /* @__PURE__ */ e("div", { className: r.dropzoneIconLg, children: /* @__PURE__ */ e(H, {}) }),
-          /* @__PURE__ */ a("div", { className: r.dropzoneContent, children: [
-            /* @__PURE__ */ a("div", { className: r.dropzoneTitleRow, children: [
-              /* @__PURE__ */ e("p", { className: r.dropzoneTitle, children: F }),
-              /* @__PURE__ */ e("span", { className: r.dropzoneBrowse, "aria-hidden": "true", children: "browse" })
-            ] }),
-            /* @__PURE__ */ e("p", { className: r.dropzoneSubtitle, children: "JPG, PNG, PDF (Max 800×400px – 2Mo)" })
-          ] })
-        ]
-      }
-    ),
-    s === "active" && o.length > 0 && /* @__PURE__ */ e("div", { className: r.fileList, children: o.map((i) => /* @__PURE__ */ e(
-      V,
-      {
-        file: i,
-        size: t,
-        onEdit: c,
-        onPreview: u,
-        onRemove: h
-      },
-      i.id
-    )) })
-  ] });
-}
 export {
-  $ as Upload
+  p as Tab
 };
 //# sourceMappingURL=index.esm16.js.map

package/dist/index.esm16.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm16.js","sources":["../components/Upload/Upload.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport styles from './Upload.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type UploadSize = 'MD' | 'LG';\nexport type UploadType = 'single' | 'multiple';\nexport type UploadStatus = 'default' | 'active';\nexport type UploadFileState = 'loading' | 'loaded' | 'error';\nexport type UploadIndicator = 'loader' | 'progress-bar';\n\nexport interface UploadFile {\n  id: string;\n  name: string;\n  size: string;\n  /** 0–100 */\n  progress: number;\n  state: UploadFileState;\n  /** 'loader' shows spinner · 'progress-bar' shows progress (LG only) */\n  indicator?: UploadIndicator;\n}\n\nexport interface UploadProps {\n  size?: UploadSize;\n  type?: UploadType;\n  /** 'default' = drop area only · 'active' = files listed */\n  status?: UploadStatus;\n  files?: UploadFile[];\n  onDrop?: (files: File[]) => void;\n  onRemove?: (id: string) => void;\n  onEdit?: (id: string) => void;\n  onPreview?: (id: string) => void;\n  /** Native accept attribute, e.g. \".pdf,.png,.jpg\" */\n  accept?: string;\n  /** Max file size in bytes */\n  maxSize?: number;\n  className?: string;\n}\n\n// ─── SVG icons (inline, no external dependency) ──────────────────────────────\n\nconst IconFile = () => (\n  <svg viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n    <defs>\n      <linearGradient id=\"fileGrad\" x1=\"0%\" y1=\"100%\" x2=\"100%\" y2=\"0%\">\n        {/* Figma: linear-gradient(63.88deg, #2970FF 0.2%, #0040C1 99.99%) */}\n        <stop offset=\"0%\" stopColor=\"#2970FF\" />\n        <stop offset=\"100%\" stopColor=\"#0040C1\" />\n      </linearGradient>\n    </defs>\n    <path\n      fill=\"url(#fileGrad)\"\n      d=\"M2 0h5.5L10 2.5V12H2V0zm5 0v3h3L7 0zM3 5h6v1H3V5zm0 2h6v1H3V7zm0 2h4v1H3V9z\"\n    />\n  </svg>\n);\n\nconst IconPen = () => (\n  <svg viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M8.707.293a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414L9.414 5.1 6.9 2.586 8.707.293zM0 9.5V12h2.5l7-7L7 2.5l-7 7zM1.5 10.5v-.793l5.5-5.5.793.793-5.5 5.5H1.5z\" />\n  </svg>\n);\n\nconst IconEye = () => (\n  <svg viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M6 2C3.27 2 1 4 1 6s2.27 4 5 4 5-2 5-4-2.27-4-5-4zm0 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z\" />\n  </svg>\n);\n\nconst IconTrash = () => (\n  <svg viewBox=\"0 0 12 12\" width=\"12\" height=\"12\" fill=\"currentColor\" aria-hidden=\"true\">\n    <path d=\"M4 1V0h4v1h3v1H1V1h3zM2 3h8l-.8 8H2.8L2 3zm2 1v6h1V4H4zm2 0v6h1V4H6z\" />\n  </svg>\n);\n\n// SVG illustration for MD drop zone (32×32 stacked files)\nconst DropIconMd = () => (\n  <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n    {/* back-right file */}\n    <rect x=\"18\" y=\"10\" width=\"10\" height=\"13\" rx=\"1.5\" fill=\"#DBE8FF\" stroke=\"#B2C9FF\" strokeWidth=\"0.5\"\n      transform=\"rotate(12 18 10)\" />\n    {/* back-left file */}\n    <rect x=\"4\" y=\"10\" width=\"10\" height=\"13\" rx=\"1.5\" fill=\"#DBE8FF\" stroke=\"#B2C9FF\" strokeWidth=\"0.5\"\n      transform=\"rotate(-12 4 10)\" />\n    {/* center file */}\n    <rect x=\"10\" y=\"7\" width=\"12\" height=\"16\" rx=\"1.5\" fill=\"#FFFFFF\" stroke=\"#B2C9FF\" strokeWidth=\"1\" />\n    <path d=\"M13 12h6M13 15h6M13 18h4\" stroke=\"#B2C9FF\" strokeWidth=\"1\" strokeLinecap=\"round\" />\n    {/* upload arrow */}\n    <circle cx=\"23\" cy=\"23\" r=\"5\" fill=\"#2970FF\" />\n    <path d=\"M23 26v-6M20.5 22.5L23 20l2.5 2.5\" stroke=\"#FFF\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\n// SVG illustration for LG drop zone (96×64 stacked files)\nconst DropIconLg = () => (\n  <svg width=\"96\" height=\"64\" viewBox=\"0 0 96 64\" fill=\"none\" aria-hidden=\"true\">\n    {/* right file — rotated 15deg */}\n    <g transform=\"rotate(15 70 35)\">\n      <rect x=\"55\" y=\"18\" width=\"28\" height=\"36\" rx=\"3\" fill=\"#DBE8FF\" stroke=\"#B2C9FF\" strokeWidth=\"1\" />\n      <path d=\"M61 28h16M61 34h16M61 40h10\" stroke=\"#B2C9FF\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </g>\n    {/* left file — rotated -15deg */}\n    <g transform=\"rotate(-15 26 35)\">\n      <rect x=\"13\" y=\"18\" width=\"28\" height=\"36\" rx=\"3\" fill=\"#DBE8FF\" stroke=\"#B2C9FF\" strokeWidth=\"1\" />\n      <path d=\"M19 28h16M19 34h16M19 40h10\" stroke=\"#B2C9FF\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    </g>\n    {/* center file */}\n    <rect x=\"30\" y=\"8\" width=\"36\" height=\"48\" rx=\"3\" fill=\"#FFFFFF\" stroke=\"#B2C9FF\" strokeWidth=\"1.5\" />\n    <path d=\"M38 22h20M38 30h20M38 38h14\" stroke=\"#B2C9FF\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\n    {/* upload arrow overlay */}\n    <circle cx=\"76\" cy=\"50\" r=\"10\" fill=\"#2970FF\" />\n    <path d=\"M76 55v-10M71 48l5-5 5 5\" stroke=\"#FFF\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n);\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\ninterface UploadItemProps {\n  file: UploadFile;\n  size: UploadSize;\n  onEdit?: (id: string) => void;\n  onPreview?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nfunction UploadItem({ file, size, onEdit, onPreview, onRemove }: UploadItemProps) {\n  const isLoading = file.state === 'loading' || file.indicator === 'loader';\n  const showProgress = size === 'LG' && file.indicator !== 'loader';\n\n  return (\n    <div\n      className={[\n        styles.fileItem,\n        size === 'LG' ? styles.fileItemLg : styles.fileItemMd,\n      ].join(' ')}\n    >\n      {/* Badge */}\n      <div className={styles.fileBadge}>\n        <IconFile />\n      </div>\n\n      {/* Content */}\n      <div className={styles.fileContent}>\n        <div className={styles.fileHeader}>\n          {/* Name + size */}\n          <div className={styles.fileTexts}>\n            <p className={styles.fileName}>{file.name}</p>\n            <p className={styles.fileSize}>{file.size}</p>\n          </div>\n\n          {/* Actions or spinner */}\n          {isLoading ? (\n            <div className={styles.spinner} role=\"status\" aria-label=\"Uploading…\" />\n          ) : (\n            <div className={styles.actions}>\n              <button\n                className={styles.actionBtn}\n                onClick={() => onEdit?.(file.id)}\n                aria-label={`Edit ${file.name}`}\n                type=\"button\"\n              >\n                <IconPen />\n              </button>\n              <button\n                className={styles.actionBtn}\n                onClick={() => onPreview?.(file.id)}\n                aria-label={`Preview ${file.name}`}\n                type=\"button\"\n              >\n                <IconEye />\n              </button>\n              <button\n                className={styles.actionBtn}\n                onClick={() => onRemove?.(file.id)}\n                aria-label={`Remove ${file.name}`}\n                type=\"button\"\n              >\n                <IconTrash />\n              </button>\n            </div>\n          )}\n        </div>\n\n        {/* Progress bar — LG only, not during loader */}\n        {showProgress && (\n          <div className={styles.progressRow}>\n            <div className={styles.progressTrack}>\n              <div\n                className={styles.progressFill}\n                style={{ width: `${Math.min(100, Math.max(0, file.progress))}%` }}\n                role=\"progressbar\"\n                aria-valuenow={file.progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n              />\n            </div>\n            <p className={styles.progressLabel}>{file.progress}%</p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ─── Main component ───────────────────────────────────────────────────────────\n\nexport function Upload({\n  size = 'LG',\n  type = 'multiple',\n  status = 'default',\n  files = [],\n  onDrop,\n  onRemove,\n  onEdit,\n  onPreview,\n  accept,\n  className,\n}: UploadProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [dragging, setDragging] = useState(false);\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault();\n    setDragging(true);\n  };\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    e.preventDefault();\n    setDragging(false);\n  };\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault();\n    setDragging(false);\n    const dropped = Array.from(e.dataTransfer.files);\n    if (dropped.length) onDrop?.(dropped);\n  };\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const selected = Array.from(e.target.files ?? []);\n    if (selected.length) onDrop?.(selected);\n    // reset so same file can be re-selected\n    e.target.value = '';\n  };\n\n  const openFilePicker = () => inputRef.current?.click();\n\n  // LG single active / MD single active: hide drop zone when a file is loaded\n  const hideDrop = type === 'single' && status === 'active' && files.length > 0;\n\n  const dropzoneClass = [\n    styles.dropzone,\n    size === 'MD' ? styles.dropzoneMd : styles.dropzoneLg,\n    dragging ? styles.dropzoneDragging : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const titleText =\n    type === 'multiple' ? 'Drop your files here, or' : 'Drop your file here, or';\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')}>\n      {/* Hidden file input */}\n      <input\n        ref={inputRef}\n        type=\"file\"\n        multiple={type === 'multiple'}\n        accept={accept}\n        onChange={handleInputChange}\n        style={{ display: 'none' }}\n        aria-hidden=\"true\"\n        tabIndex={-1}\n      />\n\n      {/* Drop zone */}\n      {!hideDrop && (\n        <div\n          className={dropzoneClass}\n          onClick={openFilePicker}\n          onDragOver={handleDragOver}\n          onDragLeave={handleDragLeave}\n          onDrop={handleDrop}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={`${titleText} browse`}\n          onKeyDown={(e) => {\n            if (e.key === ' ' || e.key === 'Enter') openFilePicker();\n          }}\n        >\n          {/* Icon */}\n          {size === 'MD' ? (\n            <div className={styles.dropzoneIconMd}>\n              <DropIconMd />\n            </div>\n          ) : (\n            <div className={styles.dropzoneIconLg}>\n              <DropIconLg />\n            </div>\n          )}\n\n          {/* Text content */}\n          <div className={styles.dropzoneContent}>\n            <div className={styles.dropzoneTitleRow}>\n              <p className={styles.dropzoneTitle}>{titleText}</p>\n              <span className={styles.dropzoneBrowse} aria-hidden=\"true\">\n                browse\n              </span>\n            </div>\n            <p className={styles.dropzoneSubtitle}>\n              JPG, PNG, PDF (Max 800×400px – 2Mo)\n            </p>\n          </div>\n        </div>\n      )}\n\n      {/* File list */}\n      {status === 'active' && files.length > 0 && (\n        <div className={styles.fileList}>\n          {files.map((file) => (\n            <UploadItem\n              key={file.id}\n              file={file}\n              size={size}\n              onEdit={onEdit}\n              onPreview={onPreview}\n              onRemove={onRemove}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["IconFile","jsxs","jsx","IconPen","IconEye","IconTrash","DropIconMd","DropIconLg","UploadItem","file","size","onEdit","onPreview","onRemove","isLoading","showProgress","styles","Upload","type","status","files","onDrop","accept","className","inputRef","useRef","dragging","setDragging","useState","handleDragOver","e","handleDragLeave","handleDrop","dropped","handleInputChange","selected","openFilePicker","_a","hideDrop","dropzoneClass","titleText"],"mappings":"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"}
+{"version":3,"file":"index.esm16.js","sources":["../components/Tab/Tab.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Tab.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface TabItem {\n  /** Unique identifier for the tab */\n  id: string;\n  /** Label displayed inside the tab */\n  label: string;\n  /** Optional icon rendered before the label */\n  icon?: React.ReactNode;\n  /** Whether this tab is disabled */\n  disabled?: boolean;\n}\n\nexport interface TabProps {\n  /** List of tab items */\n  items: TabItem[];\n  /** ID of the currently active tab */\n  activeId: string;\n  /** Called when a tab is clicked */\n  onChange: (id: string) => void;\n  className?: string;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function Tab({ items, activeId, onChange, className }: TabProps) {\n  return (\n    <div\n      className={[styles.tabList, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n    >\n      {items.map((item) => {\n        const isActive = item.id === activeId;\n        const isDisabled = item.disabled ?? false;\n\n        const tabClass = [\n          styles.tab,\n          isActive ? styles.active : '',\n          isDisabled ? styles.disabled : '',\n        ]\n          .filter(Boolean)\n          .join(' ');\n\n        return (\n          <button\n            key={item.id}\n            role=\"tab\"\n            aria-selected={isActive}\n            aria-disabled={isDisabled}\n            disabled={isDisabled}\n            className={tabClass}\n            onClick={() => !isDisabled && onChange(item.id)}\n          >\n            {item.icon && (\n              <span className={styles.icon} aria-hidden=\"true\">\n                {item.icon}\n              </span>\n            )}\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["Tab","items","activeId","onChange","className","jsx","styles","item","isActive","isDisabled","tabClass","jsxs"],"mappings":";;AA4BO,SAASA,EAAI,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAAuB;AACtE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAACC,EAAO,SAASF,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC/D,MAAK;AAAA,MAEJ,UAAAH,EAAM,IAAI,CAACM,MAAS;AACnB,cAAMC,IAAWD,EAAK,OAAOL,GACvBO,IAAaF,EAAK,YAAY,IAE9BG,IAAW;AAAA,UACfJ,EAAO;AAAA,UACPE,IAAWF,EAAO,SAAS;AAAA,UAC3BG,IAAaH,EAAO,WAAW;AAAA,QAAA,EAE9B,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,eACE,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,iBAAeH;AAAA,YACf,iBAAeC;AAAA,YACf,UAAUA;AAAA,YACV,WAAWC;AAAA,YACX,SAAS,MAAM,CAACD,KAAcN,EAASI,EAAK,EAAE;AAAA,YAE7C,UAAA;AAAA,cAAAA,EAAK,0BACH,QAAA,EAAK,WAAWD,EAAO,MAAM,eAAY,QACvC,UAAAC,EAAK,KAAA,CACR;AAAA,cAEDA,EAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UAbDA,EAAK;AAAA,QAAA;AAAA,MAgBhB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/index.esm17.js

@@ -1,26 +1,222 @@
-const _ = "_button_1ri91_8", t = "_sm_1ri91_40", o = "_md_1ri91_48", n = "_outline_1ri91_58", s = "_fill_1ri91_74", i = "_secondary_1ri91_89", l = "_text_1ri91_104", e = "_disabled_1ri91_119", c = "_label_1ri91_130", r = "_icon_1ri91_136", d = {
-  button: _,
-  sm: t,
-  md: o,
-  outline: n,
-  fill: s,
-  secondary: i,
-  text: l,
-  disabled: e,
-  label: c,
-  icon: r
-};
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useRef as L, useState as w } from "react";
+import r from "./index.esm28.js";
+const y = () => /* @__PURE__ */ a("svg", { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true", children: [
+  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ a("linearGradient", { id: "fileGrad", x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
+    /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#2970FF" }),
+    /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#0040C1" })
+  ] }) }),
+  /* @__PURE__ */ e(
+    "path",
+    {
+      fill: "url(#fileGrad)",
+      d: "M2 0h5.5L10 2.5V12H2V0zm5 0v3h3L7 0zM3 5h6v1H3V5zm0 2h6v1H3V7zm0 2h4v1H3V9z"
+    }
+  )
+] }), b = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M8.707.293a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414L9.414 5.1 6.9 2.586 8.707.293zM0 9.5V12h2.5l7-7L7 2.5l-7 7zM1.5 10.5v-.793l5.5-5.5.793.793-5.5 5.5H1.5z" }) }), D = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M6 2C3.27 2 1 4 1 6s2.27 4 5 4 5-2 5-4-2.27-4-5-4zm0 7a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-5a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" }) }), I = () => /* @__PURE__ */ e("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M4 1V0h4v1h3v1H1V1h3zM2 3h8l-.8 8H2.8L2 3zm2 1v6h1V4H4zm2 0v6h1V4H6z" }) }), W = () => /* @__PURE__ */ a("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ e(
+    "rect",
+    {
+      x: "18",
+      y: "10",
+      width: "10",
+      height: "13",
+      rx: "1.5",
+      fill: "#DBE8FF",
+      stroke: "#B2C9FF",
+      strokeWidth: "0.5",
+      transform: "rotate(12 18 10)"
+    }
+  ),
+  /* @__PURE__ */ e(
+    "rect",
+    {
+      x: "4",
+      y: "10",
+      width: "10",
+      height: "13",
+      rx: "1.5",
+      fill: "#DBE8FF",
+      stroke: "#B2C9FF",
+      strokeWidth: "0.5",
+      transform: "rotate(-12 4 10)"
+    }
+  ),
+  /* @__PURE__ */ e("rect", { x: "10", y: "7", width: "12", height: "16", rx: "1.5", fill: "#FFFFFF", stroke: "#B2C9FF", strokeWidth: "1" }),
+  /* @__PURE__ */ e("path", { d: "M13 12h6M13 15h6M13 18h4", stroke: "#B2C9FF", strokeWidth: "1", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("circle", { cx: "23", cy: "23", r: "5", fill: "#2970FF" }),
+  /* @__PURE__ */ e("path", { d: "M23 26v-6M20.5 22.5L23 20l2.5 2.5", stroke: "#FFF", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] }), H = () => /* @__PURE__ */ a("svg", { width: "96", height: "64", viewBox: "0 0 96 64", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ a("g", { transform: "rotate(15 70 35)", children: [
+    /* @__PURE__ */ e("rect", { x: "55", y: "18", width: "28", height: "36", rx: "3", fill: "#DBE8FF", stroke: "#B2C9FF", strokeWidth: "1" }),
+    /* @__PURE__ */ e("path", { d: "M61 28h16M61 34h16M61 40h10", stroke: "#B2C9FF", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  /* @__PURE__ */ a("g", { transform: "rotate(-15 26 35)", children: [
+    /* @__PURE__ */ e("rect", { x: "13", y: "18", width: "28", height: "36", rx: "3", fill: "#DBE8FF", stroke: "#B2C9FF", strokeWidth: "1" }),
+    /* @__PURE__ */ e("path", { d: "M19 28h16M19 34h16M19 40h10", stroke: "#B2C9FF", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  /* @__PURE__ */ e("rect", { x: "30", y: "8", width: "36", height: "48", rx: "3", fill: "#FFFFFF", stroke: "#B2C9FF", strokeWidth: "1.5" }),
+  /* @__PURE__ */ e("path", { d: "M38 22h20M38 30h20M38 38h14", stroke: "#B2C9FF", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("circle", { cx: "76", cy: "50", r: "10", fill: "#2970FF" }),
+  /* @__PURE__ */ e("path", { d: "M76 55v-10M71 48l5-5 5 5", stroke: "#FFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+function V({ file: t, size: n, onEdit: s, onPreview: o, onRemove: l }) {
+  const h = t.state === "loading" || t.indicator === "loader", c = n === "LG" && t.indicator !== "loader";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: [
+        r.fileItem,
+        n === "LG" ? r.fileItemLg : r.fileItemMd
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ e("div", { className: r.fileBadge, children: /* @__PURE__ */ e(y, {}) }),
+        /* @__PURE__ */ a("div", { className: r.fileContent, children: [
+          /* @__PURE__ */ a("div", { className: r.fileHeader, children: [
+            /* @__PURE__ */ a("div", { className: r.fileTexts, children: [
+              /* @__PURE__ */ e("p", { className: r.fileName, children: t.name }),
+              /* @__PURE__ */ e("p", { className: r.fileSize, children: t.size })
+            ] }),
+            h ? /* @__PURE__ */ e("div", { className: r.spinner, role: "status", "aria-label": "Uploading…" }) : /* @__PURE__ */ a("div", { className: r.actions, children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  className: r.actionBtn,
+                  onClick: () => s == null ? void 0 : s(t.id),
+                  "aria-label": `Edit ${t.name}`,
+                  type: "button",
+                  children: /* @__PURE__ */ e(b, {})
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  className: r.actionBtn,
+                  onClick: () => o == null ? void 0 : o(t.id),
+                  "aria-label": `Preview ${t.name}`,
+                  type: "button",
+                  children: /* @__PURE__ */ e(D, {})
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  className: r.actionBtn,
+                  onClick: () => l == null ? void 0 : l(t.id),
+                  "aria-label": `Remove ${t.name}`,
+                  type: "button",
+                  children: /* @__PURE__ */ e(I, {})
+                }
+              )
+            ] })
+          ] }),
+          c && /* @__PURE__ */ a("div", { className: r.progressRow, children: [
+            /* @__PURE__ */ e("div", { className: r.progressTrack, children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: r.progressFill,
+                style: { width: `${Math.min(100, Math.max(0, t.progress))}%` },
+                role: "progressbar",
+                "aria-valuenow": t.progress,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100
+              }
+            ) }),
+            /* @__PURE__ */ a("p", { className: r.progressLabel, children: [
+              t.progress,
+              "%"
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function $({
+  size: t = "LG",
+  type: n = "multiple",
+  status: s = "default",
+  files: o = [],
+  onDrop: l,
+  onRemove: h,
+  onEdit: c,
+  onPreview: u,
+  accept: f,
+  className: v
+}) {
+  const m = L(null), [k, p] = w(!1), M = (i) => {
+    i.preventDefault(), p(!0);
+  }, x = (i) => {
+    i.preventDefault(), p(!1);
+  }, N = (i) => {
+    i.preventDefault(), p(!1);
+    const d = Array.from(i.dataTransfer.files);
+    d.length && (l == null || l(d));
+  }, B = (i) => {
+    const d = Array.from(i.target.files ?? []);
+    d.length && (l == null || l(d)), i.target.value = "";
+  }, g = () => {
+    var i;
+    return (i = m.current) == null ? void 0 : i.click();
+  }, z = n === "single" && s === "active" && o.length > 0, C = [
+    r.dropzone,
+    t === "MD" ? r.dropzoneMd : r.dropzoneLg,
+    k ? r.dropzoneDragging : ""
+  ].filter(Boolean).join(" "), F = n === "multiple" ? "Drop your files here, or" : "Drop your file here, or";
+  return /* @__PURE__ */ a("div", { className: [r.wrapper, v].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ e(
+      "input",
+      {
+        ref: m,
+        type: "file",
+        multiple: n === "multiple",
+        accept: f,
+        onChange: B,
+        style: { display: "none" },
+        "aria-hidden": "true",
+        tabIndex: -1
+      }
+    ),
+    !z && /* @__PURE__ */ a(
+      "div",
+      {
+        className: C,
+        onClick: g,
+        onDragOver: M,
+        onDragLeave: x,
+        onDrop: N,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `${F} browse`,
+        onKeyDown: (i) => {
+          (i.key === " " || i.key === "Enter") && g();
+        },
+        children: [
+          t === "MD" ? /* @__PURE__ */ e("div", { className: r.dropzoneIconMd, children: /* @__PURE__ */ e(W, {}) }) : /* @__PURE__ */ e("div", { className: r.dropzoneIconLg, children: /* @__PURE__ */ e(H, {}) }),
+          /* @__PURE__ */ a("div", { className: r.dropzoneContent, children: [
+            /* @__PURE__ */ a("div", { className: r.dropzoneTitleRow, children: [
+              /* @__PURE__ */ e("p", { className: r.dropzoneTitle, children: F }),
+              /* @__PURE__ */ e("span", { className: r.dropzoneBrowse, "aria-hidden": "true", children: "browse" })
+            ] }),
+            /* @__PURE__ */ e("p", { className: r.dropzoneSubtitle, children: "JPG, PNG, PDF (Max 800×400px – 2Mo)" })
+          ] })
+        ]
+      }
+    ),
+    s === "active" && o.length > 0 && /* @__PURE__ */ e("div", { className: r.fileList, children: o.map((i) => /* @__PURE__ */ e(
+      V,
+      {
+        file: i,
+        size: t,
+        onEdit: c,
+        onPreview: u,
+        onRemove: h
+      },
+      i.id
+    )) })
+  ] });
+}
 export {
-  _ as button,
-  d as default,
-  e as disabled,
-  s as fill,
-  r as icon,
-  c as label,
-  o as md,
-  n as outline,
-  i as secondary,
-  t as sm,
-  l as text
+  $ as Upload
 };
 //# sourceMappingURL=index.esm17.js.map