@treeal/ds 0.1.0

package/dist/index.esm10.js

@@ -0,0 +1,238 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import e from "./index.esm23.js";
+function m() {
+  return /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M6 12l4-4-4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function L() {
+  return /* @__PURE__ */ a("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M13 15l-5-5 5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function j() {
+  return /* @__PURE__ */ a("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ a("path", { d: "M7 15l5-5-5-5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function w() {
+  return /* @__PURE__ */ l("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ a("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+    /* @__PURE__ */ a("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+  ] });
+}
+function N() {
+  return /* @__PURE__ */ l("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ a("rect", { width: "32", height: "32", rx: "6", fill: "#0F6C13" }),
+    /* @__PURE__ */ a("path", { d: "M8 24 L16 8 L24 24", stroke: "#E7DA10", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ a("path", { d: "M11 19h10", stroke: "#E7DA10", strokeWidth: "2", strokeLinecap: "round" })
+  ] });
+}
+function M({
+  item: i,
+  isActive: c,
+  onClick: t
+}) {
+  const s = [
+    e.item,
+    e.itemOpen,
+    c ? e.itemOpenActive : ""
+  ].filter(Boolean).join(" "), h = [
+    e.itemLabel,
+    c ? e.itemLabelActive : e.itemLabelDefault
+  ].join(" ");
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      className: s,
+      onClick: t,
+      "aria-current": c ? "page" : void 0,
+      children: [
+        /* @__PURE__ */ a("span", { className: [e.itemIcon, e.itemIconDark].join(" "), children: i.icon }),
+        /* @__PURE__ */ a("span", { className: h, children: i.label })
+      ]
+    }
+  );
+}
+function B({
+  item: i,
+  isActive: c,
+  onClick: t
+}) {
+  const s = [
+    e.item,
+    e.itemClosed,
+    c ? e.itemClosedActive : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: s,
+      onClick: t,
+      "aria-label": i.label,
+      "aria-current": c ? "page" : void 0,
+      title: i.label,
+      children: /* @__PURE__ */ a("span", { className: [e.itemIcon, e.itemIconDark].join(" "), children: i.icon })
+    }
+  );
+}
+function C({
+  item: i,
+  isActive: c,
+  onClick: t
+}) {
+  const s = [
+    e.item,
+    e.itemMobile,
+    c ? e.itemMobileActive : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      className: s,
+      onClick: t,
+      "aria-current": c ? "page" : void 0,
+      children: [
+        /* @__PURE__ */ a("span", { className: [e.itemIcon, e.itemIconLight].join(" "), children: i.icon }),
+        /* @__PURE__ */ a("span", { className: [e.itemLabel, e.itemLabelMobile].join(" "), children: i.label }),
+        /* @__PURE__ */ a("span", { className: e.chevron, children: /* @__PURE__ */ a(m, {}) })
+      ]
+    }
+  );
+}
+function A({
+  type: i,
+  sections: c,
+  activeId: t,
+  onItemClick: s,
+  onCollapseToggle: h,
+  onBellClick: k,
+  mobileTitle: f = "Menu",
+  mobileFooter: n,
+  logo: p,
+  logoIcon: b,
+  className: g
+}) {
+  const u = b ?? /* @__PURE__ */ a(N, {}), v = [
+    e.nav,
+    i === "open" ? e.navOpen : "",
+    i === "closed" ? e.navClosed : "",
+    i === "mobile" ? e.navMobile : "",
+    g
+  ].filter(Boolean).join(" ");
+  return i === "open" ? /* @__PURE__ */ l("nav", { className: v, "aria-label": "Main navigation", children: [
+    /* @__PURE__ */ l("div", { className: [e.header, e.headerOpen].join(" "), children: [
+      /* @__PURE__ */ a("div", { className: e.logoIcon, children: u }),
+      p && /* @__PURE__ */ a("div", { className: e.logoFull, children: p })
+    ] }),
+    /* @__PURE__ */ a("div", { className: [e.links, e.linksOpen].join(" "), children: c.map((o, d) => /* @__PURE__ */ l("div", { className: e.section, children: [
+      o.title && /* @__PURE__ */ a("p", { className: e.sectionTitle, children: o.title }),
+      /* @__PURE__ */ a("div", { className: e.sectionItems, children: o.items.map((r) => /* @__PURE__ */ a(
+        M,
+        {
+          item: r,
+          isActive: r.id === t,
+          onClick: () => s == null ? void 0 : s(r.id)
+        },
+        r.id
+      )) })
+    ] }, d)) }),
+    /* @__PURE__ */ a("div", { className: e.footer, children: /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: e.collapseBtn,
+        onClick: h,
+        children: [
+          /* @__PURE__ */ a("span", { className: e.collapseBtnIcon, children: /* @__PURE__ */ a(L, {}) }),
+          "Recolher menu"
+        ]
+      }
+    ) })
+  ] }) : i === "closed" ? /* @__PURE__ */ l("nav", { className: v, "aria-label": "Main navigation", children: [
+    /* @__PURE__ */ a("div", { className: [e.header, e.headerClosed].join(" "), children: /* @__PURE__ */ a("div", { className: e.logoIcon, children: u }) }),
+    /* @__PURE__ */ a("div", { className: [e.links, e.linksClosed].join(" "), children: c.map((o, d) => /* @__PURE__ */ a("div", { className: e.section, children: /* @__PURE__ */ a("div", { className: e.sectionItems, children: o.items.map((r) => /* @__PURE__ */ a(
+      B,
+      {
+        item: r,
+        isActive: r.id === t,
+        onClick: () => s == null ? void 0 : s(r.id)
+      },
+      r.id
+    )) }) }, d)) }),
+    /* @__PURE__ */ a("div", { className: e.footer, children: /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: [e.collapseBtn, e.collapseBtnClosed].join(" "),
+        onClick: h,
+        "aria-label": "Expand menu",
+        title: "Expandir menu",
+        children: /* @__PURE__ */ a("span", { className: e.collapseBtnIcon, children: /* @__PURE__ */ a(j, {}) })
+      }
+    ) })
+  ] }) : /* @__PURE__ */ l("nav", { className: v, "aria-label": "Main navigation", children: [
+    /* @__PURE__ */ l("div", { className: [e.header, e.headerMobile].join(" "), children: [
+      /* @__PURE__ */ a("div", { className: e.logoIcon, children: u }),
+      /* @__PURE__ */ a("h2", { className: e.headerTitle, children: f }),
+      /* @__PURE__ */ a("div", { className: e.headerActions, children: /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: e.bellBtn,
+          onClick: k,
+          "aria-label": "Notifications",
+          children: /* @__PURE__ */ a(w, {})
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ a("div", { className: [e.links, e.linksMobile].join(" "), children: c.map((o, d) => /* @__PURE__ */ a("div", { className: e.section, children: /* @__PURE__ */ a("div", { className: e.sectionItems, children: o.items.map((r) => /* @__PURE__ */ a(
+      C,
+      {
+        item: r,
+        isActive: r.id === t,
+        onClick: () => s == null ? void 0 : s(r.id)
+      },
+      r.id
+    )) }) }, d)) }),
+    n && /* @__PURE__ */ l("div", { className: e.footerMobile, children: [
+      n.ctaLabel && /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: e.ctaBtn,
+          onClick: n.onCtaClick,
+          children: n.ctaLabel
+        }
+      ),
+      n.workspaceName && /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          className: e.workspace,
+          onClick: n.onWorkspaceClick,
+          children: [
+            /* @__PURE__ */ a("div", { className: e.workspaceIcon, children: n.workspaceIcon ?? /* @__PURE__ */ a(N, {}) }),
+            /* @__PURE__ */ a("span", { className: e.workspaceLabel, children: n.workspaceName }),
+            /* @__PURE__ */ a("span", { style: { color: "#9490AC", display: "flex" }, children: /* @__PURE__ */ a(m, {}) })
+          ]
+        }
+      ),
+      (n.userName || n.userInitials) && /* @__PURE__ */ l("div", { className: e.avatarRow, children: [
+        /* @__PURE__ */ a("div", { className: e.avatar, children: n.userAvatarUrl ? /* @__PURE__ */ a(
+          "img",
+          {
+            src: n.userAvatarUrl,
+            alt: n.userName ?? "",
+            style: { width: "100%", height: "100%", objectFit: "cover" }
+          }
+        ) : /* @__PURE__ */ a("span", { className: e.avatarInitials, children: n.userInitials ?? "?" }) }),
+        /* @__PURE__ */ l("div", { className: e.avatarInfo, children: [
+          n.userName && /* @__PURE__ */ a("span", { className: e.avatarName, children: n.userName }),
+          n.userRole && /* @__PURE__ */ a("span", { className: e.avatarRole, children: n.userRole })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  A as Nav
+};
+//# sourceMappingURL=index.esm10.js.map

package/dist/index.esm10.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm10.js","sources":["../components/Nav/Nav.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Nav.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface NavItem {\n  id: string;\n  label: string;\n  icon: React.ReactNode;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface NavSection {\n  title?: string;\n  items: NavItem[];\n}\n\nexport interface NavMobileFooter {\n  ctaLabel?: string;\n  onCtaClick?: () => void;\n  workspaceName?: string;\n  workspaceIcon?: React.ReactNode;\n  onWorkspaceClick?: () => void;\n  userName?: string;\n  userRole?: string;\n  userAvatarUrl?: string;\n  userInitials?: string;\n}\n\nexport interface NavProps {\n  /** Visual type of the nav */\n  type: 'open' | 'closed' | 'mobile';\n  /** Navigation sections with items */\n  sections: NavSection[];\n  /** Currently active item id */\n  activeId?: string;\n  /** Called when an item is clicked (receives item.id) */\n  onItemClick?: (id: string) => void;\n  /** Called when collapse/expand button is clicked (Open/Closed only) */\n  onCollapseToggle?: () => void;\n  /** Bell icon click handler (Mobile only) */\n  onBellClick?: () => void;\n  /** Mobile header title (defaults to \"Menu\") */\n  mobileTitle?: string;\n  /** Mobile footer data */\n  mobileFooter?: NavMobileFooter;\n  /** Logo for the Open type (full logo) */\n  logo?: React.ReactNode;\n  /** Small logo icon shown in Closed + Mobile headers */\n  logoIcon?: React.ReactNode;\n  className?: string;\n}\n\n// ─── Inline SVG icons ─────────────────────────────────────────────────────────\n\nfunction IconChevronRight() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M6 12l4-4-4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction IconChevronLeft() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M13 15l-5-5 5-5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction IconChevronRight20() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M7 15l5-5-5-5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction IconBell() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\" />\n      <path d=\"M13.73 21a2 2 0 0 1-3.46 0\" />\n    </svg>\n  );\n}\n\nfunction DefaultLogoIcon() {\n  return (\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" aria-hidden=\"true\">\n      <rect width=\"32\" height=\"32\" rx=\"6\" fill=\"#0F6C13\" />\n      <path d=\"M8 24 L16 8 L24 24\" stroke=\"#E7DA10\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <path d=\"M11 19h10\" stroke=\"#E7DA10\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\nfunction NavItemOpen({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: NavItem;\n  isActive: boolean;\n  onClick: () => void;\n}) {\n  const itemClass = [\n    styles.item,\n    styles.itemOpen,\n    isActive ? styles.itemOpenActive : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const labelClass = [\n    styles.itemLabel,\n    isActive ? styles.itemLabelActive : styles.itemLabelDefault,\n  ].join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={itemClass}\n      onClick={onClick}\n      aria-current={isActive ? 'page' : undefined}\n    >\n      <span className={[styles.itemIcon, styles.itemIconDark].join(' ')}>\n        {item.icon}\n      </span>\n      <span className={labelClass}>{item.label}</span>\n    </button>\n  );\n}\n\nfunction NavItemClosed({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: NavItem;\n  isActive: boolean;\n  onClick: () => void;\n}) {\n  const itemClass = [\n    styles.item,\n    styles.itemClosed,\n    isActive ? styles.itemClosedActive : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={itemClass}\n      onClick={onClick}\n      aria-label={item.label}\n      aria-current={isActive ? 'page' : undefined}\n      title={item.label}\n    >\n      <span className={[styles.itemIcon, styles.itemIconDark].join(' ')}>\n        {item.icon}\n      </span>\n    </button>\n  );\n}\n\nfunction NavItemMobile({\n  item,\n  isActive,\n  onClick,\n}: {\n  item: NavItem;\n  isActive: boolean;\n  onClick: () => void;\n}) {\n  const itemClass = [\n    styles.item,\n    styles.itemMobile,\n    isActive ? styles.itemMobileActive : '',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button\n      type=\"button\"\n      className={itemClass}\n      onClick={onClick}\n      aria-current={isActive ? 'page' : undefined}\n    >\n      <span className={[styles.itemIcon, styles.itemIconLight].join(' ')}>\n        {item.icon}\n      </span>\n      <span className={[styles.itemLabel, styles.itemLabelMobile].join(' ')}>\n        {item.label}\n      </span>\n      <span className={styles.chevron}>\n        <IconChevronRight />\n      </span>\n    </button>\n  );\n}\n\n// ─── Main component ───────────────────────────────────────────────────────────\n\nexport function Nav({\n  type,\n  sections,\n  activeId,\n  onItemClick,\n  onCollapseToggle,\n  onBellClick,\n  mobileTitle = 'Menu',\n  mobileFooter,\n  logo,\n  logoIcon,\n  className,\n}: NavProps) {\n  const resolvedLogoIcon = logoIcon ?? <DefaultLogoIcon />;\n\n  const navClass = [\n    styles.nav,\n    type === 'open' ? styles.navOpen : '',\n    type === 'closed' ? styles.navClosed : '',\n    type === 'mobile' ? styles.navMobile : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // ── Open ──────────────────────────────────────────────────────────────────\n  if (type === 'open') {\n    return (\n      <nav className={navClass} aria-label=\"Main navigation\">\n        {/* Header */}\n        <div className={[styles.header, styles.headerOpen].join(' ')}>\n          <div className={styles.logoIcon}>{resolvedLogoIcon}</div>\n          {logo && <div className={styles.logoFull}>{logo}</div>}\n        </div>\n\n        {/* Links */}\n        <div className={[styles.links, styles.linksOpen].join(' ')}>\n          {sections.map((section, si) => (\n            <div key={si} className={styles.section}>\n              {section.title && (\n                <p className={styles.sectionTitle}>{section.title}</p>\n              )}\n              <div className={styles.sectionItems}>\n                {section.items.map((item) => (\n                  <NavItemOpen\n                    key={item.id}\n                    item={item}\n                    isActive={item.id === activeId}\n                    onClick={() => onItemClick?.(item.id)}\n                  />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {/* Footer: collapse */}\n        <div className={styles.footer}>\n          <button\n            type=\"button\"\n            className={styles.collapseBtn}\n            onClick={onCollapseToggle}\n          >\n            <span className={styles.collapseBtnIcon}>\n              <IconChevronLeft />\n            </span>\n            Recolher menu\n          </button>\n        </div>\n      </nav>\n    );\n  }\n\n  // ── Closed ────────────────────────────────────────────────────────────────\n  if (type === 'closed') {\n    return (\n      <nav className={navClass} aria-label=\"Main navigation\">\n        {/* Header */}\n        <div className={[styles.header, styles.headerClosed].join(' ')}>\n          <div className={styles.logoIcon}>{resolvedLogoIcon}</div>\n        </div>\n\n        {/* Links */}\n        <div className={[styles.links, styles.linksClosed].join(' ')}>\n          {sections.map((section, si) => (\n            <div key={si} className={styles.section}>\n              <div className={styles.sectionItems}>\n                {section.items.map((item) => (\n                  <NavItemClosed\n                    key={item.id}\n                    item={item}\n                    isActive={item.id === activeId}\n                    onClick={() => onItemClick?.(item.id)}\n                  />\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {/* Footer: expand */}\n        <div className={styles.footer}>\n          <button\n            type=\"button\"\n            className={[styles.collapseBtn, styles.collapseBtnClosed].join(' ')}\n            onClick={onCollapseToggle}\n            aria-label=\"Expand menu\"\n            title=\"Expandir menu\"\n          >\n            <span className={styles.collapseBtnIcon}>\n              <IconChevronRight20 />\n            </span>\n          </button>\n        </div>\n      </nav>\n    );\n  }\n\n  // ── Mobile ────────────────────────────────────────────────────────────────\n  return (\n    <nav className={navClass} aria-label=\"Main navigation\">\n      {/* Header */}\n      <div className={[styles.header, styles.headerMobile].join(' ')}>\n        <div className={styles.logoIcon}>{resolvedLogoIcon}</div>\n        <h2 className={styles.headerTitle}>{mobileTitle}</h2>\n        <div className={styles.headerActions}>\n          <button\n            type=\"button\"\n            className={styles.bellBtn}\n            onClick={onBellClick}\n            aria-label=\"Notifications\"\n          >\n            <IconBell />\n          </button>\n        </div>\n      </div>\n\n      {/* Links */}\n      <div className={[styles.links, styles.linksMobile].join(' ')}>\n        {sections.map((section, si) => (\n          <div key={si} className={styles.section}>\n            <div className={styles.sectionItems}>\n              {section.items.map((item) => (\n                <NavItemMobile\n                  key={item.id}\n                  item={item}\n                  isActive={item.id === activeId}\n                  onClick={() => onItemClick?.(item.id)}\n                />\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n\n      {/* Footer: CTA + workspace + avatar */}\n      {mobileFooter && (\n        <div className={styles.footerMobile}>\n          {mobileFooter.ctaLabel && (\n            <button\n              type=\"button\"\n              className={styles.ctaBtn}\n              onClick={mobileFooter.onCtaClick}\n            >\n              {mobileFooter.ctaLabel}\n            </button>\n          )}\n\n          {mobileFooter.workspaceName && (\n            <button\n              type=\"button\"\n              className={styles.workspace}\n              onClick={mobileFooter.onWorkspaceClick}\n            >\n              <div className={styles.workspaceIcon}>\n                {mobileFooter.workspaceIcon ?? <DefaultLogoIcon />}\n              </div>\n              <span className={styles.workspaceLabel}>\n                {mobileFooter.workspaceName}\n              </span>\n              <span style={{ color: '#9490AC', display: 'flex' }}>\n                <IconChevronRight />\n              </span>\n            </button>\n          )}\n\n          {(mobileFooter.userName || mobileFooter.userInitials) && (\n            <div className={styles.avatarRow}>\n              <div className={styles.avatar}>\n                {mobileFooter.userAvatarUrl ? (\n                  <img\n                    src={mobileFooter.userAvatarUrl}\n                    alt={mobileFooter.userName ?? ''}\n                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}\n                  />\n                ) : (\n                  <span className={styles.avatarInitials}>\n                    {mobileFooter.userInitials ?? '?'}\n                  </span>\n                )}\n              </div>\n              <div className={styles.avatarInfo}>\n                {mobileFooter.userName && (\n                  <span className={styles.avatarName}>{mobileFooter.userName}</span>\n                )}\n                {mobileFooter.userRole && (\n                  <span className={styles.avatarRole}>{mobileFooter.userRole}</span>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </nav>\n  );\n}\n"],"names":["IconChevronRight","jsx","IconChevronLeft","IconChevronRight20","IconBell","DefaultLogoIcon","jsxs","NavItemOpen","item","isActive","onClick","itemClass","styles","labelClass","NavItemClosed","NavItemMobile","Nav","type","sections","activeId","onItemClick","onCollapseToggle","onBellClick","mobileTitle","mobileFooter","logo","logoIcon","className","resolvedLogoIcon","navClass","section","si"],"mappings":"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"}

package/dist/index.esm11.js

@@ -0,0 +1,177 @@
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import r from "./index.esm20.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 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",
+    {
+      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 {
+  w as Pagination
+};
+//# sourceMappingURL=index.esm11.js.map

package/dist/index.esm11.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm11.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.esm12.js

@@ -0,0 +1,93 @@
+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(
+    "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: 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
+        );
+      })
+    }
+  );
+}
+export {
+  k as Steps
+};
+//# sourceMappingURL=index.esm12.js.map

package/dist/index.esm12.js.map

@@ -0,0 +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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"}