@treeal/ds 0.1.0 → 0.1.2

package/dist/index.esm12.js

@@ -1,93 +1,177 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import S from "react";
-import e from "./index.esm21.js";
-function u(t, o) {
-  return t < o ? "Complete" : t === o ? "Active" : "Default";
-}
-function g(t, o) {
-  return t === 0 ? "Start" : t === o - 1 ? "End" : "Step";
-}
-function j() {
-  return /* @__PURE__ */ d(
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import r from "./index.esm21.js";
+const f = { xs: 12, md: 20, lg: 24 }, v = ({ s: i }) => /* @__PURE__ */ a("svg", { width: i, height: i, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
+  /* @__PURE__ */ n("circle", { cx: "2", cy: "6", r: "1.25" }),
+  /* @__PURE__ */ n("circle", { cx: "6", cy: "6", r: "1.25" }),
+  /* @__PURE__ */ n("circle", { cx: "10", cy: "6", r: "1.25" })
+] }), m = ({ s: i }) => (
+  // Arrows/Chevron Left — single chevron «
+  /* @__PURE__ */ n(
+    "svg",
+    {
+      width: i,
+      height: i,
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ n("polyline", { points: "7.5,2 4,6 7.5,10" })
+    }
+  )
+), y = ({ s: i }) => (
+  // Arrows/Chevron Right — single chevron »
+  /* @__PURE__ */ n(
+    "svg",
+    {
+      width: i,
+      height: i,
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ n("polyline", { points: "4.5,2 8,6 4.5,10" })
+    }
+  )
+), x = ({ s: i }) => (
+  // Arrows/Chevrons Left — double chevron «
+  /* @__PURE__ */ a(
     "svg",
     {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
+      width: i,
+      height: i,
+      viewBox: "0 0 12 12",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: "2.5",
+      strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ n("polyline", { points: "2,12.5 6,16.5 13,9.5" }),
-        /* @__PURE__ */ n("polyline", { points: "9,12.5 13,16.5 21,9.5" })
+        /* @__PURE__ */ n("polyline", { points: "6.5,2 3,6 6.5,10" }),
+        /* @__PURE__ */ n("polyline", { points: "9.5,2 6,6 9.5,10" })
       ]
     }
-  );
-}
-function N({ steps: t, current: o }) {
-  return /* @__PURE__ */ n("div", { className: e.minified, role: "list", "aria-label": "Steps", children: t.map((m, a) => {
-    const i = u(a, o), s = a === t.length - 1, c = [
-      e.minDot,
-      i === "Default" ? e.minDefault : "",
-      i === "Active" ? e.minActive : "",
-      i === "Complete" ? e.minComplete : ""
-    ].filter(Boolean).join(" "), r = [
-      e.minConnector,
-      i === "Complete" ? e.minConnectorComplete : e.minConnectorDefault
-    ].join(" ");
-    return /* @__PURE__ */ d(S.Fragment, { children: [
-      /* @__PURE__ */ n(
-        "div",
-        {
-          role: "listitem",
-          className: c,
-          "aria-label": `Step ${a + 1}: ${m.label}${i === "Active" ? " (current)" : i === "Complete" ? " (completed)" : ""}`,
-          "aria-current": i === "Active" ? "step" : void 0
-        }
-      ),
-      !s && /* @__PURE__ */ n("div", { className: r, "aria-hidden": "true" })
-    ] }, a);
-  }) });
+  )
+), C = ({ s: i }) => (
+  // Arrows/Chevrons Right — double chevron »
+  /* @__PURE__ */ a(
+    "svg",
+    {
+      width: i,
+      height: i,
+      viewBox: "0 0 12 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ n("polyline", { points: "2.5,2 6,6 2.5,10" }),
+        /* @__PURE__ */ n("polyline", { points: "5.5,2 9,6 5.5,10" })
+      ]
+    }
+  )
+);
+function L(i, o) {
+  return o <= 7 ? Array.from({ length: o }, (t, d) => d + 1) : i <= 4 ? [1, 2, 3, 4, 5, "…", o] : i >= o - 3 ? [1, "…", o - 4, o - 3, o - 2, o - 1, o] : [1, "…", i - 1, i, i + 1, "…", o];
 }
-function k({ steps: t, current: o, minified: m = !1, className: a }) {
-  const i = [e.steps, a].filter(Boolean).join(" ");
-  if (m)
-    return /* @__PURE__ */ n("div", { className: i, children: /* @__PURE__ */ n(N, { steps: t, current: o }) });
-  const s = t.length;
-  return /* @__PURE__ */ n(
+function w({
+  sizes: i = "xs",
+  currentPage: o = 1,
+  totalPages: t = 10,
+  withControls: d = !1,
+  withEdges: u = !1,
+  onChange: h,
+  className: p
+}) {
+  const s = f[i], b = L(o, t), c = (e) => {
+    e < 1 || e > t || e === o || h == null || h(e);
+  }, l = (e) => [r.item, r[i], e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
     "nav",
     {
-      className: i,
-      "aria-label": "Steps",
-      children: t.map((c, r) => {
-        const l = u(r, o), f = g(r, s), h = l === "Active" || l === "Complete", C = s - r, v = [
-          e.item,
-          e[`type${f}`],
-          e[`state${l}`]
-        ].join(" "), p = h ? e.textLight : e.textDark;
-        return /* @__PURE__ */ d(
-          "div",
+      role: "navigation",
+      "aria-label": "Pagination",
+      className: [r.pagination, p].filter(Boolean).join(" "),
+      children: [
+        u && /* @__PURE__ */ n(
+          "button",
           {
-            className: v,
-            style: { zIndex: C },
-            role: "listitem",
-            "aria-current": l === "Active" ? "step" : void 0,
-            "aria-label": `Step ${r + 1} of ${s}: ${c.label}${l === "Active" ? " (current)" : l === "Complete" ? " (completed)" : ""}`,
-            children: [
-              /* @__PURE__ */ n("span", { className: [e.label, p].join(" "), children: c.label }),
-              l === "Complete" ? /* @__PURE__ */ n("span", { className: [e.checkIcon, p].join(" "), children: /* @__PURE__ */ n(j, {}) }) : /* @__PURE__ */ n("span", { className: [e.num, p].join(" "), children: String(r + 1).padStart(2, "0") })
-            ]
-          },
-          r
-        );
-      })
+            className: l(r.control),
+            onClick: () => c(1),
+            disabled: o === 1,
+            "aria-label": "First page",
+            type: "button",
+            children: /* @__PURE__ */ n(x, { s })
+          }
+        ),
+        d && /* @__PURE__ */ n(
+          "button",
+          {
+            className: l(r.control),
+            onClick: () => c(o - 1),
+            disabled: o === 1,
+            "aria-label": "Previous page",
+            type: "button",
+            children: /* @__PURE__ */ n(m, { s })
+          }
+        ),
+        b.map(
+          (e, k) => e === "…" ? /* @__PURE__ */ n(
+            "span",
+            {
+              className: l(r.dots),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ n(v, { s })
+            },
+            `dots-${k}`
+          ) : /* @__PURE__ */ n(
+            "button",
+            {
+              className: l(e === o ? r.active : r.inactive),
+              onClick: () => c(e),
+              "aria-label": `Page ${e}`,
+              "aria-current": e === o ? "page" : void 0,
+              type: "button",
+              children: e
+            },
+            e
+          )
+        ),
+        d && /* @__PURE__ */ n(
+          "button",
+          {
+            className: l(r.control),
+            onClick: () => c(o + 1),
+            disabled: o === t,
+            "aria-label": "Next page",
+            type: "button",
+            children: /* @__PURE__ */ n(y, { s })
+          }
+        ),
+        u && /* @__PURE__ */ n(
+          "button",
+          {
+            className: l(r.control),
+            onClick: () => c(t),
+            disabled: o === t,
+            "aria-label": "Last page",
+            type: "button",
+            children: /* @__PURE__ */ n(C, { s })
+          }
+        )
+      ]
     }
   );
 }
 export {
-  k as Steps
+  w as Pagination
 };
 //# sourceMappingURL=index.esm12.js.map

package/dist/index.esm12.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm12.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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"}
+{"version":3,"file":"index.esm12.js","sources":["../components/Pagination/Pagination.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Pagination.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type PaginationSize = 'xs' | 'md' | 'lg';\n\nexport interface PaginationProps {\n  sizes?: PaginationSize;\n  currentPage?: number;\n  totalPages?: number;\n  /** Show previous / next chevron buttons */\n  withControls?: boolean;\n  /** Show first / last double-chevron buttons */\n  withEdges?: boolean;\n  onChange?: (page: number) => void;\n  className?: string;\n}\n\n// ─── Icon size lookup (xs=12, md=20, lg=24 — from Figma) ─────────────────────\n\nconst ICON_SIZE: Record<PaginationSize, number> = { xs: 12, md: 20, lg: 24 };\n\n// ─── SVG icons (inline, no external dependency) ──────────────────────────────\n\nconst IconDots = ({ s }: { s: number }) => (\n  <svg width={s} height={s} viewBox=\"0 0 12 12\" fill=\"currentColor\" aria-hidden=\"true\">\n    {/* System/Dots — 3 horizontal dots */}\n    <circle cx=\"2\"  cy=\"6\" r=\"1.25\" />\n    <circle cx=\"6\"  cy=\"6\" r=\"1.25\" />\n    <circle cx=\"10\" cy=\"6\" r=\"1.25\" />\n  </svg>\n);\n\nconst IconChevronLeft = ({ s }: { s: number }) => (\n  // Arrows/Chevron Left — single chevron «\n  <svg width={s} height={s} viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\"\n    strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polyline points=\"7.5,2 4,6 7.5,10\" />\n  </svg>\n);\n\nconst IconChevronRight = ({ s }: { s: number }) => (\n  // Arrows/Chevron Right — single chevron »\n  <svg width={s} height={s} viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\"\n    strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polyline points=\"4.5,2 8,6 4.5,10\" />\n  </svg>\n);\n\nconst IconChevronsLeft = ({ s }: { s: number }) => (\n  // Arrows/Chevrons Left — double chevron «\n  <svg width={s} height={s} viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\"\n    strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polyline points=\"6.5,2 3,6 6.5,10\" />\n    <polyline points=\"9.5,2 6,6 9.5,10\" />\n  </svg>\n);\n\nconst IconChevronsRight = ({ s }: { s: number }) => (\n  // Arrows/Chevrons Right — double chevron »\n  <svg width={s} height={s} viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\"\n    strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polyline points=\"2.5,2 6,6 2.5,10\" />\n    <polyline points=\"5.5,2 9,6 5.5,10\" />\n  </svg>\n);\n\n// ─── Page range algorithm ─────────────────────────────────────────────────────\n// Produces an array like: [1, 2, 3, 4, 5, '…', 10]\n// or: [1, '…', 4, 5, 6, '…', 10]\n// Matches the Figma design: first 5 visible, dots, last page\n\ntype PageItem = number | '…';\n\nfunction buildRange(current: number, total: number): PageItem[] {\n  if (total <= 7) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  // Near the start — show first 5, dots, last\n  if (current <= 4) {\n    return [1, 2, 3, 4, 5, '…', total];\n  }\n\n  // Near the end — show first, dots, last 5\n  if (current >= total - 3) {\n    return [1, '…', total - 4, total - 3, total - 2, total - 1, total];\n  }\n\n  // Middle — first, dots, (current-1), current, (current+1), dots, last\n  return [1, '…', current - 1, current, current + 1, '…', total];\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function Pagination({\n  sizes = 'xs',\n  currentPage = 1,\n  totalPages = 10,\n  withControls = false,\n  withEdges = false,\n  onChange,\n  className,\n}: PaginationProps) {\n  const iconSize = ICON_SIZE[sizes];\n  const pages = buildRange(currentPage, totalPages);\n\n  const go = (page: number) => {\n    if (page < 1 || page > totalPages || page === currentPage) return;\n    onChange?.(page);\n  };\n\n  const itemClass = (extra: string) =>\n    [styles.item, styles[sizes], extra].filter(Boolean).join(' ');\n\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"Pagination\"\n      className={[styles.pagination, className].filter(Boolean).join(' ')}\n    >\n      {/* First page button («) */}\n      {withEdges && (\n        <button\n          className={itemClass(styles.control)}\n          onClick={() => go(1)}\n          disabled={currentPage === 1}\n          aria-label=\"First page\"\n          type=\"button\"\n        >\n          <IconChevronsLeft s={iconSize} />\n        </button>\n      )}\n\n      {/* Previous button (‹) */}\n      {withControls && (\n        <button\n          className={itemClass(styles.control)}\n          onClick={() => go(currentPage - 1)}\n          disabled={currentPage === 1}\n          aria-label=\"Previous page\"\n          type=\"button\"\n        >\n          <IconChevronLeft s={iconSize} />\n        </button>\n      )}\n\n      {/* Page numbers + dots */}\n      {pages.map((page, i) =>\n        page === '…' ? (\n          <span\n            key={`dots-${i}`}\n            className={itemClass(styles.dots)}\n            aria-hidden=\"true\"\n          >\n            <IconDots s={iconSize} />\n          </span>\n        ) : (\n          <button\n            key={page}\n            className={itemClass(page === currentPage ? styles.active : styles.inactive)}\n            onClick={() => go(page)}\n            aria-label={`Page ${page}`}\n            aria-current={page === currentPage ? 'page' : undefined}\n            type=\"button\"\n          >\n            {page}\n          </button>\n        )\n      )}\n\n      {/* Next button (›) */}\n      {withControls && (\n        <button\n          className={itemClass(styles.control)}\n          onClick={() => go(currentPage + 1)}\n          disabled={currentPage === totalPages}\n          aria-label=\"Next page\"\n          type=\"button\"\n        >\n          <IconChevronRight s={iconSize} />\n        </button>\n      )}\n\n      {/* Last page button (») */}\n      {withEdges && (\n        <button\n          className={itemClass(styles.control)}\n          onClick={() => go(totalPages)}\n          disabled={currentPage === totalPages}\n          aria-label=\"Last page\"\n          type=\"button\"\n        >\n          <IconChevronsRight s={iconSize} />\n        </button>\n      )}\n    </nav>\n  );\n}\n"],"names":["ICON_SIZE","IconDots","s","jsx","IconChevronLeft","IconChevronRight","IconChevronsLeft","jsxs","IconChevronsRight","buildRange","current","total","_","i","Pagination","sizes","currentPage","totalPages","withControls","withEdges","onChange","className","iconSize","pages","go","page","itemClass","extra","styles"],"mappings":"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"}

package/dist/index.esm13.js

@@ -1,222 +1,67 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useRef as L, useState as w } from "react";
-import r from "./index.esm16.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,
-              "%"
-            ] })
-          ] })
-        ] })
-      ]
-    }
-  );
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useId as N } from "react";
+import e from "./index.esm27.js";
+function B() {
+  return /* @__PURE__ */ r("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M5 7.5l5 5 5-5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function $({
-  size: t = "LG",
-  type: n = "multiple",
-  status: s = "default",
-  files: o = [],
-  onDrop: l,
-  onRemove: h,
-  onEdit: c,
-  onPreview: u,
-  accept: f,
+function g({
+  options: u,
+  value: d,
+  placeholder: m = "Selecione",
+  label: t,
+  message: o,
+  state: c = "Default",
+  onChange: s,
+  id: 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",
+  const p = N(), i = f ?? p, h = c === "Disabled", a = c === "Error", b = [
+    e.field,
+    a ? e.error : "",
+    v
+  ].filter(Boolean).join(" "), j = [
+    e.select,
+    d ? "" : e.placeholder
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { className: e.wrapper, children: [
+    t && /* @__PURE__ */ r(
+      "label",
       {
-        ref: m,
-        type: "file",
-        multiple: n === "multiple",
-        accept: f,
-        onChange: B,
-        style: { display: "none" },
-        "aria-hidden": "true",
-        tabIndex: -1
+        htmlFor: i,
+        className: [e.label, h ? e.labelDisabled : ""].filter(Boolean).join(" "),
+        children: t
       }
     ),
-    !z && /* @__PURE__ */ a(
-      "div",
+    /* @__PURE__ */ n("div", { className: b, children: [
+      /* @__PURE__ */ n(
+        "select",
+        {
+          id: i,
+          className: j,
+          value: d ?? "",
+          disabled: h,
+          "aria-invalid": a,
+          "aria-describedby": o ? `${i}-message` : void 0,
+          onChange: (l) => s == null ? void 0 : s(l.target.value),
+          children: [
+            /* @__PURE__ */ r("option", { value: "", disabled: !0, hidden: !0, children: m }),
+            u.map((l) => /* @__PURE__ */ r("option", { value: l.value, children: l.label }, l.value))
+          ]
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: e.chevron, children: /* @__PURE__ */ r(B, {}) })
+    ] }),
+    o && /* @__PURE__ */ r(
+      "p",
       {
-        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)" })
-          ] })
-        ]
+        id: `${i}-message`,
+        className: [e.message, a ? e.messageError : ""].filter(Boolean).join(" "),
+        children: o
       }
-    ),
-    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
+  g as Select
 };
 //# sourceMappingURL=index.esm13.js.map