@sbkbs/ui 1.0.3 → 1.0.4

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,56 @@
+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
+    );
+  }) });
+};
+export {
+  A as Accordion
+};
+//# sourceMappingURL=Accordion.js.map

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

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

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

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

package/dist/components/Alert/Alert.js

@@ -0,0 +1,32 @@
+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",
+  children: a,
+  className: t,
+  ...s
+}) => {
+  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(
+    "div",
+    {
+      className: d("rounded-[var(--border-radius-md)] border p-4", c, t),
+      role: "alert",
+      ...s,
+      children: [
+        r && /* @__PURE__ */ e("p", { className: "mb-1 text-sm font-semibold", children: r }),
+        /* @__PURE__ */ e("div", { className: "text-sm leading-relaxed", children: a })
+      ]
+    }
+  );
+};
+export {
+  l as Alert
+};
+//# sourceMappingURL=Alert.js.map

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

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

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

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

package/dist/components/Badge/Badge.js

@@ -0,0 +1,35 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+const l = ({
+  size: r = "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
+    }
+  );
+};
+export {
+  l as Badge
+};
+//# sourceMappingURL=Badge.js.map

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

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

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface BreadcrumbItem {
+    href?: string;
+    label: React.ReactNode;
+}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,26 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { cn as o } from "../../utils/cn.js";
+const m = ({
+  items: l,
+  separator: s = "/",
+  className: t,
+  ...c
+}) => /* @__PURE__ */ e("nav", { "aria-label": "Breadcrumb", className: o("flex items-center", t), ...c, children: /* @__PURE__ */ e("ol", { className: "flex flex-wrap items-center gap-1 text-sm", children: l.map((r, a) => {
+  const n = a === l.length - 1;
+  return /* @__PURE__ */ i("li", { className: "flex items-center gap-1", children: [
+    a > 0 && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "select-none text-[var(--text-muted)]", children: s }),
+    n ? /* @__PURE__ */ e("span", { "aria-current": "page", className: "font-medium text-[var(--text-primary)]", children: r.label }) : r.href ? /* @__PURE__ */ e(
+      "a",
+      {
+        className: "text-[var(--md-primary)] transition hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]",
+        href: r.href,
+        children: r.label
+      }
+    ) : /* @__PURE__ */ e("span", { className: "text-[var(--text-secondary)]", children: r.label })
+  ] }, a);
+}) }) });
+m.displayName = "Breadcrumb";
+export {
+  m as Breadcrumb
+};
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface BreadcrumbItem {\n  href?: string;\n  label: React.ReactNode;\n}\n\nexport interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {\n  items: BreadcrumbItem[];\n  separator?: React.ReactNode;\n}\n\nexport const Breadcrumb: React.FC<BreadcrumbProps> = ({\n  items,\n  separator = '/',\n  className,\n  ...props\n}) => {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={cn('flex items-center', className)} {...props}>\n      <ol className=\"flex flex-wrap items-center gap-1 text-sm\">\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1;\n          return (\n            <li key={index} className=\"flex items-center gap-1\">\n              {index > 0 && (\n                <span aria-hidden=\"true\" className=\"select-none text-[var(--text-muted)]\">\n                  {separator}\n                </span>\n              )}\n              {isLast ? (\n                <span aria-current=\"page\" className=\"font-medium text-[var(--text-primary)]\">\n                  {item.label}\n                </span>\n              ) : item.href ? (\n                <a\n                  className=\"text-[var(--md-primary)] transition hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-color-focus)]\"\n                  href={item.href}\n                >\n                  {item.label}\n                </a>\n              ) : (\n                <span className=\"text-[var(--text-secondary)]\">{item.label}</span>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n\nBreadcrumb.displayName = 'Breadcrumb';\n"],"names":["Breadcrumb","items","separator","className","props","cn","jsx","item","index","isLast","jsxs"],"mappings":";;AAaO,MAAMA,IAAwC,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,wBAEK,OAAA,EAAI,cAAW,cAAa,WAAWC,EAAG,qBAAqBF,CAAS,GAAI,GAAGC,GAC9E,UAAA,gBAAAE,EAAC,QAAG,WAAU,6CACX,YAAM,IAAI,CAACC,GAAMC,MAAU;AAC1B,QAAMC,IAASD,MAAUP,EAAM,SAAS;AACxC,SACE,gBAAAS,EAAC,MAAA,EAAe,WAAU,2BACvB,UAAA;AAAA,IAAAF,IAAQ,KACP,gBAAAF,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,wCAChC,UAAAJ,EAAA,CACH;AAAA,IAEDO,IACC,gBAAAH,EAAC,QAAA,EAAK,gBAAa,QAAO,WAAU,0CACjC,UAAAC,EAAK,MAAA,CACR,IACEA,EAAK,OACP,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAMC,EAAK;AAAA,QAEV,UAAAA,EAAK;AAAA,MAAA;AAAA,IAAA,IAGR,gBAAAD,EAAC,QAAA,EAAK,WAAU,gCAAgC,YAAK,MAAA,CAAM;AAAA,EAAA,EAAA,GAlBtDE,CAoBT;AAEJ,CAAC,GACH,GACF;AAIJR,EAAW,cAAc;"}

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

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

package/dist/components/Button/Button.js

@@ -0,0 +1,122 @@
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { cn as N } from "../../utils/cn.js";
+const P = ({
+  variant: i = "primary",
+  size: t = "md",
+  compact: r = !1,
+  fullWidth: l = !1,
+  isLoading: o = !1,
+  leftIcon: d,
+  rightIcon: v,
+  children: c,
+  className: p = "",
+  disabled: w,
+  palette: e,
+  style: b,
+  ...f
+}) => {
+  const y = "relative inline-flex select-none items-center justify-center overflow-hidden whitespace-nowrap rounded-[var(--border-radius-md)] border border-transparent font-semibold leading-none tracking-[0.01em] transition-[all_var(--transition-base)]", x = "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--md-primary)]", g = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60", u = l ? "w-full" : "", z = e === "off-white" && i === "primary" ? "border-[var(--border-color)]" : "", C = {
+    xs: r ? "min-h-[1.75rem] min-w-[1.75rem] gap-1 px-2 py-1 text-[var(--font-size-xs)]" : "min-h-8 min-w-8 gap-1.5 px-3 py-1.5 text-[var(--font-size-xs)]",
+    sm: r ? "min-h-8 min-w-8 gap-[0.3125rem] px-2.5 py-1.5 text-[var(--font-size-sm)]" : "min-h-9 min-w-9 gap-[0.4375rem] px-3.5 py-2 text-[var(--font-size-sm)]",
+    md: r ? "min-h-[2.375rem] min-w-[2.375rem] gap-1.5 px-3 py-2 text-[var(--font-size-base)]" : "min-h-11 min-w-11 gap-2 px-4 py-2.5 text-[var(--font-size-base)]",
+    lg: r ? "min-h-[2.625rem] min-w-[2.625rem] gap-[0.4375rem] px-3.5 py-[0.5625rem] text-[var(--font-size-lg)]" : "min-h-12 min-w-12 gap-[0.5625rem] px-6 py-4 text-[var(--font-size-lg)]",
+    xl: r ? "min-h-12 min-w-12 gap-2 px-4 py-3 text-[var(--font-size-xl)]" : "min-h-14 min-w-14 gap-2.5 px-8 py-6 text-[var(--font-size-xl)]"
+  }, j = {
+    primary: "bg-[var(--md-primary)] text-[var(--md-on-primary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--primary-color-hover)] hover:shadow-[var(--shadow-md)]",
+    secondary: "bg-[var(--md-secondary)] text-[var(--md-on-secondary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--secondary-color-light)] hover:shadow-[var(--shadow-md)]",
+    success: "bg-[var(--success-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--success-color-light)] hover:shadow-[var(--shadow-md)]",
+    error: "bg-[var(--md-error)] text-[var(--md-on-error)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--error-color-light)] hover:shadow-[var(--shadow-md)]",
+    warning: "bg-[var(--warning-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--warning-color-light)] hover:shadow-[var(--shadow-md)]",
+    info: "bg-[var(--info-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--info-color-light)] hover:shadow-[var(--shadow-md)]",
+    neutral: "bg-[var(--neutral-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--neutral-color-light)] hover:shadow-[var(--shadow-md)]",
+    ghost: "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--md-on-surface)] shadow-[var(--shadow-xs)] hover:bg-[var(--bg-hover)] hover:text-[var(--md-primary)] hover:border-[var(--border-color-hover)]"
+  }, m = {
+    xs: r ? "h-3 w-3" : "h-3.5 w-3.5",
+    sm: r ? "h-3.5 w-3.5" : "h-4 w-4",
+    md: "h-[1.125rem] w-[1.125rem]",
+    lg: "h-5 w-5",
+    xl: "h-5 w-5"
+  }, n = {
+    "verde-vibrante": {
+      primary: "var(--brand-verde-vibrante)",
+      hover: "var(--brand-verde-profundo)"
+    },
+    "verde-profundo": {
+      primary: "var(--brand-verde-profundo)",
+      hover: "var(--brand-grafite-azulado)"
+    },
+    "grafite-azulado": {
+      primary: "var(--brand-grafite-azulado)",
+      hover: "var(--brand-cinza-escuro)"
+    },
+    "azul-acinzentado": {
+      primary: "var(--brand-azul-acinzentado)",
+      hover: "var(--brand-grafite-azulado)"
+    },
+    "cinza-medio": {
+      primary: "var(--brand-cinza-medio)",
+      hover: "var(--brand-cinza-escuro)"
+    },
+    "cinza-escuro": {
+      primary: "var(--brand-cinza-escuro)",
+      hover: "var(--brand-preto)"
+    },
+    "off-white": {
+      primary: "var(--brand-off-white)",
+      hover: "var(--brand-branco)",
+      onPrimary: "var(--brand-grafite-azulado)"
+    }
+  }, s = {};
+  e && i === "primary" && (s["--md-primary"] = n[e].primary, s["--primary-color-hover"] = n[e].hover, n[e].onPrimary && (s["--md-on-primary"] = n[e].onPrimary));
+  const k = N(
+    y,
+    x,
+    g,
+    C[t],
+    j[i],
+    z,
+    u,
+    p
+  );
+  return /* @__PURE__ */ h(
+    "button",
+    {
+      className: k,
+      disabled: w || o,
+      style: { ...s, ...b },
+      ...f,
+      children: [
+        o && /* @__PURE__ */ a(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inline-flex h-[1em] w-[1em] animate-spin items-center justify-center",
+            children: /* @__PURE__ */ h("svg", { fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ a("circle", { cx: "12", cy: "12", r: "10", strokeOpacity: "0.25" }),
+              /* @__PURE__ */ a("path", { d: "M12 2 A10 10 0 0 1 22 12", strokeLinecap: "round" })
+            ] })
+          }
+        ),
+        !o && d && /* @__PURE__ */ a(
+          "span",
+          {
+            className: `mr-1 inline-flex shrink-0 items-center justify-center leading-none ${m[t]}`,
+            children: d
+          }
+        ),
+        !o && /* @__PURE__ */ a("span", { className: "btn__content inline-flex items-center justify-center", children: c }),
+        !o && v && /* @__PURE__ */ a(
+          "span",
+          {
+            className: `ml-1 inline-flex shrink-0 items-center justify-center leading-none ${m[t]}`,
+            children: v
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  P as Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type React from 'react';\nimport type { CSSProperties } from 'react';\nimport { cn } from '../../utils/cn';\n\n/** Paletas do guia de marca (só afeta variant primary). Use para escolher o modelo de cor do botão. */\nexport type ButtonPalette =\n  | 'verde-vibrante'\n  | 'verde-profundo'\n  | 'grafite-azulado'\n  | 'azul-acinzentado'\n  | 'cinza-medio'\n  | 'cinza-escuro'\n  | 'off-white';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  compact?: boolean;\n  fullWidth?: boolean;\n  isLoading?: boolean;\n  leftIcon?: React.ReactNode;\n  /** Paleta de cor do guia de marca (aplica-se ao primary). Ignorado em outros variants. */\n  palette?: ButtonPalette;\n  rightIcon?: React.ReactNode;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'success'\n    | 'error'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'ghost';\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'primary',\n  size = 'md',\n  compact = false,\n  fullWidth = false,\n  isLoading = false,\n  leftIcon,\n  rightIcon,\n  children,\n  className = '',\n  disabled,\n  palette,\n  style,\n  ...props\n}) => {\n  const baseClass =\n    'relative inline-flex select-none items-center justify-center overflow-hidden whitespace-nowrap rounded-[var(--border-radius-md)] border border-transparent font-semibold leading-none tracking-[0.01em] transition-[all_var(--transition-base)]';\n  const focusClass =\n    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--md-primary)]';\n  const disabledClass =\n    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';\n  const fullWidthClass = fullWidth ? 'w-full' : '';\n  const offWhiteBorderClass =\n    palette === 'off-white' && variant === 'primary' ? 'border-[var(--border-color)]' : '';\n\n  const sizeClassMap: Record<NonNullable<ButtonProps['size']>, string> = {\n    xs: compact\n      ? 'min-h-[1.75rem] min-w-[1.75rem] gap-1 px-2 py-1 text-[var(--font-size-xs)]'\n      : 'min-h-8 min-w-8 gap-1.5 px-3 py-1.5 text-[var(--font-size-xs)]',\n    sm: compact\n      ? 'min-h-8 min-w-8 gap-[0.3125rem] px-2.5 py-1.5 text-[var(--font-size-sm)]'\n      : 'min-h-9 min-w-9 gap-[0.4375rem] px-3.5 py-2 text-[var(--font-size-sm)]',\n    md: compact\n      ? 'min-h-[2.375rem] min-w-[2.375rem] gap-1.5 px-3 py-2 text-[var(--font-size-base)]'\n      : 'min-h-11 min-w-11 gap-2 px-4 py-2.5 text-[var(--font-size-base)]',\n    lg: compact\n      ? 'min-h-[2.625rem] min-w-[2.625rem] gap-[0.4375rem] px-3.5 py-[0.5625rem] text-[var(--font-size-lg)]'\n      : 'min-h-12 min-w-12 gap-[0.5625rem] px-6 py-4 text-[var(--font-size-lg)]',\n    xl: compact\n      ? 'min-h-12 min-w-12 gap-2 px-4 py-3 text-[var(--font-size-xl)]'\n      : 'min-h-14 min-w-14 gap-2.5 px-8 py-6 text-[var(--font-size-xl)]',\n  };\n\n  const variantClassMap: Record<NonNullable<ButtonProps['variant']>, string> = {\n    primary:\n      'bg-[var(--md-primary)] text-[var(--md-on-primary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--primary-color-hover)] hover:shadow-[var(--shadow-md)]',\n    secondary:\n      'bg-[var(--md-secondary)] text-[var(--md-on-secondary)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--secondary-color-light)] hover:shadow-[var(--shadow-md)]',\n    success:\n      'bg-[var(--success-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--success-color-light)] hover:shadow-[var(--shadow-md)]',\n    error:\n      'bg-[var(--md-error)] text-[var(--md-on-error)] shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--error-color-light)] hover:shadow-[var(--shadow-md)]',\n    warning:\n      'bg-[var(--warning-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--warning-color-light)] hover:shadow-[var(--shadow-md)]',\n    info: 'bg-[var(--info-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--info-color-light)] hover:shadow-[var(--shadow-md)]',\n    neutral:\n      'bg-[var(--neutral-color)] text-white shadow-[var(--shadow-sm)] hover:translate-y-[-0.125rem] hover:bg-[var(--neutral-color-light)] hover:shadow-[var(--shadow-md)]',\n    ghost:\n      'border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--md-on-surface)] shadow-[var(--shadow-xs)] hover:bg-[var(--bg-hover)] hover:text-[var(--md-primary)] hover:border-[var(--border-color-hover)]',\n  };\n\n  const iconSizeClassMap: Record<NonNullable<ButtonProps['size']>, string> = {\n    xs: compact ? 'h-3 w-3' : 'h-3.5 w-3.5',\n    sm: compact ? 'h-3.5 w-3.5' : 'h-4 w-4',\n    md: 'h-[1.125rem] w-[1.125rem]',\n    lg: 'h-5 w-5',\n    xl: 'h-5 w-5',\n  };\n\n  const paletteVars: Record<ButtonPalette, { primary: string; hover: string; onPrimary?: string }> =\n    {\n      'verde-vibrante': {\n        primary: 'var(--brand-verde-vibrante)',\n        hover: 'var(--brand-verde-profundo)',\n      },\n      'verde-profundo': {\n        primary: 'var(--brand-verde-profundo)',\n        hover: 'var(--brand-grafite-azulado)',\n      },\n      'grafite-azulado': {\n        primary: 'var(--brand-grafite-azulado)',\n        hover: 'var(--brand-cinza-escuro)',\n      },\n      'azul-acinzentado': {\n        primary: 'var(--brand-azul-acinzentado)',\n        hover: 'var(--brand-grafite-azulado)',\n      },\n      'cinza-medio': {\n        primary: 'var(--brand-cinza-medio)',\n        hover: 'var(--brand-cinza-escuro)',\n      },\n      'cinza-escuro': {\n        primary: 'var(--brand-cinza-escuro)',\n        hover: 'var(--brand-preto)',\n      },\n      'off-white': {\n        primary: 'var(--brand-off-white)',\n        hover: 'var(--brand-branco)',\n        onPrimary: 'var(--brand-grafite-azulado)',\n      },\n    };\n\n  type ButtonCssVars = CSSProperties & {\n    '--md-primary'?: string;\n    '--primary-color-hover'?: string;\n    '--md-on-primary'?: string;\n  };\n  const paletteStyle: ButtonCssVars = {};\n  if (palette && variant === 'primary') {\n    paletteStyle['--md-primary'] = paletteVars[palette].primary;\n    paletteStyle['--primary-color-hover'] = paletteVars[palette].hover;\n    if (paletteVars[palette].onPrimary) {\n      paletteStyle['--md-on-primary'] = paletteVars[palette].onPrimary;\n    }\n  }\n\n  const combinedClass = cn(\n    baseClass,\n    focusClass,\n    disabledClass,\n    sizeClassMap[size],\n    variantClassMap[variant],\n    offWhiteBorderClass,\n    fullWidthClass,\n    className,\n  );\n\n  return (\n    <button\n      className={combinedClass}\n      disabled={disabled || isLoading}\n      style={{ ...paletteStyle, ...style }}\n      {...props}\n    >\n      {isLoading && (\n        <span\n          aria-hidden=\"true\"\n          className=\"absolute inline-flex h-[1em] w-[1em] animate-spin items-center justify-center\"\n        >\n          <svg fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" strokeOpacity=\"0.25\" />\n            <path d=\"M12 2 A10 10 0 0 1 22 12\" strokeLinecap=\"round\" />\n          </svg>\n        </span>\n      )}\n      {!isLoading && leftIcon && (\n        <span\n          className={`mr-1 inline-flex shrink-0 items-center justify-center leading-none ${iconSizeClassMap[size]}`}\n        >\n          {leftIcon}\n        </span>\n      )}\n      {!isLoading && (\n        <span className=\"btn__content inline-flex items-center justify-center\">{children}</span>\n      )}\n      {!isLoading && rightIcon && (\n        <span\n          className={`ml-1 inline-flex shrink-0 items-center justify-center leading-none ${iconSizeClassMap[size]}`}\n        >\n          {rightIcon}\n        </span>\n      )}\n    </button>\n  );\n};\n"],"names":["Button","variant","size","compact","fullWidth","isLoading","leftIcon","rightIcon","children","className","disabled","palette","style","props","baseClass","focusClass","disabledClass","fullWidthClass","offWhiteBorderClass","sizeClassMap","variantClassMap","iconSizeClassMap","paletteVars","paletteStyle","combinedClass","cn","jsxs","jsx"],"mappings":"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"}

package/dist/components/Card/Card.js

@@ -0,0 +1,33 @@
+import { jsx as m } from "react/jsx-runtime";
+const c = ({
+  variant: a = "default",
+  padding: r = "md",
+  hoverable: o = !1,
+  children: s,
+  className: d = "",
+  ...e
+}) => {
+  const n = "relative overflow-hidden rounded-[var(--border-radius-lg)] transition-[var(--transition-all)]", l = {
+    default: "bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-sm)]",
+    elevated: "bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-lg)]",
+    outlined: "bg-transparent border border-[var(--md-outline-variant)] shadow-none",
+    flat: "bg-[var(--md-surface)] border-0 shadow-none"
+  }, t = {
+    none: "p-0",
+    sm: "p-[var(--spacing-md)]",
+    md: "p-[var(--spacing-lg)]",
+    lg: "p-[var(--spacing-xl)]",
+    xl: "p-[var(--spacing-2xl)]"
+  }, i = o ? "hover:shadow-[var(--shadow-md)]" : "", v = [
+    n,
+    l[a],
+    t[r],
+    i,
+    d
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ m("div", { className: v, ...e, children: s });
+};
+export {
+  c as Card
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  hoverable?: boolean;\n  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';\n  variant?: 'default' | 'elevated' | 'outlined' | 'flat';\n}\n\nexport const Card: React.FC<CardProps> = ({\n  variant = 'default',\n  padding = 'md',\n  hoverable = false,\n  children,\n  className = '',\n  ...props\n}) => {\n  const baseClass =\n    'relative overflow-hidden rounded-[var(--border-radius-lg)] transition-[var(--transition-all)]';\n  const variantClassMap: Record<NonNullable<CardProps['variant']>, string> = {\n    default:\n      'bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-sm)]',\n    elevated:\n      'bg-[var(--md-surface)] border border-[var(--md-outline-variant)] shadow-[var(--shadow-lg)]',\n    outlined: 'bg-transparent border border-[var(--md-outline-variant)] shadow-none',\n    flat: 'bg-[var(--md-surface)] border-0 shadow-none',\n  };\n  const paddingClassMap: Record<NonNullable<CardProps['padding']>, string> = {\n    none: 'p-0',\n    sm: 'p-[var(--spacing-md)]',\n    md: 'p-[var(--spacing-lg)]',\n    lg: 'p-[var(--spacing-xl)]',\n    xl: 'p-[var(--spacing-2xl)]',\n  };\n  const hoverableClass = hoverable ? 'hover:shadow-[var(--shadow-md)]' : '';\n  const combinedClass = [\n    baseClass,\n    variantClassMap[variant],\n    paddingClassMap[padding],\n    hoverableClass,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={combinedClass} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"names":["Card","variant","padding","hoverable","children","className","props","baseClass","variantClassMap","paddingClassMap","hoverableClass","combinedClass"],"mappings":";AASO,MAAMA,IAA4B,CAAC;AAAA,EACxC,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IACJ,iGACIC,IAAqE;AAAA,IACzE,SACE;AAAA,IACF,UACE;AAAA,IACF,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,GAEFC,IAAqE;AAAA,IACzE,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAEAC,IAAiBP,IAAY,oCAAoC,IACjEQ,IAAgB;AAAA,IACpBJ;AAAA,IACAC,EAAgBP,CAAO;AAAA,IACvBQ,EAAgBP,CAAO;AAAA,IACvBQ;AAAA,IACAL;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWM,GAAgB,GAAGL,GAChC,UAAAF,GACH;AAEJ;"}

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
-import type React from 'react';
+import React from 'react';
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
     helperText?: string;
     label?: string;
 }
-export declare const Checkbox: React.FC<CheckboxProps>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,36 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import l from "react";
+import { cn as m } from "../../utils/cn.js";
+const d = l.forwardRef(
+  ({ label: t, helperText: r, className: i, id: a, ...c }, n) => {
+    const s = a || `checkbox-${Math.random().toString(36).slice(2, 9)}`;
+    return /* @__PURE__ */ o(
+      "label",
+      {
+        className: m("inline-flex cursor-pointer items-start gap-2", i),
+        htmlFor: s,
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: n,
+              className: "mt-0.5 h-4 w-4 rounded border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--border-color-focus)]",
+              id: s,
+              type: "checkbox",
+              ...c
+            }
+          ),
+          /* @__PURE__ */ o("span", { className: "grid gap-0.5", children: [
+            t && /* @__PURE__ */ e("span", { className: "text-sm text-[var(--text-primary)]", children: t }),
+            r && /* @__PURE__ */ e("span", { className: "text-xs text-[var(--text-muted)]", children: r })
+          ] })
+        ]
+      }
+    );
+  }
+);
+d.displayName = "Checkbox";
+export {
+  d as Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  helperText?: string;\n  label?: string;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ label, helperText, className, id, ...props }, ref) => {\n    const inputId = id || `checkbox-${Math.random().toString(36).slice(2, 9)}`;\n\n    return (\n      <label\n        className={cn('inline-flex cursor-pointer items-start gap-2', className)}\n        htmlFor={inputId}\n      >\n        <input\n          ref={ref}\n          className=\"mt-0.5 h-4 w-4 rounded border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--border-color-focus)]\"\n          id={inputId}\n          type=\"checkbox\"\n          {...props}\n        />\n        <span className=\"grid gap-0.5\">\n          {label && <span className=\"text-sm text-[var(--text-primary)]\">{label}</span>}\n          {helperText && <span className=\"text-xs text-[var(--text-muted)]\">{helperText}</span>}\n        </span>\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","React","label","helperText","className","id","props","ref","inputId","jsxs","cn","jsx"],"mappings":";;;AAQO,MAAMA,IAAWC,EAAM;AAAA,EAC5B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AACvD,UAAMC,IAAUH,KAAM,YAAY,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAExE,WACE,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAG,gDAAgDN,CAAS;AAAA,QACvE,SAASI;AAAA,QAET,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAAJ;AAAA,cACA,WAAU;AAAA,cACV,IAAIC;AAAA,cACJ,MAAK;AAAA,cACJ,GAAGF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEN,gBAAAG,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,YAAAP,KAAS,gBAAAS,EAAC,QAAA,EAAK,WAAU,sCAAsC,UAAAT,GAAM;AAAA,YACrEC,KAAc,gBAAAQ,EAAC,QAAA,EAAK,WAAU,oCAAoC,UAAAR,EAAA,CAAW;AAAA,UAAA,EAAA,CAChF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAH,EAAS,cAAc;"}

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

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

package/dist/components/Chip/Chip.js

@@ -0,0 +1,19 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const b = ({ selected: r = !1, className: e, children: o, ...t }) => /* @__PURE__ */ a(
+  "button",
+  {
+    className: n(
+      "inline-flex items-center rounded-full border px-3 py-1.5 text-sm transition",
+      r ? "border-[var(--md-primary)] bg-[color:color-mix(in_srgb,var(--md-primary)_16%,transparent)] text-[var(--md-on-surface)]" : "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
+      e
+    ),
+    type: "button",
+    ...t,
+    children: o
+  }
+);
+export {
+  b as Chip
+};
+//# sourceMappingURL=Chip.js.map

package/dist/components/Chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  selected?: boolean;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ selected = false, className, children, ...props }) => {\n  return (\n    <button\n      className={cn(\n        'inline-flex items-center rounded-full border px-3 py-1.5 text-sm transition',\n        selected\n          ? 'border-[var(--md-primary)] bg-[color:color-mix(in_srgb,var(--md-primary)_16%,transparent)] text-[var(--md-on-surface)]'\n          : 'border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',\n        className,\n      )}\n      type=\"button\"\n      {...props}\n    >\n      {children}\n    </button>\n  );\n};\n"],"names":["Chip","selected","className","children","props","jsx","cn"],"mappings":";;AAOO,MAAMA,IAA4B,CAAC,EAAE,UAAAC,IAAW,IAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,QAElF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAL,IACI,2HACA;AAAA,MACJC;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACJ,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA;"}

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ComboboxOption {
+    label: string;
+    value: string;
+}
+export interface ComboboxProps {
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    helperText?: string;
+    label?: string;
+    onChange?: (value: string) => void;
+    options: ComboboxOption[];
+    placeholder?: string;
+    value?: string;
+}
+export declare const Combobox: React.FC<ComboboxProps>;