@treeal/ds 0.1.9 → 0.2.1

package/dist/index.esm13.js

@@ -1,67 +1,177 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useId as N } from "react";
-import e from "./index.esm21.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" }) });
+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: 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: "6.5,2 3,6 6.5,10" }),
+        /* @__PURE__ */ n("polyline", { points: "9.5,2 6,6 9.5,10" })
+      ]
+    }
+  )
+), 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 g({
-  options: u,
-  value: d,
-  placeholder: m = "Selecione",
-  label: t,
-  message: o,
-  state: c = "Default",
-  onChange: s,
-  id: f,
-  className: v
+function w({
+  sizes: i = "xs",
+  currentPage: o = 1,
+  totalPages: t = 10,
+  withControls: d = !1,
+  withEdges: u = !1,
+  onChange: h,
+  className: p
 }) {
-  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",
-      {
-        htmlFor: i,
-        className: [e.label, h ? e.labelDisabled : ""].filter(Boolean).join(" "),
-        children: t
-      }
-    ),
-    /* @__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",
-      {
-        id: `${i}-message`,
-        className: [e.message, a ? e.messageError : ""].filter(Boolean).join(" "),
-        children: o
-      }
-    )
-  ] });
+  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",
+    {
+      role: "navigation",
+      "aria-label": "Pagination",
+      className: [r.pagination, p].filter(Boolean).join(" "),
+      children: [
+        u && /* @__PURE__ */ n(
+          "button",
+          {
+            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 {
-  g as Select
+  w as Pagination
 };
 //# sourceMappingURL=index.esm13.js.map

package/dist/index.esm13.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm13.js","sources":["../components/Select/Select.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styles from './Select.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport type SelectState = 'Default' | 'Disabled' | 'Error';\n\nexport interface SelectProps {\n  /** Options to render */\n  options: SelectOption[];\n  /** Currently selected value */\n  value?: string;\n  /** Placeholder shown when no value is selected */\n  placeholder?: string;\n  /** Label rendered above the field */\n  label?: string;\n  /** Helper or error message rendered below the field */\n  message?: string;\n  /** Visual/interaction state */\n  state?: SelectState;\n  onChange?: (value: string) => void;\n  id?: string;\n  className?: string;\n}\n\n// ─── Chevron icon ─────────────────────────────────────────────────────────────\n\nfunction IconChevron() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M5 7.5l5 5 5-5\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function Select({\n  options,\n  value,\n  placeholder = 'Selecione',\n  label,\n  message,\n  state = 'Default',\n  onChange,\n  id: idProp,\n  className,\n}: SelectProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n\n  const isDisabled = state === 'Disabled';\n  const isError = state === 'Error';\n\n  const fieldClass = [\n    styles.field,\n    isError ? styles.error : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const selectClass = [\n    styles.select,\n    !value ? styles.placeholder : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={styles.wrapper}>\n      {label && (\n        <label\n          htmlFor={id}\n          className={[styles.label, isDisabled ? styles.labelDisabled : '']\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {label}\n        </label>\n      )}\n\n      <div className={fieldClass}>\n        <select\n          id={id}\n          className={selectClass}\n          value={value ?? ''}\n          disabled={isDisabled}\n          aria-invalid={isError}\n          aria-describedby={message ? `${id}-message` : undefined}\n          onChange={(e) => onChange?.(e.target.value)}\n        >\n          <option value=\"\" disabled hidden>\n            {placeholder}\n          </option>\n          {options.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n        <span className={styles.chevron}>\n          <IconChevron />\n        </span>\n      </div>\n\n      {message && (\n        <p\n          id={`${id}-message`}\n          className={[styles.message, isError ? styles.messageError : '']\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"names":["IconChevron","jsx","Select","options","value","placeholder","label","message","state","onChange","idProp","className","generatedId","useId","id","isDisabled","isError","fieldClass","styles","selectClass","jsxs","e","opt"],"mappings":";;;AAgCA,SAASA,IAAc;AACrB,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,4BAAC,QAAA,EAAK,GAAE,kBAAiB,QAAO,gBAAe,aAAY,QAAO,eAAc,SAAQ,gBAAe,QAAA,CAAQ,EAAA,CACjH;AAEJ;AAIO,SAASC,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,WAAAC;AACF,GAAgB;AACd,QAAMC,IAAcC,EAAA,GACdC,IAAKJ,KAAUE,GAEfG,IAAaP,MAAU,YACvBQ,IAAUR,MAAU,SAEpBS,IAAa;AAAA,IACjBC,EAAO;AAAA,IACPF,IAAUE,EAAO,QAAQ;AAAA,IACzBP;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELQ,IAAc;AAAA,IAClBD,EAAO;AAAA,IACNd,IAA6B,KAArBc,EAAO;AAAA,EAAc,EAE7B,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,SACpB,UAAA;AAAA,IAAAZ,KACC,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASa;AAAA,QACT,WAAW,CAACI,EAAO,OAAOH,IAAaG,EAAO,gBAAgB,EAAE,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIL,gBAAAc,EAAC,OAAA,EAAI,WAAWH,GACd,UAAA;AAAA,MAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAN;AAAA,UACA,WAAWK;AAAA,UACX,OAAOf,KAAS;AAAA,UAChB,UAAUW;AAAA,UACV,gBAAcC;AAAA,UACd,oBAAkBT,IAAU,GAAGO,CAAE,aAAa;AAAA,UAC9C,UAAU,CAACO,MAAMZ,KAAA,gBAAAA,EAAWY,EAAE,OAAO;AAAA,UAErC,UAAA;AAAA,YAAA,gBAAApB,EAAC,YAAO,OAAM,IAAG,UAAQ,IAAC,QAAM,IAC7B,UAAAI,EAAA,CACH;AAAA,YACCF,EAAQ,IAAI,CAACmB,MACZ,gBAAArB,EAAC,UAAA,EAAuB,OAAOqB,EAAI,OAChC,UAAAA,EAAI,MAAA,GADMA,EAAI,KAEjB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEF,QAAA,EAAK,WAAWJ,EAAO,SACtB,UAAA,gBAAAjB,EAACD,KAAY,EAAA,CACf;AAAA,IAAA,GACF;AAAA,IAECO,KACC,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAGa,CAAE;AAAA,QACT,WAAW,CAACI,EAAO,SAASF,IAAUE,EAAO,eAAe,EAAE,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAX;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}
+{"version":3,"file":"index.esm13.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.esm14.js

@@ -1,93 +1,67 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import S from "react";
-import e from "./index.esm27.js";
-function u(t, o) {
-  return t < o ? "Complete" : t === o ? "Active" : "Default";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useId as N } from "react";
+import e from "./index.esm29.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 g(t, o) {
-  return t === 0 ? "Start" : t === o - 1 ? "End" : "Step";
-}
-function j() {
-  return /* @__PURE__ */ d(
-    "svg",
-    {
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2.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" })
-      ]
-    }
-  );
-}
-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: [
+function g({
+  options: u,
+  value: d,
+  placeholder: m = "Selecione",
+  label: t,
+  message: o,
+  state: c = "Default",
+  onChange: s,
+  id: f,
+  className: v
+}) {
+  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",
+      {
+        htmlFor: i,
+        className: [e.label, h ? e.labelDisabled : ""].filter(Boolean).join(" "),
+        children: t
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: b, children: [
       /* @__PURE__ */ n(
-        "div",
+        "select",
         {
-          role: "listitem",
-          className: c,
-          "aria-label": `Step ${a + 1}: ${m.label}${i === "Active" ? " (current)" : i === "Complete" ? " (completed)" : ""}`,
-          "aria-current": i === "Active" ? "step" : void 0
+          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))
+          ]
         }
       ),
-      !s && /* @__PURE__ */ n("div", { className: r, "aria-hidden": "true" })
-    ] }, a);
-  }) });
-}
-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(
-    "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",
-          {
-            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
-        );
-      })
-    }
-  );
+      /* @__PURE__ */ r("span", { className: e.chevron, children: /* @__PURE__ */ r(B, {}) })
+    ] }),
+    o && /* @__PURE__ */ r(
+      "p",
+      {
+        id: `${i}-message`,
+        className: [e.message, a ? e.messageError : ""].filter(Boolean).join(" "),
+        children: o
+      }
+    )
+  ] });
 }
 export {
-  k as Steps
+  g as Select
 };
 //# sourceMappingURL=index.esm14.js.map

package/dist/index.esm14.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm14.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.esm14.js","sources":["../components/Select/Select.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styles from './Select.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\nexport type SelectState = 'Default' | 'Disabled' | 'Error';\n\nexport interface SelectProps {\n  /** Options to render */\n  options: SelectOption[];\n  /** Currently selected value */\n  value?: string;\n  /** Placeholder shown when no value is selected */\n  placeholder?: string;\n  /** Label rendered above the field */\n  label?: string;\n  /** Helper or error message rendered below the field */\n  message?: string;\n  /** Visual/interaction state */\n  state?: SelectState;\n  onChange?: (value: string) => void;\n  id?: string;\n  className?: string;\n}\n\n// ─── Chevron icon ─────────────────────────────────────────────────────────────\n\nfunction IconChevron() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M5 7.5l5 5 5-5\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport function Select({\n  options,\n  value,\n  placeholder = 'Selecione',\n  label,\n  message,\n  state = 'Default',\n  onChange,\n  id: idProp,\n  className,\n}: SelectProps) {\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n\n  const isDisabled = state === 'Disabled';\n  const isError = state === 'Error';\n\n  const fieldClass = [\n    styles.field,\n    isError ? styles.error : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const selectClass = [\n    styles.select,\n    !value ? styles.placeholder : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={styles.wrapper}>\n      {label && (\n        <label\n          htmlFor={id}\n          className={[styles.label, isDisabled ? styles.labelDisabled : '']\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {label}\n        </label>\n      )}\n\n      <div className={fieldClass}>\n        <select\n          id={id}\n          className={selectClass}\n          value={value ?? ''}\n          disabled={isDisabled}\n          aria-invalid={isError}\n          aria-describedby={message ? `${id}-message` : undefined}\n          onChange={(e) => onChange?.(e.target.value)}\n        >\n          <option value=\"\" disabled hidden>\n            {placeholder}\n          </option>\n          {options.map((opt) => (\n            <option key={opt.value} value={opt.value}>\n              {opt.label}\n            </option>\n          ))}\n        </select>\n        <span className={styles.chevron}>\n          <IconChevron />\n        </span>\n      </div>\n\n      {message && (\n        <p\n          id={`${id}-message`}\n          className={[styles.message, isError ? styles.messageError : '']\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"names":["IconChevron","jsx","Select","options","value","placeholder","label","message","state","onChange","idProp","className","generatedId","useId","id","isDisabled","isError","fieldClass","styles","selectClass","jsxs","e","opt"],"mappings":";;;AAgCA,SAASA,IAAc;AACrB,SACE,gBAAAC,EAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,4BAAC,QAAA,EAAK,GAAE,kBAAiB,QAAO,gBAAe,aAAY,QAAO,eAAc,SAAQ,gBAAe,QAAA,CAAQ,EAAA,CACjH;AAEJ;AAIO,SAASC,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,WAAAC;AACF,GAAgB;AACd,QAAMC,IAAcC,EAAA,GACdC,IAAKJ,KAAUE,GAEfG,IAAaP,MAAU,YACvBQ,IAAUR,MAAU,SAEpBS,IAAa;AAAA,IACjBC,EAAO;AAAA,IACPF,IAAUE,EAAO,QAAQ;AAAA,IACzBP;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELQ,IAAc;AAAA,IAClBD,EAAO;AAAA,IACNd,IAA6B,KAArBc,EAAO;AAAA,EAAc,EAE7B,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAO,SACpB,UAAA;AAAA,IAAAZ,KACC,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASa;AAAA,QACT,WAAW,CAACI,EAAO,OAAOH,IAAaG,EAAO,gBAAgB,EAAE,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,IAIL,gBAAAc,EAAC,OAAA,EAAI,WAAWH,GACd,UAAA;AAAA,MAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAN;AAAA,UACA,WAAWK;AAAA,UACX,OAAOf,KAAS;AAAA,UAChB,UAAUW;AAAA,UACV,gBAAcC;AAAA,UACd,oBAAkBT,IAAU,GAAGO,CAAE,aAAa;AAAA,UAC9C,UAAU,CAACO,MAAMZ,KAAA,gBAAAA,EAAWY,EAAE,OAAO;AAAA,UAErC,UAAA;AAAA,YAAA,gBAAApB,EAAC,YAAO,OAAM,IAAG,UAAQ,IAAC,QAAM,IAC7B,UAAAI,EAAA,CACH;AAAA,YACCF,EAAQ,IAAI,CAACmB,MACZ,gBAAArB,EAAC,UAAA,EAAuB,OAAOqB,EAAI,OAChC,UAAAA,EAAI,MAAA,GADMA,EAAI,KAEjB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEF,QAAA,EAAK,WAAWJ,EAAO,SACtB,UAAA,gBAAAjB,EAACD,KAAY,EAAA,CACf;AAAA,IAAA,GACF;AAAA,IAECO,KACC,gBAAAN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAGa,CAAE;AAAA,QACT,WAAW,CAACI,EAAO,SAASF,IAAUE,EAAO,eAAe,EAAE,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAX;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/index.esm15.js

@@ -1,38 +1,93 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import s from "./index.esm22.js";
-function p({ items: o, activeId: n, onChange: r, className: d }) {
-  return /* @__PURE__ */ e(
-    "div",
+import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import S from "react";
+import e from "./index.esm27.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(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.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" })
+      ]
+    }
+  );
+}
+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);
+  }) });
+}
+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(
+    "nav",
     {
-      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",
+      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: "tab",
-            "aria-selected": l,
-            "aria-disabled": i,
-            disabled: i,
-            className: t,
-            onClick: () => !i && r(a.id),
+            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: [
-              a.icon && /* @__PURE__ */ e("span", { className: s.icon, "aria-hidden": "true", children: a.icon }),
-              a.label
+              /* @__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") })
             ]
           },
-          a.id
+          r
         );
       })
     }
   );
 }
 export {
-  p as Tab
+  k as Steps
 };
 //# sourceMappingURL=index.esm15.js.map