@sbkbs/ui 1.0.3 → 1.0.5

package/dist/components/Subtitle/Subtitle.js

@@ -0,0 +1,40 @@
+import { jsx as v } from "react/jsx-runtime";
+const h = ({
+  as: t = "p",
+  size: e = "md",
+  weight: o = "normal",
+  align: n = "left",
+  muted: a = !1,
+  italic: s = !1,
+  children: i,
+  className: r = "",
+  ...l
+}) => {
+  const m = t, f = {
+    xs: "text-[var(--font-size-xs)]",
+    sm: "text-[var(--font-size-sm)]",
+    md: "text-[var(--font-size-base)]",
+    lg: "text-[var(--font-size-lg)]"
+  }, c = {
+    normal: "font-[var(--font-weight-normal)]",
+    medium: "font-[var(--font-weight-medium)]",
+    semibold: "font-[var(--font-weight-semibold)]"
+  }, x = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }, g = [
+    "m-0 leading-[var(--line-height-normal)] text-[var(--text-secondary)] transition-[var(--transition-colors)]",
+    f[e],
+    c[o],
+    x[n],
+    s ? "italic" : "not-italic",
+    a ? "text-[var(--text-muted)] opacity-80" : "",
+    r
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ v(m, { className: g, ...l, children: i });
+};
+export {
+  h as Subtitle
+};
+//# sourceMappingURL=Subtitle.js.map

package/dist/components/Subtitle/Subtitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Subtitle.js","sources":["../../../src/components/Subtitle/Subtitle.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface SubtitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  align?: 'left' | 'center' | 'right';\n  as?: 'p' | 'span' | 'div';\n  children: React.ReactNode;\n  italic?: boolean;\n  muted?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  weight?: 'normal' | 'medium' | 'semibold';\n}\n\nexport const Subtitle: React.FC<SubtitleProps> = ({\n  as = 'p',\n  size = 'md',\n  weight = 'normal',\n  align = 'left',\n  muted = false,\n  italic = false,\n  children,\n  className = '',\n  ...props\n}) => {\n  const Component = as;\n  const sizeClassMap: Record<NonNullable<SubtitleProps['size']>, string> = {\n    xs: 'text-[var(--font-size-xs)]',\n    sm: 'text-[var(--font-size-sm)]',\n    md: 'text-[var(--font-size-base)]',\n    lg: 'text-[var(--font-size-lg)]',\n  };\n  const weightClassMap: Record<NonNullable<SubtitleProps['weight']>, string> = {\n    normal: 'font-[var(--font-weight-normal)]',\n    medium: 'font-[var(--font-weight-medium)]',\n    semibold: 'font-[var(--font-weight-semibold)]',\n  };\n  const alignClassMap: Record<NonNullable<SubtitleProps['align']>, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  };\n  const combinedClass = [\n    'm-0 leading-[var(--line-height-normal)] text-[var(--text-secondary)] transition-[var(--transition-colors)]',\n    sizeClassMap[size],\n    weightClassMap[weight],\n    alignClassMap[align],\n    italic ? 'italic' : 'not-italic',\n    muted ? 'text-[var(--text-muted)] opacity-80' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Component className={combinedClass} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["Subtitle","as","size","weight","align","muted","italic","children","className","props","Component","sizeClassMap","weightClassMap","alignClassMap","combinedClass"],"mappings":";AAYO,MAAMA,IAAoC,CAAC;AAAA,EAChD,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,GACZU,IAAmE;AAAA,IACvE,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAEAC,IAAuE;AAAA,IAC3E,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA,GAENC,IAAqE;AAAA,IACzE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,GAEHC,IAAgB;AAAA,IACpB;AAAA,IACAH,EAAaT,CAAI;AAAA,IACjBU,EAAeT,CAAM;AAAA,IACrBU,EAAcT,CAAK;AAAA,IACnBE,IAAS,WAAW;AAAA,IACpBD,IAAQ,wCAAwC;AAAA,IAChDG;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACGE,GAAA,EAAU,WAAWI,GAAgB,GAAGL,GACtC,UAAAF,GACH;AAEJ;"}

package/dist/components/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
-import type React from 'react';
+import React from 'react';
 export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
     checked?: boolean;
     label?: string;
     onCheckedChange?: (checked: boolean) => void;
 }
-export declare const Switch: React.FC<SwitchProps>;
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,37 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import m from "react";
+import { cn as s } from "../../utils/cn.js";
+const f = m.forwardRef(
+  ({ checked: r = !1, onCheckedChange: i, label: e, className: a, ...o }, l) => /* @__PURE__ */ n("div", { className: s("inline-flex items-center gap-2", a), children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        ref: l,
+        "aria-checked": r,
+        className: s(
+          "relative inline-flex h-6 w-11 items-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]",
+          r ? "border-[var(--md-primary)] bg-[var(--md-primary)]" : "border-[var(--md-outline)] bg-[var(--md-surface-container-high)]"
+        ),
+        onClick: () => i == null ? void 0 : i(!r),
+        role: "switch",
+        type: "button",
+        ...o,
+        children: /* @__PURE__ */ t(
+          "span",
+          {
+            className: s(
+              "inline-block h-5 w-5 rounded-full bg-[var(--md-surface)] shadow transition",
+              r ? "translate-x-5" : "translate-x-0.5"
+            )
+          }
+        )
+      }
+    ),
+    e && /* @__PURE__ */ t("span", { className: "text-sm text-[var(--text-primary)]", children: e })
+  ] })
+);
+f.displayName = "Switch";
+export {
+  f as Switch
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SwitchProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange'\n> {\n  checked?: boolean;\n  label?: string;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  ({ checked = false, onCheckedChange, label, className, ...props }, ref) => {\n    return (\n      <div className={cn('inline-flex items-center gap-2', className)}>\n        <button\n          ref={ref}\n          aria-checked={checked}\n          className={cn(\n            'relative inline-flex h-6 w-11 items-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]',\n            checked\n              ? 'border-[var(--md-primary)] bg-[var(--md-primary)]'\n              : 'border-[var(--md-outline)] bg-[var(--md-surface-container-high)]',\n          )}\n          onClick={() => onCheckedChange?.(!checked)}\n          role=\"switch\"\n          type=\"button\"\n          {...props}\n        >\n          <span\n            className={cn(\n              'inline-block h-5 w-5 rounded-full bg-[var(--md-surface)] shadow transition',\n              checked ? 'translate-x-5' : 'translate-x-0.5',\n            )}\n          />\n        </button>\n        {label && <span className=\"text-sm text-[var(--text-primary)]\">{label}</span>}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["Switch","React","checked","onCheckedChange","label","className","props","ref","cn","jsx"],"mappings":";;;AAYO,MAAMA,IAASC,EAAM;AAAA,EAC1B,CAAC,EAAE,SAAAC,IAAU,IAAO,iBAAAC,GAAiB,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAASC,wBAE9D,OAAA,EAAI,WAAWC,EAAG,kCAAkCH,CAAS,GAC5D,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,gBAAcL;AAAA,QACd,WAAWM;AAAA,UACT;AAAA,UACAN,IACI,sDACA;AAAA,QAAA;AAAA,QAEN,SAAS,MAAMC,KAAA,gBAAAA,EAAkB,CAACD;AAAA,QAClC,MAAK;AAAA,QACL,MAAK;AAAA,QACJ,GAAGI;AAAA,QAEJ,UAAA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAN,IAAU,kBAAkB;AAAA,YAAA;AAAA,UAC9B;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAEDE,KAAS,gBAAAK,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAAL,EAAA,CAAM;AAAA,EAAA,GACxE;AAGN;AAEAJ,EAAO,cAAc;"}

package/dist/components/Switch/Switch.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Switch } from './Switch';
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const Playground: Story;
+export declare const Controlled: Story;
+export declare const States: Story;

package/dist/components/Table/Table.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as d } from "../../utils/cn.js";
+const b = ({ className: e, children: o, ...a }) => /* @__PURE__ */ r("div", { className: "overflow-x-auto rounded-[var(--border-radius-md)] border border-[var(--border-color)]", children: /* @__PURE__ */ r(
+  "table",
+  {
+    className: d(
+      "w-full min-w-[36rem] border-collapse bg-[var(--bg-secondary)] text-left",
+      e
+    ),
+    ...a,
+    children: o
+  }
+) });
+export {
+  b as Table
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const Table: React.FC<TableProps> = ({ className, children, ...props }) => {\n  return (\n    <div className=\"overflow-x-auto rounded-[var(--border-radius-md)] border border-[var(--border-color)]\">\n      <table\n        className={cn(\n          'w-full min-w-[36rem] border-collapse bg-[var(--bg-secondary)] text-left',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </table>\n    </div>\n  );\n};\n"],"names":["Table","className","children","props","jsx","cn"],"mappings":";;AAKO,MAAMA,IAA8B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,QAElE,gBAAAC,EAAC,OAAA,EAAI,WAAU,yFACb,UAAA,gBAAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA,GAEL;"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,62 @@
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { cn as f } from "../../utils/cn.js";
+const x = ({ items: n, defaultTabId: s }) => {
+  var b;
+  const [d, l] = p(s ?? ((b = n[0]) == null ? void 0 : b.id)), a = n.find((r) => r.id === d) ?? n[0], c = Math.max(
+    0,
+    n.findIndex((r) => r.id === (a == null ? void 0 : a.id))
+  ), t = (r) => {
+    const e = n[r];
+    if (!e)
+      return;
+    l(e.id);
+    const o = document.getElementById(`tab-${e.id}`);
+    o == null || o.focus();
+  };
+  return /* @__PURE__ */ v("div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        "aria-orientation": "horizontal",
+        className: "inline-flex flex-wrap gap-1 rounded-[var(--border-radius-md)] bg-[var(--bg-tertiary)] p-1",
+        role: "tablist",
+        children: n.map((r, e) => /* @__PURE__ */ i(
+          "button",
+          {
+            "aria-controls": `panel-${r.id}`,
+            "aria-selected": d === r.id,
+            className: f(
+              "rounded-[var(--border-radius-sm)] px-3 py-1.5 text-sm transition",
+              d === r.id ? "bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-[var(--shadow-xs)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+            ),
+            id: `tab-${r.id}`,
+            onClick: () => l(r.id),
+            onKeyDown: (o) => {
+              o.key === "ArrowRight" ? (o.preventDefault(), t((e + 1) % n.length)) : o.key === "ArrowLeft" ? (o.preventDefault(), t((e - 1 + n.length) % n.length)) : o.key === "Home" ? (o.preventDefault(), t(0)) : o.key === "End" && (o.preventDefault(), t(n.length - 1));
+            },
+            role: "tab",
+            tabIndex: e === c ? 0 : -1,
+            type: "button",
+            children: r.label
+          },
+          r.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        "aria-labelledby": `tab-${(a == null ? void 0 : a.id) ?? ""}`,
+        className: "rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4",
+        id: `panel-${(a == null ? void 0 : a.id) ?? ""}`,
+        role: "tabpanel",
+        children: a == null ? void 0 : a.content
+      }
+    )
+  ] });
+};
+export {
+  x as Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TabItem {\n  content: React.ReactNode;\n  id: string;\n  label: string;\n}\n\nexport interface TabsProps {\n  defaultTabId?: string;\n  items: TabItem[];\n}\n\nexport const Tabs: React.FC<TabsProps> = ({ items, defaultTabId }) => {\n  const [activeTab, setActiveTab] = useState(defaultTabId ?? items[0]?.id);\n  const selected = items.find((item) => item.id === activeTab) ?? items[0];\n  const selectedIndex = Math.max(\n    0,\n    items.findIndex((item) => item.id === selected?.id),\n  );\n\n  const moveFocus = (nextIndex: number) => {\n    const item = items[nextIndex];\n    if (!item) {\n      return;\n    }\n    setActiveTab(item.id);\n    const tab = document.getElementById(`tab-${item.id}`);\n    tab?.focus();\n  };\n\n  return (\n    <div className=\"grid gap-3\">\n      <div\n        aria-orientation=\"horizontal\"\n        className=\"inline-flex flex-wrap gap-1 rounded-[var(--border-radius-md)] bg-[var(--bg-tertiary)] p-1\"\n        role=\"tablist\"\n      >\n        {items.map((item, index) => (\n          <button\n            aria-controls={`panel-${item.id}`}\n            aria-selected={activeTab === item.id}\n            className={cn(\n              'rounded-[var(--border-radius-sm)] px-3 py-1.5 text-sm transition',\n              activeTab === item.id\n                ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-[var(--shadow-xs)]'\n                : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',\n            )}\n            id={`tab-${item.id}`}\n            key={item.id}\n            onClick={() => setActiveTab(item.id)}\n            onKeyDown={(e) => {\n              if (e.key === 'ArrowRight') {\n                e.preventDefault();\n                moveFocus((index + 1) % items.length);\n              } else if (e.key === 'ArrowLeft') {\n                e.preventDefault();\n                moveFocus((index - 1 + items.length) % items.length);\n              } else if (e.key === 'Home') {\n                e.preventDefault();\n                moveFocus(0);\n              } else if (e.key === 'End') {\n                e.preventDefault();\n                moveFocus(items.length - 1);\n              }\n            }}\n            role=\"tab\"\n            tabIndex={index === selectedIndex ? 0 : -1}\n            type=\"button\"\n          >\n            {item.label}\n          </button>\n        ))}\n      </div>\n      <div\n        aria-labelledby={`tab-${selected?.id ?? ''}`}\n        className=\"rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4\"\n        id={`panel-${selected?.id ?? ''}`}\n        role=\"tabpanel\"\n      >\n        {selected?.content}\n      </div>\n    </div>\n  );\n};\n"],"names":["Tabs","items","defaultTabId","activeTab","setActiveTab","useState","_a","selected","item","selectedIndex","moveFocus","nextIndex","tab","jsxs","jsx","index","cn","e"],"mappings":";;;AAeO,MAAMA,IAA4B,CAAC,EAAE,OAAAC,GAAO,cAAAC,QAAmB;;AACpE,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAASH,OAAgBI,IAAAL,EAAM,CAAC,MAAP,gBAAAK,EAAU,GAAE,GACjEC,IAAWN,EAAM,KAAK,CAACO,MAASA,EAAK,OAAOL,CAAS,KAAKF,EAAM,CAAC,GACjEQ,IAAgB,KAAK;AAAA,IACzB;AAAA,IACAR,EAAM,UAAU,CAACO,MAASA,EAAK,QAAOD,KAAA,gBAAAA,EAAU,GAAE;AAAA,EAAA,GAG9CG,IAAY,CAACC,MAAsB;AACvC,UAAMH,IAAOP,EAAMU,CAAS;AAC5B,QAAI,CAACH;AACH;AAEF,IAAAJ,EAAaI,EAAK,EAAE;AACpB,UAAMI,IAAM,SAAS,eAAe,OAAOJ,EAAK,EAAE,EAAE;AACpD,IAAAI,KAAA,QAAAA,EAAK;AAAA,EACP;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,oBAAiB;AAAA,QACjB,WAAU;AAAA,QACV,MAAK;AAAA,QAEJ,UAAAb,EAAM,IAAI,CAACO,GAAMO,MAChB,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,iBAAe,SAASN,EAAK,EAAE;AAAA,YAC/B,iBAAeL,MAAcK,EAAK;AAAA,YAClC,WAAWQ;AAAA,cACT;AAAA,cACAb,MAAcK,EAAK,KACf,kFACA;AAAA,YAAA;AAAA,YAEN,IAAI,OAAOA,EAAK,EAAE;AAAA,YAElB,SAAS,MAAMJ,EAAaI,EAAK,EAAE;AAAA,YACnC,WAAW,CAACS,MAAM;AAChB,cAAIA,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACFP,GAAWK,IAAQ,KAAKd,EAAM,MAAM,KAC3BgB,EAAE,QAAQ,eACnBA,EAAE,eAAA,GACFP,GAAWK,IAAQ,IAAId,EAAM,UAAUA,EAAM,MAAM,KAC1CgB,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACFP,EAAU,CAAC,KACFO,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACFP,EAAUT,EAAM,SAAS,CAAC;AAAA,YAE9B;AAAA,YACA,MAAK;AAAA,YACL,UAAUc,MAAUN,IAAgB,IAAI;AAAA,YACxC,MAAK;AAAA,YAEJ,UAAAD,EAAK;AAAA,UAAA;AAAA,UArBDA,EAAK;AAAA,QAAA,CAuBb;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiB,QAAOP,KAAA,gBAAAA,EAAU,OAAM,EAAE;AAAA,QAC1C,WAAU;AAAA,QACV,IAAI,UAASA,KAAA,gBAAAA,EAAU,OAAM,EAAE;AAAA,QAC/B,MAAK;AAAA,QAEJ,UAAAA,KAAA,gBAAAA,EAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACb,GACF;AAEJ;"}

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Playground: Story;
+export declare const DefaultTab: Story;
+export declare const ManyTabs: Story;

package/dist/components/Tag/Tag.js

@@ -0,0 +1,29 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { cn as s } from "../../utils/cn.js";
+const l = ({ className: e, children: t, onRemove: r, ...a }) => /* @__PURE__ */ o(
+  "span",
+  {
+    className: s(
+      "inline-flex items-center gap-1 rounded-[var(--border-radius-sm)] border border-[var(--border-color)] bg-[var(--bg-secondary)] px-2.5 py-1 text-xs text-[var(--text-secondary)]",
+      e
+    ),
+    ...a,
+    children: [
+      t,
+      r && /* @__PURE__ */ n(
+        "button",
+        {
+          "aria-label": "Remover tag",
+          className: "inline-flex h-4 w-4 items-center justify-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+          onClick: r,
+          type: "button",
+          children: "×"
+        }
+      )
+    ]
+  }
+);
+export {
+  l as Tag
+};
+//# sourceMappingURL=Tag.js.map

package/dist/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {\n  onRemove?: () => void;\n}\n\nexport const Tag: React.FC<TagProps> = ({ className, children, onRemove, ...props }) => {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1 rounded-[var(--border-radius-sm)] border border-[var(--border-color)] bg-[var(--bg-secondary)] px-2.5 py-1 text-xs text-[var(--text-secondary)]',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          aria-label=\"Remover tag\"\n          className=\"inline-flex h-4 w-4 items-center justify-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]\"\n          onClick={onRemove}\n          type=\"button\"\n        >\n          ×\n        </button>\n      )}\n    </span>\n  );\n};\n"],"names":["Tag","className","children","onRemove","props","jsxs","cn","jsx"],"mappings":";;AAOO,MAAMA,IAA0B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,GAAGC,QAExE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,IAEH,UAAA;AAAA,MAAAF;AAAA,MACAC,KACC,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,cAAW;AAAA,UACX,WAAU;AAAA,UACV,SAASJ;AAAA,UACT,MAAK;AAAA,UACN,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAAA;"}

package/dist/components/Textarea/Textarea.d.ts

@@ -1,7 +1,7 @@
-import type React from 'react';
+import React from 'react';
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
     error?: string;
     helperText?: string;
     label?: string;
 }
-export declare const Textarea: React.FC<TextareaProps>;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,46 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import m from "react";
+import { cn as l } from "../../utils/cn.js";
+const v = m.forwardRef(
+  ({ label: t, helperText: o, error: a, className: d, id: s, ...i }, n) => {
+    const r = s || `textarea-${Math.random().toString(36).slice(2, 9)}`;
+    return /* @__PURE__ */ c("div", { className: "grid gap-1", children: [
+      t && /* @__PURE__ */ e(
+        "label",
+        {
+          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+          htmlFor: r,
+          children: t
+        }
+      ),
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          ref: n,
+          "aria-describedby": a ? `${r}-error` : o ? `${r}-helper` : void 0,
+          "aria-invalid": a ? !0 : void 0,
+          className: l(
+            "min-h-24 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:opacity-60",
+            a && "border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]",
+            d
+          ),
+          id: r,
+          ...i
+        }
+      ),
+      a ? /* @__PURE__ */ e("span", { className: "text-xs text-[var(--md-error)]", id: `${r}-error`, role: "alert", children: a }) : o && /* @__PURE__ */ e(
+        "span",
+        {
+          className: "text-xs text-[var(--md-on-surface-variant)]",
+          id: `${r}-helper`,
+          children: o
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "Textarea";
+export {
+  v as Textarea
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  error?: string;\n  helperText?: string;\n  label?: string;\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ label, helperText, error, className, id, ...props }, ref) => {\n    const textareaId = id || `textarea-${Math.random().toString(36).slice(2, 9)}`;\n\n    return (\n      <div className=\"grid gap-1\">\n        {label && (\n          <label\n            className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n            htmlFor={textareaId}\n          >\n            {label}\n          </label>\n        )}\n        <textarea\n          ref={ref}\n          aria-describedby={\n            error ? `${textareaId}-error` : helperText ? `${textareaId}-helper` : undefined\n          }\n          aria-invalid={error ? true : undefined}\n          className={cn(\n            'min-h-24 w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] px-3.5 py-2 text-[var(--md-on-surface)] outline-none transition placeholder:text-[var(--md-on-surface-variant)] focus:border-[var(--border-color-focus)] focus:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)] disabled:cursor-not-allowed disabled:opacity-60',\n            error &&\n              'border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]',\n            className,\n          )}\n          id={textareaId}\n          {...props}\n        />\n        {error ? (\n          <span className=\"text-xs text-[var(--md-error)]\" id={`${textareaId}-error`} role=\"alert\">\n            {error}\n          </span>\n        ) : (\n          helperText && (\n            <span\n              className=\"text-xs text-[var(--md-on-surface-variant)]\"\n              id={`${textareaId}-helper`}\n            >\n              {helperText}\n            </span>\n          )\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":["Textarea","React","label","helperText","error","className","id","props","ref","textareaId","jsxs","jsx","cn"],"mappings":";;;AASO,MAAMA,IAAWC,EAAM;AAAA,EAC5B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AAC9D,UAAMC,IAAaH,KAAM,YAAY,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAE3E,WACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,MAAAR,KACC,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASF;AAAA,UAER,UAAAP;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAH;AAAA,UACA,oBACEJ,IAAQ,GAAGK,CAAU,WAAWN,IAAa,GAAGM,CAAU,YAAY;AAAA,UAExE,gBAAcL,IAAQ,KAAO;AAAA,UAC7B,WAAWQ;AAAA,YACT;AAAA,YACAR,KACE;AAAA,YACFC;AAAA,UAAA;AAAA,UAEF,IAAII;AAAA,UACH,GAAGF;AAAA,QAAA;AAAA,MAAA;AAAA,MAELH,IACC,gBAAAO,EAAC,QAAA,EAAK,WAAU,kCAAiC,IAAI,GAAGF,CAAU,UAAU,MAAK,SAC9E,UAAAL,EAAA,CACH,IAEAD,KACE,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGF,CAAU;AAAA,UAEhB,UAAAN;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAGN;AAAA,EAEJ;AACF;AAEAH,EAAS,cAAc;"}

package/dist/components/Textarea/Textarea.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from './Textarea';
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+export declare const Playground: Story;
+export declare const States: Story;

package/dist/components/Title/Title.js

@@ -0,0 +1,47 @@
+import { jsx as d } from "react/jsx-runtime";
+const b = ({
+  as: t = "h1",
+  size: e = "2xl",
+  weight: o = "bold",
+  align: a = "left",
+  gradient: r = !1,
+  italic: n = !1,
+  children: i,
+  className: l = "",
+  ...s
+}) => {
+  const x = t, f = {
+    xs: "text-[var(--font-size-sm)]",
+    sm: "text-[var(--font-size-base)]",
+    md: "text-[var(--font-size-lg)]",
+    lg: "text-[var(--font-size-xl)]",
+    xl: "text-[var(--font-size-2xl)]",
+    "2xl": "text-[var(--font-size-3xl)]",
+    "3xl": "text-[var(--font-size-4xl)]",
+    "4xl": "text-[3rem]"
+  }, g = {
+    light: "font-[var(--font-weight-light)]",
+    normal: "font-[var(--font-weight-normal)]",
+    medium: "font-[var(--font-weight-medium)]",
+    semibold: "font-[var(--font-weight-semibold)]",
+    bold: "font-[var(--font-weight-bold)]",
+    extrabold: "font-extrabold"
+  }, m = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }, c = r ? "bg-[linear-gradient(135deg,var(--text-primary)_0%,var(--primary-color)_50%,var(--secondary-color)_100%)] bg-clip-text text-transparent" : "", v = [
+    "m-0 leading-[var(--line-height-tight)] text-[var(--text-primary)] transition-[var(--transition-colors)]",
+    f[e],
+    g[o],
+    m[a],
+    n ? "italic" : "not-italic",
+    c,
+    l
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ d(x, { className: v, ...s, children: i });
+};
+export {
+  b as Title
+};
+//# sourceMappingURL=Title.js.map

package/dist/components/Title/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  align?: 'left' | 'center' | 'right';\n  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  children: React.ReactNode;\n  gradient?: boolean;\n  italic?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\n  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';\n}\n\nexport const Title: React.FC<TitleProps> = ({\n  as = 'h1',\n  size = '2xl',\n  weight = 'bold',\n  align = 'left',\n  gradient = false,\n  italic = false,\n  children,\n  className = '',\n  ...props\n}) => {\n  const Component = as;\n  const sizeClassMap: Record<NonNullable<TitleProps['size']>, string> = {\n    xs: 'text-[var(--font-size-sm)]',\n    sm: 'text-[var(--font-size-base)]',\n    md: 'text-[var(--font-size-lg)]',\n    lg: 'text-[var(--font-size-xl)]',\n    xl: 'text-[var(--font-size-2xl)]',\n    '2xl': 'text-[var(--font-size-3xl)]',\n    '3xl': 'text-[var(--font-size-4xl)]',\n    '4xl': 'text-[3rem]',\n  };\n  const weightClassMap: Record<NonNullable<TitleProps['weight']>, string> = {\n    light: 'font-[var(--font-weight-light)]',\n    normal: 'font-[var(--font-weight-normal)]',\n    medium: 'font-[var(--font-weight-medium)]',\n    semibold: 'font-[var(--font-weight-semibold)]',\n    bold: 'font-[var(--font-weight-bold)]',\n    extrabold: 'font-extrabold',\n  };\n  const alignClassMap: Record<NonNullable<TitleProps['align']>, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  };\n  const gradientClass = gradient\n    ? 'bg-[linear-gradient(135deg,var(--text-primary)_0%,var(--primary-color)_50%,var(--secondary-color)_100%)] bg-clip-text text-transparent'\n    : '';\n  const combinedClass = [\n    'm-0 leading-[var(--line-height-tight)] text-[var(--text-primary)] transition-[var(--transition-colors)]',\n    sizeClassMap[size],\n    weightClassMap[weight],\n    alignClassMap[align],\n    italic ? 'italic' : 'not-italic',\n    gradientClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Component className={combinedClass} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["Title","as","size","weight","align","gradient","italic","children","className","props","Component","sizeClassMap","weightClassMap","alignClassMap","gradientClass","combinedClass"],"mappings":";AAYO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,IAAAC,IAAK;AAAA,EACL,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,GACZU,IAAgE;AAAA,IACpE,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EAAA,GAEHC,IAAoE;AAAA,IACxE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,EAAA,GAEPC,IAAkE;AAAA,IACtE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA,GAEHC,IAAgBT,IAClB,2IACA,IACEU,IAAgB;AAAA,IACpB;AAAA,IACAJ,EAAaT,CAAI;AAAA,IACjBU,EAAeT,CAAM;AAAA,IACrBU,EAAcT,CAAK;AAAA,IACnBE,IAAS,WAAW;AAAA,IACpBQ;AAAA,IACAN;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACGE,GAAA,EAAU,WAAWK,GAAgB,GAAGN,GACtC,UAAAF,GACH;AAEJ;"}

package/dist/components/Toast/Toast.js

@@ -0,0 +1,110 @@
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import { useState as x, useRef as p, useCallback as b, useEffect as w, useMemo as g, useContext as h, createContext as T } from "react";
+import { cn as y } from "../../utils/cn.js";
+const N = ({
+  tone: e = "info",
+  title: o,
+  description: c,
+  onDismiss: s,
+  className: n,
+  ...i
+}) => {
+  const d = {
+    info: "border-[var(--info-color)]/40",
+    success: "border-[var(--success-color)]/40",
+    warning: "border-[var(--warning-color)]/40",
+    error: "border-[var(--md-error)]/40"
+  }[e], l = e === "error" || e === "warning" ? "assertive" : "polite", r = e === "error" || e === "warning" ? "alert" : "status";
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: y(
+        "w-[22rem] rounded-[var(--border-radius-md)] border bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-lg)]",
+        d,
+        n
+      ),
+      "aria-atomic": "true",
+      "aria-live": l,
+      onKeyDown: (t) => {
+        t.key === "Escape" && (s == null || s());
+      },
+      role: r,
+      tabIndex: 0,
+      ...i,
+      children: [
+        /* @__PURE__ */ v("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ a("p", { className: "m-0 text-sm font-semibold text-[var(--text-primary)]", children: o }),
+          s && /* @__PURE__ */ a(
+            "button",
+            {
+              "aria-label": "Fechar notificação",
+              className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--border-radius-sm)] text-[var(--text-secondary)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]",
+              onClick: s,
+              type: "button",
+              children: /* @__PURE__ */ a("span", { "aria-hidden": !0, children: "×" })
+            }
+          )
+        ] }),
+        c && /* @__PURE__ */ a("p", { className: "mt-1 text-sm text-[var(--text-secondary)]", children: c })
+      ]
+    }
+  );
+}, f = T(void 0), I = ({ children: e, durationMs: o = 4e3 }) => {
+  const [c, s] = x([]), n = p(/* @__PURE__ */ new Map()), i = b((r) => {
+    const t = n.current.get(r);
+    t && (window.clearTimeout(t), n.current.delete(r)), s((u) => u.filter((m) => m.id !== r));
+  }, []), d = b(
+    (r) => {
+      const t = r.id ?? `toast-${Math.random().toString(36).slice(2, 9)}`;
+      s((m) => [...m, { ...r, id: t }]);
+      const u = window.setTimeout(() => i(t), o);
+      n.current.set(t, u);
+    },
+    [i, o]
+  );
+  w(() => {
+    const r = n.current;
+    return () => {
+      r.forEach((t) => window.clearTimeout(t)), r.clear();
+    };
+  }, []);
+  const l = g(
+    () => ({ toasts: c, pushToast: d, dismissToast: i }),
+    [c, d, i]
+  );
+  return /* @__PURE__ */ v(f.Provider, { value: l, children: [
+    e,
+    /* @__PURE__ */ a(C, {})
+  ] });
+}, M = () => {
+  const e = h(f);
+  if (!e)
+    throw new Error("useToast must be used inside ToastProvider");
+  return e;
+}, C = () => {
+  const e = h(f);
+  return !e || e.toasts.length === 0 ? null : /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-label": "Notificações",
+      className: "pointer-events-none fixed bottom-4 right-4 z-[1200] grid gap-2",
+      role: "region",
+      children: e.toasts.map((o) => /* @__PURE__ */ a(
+        N,
+        {
+          ...o,
+          className: "pointer-events-auto",
+          onDismiss: () => e.dismissToast(o.id)
+        },
+        o.id
+      ))
+    }
+  );
+};
+export {
+  N as Toast,
+  I as ToastProvider,
+  C as ToastViewport,
+  M as useToast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import type React from 'react';\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  id?: string;\n  description?: React.ReactNode;\n  onDismiss?: () => void;\n  title: React.ReactNode;\n  tone?: 'info' | 'success' | 'warning' | 'error';\n}\n\nexport const Toast: React.FC<ToastProps> = ({\n  tone = 'info',\n  title,\n  description,\n  onDismiss,\n  className,\n  ...props\n}) => {\n  const toneClass = {\n    info: 'border-[var(--info-color)]/40',\n    success: 'border-[var(--success-color)]/40',\n    warning: 'border-[var(--warning-color)]/40',\n    error: 'border-[var(--md-error)]/40',\n  }[tone];\n  const liveMode = tone === 'error' || tone === 'warning' ? 'assertive' : 'polite';\n  const role = tone === 'error' || tone === 'warning' ? 'alert' : 'status';\n\n  return (\n    <div\n      className={cn(\n        'w-[22rem] rounded-[var(--border-radius-md)] border bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-lg)]',\n        toneClass,\n        className,\n      )}\n      aria-atomic=\"true\"\n      aria-live={liveMode}\n      onKeyDown={(event) => {\n        if (event.key === 'Escape') {\n          onDismiss?.();\n        }\n      }}\n      role={role}\n      tabIndex={0}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-2\">\n        <p className=\"m-0 text-sm font-semibold text-[var(--text-primary)]\">{title}</p>\n        {onDismiss && (\n          <button\n            aria-label=\"Fechar notificação\"\n            className=\"inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--border-radius-sm)] text-[var(--text-secondary)] transition hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]\"\n            onClick={onDismiss}\n            type=\"button\"\n          >\n            <span aria-hidden>×</span>\n          </button>\n        )}\n      </div>\n      {description && <p className=\"mt-1 text-sm text-[var(--text-secondary)]\">{description}</p>}\n    </div>\n  );\n};\n\ninterface ToastContextValue {\n  dismissToast: (id: string) => void;\n  pushToast: (toast: Omit<ToastProps, 'id'> & { id?: string }) => void;\n  toasts: Array<ToastProps & { id: string }>;\n}\n\nconst ToastContext = createContext<ToastContextValue | undefined>(undefined);\n\nexport interface ToastProviderProps {\n  children: React.ReactNode;\n  durationMs?: number;\n}\n\nexport const ToastProvider: React.FC<ToastProviderProps> = ({ children, durationMs = 4000 }) => {\n  const [toasts, setToasts] = useState<Array<ToastProps & { id: string }>>([]);\n  const timeoutIdsRef = useRef<Map<string, number>>(new Map());\n\n  const dismissToast = useCallback((id: string) => {\n    const timeoutId = timeoutIdsRef.current.get(id);\n    if (timeoutId) {\n      window.clearTimeout(timeoutId);\n      timeoutIdsRef.current.delete(id);\n    }\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const pushToast = useCallback(\n    (toast: Omit<ToastProps, 'id'> & { id?: string }) => {\n      const id = toast.id ?? `toast-${Math.random().toString(36).slice(2, 9)}`;\n      setToasts((prev) => [...prev, { ...toast, id }]);\n      const timeoutId = window.setTimeout(() => dismissToast(id), durationMs);\n      timeoutIdsRef.current.set(id, timeoutId);\n    },\n    [dismissToast, durationMs],\n  );\n\n  useEffect(() => {\n    const ids = timeoutIdsRef.current;\n    return () => {\n      ids.forEach((timeoutId) => window.clearTimeout(timeoutId));\n      ids.clear();\n    };\n  }, []);\n\n  const value = useMemo(\n    () => ({ toasts, pushToast, dismissToast }),\n    [toasts, pushToast, dismissToast],\n  );\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <ToastViewport />\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = (): ToastContextValue => {\n  const context = useContext(ToastContext);\n  if (!context) {\n    throw new Error('useToast must be used inside ToastProvider');\n  }\n  return context;\n};\n\nexport const ToastViewport: React.FC = () => {\n  const context = useContext(ToastContext);\n  if (!context || context.toasts.length === 0) {\n    return null;\n  }\n  return (\n    <div\n      aria-label=\"Notificações\"\n      className=\"pointer-events-none fixed bottom-4 right-4 z-[1200] grid gap-2\"\n      role=\"region\"\n    >\n      {context.toasts.map((toast) => (\n        <Toast\n          key={toast.id}\n          {...toast}\n          className=\"pointer-events-auto\"\n          onDismiss={() => context.dismissToast(toast.id)}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["Toast","tone","title","description","onDismiss","className","props","toneClass","liveMode","role","jsxs","cn","event","jsx","ToastContext","createContext","ToastProvider","children","durationMs","toasts","setToasts","useState","timeoutIdsRef","useRef","dismissToast","useCallback","id","timeoutId","prev","toast","pushToast","useEffect","ids","value","useMemo","ToastViewport","useToast","context","useContext"],"mappings":"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"}

package/dist/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toast } from './Toast';
+declare const meta: Meta<typeof Toast>;
+export default meta;
+type Story = StoryObj<typeof Toast>;
+export declare const Playground: Story;
+export declare const AllTones: Story;
+export declare const WithProvider: Story;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,36 @@
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { useState as f, useId as m, isValidElement as u } from "react";
+import { cn as x } from "../../utils/cn.js";
+const g = ({ children: t, content: r, side: i = "top" }) => {
+  const [o, e] = f(!1), a = m(), l = i === "top" ? "bottom-full mb-2 left-1/2 -translate-x-1/2" : "top-full mt-2 left-1/2 -translate-x-1/2", n = {
+    "aria-describedby": a,
+    onBlur: () => e(!1),
+    onFocus: () => e(!0),
+    onKeyDown: (c) => {
+      c.key === "Escape" && e(!1);
+    },
+    onMouseEnter: () => e(!0),
+    onMouseLeave: () => e(!1)
+  }, p = u(t) ? /* @__PURE__ */ s("span", { className: "inline-flex", ...n, children: t }) : /* @__PURE__ */ s("span", { className: "inline-flex", tabIndex: 0, ...n, children: t });
+  return /* @__PURE__ */ d("span", { className: "relative inline-flex", children: [
+    p,
+    /* @__PURE__ */ s(
+      "span",
+      {
+        "aria-hidden": !o,
+        className: x(
+          "pointer-events-none absolute z-20 whitespace-nowrap rounded bg-[var(--brand-cinza-escuro)] px-2 py-1 text-xs text-white shadow-[var(--shadow-sm)] transition",
+          o ? "opacity-100" : "opacity-0",
+          l
+        ),
+        id: a,
+        role: "tooltip",
+        children: r
+      }
+    )
+  ] });
+};
+export {
+  g as Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import type React from 'react';\nimport { isValidElement, useId, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface TooltipProps {\n  children: React.ReactNode;\n  content: React.ReactNode;\n  side?: 'top' | 'bottom';\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, content, side = 'top' }) => {\n  const [open, setOpen] = useState(false);\n  const tooltipId = useId();\n  const sideClass =\n    side === 'top'\n      ? 'bottom-full mb-2 left-1/2 -translate-x-1/2'\n      : 'top-full mt-2 left-1/2 -translate-x-1/2';\n\n  const triggerProps = {\n    'aria-describedby': tooltipId,\n    onBlur: () => setOpen(false),\n    onFocus: () => setOpen(true),\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpen(false);\n      }\n    },\n    onMouseEnter: () => setOpen(true),\n    onMouseLeave: () => setOpen(false),\n  };\n\n  const trigger = isValidElement(children) ? (\n    <span className=\"inline-flex\" {...triggerProps}>\n      {children}\n    </span>\n  ) : (\n    <span className=\"inline-flex\" tabIndex={0} {...triggerProps}>\n      {children}\n    </span>\n  );\n\n  return (\n    <span className=\"relative inline-flex\">\n      {trigger}\n      <span\n        aria-hidden={!open}\n        className={cn(\n          'pointer-events-none absolute z-20 whitespace-nowrap rounded bg-[var(--brand-cinza-escuro)] px-2 py-1 text-xs text-white shadow-[var(--shadow-sm)] transition',\n          open ? 'opacity-100' : 'opacity-0',\n          sideClass,\n        )}\n        id={tooltipId}\n        role=\"tooltip\"\n      >\n        {content}\n      </span>\n    </span>\n  );\n};\n"],"names":["Tooltip","children","content","side","open","setOpen","useState","tooltipId","useId","sideClass","triggerProps","event","trigger","isValidElement","jsx","jsxs","cn"],"mappings":";;;AAUO,MAAMA,IAAkC,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,MAAAC,IAAO,YAAY;AACtF,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChCC,IAAYC,EAAA,GACZC,IACJN,MAAS,QACL,+CACA,2CAEAO,IAAe;AAAA,IACnB,oBAAoBH;AAAA,IACpB,QAAQ,MAAMF,EAAQ,EAAK;AAAA,IAC3B,SAAS,MAAMA,EAAQ,EAAI;AAAA,IAC3B,WAAW,CAACM,MAA+B;AACzC,MAAIA,EAAM,QAAQ,YAChBN,EAAQ,EAAK;AAAA,IAEjB;AAAA,IACA,cAAc,MAAMA,EAAQ,EAAI;AAAA,IAChC,cAAc,MAAMA,EAAQ,EAAK;AAAA,EAAA,GAG7BO,IAAUC,EAAeZ,CAAQ,sBACpC,QAAA,EAAK,WAAU,eAAe,GAAGS,GAC/B,UAAAT,GACH,IAEA,gBAAAa,EAAC,UAAK,WAAU,eAAc,UAAU,GAAI,GAAGJ,GAC5C,UAAAT,GACH;AAGF,SACE,gBAAAc,EAAC,QAAA,EAAK,WAAU,wBACb,UAAA;AAAA,IAAAH;AAAA,IACD,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAa,CAACV;AAAA,QACd,WAAWY;AAAA,UACT;AAAA,UACAZ,IAAO,gBAAgB;AAAA,UACvBK;AAAA,QAAA;AAAA,QAEF,IAAIF;AAAA,QACJ,MAAK;AAAA,QAEJ,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/index.d.ts

@@ -15,22 +15,27 @@
 import './tailwind.css';
 import './theme/theme.css';
 export { Accordion, type AccordionItem, type AccordionProps, } from './components/Accordion/Accordion';
-export { Button, type ButtonPalette, type ButtonProps, } from './components/Button/Button';
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, } from './components/Breadcrumb/Breadcrumb';
+export { Combobox, type ComboboxOption, type ComboboxProps } from './components/Combobox/Combobox';
+export { FileUpload, type FileUploadProps } from './components/FileUpload/FileUpload';
+export { NumberInput, type NumberInputProps } from './components/NumberInput/NumberInput';
+export { Stepper, type StepperItem, type StepperProps, type StepStatus, } from './components/Stepper/Stepper';
+export { Button, type ButtonPalette, type ButtonProps } from './components/Button/Button';
 export { Alert, type AlertProps } from './components/Alert/Alert';
 export { Badge, type BadgeProps } from './components/Badge/Badge';
 export { Card, type CardProps } from './components/Card/Card';
 export { Checkbox, type CheckboxProps } from './components/Checkbox/Checkbox';
 export { Chip, type ChipProps } from './components/Chip/Chip';
 export { Divider, type DividerProps } from './components/Divider/Divider';
-export { EmptyState, type EmptyStateProps, } from './components/EmptyState/EmptyState';
+export { EmptyState, type EmptyStateProps } from './components/EmptyState/EmptyState';
 export { Footer, type FooterProps } from './components/Footer/Footer';
 export { Header, type HeaderProps } from './components/Header/Header';
 export { Input, type InputProps } from './components/Input/Input';
 export { Container, Grid, Stack, type ContainerProps, type GridProps, type StackProps, } from './components/Layout/Layout';
 export { Modal, type ModalProps } from './components/Modal/Modal';
 export { Sidebar, Topbar, type SidebarProps, type TopbarProps, } from './components/Navigation/Navigation';
-export { Pagination, type PaginationProps, } from './components/Pagination/Pagination';
-export { Paragraph, type ParagraphProps, } from './components/Paragraph/Paragraph';
+export { Pagination, type PaginationProps } from './components/Pagination/Pagination';
+export { Paragraph, type ParagraphProps } from './components/Paragraph/Paragraph';
 export { PageHeader, type PageHeaderProps } from './components/PageHeader/PageHeader';
 export { Popover, type PopoverProps } from './components/Popover/Popover';
 export { Radio, type RadioProps } from './components/Radio/Radio';
@@ -46,4 +51,4 @@ export { Textarea, type TextareaProps } from './components/Textarea/Textarea';
 export { Toast, ToastProvider, ToastViewport, type ToastProps, type ToastProviderProps, useToast, } from './components/Toast/Toast';
 export { Title, type TitleProps } from './components/Title/Title';
 export { Tooltip, type TooltipProps } from './components/Tooltip/Tooltip';
-export { type Theme, ThemeProvider, useTheme, } from './theme/ThemeProvider';
+export { type Theme, ThemeProvider, useTheme } from './theme/ThemeProvider';