@sbkbs/ui 1.0.2 → 1.0.4

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,135 @@
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import _ from "react";
+import { cn as l } from "../../utils/cn.js";
+const M = _.forwardRef(
+  ({
+    label: x,
+    error: i,
+    helperText: v,
+    size: u = "md",
+    min: s,
+    max: n,
+    step: m = 1,
+    onChange: r,
+    className: w,
+    id: y,
+    value: b,
+    defaultValue: a,
+    disabled: c,
+    ...g
+  }, z) => {
+    const e = y || `number-input-${Math.random().toString(36).slice(2, 9)}`, p = !!i, $ = {
+      sm: "min-h-8 text-[var(--font-size-sm)]",
+      md: "min-h-10 text-[var(--font-size-base)]",
+      lg: "min-h-12 text-[var(--font-size-lg)]"
+    }, h = {
+      sm: "h-8 w-7 text-sm",
+      md: "h-10 w-8 text-base",
+      lg: "h-12 w-9 text-lg"
+    }, d = b !== void 0 ? Number(b) : void 0, j = () => {
+      const t = (d ?? (a !== void 0 ? Number(a) : 0)) - m;
+      (s === void 0 || t >= s) && (r == null || r(t));
+    }, k = () => {
+      const t = (d ?? (a !== void 0 ? Number(a) : 0)) + m;
+      (n === void 0 || t <= n) && (r == null || r(t));
+    }, I = (f) => {
+      const t = f.target.value;
+      r == null || r(t === "" ? null : Number(t));
+    };
+    return /* @__PURE__ */ N("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
+      x && /* @__PURE__ */ o(
+        "label",
+        {
+          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+          htmlFor: e,
+          children: x
+        }
+      ),
+      /* @__PURE__ */ N(
+        "div",
+        {
+          className: l(
+            "inline-flex overflow-hidden rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] transition focus-within:border-[var(--border-color-focus)] focus-within:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)]",
+            p && "border-[var(--md-error)] focus-within:border-[var(--md-error)]",
+            c && "cursor-not-allowed opacity-60"
+          ),
+          children: [
+            /* @__PURE__ */ o(
+              "button",
+              {
+                "aria-label": "Diminuir",
+                className: l(
+                  "flex shrink-0 items-center justify-center border-r border-[var(--md-outline-variant)] bg-[var(--bg-tertiary)] 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-[var(--border-color-focus)]",
+                  h[u]
+                ),
+                disabled: c || s !== void 0 && (d ?? 0) <= s,
+                onClick: j,
+                type: "button",
+                children: "−"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "input",
+              {
+                ref: z,
+                "aria-describedby": i ? `${e}-error` : v ? `${e}-helper` : void 0,
+                "aria-invalid": p ? !0 : void 0,
+                className: l(
+                  "w-full min-w-0 bg-transparent px-3 text-center text-[var(--md-on-surface)] outline-none",
+                  $[u],
+                  w
+                ),
+                defaultValue: a,
+                disabled: c,
+                id: e,
+                max: n,
+                min: s,
+                step: m,
+                type: "number",
+                value: b,
+                onChange: I,
+                ...g
+              }
+            ),
+            /* @__PURE__ */ o(
+              "button",
+              {
+                "aria-label": "Aumentar",
+                className: l(
+                  "flex shrink-0 items-center justify-center border-l border-[var(--md-outline-variant)] bg-[var(--bg-tertiary)] 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-[var(--border-color-focus)]",
+                  h[u]
+                ),
+                disabled: c || n !== void 0 && (d ?? 0) >= n,
+                onClick: k,
+                type: "button",
+                children: "+"
+              }
+            )
+          ]
+        }
+      ),
+      i && /* @__PURE__ */ o(
+        "span",
+        {
+          className: "text-[var(--font-size-xs)] text-[var(--md-error)]",
+          id: `${e}-error`,
+          role: "alert",
+          children: i
+        }
+      ),
+      v && !i && /* @__PURE__ */ o(
+        "span",
+        {
+          className: "text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
+          id: `${e}-helper`,
+          children: v
+        }
+      )
+    ] });
+  }
+);
+M.displayName = "NumberInput";
+export {
+  M as NumberInput
+};
+//# sourceMappingURL=NumberInput.js.map

package/dist/components/NumberInput/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sources":["../../../src/components/NumberInput/NumberInput.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface NumberInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'size' | 'onChange'\n> {\n  error?: string;\n  helperText?: string;\n  label?: string;\n  max?: number;\n  min?: number;\n  onChange?: (value: number | null) => void;\n  size?: 'sm' | 'md' | 'lg';\n  step?: number;\n}\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      label,\n      error,\n      helperText,\n      size = 'md',\n      min,\n      max,\n      step = 1,\n      onChange,\n      className,\n      id,\n      value,\n      defaultValue,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = id || `number-input-${Math.random().toString(36).slice(2, 9)}`;\n    const hasError = !!error;\n\n    const sizeClassMap = {\n      sm: 'min-h-8 text-[var(--font-size-sm)]',\n      md: 'min-h-10 text-[var(--font-size-base)]',\n      lg: 'min-h-12 text-[var(--font-size-lg)]',\n    };\n\n    const buttonSizeMap = {\n      sm: 'h-8 w-7 text-sm',\n      md: 'h-10 w-8 text-base',\n      lg: 'h-12 w-9 text-lg',\n    };\n\n    const numValue = value !== undefined ? Number(value) : undefined;\n\n    const handleDecrement = () => {\n      const current = numValue ?? (defaultValue !== undefined ? Number(defaultValue) : 0);\n      const next = current - step;\n      if (min === undefined || next >= min) {\n        onChange?.(next);\n      }\n    };\n\n    const handleIncrement = () => {\n      const current = numValue ?? (defaultValue !== undefined ? Number(defaultValue) : 0);\n      const next = current + step;\n      if (max === undefined || next <= max) {\n        onChange?.(next);\n      }\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value;\n      onChange?.(raw === '' ? null : Number(raw));\n    };\n\n    return (\n      <div className=\"flex flex-col gap-[var(--spacing-xs)]\">\n        {label && (\n          <label\n            className=\"text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]\"\n            htmlFor={inputId}\n          >\n            {label}\n          </label>\n        )}\n        <div\n          className={cn(\n            'inline-flex overflow-hidden rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] transition focus-within:border-[var(--border-color-focus)] focus-within:[box-shadow:0_0_0_0.1875rem_rgba(47,93,140,0.15)]',\n            hasError && 'border-[var(--md-error)] focus-within:border-[var(--md-error)]',\n            disabled && 'cursor-not-allowed opacity-60',\n          )}\n        >\n          <button\n            aria-label=\"Diminuir\"\n            className={cn(\n              'flex shrink-0 items-center justify-center border-r border-[var(--md-outline-variant)] bg-[var(--bg-tertiary)] 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-[var(--border-color-focus)]',\n              buttonSizeMap[size],\n            )}\n            disabled={disabled || (min !== undefined && (numValue ?? 0) <= min)}\n            onClick={handleDecrement}\n            type=\"button\"\n          >\n            −\n          </button>\n          <input\n            ref={ref}\n            aria-describedby={\n              error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\n            }\n            aria-invalid={hasError ? true : undefined}\n            className={cn(\n              'w-full min-w-0 bg-transparent px-3 text-center text-[var(--md-on-surface)] outline-none',\n              sizeClassMap[size],\n              className,\n            )}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            id={inputId}\n            max={max}\n            min={min}\n            step={step}\n            type=\"number\"\n            value={value}\n            onChange={handleChange}\n            {...props}\n          />\n          <button\n            aria-label=\"Aumentar\"\n            className={cn(\n              'flex shrink-0 items-center justify-center border-l border-[var(--md-outline-variant)] bg-[var(--bg-tertiary)] 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-[var(--border-color-focus)]',\n              buttonSizeMap[size],\n            )}\n            disabled={disabled || (max !== undefined && (numValue ?? 0) >= max)}\n            onClick={handleIncrement}\n            type=\"button\"\n          >\n            +\n          </button>\n        </div>\n        {error && (\n          <span\n            className=\"text-[var(--font-size-xs)] text-[var(--md-error)]\"\n            id={`${inputId}-error`}\n            role=\"alert\"\n          >\n            {error}\n          </span>\n        )}\n        {helperText && !error && (\n          <span\n            className=\"text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]\"\n            id={`${inputId}-helper`}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nNumberInput.displayName = 'NumberInput';\n"],"names":["NumberInput","React","label","error","helperText","size","min","max","step","onChange","className","id","value","defaultValue","disabled","props","ref","inputId","hasError","sizeClassMap","buttonSizeMap","numValue","handleDecrement","next","handleIncrement","handleChange","e","raw","jsxs","jsx","cn"],"mappings":";;;AAiBO,MAAMA,IAAcC,EAAM;AAAA,EAC/B,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUN,KAAM,gBAAgB,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,IACtEO,IAAW,CAAC,CAACf,GAEbgB,IAAe;AAAA,MACnB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAGAC,IAAgB;AAAA,MACpB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAGAC,IAAWT,MAAU,SAAY,OAAOA,CAAK,IAAI,QAEjDU,IAAkB,MAAM;AAE5B,YAAMC,KADUF,MAAaR,MAAiB,SAAY,OAAOA,CAAY,IAAI,MAC1DL;AACvB,OAAIF,MAAQ,UAAaiB,KAAQjB,OAC/BG,KAAA,QAAAA,EAAWc;AAAA,IAEf,GAEMC,IAAkB,MAAM;AAE5B,YAAMD,KADUF,MAAaR,MAAiB,SAAY,OAAOA,CAAY,IAAI,MAC1DL;AACvB,OAAID,MAAQ,UAAagB,KAAQhB,OAC/BE,KAAA,QAAAA,EAAWc;AAAA,IAEf,GAEME,IAAe,CAACC,MAA2C;AAC/D,YAAMC,IAAMD,EAAE,OAAO;AACrB,MAAAjB,KAAA,QAAAA,EAAWkB,MAAQ,KAAK,OAAO,OAAOA,CAAG;AAAA,IAC3C;AAEA,WACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,yCACZ,UAAA;AAAA,MAAA1B,KACC,gBAAA2B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASZ;AAAA,UAER,UAAAf;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAA0B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE;AAAA,YACT;AAAA,YACAZ,KAAY;AAAA,YACZJ,KAAY;AAAA,UAAA;AAAA,UAGd,UAAA;AAAA,YAAA,gBAAAe;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,cAAW;AAAA,gBACX,WAAWC;AAAA,kBACT;AAAA,kBACAV,EAAcf,CAAI;AAAA,gBAAA;AAAA,gBAEpB,UAAUS,KAAaR,MAAQ,WAAce,KAAY,MAAMf;AAAA,gBAC/D,SAASgB;AAAA,gBACT,MAAK;AAAA,gBACN,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,gBAAAO;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAAb;AAAA,gBACA,oBACEb,IAAQ,GAAGc,CAAO,WAAWb,IAAa,GAAGa,CAAO,YAAY;AAAA,gBAElE,gBAAcC,IAAW,KAAO;AAAA,gBAChC,WAAWY;AAAA,kBACT;AAAA,kBACAX,EAAad,CAAI;AAAA,kBACjBK;AAAA,gBAAA;AAAA,gBAEF,cAAAG;AAAA,gBACA,UAAAC;AAAA,gBACA,IAAIG;AAAA,gBACJ,KAAAV;AAAA,gBACA,KAAAD;AAAA,gBACA,MAAAE;AAAA,gBACA,MAAK;AAAA,gBACL,OAAAI;AAAA,gBACA,UAAUa;AAAA,gBACT,GAAGV;AAAA,cAAA;AAAA,YAAA;AAAA,YAEN,gBAAAc;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,cAAW;AAAA,gBACX,WAAWC;AAAA,kBACT;AAAA,kBACAV,EAAcf,CAAI;AAAA,gBAAA;AAAA,gBAEpB,UAAUS,KAAaP,MAAQ,WAAcc,KAAY,MAAMd;AAAA,gBAC/D,SAASiB;AAAA,gBACT,MAAK;AAAA,gBACN,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDrB,KACC,gBAAA0B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGZ,CAAO;AAAA,UACd,MAAK;AAAA,UAEJ,UAAAd;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAc,CAACD,KACd,gBAAA0B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGZ,CAAO;AAAA,UAEb,UAAAb;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEAJ,EAAY,cAAc;"}

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

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

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    actions?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    title: React.ReactNode;
+}
+export declare const PageHeader: React.FC<PageHeaderProps>;

package/dist/components/PageHeader/PageHeader.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+const i = ({
+  title: s,
+  subtitle: r,
+  actions: a,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ e(
+  "header",
+  {
+    className: c(
+      "grid gap-3 rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-5 shadow-[var(--shadow-sm)]",
+      t
+    ),
+    ...o,
+    children: /* @__PURE__ */ d("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ d("div", { className: "grid gap-1", children: [
+        /* @__PURE__ */ e("h1", { className: "m-0 text-2xl font-bold text-[var(--text-primary)]", children: s }),
+        r && /* @__PURE__ */ e("p", { className: "m-0 text-sm text-[var(--text-secondary)]", children: r })
+      ] }),
+      a && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: a })
+    ] })
+  }
+);
+export {
+  i as PageHeader
+};
+//# sourceMappingURL=PageHeader.js.map

package/dist/components/PageHeader/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sources":["../../../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  actions?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  title: React.ReactNode;\n}\n\nexport const PageHeader: React.FC<PageHeaderProps> = ({\n  title,\n  subtitle,\n  actions,\n  className,\n  ...props\n}) => {\n  return (\n    <header\n      className={cn(\n        'grid gap-3 rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-5 shadow-[var(--shadow-sm)]',\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"grid gap-1\">\n          <h1 className=\"m-0 text-2xl font-bold text-[var(--text-primary)]\">{title}</h1>\n          {subtitle && <p className=\"m-0 text-sm text-[var(--text-secondary)]\">{subtitle}</p>}\n        </div>\n        {actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n      </div>\n    </header>\n  );\n};\n"],"names":["PageHeader","title","subtitle","actions","className","props","jsx","cn","jsxs"],"mappings":";;AASO,MAAMA,IAAwC,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEJ,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,QAAA,gBAAAF,EAAC,MAAA,EAAG,WAAU,qDAAqD,UAAAL,GAAM;AAAA,QACxEC,KAAY,gBAAAI,EAAC,KAAA,EAAE,WAAU,4CAA4C,UAAAJ,EAAA,CAAS;AAAA,MAAA,GACjF;AAAA,MACCC,KAAW,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAH,EAAA,CAAQ;AAAA,IAAA,EAAA,CAChE;AAAA,EAAA;AAAA;"}

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export interface PaginationProps {
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    totalPages: number;
+}
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,50 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { cn as s } from "../../utils/cn.js";
+const l = ({
+  currentPage: r,
+  totalPages: d,
+  onPageChange: e
+}) => {
+  if (d <= 1)
+    return null;
+  const t = Array.from({ length: d }, (o, i) => i + 1);
+  return /* @__PURE__ */ b("nav", { "aria-label": "Paginação", className: "flex flex-wrap items-center gap-1", children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        className: "rounded-[var(--border-radius-sm)] border border-[var(--border-color)] px-2 py-1 text-sm disabled:opacity-50",
+        disabled: r === 1,
+        onClick: () => e(Math.max(r - 1, 1)),
+        type: "button",
+        children: "Anterior"
+      }
+    ),
+    t.map((o) => /* @__PURE__ */ a(
+      "button",
+      {
+        className: s(
+          "rounded-[var(--border-radius-sm)] border px-2.5 py-1 text-sm",
+          o === r ? "border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]" : "border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+        ),
+        onClick: () => e(o),
+        type: "button",
+        children: o
+      },
+      o
+    )),
+    /* @__PURE__ */ a(
+      "button",
+      {
+        className: "rounded-[var(--border-radius-sm)] border border-[var(--border-color)] px-2 py-1 text-sm disabled:opacity-50",
+        disabled: r === d,
+        onClick: () => e(Math.min(r + 1, d)),
+        type: "button",
+        children: "Próxima"
+      }
+    )
+  ] });
+};
+export {
+  l as Pagination
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface PaginationProps {\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  totalPages: number;\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n}) => {\n  if (totalPages <= 1) {\n    return null;\n  }\n\n  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);\n\n  return (\n    <nav aria-label=\"Paginação\" className=\"flex flex-wrap items-center gap-1\">\n      <button\n        className=\"rounded-[var(--border-radius-sm)] border border-[var(--border-color)] px-2 py-1 text-sm disabled:opacity-50\"\n        disabled={currentPage === 1}\n        onClick={() => onPageChange(Math.max(currentPage - 1, 1))}\n        type=\"button\"\n      >\n        Anterior\n      </button>\n      {pages.map((page) => (\n        <button\n          className={cn(\n            'rounded-[var(--border-radius-sm)] border px-2.5 py-1 text-sm',\n            page === currentPage\n              ? 'border-[var(--md-primary)] bg-[var(--md-primary)] text-[var(--md-on-primary)]'\n              : 'border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]',\n          )}\n          key={page}\n          onClick={() => onPageChange(page)}\n          type=\"button\"\n        >\n          {page}\n        </button>\n      ))}\n      <button\n        className=\"rounded-[var(--border-radius-sm)] border border-[var(--border-color)] px-2 py-1 text-sm disabled:opacity-50\"\n        disabled={currentPage === totalPages}\n        onClick={() => onPageChange(Math.min(currentPage + 1, totalPages))}\n        type=\"button\"\n      >\n        Próxima\n      </button>\n    </nav>\n  );\n};\n"],"names":["Pagination","currentPage","totalPages","onPageChange","pages","_","jsxs","jsx","page","cn"],"mappings":";;AASO,MAAMA,IAAwC,CAAC;AAAA,EACpD,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AACF,MAAM;AACJ,MAAID,KAAc;AAChB,WAAO;AAGT,QAAME,IAAQ,MAAM,KAAK,EAAE,QAAQF,EAAA,GAAc,CAACG,GAAG,MAAM,IAAI,CAAC;AAEhE,SACE,gBAAAC,EAAC,OAAA,EAAI,cAAW,aAAY,WAAU,qCACpC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAUN,MAAgB;AAAA,QAC1B,SAAS,MAAME,EAAa,KAAK,IAAIF,IAAc,GAAG,CAAC,CAAC;AAAA,QACxD,MAAK;AAAA,QACN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGAG,EAAM,IAAI,CAACI,MACV,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE;AAAA,UACT;AAAA,UACAD,MAASP,IACL,kFACA;AAAA,QAAA;AAAA,QAGN,SAAS,MAAME,EAAaK,CAAI;AAAA,QAChC,MAAK;AAAA,QAEJ,UAAAA;AAAA,MAAA;AAAA,MAJIA;AAAA,IAAA,CAMR;AAAA,IACD,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAUN,MAAgBC;AAAA,QAC1B,SAAS,MAAMC,EAAa,KAAK,IAAIF,IAAc,GAAGC,CAAU,CAAC;AAAA,QACjE,MAAK;AAAA,QACN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAED,GACF;AAEJ;"}

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

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

package/dist/components/Paragraph/Paragraph.js

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

package/dist/components/Paragraph/Paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.js","sources":["../../../src/components/Paragraph/Paragraph.tsx"],"sourcesContent":["import type React from 'react';\n\nexport interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  align?: 'left' | 'center' | 'right' | 'justify';\n  as?: 'p' | 'span' | 'div';\n  children: React.ReactNode;\n  italic?: boolean;\n  muted?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  weight?: 'light' | 'normal' | 'medium';\n}\n\nexport const Paragraph: React.FC<ParagraphProps> = ({\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<ParagraphProps['size']>, string> = {\n    xs: 'text-[var(--font-size-xs)] leading-[var(--line-height-normal)]',\n    sm: 'text-[var(--font-size-sm)] leading-[var(--line-height-normal)]',\n    md: 'text-[var(--font-size-base)] leading-[var(--line-height-relaxed)]',\n    lg: 'text-[var(--font-size-lg)] leading-[var(--line-height-loose)]',\n  };\n  const weightClassMap: Record<NonNullable<ParagraphProps['weight']>, string> = {\n    light: 'font-[var(--font-weight-light)]',\n    normal: 'font-[var(--font-weight-normal)]',\n    medium: 'font-[var(--font-weight-medium)]',\n  };\n  const alignClassMap: Record<NonNullable<ParagraphProps['align']>, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n    justify: 'text-justify',\n  };\n  const combinedClass = [\n    'm-0 text-[var(--text-primary)] transition-[var(--transition-colors)]',\n    sizeClassMap[size],\n    weightClassMap[weight],\n    alignClassMap[align],\n    italic ? 'italic' : 'not-italic',\n    muted ? 'text-[var(--text-muted)]' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Component className={combinedClass} {...props}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["Paragraph","as","size","weight","align","muted","italic","children","className","props","Component","sizeClassMap","weightClassMap","alignClassMap","combinedClass"],"mappings":";AAYO,MAAMA,IAAsC,CAAC;AAAA,EAClD,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,IAAoE;AAAA,IACxE,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAEAC,IAAwE;AAAA,IAC5E,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,GAEJC,IAAsE;AAAA,IAC1E,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,EAAA,GAELC,IAAgB;AAAA,IACpB;AAAA,IACAH,EAAaT,CAAI;AAAA,IACjBU,EAAeT,CAAM;AAAA,IACrBU,EAAcT,CAAK;AAAA,IACnBE,IAAS,WAAW;AAAA,IACpBD,IAAQ,6BAA6B;AAAA,IACrCG;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACGE,GAAA,EAAU,WAAWI,GAAgB,GAAGL,GACtC,UAAAF,GACH;AAEJ;"}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export interface PopoverProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    defaultOpen?: boolean;
+}
+export declare const Popover: React.FC<PopoverProps>;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,57 @@
+import { jsxs as v, jsx as u } from "react/jsx-runtime";
+import { useState as b, useRef as a, useId as x, useEffect as d } from "react";
+import { cn as w } from "../../utils/cn.js";
+const E = ({ children: f, content: m, defaultOpen: p = !1 }) => {
+  const [n, t] = b(p), i = a(null), c = a(null), o = a(null), l = x();
+  return d(() => {
+    const e = (s) => {
+      var r;
+      (r = i.current) != null && r.contains(s.target) || t(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), d(() => {
+    if (!n || !o.current)
+      return;
+    const e = o.current.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    e == null || e.focus();
+  }, [n]), d(() => {
+    const e = (s) => {
+      var r;
+      s.key === "Escape" && (t(!1), (r = c.current) == null || r.focus());
+    };
+    return n && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [n]), /* @__PURE__ */ v("div", { className: "relative inline-flex", ref: i, children: [
+    /* @__PURE__ */ u(
+      "button",
+      {
+        "aria-controls": n ? l : void 0,
+        "aria-expanded": n,
+        "aria-haspopup": "dialog",
+        className: "inline-flex",
+        onClick: () => t((e) => !e),
+        ref: c,
+        type: "button",
+        children: f
+      }
+    ),
+    n && /* @__PURE__ */ u(
+      "div",
+      {
+        className: w(
+          "absolute left-1/2 top-full z-30 mt-2 w-max -translate-x-1/2 rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-md)]"
+        ),
+        id: l,
+        ref: o,
+        role: "dialog",
+        tabIndex: -1,
+        children: m
+      }
+    )
+  ] });
+};
+export {
+  E as Popover
+};
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useId, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface PopoverProps {\n  children: React.ReactNode;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n}\n\nexport const Popover: React.FC<PopoverProps> = ({ children, content, defaultOpen = false }) => {\n  const [open, setOpen] = useState(defaultOpen);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const popoverId = useId();\n\n  useEffect(() => {\n    const onClickOutside = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', onClickOutside);\n    return () => document.removeEventListener('mousedown', onClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (!open || !panelRef.current) {\n      return;\n    }\n\n    const focusable = panelRef.current.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    focusable?.focus();\n  }, [open]);\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n    if (open) {\n      document.addEventListener('keydown', onKeyDown);\n    }\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [open]);\n\n  return (\n    <div className=\"relative inline-flex\" ref={containerRef}>\n      <button\n        aria-controls={open ? popoverId : undefined}\n        aria-expanded={open}\n        aria-haspopup=\"dialog\"\n        className=\"inline-flex\"\n        onClick={() => setOpen((prev) => !prev)}\n        ref={triggerRef}\n        type=\"button\"\n      >\n        {children}\n      </button>\n      {open && (\n        <div\n          className={cn(\n            'absolute left-1/2 top-full z-30 mt-2 w-max -translate-x-1/2 rounded-[var(--border-radius-md)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-3 shadow-[var(--shadow-md)]',\n          )}\n          id={popoverId}\n          ref={panelRef}\n          role=\"dialog\"\n          tabIndex={-1}\n        >\n          {content}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["Popover","children","content","defaultOpen","open","setOpen","useState","containerRef","useRef","triggerRef","panelRef","popoverId","useId","useEffect","onClickOutside","event","_a","focusable","onKeyDown","jsxs","jsx","prev","cn"],"mappings":";;;AAUO,MAAMA,IAAkC,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,aAAAC,IAAc,SAAY;AAC7F,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAASH,CAAW,GACtCI,IAAeC,EAA8B,IAAI,GACjDC,IAAaD,EAAiC,IAAI,GAClDE,IAAWF,EAA8B,IAAI,GAC7CG,IAAYC,EAAA;AAElB,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAiB,CAACC,MAAsB;;AAC5C,OAAKC,IAAAT,EAAa,YAAb,QAAAS,EAAsB,SAASD,EAAM,WACxCV,EAAQ,EAAK;AAAA,IAEjB;AACA,oBAAS,iBAAiB,aAAaS,CAAc,GAC9C,MAAM,SAAS,oBAAoB,aAAaA,CAAc;AAAA,EACvE,GAAG,CAAA,CAAE,GAELD,EAAU,MAAM;AACd,QAAI,CAACT,KAAQ,CAACM,EAAS;AACrB;AAGF,UAAMO,IAAYP,EAAS,QAAQ;AAAA,MACjC;AAAA,IAAA;AAEF,IAAAO,KAAA,QAAAA,EAAW;AAAA,EACb,GAAG,CAACb,CAAI,CAAC,GAETS,EAAU,MAAM;AACd,UAAMK,IAAY,CAACH,MAAyB;;AAC1C,MAAIA,EAAM,QAAQ,aAChBV,EAAQ,EAAK,IACbW,IAAAP,EAAW,YAAX,QAAAO,EAAoB;AAAA,IAExB;AACA,WAAIZ,KACF,SAAS,iBAAiB,WAAWc,CAAS,GAEzC,MAAM,SAAS,oBAAoB,WAAWA,CAAS;AAAA,EAChE,GAAG,CAACd,CAAI,CAAC,GAGP,gBAAAe,EAAC,OAAA,EAAI,WAAU,wBAAuB,KAAKZ,GACzC,UAAA;AAAA,IAAA,gBAAAa;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,iBAAehB,IAAOO,IAAY;AAAA,QAClC,iBAAeP;AAAA,QACf,iBAAc;AAAA,QACd,WAAU;AAAA,QACV,SAAS,MAAMC,EAAQ,CAACgB,MAAS,CAACA,CAAI;AAAA,QACtC,KAAKZ;AAAA,QACL,MAAK;AAAA,QAEJ,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFG,KACC,gBAAAgB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE;AAAA,UACT;AAAA,QAAA;AAAA,QAEF,IAAIX;AAAA,QACJ,KAAKD;AAAA,QACL,MAAK;AAAA,QACL,UAAU;AAAA,QAET,UAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/components/Radio/Radio.d.ts

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

package/dist/components/Radio/Radio.js

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

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  helperText?: string;\n  label?: string;\n}\n\nexport const Radio = React.forwardRef<HTMLInputElement, RadioProps>(\n  ({ label, helperText, className, id, ...props }, ref) => {\n    const inputId = id || `radio-${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 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=\"radio\"\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\nRadio.displayName = 'Radio';\n"],"names":["Radio","React","label","helperText","className","id","props","ref","inputId","jsxs","cn","jsx"],"mappings":";;;AAQO,MAAMA,IAAQC,EAAM;AAAA,EACzB,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AACvD,UAAMC,IAAUH,KAAM,SAAS,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;AAErE,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,EAAM,cAAc;"}

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

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

package/dist/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    actions?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    title: React.ReactNode;
+}
+export declare const SectionHeader: React.FC<SectionHeaderProps>;

package/dist/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,19 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+const d = ({
+  title: a,
+  subtitle: t,
+  actions: r,
+  className: i,
+  ...m
+}) => /* @__PURE__ */ s("div", { className: c("flex items-start justify-between gap-4", i), ...m, children: [
+  /* @__PURE__ */ s("div", { className: "grid gap-1", children: [
+    /* @__PURE__ */ e("h2", { className: "m-0 text-xl font-semibold text-[var(--text-primary)]", children: a }),
+    t && /* @__PURE__ */ e("p", { className: "m-0 text-sm text-[var(--text-secondary)]", children: t })
+  ] }),
+  r && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-2", children: r })
+] });
+export {
+  d as SectionHeader
+};
+//# sourceMappingURL=SectionHeader.js.map

package/dist/components/SectionHeader/SectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.js","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  actions?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  title: React.ReactNode;\n}\n\nexport const SectionHeader: React.FC<SectionHeaderProps> = ({\n  title,\n  subtitle,\n  actions,\n  className,\n  ...props\n}) => {\n  return (\n    <div className={cn('flex items-start justify-between gap-4', className)} {...props}>\n      <div className=\"grid gap-1\">\n        <h2 className=\"m-0 text-xl font-semibold text-[var(--text-primary)]\">{title}</h2>\n        {subtitle && <p className=\"m-0 text-sm text-[var(--text-secondary)]\">{subtitle}</p>}\n      </div>\n      {actions && <div className=\"flex shrink-0 items-center gap-2\">{actions}</div>}\n    </div>\n  );\n};\n"],"names":["SectionHeader","title","subtitle","actions","className","props","jsxs","cn","jsx"],"mappings":";;AASO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAAC,SAAI,WAAWC,EAAG,0CAA0CH,CAAS,GAAI,GAAGC,GAC3E,UAAA;AAAA,EAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,IAAA,gBAAAE,EAAC,MAAA,EAAG,WAAU,wDAAwD,UAAAP,GAAM;AAAA,IAC3EC,KAAY,gBAAAM,EAAC,KAAA,EAAE,WAAU,4CAA4C,UAAAN,EAAA,CAAS;AAAA,EAAA,GACjF;AAAA,EACCC,KAAW,gBAAAK,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAL,EAAA,CAAQ;AAAA,GACzE;"}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    error?: string;
+    helperText?: string;
+    label?: string;
+    options: SelectOption[];
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/Select/Select.js

@@ -0,0 +1,45 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import x from "react";
+import { cn as b } from "../../utils/cn.js";
+const f = x.forwardRef(
+  ({ label: d, helperText: t, error: r, options: o, size: i = "md", className: l, id: n, ...c }, m) => {
+    const e = n || `select-${Math.random().toString(36).slice(2, 9)}`, v = {
+      sm: "min-h-8 px-3 py-1.5 text-sm",
+      md: "min-h-10 px-3.5 py-2 text-base",
+      lg: "min-h-12 px-4 py-3 text-lg"
+    }[i];
+    return /* @__PURE__ */ u("div", { className: "grid gap-1", children: [
+      d && /* @__PURE__ */ a(
+        "label",
+        {
+          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+          htmlFor: e,
+          children: d
+        }
+      ),
+      /* @__PURE__ */ a(
+        "select",
+        {
+          ref: m,
+          "aria-describedby": r ? `${e}-error` : t ? `${e}-helper` : void 0,
+          "aria-invalid": r ? !0 : void 0,
+          className: b(
+            "w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-on-surface)] outline-none transition 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",
+            r && "border-[var(--md-error)]",
+            v,
+            l
+          ),
+          id: e,
+          ...c,
+          children: o.map((s) => /* @__PURE__ */ a("option", { value: s.value, children: s.label }, s.value))
+        }
+      ),
+      r ? /* @__PURE__ */ a("span", { className: "text-xs text-[var(--md-error)]", id: `${e}-error`, role: "alert", children: r }) : t && /* @__PURE__ */ a("span", { className: "text-xs text-[var(--md-on-surface-variant)]", id: `${e}-helper`, children: t })
+    ] });
+  }
+);
+f.displayName = "Select";
+export {
+  f as Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SelectOption {\n  label: string;\n  value: string;\n}\n\nexport interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  error?: string;\n  helperText?: string;\n  label?: string;\n  options: SelectOption[];\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  ({ label, helperText, error, options, size = 'md', className, id, ...props }, ref) => {\n    const selectId = id || `select-${Math.random().toString(36).slice(2, 9)}`;\n\n    const sizeClass = {\n      sm: 'min-h-8 px-3 py-1.5 text-sm',\n      md: 'min-h-10 px-3.5 py-2 text-base',\n      lg: 'min-h-12 px-4 py-3 text-lg',\n    }[size];\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={selectId}\n          >\n            {label}\n          </label>\n        )}\n        <select\n          ref={ref}\n          aria-describedby={\n            error ? `${selectId}-error` : helperText ? `${selectId}-helper` : undefined\n          }\n          aria-invalid={error ? true : undefined}\n          className={cn(\n            'w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] text-[var(--md-on-surface)] outline-none transition 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 && 'border-[var(--md-error)]',\n            sizeClass,\n            className,\n          )}\n          id={selectId}\n          {...props}\n        >\n          {options.map((option) => (\n            <option key={option.value} value={option.value}>\n              {option.label}\n            </option>\n          ))}\n        </select>\n        {error ? (\n          <span className=\"text-xs text-[var(--md-error)]\" id={`${selectId}-error`} role=\"alert\">\n            {error}\n          </span>\n        ) : (\n          helperText && (\n            <span className=\"text-xs text-[var(--md-on-surface-variant)]\" id={`${selectId}-helper`}>\n              {helperText}\n            </span>\n          )\n        )}\n      </div>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n"],"names":["Select","React","label","helperText","error","options","size","className","id","props","ref","selectId","sizeClass","jsxs","jsx","cn","option"],"mappings":";;;AAgBO,MAAMA,IAASC,EAAM;AAAA,EAC1B,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,OAAAC,GAAO,SAAAC,GAAS,MAAAC,IAAO,MAAM,WAAAC,GAAW,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAQ;AACpF,UAAMC,IAAWH,KAAM,UAAU,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC,IAEjEI,IAAY;AAAA,MAChB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,EACJN,CAAI;AAEN,WACE,gBAAAO,EAAC,OAAA,EAAI,WAAU,cACZ,UAAA;AAAA,MAAAX,KACC,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASH;AAAA,UAER,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAY;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAJ;AAAA,UACA,oBACEN,IAAQ,GAAGO,CAAQ,WAAWR,IAAa,GAAGQ,CAAQ,YAAY;AAAA,UAEpE,gBAAcP,IAAQ,KAAO;AAAA,UAC7B,WAAWW;AAAA,YACT;AAAA,YACAX,KAAS;AAAA,YACTQ;AAAA,YACAL;AAAA,UAAA;AAAA,UAEF,IAAII;AAAA,UACH,GAAGF;AAAA,UAEH,UAAAJ,EAAQ,IAAI,CAACW,MACZ,gBAAAF,EAAC,UAAA,EAA0B,OAAOE,EAAO,OACtC,UAAAA,EAAO,MAAA,GADGA,EAAO,KAEpB,CACD;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFZ,sBACE,QAAA,EAAK,WAAU,kCAAiC,IAAI,GAAGO,CAAQ,UAAU,MAAK,SAC5E,aACH,IAEAR,uBACG,QAAA,EAAK,WAAU,+CAA8C,IAAI,GAAGQ,CAAQ,WAC1E,UAAAR,EAAA,CACH;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;AAEAH,EAAO,cAAc;"}

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

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

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    circle?: boolean;
+    height?: string;
+    width?: string;
+}
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,25 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as d } from "../../utils/cn.js";
+const l = ({
+  circle: r = !1,
+  width: e,
+  height: o,
+  className: a,
+  style: s,
+  ...n
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: d(
+      "animate-pulse bg-[var(--md-surface-container-high)]",
+      r ? "rounded-full" : "rounded-[var(--border-radius-sm)]",
+      a
+    ),
+    style: { width: e, height: o, ...s },
+    ...n
+  }
+);
+export {
+  l as Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  circle?: boolean;\n  height?: string;\n  width?: string;\n}\n\nexport const Skeleton: React.FC<SkeletonProps> = ({\n  circle = false,\n  width,\n  height,\n  className,\n  style,\n  ...props\n}) => {\n  return (\n    <div\n      className={cn(\n        'animate-pulse bg-[var(--md-surface-container-high)]',\n        circle ? 'rounded-full' : 'rounded-[var(--border-radius-sm)]',\n        className,\n      )}\n      style={{ width, height, ...style }}\n      {...props}\n    />\n  );\n};\n"],"names":["Skeleton","circle","width","height","className","style","props","jsx","cn"],"mappings":";;AASO,MAAMA,IAAoC,CAAC;AAAA,EAChD,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAP,IAAS,iBAAiB;AAAA,MAC1BG;AAAA,IAAA;AAAA,IAEF,OAAO,EAAE,OAAAF,GAAO,QAAAC,GAAQ,GAAGE,EAAA;AAAA,IAC1B,GAAGC;AAAA,EAAA;AAAA;"}