@treeal/ds 0.1.0

package/dist/index.esm7.js

@@ -0,0 +1,182 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import e from "./index.esm17.js";
+function b() {
+  return /* @__PURE__ */ i("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ n("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+    /* @__PURE__ */ n("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+  ] });
+}
+function x() {
+  return /* @__PURE__ */ i("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ n("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+    /* @__PURE__ */ n("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+    /* @__PURE__ */ n("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+  ] });
+}
+function C() {
+  return /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M4 6l4 4 4-4" }) });
+}
+function k({
+  workspaceName: a = "Workspace",
+  workspaceAccount: l = "Conta Atual",
+  fullWidth: t = !1
+}) {
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      className: [e.workspace, t ? e.workspaceFull : ""].filter(Boolean).join(" "),
+      "aria-label": `Trocar workspace: ${a}`,
+      children: [
+        /* @__PURE__ */ i("div", { className: e.workspaceLeft, children: [
+          /* @__PURE__ */ n("span", { className: e.statusDot, "aria-hidden": "true" }),
+          /* @__PURE__ */ i("div", { className: e.workspaceCol, children: [
+            /* @__PURE__ */ n("p", { className: e.workspaceAccount, children: l }),
+            /* @__PURE__ */ n("p", { className: e.workspaceName, children: a })
+          ] })
+        ] }),
+        /* @__PURE__ */ n("span", { className: e.workspaceArrow, children: /* @__PURE__ */ n(C, {}) })
+      ]
+    }
+  );
+}
+function f({
+  userName: a,
+  userRole: l,
+  userAvatar: t
+}) {
+  const o = a ? a.split(" ").slice(0, 2).map((s) => s[0]).join("").toUpperCase() : "?";
+  return /* @__PURE__ */ i("div", { className: e.navUser, children: [
+    /* @__PURE__ */ n("div", { className: e.avatar, children: t ? /* @__PURE__ */ n(
+      "img",
+      {
+        src: t,
+        alt: a ?? "Avatar",
+        className: e.avatarImg
+      }
+    ) : /* @__PURE__ */ n("span", { className: e.avatarInitials, children: o }) }),
+    (a || l) && /* @__PURE__ */ i("div", { className: e.userText, children: [
+      a && /* @__PURE__ */ n("p", { className: e.userName, children: a }),
+      l && /* @__PURE__ */ n("p", { className: e.userRole, children: l })
+    ] })
+  ] });
+}
+function y({
+  variant: a = "Default",
+  pageTitle: l = "Portal de Gestão",
+  workspaceName: t,
+  workspaceAccount: o,
+  userName: s,
+  userRole: h,
+  userAvatar: p,
+  onMenuToggle: v,
+  onNotifications: u,
+  primaryAction: r,
+  className: N
+}) {
+  const c = a === "Default", m = a === "Mobile", d = a === "MobileOpen", w = [
+    e.header,
+    c ? e.variantDefault : "",
+    m ? e.variantMobile : "",
+    d ? e.variantMobileOpen : "",
+    N
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i("header", { className: w, children: [
+    !d && /* @__PURE__ */ n(
+      "h1",
+      {
+        className: [
+          e.pageTitle,
+          c ? e.pageTitleDesktop : e.pageTitleMobile
+        ].join(" "),
+        children: l
+      }
+    ),
+    c && /* @__PURE__ */ i("div", { className: e.actions, children: [
+      /* @__PURE__ */ n(
+        k,
+        {
+          workspaceName: t,
+          workspaceAccount: o
+        }
+      ),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: e.bellBtn,
+          onClick: u,
+          "aria-label": "Notificações",
+          children: /* @__PURE__ */ n(b, {})
+        }
+      ),
+      /* @__PURE__ */ n(
+        f,
+        {
+          userName: s,
+          userRole: h,
+          userAvatar: p
+        }
+      )
+    ] }),
+    m && /* @__PURE__ */ i("div", { className: e.actions, children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: e.bellBtn,
+          onClick: u,
+          "aria-label": "Notificações",
+          children: /* @__PURE__ */ n(b, {})
+        }
+      ),
+      /* @__PURE__ */ i(
+        "button",
+        {
+          type: "button",
+          className: e.menuBtn,
+          onClick: v,
+          "aria-label": "Abrir menu",
+          "aria-expanded": !1,
+          children: [
+            /* @__PURE__ */ n("span", { className: e.menuIcon, children: /* @__PURE__ */ n(x, {}) }),
+            "Menu"
+          ]
+        }
+      )
+    ] }),
+    d && /* @__PURE__ */ i("div", { className: [e.actions, e.actionsMobileOpen].join(" "), children: [
+      r && /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: e.ctaBtn,
+          onClick: r.onClick,
+          children: r.label
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: e.mainActions, children: [
+        /* @__PURE__ */ n(
+          k,
+          {
+            workspaceName: t,
+            workspaceAccount: o,
+            fullWidth: !0
+          }
+        ),
+        /* @__PURE__ */ n(
+          f,
+          {
+            userName: s,
+            userRole: h,
+            userAvatar: p
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  y as Header
+};
+//# sourceMappingURL=index.esm7.js.map

package/dist/index.esm7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm7.js","sources":["../components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Header.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type HeaderVariant = 'Default' | 'Mobile' | 'MobileOpen';\n\nexport interface HeaderProps {\n  variant?: HeaderVariant;\n  /** Page / section title shown on the left */\n  pageTitle?: string;\n  /** Workspace display name (e.g. \"Best Buy Eletronics\") */\n  workspaceName?: string;\n  /** Workspace account label (defaults to \"Conta Atual\") */\n  workspaceAccount?: string;\n  /** Logged-in user display name */\n  userName?: string;\n  /** Logged-in user role / subtitle */\n  userRole?: string;\n  /** Avatar image URL — falls back to initials */\n  userAvatar?: string;\n  /** Called when the Mobile hamburger \"Menu\" button is clicked */\n  onMenuToggle?: () => void;\n  /** Called when the bell notification button is clicked */\n  onNotifications?: () => void;\n  /** Primary CTA in MobileOpen expanded panel */\n  primaryAction?: { label: string; onClick: () => void };\n  className?: string;\n}\n\n// ─── Inline SVG icons ─────────────────────────────────────────────────────────\n\nfunction IconBell() {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" 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 IconMenu() {\n  return (\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden=\"true\">\n      <line x1=\"4\" y1=\"6\"  x2=\"20\" y2=\"6\" />\n      <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\" />\n      <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\" />\n    </svg>\n  );\n}\n\nfunction IconChevronDown() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M4 6l4 4 4-4\" />\n    </svg>\n  );\n}\n\n// ─── Sub-components ───────────────────────────────────────────────────────────\n\nfunction WorkspaceSwitcher({\n  workspaceName = 'Workspace',\n  workspaceAccount = 'Conta Atual',\n  fullWidth = false,\n}: {\n  workspaceName?: string;\n  workspaceAccount?: string;\n  fullWidth?: boolean;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className={[styles.workspace, fullWidth ? styles.workspaceFull : ''].filter(Boolean).join(' ')}\n      aria-label={`Trocar workspace: ${workspaceName}`}\n    >\n      <div className={styles.workspaceLeft}>\n        <span className={styles.statusDot} aria-hidden=\"true\" />\n        <div className={styles.workspaceCol}>\n          <p className={styles.workspaceAccount}>{workspaceAccount}</p>\n          <p className={styles.workspaceName}>{workspaceName}</p>\n        </div>\n      </div>\n      <span className={styles.workspaceArrow}>\n        <IconChevronDown />\n      </span>\n    </button>\n  );\n}\n\nfunction UserInfo({\n  userName,\n  userRole,\n  userAvatar,\n}: {\n  userName?: string;\n  userRole?: string;\n  userAvatar?: string;\n}) {\n  const initials = userName\n    ? userName\n        .split(' ')\n        .slice(0, 2)\n        .map((w) => w[0])\n        .join('')\n        .toUpperCase()\n    : '?';\n\n  return (\n    <div className={styles.navUser}>\n      <div className={styles.avatar}>\n        {userAvatar ? (\n          <img\n            src={userAvatar}\n            alt={userName ?? 'Avatar'}\n            className={styles.avatarImg}\n          />\n        ) : (\n          <span className={styles.avatarInitials}>{initials}</span>\n        )}\n      </div>\n      {(userName || userRole) && (\n        <div className={styles.userText}>\n          {userName && <p className={styles.userName}>{userName}</p>}\n          {userRole  && <p className={styles.userRole}>{userRole}</p>}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ─── Header ───────────────────────────────────────────────────────────────────\n\nexport function Header({\n  variant = 'Default',\n  pageTitle = 'Portal de Gestão',\n  workspaceName,\n  workspaceAccount,\n  userName,\n  userRole,\n  userAvatar,\n  onMenuToggle,\n  onNotifications,\n  primaryAction,\n  className,\n}: HeaderProps) {\n  const isDefault    = variant === 'Default';\n  const isMobile     = variant === 'Mobile';\n  const isMobileOpen = variant === 'MobileOpen';\n\n  const rootClass = [\n    styles.header,\n    isDefault    ? styles.variantDefault    : '',\n    isMobile     ? styles.variantMobile     : '',\n    isMobileOpen ? styles.variantMobileOpen : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <header className={rootClass}>\n      {/* Page title — Default + Mobile only */}\n      {!isMobileOpen && (\n        <h1\n          className={[\n            styles.pageTitle,\n            isDefault ? styles.pageTitleDesktop : styles.pageTitleMobile,\n          ].join(' ')}\n        >\n          {pageTitle}\n        </h1>\n      )}\n\n      {/* ── Default actions ─────────────────────────────────────────────── */}\n      {isDefault && (\n        <div className={styles.actions}>\n          <WorkspaceSwitcher\n            workspaceName={workspaceName}\n            workspaceAccount={workspaceAccount}\n          />\n          <button\n            type=\"button\"\n            className={styles.bellBtn}\n            onClick={onNotifications}\n            aria-label=\"Notificações\"\n          >\n            <IconBell />\n          </button>\n          <UserInfo\n            userName={userName}\n            userRole={userRole}\n            userAvatar={userAvatar}\n          />\n        </div>\n      )}\n\n      {/* ── Mobile actions ──────────────────────────────────────────────── */}\n      {isMobile && (\n        <div className={styles.actions}>\n          <button\n            type=\"button\"\n            className={styles.bellBtn}\n            onClick={onNotifications}\n            aria-label=\"Notificações\"\n          >\n            <IconBell />\n          </button>\n          <button\n            type=\"button\"\n            className={styles.menuBtn}\n            onClick={onMenuToggle}\n            aria-label=\"Abrir menu\"\n            aria-expanded={false}\n          >\n            <span className={styles.menuIcon}>\n              <IconMenu />\n            </span>\n            Menu\n          </button>\n        </div>\n      )}\n\n      {/* ── MobileOpen expanded panel ────────────────────────────────────── */}\n      {isMobileOpen && (\n        <div className={[styles.actions, styles.actionsMobileOpen].join(' ')}>\n          {/* CTA */}\n          {primaryAction && (\n            <button\n              type=\"button\"\n              className={styles.ctaBtn}\n              onClick={primaryAction.onClick}\n            >\n              {primaryAction.label}\n            </button>\n          )}\n\n          {/* Workspace + User */}\n          <div className={styles.mainActions}>\n            <WorkspaceSwitcher\n              workspaceName={workspaceName}\n              workspaceAccount={workspaceAccount}\n              fullWidth\n            />\n            <UserInfo\n              userName={userName}\n              userRole={userRole}\n              userAvatar={userAvatar}\n            />\n          </div>\n        </div>\n      )}\n    </header>\n  );\n}\n"],"names":["IconBell","jsx","IconMenu","IconChevronDown","WorkspaceSwitcher","workspaceName","workspaceAccount","fullWidth","jsxs","styles","UserInfo","userName","userRole","userAvatar","initials","w","Header","variant","pageTitle","onMenuToggle","onNotifications","primaryAction","className","isDefault","isMobile","isMobileOpen","rootClass"],"mappings":"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"}

package/dist/index.esm8.js

@@ -0,0 +1,69 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { useId as D } from "react";
+import e from "./index.esm15.js";
+function E({
+  state: i = "Default",
+  label: o,
+  placeholder: p,
+  message: s,
+  iconLabel: c,
+  iconLeft: m,
+  iconRight: t,
+  value: h,
+  onChange: b,
+  id: u,
+  className: f,
+  ...v
+}) {
+  const N = D(), r = u ?? N, l = i === "Disabled", d = i === "Error", j = [
+    e.field,
+    i === "Hover" ? e.hover : "",
+    i === "Active" ? e.active : "",
+    l ? e.disabled : "",
+    d ? e.error : "",
+    f
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { className: e.wrapper, children: [
+    o && /* @__PURE__ */ n("div", { className: e.labelRow, children: [
+      /* @__PURE__ */ a(
+        "label",
+        {
+          htmlFor: r,
+          className: [e.label, l ? e.labelDisabled : ""].filter(Boolean).join(" "),
+          children: o
+        }
+      ),
+      c && /* @__PURE__ */ a("span", { className: e.labelIcon, "aria-hidden": "true", children: c })
+    ] }),
+    /* @__PURE__ */ n("div", { className: j, children: [
+      m && /* @__PURE__ */ a("span", { className: e.icon, "aria-hidden": "true", children: m }),
+      /* @__PURE__ */ a(
+        "input",
+        {
+          id: r,
+          className: e.input,
+          placeholder: p,
+          disabled: l,
+          value: h,
+          onChange: b,
+          "aria-invalid": d,
+          "aria-describedby": s ? `${r}-message` : void 0,
+          ...v
+        }
+      ),
+      t && /* @__PURE__ */ a("span", { className: e.icon, "aria-hidden": "true", children: t })
+    ] }),
+    s && /* @__PURE__ */ a(
+      "p",
+      {
+        id: `${r}-message`,
+        className: [e.message, d ? e.messageError : ""].filter(Boolean).join(" "),
+        children: s
+      }
+    )
+  ] });
+}
+export {
+  E as Input
+};
+//# sourceMappingURL=index.esm8.js.map

package/dist/index.esm8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm8.js","sources":["../components/Input/Input.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styles from './Input.module.css';\n\nexport type InputState = 'Default' | 'Hover' | 'Active' | 'Disabled' | 'Error';\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /** Visual/interaction state. Defaults to 'Default'. */\n  state?: InputState;\n  /** Label text rendered above the field. */\n  label?: string;\n  placeholder?: string;\n  /** Helper or error message rendered below the field. */\n  message?: string;\n  /** Info icon rendered beside the label. */\n  iconLabel?: React.ReactNode;\n  /** Icon rendered inside the field, left side (24×24 slot). */\n  iconLeft?: React.ReactNode;\n  /** Icon rendered inside the field, right side (24×24 slot). */\n  iconRight?: React.ReactNode;\n  value?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport function Input({\n  state = 'Default',\n  label,\n  placeholder,\n  message,\n  iconLabel,\n  iconLeft,\n  iconRight,\n  value,\n  onChange,\n  id: idProp,\n  className,\n  ...props\n}: InputProps) {\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    state === 'Hover' ? styles.hover : '',\n    state === 'Active' ? styles.active : '',\n    isDisabled ? styles.disabled : '',\n    isError ? styles.error : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={styles.wrapper}>\n      {label && (\n        <div className={styles.labelRow}>\n          <label\n            htmlFor={id}\n            className={[styles.label, isDisabled ? styles.labelDisabled : '']\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {label}\n          </label>\n          {iconLabel && (\n            <span className={styles.labelIcon} aria-hidden=\"true\">\n              {iconLabel}\n            </span>\n          )}\n        </div>\n      )}\n\n      <div className={fieldClass}>\n        {iconLeft && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {iconLeft}\n          </span>\n        )}\n        <input\n          id={id}\n          className={styles.input}\n          placeholder={placeholder}\n          disabled={isDisabled}\n          value={value}\n          onChange={onChange}\n          aria-invalid={isError}\n          aria-describedby={message ? `${id}-message` : undefined}\n          {...props}\n        />\n        {iconRight && (\n          <span className={styles.icon} aria-hidden=\"true\">\n            {iconRight}\n          </span>\n        )}\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":["Input","state","label","placeholder","message","iconLabel","iconLeft","iconRight","value","onChange","idProp","className","props","generatedId","useId","id","isDisabled","isError","fieldClass","styles","jsxs","jsx"],"mappings":";;;AAwBO,SAASA,EAAM;AAAA,EACpB,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,WAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,QAAMC,IAAcC,EAAA,GACdC,IAAKL,KAAUG,GAEfG,IAAaf,MAAU,YACvBgB,IAAUhB,MAAU,SAEpBiB,IAAa;AAAA,IACjBC,EAAO;AAAA,IACPlB,MAAU,UAAUkB,EAAO,QAAQ;AAAA,IACnClB,MAAU,WAAWkB,EAAO,SAAS;AAAA,IACrCH,IAAaG,EAAO,WAAW;AAAA,IAC/BF,IAAUE,EAAO,QAAQ;AAAA,IACzBR;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,SACpB,UAAA;AAAA,IAAAjB,KACC,gBAAAkB,EAAC,OAAA,EAAI,WAAWD,EAAO,UACrB,UAAA;AAAA,MAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASN;AAAA,UACT,WAAW,CAACI,EAAO,OAAOH,IAAaG,EAAO,gBAAgB,EAAE,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UAEV,UAAAjB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFG,uBACE,QAAA,EAAK,WAAWc,EAAO,WAAW,eAAY,QAC5C,UAAAd,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAGF,gBAAAe,EAAC,OAAA,EAAI,WAAWF,GACb,UAAA;AAAA,MAAAZ,uBACE,QAAA,EAAK,WAAWa,EAAO,MAAM,eAAY,QACvC,UAAAb,EAAA,CACH;AAAA,MAEF,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAN;AAAA,UACA,WAAWI,EAAO;AAAA,UAClB,aAAAhB;AAAA,UACA,UAAUa;AAAA,UACV,OAAAR;AAAA,UACA,UAAAC;AAAA,UACA,gBAAcQ;AAAA,UACd,oBAAkBb,IAAU,GAAGW,CAAE,aAAa;AAAA,UAC7C,GAAGH;AAAA,QAAA;AAAA,MAAA;AAAA,MAELL,uBACE,QAAA,EAAK,WAAWY,EAAO,MAAM,eAAY,QACvC,UAAAZ,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAECH,KACC,gBAAAiB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,GAAGN,CAAE;AAAA,QACT,WAAW,CAACI,EAAO,SAASF,IAAUE,EAAO,eAAe,EAAE,EAC3D,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QAEV,UAAAf;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/index.esm9.js

@@ -0,0 +1,78 @@
+import { jsx as l, jsxs as r } from "react/jsx-runtime";
+import { useCallback as u, useEffect as v } from "react";
+import e from "./index.esm22.js";
+function k({
+  isOpen: d,
+  title: m,
+  description: n,
+  children: c,
+  onClose: s,
+  primaryAction: o,
+  secondaryAction: t
+}) {
+  const i = u(
+    (a) => {
+      a.key === "Escape" && s();
+    },
+    [s]
+  );
+  if (v(() => {
+    if (!d) return;
+    document.addEventListener("keydown", i);
+    const a = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", i), document.body.style.overflow = a;
+    };
+  }, [d, i]), !d) return null;
+  const b = o || t;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: e.overlay,
+      onClick: s,
+      role: "presentation",
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          className: e.modal,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "modal-title",
+          "aria-describedby": n ? "modal-desc" : void 0,
+          onClick: (a) => a.stopPropagation(),
+          children: [
+            /* @__PURE__ */ r("div", { className: e.heading, children: [
+              /* @__PURE__ */ l("p", { id: "modal-title", className: e.title, children: m }),
+              n && /* @__PURE__ */ l("p", { id: "modal-desc", className: e.description, children: n })
+            ] }),
+            c && /* @__PURE__ */ l("div", { className: e.body, children: c }),
+            b && /* @__PURE__ */ l("div", { className: e.actions, children: /* @__PURE__ */ r("div", { className: e.btns, children: [
+              t && /* @__PURE__ */ l(
+                "button",
+                {
+                  type: "button",
+                  className: e.btnSecondary,
+                  onClick: t.onClick,
+                  children: t.label
+                }
+              ),
+              o && /* @__PURE__ */ l(
+                "button",
+                {
+                  type: "button",
+                  className: e.btnPrimary,
+                  onClick: o.onClick,
+                  children: o.label
+                }
+              )
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  k as Modal
+};
+//# sourceMappingURL=index.esm9.js.map

package/dist/index.esm9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm9.js","sources":["../components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect, useCallback } from 'react';\nimport styles from './Modal.module.css';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface ModalAction {\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ModalProps {\n  isOpen: boolean;\n  title: string;\n  description?: string;\n  /** Customizable modal body content (e.g. radio/checkbox option list) */\n  children?: React.ReactNode;\n  onClose: () => void;\n  primaryAction?: ModalAction;\n  secondaryAction?: ModalAction;\n}\n\n// ─── Modal ────────────────────────────────────────────────────────────────────\n\nexport function Modal({\n  isOpen,\n  title,\n  description,\n  children,\n  onClose,\n  primaryAction,\n  secondaryAction,\n}: ModalProps) {\n  // Close on Escape key\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    },\n    [onClose],\n  );\n\n  useEffect(() => {\n    if (!isOpen) return;\n    document.addEventListener('keydown', handleKeyDown);\n    // Prevent body scroll while modal is open\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = prev;\n    };\n  }, [isOpen, handleKeyDown]);\n\n  if (!isOpen) return null;\n\n  const hasActions = primaryAction || secondaryAction;\n\n  return (\n    <div\n      className={styles.overlay}\n      onClick={onClose}\n      role=\"presentation\"\n    >\n      <div\n        className={styles.modal}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"modal-title\"\n        aria-describedby={description ? 'modal-desc' : undefined}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Heading */}\n        <div className={styles.heading}>\n          <p id=\"modal-title\" className={styles.title}>\n            {title}\n          </p>\n          {description && (\n            <p id=\"modal-desc\" className={styles.description}>\n              {description}\n            </p>\n          )}\n        </div>\n\n        {/* Body */}\n        {children && (\n          <div className={styles.body}>\n            {children}\n          </div>\n        )}\n\n        {/* Actions */}\n        {hasActions && (\n          <div className={styles.actions}>\n            <div className={styles.btns}>\n              {secondaryAction && (\n                <button\n                  type=\"button\"\n                  className={styles.btnSecondary}\n                  onClick={secondaryAction.onClick}\n                >\n                  {secondaryAction.label}\n                </button>\n              )}\n              {primaryAction && (\n                <button\n                  type=\"button\"\n                  className={styles.btnPrimary}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </button>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["Modal","isOpen","title","description","children","onClose","primaryAction","secondaryAction","handleKeyDown","useCallback","e","useEffect","prev","hasActions","jsx","styles","jsxs"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AACF,GAAe;AAEb,QAAMC,IAAgBC;AAAA,IACpB,CAACC,MAAqB;AACpB,MAAIA,EAAE,QAAQ,YAAUL,EAAA;AAAA,IAC1B;AAAA,IACA,CAACA,CAAO;AAAA,EAAA;AAeV,MAZAM,EAAU,MAAM;AACd,QAAI,CAACV,EAAQ;AACb,aAAS,iBAAiB,WAAWO,CAAa;AAElD,UAAMI,IAAO,SAAS,KAAK,MAAM;AACjC,oBAAS,KAAK,MAAM,WAAW,UACxB,MAAM;AACX,eAAS,oBAAoB,WAAWJ,CAAa,GACrD,SAAS,KAAK,MAAM,WAAWI;AAAA,IACjC;AAAA,EACF,GAAG,CAACX,GAAQO,CAAa,CAAC,GAEtB,CAACP,EAAQ,QAAO;AAEpB,QAAMY,IAAaP,KAAiBC;AAEpC,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,SAASV;AAAA,MACT,MAAK;AAAA,MAEL,UAAA,gBAAAW;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD,EAAO;AAAA,UAClB,MAAK;AAAA,UACL,cAAW;AAAA,UACX,mBAAgB;AAAA,UAChB,oBAAkBZ,IAAc,eAAe;AAAA,UAC/C,SAAS,CAACO,MAAMA,EAAE,gBAAA;AAAA,UAGlB,UAAA;AAAA,YAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,SACrB,UAAA;AAAA,cAAA,gBAAAD,EAAC,OAAE,IAAG,eAAc,WAAWC,EAAO,OACnC,UAAAb,GACH;AAAA,cACCC,uBACE,KAAA,EAAE,IAAG,cAAa,WAAWY,EAAO,aAClC,UAAAZ,EAAA,CACH;AAAA,YAAA,GAEJ;AAAA,YAGCC,KACC,gBAAAU,EAAC,OAAA,EAAI,WAAWC,EAAO,MACpB,UAAAX,GACH;AAAA,YAIDS,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAO,SACrB,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,MACpB,UAAA;AAAA,cAAAR,KACC,gBAAAO;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAWC,EAAO;AAAA,kBAClB,SAASR,EAAgB;AAAA,kBAExB,UAAAA,EAAgB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGpBD,KACC,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,WAAWC,EAAO;AAAA,kBAClB,SAAST,EAAc;AAAA,kBAEtB,UAAAA,EAAc;AAAA,gBAAA;AAAA,cAAA;AAAA,YACjB,EAAA,CAEJ,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/tokens/colors.d.ts

@@ -0,0 +1,122 @@
+/**
+ * Color tokens — extracted directly from Figma (VekfomfsZU4q2iaY1j4VXP)
+ * Nodes: BtnsBase (3107:5509), TextField (3105:3885), BaseCheckRadio (3106:4752),
+ *        FileUpload (3210:3538), Pagination (3203:662), NavPrimary (3554:548),
+ *        Modal (5139:1464), AlertSticky (3114:1706)
+ */
+export declare const colors: {
+    readonly brand: {
+        readonly primary: {
+            /** #203224 — Secondary button bg; Fill button text; Check/Radio checked bg */
+            readonly base: "#203224";
+        };
+        readonly secondary: {
+            /** #0F6C13 — Outline button border & text */
+            readonly base: "#0F6C13";
+        };
+        readonly tertiary: {
+            /** #E7DA10 — Fill button background */
+            readonly base: "#E7DA10";
+        };
+    };
+    readonly default: {
+        /** #FFFFFF — Secondary button text; input background */
+        readonly white: "#FFFFFF";
+        /** #524E69 — Disabled text; input active/error text */
+        readonly textDark: "#524E69";
+        /** #9490AC — Placeholder; input hover/active border; Grayscale/600 */
+        readonly textMedium: "#9490AC";
+        /** #EFEEF2 — Disabled background; input focus ring; Grayscale/100 */
+        readonly disabled: "#EFEEF2";
+        /** #DCE5DE — Default input border; Check/Radio border */
+        readonly border: "#DCE5DE";
+        /** #E0DEED — Grayscale/200 · Default step background */
+        readonly stepDefault: "#E0DEED";
+        /** #F5F5F5 — Default Colors/White Cloud · Nav sidebar background */
+        readonly whiteCloud: "#F5F5F5";
+        /** #E0DEED — Grayscale/200 · Modal slot border */
+        readonly modalBorder: "#E0DEED";
+        /** #757094 — Default Colors/Text medium · Modal slot text, option labels */
+        readonly modalTextMedium: "#757094";
+    };
+    readonly message: {
+        readonly info: {
+            /** #2472BA — Text button text */
+            readonly base: "#2472BA";
+        };
+        readonly danger: {
+            /** #FF3A29 — Error input border & message */
+            readonly base: "#FF3A29";
+        };
+    };
+    /** Gray scale — FileUpload / Gray/x00 tokens */
+    readonly gray: {
+        /** #101828 — Gray/900 · file name, body text */
+        readonly 900: "#101828";
+        /** #475467 — Gray/600 · action icon color */
+        readonly 600: "#475467";
+        /** #667085 — Gray/500 · file size, muted text */
+        readonly 500: "#667085";
+        /** #D0D5DD — Gray/300 · upload drop-zone default border */
+        readonly 300: "#D0D5DD";
+        /** #EAECF0 — Gray/200 · file item border, progress track */
+        readonly 200: "#EAECF0";
+    };
+    /** Pagination tokens — Pagination (3203:662) */
+    readonly pagination: {
+        /** #0F6C13 — active item bg (= brand.secondary.base) */
+        readonly active: "#0F6C13";
+        /** #CED4DA — Gray/Gray 4 · inactive item border, control border */
+        readonly border: "#CED4DA";
+        /** #101113 — Dark/Dark 9 · page number text */
+        readonly text: "#101113";
+    };
+    /** Alert tokens — AlertSticky (3114:1706) */
+    readonly alert: {
+        readonly default: {
+            readonly bg: "#F9F8FC";
+            readonly border: "#DCE5DE";
+            readonly title: "#524E69";
+        };
+        readonly info: {
+            readonly bg: "#F4F9FF";
+            readonly border: "#C9E2FE";
+            readonly title: "#2472BA";
+        };
+        readonly success: {
+            readonly bg: "#F5FBF7";
+            readonly border: "#CAE7D5";
+            readonly title: "#2C7D56";
+        };
+        readonly warning: {
+            readonly bg: "#FFF9E9";
+            readonly border: "#FFDB90";
+            readonly title: "#A36A00";
+        };
+        readonly error: {
+            readonly bg: "#FFF8F6";
+            readonly border: "#FFCABF";
+            readonly title: "#DE0000";
+        };
+    };
+    /** Shadow tokens */
+    readonly shadow: {
+        /** 0px 1px 12px 0px rgba(25,27,35,0.15) — BS-Popper */
+        readonly popper: "0px 1px 12px 0px rgba(25,27,35,0.15)";
+    };
+    /** Blue primary scale — FileUpload / Primary/x00 tokens */
+    readonly primary: {
+        /** #154FEF — Primary/600 · "browse" link color */
+        readonly 600: "#154FEF";
+        /** #2970FF — Primary/500 · active drop-zone border, progress fill */
+        readonly 500: "#2970FF";
+        /** #5280FF — Primary/400 */
+        readonly 400: "#5280FF";
+        /** #B2C9FF — Primary/200 · file badge background */
+        readonly 200: "#B2C9FF";
+        /** #DBE8FF — Primary/100 · file badge ring, active drop-zone bg */
+        readonly 100: "#DBE8FF";
+    };
+};
+export type Colors = typeof colors;
+//# sourceMappingURL=colors.d.ts.map

package/dist/tokens/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,MAAM;;;YAGb,8EAA8E;;;;YAI9E,6CAA6C;;;;YAI7C,uCAAuC;;;;;QAKzC,wDAAwD;;QAExD,uDAAuD;;QAEvD,sEAAsE;;QAEtE,qEAAqE;;QAErE,yDAAyD;;QAEzD,wDAAwD;;QAExD,oEAAoE;;QAEpE,kDAAkD;;QAElD,4EAA4E;;;;;YAK1E,iCAAiC;;;;YAIjC,6CAA6C;;;;IAIjD,gDAAgD;;QAE9C,gDAAgD;;QAEhD,6CAA6C;;QAE7C,iDAAiD;;QAEjD,2DAA2D;;QAE3D,4DAA4D;;;IAG9D,gDAAgD;;QAE9C,wDAAwD;;QAExD,mEAAmE;;QAEnE,+CAA+C;;;IAGjD,6CAA6C;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQ7C,oBAAoB;;QAElB,uDAAuD;;;IAGzD,2DAA2D;;QAEzD,kDAAkD;;QAElD,qEAAqE;;QAErE,4BAA4B;;QAE5B,oDAAoD;;QAEpD,mEAAmE;;;CAG7D,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC"}

package/dist/tokens/index.d.ts

@@ -0,0 +1,5 @@
+export { colors } from './colors';
+export type { Colors } from './colors';
+export { typography } from './typography';
+export type { Typography } from './typography';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/tokens/typography.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Typography tokens — extracted directly from Figma (VekfomfsZU4q2iaY1j4VXP)
+ * Tokens: Body Texts/Button, Body Texts/Label, Body Texts/Text, Body Texts/Text Small,
+ *         Paragraph/SM/Regular, Paragraph/XS/Regular (FileUpload 3210:3538),
+ *         Text/xs, Text/md, Text/lg (Pagination 3203:662)
+ */
+export declare const typography: {
+    readonly fontFamily: {
+        /** Clash Grotesk Variable — buttons, inputs, labels */
+        readonly base: "'Clash Grotesk Variable', sans-serif";
+        /** Inter — FileUpload text (Paragraph/SM and Paragraph/XS) */
+        readonly inter: "'Inter', sans-serif";
+        /** Roboto — Pagination numbers and controls */
+        readonly roboto: "'Roboto', sans-serif";
+        /** Clash Display Variable — Steps step number (Headings/H4 · 21px) */
+        readonly clashDisplay: "'Clash Display Variable', sans-serif";
+        /** @deprecated use fontFamily.base */
+        readonly button: "'Clash Grotesk Variable', sans-serif";
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly semibold: 600;
+    };
+    readonly fontSize: {
+        /** 16px — Body Texts/Button & Body Texts/Text */
+        readonly md: "1rem";
+        /** 14px — Body Texts/Label & Body Texts/Text Small */
+        readonly sm: "0.875rem";
+        /** 12px — Paragraph/SM/Regular (Inter · FileUpload) */
+        readonly bodySm: "0.75rem";
+        /** 10px — Paragraph/XS/Regular (Inter · FileUpload) */
+        readonly bodyXs: "0.625rem";
+        /** 12px — Text/xs (Roboto · Pagination xs) */
+        readonly paginationXs: "0.75rem";
+        /** 16px — Text/md (Roboto · Pagination md) */
+        readonly paginationMd: "1rem";
+        /** 18px — Text/lg (Roboto · Pagination lg) */
+        readonly paginationLg: "1.125rem";
+        /** @deprecated use fontSize.md */
+        readonly button: "1rem";
+    };
+    readonly lineHeight: {
+        /** 1.5 — Body Texts/Button */
+        readonly button: 1.5;
+        /** 1.43 — Body Texts/Label (Semibold 14px) */
+        readonly label: 1.43;
+        /** 1.30 — Body Texts/Text & Body Texts/Text Small */
+        readonly text: 1.3;
+        /** 1.60 — Paragraph/SM/Regular & Paragraph/XS/Regular (Inter · FileUpload) */
+        readonly body: 1.6;
+        /** 14px — Text/xs (Roboto · Pagination xs) */
+        readonly paginationXs: "14px";
+        /** 18px — Text/md (Roboto · Pagination md) */
+        readonly paginationMd: "18px";
+        /** 20px — Text/lg (Roboto · Pagination lg) */
+        readonly paginationLg: "20px";
+    };
+    readonly letterSpacing: {
+        /** 0 — all tokens */
+        readonly none: 0;
+        /** @deprecated use letterSpacing.none */
+        readonly button: 0;
+    };
+};
+export type Typography = typeof typography;
+//# sourceMappingURL=typography.d.ts.map

package/dist/tokens/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../tokens/typography.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,UAAU;;QAEnB,uDAAuD;;QAEvD,8DAA8D;;QAE9D,+CAA+C;;QAE/C,sEAAsE;;QAEtE,sCAAsC;;;;;;;;QAQtC,iDAAiD;;QAEjD,sDAAsD;;QAEtD,uDAAuD;;QAEvD,uDAAuD;;QAEvD,8CAA8C;;QAE9C,8CAA8C;;QAE9C,8CAA8C;;QAE9C,kCAAkC;;;;QAIlC,8BAA8B;;QAE9B,8CAA8C;;QAE9C,qDAAqD;;QAErD,8EAA8E;;QAE9E,8CAA8C;;QAE9C,8CAA8C;;QAE9C,8CAA8C;;;;QAI9C,qBAAqB;;QAErB,yCAAyC;;;CAGnC,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@treeal/ds",
+  "version": "0.1.0",
+  "description": "Treeal Design System — React component library with CSS Modules",
+  "license": "MIT",
+
+  "main":   "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types":  "dist/components/index.d.ts",
+  "style":  "dist/assets/style.css",
+
+  "exports": {
+    ".": {
+      "import":  "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types":   "./dist/components/index.d.ts"
+    },
+    "./style.css": "./dist/assets/style.css"
+  },
+
+  "files": ["dist"],
+
+  "sideEffects": ["dist/assets/style.css"],
+
+  "scripts": {
+    "build":          "vite build && tsc -p tsconfig.build.json",
+    "build:js":       "vite build",
+    "build:types":    "tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build",
+    "storybook":      "storybook dev -p 6006",
+    "build-storybook":"storybook build"
+  },
+
+  "peerDependencies": {
+    "react":     ">=18",
+    "react-dom": ">=18"
+  },
+
+  "devDependencies": {
+    "@storybook/addon-a11y":      "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/blocks":          "^8.0.0",
+    "@storybook/react":           "^8.0.0",
+    "@storybook/react-vite":      "^8.0.0",
+    "@storybook/theming":         "^8.0.0",
+    "@types/react":               "^18.0.0",
+    "@types/react-dom":           "^18.0.0",
+    "@vitejs/plugin-react":       "^4.0.0",
+    "react":                      "^18.0.0",
+    "react-dom":                  "^18.0.0",
+    "storybook":                  "^8.0.0",
+    "typescript":                 "^5.0.0",
+    "vite":                       "^5.0.0"
+  }
+}