@sbkbs/ui 1.0.3 → 1.0.4

package/dist/components/Input/Input.js

@@ -0,0 +1,78 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import g from "react";
+import { cn as c } from "../../utils/cn.js";
+const b = g.forwardRef(
+  ({
+    label: i,
+    error: e,
+    helperText: s,
+    leftIcon: t,
+    rightIcon: o,
+    fullWidth: l = !1,
+    size: m = "md",
+    className: v,
+    id: p,
+    ...f
+  }, u) => {
+    const r = p || `input-${Math.random().toString(36).substring(2, 9)}`, n = !!e, x = c(
+      "w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] font-inherit text-[var(--md-on-surface)] outline-none transition-[var(--transition-all)] placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 hover:not-disabled:not-focus:border-[var(--border-color-hover)] 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:bg-[var(--md-surface-container-high)] disabled:opacity-60",
+      n && "border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]",
+      {
+        sm: "min-h-8 px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[var(--font-size-sm)]",
+        md: "min-h-10 px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[var(--font-size-base)]",
+        lg: "min-h-12 px-[var(--spacing-xl)] py-[var(--spacing-lg)] text-[var(--font-size-lg)]"
+      }[m],
+      // icon padding vem depois do sizeClassMap para não ser sobrescrito pelo px-* do tamanho
+      t && "pl-10",
+      o && "pr-10",
+      v
+    );
+    return /* @__PURE__ */ d("div", { className: c("flex flex-col gap-[var(--spacing-xs)]", l && "w-full"), children: [
+      i && /* @__PURE__ */ a(
+        "label",
+        {
+          className: "text-[var(--font-size-sm)] font-[var(--font-weight-semibold)] text-[var(--md-on-surface)]",
+          htmlFor: r,
+          children: i
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: "group relative flex w-full items-center", children: [
+        t && /* @__PURE__ */ a("span", { className: "pointer-events-none absolute left-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]", children: t }),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            ref: u,
+            "aria-describedby": e ? `${r}-error` : s ? `${r}-helper` : void 0,
+            "aria-invalid": n ? !0 : void 0,
+            className: x,
+            id: r,
+            ...f
+          }
+        ),
+        o && /* @__PURE__ */ a("span", { className: "pointer-events-none absolute right-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]", children: o })
+      ] }),
+      e && /* @__PURE__ */ a(
+        "span",
+        {
+          className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-error)]",
+          id: `${r}-error`,
+          role: "alert",
+          children: e
+        }
+      ),
+      s && !e && /* @__PURE__ */ a(
+        "span",
+        {
+          className: "mt-[var(--spacing-xs)] block text-[var(--font-size-xs)] text-[var(--md-on-surface-variant)]",
+          id: `${r}-helper`,
+          children: s
+        }
+      )
+    ] });
+  }
+);
+b.displayName = "Input";
+export {
+  b as Input
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  error?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  label?: string;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      label,\n      error,\n      helperText,\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      size = 'md',\n      className,\n      id,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;\n    const hasError = !!error;\n\n    const sizeClassMap: Record<NonNullable<InputProps['size']>, string> = {\n      sm: 'min-h-8 px-[var(--spacing-md)] py-[var(--spacing-sm)] text-[var(--font-size-sm)]',\n      md: 'min-h-10 px-[var(--spacing-lg)] py-[var(--spacing-md)] text-[var(--font-size-base)]',\n      lg: 'min-h-12 px-[var(--spacing-xl)] py-[var(--spacing-lg)] text-[var(--font-size-lg)]',\n    };\n\n    const combinedClass = cn(\n      'w-full rounded-[var(--border-radius-md)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] font-inherit text-[var(--md-on-surface)] outline-none transition-[var(--transition-all)] placeholder:text-[var(--md-on-surface-variant)] placeholder:opacity-70 hover:not-disabled:not-focus:border-[var(--border-color-hover)] 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:bg-[var(--md-surface-container-high)] disabled:opacity-60',\n      hasError &&\n        'border-[var(--md-error)] focus:border-[var(--md-error)] focus:[box-shadow:0_0_0_0.1875rem_rgba(186,26,26,0.2)]',\n      sizeClassMap[size],\n      // icon padding vem depois do sizeClassMap para não ser sobrescrito pelo px-* do tamanho\n      leftIcon && 'pl-10',\n      rightIcon && 'pr-10',\n      className,\n    );\n\n    return (\n      <div className={cn('flex flex-col gap-[var(--spacing-xs)]', fullWidth && 'w-full')}>\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 className=\"group relative flex w-full items-center\">\n          {leftIcon && (\n            <span className=\"pointer-events-none absolute left-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]\">\n              {leftIcon}\n            </span>\n          )}\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={combinedClass}\n            id={inputId}\n            {...props}\n          />\n          {rightIcon && (\n            <span className=\"pointer-events-none absolute right-[var(--spacing-md)] z-[1] flex items-center justify-center text-[var(--md-on-surface-variant)] group-focus-within:text-[var(--md-primary)] [&_svg]:h-[1.125rem] [&_svg]:w-[1.125rem]\">\n              {rightIcon}\n            </span>\n          )}\n        </div>\n        {error && (\n          <span\n            className=\"mt-[var(--spacing-xs)] block 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=\"mt-[var(--spacing-xs)] block 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\nInput.displayName = 'Input';\n"],"names":["Input","React","label","error","helperText","leftIcon","rightIcon","fullWidth","size","className","id","props","ref","inputId","hasError","combinedClass","cn","jsx","jsxs"],"mappings":";;;AAaO,MAAMA,IAAQC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUH,KAAM,SAAS,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC,IACnEI,IAAW,CAAC,CAACX,GAQbY,IAAgBC;AAAA,MACpB;AAAA,MACAF,KACE;AAAA,MATkE;AAAA,QACpE,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA,EAOSN,CAAI;AAAA;AAAA,MAEjBH,KAAY;AAAA,MACZC,KAAa;AAAA,MACbG;AAAA,IAAA;AAGF,6BACG,OAAA,EAAI,WAAWO,EAAG,yCAAyCT,KAAa,QAAQ,GAC9E,UAAA;AAAA,MAAAL,KACC,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASJ;AAAA,UAER,UAAAX;AAAA,QAAA;AAAA,MAAA;AAAA,MAGL,gBAAAgB,EAAC,OAAA,EAAI,WAAU,2CACZ,UAAA;AAAA,QAAAb,KACC,gBAAAY,EAAC,QAAA,EAAK,WAAU,0NACb,UAAAZ,GACH;AAAA,QAEF,gBAAAY;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAL;AAAA,YACA,oBACET,IAAQ,GAAGU,CAAO,WAAWT,IAAa,GAAGS,CAAO,YAAY;AAAA,YAElE,gBAAcC,IAAW,KAAO;AAAA,YAChC,WAAWC;AAAA,YACX,IAAIF;AAAA,YACH,GAAGF;AAAA,UAAA;AAAA,QAAA;AAAA,QAELL,KACC,gBAAAW,EAAC,QAAA,EAAK,WAAU,2NACb,UAAAX,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MACCH,KACC,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGJ,CAAO;AAAA,UACd,MAAK;AAAA,UAEJ,UAAAV;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJC,KAAc,CAACD,KACd,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,IAAI,GAAGJ,CAAO;AAAA,UAEb,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEAJ,EAAM,cAAc;"}

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

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

package/dist/components/Layout/Layout.js

@@ -0,0 +1,41 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as o } from "../../utils/cn.js";
+const t = ({ size: s = "lg", className: a, ...l }) => {
+  const g = {
+    sm: "max-w-2xl",
+    md: "max-w-4xl",
+    lg: "max-w-6xl",
+    xl: "max-w-7xl",
+    full: "max-w-none"
+  }[s];
+  return /* @__PURE__ */ m("div", { className: o("mx-auto w-full px-4", g, a), ...l });
+}, n = ({ gap: s = "md", className: a, ...l }) => {
+  const g = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  }[s];
+  return /* @__PURE__ */ m("div", { className: o("flex flex-col", g, a), ...l });
+}, d = ({ cols: s = 2, gap: a = "md", className: l, ...g }) => {
+  const x = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4"
+  }[s], c = {
+    xs: "gap-1",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  }[a];
+  return /* @__PURE__ */ m("div", { className: o("grid", x, c, l), ...g });
+};
+export {
+  t as Container,
+  d as Grid,
+  n as Stack
+};
+//# sourceMappingURL=Layout.js.map

package/dist/components/Layout/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sources":["../../../src/components/Layout/Layout.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\nexport const Container: React.FC<ContainerProps> = ({ size = 'lg', className, ...props }) => {\n  const sizeClass = {\n    sm: 'max-w-2xl',\n    md: 'max-w-4xl',\n    lg: 'max-w-6xl',\n    xl: 'max-w-7xl',\n    full: 'max-w-none',\n  }[size];\n  return <div className={cn('mx-auto w-full px-4', sizeClass, className)} {...props} />;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const Stack: React.FC<StackProps> = ({ gap = 'md', className, ...props }) => {\n  const gapClass = {\n    xs: 'gap-1',\n    sm: 'gap-2',\n    md: 'gap-3',\n    lg: 'gap-4',\n    xl: 'gap-6',\n  }[gap];\n  return <div className={cn('flex flex-col', gapClass, className)} {...props} />;\n};\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  cols?: 1 | 2 | 3 | 4;\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const Grid: React.FC<GridProps> = ({ cols = 2, gap = 'md', className, ...props }) => {\n  const colsClass = {\n    1: 'grid-cols-1',\n    2: 'grid-cols-2',\n    3: 'grid-cols-3',\n    4: 'grid-cols-4',\n  }[cols];\n  const gapClass = {\n    xs: 'gap-1',\n    sm: 'gap-2',\n    md: 'gap-3',\n    lg: 'gap-4',\n    xl: 'gap-6',\n  }[gap];\n  return <div className={cn('grid', colsClass, gapClass, className)} {...props} />;\n};\n"],"names":["Container","size","className","props","sizeClass","jsx","cn","Stack","gap","gapClass","Grid","cols","colsClass"],"mappings":";;AAOO,MAAMA,IAAsC,CAAC,EAAE,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,QAAY;AAC3F,QAAMC,IAAY;AAAA,IAChB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA,EACNH,CAAI;AACN,SAAO,gBAAAI,EAAC,SAAI,WAAWC,EAAG,uBAAuBF,GAAWF,CAAS,GAAI,GAAGC,GAAO;AACrF,GAMaI,IAA8B,CAAC,EAAE,KAAAC,IAAM,MAAM,WAAAN,GAAW,GAAGC,QAAY;AAClF,QAAMM,IAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,EACJD,CAAG;AACL,SAAO,gBAAAH,EAAC,SAAI,WAAWC,EAAG,iBAAiBG,GAAUP,CAAS,GAAI,GAAGC,GAAO;AAC9E,GAOaO,IAA4B,CAAC,EAAE,MAAAC,IAAO,GAAG,KAAAH,IAAM,MAAM,WAAAN,GAAW,GAAGC,QAAY;AAC1F,QAAMS,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,EACHD,CAAI,GACAF,IAAW;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,EACJD,CAAG;AACL,SAAO,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAG,QAAQM,GAAWH,GAAUP,CAAS,GAAI,GAAGC,EAAA,CAAO;AAChF;"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,113 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { useRef as b, useEffect as y } from "react";
+const K = ({
+  isOpen: t,
+  onClose: o,
+  title: l,
+  subtitle: i,
+  children: g,
+  size: w = "md",
+  showCloseButton: m = !0,
+  closeOnOverlayClick: u = !0,
+  className: p = ""
+}) => {
+  const d = b(null), s = b(null);
+  if (y(() => (t ? (s.current = document.activeElement, document.body.style.overflow = "hidden") : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "", s.current && s.current.focus();
+  }), [t]), y(() => {
+    const r = (e) => {
+      e.key === "Escape" && t && o();
+    }, f = (e) => {
+      if (e.key !== "Tab" || !d.current || !t)
+        return;
+      const a = d.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (a.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const v = a[0], x = a[a.length - 1], h = document.activeElement;
+      e.shiftKey && h === v ? (e.preventDefault(), x.focus()) : !e.shiftKey && h === x && (e.preventDefault(), v.focus());
+    };
+    return t && (document.addEventListener("keydown", r), document.addEventListener("keydown", f), requestAnimationFrame(() => {
+      var a;
+      const e = ((a = d.current) == null ? void 0 : a.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )) ?? d.current;
+      e == null || e.focus();
+    })), () => {
+      document.removeEventListener("keydown", r), document.removeEventListener("keydown", f);
+    };
+  }, [t, o]), !t)
+    return null;
+  const k = (r) => {
+    u && r.target === r.currentTarget && o();
+  }, E = (r) => {
+    u && (r.key === "Enter" || r.key === " ") && r.target === r.currentTarget && o();
+  }, N = [
+    "relative z-[var(--z-index-modal)] m-auto flex w-full max-h-[90vh] max-w-full flex-col overflow-hidden rounded-[var(--border-radius-2xl)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] shadow-[var(--shadow-2xl)]",
+    {
+      sm: "max-w-[25rem]",
+      md: "max-w-[31.25rem]",
+      lg: "max-w-[43.75rem]",
+      xl: "max-w-[56.25rem]",
+      full: "max-h-[90vh] max-w-[90vw]"
+    }[w],
+    p
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "aria-labelledby": l ? "modal-title" : void 0,
+      "aria-modal": "true",
+      className: "fixed inset-0 z-[var(--z-index-modal-backdrop)] flex min-h-[100dvh] items-center justify-center overflow-y-auto bg-black/50 p-[var(--spacing-lg)] backdrop-blur-[8px]",
+      onClick: k,
+      onKeyDown: E,
+      role: "dialog",
+      children: /* @__PURE__ */ c("div", { className: N, ref: d, tabIndex: -1, children: [
+        (l || i || m) && /* @__PURE__ */ c("div", { className: "flex shrink-0 items-start justify-between gap-[var(--spacing-lg)] border-b border-[var(--md-outline-variant)] p-[var(--spacing-2xl)]", children: [
+          (l || i) && /* @__PURE__ */ c("div", { className: "flex-1", children: [
+            l && /* @__PURE__ */ n(
+              "h2",
+              {
+                className: "mb-[var(--spacing-xs)] mt-0 text-[var(--font-size-2xl)] font-[var(--font-weight-semibold)] leading-[var(--line-height-tight)] text-[var(--md-on-surface)]",
+                id: "modal-title",
+                children: l
+              }
+            ),
+            i && /* @__PURE__ */ n("p", { className: "m-0 text-[var(--font-size-base)] leading-[var(--line-height-normal)] text-[var(--md-on-surface-variant)]", children: i })
+          ] }),
+          m && /* @__PURE__ */ n(
+            "button",
+            {
+              "aria-label": "Fechar modal",
+              className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--border-radius-md)] border-0 bg-[var(--md-surface-container-high)] text-[var(--md-on-surface)] transition-[var(--transition-all)] hover:bg-[color:color-mix(in_srgb,var(--md-error)_15%,var(--md-surface))] hover:text-[var(--md-error)]",
+              onClick: o,
+              type: "button",
+              children: /* @__PURE__ */ c(
+                "svg",
+                {
+                  fill: "none",
+                  className: "h-5 w-5",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  viewBox: "0 0 24 24",
+                  children: [
+                    /* @__PURE__ */ n("line", { x1: "18", x2: "6", y1: "6", y2: "18" }),
+                    /* @__PURE__ */ n("line", { x1: "6", x2: "18", y1: "6", y2: "18" })
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { className: "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]", children: g })
+      ] })
+    }
+  );
+};
+export {
+  K as Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useRef } from 'react';\n\nexport interface ModalProps {\n  children: React.ReactNode;\n  className?: string;\n  closeOnOverlayClick?: boolean;\n  isOpen: boolean;\n  onClose: () => void;\n  showCloseButton?: boolean;\n  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';\n  subtitle?: string;\n  title?: string | React.ReactNode;\n}\n\nexport const Modal: React.FC<ModalProps> = ({\n  isOpen,\n  onClose,\n  title,\n  subtitle,\n  children,\n  size = 'md',\n  showCloseButton = true,\n  closeOnOverlayClick = true,\n  className = '',\n}) => {\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const lastFocusedElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      lastFocusedElementRef.current = document.activeElement as HTMLElement | null;\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n    return () => {\n      document.body.style.overflow = '';\n      if (lastFocusedElementRef.current) {\n        lastFocusedElementRef.current.focus();\n      }\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && isOpen) {\n        onClose();\n      }\n    };\n    const handleTabTrap = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab' || !dialogRef.current || !isOpen) {\n        return;\n      }\n\n      const focusable = dialogRef.current.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      );\n\n      if (focusable.length === 0) {\n        e.preventDefault();\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n\n      if (e.shiftKey && active === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape);\n      document.addEventListener('keydown', handleTabTrap);\n      requestAnimationFrame(() => {\n        const initialTarget =\n          dialogRef.current?.querySelector<HTMLElement>(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n          ) ?? dialogRef.current;\n        initialTarget?.focus();\n      });\n    }\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n      document.removeEventListener('keydown', handleTabTrap);\n    };\n  }, [isOpen, onClose]);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (closeOnOverlayClick && e.target === e.currentTarget) {\n      onClose();\n    }\n  };\n\n  const handleOverlayKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (\n      closeOnOverlayClick &&\n      (e.key === 'Enter' || e.key === ' ') &&\n      e.target === e.currentTarget\n    ) {\n      onClose();\n    }\n  };\n\n  const sizeClassMap: Record<NonNullable<ModalProps['size']>, string> = {\n    sm: 'max-w-[25rem]',\n    md: 'max-w-[31.25rem]',\n    lg: 'max-w-[43.75rem]',\n    xl: 'max-w-[56.25rem]',\n    full: 'max-h-[90vh] max-w-[90vw]',\n  };\n  const combinedClass = [\n    'relative z-[var(--z-index-modal)] m-auto flex w-full max-h-[90vh] max-w-full flex-col overflow-hidden rounded-[var(--border-radius-2xl)] border border-[var(--md-outline-variant)] bg-[var(--md-surface)] shadow-[var(--shadow-2xl)]',\n    sizeClassMap[size],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      aria-labelledby={title ? 'modal-title' : undefined}\n      aria-modal=\"true\"\n      className=\"fixed inset-0 z-[var(--z-index-modal-backdrop)] flex min-h-[100dvh] items-center justify-center overflow-y-auto bg-black/50 p-[var(--spacing-lg)] backdrop-blur-[8px]\"\n      onClick={handleOverlayClick}\n      onKeyDown={handleOverlayKeyDown}\n      role=\"dialog\"\n    >\n      <div className={combinedClass} ref={dialogRef} tabIndex={-1}>\n        {(title || subtitle || showCloseButton) && (\n          <div className=\"flex shrink-0 items-start justify-between gap-[var(--spacing-lg)] border-b border-[var(--md-outline-variant)] p-[var(--spacing-2xl)]\">\n            {(title || subtitle) && (\n              <div className=\"flex-1\">\n                {title && (\n                  <h2\n                    className=\"mb-[var(--spacing-xs)] mt-0 text-[var(--font-size-2xl)] font-[var(--font-weight-semibold)] leading-[var(--line-height-tight)] text-[var(--md-on-surface)]\"\n                    id=\"modal-title\"\n                  >\n                    {title}\n                  </h2>\n                )}\n                {subtitle && (\n                  <p className=\"m-0 text-[var(--font-size-base)] leading-[var(--line-height-normal)] text-[var(--md-on-surface-variant)]\">\n                    {subtitle}\n                  </p>\n                )}\n              </div>\n            )}\n            {showCloseButton && (\n              <button\n                aria-label=\"Fechar modal\"\n                className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--border-radius-md)] border-0 bg-[var(--md-surface-container-high)] text-[var(--md-on-surface)] transition-[var(--transition-all)] hover:bg-[color:color-mix(in_srgb,var(--md-error)_15%,var(--md-surface))] hover:text-[var(--md-error)]\"\n                onClick={onClose}\n                type=\"button\"\n              >\n                <svg\n                  fill=\"none\"\n                  className=\"h-5 w-5\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  viewBox=\"0 0 24 24\"\n                >\n                  <line x1=\"18\" x2=\"6\" y1=\"6\" y2=\"18\" />\n                  <line x1=\"6\" x2=\"18\" y1=\"6\" y2=\"18\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-[var(--spacing-2xl)]\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["Modal","isOpen","onClose","title","subtitle","children","size","showCloseButton","closeOnOverlayClick","className","dialogRef","useRef","lastFocusedElementRef","useEffect","handleEscape","handleTabTrap","focusable","first","last","active","initialTarget","_a","handleOverlayClick","e","handleOverlayKeyDown","combinedClass","jsx","jsxs"],"mappings":"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"}

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

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

package/dist/components/Navigation/Navigation.js

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as a } from "../../utils/cn.js";
+const s = ({ className: r, ...e }) => /* @__PURE__ */ o(
+  "aside",
+  {
+    className: a(
+      "h-full rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4",
+      r
+    ),
+    ...e
+  }
+), c = ({ className: r, ...e }) => /* @__PURE__ */ o(
+  "header",
+  {
+    className: a(
+      "flex min-h-14 items-center justify-between border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-4",
+      r
+    ),
+    ...e
+  }
+);
+export {
+  s as Sidebar,
+  c as Topbar
+};
+//# sourceMappingURL=Navigation.js.map

package/dist/components/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {}\nexport const Sidebar: React.FC<SidebarProps> = ({ className, ...props }) => (\n  <aside\n    className={cn(\n      'h-full rounded-[var(--border-radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] p-4',\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport interface TopbarProps extends React.HTMLAttributes<HTMLElement> {}\nexport const Topbar: React.FC<TopbarProps> = ({ className, ...props }) => (\n  <header\n    className={cn(\n      'flex min-h-14 items-center justify-between border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-4',\n      className,\n    )}\n    {...props}\n  />\n);\n"],"names":["Sidebar","className","props","jsx","cn","Topbar"],"mappings":";;AAIO,MAAMA,IAAkC,CAAC,EAAE,WAAAC,GAAW,GAAGC,QAC9D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,GAIWG,IAAgC,CAAC,EAAE,WAAAJ,GAAW,GAAGC,QAC5D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;"}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
+    error?: string;
+    helperText?: string;
+    label?: string;
+    max?: number;
+    min?: number;
+    onChange?: (value: number | null) => void;
+    size?: 'sm' | 'md' | 'lg';
+    step?: number;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

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":"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"}

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.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.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;