@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/components/Navigation/Navigation.js

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

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

@@ -1 +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;"}
+{"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> {}\n/** Container lateral simples. Para menu de navegação completo, use SideNav. */\nexport const Sidebar: React.FC<SidebarProps> = ({ className, ...props }) => (\n  <aside\n    className={cn(\n      'h-full rounded-sbk-md border border-sbk-line bg-sbk-surface p-4 text-sbk-fg',\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 gap-4 border-b border-sbk-line bg-sbk-surface px-4 text-sbk-fg',\n      className,\n    )}\n    {...props}\n  />\n);\n"],"names":["Sidebar","className","props","jsx","cn","Topbar"],"mappings":";;AAKO,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

@@ -1,12 +1,15 @@
 import React from 'react';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value' | 'defaultValue'> {
+    defaultValue?: number;
     error?: string;
     helperText?: string;
-    label?: string;
+    label?: React.ReactNode;
     max?: number;
     min?: number;
     onChange?: (value: number | null) => void;
     size?: 'sm' | 'md' | 'lg';
     step?: number;
+    value?: number | null;
 }
+/** Campo numérico com botões de incremento. Controlado via `value` + `onChange`. */
 export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/NumberInput/NumberInput.js

@@ -1,135 +1,105 @@
-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(
+import { jsx as r, jsxs as E } from "react/jsx-runtime";
+import R, { useId as T } from "react";
+import { Minus as _, Plus as M } from "lucide-react";
+import { cn as s } from "../../utils/cn.js";
+import { describedBy as P, focusRing as j, transitionColors as F, buttonReset as N } from "../../utils/styles.js";
+import { Field as z } from "../Field/Field.js";
+const A = { sm: "min-h-8 text-sm", md: "min-h-10 text-base", lg: "min-h-12 text-lg" }, B = {
+  sm: "w-8 [&_svg]:size-3.5",
+  md: "w-10 [&_svg]:size-4",
+  lg: "w-12 [&_svg]:size-5"
+}, G = (c, t, o) => Math.min(o ?? Number.POSITIVE_INFINITY, Math.max(t ?? Number.NEGATIVE_INFINITY, c)), H = R.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"
+    label: c,
+    error: t,
+    helperText: o,
+    size: m = "md",
+    min: n,
+    max: a,
+    step: p = 1,
+    onChange: e,
+    className: x,
+    id: w,
+    value: d,
+    defaultValue: f,
+    disabled: b,
+    required: k,
+    ...y
+  }, g) => {
+    const h = T(), i = w ?? h, u = d ?? f ?? 0, I = (l) => e == null ? void 0 : e(G(u + l * p, n, a)), v = s(
+      "flex shrink-0 cursor-pointer items-center justify-center bg-sbk-surface-sunken text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg disabled:cursor-not-allowed disabled:opacity-50",
+      F,
+      j,
+      B[m]
+    );
+    return /* @__PURE__ */ r(z, { error: t, helperText: o, id: i, label: c, required: k, children: /* @__PURE__ */ E(
+      "div",
+      {
+        className: s(
+          "inline-flex overflow-hidden rounded-sbk-sm border border-sbk-line-strong bg-sbk-surface",
+          "focus-within:border-sbk-primary",
+          t && "border-sbk-error",
+          b && "opacity-60"
+        ),
+        children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              "aria-controls": i,
+              "aria-label": "Diminuir",
+              className: s(N, v, "border-r border-sbk-line"),
+              disabled: b || n !== void 0 && u <= n,
+              onClick: () => I(-1),
+              tabIndex: -1,
+              type: "button",
+              children: /* @__PURE__ */ r(_, { "aria-hidden": "true" })
+            }
           ),
-          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
-        }
-      )
-    ] });
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: g,
+              "aria-describedby": P(i, t, o),
+              "aria-invalid": t ? !0 : void 0,
+              className: s(
+                "w-full min-w-0 bg-transparent px-3 text-center font-light text-sbk-fg outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+                A[m],
+                x
+              ),
+              defaultValue: d === void 0 ? f : void 0,
+              disabled: b,
+              id: i,
+              inputMode: "decimal",
+              max: a,
+              min: n,
+              onChange: (l) => e == null ? void 0 : e(l.target.value === "" ? null : Number(l.target.value)),
+              required: k,
+              step: p,
+              type: "number",
+              value: d === void 0 ? void 0 : d ?? "",
+              ...y
+            }
+          ),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              "aria-controls": i,
+              "aria-label": "Aumentar",
+              className: s(N, v, "border-l border-sbk-line"),
+              disabled: b || a !== void 0 && u >= a,
+              onClick: () => I(1),
+              tabIndex: -1,
+              type: "button",
+              children: /* @__PURE__ */ r(M, { "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    ) });
   }
 );
-M.displayName = "NumberInput";
+H.displayName = "NumberInput";
 export {
-  M as NumberInput
+  H as NumberInput
 };
 //# sourceMappingURL=NumberInput.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"NumberInput.js","sources":["../../../src/components/NumberInput/NumberInput.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { Minus, Plus } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, describedBy, focusRing, transitionColors } from '../../utils/styles';\nimport { Field } from '../Field/Field';\n\nexport interface NumberInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type' | 'size' | 'onChange' | 'value' | 'defaultValue'\n> {\n  defaultValue?: number;\n  error?: string;\n  helperText?: string;\n  label?: React.ReactNode;\n  max?: number;\n  min?: number;\n  onChange?: (value: number | null) => void;\n  size?: 'sm' | 'md' | 'lg';\n  step?: number;\n  value?: number | null;\n}\n\nconst HEIGHT = { sm: 'min-h-8 text-sm', md: 'min-h-10 text-base', lg: 'min-h-12 text-lg' } as const;\nconst STEPPER = {\n  sm: 'w-8 [&_svg]:size-3.5',\n  md: 'w-10 [&_svg]:size-4',\n  lg: 'w-12 [&_svg]:size-5',\n} as const;\n\nconst clamp = (n: number, min?: number, max?: number) =>\n  Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, n));\n\n/** Campo numérico com botões de incremento. Controlado via `value` + `onChange`. */\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      required,\n      ...props\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const inputId = id ?? autoId;\n    const current = value ?? defaultValue ?? 0;\n\n    const stepBy = (dir: 1 | -1) => onChange?.(clamp(current + dir * step, min, max));\n\n    const stepperClass = cn(\n      'flex shrink-0 cursor-pointer items-center justify-center bg-sbk-surface-sunken text-sbk-fg-muted hover:bg-sbk-surface-hover hover:text-sbk-fg disabled:cursor-not-allowed disabled:opacity-50',\n      transitionColors,\n      focusRing,\n      STEPPER[size],\n    );\n\n    return (\n      <Field error={error} helperText={helperText} id={inputId} label={label} required={required}>\n        <div\n          className={cn(\n            'inline-flex overflow-hidden rounded-sbk-sm border border-sbk-line-strong bg-sbk-surface',\n            'focus-within:border-sbk-primary',\n            error && 'border-sbk-error',\n            disabled && 'opacity-60',\n          )}\n        >\n          <button\n            aria-controls={inputId}\n            aria-label=\"Diminuir\"\n            className={cn(buttonReset, stepperClass, 'border-r border-sbk-line')}\n            disabled={disabled || (min !== undefined && current <= min)}\n            onClick={() => stepBy(-1)}\n            tabIndex={-1}\n            type=\"button\"\n          >\n            <Minus aria-hidden=\"true\" />\n          </button>\n          <input\n            ref={ref}\n            aria-describedby={describedBy(inputId, error, helperText)}\n            aria-invalid={error ? true : undefined}\n            className={cn(\n              'w-full min-w-0 bg-transparent px-3 text-center font-light text-sbk-fg outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n              HEIGHT[size],\n              className,\n            )}\n            defaultValue={value === undefined ? defaultValue : undefined}\n            disabled={disabled}\n            id={inputId}\n            inputMode=\"decimal\"\n            max={max}\n            min={min}\n            onChange={(e) => onChange?.(e.target.value === '' ? null : Number(e.target.value))}\n            required={required}\n            step={step}\n            type=\"number\"\n            value={value === undefined ? undefined : (value ?? '')}\n            {...props}\n          />\n          <button\n            aria-controls={inputId}\n            aria-label=\"Aumentar\"\n            className={cn(buttonReset, stepperClass, 'border-l border-sbk-line')}\n            disabled={disabled || (max !== undefined && current >= max)}\n            onClick={() => stepBy(1)}\n            tabIndex={-1}\n            type=\"button\"\n          >\n            <Plus aria-hidden=\"true\" />\n          </button>\n        </div>\n      </Field>\n    );\n  },\n);\n\nNumberInput.displayName = 'NumberInput';\n"],"names":["HEIGHT","STEPPER","clamp","n","min","max","NumberInput","React","label","error","helperText","size","step","onChange","className","id","value","defaultValue","disabled","required","props","ref","autoId","useId","inputId","current","stepBy","dir","stepperClass","cn","transitionColors","focusRing","Field","jsxs","jsx","buttonReset","Minus","describedBy","e","Plus"],"mappings":"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"}

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

@@ -1,7 +1,14 @@
 import type React from 'react';
 export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
     actions?: React.ReactNode;
+    /** Conteúdo acima do título (ex.: Breadcrumb). */
+    breadcrumb?: React.ReactNode;
     subtitle?: React.ReactNode;
     title: React.ReactNode;
+    /** `plain`: sem caixa. `card`: superfície com borda. `inverse`: bloco verde escuro (hero). */
+    variant?: 'plain' | 'card' | 'inverse';
 }
-export declare const PageHeader: React.FC<PageHeaderProps>;
+export declare const PageHeader: {
+    ({ title, subtitle, actions, breadcrumb, variant, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/PageHeader/PageHeader.js

@@ -1,29 +1,30 @@
-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,
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { cn as d } from "../../utils/cn.js";
+import { inverseScope as c } from "../../utils/styles.js";
+const p = {
+  plain: "",
+  card: "rounded-sbk-md border border-sbk-line bg-sbk-surface p-5",
+  inverse: d("rounded-sbk-md p-6 md:p-8", c)
+}, o = ({
+  title: i,
+  subtitle: s,
   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 })
-    ] })
-  }
-);
+  breadcrumb: m,
+  variant: t = "card",
+  className: l,
+  ...n
+}) => /* @__PURE__ */ e("header", { className: d("grid gap-3", p[t], l), ...n, children: [
+  m,
+  /* @__PURE__ */ e("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+    /* @__PURE__ */ e("div", { className: "grid min-w-0 gap-1", children: [
+      /* @__PURE__ */ r("h1", { className: "m-0 text-2xl font-semibold leading-tight text-sbk-fg-heading md:text-[1.75rem]", children: i }),
+      s && /* @__PURE__ */ r("p", { className: "m-0 text-sm font-light text-sbk-fg-muted", children: s })
+    ] }),
+    a && /* @__PURE__ */ r("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: a })
+  ] })
+] });
+o.displayName = "PageHeader";
 export {
-  i as PageHeader
+  o as PageHeader
 };
 //# sourceMappingURL=PageHeader.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"PageHeader.js","sources":["../../../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { inverseScope } from '../../utils/styles';\n\nexport interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  actions?: React.ReactNode;\n  /** Conteúdo acima do título (ex.: Breadcrumb). */\n  breadcrumb?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  title: React.ReactNode;\n  /** `plain`: sem caixa. `card`: superfície com borda. `inverse`: bloco verde escuro (hero). */\n  variant?: 'plain' | 'card' | 'inverse';\n}\n\nconst VARIANT_CLASS = {\n  plain: '',\n  card: 'rounded-sbk-md border border-sbk-line bg-sbk-surface p-5',\n  inverse: cn('rounded-sbk-md p-6 md:p-8', inverseScope),\n} as const;\n\nexport const PageHeader = ({\n  title,\n  subtitle,\n  actions,\n  breadcrumb,\n  variant = 'card',\n  className,\n  ...props\n}: PageHeaderProps) => (\n  <header className={cn('grid gap-3', VARIANT_CLASS[variant], className)} {...props}>\n    {breadcrumb}\n    <div className=\"flex flex-wrap items-start justify-between gap-4\">\n      <div className=\"grid min-w-0 gap-1\">\n        <h1 className=\"m-0 text-2xl font-semibold leading-tight text-sbk-fg-heading md:text-[1.75rem]\">\n          {title}\n        </h1>\n        {subtitle && <p className=\"m-0 text-sm font-light text-sbk-fg-muted\">{subtitle}</p>}\n      </div>\n      {actions && <div className=\"flex shrink-0 flex-wrap items-center gap-2\">{actions}</div>}\n    </div>\n  </header>\n);\n\nPageHeader.displayName = 'PageHeader';\n"],"names":["VARIANT_CLASS","cn","inverseScope","PageHeader","title","subtitle","actions","breadcrumb","variant","className","props","jsxs","jsx"],"mappings":";;;AAcA,MAAMA,IAAgB;AAAA,EACpB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAASC,EAAG,6BAA6BC,CAAY;AACvD,GAEaC,IAAa,CAAC;AAAA,EACzB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC,EAAC,UAAA,EAAO,WAAWV,EAAG,cAAcD,EAAcQ,CAAO,GAAGC,CAAS,GAAI,GAAGC,GACzE,UAAA;AAAA,EAAAH;AAAA,EACD,gBAAAI,EAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,MAAA,EAAG,WAAU,kFACX,UAAAR,GACH;AAAA,MACCC,KAAY,gBAAAO,EAAC,KAAA,EAAE,WAAU,4CAA4C,UAAAP,EAAA,CAAS;AAAA,IAAA,GACjF;AAAA,IACCC,KAAW,gBAAAM,EAAC,OAAA,EAAI,WAAU,8CAA8C,UAAAN,EAAA,CAAQ;AAAA,EAAA,EAAA,CACnF;AAAA,EAAA,CACF;AAGFH,EAAW,cAAc;"}

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

@@ -1,7 +1,20 @@
-import type React from 'react';
 export interface PaginationProps {
+    className?: string;
     currentPage: number;
     onPageChange: (page: number) => void;
+    /** Páginas vizinhas exibidas ao redor da atual. Padrão: 1. */
+    siblingCount?: number;
+    /**
+     * `numbered`: lista de páginas com reticências.
+     * `simple`: apenas Anterior/Próxima com "Página X de Y" (para paginação sequencial).
+     */
+    variant?: 'numbered' | 'simple';
     totalPages: number;
 }
-export declare const Pagination: React.FC<PaginationProps>;
+type PageToken = number | 'ellipsis-start' | 'ellipsis-end';
+export declare const getPageTokens: (current: number, total: number, siblings?: number) => PageToken[];
+export declare const Pagination: {
+    ({ currentPage, totalPages, onPageChange, siblingCount, variant, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/components/Pagination/Pagination.js

@@ -1,50 +1,84 @@
-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
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { ChevronLeft as f, ChevronRight as u } from "lucide-react";
+import { cn as a } from "../../utils/cn.js";
+import { focusRing as h, transitionColors as x, buttonReset as p } from "../../utils/styles.js";
+const y = (e, i, r = 1) => {
+  const d = r * 2 + 5;
+  if (i <= d) return Array.from({ length: i }, (s, c) => c + 1);
+  const o = Math.max(2, e - r), l = Math.min(i - 1, e + r), t = [1];
+  o > 2 && t.push("ellipsis-start");
+  for (let s = o; s <= l; s++) t.push(s);
+  return l < i - 1 && t.push("ellipsis-end"), t.push(i), t;
+}, b = a(
+  "inline-flex min-h-9 min-w-9 cursor-pointer items-center justify-center gap-1 rounded-sbk-sm border px-2.5 text-sm disabled:cursor-not-allowed disabled:opacity-50",
+  x,
+  h
+), N = ({
+  currentPage: e,
+  totalPages: i,
+  onPageChange: r,
+  siblingCount: d = 1,
+  variant: o = "numbered",
+  className: l
 }) => {
-  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(
+  if (i <= 1) return null;
+  const t = "border-sbk-line bg-sbk-surface font-light text-sbk-fg hover:bg-sbk-surface-hover";
+  return /* @__PURE__ */ m("nav", { "aria-label": "Paginação", className: a("flex flex-wrap items-center gap-1", l), children: [
+    /* @__PURE__ */ m(
       "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)),
+        className: a(p, b, t),
+        disabled: e <= 1,
+        onClick: () => r(e - 1),
         type: "button",
-        children: "Anterior"
+        children: [
+          /* @__PURE__ */ n(f, { "aria-hidden": "true", className: "size-4" }),
+          "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(
+    o === "simple" ? /* @__PURE__ */ m("span", { "aria-live": "polite", className: "px-3 text-sm font-light text-sbk-fg-muted", children: [
+      "Página ",
+      /* @__PURE__ */ n("strong", { className: "font-semibold text-sbk-fg", children: e }),
+      " de",
+      " ",
+      i
+    ] }) : y(e, i, d).map(
+      (s) => typeof s == "number" ? /* @__PURE__ */ n(
+        "button",
+        {
+          "aria-current": s === e ? "page" : void 0,
+          "aria-label": `Página ${s}`,
+          className: a(
+            p,
+            b,
+            s === e ? "border-sbk-primary bg-sbk-primary font-semibold text-sbk-on-primary" : t
+          ),
+          onClick: () => r(s),
+          type: "button",
+          children: s
+        },
+        s
+      ) : /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "px-1 text-sm text-sbk-fg-muted", children: "…" }, s)
+    ),
+    /* @__PURE__ */ m(
       "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)),
+        className: a(p, b, t),
+        disabled: e >= i,
+        onClick: () => r(e + 1),
         type: "button",
-        children: "Próxima"
+        children: [
+          "Próxima",
+          /* @__PURE__ */ n(u, { "aria-hidden": "true", className: "size-4" })
+        ]
       }
     )
   ] });
 };
+N.displayName = "Pagination";
 export {
-  l as Pagination
+  N as Pagination,
+  y as getPageTokens
 };
 //# sourceMappingURL=Pagination.js.map