@wellingtonhlc/shared-ui 0.1.16 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +3 -0
  2. package/dist/components/ActionPrimitives.d.ts +1 -0
  3. package/dist/components/ActionPrimitives.d.ts.map +1 -1
  4. package/dist/components/ActionPrimitives.js +5 -5
  5. package/dist/components/Button.d.ts +1 -1
  6. package/dist/components/Button.d.ts.map +1 -1
  7. package/dist/components/Button.js +7 -6
  8. package/dist/components/Card.d.ts.map +1 -1
  9. package/dist/components/Card.js +8 -4
  10. package/dist/components/ConfirmationDialog.d.ts +4 -3
  11. package/dist/components/ConfirmationDialog.d.ts.map +1 -1
  12. package/dist/components/ConfirmationDialog.js +35 -17
  13. package/dist/components/EmptyState.d.ts +2 -1
  14. package/dist/components/EmptyState.d.ts.map +1 -1
  15. package/dist/components/EmptyState.js +2 -2
  16. package/dist/components/FieldSkeleton.js +1 -1
  17. package/dist/components/Modal.d.ts +2 -1
  18. package/dist/components/Modal.d.ts.map +1 -1
  19. package/dist/components/Modal.js +5 -5
  20. package/dist/components/NavCard.js +1 -1
  21. package/dist/components/PageMessage.js +11 -11
  22. package/dist/components/StatCard.js +26 -26
  23. package/dist/index.d.ts +2 -2
  24. package/dist/index.d.ts.map +1 -1
  25. package/dist/index.js +2 -2
  26. package/dist/styles.css +796 -254
  27. package/package.json +1 -1
package/README.md CHANGED
@@ -210,6 +210,9 @@ Tabela de historico:
210
210
 
211
211
  | Versao | Data | Tipo | Resumo | Validacao |
212
212
  |--------|------|------|--------|-----------|
213
+ | `0.21.0` | 2026-06-17 | Minor pre-v1 | Adiciona stories para `Modal`, `Card`, `PageMessage`, `EmptyState`, `StatCard`, `SelectField`, `TextareaField`, `DateField`, `DecimalField`, `RadioGroup`, `MultiSelectField`, `TabsUnderlined`, `Tooltip`, `CopyableField`, `FieldGroup`, `FieldSkeleton`, `FieldValidationError`, `NavCard`, `Sidebar` e `AppShell`. | `npm run build`; `npm run build-storybook`. |
214
+ | `0.1.17` | 2026-06-16 | Minor pre-v1 | Remove a variante ambigua `default` de `Button`; adiciona variants semanticas `information` e `warning`; `ConfirmationDialog` usa `information`, `question`, `warning` e `destructive` com botao principal na cor da variant; Storybook passou a gerar tokens semanticos de tema. | `npm run build`; `npm run build-storybook`; builds do `EloDesk.CRM` e `EloDesk.CRM.Portal`. |
215
+ | `0.1.16` | 2026-06-16 | Patch | Consolida os ajustes visuais recentes do pacote para consumo no `EloDesk.CRM`. | `npm run build`; `npm run build-storybook`; validacao no `EloDesk.CRM`. |
213
216
  | `0.1.15` | 2026-06-16 | Patch | Corrige a hierarquia de z-index de `Modal` e `ConfirmationDialog` para o overlay cobrir sidebar e flyouts. | `npm run build`; `npm run build-storybook`. |
214
217
  | `0.1.14` | 2026-06-16 | Minor pre-v1 | Adiciona `icon` e `iconPosition` ao `TextField` e ajusta o offset lateral dos icones internos. | `npm run build`; `npm run build-storybook`. |
215
218
  | `0.1.13` | 2026-06-16 | Minor pre-v1 | Refina o visual do `Pagination`, remove botoes circulares e adiciona `size="sm" | "md" | "lg"`. | `npm run build`; `npm run build-storybook`. |
package/dist/components/ActionPrimitives.d.ts CHANGED
@@ -13,6 +13,7 @@ export interface ActionSeparatorPrimitiveProps {
13
13
  }
14
14
  export interface ActionButtonPrimitiveProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
15
15
  children?: ReactNode;
16
+ highlight?: boolean;
16
17
  icon?: ReactNode;
17
18
  label?: ReactNode;
18
19
  loading?: boolean;
package/dist/components/ActionPrimitives.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionPrimitives.d.ts","sourceRoot":"","sources":["../../src/components/ActionPrimitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3G,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAW,EAAE,EAAE,yBAAyB,+BAapH;AAED,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,6BAA6B,+BAEpF;AAQD,eAAO,MAAM,qBAAqB,0HA6CjC,CAAC;AAIF,eAAO,MAAM,mBAAmB,wHAI/B,CAAC"}
1
+ {"version":3,"file":"ActionPrimitives.d.ts","sourceRoot":"","sources":["../../src/components/ActionPrimitives.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,KAAK,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACjD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3G,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,OAAO,CAAC;IACtG,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,KAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAW,EAAE,EAAE,yBAAyB,+BAapH;AAED,wBAAgB,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,6BAA6B,+BAEpF;AAQD,eAAO,MAAM,qBAAqB,0HAiDjC,CAAC;AAIF,eAAO,MAAM,mBAAmB,wHAI/B,CAAC"}
package/dist/components/ActionPrimitives.js CHANGED
@@ -9,18 +9,18 @@ export function ActionSeparatorPrimitive({ className }) {
9
9
  }
10
10
  const variantClasses = {
11
11
  default: 'border-app-border bg-surface text-foreground-muted hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] hover:text-brand hover:shadow-[0_14px_26px_-20px_color-mix(in_srgb,var(--brand)_45%,#000)]',
12
- primary: 'border-transparent bg-gradient-to-br from-brand to-brand-hover text-white shadow-[0_18px_32px_-22px_var(--brand-hover)] hover:text-white',
13
- danger: 'border-transparent bg-[color-mix(in_srgb,var(--destructive)_12%,var(--surface))] text-red-700 hover:bg-destructive hover:text-white',
12
+ primary: 'border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] text-brand shadow-[0_14px_26px_-20px_color-mix(in_srgb,var(--brand)_45%,#000)] hover:bg-[color-mix(in_srgb,var(--brand)_16%,var(--surface))] hover:text-brand',
13
+ danger: 'border-[var(--status-danger-border,#f87171)] bg-[color-mix(in_srgb,var(--destructive)_12%,var(--surface))] text-[var(--status-danger-text,#7f1d1d)] hover:border-[var(--destructive)] hover:bg-destructive hover:text-white',
14
14
  };
15
- export const ActionButtonPrimitive = forwardRef(({ children, className, disabled, icon, label, loading = false, tooltip, type = 'button', variant = 'default', ...props }, ref) => {
15
+ export const ActionButtonPrimitive = forwardRef(({ children, className, disabled, highlight = false, icon, label, loading = false, tooltip, type = 'button', variant = 'default', ...props }, ref) => {
16
16
  const content = label ?? children;
17
17
  const hasText = Boolean(content);
18
18
  const isDisabled = disabled || loading;
19
- return (_jsxs("button", { ref: ref, type: type, "aria-label": tooltip, title: tooltip, disabled: isDisabled, className: cn('inline-flex cursor-pointer select-none items-center justify-center border font-bold transition-[background-color,border-color,color,box-shadow,transform,opacity] duration-150 active:translate-y-px disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--brand)_36%,transparent)] disabled:cursor-not-allowed disabled:opacity-60', variantClasses[variant],
19
+ return (_jsxs("button", { ref: ref, type: type, "aria-label": tooltip, title: tooltip, disabled: isDisabled, className: cn('inline-flex cursor-pointer select-none items-center justify-center border font-semibold transition-[background-color,border-color,color,box-shadow,transform,opacity] duration-150 active:translate-y-px disabled:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--brand)_36%,transparent)] disabled:cursor-not-allowed disabled:opacity-60', variantClasses[variant],
20
20
  // Forma visual consistente: cantos arredondados (rounded-md) com e sem texto.
21
21
  // Botoes so-icone (IconButtonPrimitive) ficam quadrados; botoes com texto
22
22
  // recebem padding horizontal. A forma vem do pacote, nao do consumidor.
23
- 'rounded-md', hasText ? 'min-h-8 gap-1.5 px-3 text-[0.8125rem]' : 'size-8 p-0', loading && 'cursor-wait opacity-75', className), ...props, children: [icon && _jsx("span", { className: "inline-flex shrink-0 items-center justify-center [&_svg]:size-4", children: icon }), hasText && _jsx("span", { className: "whitespace-nowrap", children: content })] }));
23
+ 'rounded-md', hasText ? 'min-h-8 gap-1.5 px-3 text-[0.8125rem]' : 'size-8 p-0', highlight && variant === 'default' && 'font-bold text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] [&_svg]:stroke-[2.6]', highlight && variant === 'primary' && 'font-bold text-[color-mix(in_srgb,var(--brand)_72%,var(--foreground))] [&_svg]:stroke-[2.6]', highlight && variant === 'danger' && 'font-bold text-[color-mix(in_srgb,var(--destructive)_86%,var(--foreground))] [&_svg]:stroke-[2.6]', loading && 'cursor-wait opacity-75', className), ...props, children: [icon && _jsx("span", { className: "inline-flex shrink-0 items-center justify-center [&_svg]:size-4", children: icon }), hasText && _jsx("span", { className: "whitespace-nowrap", children: content })] }));
24
24
  });
25
25
  ActionButtonPrimitive.displayName = 'ActionButtonPrimitive';
26
26
  export const IconButtonPrimitive = forwardRef(({ 'aria-label': ariaLabel, tooltip, ...props }, ref) => (_jsx(ActionButtonPrimitive, { ref: ref, "aria-label": ariaLabel, tooltip: tooltip ?? ariaLabel, ...props })));
package/dist/components/Button.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type ButtonHTMLAttributes } from 'react';
2
- export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'ghost' | 'outline' | 'success' | 'danger' | 'destructive' | 'sidebar';
2
+ export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'information' | 'success' | 'warning' | 'danger' | 'destructive' | 'sidebar';
3
3
  export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'wide';
4
4
  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
5
5
  variant?: ButtonVariant;
package/dist/components/Button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI9D,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,SAAS,GACT,WAAW,GACX,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,GACR,aAAa,GACb,SAAS,CAAC;AACd,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuCD,eAAO,MAAM,MAAM,2GAmDlB,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI9D,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,WAAW,GACX,OAAO,GACP,SAAS,GACT,aAAa,GACb,SAAS,GACT,SAAS,GACT,QAAQ,GACR,aAAa,GACb,SAAS,CAAC;AACd,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE5D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAyCD,eAAO,MAAM,MAAM,2GAmDlB,CAAC"}
package/dist/components/Button.js CHANGED
@@ -2,12 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { forwardRef } from 'react';
3
3
  import { cn } from '../utils/cn';
4
4
  const variantClasses = {
5
- default: 'border-app-border bg-surface text-foreground hover:border-[color-mix(in_srgb,var(--foreground-muted)_42%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,var(--surface))]',
6
- primary: 'border-transparent bg-[var(--brand)] text-[var(--primary-foreground,#ffffff)] shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--brand)_70%,#000)] hover:bg-[var(--brand-hover,var(--brand))]',
7
- secondary: 'border-[color-mix(in_srgb,var(--brand)_28%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_10%,var(--surface))] text-[var(--brand)] hover:bg-[color-mix(in_srgb,var(--brand)_16%,var(--surface))]',
8
- ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,transparent)] hover:text-foreground',
9
- outline: 'border-app-border bg-transparent text-foreground hover:border-[color-mix(in_srgb,var(--brand)_46%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] hover:text-[var(--brand)]',
5
+ primary: 'border-transparent bg-[var(--brand)] text-[var(--primary-foreground,#ffffff)] shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--brand)_70%,#000)] hover:bg-[var(--brand-hover,var(--brand))] hover:shadow-[0_16px_28px_-18px_color-mix(in_srgb,var(--brand)_80%,#000)] dark:shadow-[0_14px_28px_-20px_color-mix(in_srgb,var(--brand)_86%,#000)]',
6
+ secondary: 'border-[color-mix(in_srgb,var(--brand)_34%,var(--app-border))] bg-[color-mix(in_srgb,var(--brand)_12%,var(--surface))] text-[color-mix(in_srgb,var(--brand)_88%,var(--foreground))] shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--brand)_8%,transparent)] hover:border-[color-mix(in_srgb,var(--brand)_48%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_18%,var(--surface))] dark:border-[color-mix(in_srgb,var(--brand)_42%,var(--app-border))] dark:bg-[color-mix(in_srgb,var(--brand)_18%,var(--surface))] dark:text-[color-mix(in_srgb,var(--brand)_42%,#fff)] dark:hover:bg-[color-mix(in_srgb,var(--brand)_24%,var(--surface))] dark:hover:text-[color-mix(in_srgb,var(--brand)_30%,#fff)]',
7
+ ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_14%,transparent)] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,#fff)]',
8
+ outline: 'border-app-border bg-transparent text-foreground hover:border-[color-mix(in_srgb,var(--brand)_46%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))] dark:hover:border-[color-mix(in_srgb,var(--brand)_54%,var(--app-border))] dark:hover:bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] dark:hover:text-[color-mix(in_srgb,var(--brand)_78%,#fff)]',
9
+ information: 'border-transparent bg-[var(--status-info-text,#1d4ed8)] text-white shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--status-info-text,#1d4ed8)_70%,#000)] hover:bg-[color-mix(in_srgb,var(--status-info-text,#1d4ed8)_88%,#000)]',
10
10
  success: 'border-transparent bg-[var(--status-success-text,#15803d)] text-white hover:bg-[color-mix(in_srgb,var(--status-success-text,#15803d)_88%,#000)]',
11
+ warning: 'border-transparent bg-[var(--status-warning-text,#92400e)] text-white shadow-[0_10px_22px_-16px_color-mix(in_srgb,var(--status-warning-text,#92400e)_70%,#000)] hover:bg-[color-mix(in_srgb,var(--status-warning-text,#92400e)_88%,#000)]',
11
12
  danger: 'border-transparent bg-[var(--status-danger-text,#b91c1c)] text-white hover:bg-[color-mix(in_srgb,var(--status-danger-text,#b91c1c)_88%,#000)]',
12
13
  destructive: 'border-transparent bg-[var(--destructive)] text-white hover:bg-[color-mix(in_srgb,var(--destructive)_88%,#000)]',
13
14
  sidebar: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[var(--brand)]',
@@ -26,7 +27,7 @@ const roundedSizeClasses = {
26
27
  lg: 'size-14 min-h-14 min-w-14 p-3 text-base',
27
28
  wide: 'min-h-11 min-w-20 w-full px-4 py-2.5 text-sm',
28
29
  };
29
- export const Button = forwardRef(({ children, className, disabled, isLoading = false, isSubmitting = false, minWidth, rounded = false, size = 'md', style, title, tooltip, type = 'button', variant = 'secondary', ...props }, ref) => {
30
+ export const Button = forwardRef(({ children, className, disabled, isLoading = false, isSubmitting = false, minWidth, rounded = false, size = 'md', style, title, tooltip, type = 'button', variant = 'primary', ...props }, ref) => {
30
31
  const busy = isLoading || isSubmitting;
31
32
  const resolvedSize = rounded ? roundedSizeClasses[size] : sizeClasses[size];
32
33
  const ariaBusy = props['aria-busy'] ?? (busy ? true : undefined);
package/dist/components/Card.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AACxE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAkB9D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,SAAiB,EACjB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,+BAeX;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAarE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,kBAAkB,CAAC,+BAavF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAM/E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAMtF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAMvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BASvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BASpF;AAED,eAAO,MAAM,IAAI;;;;;;;;;CAShB,CAAC"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AACxE,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAC9D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAyB9D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,SAAiB,EACjB,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,SAAS,+BAeX;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAarE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,kBAAkB,CAAC,+BAavF;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAM/E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAMtF;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAMvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BASvE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BASpF;AAED,eAAO,MAAM,IAAI;;;;;;;;;CAShB,CAAC"}
package/dist/components/Card.js CHANGED
@@ -1,12 +1,16 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { cn } from '../utils/cn';
3
3
  function getCardVariantClass(variant) {
4
- if (variant === 'subtle')
5
- return 'bg-surface/60';
4
+ if (variant === 'subtle') {
5
+ return 'bg-[color-mix(in_srgb,var(--foreground-muted)_5%,var(--surface))] shadow-none';
6
+ }
7
+ if (variant === 'surface') {
8
+ return 'bg-surface shadow-[inset_0_1px_0_color-mix(in_srgb,#fff_40%,transparent)]';
9
+ }
6
10
  if (variant === 'elevated') {
7
- return 'bg-surface shadow-[0_12px_32px_rgba(15,23,42,0.06)]';
11
+ return 'bg-surface shadow-[0_16px_36px_-24px_color-mix(in_srgb,#000_50%,transparent)]';
8
12
  }
9
- return 'bg-surface';
13
+ return 'bg-background-secondary shadow-sm';
10
14
  }
11
15
  function getContentDensityClass(density) {
12
16
  if (density === 'none')
package/dist/components/ConfirmationDialog.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { type ReactNode } from 'react';
2
2
  import { type ButtonProps } from './Button';
3
- export type ConfirmationDialogVariant = 'default' | 'question' | 'destructive';
3
+ export type ConfirmationDialogVariant = 'information' | 'question' | 'warning' | 'destructive';
4
+ export type ConfirmationDialogVariantInput = ConfirmationDialogVariant | 'default';
4
5
  export type ConfirmationDialogButtonVariant = 'cancel' | 'confirm' | 'danger' | 'success';
5
6
  export interface ConfirmationDialogAction extends Omit<ButtonProps, 'children' | 'onClick'> {
6
7
  children?: ReactNode;
@@ -18,7 +19,7 @@ export interface ConfirmationDialogProps {
18
19
  onConfirm?: () => Promise<void> | void;
19
20
  open: boolean;
20
21
  title?: ReactNode;
21
- variant?: ConfirmationDialogVariant;
22
+ variant?: ConfirmationDialogVariantInput;
22
23
  }
23
24
  export interface ConfirmationDialogRootProps {
24
25
  children: ReactNode;
@@ -27,7 +28,7 @@ export interface ConfirmationDialogRootProps {
27
28
  onOpenChange: (open: boolean) => void;
28
29
  open: boolean;
29
30
  overlayClassName?: string;
30
- variant?: ConfirmationDialogVariant;
31
+ variant?: ConfirmationDialogVariantInput;
31
32
  }
32
33
  export interface ConfirmationDialogButtonProps extends Omit<ButtonProps, 'children' | 'onClick' | 'variant'> {
33
34
  buttonVariant?: ButtonProps['variant'];
package/dist/components/ConfirmationDialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmationDialog.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,KAAK,SAAS,EAOf,MAAM,OAAO,CAAC;AAKf,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAElE,MAAM,MAAM,yBAAyB,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;AAC/F,MAAM,MAAM,8BAA8B,GAAG,yBAAyB,GAAG,SAAS,CAAC;AACnF,MAAM,MAAM,+BAA+B,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1F,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,SAAS,CAAC;IACzF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,8BAA8B,CAAC;CAC1C;AAED,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,8BAA8B,CAAC;CAC1C;AAED,MAAM,WAAW,6BACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAC7D,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,+BAA+B,CAAC;CAC3C;AA+ED,iBAAS,IAAI,CAAC,EACZ,QAAQ,EACR,SAAS,EACT,aAAoB,EACpB,YAAY,EACZ,IAAI,EACJ,gBAAgB,EAChB,OAAuB,GACxB,EAAE,2BAA2B,4BAuK7B;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAMlD;AAED,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAiBlF;AAED,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAWxF;AAED,iBAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAEjF;AAED,iBAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBAMnF;AAED,iBAAS,MAAM,CAAC,EACd,QAAQ,EACR,cAAqB,EACrB,QAAQ,EACR,KAAK,EACL,QAAc,EACd,OAAO,EACP,IAAW,EACX,MAAc,EACd,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,6BAA6B,qBA8D/B;AAED,iBAAS,wBAAwB,CAAC,EAChC,OAAO,EACP,WAAmB,EACnB,QAAQ,EACR,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,KAAsB,EACtB,OAAuB,GACxB,EAAE,uBAAuB,qBA6CzB;AAED,eAAO,MAAM,kBAAkB;;;;;;;;CAQ7B,CAAC"}
package/dist/components/ConfirmationDialog.js CHANGED
@@ -1,32 +1,46 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { createContext, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
3
3
  import { createPortal } from 'react-dom';
4
- import { AlertTriangleIcon, HelpCircleIcon, InfoIcon, XIcon } from 'lucide-react';
4
+ import { AlertCircleIcon, AlertTriangleIcon, HelpCircleIcon, InfoIcon, XIcon } from 'lucide-react';
5
5
  import { cn } from '../utils/cn';
6
6
  import { Button as BaseButton } from './Button';
7
7
  const ConfirmationDialogContext = createContext(null);
8
+ function resolveVariant(variant) {
9
+ return variant === 'default' ? 'information' : variant;
10
+ }
8
11
  const dialogVariantStyles = {
9
- default: {
12
+ information: {
10
13
  icon: InfoIcon,
11
- iconClassName: 'text-brand',
12
- titleClassName: 'text-foreground',
14
+ iconClassName: 'text-[color-mix(in_srgb,var(--status-info-text,#2563eb)_76%,var(--foreground))]',
15
+ titleClassName: 'text-[color-mix(in_srgb,var(--status-info-text,#2563eb)_76%,var(--foreground))]',
13
16
  },
14
17
  question: {
15
18
  icon: HelpCircleIcon,
16
- iconClassName: 'text-foreground-muted',
17
- titleClassName: 'text-foreground',
19
+ iconClassName: 'text-[color-mix(in_srgb,var(--brand)_82%,var(--foreground))]',
20
+ titleClassName: 'text-[color-mix(in_srgb,var(--brand)_82%,var(--foreground))]',
18
21
  },
19
- destructive: {
22
+ warning: {
20
23
  icon: AlertTriangleIcon,
21
- iconClassName: 'text-destructive',
22
- titleClassName: 'text-foreground',
24
+ iconClassName: 'text-[color-mix(in_srgb,var(--status-warning-text,#d97706)_76%,var(--foreground))]',
25
+ titleClassName: 'text-[color-mix(in_srgb,var(--status-warning-text,#d97706)_76%,var(--foreground))]',
26
+ },
27
+ destructive: {
28
+ icon: AlertCircleIcon,
29
+ iconClassName: 'text-[color-mix(in_srgb,var(--destructive)_86%,var(--foreground))]',
30
+ titleClassName: 'text-[color-mix(in_srgb,var(--destructive)_86%,var(--foreground))]',
23
31
  },
24
32
  };
25
33
  const buttonVariantDefaults = {
26
34
  cancel: { label: 'Cancelar', buttonVariant: 'outline' },
27
- confirm: { label: 'Confirmar', buttonVariant: 'default' },
35
+ confirm: { label: 'Confirmar', buttonVariant: 'primary' },
28
36
  danger: { label: 'Não', buttonVariant: 'outline' },
29
- success: { label: 'Sim', buttonVariant: 'default' },
37
+ success: { label: 'Sim', buttonVariant: 'primary' },
38
+ };
39
+ const confirmButtonVariantByDialog = {
40
+ information: 'information',
41
+ question: 'primary',
42
+ warning: 'warning',
43
+ destructive: 'destructive',
30
44
  };
31
45
  function useConfirmationDialog() {
32
46
  const context = useContext(ConfirmationDialogContext);
@@ -35,9 +49,10 @@ function useConfirmationDialog() {
35
49
  }
36
50
  return context;
37
51
  }
38
- function Root({ children, className, closeOnEscape = true, onOpenChange, open, overlayClassName, variant = 'default', }) {
52
+ function Root({ children, className, closeOnEscape = true, onOpenChange, open, overlayClassName, variant = 'information', }) {
39
53
  const titleId = useId();
40
54
  const descriptionId = useId();
55
+ const resolvedVariant = resolveVariant(variant);
41
56
  const [submittingId, setSubmittingId] = useState(null);
42
57
  const [focusedId, setFocusedId] = useState(null);
43
58
  const buttonRefs = useRef({});
@@ -130,8 +145,8 @@ function Root({ children, className, closeOnEscape = true, onOpenChange, open, o
130
145
  setFocusedId,
131
146
  submittingId,
132
147
  titleId,
133
- variant,
134
- }), [descriptionId, focusedId, isBusy, submittingId, titleId, variant]);
148
+ variant: resolvedVariant,
149
+ }), [descriptionId, focusedId, isBusy, resolvedVariant, submittingId, titleId]);
135
150
  if (!open) {
136
151
  return null;
137
152
  }
@@ -160,11 +175,14 @@ function Footer({ children, className }) {
160
175
  }
161
176
  function Button({ children, closeOnSuccess = true, disabled, label, minWidth = 100, onClick, size = 'sm', submit = false, variant = 'confirm', ...props }) {
162
177
  const id = useId();
163
- const { focusedId, isBusy, registerButton, runAction, setFocusedId, submittingId } = useConfirmationDialog();
178
+ const { focusedId, isBusy, registerButton, runAction, setFocusedId, submittingId, variant: dialogVariant, } = useConfirmationDialog();
164
179
  const defaults = buttonVariantDefaults[variant];
165
180
  const { buttonVariant, className, onBlur, onFocus, style, ...buttonProps } = props;
166
181
  const isSubmitting = submittingId === id;
167
182
  const isFocused = focusedId === id;
183
+ const isMainAction = variant === 'confirm' || variant === 'success';
184
+ const resolvedButtonVariant = buttonVariant
185
+ ?? (isMainAction ? confirmButtonVariantByDialog[dialogVariant] : defaults.buttonVariant);
168
186
  function handleClick() {
169
187
  void runAction(id, onClick, submit, closeOnSuccess);
170
188
  }
@@ -176,7 +194,7 @@ function Button({ children, closeOnSuccess = true, disabled, label, minWidth = 1
176
194
  setFocusedId(null);
177
195
  onBlur?.(event);
178
196
  }
179
- return (_jsx(BaseButton, { ...buttonProps, ref: (element) => registerButton(id, element), disabled: disabled || (isBusy && !isSubmitting), isSubmitting: isSubmitting, minWidth: minWidth, onBlur: handleBlur, onClick: handleClick, onFocus: handleFocus, size: size, variant: buttonVariant ?? defaults.buttonVariant, className: cn('h-9 min-h-9 rounded-md px-3 py-0 text-sm leading-none', 'focus:outline-none focus-visible:outline-none', className), style: {
197
+ return (_jsx(BaseButton, { ...buttonProps, ref: (element) => registerButton(id, element), disabled: disabled || (isBusy && !isSubmitting), isSubmitting: isSubmitting, minWidth: minWidth, onBlur: handleBlur, onClick: handleClick, onFocus: handleFocus, size: size, variant: resolvedButtonVariant, className: cn('h-9 min-h-9 rounded-md px-3 py-0 text-sm leading-none', 'focus:outline-none focus-visible:outline-none', className), style: {
180
198
  ...style,
181
199
  ...(isFocused
182
200
  ? {
@@ -185,7 +203,7 @@ function Button({ children, closeOnSuccess = true, disabled, label, minWidth = 1
185
203
  : {}),
186
204
  }, children: children ?? label ?? defaults.label }));
187
205
  }
188
- function ConfirmationDialogSimple({ actions, cancelLabel = 'Não', children, className, confirmLabel = 'Sim', description, onClose, onConfirm, open, title = 'Tem certeza?', variant = 'default', }) {
206
+ function ConfirmationDialogSimple({ actions, cancelLabel = 'Não', children, className, confirmLabel = 'Sim', description, onClose, onConfirm, open, title = 'Tem certeza?', variant = 'information', }) {
189
207
  function handleOpenChange(nextOpen) {
190
208
  if (!nextOpen) {
191
209
  onClose();
package/dist/components/EmptyState.d.ts CHANGED
@@ -6,8 +6,9 @@ export interface EmptyStateProps {
6
6
  icon?: ReactNode;
7
7
  showIcon?: boolean;
8
8
  variant?: EmptyStateVariant;
9
+ withMargin?: boolean;
9
10
  className?: string;
10
11
  children?: ReactNode;
11
12
  }
12
- export declare function EmptyState({ title, description, icon, showIcon, variant, className, children, }: EmptyStateProps): import("react").JSX.Element;
13
+ export declare function EmptyState({ title, description, icon, showIcon, variant, withMargin, className, children, }: EmptyStateProps): import("react").JSX.Element;
13
14
  //# sourceMappingURL=EmptyState.d.ts.map
package/dist/components/EmptyState.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAwB,EACxB,WAAW,EACX,IAA2B,EAC3B,QAAe,EACf,OAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BA4BjB"}
1
+ {"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAwB,EACxB,WAAW,EACX,IAA2B,EAC3B,QAAe,EACf,OAAmB,EACnB,UAAkB,EAClB,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BA6BjB"}
package/dist/components/EmptyState.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { cloneElement, isValidElement } from 'react';
3
3
  import { cn } from '../utils/cn';
4
- export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(DefaultEmptyIcon, {}), showIcon = true, variant = 'default', className, children, }) {
4
+ export function EmptyState({ title = 'Nada por aqui.', description, icon = _jsx(DefaultEmptyIcon, {}), showIcon = true, variant = 'default', withMargin = false, className, children, }) {
5
5
  const isCompact = variant === 'compact';
6
6
  const styledIcon = isValidElement(icon)
7
7
  ? cloneElement(icon, {
8
8
  className: cn('h-10 w-10 text-foreground-muted', icon.props.className),
9
9
  })
10
10
  : icon;
11
- return (_jsx("div", { className: cn('m-2 flex min-h-0 flex-1 items-center justify-center rounded-[1.5rem] border border-dashed rounded rounded-md bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'px-5 py-10', className), children: _jsxs("div", { className: cn('mx-auto grid justify-items-center', isCompact ? 'max-w-xs gap-1.5' : 'max-w-sm gap-2'), children: [showIcon && styledIcon ? (_jsx("div", { className: "text-foreground-muted mb-1 flex h-11 w-11 items-center justify-center", children: styledIcon })) : null, _jsx("strong", { className: "text-foreground text-sm font-semibold", children: title }), description ? _jsx("p", { className: "text-foreground-muted text-xs leading-5", children: description }) : null, children ? _jsx("div", { className: cn('mt-2 flex flex-wrap items-center justify-center gap-2', isCompact ? 'text-xs' : 'text-sm'), children: children }) : null] }) }));
11
+ return (_jsx("div", { className: cn('flex min-h-0 w-full items-center justify-center rounded-md border border-dashed bg-surface text-center text-foreground-muted', isCompact ? 'px-4 py-6' : 'h-full flex-1 px-5 py-10', withMargin && 'm-2', className), children: _jsxs("div", { className: cn('mx-auto grid justify-items-center', isCompact ? 'max-w-xs gap-1.5' : 'max-w-sm gap-2'), children: [showIcon && styledIcon ? (_jsx("div", { className: "text-foreground-muted mb-1 flex h-11 w-11 items-center justify-center", children: styledIcon })) : null, _jsx("strong", { className: "text-foreground text-sm font-semibold", children: title }), description ? _jsx("p", { className: "text-foreground-muted text-xs leading-5", children: description }) : null, children ? _jsx("div", { className: cn('mt-2 flex flex-wrap items-center justify-center gap-2', isCompact ? 'text-xs' : 'text-sm'), children: children }) : null] }) }));
12
12
  }
13
13
  function DefaultEmptyIcon() {
14
14
  return (_jsx("svg", { "aria-hidden": "true", className: "h-10 w-10", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "1.8", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 8.75 6.2 5.4A2 2 0 0 1 7.82 4.6h8.36a2 2 0 0 1 1.62.8l2.45 3.35M3.75 8.75v6.9A3.75 3.75 0 0 0 7.5 19.4h9a3.75 3.75 0 0 0 3.75-3.75v-6.9M3.75 8.75h4.92a1.5 1.5 0 0 1 1.34.83l.28.56a1.5 1.5 0 0 0 1.34.83h.74a1.5 1.5 0 0 0 1.34-.83l.28-.56a1.5 1.5 0 0 1 1.34-.83h4.92" }) }));
package/dist/components/FieldSkeleton.js CHANGED
@@ -14,7 +14,7 @@ const controlSizeClasses = {
14
14
  };
15
15
  export const FieldSkeleton = ({ isLoading, hasLabel = true, labelPosition = 'top', size = 'md', className, children, ...divProps }) => {
16
16
  const isHorizontal = labelPosition === 'left' || labelPosition === 'right';
17
- const content = (_jsxs(_Fragment, { children: [hasLabel && (_jsx("div", { className: cn('block rounded bg-gray-300 dark:bg-gray-700', labelSizeClasses[size], isHorizontal ? 'mb-0 shrink-0' : 'mb-1') })), _jsx("div", { className: cn('w-full animate-pulse rounded-md bg-gray-300 dark:bg-gray-700', controlSizeClasses[size]) })] }));
17
+ const content = (_jsxs(_Fragment, { children: [hasLabel && (_jsx("div", { className: cn('block rounded bg-[color-mix(in_srgb,var(--foreground-muted)_18%,var(--surface))] dark:bg-[color-mix(in_srgb,var(--foreground-muted)_30%,var(--surface))]', labelSizeClasses[size], isHorizontal ? 'mb-0 shrink-0' : 'mb-1') })), _jsx("div", { className: cn('w-full animate-pulse rounded-md bg-[color-mix(in_srgb,var(--foreground-muted)_16%,var(--surface))] dark:bg-[color-mix(in_srgb,var(--foreground-muted)_28%,var(--surface))]', controlSizeClasses[size]) })] }));
18
18
  if (isLoading) {
19
19
  return (_jsx("div", { className: cn(isHorizontal ? 'flex items-center gap-2' : 'flex flex-col gap-1', labelPosition === 'right' && 'flex-row-reverse', className), ...divProps, children: content }));
20
20
  }
package/dist/components/Modal.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface ModalRootProps extends React.ComponentProps<typeof DialogPrimit
7
7
  size?: ModalSize;
8
8
  offset?: number;
9
9
  centered?: boolean;
10
+ density?: ModalDensity;
10
11
  showCloseButton?: boolean;
11
12
  variant?: ModalVariant;
12
13
  className?: string;
@@ -26,7 +27,7 @@ declare function createTrigger(trigger: React.ReactNode, options: {
26
27
  open: boolean;
27
28
  onOpen: () => void;
28
29
  }): string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
29
- declare function ModalRoot({ allowExternalFocus, centered, children, className, overlayClassName, offset, showCloseButton, size, variant, ...props }: ModalRootProps): React.JSX.Element;
30
+ declare function ModalRoot({ allowExternalFocus, centered, children, className, density, overlayClassName, offset, showCloseButton, size, variant, ...props }: ModalRootProps): React.JSX.Element;
30
31
  declare function ModalHeader({ className, density, separated, ...props }: ModalSectionProps): React.JSX.Element;
31
32
  declare function ModalBody({ className, density, overflowVisible, scrollable, ...props }: ModalBodyProps): React.JSX.Element;
32
33
  declare function ModalFooter({ className, density, separated, ...props }: ModalSectionProps): React.JSX.Element;
package/dist/components/Modal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgDD,iBAAS,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,4UAW9F;AAED,iBAAS,SAAS,CAAC,EACjB,kBAA0B,EAC1B,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,MAAM,EACN,eAAsB,EACtB,IAAW,EACX,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,qBAoDhB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBActG;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,eAAuB,EAAE,UAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAc3H;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAcrG;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAE9F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAE1G;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;CAWjB,CAAC"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/components/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACpE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAgDD,iBAAS,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,OAAO,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,4UAW9F;AAED,iBAAS,SAAS,CAAC,EACjB,kBAA0B,EAC1B,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,OAAmB,EACnB,gBAAgB,EAChB,MAAM,EACN,eAAsB,EACtB,IAAW,EACX,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,cAAc,qBAsDhB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAetG;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,eAAuB,EAAE,UAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAc3H;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,SAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,qBAcrG;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,qBAE9F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,qBAE1G;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;CAWjB,CAAC"}
package/dist/components/Modal.js CHANGED
@@ -47,21 +47,21 @@ function createTrigger(trigger, options) {
47
47
  'data-state': options.open ? 'open' : 'closed',
48
48
  });
49
49
  }
50
- function ModalRoot({ allowExternalFocus = false, centered = false, children, className, overlayClassName, offset, showCloseButton = true, size = 'lg', variant = 'default', ...props }) {
50
+ function ModalRoot({ allowExternalFocus = false, centered = false, children, className, density = 'default', overlayClassName, offset, showCloseButton = true, size = 'lg', variant = 'default', ...props }) {
51
51
  const hasFooter = React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === ModalFooter);
52
52
  return (_jsx(DialogPrimitive.Root, { ...props, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: cn('fixed inset-0 z-[100] bg-black/50 backdrop-blur-[2px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0', overlayClassName) }), _jsxs(DialogPrimitive.Content, { onFocusOutside: allowExternalFocus ? (event) => event.preventDefault() : undefined, style: {
53
53
  width: widthVariants[size],
54
54
  ...(!centered && offset ? { top: `${offset}px` } : {}),
55
- }, className: cn('fixed z-[110] grid max-h-[95vh] gap-4', hasFooter ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_minmax(0,1fr)]', 'rounded-xl duration-200', variant === 'default' && 'border-app-border bg-background-secondary text-foreground border p-6 shadow-lg', variant === 'elevated' && 'border-app-border bg-surface text-foreground border p-6 shadow-2xl', centered ? 'left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2' : 'left-[50%] top-[2.5%] -translate-x-1/2', sizeVariants[size], minHeightVariants[size], 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', className), children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { className: cn('absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md', 'text-foreground-muted hover:bg-background hover:text-foreground cursor-pointer transition-colors', 'focus:ring-brand/50 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'), children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Fechar" })] })) : null] })] }) }));
55
+ }, className: cn('fixed z-[110] grid max-h-[95vh] gap-4', hasFooter ? 'grid-rows-[auto_minmax(0,1fr)_auto]' : 'grid-rows-[auto_minmax(0,1fr)]', 'rounded-xl duration-200', density === 'default' && 'gap-4 p-6', density === 'compact' && 'gap-2.5 p-4', variant === 'default' && 'border-app-border bg-background-secondary text-foreground border shadow-lg', variant === 'elevated' && 'border-app-border bg-surface text-foreground border shadow-2xl', centered ? 'left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2' : 'left-[50%] top-[2.5%] -translate-x-1/2', sizeVariants[size], minHeightVariants[size], 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', className), children: [children, showCloseButton ? (_jsxs(DialogPrimitive.Close, { className: cn('absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md', 'text-foreground-muted hover:bg-background hover:text-foreground cursor-pointer transition-colors', 'focus:ring-brand/50 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'), children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Fechar" })] })) : null] })] }) }));
56
56
  }
57
57
  function ModalHeader({ className, density = 'default', separated = false, ...props }) {
58
- return (_jsx("div", { "data-slot": "modal-header", className: cn('flex flex-col text-center sm:text-left', density === 'default' && 'gap-1', density === 'compact' && 'gap-0.5', separated && 'border-app-border border-b pb-3', className), ...props }));
58
+ return (_jsx("div", { "data-slot": "modal-header", className: cn('flex flex-col text-center sm:text-left', density === 'default' && 'gap-1.5 [&_[data-slot=modal-description]]:text-sm [&_[data-slot=modal-title]]:text-lg', density === 'compact' && 'gap-0.5 [&_[data-slot=modal-description]]:text-xs [&_[data-slot=modal-title]]:text-base', separated && density === 'default' && 'border-app-border border-b pb-4', separated && density === 'compact' && 'border-app-border border-b pb-2', className), ...props }));
59
59
  }
60
60
  function ModalBody({ className, density = 'default', overflowVisible = false, scrollable = false, ...props }) {
61
- return (_jsx("div", { "data-slot": "modal-body", className: cn('flex min-h-0 flex-col text-sm', density === 'default' && 'space-y-4', density === 'compact' && 'space-y-3', overflowVisible ? 'overflow-visible' : scrollable ? 'overflow-y-auto py-0.5 pr-1' : 'overflow-visible', className), ...props }));
61
+ return (_jsx("div", { "data-slot": "modal-body", className: cn('flex min-h-0 flex-col', density === 'default' && 'space-y-5 text-sm leading-6', density === 'compact' && 'space-y-2 text-xs leading-5', overflowVisible ? 'overflow-visible' : scrollable ? 'overflow-y-auto py-0.5 pr-1' : 'overflow-visible', className), ...props }));
62
62
  }
63
63
  function ModalFooter({ className, density = 'default', separated = true, ...props }) {
64
- return (_jsx("div", { "data-slot": "modal-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', density === 'default' && 'mt-2 pt-4', density === 'compact' && 'mt-1 pt-3', separated && 'border-app-border border-t', className), ...props }));
64
+ return (_jsx("div", { "data-slot": "modal-footer", className: cn('flex flex-col-reverse sm:flex-row sm:justify-end', density === 'default' && 'mt-3 gap-2.5 pt-5', density === 'compact' && 'mt-0 gap-1.5 pt-2', separated && 'border-app-border border-t', className), ...props }));
65
65
  }
66
66
  function ModalTitle({ className, ...props }) {
67
67
  return _jsx(DialogPrimitive.Title, { "data-slot": "modal-title", className: cn('text-foreground flex items-center gap-2 text-lg font-semibold leading-none tracking-tight', className), ...props });
package/dist/components/NavCard.js CHANGED
@@ -8,6 +8,6 @@ import { cn } from '../utils/cn';
8
8
  * itens de listas navegaveis e acessos rapidos.
9
9
  */
10
10
  export const NavCard = forwardRef(({ className, description, hideArrow = false, icon, title, type = 'button', ...props }, ref) => {
11
- return (_jsxs("button", { ref: ref, type: type, className: cn('group border-app-border bg-background hover:bg-surface flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left transition-colors', 'hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:shadow-[0_14px_26px_-20px_color-mix(in_srgb,var(--brand)_45%,#000)]', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--brand)_36%,transparent)] focus-visible:outline-none', className), ...props, children: [icon && (_jsx("span", { className: "text-foreground-muted group-hover:text-brand inline-flex shrink-0 items-center justify-center transition-colors [&_svg]:size-5", children: icon })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-foreground line-clamp-2 text-sm leading-snug font-medium", children: title }), description && (_jsx("span", { className: "text-foreground-muted truncate text-xs", children: description }))] }), !hideArrow && (_jsx(ArrowRightIcon, { "aria-hidden": "true", className: "text-foreground-muted/50 group-hover:text-brand size-4 shrink-0 transition-transform duration-150 group-hover:translate-x-0.5" }))] }));
11
+ return (_jsxs("button", { ref: ref, type: type, className: cn('group border-app-border bg-surface flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left transition-[background-color,border-color,box-shadow]', 'hover:border-[color-mix(in_srgb,var(--brand)_44%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_7%,var(--surface))] hover:shadow-[0_14px_26px_-20px_color-mix(in_srgb,var(--brand)_45%,#000)]', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--brand)_36%,transparent)] focus-visible:outline-none', className), ...props, children: [icon && (_jsx("span", { className: "text-[color-mix(in_srgb,var(--brand)_68%,var(--foreground-muted))] group-hover:text-brand inline-flex shrink-0 items-center justify-center transition-colors [&_svg]:size-5", children: icon })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-foreground line-clamp-2 text-sm leading-snug font-medium", children: title }), description && (_jsx("span", { className: "text-foreground-muted truncate text-xs", children: description }))] }), !hideArrow && (_jsx(ArrowRightIcon, { "aria-hidden": "true", className: "text-foreground-muted/50 group-hover:text-brand size-4 shrink-0 transition-transform duration-150 group-hover:translate-x-0.5" }))] }));
12
12
  });
13
13
  NavCard.displayName = 'NavCard';
package/dist/components/PageMessage.js CHANGED
@@ -3,28 +3,28 @@ import { AlertCircleIcon, AlertTriangleIcon, CheckCircle2Icon, InfoIcon, } from
3
3
  import { cn } from '../utils/cn';
4
4
  const variantClasses = {
5
5
  default: {
6
- container: 'border-app-border bg-surface text-foreground',
7
- icon: 'text-foreground-muted',
6
+ container: 'app-page-message--default',
7
+ icon: 'app-page-message__icon--default',
8
8
  defaultIcon: _jsx(InfoIcon, { className: "size-4" }),
9
9
  },
10
10
  info: {
11
- container: 'border-blue-300 bg-blue-50 text-blue-800 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-100',
12
- icon: 'text-blue-600 dark:text-blue-300',
11
+ container: 'app-page-message--info',
12
+ icon: 'app-page-message__icon--info',
13
13
  defaultIcon: _jsx(InfoIcon, { className: "size-4" }),
14
14
  },
15
15
  success: {
16
- container: 'border-emerald-300 bg-emerald-50 text-emerald-800 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-100',
17
- icon: 'text-emerald-600 dark:text-emerald-300',
16
+ container: 'app-page-message--success',
17
+ icon: 'app-page-message__icon--success',
18
18
  defaultIcon: _jsx(CheckCircle2Icon, { className: "size-4" }),
19
19
  },
20
20
  warning: {
21
- container: 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-100',
22
- icon: 'text-amber-600 dark:text-amber-300',
21
+ container: 'app-page-message--warning',
22
+ icon: 'app-page-message__icon--warning',
23
23
  defaultIcon: _jsx(AlertTriangleIcon, { className: "size-4" }),
24
24
  },
25
25
  danger: {
26
- container: 'border-red-300 bg-red-50 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-100',
27
- icon: 'text-red-600 dark:text-red-300',
26
+ container: 'app-page-message--danger',
27
+ icon: 'app-page-message__icon--danger',
28
28
  defaultIcon: _jsx(AlertCircleIcon, { className: "size-4" }),
29
29
  },
30
30
  };
@@ -32,5 +32,5 @@ export function PageMessage({ children, className, icon, message, title, variant
32
32
  const variantStyle = variantClasses[variant];
33
33
  const resolvedIcon = icon === false ? null : icon ?? variantStyle.defaultIcon;
34
34
  const content = children ?? message;
35
- return (_jsxs("div", { className: cn('flex min-w-0 items-start gap-3 rounded-lg border px-4 py-3 text-sm shadow-sm', variantStyle.container, className), children: [resolvedIcon ? (_jsx("span", { className: cn('mt-0.5 shrink-0', variantStyle.icon), children: resolvedIcon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "font-semibold leading-5", children: title }) : null, content ? _jsx("div", { className: cn('leading-5', title ? 'mt-0.5' : undefined), children: content }) : null] })] }));
35
+ return (_jsxs("div", { className: cn('app-page-message flex min-w-0 items-start gap-3 rounded-lg border px-4 py-3 text-sm shadow-sm', variantStyle.container, className), children: [resolvedIcon ? (_jsx("span", { className: cn('mt-0.5 shrink-0', variantStyle.icon), children: resolvedIcon })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("div", { className: "font-semibold leading-5", children: title }) : null, content ? _jsx("div", { className: cn('leading-5', title ? 'mt-0.5' : undefined), children: content }) : null] })] }));
36
36
  }
package/dist/components/StatCard.js CHANGED
@@ -2,39 +2,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { cn } from '../utils/cn';
3
3
  const variantClasses = {
4
4
  default: {
5
- container: 'border-app-border bg-surface shadow-sm',
6
- label: 'text-foreground-muted',
7
- value: 'text-foreground',
8
- description: 'text-foreground-muted',
9
- icon: 'text-foreground-muted',
5
+ container: 'app-stat-card--default shadow-sm',
6
+ label: 'app-stat-card__label--default',
7
+ value: 'app-stat-card__value--default',
8
+ description: 'app-stat-card__description--default',
9
+ icon: 'app-stat-card__icon--default',
10
10
  },
11
11
  success: {
12
- container: 'border-emerald-300 bg-emerald-50 shadow-sm dark:border-emerald-500/20 dark:bg-emerald-500/10',
13
- label: 'text-emerald-600 dark:text-emerald-200/80',
14
- value: 'text-emerald-700 dark:text-white',
15
- description: 'text-emerald-600 dark:text-emerald-100/80',
16
- icon: 'text-emerald-600 dark:text-emerald-300',
12
+ container: 'app-stat-card--success shadow-sm',
13
+ label: 'app-stat-card__label--success',
14
+ value: 'app-stat-card__value--success',
15
+ description: 'app-stat-card__description--success',
16
+ icon: 'app-stat-card__icon--success',
17
17
  },
18
18
  info: {
19
- container: 'border-blue-300 bg-blue-50 shadow-sm dark:border-blue-500/20 dark:bg-blue-500/10',
20
- label: 'text-blue-600 dark:text-blue-200/80',
21
- value: 'text-blue-700 dark:text-white',
22
- description: 'text-blue-600 dark:text-blue-100/80',
23
- icon: 'text-blue-600 dark:text-blue-300',
19
+ container: 'app-stat-card--info shadow-sm',
20
+ label: 'app-stat-card__label--info',
21
+ value: 'app-stat-card__value--info',
22
+ description: 'app-stat-card__description--info',
23
+ icon: 'app-stat-card__icon--info',
24
24
  },
25
25
  warning: {
26
- container: 'border-amber-300 bg-amber-50 shadow-sm dark:border-amber-500/30 dark:bg-amber-500/10',
27
- label: 'text-amber-600 dark:text-amber-300',
28
- value: 'text-amber-700 dark:text-amber-300',
29
- description: 'text-amber-600 dark:text-gray-200/80',
30
- icon: 'text-amber-600 dark:text-amber-300',
26
+ container: 'app-stat-card--warning shadow-sm',
27
+ label: 'app-stat-card__label--warning',
28
+ value: 'app-stat-card__value--warning',
29
+ description: 'app-stat-card__description--warning',
30
+ icon: 'app-stat-card__icon--warning',
31
31
  },
32
32
  danger: {
33
- container: 'border-red-300 bg-red-50 shadow-sm dark:border-red-500/30 dark:bg-red-500/10',
34
- label: 'text-red-600 dark:text-red-200/80',
35
- value: 'text-red-700 dark:text-white',
36
- description: 'text-red-600 dark:text-red-100/80',
37
- icon: 'text-red-600 dark:text-red-300',
33
+ container: 'app-stat-card--danger shadow-sm',
34
+ label: 'app-stat-card__label--danger',
35
+ value: 'app-stat-card__value--danger',
36
+ description: 'app-stat-card__description--danger',
37
+ icon: 'app-stat-card__icon--danger',
38
38
  },
39
39
  };
40
40
  const sizeClasses = {
@@ -58,5 +58,5 @@ export function StatCard({ className, description, format, icon, label, size = '
58
58
  const variantStyle = variantClasses[variant];
59
59
  const sizeStyle = sizeClasses[size];
60
60
  const formattedValue = format ? format(value) : String(value ?? '-');
61
- return (_jsxs("div", { className: cn('rounded-xl border', variantStyle.container, sizeStyle.container, className), children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: cn('min-w-0 text-xs font-medium tracking-wide uppercase', variantStyle.label), children: label }), icon && (_jsx("div", { className: cn('shrink-0 [&>svg]:size-full', sizeStyle.icon, variantStyle.icon), children: icon }))] }), _jsx("div", { className: cn('mt-1 font-semibold', sizeStyle.value, variantStyle.value, valueClassName), children: formattedValue }), description && (_jsx("div", { className: cn('mt-1 text-xs', size === 'lg' && 'min-h-8 leading-4', variantStyle.description), children: description }))] }));
61
+ return (_jsxs("div", { className: cn('app-stat-card rounded-xl border', variantStyle.container, sizeStyle.container, className), children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: cn('min-w-0 text-xs font-medium tracking-wide uppercase', variantStyle.label), children: label }), icon && (_jsx("div", { className: cn('shrink-0 [&>svg]:size-full', sizeStyle.icon, variantStyle.icon), children: icon }))] }), _jsx("div", { className: cn('mt-1 font-semibold', sizeStyle.value, variantStyle.value, valueClassName), children: formattedValue }), description && (_jsx("div", { className: cn('mt-1 text-xs', size === 'lg' && 'min-h-8 leading-4', variantStyle.description), children: description }))] }));
62
62
  }
package/dist/index.d.ts CHANGED
@@ -3,7 +3,7 @@ export { AppShell, type AppShellContentMode, type AppShellMainProps, type AppShe
3
3
  export { AppShellActionButton, AppShellActions, AppShellActionsSeparator, type AppShellActionButtonProps, type AppShellActionButtonVariant, type AppShellActionsAlign, type AppShellActionsProps, type AppShellActionsRegion, type AppShellActionsSeparatorProps, } from './components/AppShellActions';
4
4
  export { Badge, type BadgeProps, type BadgeVariant } from './components/Badge';
5
5
  export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './components/Button';
6
- export { ConfirmationDialog, type ConfirmationDialogAction, type ConfirmationDialogProps, type ConfirmationDialogVariant } from './components/ConfirmationDialog';
6
+ export { ConfirmationDialog, type ConfirmationDialogAction, type ConfirmationDialogProps, type ConfirmationDialogVariant, type ConfirmationDialogVariantInput, } from './components/ConfirmationDialog';
7
7
  export { CopyableField, type CopyableFieldProps } from './components/CopyableField';
8
8
  export { FieldGroup, FormSection, type FieldGroupProps } from './components/FieldGroup';
9
9
  export { EmptyState, type EmptyStateProps, type EmptyStateVariant } from './components/EmptyState';
@@ -23,7 +23,7 @@ export { TextareaField, type TextareaFieldProps } from './components/TextareaFie
23
23
  export { DateField, type DateFieldProps } from './components/DateField';
24
24
  export { DecimalField, type DecimalFieldProps } from './components/DecimalField';
25
25
  export { Pagination, type PaginationProps, type PaginationSize } from './components/Pagination';
26
- export { Page } from './components/Page';
26
+ export { Page, type PageActionButtonProps, type PageActionsAlign, type PageActionsElement, type PageActionsPosition, type PageActionsProps, type PageActionsSeparatorProps, type PageActionsSize, type PageDescriptionProps, type PageTitleProps, } from './components/Page';
27
27
  export { PageMessage, type PageMessageProps, type PageMessageVariant } from './components/PageMessage';
28
28
  export { PasswordInput, type PasswordInputProps } from './components/PasswordInput';
29
29
  export { Filter, type FilterFooterProps, type FilterRootProps } from './components/Filter';