@sbkbs/ui 1.0.6 → 2.0.0

package/dist/components/Accordion/Accordion.js

@@ -1,56 +1,104 @@
-import { jsx as l, jsxs as p } from "react/jsx-runtime";
-import { useState as h, useRef as v } from "react";
-import { cn as w } from "../../utils/cn.js";
-const A = ({ items: g, defaultOpenId: b }) => {
-  const [x, y] = h(b ?? null), o = v(null);
-  return /* @__PURE__ */ l("div", { className: "grid gap-2", ref: o, children: g.map((t) => {
-    const n = x === t.id, d = `accordion-trigger-${t.id}`, i = `accordion-panel-${t.id}`;
-    return /* @__PURE__ */ p(
-      "div",
-      {
-        className: "overflow-hidden rounded-[var(--border-radius-md)] border border-[var(--border-color)]",
-        children: [
-          /* @__PURE__ */ p(
-            "button",
-            {
-              "aria-controls": i,
-              "aria-expanded": n,
-              className: "flex w-full items-center justify-between bg-[var(--bg-secondary)] px-4 py-3 text-left text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
-              id: d,
-              onKeyDown: (r) => {
-                var s, c, u, f;
-                if (!o.current)
-                  return;
-                const e = Array.from(
-                  o.current.querySelectorAll('[id^="accordion-trigger-"]')
-                ), a = e.findIndex((m) => m.id === d);
-                a === -1 || e.length === 0 || (r.key === "ArrowDown" ? (r.preventDefault(), (s = e[(a + 1) % e.length]) == null || s.focus()) : r.key === "ArrowUp" ? (r.preventDefault(), (c = e[(a - 1 + e.length) % e.length]) == null || c.focus()) : r.key === "Home" ? (r.preventDefault(), (u = e[0]) == null || u.focus()) : r.key === "End" && (r.preventDefault(), (f = e[e.length - 1]) == null || f.focus()));
-              },
-              onClick: () => y((r) => r === t.id ? null : t.id),
-              type: "button",
-              children: [
-                t.title,
-                /* @__PURE__ */ l("span", { className: w("transition", n ? "rotate-180" : ""), children: "⌄" })
-              ]
-            }
-          ),
-          n && /* @__PURE__ */ l(
-            "div",
-            {
-              "aria-labelledby": d,
-              className: "bg-[var(--bg-tertiary)] px-4 py-3 text-sm text-[var(--text-secondary)]",
-              id: i,
-              role: "region",
-              children: t.content
-            }
-          )
-        ]
-      },
-      t.id
-    );
-  }) });
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
+import { useState as w, useRef as v, useId as N } from "react";
+import { ChevronDown as A } from "lucide-react";
+import { cn as n } from "../../utils/cn.js";
+import { transitionColors as I, buttonReset as D } from "../../utils/styles.js";
+const $ = ({
+  items: f,
+  defaultOpenId: i,
+  defaultOpenIds: g,
+  type: m = "single",
+  variant: d = "separated",
+  className: p
+}) => {
+  const [h, k] = w(
+    g ?? (i ? [i] : [])
+  ), a = v(null), l = N(), x = (e) => k(
+    (o) => o.includes(e) ? o.filter((t) => t !== e) : m === "single" ? [e] : [...o, e]
+  ), y = (e) => {
+    var c, u;
+    const o = Array.from(
+      ((c = a.current) == null ? void 0 : c.querySelectorAll(
+        "[data-accordion-trigger]:not(:disabled)"
+      )) ?? []
+    ), t = o.indexOf(e.currentTarget), r = {
+      ArrowDown: (t + 1) % o.length,
+      ArrowUp: (t - 1 + o.length) % o.length,
+      Home: 0,
+      End: o.length - 1
+    };
+    e.key in r && (e.preventDefault(), (u = o[r[e.key]]) == null || u.focus());
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      className: n(
+        d === "separated" ? "grid gap-2" : "divide-y divide-sbk-line overflow-hidden rounded-sbk-sm border border-sbk-line",
+        p
+      ),
+      children: f.map((e) => {
+        const o = h.includes(e.id), t = `${l}-trigger-${e.id}`, r = `${l}-panel-${e.id}`;
+        return /* @__PURE__ */ b(
+          "div",
+          {
+            className: n(
+              d === "separated" && "overflow-hidden rounded-sbk-sm border border-sbk-line",
+              "bg-sbk-surface"
+            ),
+            children: [
+              /* @__PURE__ */ s("h3", { className: "m-0", children: /* @__PURE__ */ b(
+                "button",
+                {
+                  "aria-controls": r,
+                  "aria-expanded": o,
+                  className: n(
+                    D,
+                    "flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-sm font-semibold text-sbk-fg hover:bg-sbk-surface-hover disabled:cursor-not-allowed disabled:opacity-50",
+                    "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid",
+                    I
+                  ),
+                  "data-accordion-trigger": "",
+                  disabled: e.disabled,
+                  id: t,
+                  onClick: () => x(e.id),
+                  onKeyDown: y,
+                  type: "button",
+                  children: [
+                    e.title,
+                    /* @__PURE__ */ s(
+                      A,
+                      {
+                        "aria-hidden": "true",
+                        className: n(
+                          "size-4 shrink-0 text-sbk-fg-muted transition-transform duration-200 motion-reduce:transition-none",
+                          o && "rotate-180"
+                        )
+                      }
+                    )
+                  ]
+                }
+              ) }),
+              o && /* @__PURE__ */ s(
+                "div",
+                {
+                  "aria-labelledby": t,
+                  className: "px-4 pb-4 pt-1 text-sm font-light text-sbk-fg-muted animate-sbk-fade-in motion-reduce:animate-none",
+                  id: r,
+                  role: "region",
+                  children: e.content
+                }
+              )
+            ]
+          },
+          e.id
+        );
+      })
+    }
+  );
 };
+$.displayName = "Accordion";
 export {
-  A as Accordion
+  $ as Accordion
 };
 //# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type React from 'react';\nimport { useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface AccordionItem {\n  content: React.ReactNode;\n  id: string;\n  title: React.ReactNode;\n}\n\nexport interface AccordionProps {\n  defaultOpenId?: string;\n  items: AccordionItem[];\n}\n\nexport const Accordion: React.FC<AccordionProps> = ({ items, defaultOpenId }) => {\n  const [openId, setOpenId] = useState<string | null>(defaultOpenId ?? null);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <div className=\"grid gap-2\" ref={rootRef}>\n      {items.map((item) => {\n        const isOpen = openId === item.id;\n        const triggerId = `accordion-trigger-${item.id}`;\n        const panelId = `accordion-panel-${item.id}`;\n        return (\n          <div\n            className=\"overflow-hidden rounded-[var(--border-radius-md)] border border-[var(--border-color)]\"\n            key={item.id}\n          >\n            <button\n              aria-controls={panelId}\n              aria-expanded={isOpen}\n              className=\"flex w-full items-center justify-between bg-[var(--bg-secondary)] px-4 py-3 text-left text-sm font-medium text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\"\n              id={triggerId}\n              onKeyDown={(event) => {\n                if (!rootRef.current) {\n                  return;\n                }\n                const buttons = Array.from(\n                  rootRef.current.querySelectorAll<HTMLButtonElement>('[id^=\"accordion-trigger-\"]'),\n                );\n                const currentIndex = buttons.findIndex((btn) => btn.id === triggerId);\n                if (currentIndex === -1 || buttons.length === 0) {\n                  return;\n                }\n                if (event.key === 'ArrowDown') {\n                  event.preventDefault();\n                  buttons[(currentIndex + 1) % buttons.length]?.focus();\n                } else if (event.key === 'ArrowUp') {\n                  event.preventDefault();\n                  buttons[(currentIndex - 1 + buttons.length) % buttons.length]?.focus();\n                } else if (event.key === 'Home') {\n                  event.preventDefault();\n                  buttons[0]?.focus();\n                } else if (event.key === 'End') {\n                  event.preventDefault();\n                  buttons[buttons.length - 1]?.focus();\n                }\n              }}\n              onClick={() => setOpenId((prev) => (prev === item.id ? null : item.id))}\n              type=\"button\"\n            >\n              {item.title}\n              <span className={cn('transition', isOpen ? 'rotate-180' : '')}>⌄</span>\n            </button>\n            {isOpen && (\n              <div\n                aria-labelledby={triggerId}\n                className=\"bg-[var(--bg-tertiary)] px-4 py-3 text-sm text-[var(--text-secondary)]\"\n                id={panelId}\n                role=\"region\"\n              >\n                {item.content}\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["Accordion","items","defaultOpenId","openId","setOpenId","useState","rootRef","useRef","jsx","item","isOpen","triggerId","panelId","jsxs","event","buttons","currentIndex","btn","_a","_b","_c","_d","prev","cn"],"mappings":";;;AAeO,MAAMA,IAAsC,CAAC,EAAE,OAAAC,GAAO,eAAAC,QAAoB;AAC/E,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAwBH,KAAiB,IAAI,GACnEI,IAAUC,EAA8B,IAAI;AAElD,SACE,gBAAAC,EAAC,SAAI,WAAU,cAAa,KAAKF,GAC9B,UAAAL,EAAM,IAAI,CAACQ,MAAS;AACnB,UAAMC,IAASP,MAAWM,EAAK,IACzBE,IAAY,qBAAqBF,EAAK,EAAE,IACxCG,IAAU,mBAAmBH,EAAK,EAAE;AAC1C,WACE,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QAGV,UAAA;AAAA,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,iBAAeD;AAAA,cACf,iBAAeF;AAAA,cACf,WAAU;AAAA,cACV,IAAIC;AAAA,cACJ,WAAW,CAACG,MAAU;;AACpB,oBAAI,CAACR,EAAQ;AACX;AAEF,sBAAMS,IAAU,MAAM;AAAA,kBACpBT,EAAQ,QAAQ,iBAAoC,4BAA4B;AAAA,gBAAA,GAE5EU,IAAeD,EAAQ,UAAU,CAACE,MAAQA,EAAI,OAAON,CAAS;AACpE,gBAAIK,MAAiB,MAAMD,EAAQ,WAAW,MAG1CD,EAAM,QAAQ,eAChBA,EAAM,eAAA,IACNI,IAAAH,GAASC,IAAe,KAAKD,EAAQ,MAAM,MAA3C,QAAAG,EAA8C,WACrCJ,EAAM,QAAQ,aACvBA,EAAM,eAAA,IACNK,IAAAJ,GAASC,IAAe,IAAID,EAAQ,UAAUA,EAAQ,MAAM,MAA5D,QAAAI,EAA+D,WACtDL,EAAM,QAAQ,UACvBA,EAAM,eAAA,IACNM,IAAAL,EAAQ,CAAC,MAAT,QAAAK,EAAY,WACHN,EAAM,QAAQ,UACvBA,EAAM,eAAA,IACNO,IAAAN,EAAQA,EAAQ,SAAS,CAAC,MAA1B,QAAAM,EAA6B;AAAA,cAEjC;AAAA,cACA,SAAS,MAAMjB,EAAU,CAACkB,MAAUA,MAASb,EAAK,KAAK,OAAOA,EAAK,EAAG;AAAA,cACtE,MAAK;AAAA,cAEJ,UAAA;AAAA,gBAAAA,EAAK;AAAA,gBACN,gBAAAD,EAAC,UAAK,WAAWe,EAAG,cAAcb,IAAS,eAAe,EAAE,GAAG,UAAA,IAAA,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAEjEA,KACC,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,mBAAiBG;AAAA,cACjB,WAAU;AAAA,cACV,IAAIC;AAAA,cACJ,MAAK;AAAA,cAEJ,UAAAH,EAAK;AAAA,YAAA;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,MA9CGA,EAAK;AAAA,IAAA;AAAA,EAkDhB,CAAC,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { useId, useRef, useState } from 'react';\r\nimport { ChevronDown } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, transitionColors } from '../../utils/styles';\r\n\r\nexport interface AccordionItem {\r\n  content: React.ReactNode;\r\n  disabled?: boolean;\r\n  id: string;\r\n  title: React.ReactNode;\r\n}\r\n\r\nexport interface AccordionProps {\r\n  className?: string;\r\n  /** Item aberto inicialmente (modo single). */\r\n  defaultOpenId?: string;\r\n  /** Itens abertos inicialmente (modo multiple). */\r\n  defaultOpenIds?: string[];\r\n  items: AccordionItem[];\r\n  /** `single`: um item aberto por vez. `multiple`: vários. Padrão: single. */\r\n  type?: 'single' | 'multiple';\r\n  /** `separated`: cards independentes. `flush`: lista contínua com divisórias. */\r\n  variant?: 'separated' | 'flush';\r\n}\r\n\r\nexport const Accordion = ({\r\n  items,\r\n  defaultOpenId,\r\n  defaultOpenIds,\r\n  type = 'single',\r\n  variant = 'separated',\r\n  className,\r\n}: AccordionProps) => {\r\n  const [openIds, setOpenIds] = useState<string[]>(\r\n    defaultOpenIds ?? (defaultOpenId ? [defaultOpenId] : []),\r\n  );\r\n  const rootRef = useRef<HTMLDivElement>(null);\r\n  const baseId = useId();\r\n\r\n  const toggle = (id: string) =>\r\n    setOpenIds((prev) =>\r\n      prev.includes(id) ? prev.filter((x) => x !== id) : type === 'single' ? [id] : [...prev, id],\r\n    );\r\n\r\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\r\n    const buttons = Array.from(\r\n      rootRef.current?.querySelectorAll<HTMLButtonElement>(\r\n        '[data-accordion-trigger]:not(:disabled)',\r\n      ) ?? [],\r\n    );\r\n    const index = buttons.indexOf(event.currentTarget);\r\n    const targets: Record<string, number> = {\r\n      ArrowDown: (index + 1) % buttons.length,\r\n      ArrowUp: (index - 1 + buttons.length) % buttons.length,\r\n      Home: 0,\r\n      End: buttons.length - 1,\r\n    };\r\n    if (event.key in targets) {\r\n      event.preventDefault();\r\n      buttons[targets[event.key]]?.focus();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      ref={rootRef}\r\n      className={cn(\r\n        variant === 'separated'\r\n          ? 'grid gap-2'\r\n          : 'divide-y divide-sbk-line overflow-hidden rounded-sbk-sm border border-sbk-line',\r\n        className,\r\n      )}\r\n    >\r\n      {items.map((item) => {\r\n        const isOpen = openIds.includes(item.id);\r\n        const triggerId = `${baseId}-trigger-${item.id}`;\r\n        const panelId = `${baseId}-panel-${item.id}`;\r\n        return (\r\n          <div\r\n            key={item.id}\r\n            className={cn(\r\n              variant === 'separated' && 'overflow-hidden rounded-sbk-sm border border-sbk-line',\r\n              'bg-sbk-surface',\r\n            )}\r\n          >\r\n            <h3 className=\"m-0\">\r\n              <button\r\n                aria-controls={panelId}\r\n                aria-expanded={isOpen}\r\n                className={cn(\r\n                  buttonReset,\r\n                  'flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-3 text-left text-sm font-semibold text-sbk-fg hover:bg-sbk-surface-hover disabled:cursor-not-allowed disabled:opacity-50',\r\n                  'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid',\r\n                  transitionColors,\r\n                )}\r\n                data-accordion-trigger=\"\"\r\n                disabled={item.disabled}\r\n                id={triggerId}\r\n                onClick={() => toggle(item.id)}\r\n                onKeyDown={onKeyDown}\r\n                type=\"button\"\r\n              >\r\n                {item.title}\r\n                <ChevronDown\r\n                  aria-hidden=\"true\"\r\n                  className={cn(\r\n                    'size-4 shrink-0 text-sbk-fg-muted transition-transform duration-200 motion-reduce:transition-none',\r\n                    isOpen && 'rotate-180',\r\n                  )}\r\n                />\r\n              </button>\r\n            </h3>\r\n            {isOpen && (\r\n              <div\r\n                aria-labelledby={triggerId}\r\n                className=\"px-4 pb-4 pt-1 text-sm font-light text-sbk-fg-muted animate-sbk-fade-in motion-reduce:animate-none\"\r\n                id={panelId}\r\n                role=\"region\"\r\n              >\r\n                {item.content}\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n\r\nAccordion.displayName = 'Accordion';\r\n"],"names":["Accordion","items","defaultOpenId","defaultOpenIds","type","variant","className","openIds","setOpenIds","useState","rootRef","useRef","baseId","useId","toggle","id","prev","x","onKeyDown","event","buttons","_a","index","targets","_b","jsx","cn","item","isOpen","triggerId","panelId","jsxs","buttonReset","transitionColors","ChevronDown"],"mappings":"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"}

package/dist/components/Alert/Alert.d.ts

@@ -1,6 +1,19 @@
 import type React from 'react';
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
-    title?: string;
-    tone?: 'info' | 'success' | 'warning' | 'error';
+export type AlertTone = 'info' | 'success' | 'warning' | 'error';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Ações (botões/links) exibidas abaixo do texto. */
+    action?: React.ReactNode;
+    /** Ícone customizado. `false` remove o ícone. */
+    icon?: React.ReactNode | false;
+    onClose?: () => void;
+    title?: React.ReactNode;
+    tone?: AlertTone;
 }
-export declare const Alert: React.FC<AlertProps>;
+/**
+ * Mensagem de feedback persistente na página.
+ * `error` e `warning` usam role="alert" (anúncio imediato); `info` e `success` usam role="status".
+ */
+export declare const Alert: {
+    ({ title, tone, icon, action, onClose, children, className, role, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Alert/Alert.js

@@ -1,32 +1,76 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { cn as d } from "../../utils/cn.js";
-const l = ({
-  title: r,
-  tone: o = "info",
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { XCircle as k, AlertTriangle as u, CheckCircle2 as h, Info as p, X as N } from "lucide-react";
+import { cn as r } from "../../utils/cn.js";
+import { focusRing as v, buttonReset as w } from "../../utils/styles.js";
+const I = {
+  info: { box: "border-sbk-info/30 bg-sbk-info-subtle", icon: "text-sbk-info-fg", Icon: p },
+  success: {
+    box: "border-sbk-success/30 bg-sbk-success-subtle",
+    icon: "text-sbk-success-fg",
+    Icon: h
+  },
+  warning: {
+    box: "border-sbk-warning/30 bg-sbk-warning-subtle",
+    icon: "text-sbk-warning-fg",
+    Icon: u
+  },
+  error: {
+    box: "border-sbk-error/30 bg-sbk-error-subtle",
+    icon: "text-sbk-error-fg",
+    Icon: k
+  }
+}, C = ({
+  title: t,
+  tone: s = "info",
+  icon: n,
+  action: o,
+  onClose: i,
   children: a,
-  className: t,
-  ...s
+  className: b,
+  role: l,
+  ...d
 }) => {
-  const c = {
-    info: "border-[var(--info-color)]/40 bg-[var(--info-color)]/10 text-[var(--text-primary)]",
-    success: "border-[var(--success-color)]/40 bg-[var(--success-color)]/10 text-[var(--text-primary)]",
-    warning: "border-[var(--warning-color)]/40 bg-[var(--warning-color)]/10 text-[var(--text-primary)]",
-    error: "border-[var(--md-error)]/40 bg-[var(--md-error)]/10 text-[var(--text-primary)]"
-  }[o];
-  return /* @__PURE__ */ n(
+  const { box: f, icon: g, Icon: m } = I[s], x = s === "error" || s === "warning";
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: d("rounded-[var(--border-radius-md)] border p-4", c, t),
-      role: "alert",
-      ...s,
+      className: r("flex items-start gap-3 rounded-sbk-sm border p-4 text-sbk-fg", f, b),
+      role: l ?? (x ? "alert" : "status"),
+      ...d,
       children: [
-        r && /* @__PURE__ */ e("p", { className: "mb-1 text-sm font-semibold", children: r }),
-        /* @__PURE__ */ e("div", { className: "text-sm leading-relaxed", children: a })
+        n !== !1 && /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: r("mt-0.5 inline-flex shrink-0 [&_svg]:size-5", g),
+            children: n ?? /* @__PURE__ */ e(m, { strokeWidth: 1.75 })
+          }
+        ),
+        /* @__PURE__ */ c("div", { className: "grid min-w-0 flex-1 gap-1", children: [
+          t && /* @__PURE__ */ e("p", { className: "m-0 text-sm font-semibold text-sbk-fg-heading", children: t }),
+          a && /* @__PURE__ */ e("div", { className: "text-sm font-light leading-relaxed", children: a }),
+          o && /* @__PURE__ */ e("div", { className: "mt-2 flex flex-wrap gap-2", children: o })
+        ] }),
+        i && /* @__PURE__ */ e(
+          "button",
+          {
+            "aria-label": "Fechar alerta",
+            className: r(
+              w,
+              "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sbk-xs text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg",
+              v
+            ),
+            onClick: i,
+            type: "button",
+            children: /* @__PURE__ */ e(N, { "aria-hidden": "true", className: "size-4" })
+          }
+        )
       ]
     }
   );
 };
+C.displayName = "Alert";
 export {
-  l as Alert
+  C as Alert
 };
 //# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  tone?: 'info' | 'success' | 'warning' | 'error';\n}\n\nexport const Alert: React.FC<AlertProps> = ({\n  title,\n  tone = 'info',\n  children,\n  className,\n  ...props\n}) => {\n  const toneClass = {\n    info: 'border-[var(--info-color)]/40 bg-[var(--info-color)]/10 text-[var(--text-primary)]',\n    success:\n      'border-[var(--success-color)]/40 bg-[var(--success-color)]/10 text-[var(--text-primary)]',\n    warning:\n      'border-[var(--warning-color)]/40 bg-[var(--warning-color)]/10 text-[var(--text-primary)]',\n    error: 'border-[var(--md-error)]/40 bg-[var(--md-error)]/10 text-[var(--text-primary)]',\n  }[tone];\n\n  return (\n    <div\n      className={cn('rounded-[var(--border-radius-md)] border p-4', toneClass, className)}\n      role=\"alert\"\n      {...props}\n    >\n      {title && <p className=\"mb-1 text-sm font-semibold\">{title}</p>}\n      <div className=\"text-sm leading-relaxed\">{children}</div>\n    </div>\n  );\n};\n"],"names":["Alert","title","tone","children","className","props","toneClass","jsxs","cn","jsx"],"mappings":";;AAQO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAY;AAAA,IAChB,MAAM;AAAA,IACN,SACE;AAAA,IACF,SACE;AAAA,IACF,OAAO;AAAA,EAAA,EACPJ,CAAI;AAEN,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,gDAAgDF,GAAWF,CAAS;AAAA,MAClF,MAAK;AAAA,MACJ,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAJ,KAAS,gBAAAQ,EAAC,KAAA,EAAE,WAAU,8BAA8B,UAAAR,GAAM;AAAA,QAC3D,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzD;"}
+{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { AlertTriangle, CheckCircle2, Info, X, XCircle } from 'lucide-react';\r\nimport { cn } from '../../utils/cn';\r\nimport { buttonReset, focusRing } from '../../utils/styles';\r\n\r\nexport type AlertTone = 'info' | 'success' | 'warning' | 'error';\r\n\r\nexport interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Ações (botões/links) exibidas abaixo do texto. */\r\n  action?: React.ReactNode;\r\n  /** Ícone customizado. `false` remove o ícone. */\r\n  icon?: React.ReactNode | false;\r\n  onClose?: () => void;\r\n  title?: React.ReactNode;\r\n  tone?: AlertTone;\r\n}\r\n\r\nconst TONE: Record<AlertTone, { box: string; icon: string; Icon: typeof Info }> = {\r\n  info: { box: 'border-sbk-info/30 bg-sbk-info-subtle', icon: 'text-sbk-info-fg', Icon: Info },\r\n  success: {\r\n    box: 'border-sbk-success/30 bg-sbk-success-subtle',\r\n    icon: 'text-sbk-success-fg',\r\n    Icon: CheckCircle2,\r\n  },\r\n  warning: {\r\n    box: 'border-sbk-warning/30 bg-sbk-warning-subtle',\r\n    icon: 'text-sbk-warning-fg',\r\n    Icon: AlertTriangle,\r\n  },\r\n  error: {\r\n    box: 'border-sbk-error/30 bg-sbk-error-subtle',\r\n    icon: 'text-sbk-error-fg',\r\n    Icon: XCircle,\r\n  },\r\n};\r\n\r\n/**\r\n * Mensagem de feedback persistente na página.\r\n * `error` e `warning` usam role=\"alert\" (anúncio imediato); `info` e `success` usam role=\"status\".\r\n */\r\nexport const Alert = ({\r\n  title,\r\n  tone = 'info',\r\n  icon,\r\n  action,\r\n  onClose,\r\n  children,\r\n  className,\r\n  role,\r\n  ...props\r\n}: AlertProps) => {\r\n  const { box, icon: iconColor, Icon } = TONE[tone];\r\n  const urgent = tone === 'error' || tone === 'warning';\r\n\r\n  return (\r\n    <div\r\n      className={cn('flex items-start gap-3 rounded-sbk-sm border p-4 text-sbk-fg', box, className)}\r\n      role={role ?? (urgent ? 'alert' : 'status')}\r\n      {...props}\r\n    >\r\n      {icon !== false && (\r\n        <span\r\n          aria-hidden=\"true\"\r\n          className={cn('mt-0.5 inline-flex shrink-0 [&_svg]:size-5', iconColor)}\r\n        >\r\n          {icon ?? <Icon strokeWidth={1.75} />}\r\n        </span>\r\n      )}\r\n      <div className=\"grid min-w-0 flex-1 gap-1\">\r\n        {title && <p className=\"m-0 text-sm font-semibold text-sbk-fg-heading\">{title}</p>}\r\n        {children && <div className=\"text-sm font-light leading-relaxed\">{children}</div>}\r\n        {action && <div className=\"mt-2 flex flex-wrap gap-2\">{action}</div>}\r\n      </div>\r\n      {onClose && (\r\n        <button\r\n          aria-label=\"Fechar alerta\"\r\n          className={cn(\r\n            buttonReset,\r\n            'inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sbk-xs text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg',\r\n            focusRing,\r\n          )}\r\n          onClick={onClose}\r\n          type=\"button\"\r\n        >\r\n          <X aria-hidden=\"true\" className=\"size-4\" />\r\n        </button>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nAlert.displayName = 'Alert';\r\n"],"names":["TONE","Info","CheckCircle2","AlertTriangle","XCircle","Alert","title","tone","icon","action","onClose","children","className","role","props","box","iconColor","Icon","urgent","jsxs","cn","jsx","buttonReset","focusRing","X"],"mappings":";;;;AAiBA,MAAMA,IAA4E;AAAA,EAChF,MAAM,EAAE,KAAK,yCAAyC,MAAM,oBAAoB,MAAMC,EAAA;AAAA,EACtF,SAAS;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAMC;AAAA,EAAA;AAAA,EAER,SAAS;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAMC;AAAA,EAAA;AAAA,EAER,OAAO;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,IACN,MAAMC;AAAA,EAAA;AAEV,GAMaC,IAAQ,CAAC;AAAA,EACpB,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,GAAGC;AACL,MAAkB;AAChB,QAAM,EAAE,KAAAC,GAAK,MAAMC,GAAW,MAAAC,EAAA,IAASjB,EAAKO,CAAI,GAC1CW,IAASX,MAAS,WAAWA,MAAS;AAE5C,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,gEAAgEL,GAAKH,CAAS;AAAA,MAC5F,MAAMC,MAASK,IAAS,UAAU;AAAA,MACjC,GAAGJ;AAAA,MAEH,UAAA;AAAA,QAAAN,MAAS,MACR,gBAAAa;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAWD,EAAG,8CAA8CJ,CAAS;AAAA,YAEpE,UAAAR,KAAQ,gBAAAa,EAACJ,GAAA,EAAK,aAAa,KAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAGtC,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,UAAAb,KAAS,gBAAAe,EAAC,KAAA,EAAE,WAAU,iDAAiD,UAAAf,GAAM;AAAA,UAC7EK,KAAY,gBAAAU,EAAC,OAAA,EAAI,WAAU,sCAAsC,UAAAV,GAAS;AAAA,UAC1EF,KAAU,gBAAAY,EAAC,OAAA,EAAI,WAAU,6BAA6B,UAAAZ,EAAA,CAAO;AAAA,QAAA,GAChE;AAAA,QACCC,KACC,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAWD;AAAA,cACTE;AAAA,cACA;AAAA,cACAC;AAAA,YAAA;AAAA,YAEF,SAASb;AAAA,YACT,MAAK;AAAA,YAEL,UAAA,gBAAAW,EAACG,GAAA,EAAE,eAAY,QAAO,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3C;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAnB,EAAM,cAAc;"}

package/dist/components/Avatar/Avatar.d.ts

@@ -1,11 +1,17 @@
 import type React from 'react';
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /** Texto alternativo / label acessível para a imagem ou iniciais. */
+    /** Nome da pessoa: usado como label acessível e para gerar as iniciais. */
     alt: string;
-    /** URL da imagem. Se ausente ou falhar no carregamento, exibe as iniciais. */
-    src?: string;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Formato do avatar. Padrão: 'circle' */
     shape?: 'circle' | 'square';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** URL da imagem. Se ausente ou com erro, exibe as iniciais. */
+    src?: string;
+    /** Indicador de presença. */
+    status?: 'online' | 'offline' | 'busy';
 }
-export declare const Avatar: React.FC<AvatarProps>;
+/** Extrai até 2 iniciais. Ex.: "Carlos Augusto" gera "CA". */
+export declare const getInitials: (name: string) => string;
+export declare const Avatar: {
+    ({ src, alt, size, shape, status, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,66 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { cn as o } from "../../utils/cn.js";
+const u = {
+  xs: "size-6 text-[0.625rem]",
+  sm: "size-8 text-xs",
+  md: "size-10 text-sm",
+  lg: "size-12 text-base",
+  xl: "size-16 text-lg"
+}, p = {
+  online: "bg-sbk-success",
+  offline: "bg-sbk-line-strong",
+  busy: "bg-sbk-error"
+}, x = { online: "online", offline: "offline", busy: "ocupado" }, S = (s) => s.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((e) => {
+  var r;
+  return ((r = e[0]) == null ? void 0 : r.toUpperCase()) ?? "";
+}).join(""), h = ({
+  src: s,
+  alt: e,
+  size: r = "md",
+  shape: l = "circle",
+  status: i,
+  className: t,
+  ...a
+}) => {
+  const [c, m] = g(!1), b = s && !c, d = i ? `${e} (${x[i]})` : e;
+  return /* @__PURE__ */ f("span", { className: o("relative inline-flex shrink-0", t), ...a, children: [
+    /* @__PURE__ */ n(
+      "span",
+      {
+        "aria-label": d,
+        className: o(
+          "inline-flex select-none items-center justify-center overflow-hidden bg-sbk-ciano font-semibold text-sbk-branco",
+          l === "circle" ? "rounded-full" : "rounded-sbk-sm",
+          u[r]
+        ),
+        role: "img",
+        children: b ? /* @__PURE__ */ n(
+          "img",
+          {
+            alt: "",
+            className: "size-full object-cover",
+            onError: () => m(!0),
+            src: s
+          }
+        ) : /* @__PURE__ */ n("span", { "aria-hidden": "true", children: S(e) })
+      }
+    ),
+    i && /* @__PURE__ */ n(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: o(
+          "absolute bottom-0 right-0 size-2.5 rounded-full ring-2 ring-sbk-surface",
+          p[i]
+        )
+      }
+    )
+  ] });
+};
+h.displayName = "Avatar";
+export {
+  h as Avatar,
+  S as getInitials
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { useState } from 'react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  /** Nome da pessoa: usado como label acessível e para gerar as iniciais. */\r\n  alt: string;\r\n  shape?: 'circle' | 'square';\r\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n  /** URL da imagem. Se ausente ou com erro, exibe as iniciais. */\r\n  src?: string;\r\n  /** Indicador de presença. */\r\n  status?: 'online' | 'offline' | 'busy';\r\n}\r\n\r\nconst SIZE_CLASS: Record<NonNullable<AvatarProps['size']>, string> = {\r\n  xs: 'size-6 text-[0.625rem]',\r\n  sm: 'size-8 text-xs',\r\n  md: 'size-10 text-sm',\r\n  lg: 'size-12 text-base',\r\n  xl: 'size-16 text-lg',\r\n};\r\n\r\nconst STATUS_CLASS = {\r\n  online: 'bg-sbk-success',\r\n  offline: 'bg-sbk-line-strong',\r\n  busy: 'bg-sbk-error',\r\n} as const;\r\nconst STATUS_LABEL = { online: 'online', offline: 'offline', busy: 'ocupado' } as const;\r\n\r\n/** Extrai até 2 iniciais. Ex.: \"Carlos Augusto\" gera \"CA\". */\r\nexport const getInitials = (name: string): string =>\r\n  name\r\n    .trim()\r\n    .split(/\\s+/)\r\n    .filter(Boolean)\r\n    .slice(0, 2)\r\n    .map((word) => word[0]?.toUpperCase() ?? '')\r\n    .join('');\r\n\r\nexport const Avatar = ({\r\n  src,\r\n  alt,\r\n  size = 'md',\r\n  shape = 'circle',\r\n  status,\r\n  className,\r\n  ...props\r\n}: AvatarProps) => {\r\n  const [imgError, setImgError] = useState(false);\r\n  const showImage = src && !imgError;\r\n  const label = status ? `${alt} (${STATUS_LABEL[status]})` : alt;\r\n\r\n  return (\r\n    <span className={cn('relative inline-flex shrink-0', className)} {...props}>\r\n      <span\r\n        aria-label={label}\r\n        className={cn(\r\n          'inline-flex select-none items-center justify-center overflow-hidden bg-sbk-ciano font-semibold text-sbk-branco',\r\n          shape === 'circle' ? 'rounded-full' : 'rounded-sbk-sm',\r\n          SIZE_CLASS[size],\r\n        )}\r\n        role=\"img\"\r\n      >\r\n        {showImage ? (\r\n          <img\r\n            alt=\"\"\r\n            className=\"size-full object-cover\"\r\n            onError={() => setImgError(true)}\r\n            src={src}\r\n          />\r\n        ) : (\r\n          <span aria-hidden=\"true\">{getInitials(alt)}</span>\r\n        )}\r\n      </span>\r\n      {status && (\r\n        <span\r\n          aria-hidden=\"true\"\r\n          className={cn(\r\n            'absolute bottom-0 right-0 size-2.5 rounded-full ring-2 ring-sbk-surface',\r\n            STATUS_CLASS[status],\r\n          )}\r\n        />\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n\r\nAvatar.displayName = 'Avatar';\r\n"],"names":["SIZE_CLASS","STATUS_CLASS","STATUS_LABEL","getInitials","name","word","_a","Avatar","src","alt","size","shape","status","className","props","imgError","setImgError","useState","showImage","label","jsxs","cn","jsx"],"mappings":";;;AAeA,MAAMA,IAA+D;AAAA,EACnE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAe;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR,GACMC,IAAe,EAAE,QAAQ,UAAU,SAAS,WAAW,MAAM,UAAA,GAGtDC,IAAc,CAACC,MAC1BA,EACG,KAAA,EACA,MAAM,KAAK,EACX,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,IAAI,CAACC;;AAAS,WAAAC,IAAAD,EAAK,CAAC,MAAN,gBAAAC,EAAS,kBAAiB;AAAA,CAAE,EAC1C,KAAK,EAAE,GAECC,IAAS,CAAC;AAAA,EACrB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAmB;AACjB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAYV,KAAO,CAACO,GACpBI,IAAQP,IAAS,GAAGH,CAAG,KAAKP,EAAaU,CAAM,CAAC,MAAMH;AAE5D,SACE,gBAAAW,EAAC,UAAK,WAAWC,EAAG,iCAAiCR,CAAS,GAAI,GAAGC,GACnE,UAAA;AAAA,IAAA,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYH;AAAA,QACZ,WAAWE;AAAA,UACT;AAAA,UACAV,MAAU,WAAW,iBAAiB;AAAA,UACtCX,EAAWU,CAAI;AAAA,QAAA;AAAA,QAEjB,MAAK;AAAA,QAEJ,UAAAQ,IACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAI;AAAA,YACJ,WAAU;AAAA,YACV,SAAS,MAAMN,EAAY,EAAI;AAAA,YAC/B,KAAAR;AAAA,UAAA;AAAA,QAAA,IAGF,gBAAAc,EAAC,QAAA,EAAK,eAAY,QAAQ,UAAAnB,EAAYM,CAAG,EAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IAG9CG,KACC,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWD;AAAA,UACT;AAAA,UACApB,EAAaW,CAAM;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;AAEAL,EAAO,cAAc;"}

package/dist/components/Badge/Badge.d.ts

@@ -1,6 +1,15 @@
 import type React from 'react';
+export type BadgeTone = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Ponto colorido antes do texto (status). */
+    dot?: boolean;
     size?: 'sm' | 'md';
-    tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    tone?: BadgeTone;
+    /** `solid`: fundo cheio. `subtle`: fundo suave com texto colorido. Padrão: solid. */
+    variant?: 'solid' | 'subtle';
 }
-export declare const Badge: React.FC<BadgeProps>;
+/** Etiqueta curta de status ou contagem (formato pill da SBK IA). */
+export declare const Badge: {
+    ({ size, tone, variant, dot, className, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Badge/Badge.js

@@ -1,35 +1,47 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsxs as o, jsx as k } from "react/jsx-runtime";
 import { cn as i } from "../../utils/cn.js";
-const l = ({
-  size: r = "md",
+const g = {
+  neutral: "bg-sbk-surface-sunken text-sbk-fg-muted border border-sbk-line",
+  primary: "bg-sbk-primary text-sbk-on-primary",
+  secondary: "bg-sbk-secondary text-sbk-on-secondary",
+  success: "bg-sbk-success text-sbk-on-state",
+  warning: "bg-sbk-warning text-sbk-on-state",
+  error: "bg-sbk-error text-sbk-on-state",
+  info: "bg-sbk-info text-sbk-on-state"
+}, c = {
+  neutral: "bg-sbk-surface-sunken text-sbk-fg-muted",
+  primary: "bg-sbk-primary-subtle text-sbk-primary dark:text-sbk-fg",
+  secondary: "bg-sbk-primary-subtle text-sbk-secondary dark:text-sbk-fg",
+  success: "bg-sbk-success-subtle text-sbk-success-fg",
+  warning: "bg-sbk-warning-subtle text-sbk-warning-fg",
+  error: "bg-sbk-error-subtle text-sbk-error-fg",
+  info: "bg-sbk-info-subtle text-sbk-info-fg"
+}, d = ({
+  size: s = "md",
   tone: e = "neutral",
-  className: t,
-  children: a,
-  ...n
-}) => {
-  const o = {
-    neutral: "bg-[var(--bg-tertiary)] text-[var(--text-secondary)]",
-    primary: "bg-[var(--md-primary)] text-[var(--md-on-primary)]",
-    success: "bg-[var(--success-color)] text-white",
-    warning: "bg-[var(--warning-color)] text-white",
-    error: "bg-[var(--md-error)] text-[var(--md-on-error)]",
-    info: "bg-[var(--info-color)] text-white"
-  }[e];
-  return /* @__PURE__ */ s(
-    "span",
-    {
-      className: i(
-        "inline-flex items-center rounded-full font-medium leading-none",
-        o,
-        r === "sm" ? "px-2 py-0.5 text-[0.6875rem]" : "px-2.5 py-1 text-xs",
-        t
-      ),
-      ...n,
-      children: a
-    }
-  );
-};
+  variant: t = "solid",
+  dot: r = !1,
+  className: b,
+  children: n,
+  ...a
+}) => /* @__PURE__ */ o(
+  "span",
+  {
+    className: i(
+      "inline-flex items-center gap-1.5 whitespace-nowrap rounded-full font-semibold leading-none",
+      s === "sm" ? "px-2 py-0.5 text-[0.6875rem]" : "px-2.5 py-1 text-xs",
+      (t === "solid" ? g : c)[e],
+      b
+    ),
+    ...a,
+    children: [
+      r && /* @__PURE__ */ k("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }),
+      n
+    ]
+  }
+);
+d.displayName = "Badge";
 export {
-  l as Badge
+  d as Badge
 };
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: 'sm' | 'md';\n  tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';\n}\n\nexport const Badge: React.FC<BadgeProps> = ({\n  size = 'md',\n  tone = 'neutral',\n  className,\n  children,\n  ...props\n}) => {\n  const toneClass = {\n    neutral: 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)]',\n    primary: 'bg-[var(--md-primary)] text-[var(--md-on-primary)]',\n    success: 'bg-[var(--success-color)] text-white',\n    warning: 'bg-[var(--warning-color)] text-white',\n    error: 'bg-[var(--md-error)] text-[var(--md-on-error)]',\n    info: 'bg-[var(--info-color)] text-white',\n  }[tone];\n\n  const sizeClass = size === 'sm' ? 'px-2 py-0.5 text-[0.6875rem]' : 'px-2.5 py-1 text-xs';\n\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-full font-medium leading-none',\n        toneClass,\n        sizeClass,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["Badge","size","tone","className","children","props","toneClass","jsx","cn"],"mappings":";;AAQO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAY;AAAA,IAChB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EAAA,EACNJ,CAAI;AAIN,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,QANYL,MAAS,OAAO,iCAAiC;AAAA,QAQ7DE;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type React from 'react';\r\nimport { cn } from '../../utils/cn';\r\n\r\nexport type BadgeTone =\r\n  | 'neutral'\r\n  | 'primary'\r\n  | 'secondary'\r\n  | 'success'\r\n  | 'warning'\r\n  | 'error'\r\n  | 'info';\r\n\r\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\r\n  /** Ponto colorido antes do texto (status). */\r\n  dot?: boolean;\r\n  size?: 'sm' | 'md';\r\n  tone?: BadgeTone;\r\n  /** `solid`: fundo cheio. `subtle`: fundo suave com texto colorido. Padrão: solid. */\r\n  variant?: 'solid' | 'subtle';\r\n}\r\n\r\nconst SOLID: Record<BadgeTone, string> = {\r\n  neutral: 'bg-sbk-surface-sunken text-sbk-fg-muted border border-sbk-line',\r\n  primary: 'bg-sbk-primary text-sbk-on-primary',\r\n  secondary: 'bg-sbk-secondary text-sbk-on-secondary',\r\n  success: 'bg-sbk-success text-sbk-on-state',\r\n  warning: 'bg-sbk-warning text-sbk-on-state',\r\n  error: 'bg-sbk-error text-sbk-on-state',\r\n  info: 'bg-sbk-info text-sbk-on-state',\r\n};\r\n\r\nconst SUBTLE: Record<BadgeTone, string> = {\r\n  neutral: 'bg-sbk-surface-sunken text-sbk-fg-muted',\r\n  primary: 'bg-sbk-primary-subtle text-sbk-primary dark:text-sbk-fg',\r\n  secondary: 'bg-sbk-primary-subtle text-sbk-secondary dark:text-sbk-fg',\r\n  success: 'bg-sbk-success-subtle text-sbk-success-fg',\r\n  warning: 'bg-sbk-warning-subtle text-sbk-warning-fg',\r\n  error: 'bg-sbk-error-subtle text-sbk-error-fg',\r\n  info: 'bg-sbk-info-subtle text-sbk-info-fg',\r\n};\r\n\r\n/** Etiqueta curta de status ou contagem (formato pill da SBK IA). */\r\nexport const Badge = ({\r\n  size = 'md',\r\n  tone = 'neutral',\r\n  variant = 'solid',\r\n  dot = false,\r\n  className,\r\n  children,\r\n  ...props\r\n}: BadgeProps) => (\r\n  <span\r\n    className={cn(\r\n      'inline-flex items-center gap-1.5 whitespace-nowrap rounded-full font-semibold leading-none',\r\n      size === 'sm' ? 'px-2 py-0.5 text-[0.6875rem]' : 'px-2.5 py-1 text-xs',\r\n      (variant === 'solid' ? SOLID : SUBTLE)[tone],\r\n      className,\r\n    )}\r\n    {...props}\r\n  >\r\n    {dot && <span aria-hidden=\"true\" className=\"size-1.5 rounded-full bg-current\" />}\r\n    {children}\r\n  </span>\r\n);\r\n\r\nBadge.displayName = 'Badge';\r\n"],"names":["SOLID","SUBTLE","Badge","size","tone","variant","dot","className","children","props","jsxs","cn","jsx"],"mappings":";;AAqBA,MAAMA,IAAmC;AAAA,EACvC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAEMC,IAAoC;AAAA,EACxC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,GAGaC,IAAQ,CAAC;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,KAAAC,IAAM;AAAA,EACN,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAR,MAAS,OAAO,iCAAiC;AAAA,OAChDE,MAAY,UAAUL,IAAQC,GAAQG,CAAI;AAAA,MAC3CG;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEH,UAAA;AAAA,MAAAH,KAAO,gBAAAM,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,oCAAmC;AAAA,MAC7EJ;AAAA,IAAA;AAAA,EAAA;AACH;AAGFN,EAAM,cAAc;"}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export interface BreadcrumbItem {
     href?: string;
     label: React.ReactNode;
@@ -7,4 +7,7 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
     items: BreadcrumbItem[];
     separator?: React.ReactNode;
 }
-export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export declare const Breadcrumb: {
+    ({ items, separator, className, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};