@sbkbs/ui 1.0.6 → 2.0.0-beta.0

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

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

@@ -1 +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;"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { buttonReset, focusRing, transitionColors } from '../../utils/styles';\n\nexport interface PaginationProps {\n  className?: string;\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  /** Páginas vizinhas exibidas ao redor da atual. Padrão: 1. */\n  siblingCount?: number;\n  /**\n   * `numbered`: lista de páginas com reticências.\n   * `simple`: apenas Anterior/Próxima com \"Página X de Y\" (para paginação sequencial).\n   */\n  variant?: 'numbered' | 'simple';\n  totalPages: number;\n}\n\ntype PageToken = number | 'ellipsis-start' | 'ellipsis-end';\n\nexport const getPageTokens = (current: number, total: number, siblings = 1): PageToken[] => {\n  const window = siblings * 2 + 5;\n  if (total <= window) return Array.from({ length: total }, (_, i) => i + 1);\n  const start = Math.max(2, current - siblings);\n  const end = Math.min(total - 1, current + siblings);\n  const tokens: PageToken[] = [1];\n  if (start > 2) tokens.push('ellipsis-start');\n  for (let p = start; p <= end; p++) tokens.push(p);\n  if (end < total - 1) tokens.push('ellipsis-end');\n  tokens.push(total);\n  return tokens;\n};\n\nconst buttonBase = cn(\n  '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',\n  transitionColors,\n  focusRing,\n);\n\nexport const Pagination = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  siblingCount = 1,\n  variant = 'numbered',\n  className,\n}: PaginationProps) => {\n  if (totalPages <= 1) return null;\n  const idle = 'border-sbk-line bg-sbk-surface font-light text-sbk-fg hover:bg-sbk-surface-hover';\n\n  return (\n    <nav aria-label=\"Paginação\" className={cn('flex flex-wrap items-center gap-1', className)}>\n      <button\n        className={cn(buttonReset, buttonBase, idle)}\n        disabled={currentPage <= 1}\n        onClick={() => onPageChange(currentPage - 1)}\n        type=\"button\"\n      >\n        <ChevronLeft aria-hidden=\"true\" className=\"size-4\" />\n        Anterior\n      </button>\n\n      {variant === 'simple' ? (\n        <span aria-live=\"polite\" className=\"px-3 text-sm font-light text-sbk-fg-muted\">\n          Página <strong className=\"font-semibold text-sbk-fg\">{currentPage}</strong> de{' '}\n          {totalPages}\n        </span>\n      ) : (\n        getPageTokens(currentPage, totalPages, siblingCount).map((token) =>\n          typeof token === 'number' ? (\n            <button\n              key={token}\n              aria-current={token === currentPage ? 'page' : undefined}\n              aria-label={`Página ${token}`}\n              className={cn(\n                buttonReset,\n                buttonBase,\n                token === currentPage\n                  ? 'border-sbk-primary bg-sbk-primary font-semibold text-sbk-on-primary'\n                  : idle,\n              )}\n              onClick={() => onPageChange(token)}\n              type=\"button\"\n            >\n              {token}\n            </button>\n          ) : (\n            <span key={token} aria-hidden=\"true\" className=\"px-1 text-sm text-sbk-fg-muted\">\n              …\n            </span>\n          ),\n        )\n      )}\n\n      <button\n        className={cn(buttonReset, buttonBase, idle)}\n        disabled={currentPage >= totalPages}\n        onClick={() => onPageChange(currentPage + 1)}\n        type=\"button\"\n      >\n        Próxima\n        <ChevronRight aria-hidden=\"true\" className=\"size-4\" />\n      </button>\n    </nav>\n  );\n};\n\nPagination.displayName = 'Pagination';\n"],"names":["getPageTokens","current","total","siblings","window","_","i","start","end","tokens","p","buttonBase","cn","transitionColors","focusRing","Pagination","currentPage","totalPages","onPageChange","siblingCount","variant","className","idle","jsxs","buttonReset","jsx","ChevronLeft","token","ChevronRight"],"mappings":";;;;AAoBO,MAAMA,IAAgB,CAACC,GAAiBC,GAAeC,IAAW,MAAmB;AAC1F,QAAMC,IAASD,IAAW,IAAI;AAC9B,MAAID,KAASE,EAAQ,QAAO,MAAM,KAAK,EAAE,QAAQF,EAAA,GAAS,CAACG,GAAGC,MAAMA,IAAI,CAAC;AACzE,QAAMC,IAAQ,KAAK,IAAI,GAAGN,IAAUE,CAAQ,GACtCK,IAAM,KAAK,IAAIN,IAAQ,GAAGD,IAAUE,CAAQ,GAC5CM,IAAsB,CAAC,CAAC;AAC9B,EAAIF,IAAQ,KAAGE,EAAO,KAAK,gBAAgB;AAC3C,WAASC,IAAIH,GAAOG,KAAKF,GAAKE,IAAK,CAAAD,EAAO,KAAKC,CAAC;AAChD,SAAIF,IAAMN,IAAQ,KAAGO,EAAO,KAAK,cAAc,GAC/CA,EAAO,KAAKP,CAAK,GACVO;AACT,GAEME,IAAaC;AAAA,EACjB;AAAA,EACAC;AAAA,EACAC;AACF,GAEaC,IAAa,CAAC;AAAA,EACzB,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC,IAAU;AAAA,EACV,WAAAC;AACF,MAAuB;AACrB,MAAIJ,KAAc,EAAG,QAAO;AAC5B,QAAMK,IAAO;AAEb,SACE,gBAAAC,EAAC,SAAI,cAAW,aAAY,WAAWX,EAAG,qCAAqCS,CAAS,GACtF,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWX,EAAGY,GAAab,GAAYW,CAAI;AAAA,QAC3C,UAAUN,KAAe;AAAA,QACzB,SAAS,MAAME,EAAaF,IAAc,CAAC;AAAA,QAC3C,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAS,EAACC,GAAA,EAAY,eAAY,QAAO,WAAU,UAAS;AAAA,UAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAItDN,MAAY,WACX,gBAAAG,EAAC,UAAK,aAAU,UAAS,WAAU,6CAA4C,UAAA;AAAA,MAAA;AAAA,MACtE,gBAAAE,EAAC,UAAA,EAAO,WAAU,6BAA6B,UAAAT,GAAY;AAAA,MAAS;AAAA,MAAI;AAAA,MAC9EC;AAAA,IAAA,EAAA,CACH,IAEAjB,EAAcgB,GAAaC,GAAYE,CAAY,EAAE;AAAA,MAAI,CAACQ,MACxD,OAAOA,KAAU,WACf,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,gBAAcE,MAAUX,IAAc,SAAS;AAAA,UAC/C,cAAY,UAAUW,CAAK;AAAA,UAC3B,WAAWf;AAAA,YACTY;AAAA,YACAb;AAAA,YACAgB,MAAUX,IACN,wEACAM;AAAA,UAAA;AAAA,UAEN,SAAS,MAAMJ,EAAaS,CAAK;AAAA,UACjC,MAAK;AAAA,UAEJ,UAAAA;AAAA,QAAA;AAAA,QAbIA;AAAA,MAAA,sBAgBN,QAAA,EAAiB,eAAY,QAAO,WAAU,kCAAiC,iBAArEA,CAEX;AAAA,IAAA;AAAA,IAKN,gBAAAJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWX,EAAGY,GAAab,GAAYW,CAAI;AAAA,QAC3C,UAAUN,KAAeC;AAAA,QACzB,SAAS,MAAMC,EAAaF,IAAc,CAAC;AAAA,QAC3C,MAAK;AAAA,QACN,UAAA;AAAA,UAAA;AAAA,UAEC,gBAAAS,EAACG,GAAA,EAAa,eAAY,QAAO,WAAU,SAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACtD,GACF;AAEJ;AAEAb,EAAW,cAAc;"}

package/dist/components/Paragraph/Paragraph.d.ts

@@ -1,11 +1,17 @@
 import type React from 'react';
+import { type TextWeight } from '../Typography/weight';
 export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
     align?: 'left' | 'center' | 'right' | 'justify';
     as?: 'p' | 'span' | 'div';
     children: React.ReactNode;
     italic?: boolean;
+    /** Cor secundária (Chumbo Leve). */
     muted?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
-    weight?: 'light' | 'normal' | 'medium';
+    /** Padrão: light (brand book: corpo em Leve 300, não em Regular 400). */
+    weight?: TextWeight;
 }
-export declare const Paragraph: React.FC<ParagraphProps>;
+export declare const Paragraph: {
+    ({ as: Tag, size, weight, align, muted, italic, children, className, ...props }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Paragraph/Paragraph.js

@@ -1,41 +1,44 @@
-import { jsx as v } from "react/jsx-runtime";
-const d = ({
+import { jsx as g } from "react/jsx-runtime";
+import { cn as f } from "../../utils/cn.js";
+import { weightClass as n } from "../Typography/weight.js";
+const o = {
+  xs: "text-xs leading-normal",
+  sm: "text-sm leading-normal",
+  md: "text-base leading-relaxed",
+  lg: "text-lg leading-relaxed"
+}, d = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify"
+}, p = ({
   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 });
-};
+  weight: a = "light",
+  align: s = "left",
+  muted: l = !1,
+  italic: r = !1,
+  children: x,
+  className: i,
+  ...m
+}) => /* @__PURE__ */ g(
+  t,
+  {
+    className: f(
+      "m-0 font-sbk text-pretty",
+      o[e],
+      n(a),
+      d[s],
+      l ? "text-sbk-fg-muted" : "text-sbk-fg",
+      r && "italic",
+      i
+    ),
+    ...m,
+    children: x
+  }
+);
+p.displayName = "Paragraph";
 export {
-  d as Paragraph
+  p as Paragraph
 };
 //# sourceMappingURL=Paragraph.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"Paragraph.js","sources":["../../../src/components/Paragraph/Paragraph.tsx"],"sourcesContent":["import type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { type TextWeight, weightClass } from '../Typography/weight';\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  /** Cor secundária (Chumbo Leve). */\n  muted?: boolean;\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n  /** Padrão: light (brand book: corpo em Leve 300, não em Regular 400). */\n  weight?: TextWeight;\n}\n\nconst SIZE_CLASS = {\n  xs: 'text-xs leading-normal',\n  sm: 'text-sm leading-normal',\n  md: 'text-base leading-relaxed',\n  lg: 'text-lg leading-relaxed',\n} as const;\n\nconst ALIGN_CLASS = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n  justify: 'text-justify',\n} as const;\n\nexport const Paragraph = ({\n  as: Tag = 'p',\n  size = 'md',\n  weight = 'light',\n  align = 'left',\n  muted = false,\n  italic = false,\n  children,\n  className,\n  ...props\n}: ParagraphProps) => (\n  <Tag\n    className={cn(\n      'm-0 font-sbk text-pretty',\n      SIZE_CLASS[size],\n      weightClass(weight),\n      ALIGN_CLASS[align],\n      muted ? 'text-sbk-fg-muted' : 'text-sbk-fg',\n      italic && 'italic',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </Tag>\n);\n\nParagraph.displayName = 'Paragraph';\n"],"names":["SIZE_CLASS","ALIGN_CLASS","Paragraph","Tag","size","weight","align","muted","italic","children","className","props","jsx","cn","weightClass"],"mappings":";;;AAgBA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAc;AAAA,EAClB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX,GAEaC,IAAY,CAAC;AAAA,EACxB,IAAIC,IAAM;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACT;AAAA,EAAA;AAAA,IACC,WAAWU;AAAA,MACT;AAAA,MACAb,EAAWI,CAAI;AAAA,MACfU,EAAYT,CAAM;AAAA,MAClBJ,EAAYK,CAAK;AAAA,MACjBC,IAAQ,sBAAsB;AAAA,MAC9BC,KAAU;AAAA,MACVE;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAAF;AAAA,EAAA;AACH;AAGFP,EAAU,cAAc;"}

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

@@ -1,7 +1,18 @@
 import type React from 'react';
 export interface PopoverProps {
+    align?: 'start' | 'center' | 'end';
     children: React.ReactNode;
+    /** Classe do botão gatilho. */
+    className?: string;
     content: React.ReactNode;
     defaultOpen?: boolean;
+    /** Controle externo do estado aberto. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    variant?: 'default' | 'glass';
 }
-export declare const Popover: React.FC<PopoverProps>;
+/** Painel flutuante não modal ancorado a um gatilho. Fecha com Esc e clique fora. */
+export declare const Popover: {
+    ({ children, content, defaultOpen, open: controlledOpen, onOpenChange, align, variant, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Popover/Popover.js

@@ -1,57 +1,69 @@
-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(
+import { jsxs as I, jsx as v } from "react/jsx-runtime";
+import { useState as h, useRef as o, useId as j, useEffect as z } from "react";
+import { cn as k } from "../../utils/cn.js";
+import { buttonReset as P } from "../../utils/styles.js";
+const S = { start: "left-0", center: "left-1/2 -translate-x-1/2", end: "right-0" }, q = ({
+  children: x,
+  content: g,
+  defaultOpen: w = !1,
+  open: c,
+  onOpenChange: r,
+  align: y = "center",
+  variant: E = "default",
+  className: R
+}) => {
+  const [L, N] = h(w), e = c ?? L, d = o(null), l = o(null), u = o(null), f = j(), s = (t) => {
+    c === void 0 && N(t), r == null || r(t);
+  }, a = o(s);
+  return a.current = s, z(() => {
+    var p, b;
+    if (!e) return;
+    (b = (p = u.current) == null ? void 0 : p.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());
+    )) == null || b.focus();
+    const t = (i) => {
+      var n;
+      (n = d.current) != null && n.contains(i.target) || a.current(!1);
+    }, m = (i) => {
+      var n;
+      i.key === "Escape" && (a.current(!1), (n = l.current) == null || n.focus());
+    };
+    return document.addEventListener("mousedown", t), document.addEventListener("keydown", m), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", m);
     };
-    return n && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [n]), /* @__PURE__ */ v("div", { className: "relative inline-flex", ref: i, children: [
-    /* @__PURE__ */ u(
+  }, [e]), /* @__PURE__ */ I("div", { ref: d, className: "relative inline-flex", children: [
+    /* @__PURE__ */ v(
       "button",
       {
-        "aria-controls": n ? l : void 0,
-        "aria-expanded": n,
+        ref: l,
+        "aria-controls": e ? f : void 0,
+        "aria-expanded": e,
         "aria-haspopup": "dialog",
-        className: "inline-flex",
-        onClick: () => t((e) => !e),
-        ref: c,
+        className: k(P, "inline-flex cursor-pointer", R),
+        onClick: () => s(!e),
         type: "button",
-        children: f
+        children: x
       }
     ),
-    n && /* @__PURE__ */ u(
+    e && /* @__PURE__ */ v(
       "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)]"
+        ref: u,
+        className: k(
+          "absolute top-full z-[var(--sbk-z-dropdown)] mt-2 w-max max-w-sm rounded-sbk-md p-4 text-sm font-light text-sbk-fg animate-sbk-fade-in",
+          E === "glass" ? "sbk-glass sbk-glass-strong" : "border border-sbk-line bg-sbk-surface shadow-sbk-md",
+          S[y]
         ),
-        id: l,
-        ref: o,
+        id: f,
         role: "dialog",
         tabIndex: -1,
-        children: m
+        children: g
       }
     )
   ] });
 };
+q.displayName = "Popover";
 export {
-  E as Popover
+  q as Popover
 };
 //# sourceMappingURL=Popover.js.map