@wellingtonhlc/shared-ui 0.1.7 → 0.1.16

package/README.md

@@ -210,6 +210,14 @@ Tabela de historico:
 
 | Versao | Data | Tipo | Resumo | Validacao |
 |--------|------|------|--------|-----------|
+| `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`. |
+| `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`. |
+| `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`. |
+| `0.1.12` | 2026-06-16 | Minor pre-v1 | Adiciona variantes explicitas ao `TextField` e corrige alinhamento de icones internos com `startAdornment` e `endAdornment`. | `npm run build`; `npm run build-storybook`. |
+| `0.1.11` | 2026-06-16 | Patch | Reequilibra variantes de `Button`, separando `default` de `primary` e usando cores explicitas para estados de marca e semanticos. | `npm run build`; `npm run build-storybook`. |
+| `0.1.10` | 2026-06-16 | Patch | Reequilibra `Badge` `default`, `primary` e `muted` com estilos distintos e cor de texto explicita para `primary`. | `npm run build`; `npm run build-storybook`. |
+| `0.1.9` | 2026-06-16 | Patch | Garante estilos distintos para `Badge` `default`, `primary` e `muted`, e normaliza alias legado `active` para `success`. | `npm run build`; `npm run build-storybook`. |
+| `0.1.8` | 2026-06-16 | Minor pre-v1 | Adiciona `Switch display="inline"` para linhas compactas com label integrado e alinhamento previsivel. | `npm run build`; `npm run build-storybook`; build do `EloDesk.CRM`. |
 | `0.1.7` | 2026-06-16 | Minor pre-v1 | Adiciona props de customizacao dos botoes de aparencia em `ThemePreferencesSelector`. | `npm run build`; build do `EloDesk.CRM`. |
 | `0.1.6` | 2026-06-16 | Patch | Forca o destaque da aparencia selecionada por CSS explicito em `[aria-pressed='true']`. | `npm run build`; `npm run build-storybook`; build do `EloDesk.CRM.Portal`. |
 | `0.1.5` | 2026-06-16 | Patch | Aplica o destaque da aparencia selecionada por estilo inline para evitar perda por ordem/geracao de CSS nos consumidores. | `npm run build`; `npm run build-storybook`; build do `EloDesk.CRM.Portal`. |

package/dist/components/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AA4BD,eAAO,MAAM,KAAK,wGAoBjB,CAAC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,QAAQ,GACR,OAAO,CAAC;AAEZ,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AA+BD,eAAO,MAAM,KAAK,wGAoBjB,CAAC"}

package/dist/components/Badge.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../utils/cn';
 const variantAlias = {
-    active: 'default',
+    active: 'success',
     paid: 'success',
     pending: 'warning',
     sent: 'warning',
@@ -11,13 +11,13 @@ const variantAlias = {
     'status-danger': 'danger',
 };
 const variantClasses = {
-    default: 'border-app-border bg-background text-foreground',
-    primary: 'border-primary-light bg-primary-light text-primary',
+    default: 'border-[color-mix(in_srgb,var(--foreground-muted)_42%,var(--app-border))] bg-[color-mix(in_srgb,var(--foreground-muted)_14%,var(--surface))] text-foreground',
+    primary: 'border-[color-mix(in_srgb,var(--brand)_40%,transparent)] bg-[color-mix(in_srgb,var(--brand)_14%,var(--surface))] text-[var(--brand)]',
     success: 'border-[var(--status-success-border,#86efac)] bg-[var(--status-success-bg,rgba(220,252,231,0.8))] text-[var(--status-success-text,#15803d)]',
     warning: 'border-[var(--status-warning-border,#fcd34d)] bg-[var(--status-warning-bg,rgba(254,243,199,0.8))] text-[var(--status-warning-text,#92400e)]',
     info: 'border-[var(--status-info-border,#93c5fd)] bg-[var(--status-info-bg,rgba(219,234,254,0.8))] text-[var(--status-info-text,#1d4ed8)]',
     danger: 'border-[var(--status-danger-border,#fca5a5)] bg-[var(--status-danger-bg,rgba(254,202,202,0.8))] text-[var(--status-danger-text,#b91c1c)]',
-    muted: 'border-app-border bg-[color-mix(in_srgb,var(--app-border)_60%,transparent)] text-foreground-muted',
+    muted: 'border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)] bg-[color-mix(in_srgb,var(--foreground-muted)_8%,var(--surface))] text-foreground-muted',
 };
 const sizeClasses = {
     xs: 'px-2 py-0.5 text-xs',

package/dist/components/Button.d.ts.map

@@ -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;AA8BD,eAAO,MAAM,MAAM,2GAmDlB,CAAC"}
+{"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"}

package/dist/components/Button.js

@@ -2,15 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../utils/cn';
 const variantClasses = {
-    default: 'border-transparent bg-brand text-primary-foreground hover:bg-brand-hover',
-    primary: 'border-transparent bg-brand text-primary-foreground hover:bg-brand-hover',
-    secondary: 'border-app-border bg-surface text-foreground hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-brand',
-    ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-brand',
-    outline: 'border-app-border bg-surface text-foreground hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-brand',
-    success: 'border-transparent bg-green-600 text-white hover:bg-green-700',
-    danger: 'border-transparent bg-red-700 text-white hover:bg-red-800',
-    destructive: 'border-transparent bg-destructive text-white hover:bg-red-600',
-    sidebar: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-brand',
+    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))]',
+    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))]',
+    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))]',
+    ghost: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--foreground-muted)_10%,transparent)] hover:text-foreground',
+    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)]',
+    success: 'border-transparent bg-[var(--status-success-text,#15803d)] text-white hover:bg-[color-mix(in_srgb,var(--status-success-text,#15803d)_88%,#000)]',
+    danger: 'border-transparent bg-[var(--status-danger-text,#b91c1c)] text-white hover:bg-[color-mix(in_srgb,var(--status-danger-text,#b91c1c)_88%,#000)]',
+    destructive: 'border-transparent bg-[var(--destructive)] text-white hover:bg-[color-mix(in_srgb,var(--destructive)_88%,#000)]',
+    sidebar: 'border-transparent bg-transparent text-foreground-muted hover:bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] hover:text-[var(--brand)]',
 };
 const sizeClasses = {
     xs: 'min-h-7 min-w-7 px-1.5 py-1 text-[0.625rem]',

package/dist/components/ConfirmationDialog.js

@@ -135,7 +135,7 @@ function Root({ children, className, closeOnEscape = true, onOpenChange, open, o
     if (!open) {
         return null;
     }
-    return createPortal(_jsx(ConfirmationDialogContext.Provider, { value: value, children: _jsx("div", { className: cn('fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-[2px]', overlayClassName), role: "presentation", children: _jsxs("section", { "aria-describedby": descriptionId, "aria-labelledby": titleId, "aria-modal": "true", className: cn('border-app-border bg-background-secondary text-foreground relative grid gap-4 rounded-xl border p-6 shadow-2xl', className), role: "alertdialog", style: { width: 'min(29rem, calc(100vw - 2rem))' }, children: [_jsx("button", { "aria-label": "Fechar", className: cn('text-foreground-muted hover:bg-background hover:text-foreground absolute right-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-md opacity-60 transition disabled:cursor-not-allowed disabled:opacity-30'), disabled: isBusy, onClick: close, type: "button", children: _jsx(XIcon, { className: "size-3.5" }) }), children] }) }) }), document.body);
+    return createPortal(_jsx(ConfirmationDialogContext.Provider, { value: value, children: _jsx("div", { className: cn('fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4 backdrop-blur-[2px]', overlayClassName), role: "presentation", children: _jsxs("section", { "aria-describedby": descriptionId, "aria-labelledby": titleId, "aria-modal": "true", className: cn('border-app-border bg-background-secondary text-foreground relative grid gap-4 rounded-xl border p-6 shadow-2xl', className), role: "alertdialog", style: { width: 'min(29rem, calc(100vw - 2rem))' }, children: [_jsx("button", { "aria-label": "Fechar", className: cn('text-foreground-muted hover:bg-background hover:text-foreground absolute right-4 top-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-md opacity-60 transition disabled:cursor-not-allowed disabled:opacity-30'), disabled: isBusy, onClick: close, type: "button", children: _jsx(XIcon, { className: "size-3.5" }) }), children] }) }) }), document.body);
 }
 function Icon({ className }) {
     const { variant } = useConfirmationDialog();

package/dist/components/Modal.js

@@ -49,10 +49,10 @@ function createTrigger(trigger, options) {
 }
 function ModalRoot({ allowExternalFocus = false, centered = false, children, className, overlayClassName, offset, showCloseButton = true, size = 'lg', variant = 'default', ...props }) {
     const hasFooter = React.Children.toArray(children).some((child) => React.isValidElement(child) && child.type === ModalFooter);
-    return (_jsx(DialogPrimitive.Root, { ...props, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: cn('fixed inset-0 z-50 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: {
+    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: {
                         width: widthVariants[size],
                         ...(!centered && offset ? { top: `${offset}px` } : {}),
-                    }, className: cn('fixed z-50 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] })] }) }));
+                    }, 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] })] }) }));
 }
 function ModalHeader({ className, density = 'default', separated = false, ...props }) {
     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 }));

package/dist/components/Pagination.d.ts

@@ -1,3 +1,4 @@
+export type PaginationSize = 'sm' | 'md' | 'lg';
 export interface PaginationProps {
     page: number;
     totalPages: number;
@@ -8,6 +9,7 @@ export interface PaginationProps {
     pageSizeOptions?: number[];
     label?: string;
     isLoading?: boolean;
+    size?: PaginationSize;
 }
-export declare function Pagination({ page, totalPages, totalItems, pageSize, onPageChange, onPageSizeChange, pageSizeOptions, label, isLoading, }: PaginationProps): import("react").JSX.Element;
+export declare function Pagination({ page, totalPages, totalItems, pageSize, onPageChange, onPageSizeChange, pageSizeOptions, label, isLoading, size, }: PaginationProps): import("react").JSX.Element;
 //# sourceMappingURL=Pagination.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAuCA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,eAA+B,EAC/B,KAA0B,EAC1B,SAAiB,GAClB,EAAE,eAAe,+BA6GjB"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AA+ChD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,UAAU,EACV,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,gBAAgB,EAChB,eAA+B,EAC/B,KAA0B,EAC1B,SAAiB,EACjB,IAAW,GACZ,EAAE,eAAe,+BA0GjB"}

package/dist/components/Pagination.js

@@ -1,21 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { cn } from '../utils/cn';
 import { Button } from './Button';
-function IconChevronsLeft() {
-    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("polyline", { points: "11 17 6 12 11 7" }), _jsx("polyline", { points: "18 17 13 12 18 7" })] }));
-}
-function IconChevronLeft() {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "15 18 9 12 15 6" }) }));
-}
-function IconChevronRight() {
-    return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "9 18 15 12 9 6" }) }));
-}
-function IconChevronsRight() {
-    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("polyline", { points: "13 17 18 12 13 7" }), _jsx("polyline", { points: "6 17 11 12 6 7" })] }));
-}
-export function Pagination({ page, totalPages, totalItems, pageSize, onPageChange, onPageSizeChange, pageSizeOptions = [20, 50, 100], label = 'Itens por página', isLoading = false, }) {
+const sizeClasses = {
+    sm: {
+        root: 'gap-2 md:gap-3',
+        count: 'text-xs md:min-w-[7rem] md:text-[0.8125rem]',
+        controls: 'gap-1',
+        iconButton: 'h-8 min-h-8 min-w-8 px-2 py-0 [&_svg]:size-3.5',
+        navButton: 'h-8 min-h-8 min-w-8 px-2 py-0 min-[901px]:min-w-[5.75rem] [&_svg]:size-3.5',
+        pageIndicator: 'h-8 px-2 text-xs md:min-w-[6.75rem] md:text-[0.8125rem]',
+        select: 'h-8 min-w-18 px-2.5 text-xs',
+        selectLabel: 'text-xs md:text-[0.8125rem]',
+    },
+    md: {
+        root: 'gap-2.5 md:gap-3',
+        count: 'text-[0.8125rem] md:min-w-[7.5rem]',
+        controls: 'gap-1.5',
+        iconButton: 'h-9 min-h-9 min-w-9 px-2.5 py-0 [&_svg]:size-4',
+        navButton: 'h-9 min-h-9 min-w-9 px-3 py-0 min-[901px]:min-w-[6.25rem] [&_svg]:size-4',
+        pageIndicator: 'h-9 px-3 text-[0.8125rem] md:min-w-[7.25rem]',
+        select: 'h-9 min-w-20 px-3 text-[0.8125rem]',
+        selectLabel: 'text-[0.8125rem]',
+    },
+    lg: {
+        root: 'gap-3 md:gap-4',
+        count: 'text-sm md:min-w-[8rem]',
+        controls: 'gap-2',
+        iconButton: 'h-10 min-h-10 min-w-10 px-3 py-0 [&_svg]:size-[1.125rem]',
+        navButton: 'h-10 min-h-10 min-w-10 px-3.5 py-0 min-[901px]:min-w-[6.75rem] [&_svg]:size-[1.125rem]',
+        pageIndicator: 'h-10 px-3.5 text-sm md:min-w-[7.75rem]',
+        select: 'h-10 min-w-22 px-3.5 text-sm',
+        selectLabel: 'text-sm',
+    },
+};
+export function Pagination({ page, totalPages, totalItems, pageSize, onPageChange, onPageSizeChange, pageSizeOptions = [20, 50, 100], label = 'Itens por pagina', isLoading = false, size = 'sm', }) {
     const isFirstPage = page <= 1;
     const isLastPage = page >= totalPages;
+    const resolvedSize = sizeClasses[size];
     function handleFirstPage() {
         onPageChange(1);
     }
@@ -31,7 +53,5 @@ export function Pagination({ page, totalPages, totalItems, pageSize, onPageChang
     function handleSizeChange(event) {
         onPageSizeChange(Number(event.target.value));
     }
-    const iconButtonClass = 'size-8 min-h-8 min-w-8 p-0 [&_svg]:size-3.5';
-    const navButtonClass = 'size-8 min-h-8 min-w-8 p-0 md:w-auto md:px-2 [&_svg]:size-3.5';
-    return (_jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center justify-between gap-2 md:flex-nowrap md:gap-3", children: [_jsx("div", { className: "flex min-w-0 shrink-0 items-center justify-start whitespace-nowrap text-xs font-medium text-foreground-muted md:min-w-[7rem] md:text-[0.8125rem]", children: _jsx("span", { children: typeof totalItems === 'number' ? `${totalItems} registro(s)` : 'Nenhum resultado' }) }), _jsxs("div", { className: "order-3 flex min-w-0 flex-1 flex-nowrap items-center justify-center gap-1.5 md:order-none", children: [_jsx(Button, { variant: "outline", rounded: true, size: "sm", className: iconButtonClass, onClick: handleFirstPage, disabled: isFirstPage || isLoading, "aria-label": "Primeira p\u00E1gina", tooltip: "Primeira p\u00E1gina", children: _jsx(IconChevronsLeft, {}) }), _jsxs(Button, { variant: "outline", rounded: true, size: "sm", className: navButtonClass, onClick: handlePrevPage, disabled: isFirstPage || isLoading, "aria-label": "P\u00E1gina anterior", children: [_jsx(IconChevronLeft, {}), _jsx("span", { className: "hidden text-xs min-[901px]:inline", children: "Anterior" })] }), _jsxs("span", { className: "inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--radius)] px-2 py-1.5 text-xs font-semibold text-foreground md:min-w-[6.75rem] md:text-[0.8125rem]", children: ["P\u00E1gina ", page, " de ", totalPages] }), _jsxs(Button, { variant: "outline", rounded: true, size: "sm", className: navButtonClass, onClick: handleNextPage, disabled: isLastPage || isLoading, "aria-label": "Pr\u00F3xima p\u00E1gina", children: [_jsx("span", { className: "hidden text-xs min-[901px]:inline", children: "Pr\u00F3xima" }), _jsx(IconChevronRight, {})] }), _jsx(Button, { variant: "outline", rounded: true, size: "sm", className: iconButtonClass, onClick: handleLastPage, disabled: isLastPage || isLoading, "aria-label": "\u00DAltima p\u00E1gina", tooltip: "\u00DAltima p\u00E1gina", children: _jsx(IconChevronsRight, {}) })] }), _jsxs("div", { className: cn('flex min-w-0 shrink-0 items-center justify-end gap-1.5 md:min-w-[9rem]', pageSizeOptions.length <= 1 && 'invisible'), children: [_jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted md:text-[0.8125rem]", children: label }), _jsx("select", { className: "border-app-border bg-surface h-8 min-w-18 cursor-pointer rounded-[var(--radius)] border px-2.5 text-xs text-foreground transition-colors focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20 disabled:cursor-not-allowed disabled:opacity-50", value: pageSize, onChange: handleSizeChange, disabled: isLoading, "aria-label": "Itens por p\u00E1gina", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) })] })] }));
+    return (_jsxs("div", { className: cn('flex w-full min-w-0 flex-wrap items-center justify-between md:flex-nowrap', resolvedSize.root), children: [_jsx("div", { className: cn('flex min-w-0 shrink-0 items-center justify-start whitespace-nowrap font-medium text-foreground-muted', resolvedSize.count), children: _jsx("span", { children: typeof totalItems === 'number' ? `${totalItems} registro(s)` : 'Nenhum resultado' }) }), _jsxs("div", { className: cn('order-3 flex min-w-0 flex-1 flex-nowrap items-center justify-center md:order-none', resolvedSize.controls), children: [_jsx(Button, { variant: "outline", size: "xs", className: resolvedSize.iconButton, onClick: handleFirstPage, disabled: isFirstPage || isLoading, "aria-label": "Primeira pagina", tooltip: "Primeira pagina", children: _jsx(ChevronsLeft, { "aria-hidden": "true" }) }), _jsxs(Button, { variant: "outline", size: "xs", className: resolvedSize.navButton, onClick: handlePrevPage, disabled: isFirstPage || isLoading, "aria-label": "Pagina anterior", children: [_jsx(ChevronLeft, { "aria-hidden": "true" }), _jsx("span", { className: "hidden min-[901px]:inline", children: "Anterior" })] }), _jsxs("span", { className: cn('inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--radius)] font-semibold text-foreground', resolvedSize.pageIndicator), children: ["Pagina ", page, " de ", totalPages] }), _jsxs(Button, { variant: "outline", size: "xs", className: resolvedSize.navButton, onClick: handleNextPage, disabled: isLastPage || isLoading, "aria-label": "Proxima pagina", children: [_jsx("span", { className: "hidden min-[901px]:inline", children: "Proxima" }), _jsx(ChevronRight, { "aria-hidden": "true" })] }), _jsx(Button, { variant: "outline", size: "xs", className: resolvedSize.iconButton, onClick: handleLastPage, disabled: isLastPage || isLoading, "aria-label": "Ultima pagina", tooltip: "Ultima pagina", children: _jsx(ChevronsRight, { "aria-hidden": "true" }) })] }), _jsxs("div", { className: cn('flex min-w-0 shrink-0 items-center justify-end gap-1.5 md:min-w-[9rem]', pageSizeOptions.length <= 1 && 'invisible'), children: [_jsx("span", { className: cn('whitespace-nowrap text-foreground-muted', resolvedSize.selectLabel), children: label }), _jsx("select", { className: cn('border-app-border bg-surface cursor-pointer rounded-[var(--radius)] border text-foreground transition-colors focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/20 disabled:cursor-not-allowed disabled:opacity-50', resolvedSize.select), value: pageSize, onChange: handleSizeChange, disabled: isLoading, "aria-label": "Itens por pagina", children: pageSizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })] }));
 }

package/dist/components/Switch.d.ts

@@ -8,6 +8,7 @@ export interface SwitchProps<TFieldValues extends FieldValues = FieldValues> ext
     wrapperClassName?: string;
     labelClassName?: string;
     labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    display?: 'field' | 'inline';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     control?: unknown;
     rules?: unknown;

package/dist/components/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACzE,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA0HD,wBAAgB,MAAM,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,qBAMtG;yBANe,MAAM"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,WAAW,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACzE,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAyJD,wBAAgB,MAAM,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EAAE,KAAK,EAAE,WAAW,CAAC,YAAY,CAAC,qBAMtG;yBANe,MAAM"}

package/dist/components/Switch.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useController, } from 'react-hook-form';
 import { cn } from '../utils/cn';
 import { FieldControl } from './FieldControl';
@@ -24,7 +24,7 @@ const switchSizeClasses = {
         offset: 20,
     },
 };
-function SwitchBase({ checked, className, errorMessage, id, inputChecked, inputDisabled, inputName, inputOnBlur, label, labelClassName = '', labelPosition = 'left', name, onChange, onCheckedChange, size = 'md', wrapperClassName, ...props }) {
+function SwitchBase({ checked, className, errorMessage, id, inputChecked, inputDisabled, inputName, inputOnBlur, label, labelClassName = '', labelPosition = 'left', display = 'field', name, onChange, onCheckedChange, size = 'md', wrapperClassName, ...props }) {
     const resolvedChecked = inputChecked ?? checked;
     const resolvedName = inputName ?? name;
     const resolvedDisabled = inputDisabled ?? props.disabled;
@@ -36,7 +36,14 @@ function SwitchBase({ checked, className, errorMessage, id, inputChecked, inputD
         onCheckedChange?.(nextChecked);
         onChange?.(nextChecked);
     }
-    return (_jsx(FieldControl, { label: label, id: componentId, labelClassName: cn('whitespace-nowrap leading-none', isHorizontal && 'self-center', labelClassName), labelPosition: labelPosition, wrapperClassName: wrapperClassName, errorMessage: errorMessage, size: size, disabled: resolvedDisabled, children: ({ controlId, describedBy, disabled }) => (_jsx("button", { type: "button", role: "switch", "aria-checked": !!resolvedChecked, "aria-label": label, "aria-describedby": describedBy, id: controlId, name: resolvedName, onClick: handleClick, onBlur: inputOnBlur, disabled: disabled, "data-checked": !!resolvedChecked, className: cn('app-switch focus:ring-brand/50 inline-flex shrink-0 flex-none self-center rounded-full transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none', sizeClasses.root, disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', className), ...props, children: _jsx("span", { className: cn('app-switch__thumb block rounded-full shadow-sm transition-transform duration-200', sizeClasses.thumb), style: { transform: `translateX(${resolvedChecked ? sizeClasses.offset : 0}px)` } }) })) }));
+    const button = (controlId, describedBy, disabled = resolvedDisabled) => (_jsx("button", { type: "button", role: "switch", "aria-checked": !!resolvedChecked, "aria-label": label, "aria-describedby": describedBy, id: controlId, name: resolvedName, onClick: handleClick, onBlur: inputOnBlur, disabled: disabled, "data-checked": !!resolvedChecked, className: cn('app-switch focus:ring-brand/50 inline-flex shrink-0 flex-none self-center rounded-full transition-colors duration-200 focus:ring-2 focus:ring-offset-2 focus:outline-none', sizeClasses.root, disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer', className), ...props, children: _jsx("span", { className: cn('app-switch__thumb block rounded-full shadow-sm transition-transform duration-200', sizeClasses.thumb), style: { transform: `translateX(${resolvedChecked ? sizeClasses.offset : 0}px)` } }) }));
+    if (display === 'inline') {
+        const labelElement = label ? (_jsx("span", { className: cn('min-w-0 flex-1 text-sm font-medium leading-snug text-foreground', labelClassName), children: label })) : null;
+        const isLabelAfter = labelPosition === 'right' || labelPosition === 'bottom';
+        const isVertical = labelPosition === 'top' || labelPosition === 'bottom';
+        return (_jsxs("div", { className: cn('flex gap-3', isVertical ? 'flex-col items-start' : 'items-center justify-between', resolvedDisabled && 'opacity-70', wrapperClassName), "data-disabled": resolvedDisabled || undefined, children: [!isLabelAfter && labelElement, button(componentId, undefined, resolvedDisabled), isLabelAfter && labelElement] }));
+    }
+    return (_jsx(FieldControl, { label: label, id: componentId, labelClassName: cn('whitespace-nowrap leading-none', isHorizontal && 'self-center', labelClassName), labelPosition: labelPosition, wrapperClassName: wrapperClassName, errorMessage: errorMessage, size: size, disabled: resolvedDisabled, children: ({ controlId, describedBy, disabled }) => (button(controlId, describedBy, disabled)) }));
 }
 function HookFormSwitch(props) {
     const { control, name, rules, ...rest } = props;

package/dist/components/TextField.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
+import { type FormControlVariant } from './form-control-helpers';
+export type TextFieldVariant = FormControlVariant;
+export type TextFieldIconPosition = 'left' | 'right';
 export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
     wrapperClassName?: string;
     labelClassName?: string;
@@ -10,8 +13,13 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     roundedFull?: boolean;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    variant?: TextFieldVariant;
+    icon?: React.ReactNode;
+    iconPosition?: TextFieldIconPosition;
     children?: React.ReactNode;
+    startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
+    adornmentClassName?: string;
 }
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=TextField.d.ts.map

package/dist/components/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/components/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC/F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,yFAoGrB,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../src/components/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAGjF,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AAClD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC/F,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACpD,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,SAAS,yFA+KrB,CAAC"}

package/dist/components/TextField.js

@@ -3,10 +3,13 @@ import React from 'react';
 import { cn } from '../utils/cn';
 import { controlClasses } from './form-control-helpers';
 import { FieldControl } from './FieldControl';
-export const TextField = React.forwardRef(({ label, errorMessage, error, id, className, wrapperClassName, labelClassName = '', labelPosition = 'top', children, endAdornment, roundedFull = false, size = 'sm', placeholder, disabled = false, helperText, ...props }, ref) => {
+export const TextField = React.forwardRef(({ label, errorMessage, error, id, className, wrapperClassName, labelClassName = '', labelPosition = 'top', icon, iconPosition = 'right', children, startAdornment, endAdornment, adornmentClassName, roundedFull = false, size = 'sm', variant = 'default', placeholder, disabled = false, helperText, hasValidation = false, ...props }, ref) => {
     const componentId = id || props.name;
-    const adornment = children ?? endAdornment;
-    const hasChildren = !!adornment;
+    const positionedIcon = icon;
+    const resolvedStartAdornment = startAdornment ?? (iconPosition === 'left' ? positionedIcon : undefined);
+    const resolvedEndAdornment = endAdornment ?? children ?? (iconPosition === 'right' ? positionedIcon : undefined);
+    const hasStartAdornment = !!resolvedStartAdornment;
+    const hasEndAdornment = !!resolvedEndAdornment;
     const resolvedError = errorMessage ?? error;
     const sizeMap = {
         xs: 'h-7 text-xs',
@@ -28,16 +31,41 @@ export const TextField = React.forwardRef(({ label, errorMessage, error, id, cla
         md: 'pr-12',
         lg: 'pr-14',
     };
-    return (_jsx(FieldControl, { label: label, id: componentId, labelClassName: labelClassName, labelPosition: labelPosition, wrapperClassName: wrapperClassName, errorMessage: resolvedError, hasValidation: !!helperText || props['aria-invalid'] === true, roundedFull: roundedFull, size: size, disabled: disabled, children: ({ controlId, describedBy, errorMessage: controlError, disabled: controlDisabled, label: controlLabel }) => {
+    const leftPaddingMap = {
+        xs: 'pl-8',
+        sm: 'pl-10',
+        md: 'pl-12',
+        lg: 'pl-14',
+    };
+    const startAdornmentOffsetMap = {
+        xs: 'left-2',
+        sm: 'left-2',
+        md: 'left-3',
+        lg: 'left-4',
+    };
+    const endAdornmentOffsetMap = {
+        xs: 'right-1.5',
+        sm: 'right-2',
+        md: 'right-3',
+        lg: 'right-4',
+    };
+    const adornmentSizeMap = {
+        xs: '[&>svg]:size-3.5',
+        sm: '[&>svg]:size-4',
+        md: '[&>svg]:size-[1.125rem]',
+        lg: '[&>svg]:size-5',
+    };
+    return (_jsx(FieldControl, { label: label, id: componentId, labelClassName: labelClassName, labelPosition: labelPosition, wrapperClassName: wrapperClassName, errorMessage: resolvedError, hasValidation: hasValidation || !!helperText || props['aria-invalid'] === true, roundedFull: roundedFull, size: size, disabled: disabled, children: ({ controlId, describedBy, errorMessage: controlError, disabled: controlDisabled, label: controlLabel }) => {
             const helperId = `${controlId}-helper`;
             const inputDescribedBy = cn(describedBy, helperText && !controlError && helperId);
-            return (_jsxs("div", { className: cn('relative', hasChildren && 'min-h-[2.5rem]'), children: [_jsx("input", { ref: ref, ...props, id: controlId, disabled: controlDisabled, placeholder: placeholder ?? controlLabel, "aria-invalid": !!controlError, "aria-describedby": inputDescribedBy || undefined, className: controlClasses({
-                            errorMessage: controlError,
-                            disabled: controlDisabled,
-                            extra: cn(className, 'truncate', roundedFull
-                                ? cn('rounded-full', paddingClass[size ?? 'sm'], sizeClass, hasChildren && rightPaddingMap[size ?? 'sm'])
-                                : cn(paddingClass[size ?? 'sm'], sizeClass, hasChildren && rightPaddingMap[size ?? 'sm'])),
-                        }) }), hasChildren && _jsx("div", { className: "pointer-events-none absolute inset-y-0 right-3 flex items-center text-foreground-muted", children: adornment }), helperText && !controlError ? (_jsx("p", { id: helperId, className: "mt-1 text-xs font-medium text-foreground-muted", children: helperText })) : null] }));
+            return (_jsxs("div", { children: [_jsxs("div", { className: "relative", children: [_jsx("input", { ref: ref, ...props, id: controlId, disabled: controlDisabled, placeholder: placeholder ?? controlLabel, "aria-invalid": !!controlError, "aria-describedby": inputDescribedBy || undefined, className: controlClasses({
+                                    errorMessage: controlError,
+                                    disabled: controlDisabled,
+                                    variant,
+                                    extra: cn(className, 'truncate', roundedFull
+                                        ? cn('rounded-full', paddingClass[size ?? 'sm'], sizeClass, hasStartAdornment && leftPaddingMap[size ?? 'sm'], hasEndAdornment && rightPaddingMap[size ?? 'sm'])
+                                        : cn(paddingClass[size ?? 'sm'], sizeClass, hasStartAdornment && leftPaddingMap[size ?? 'sm'], hasEndAdornment && rightPaddingMap[size ?? 'sm'])),
+                                }) }), hasStartAdornment && (_jsx("div", { className: cn('pointer-events-none absolute inset-y-0 flex items-center justify-center text-foreground-muted', startAdornmentOffsetMap[size ?? 'sm'], adornmentSizeMap[size ?? 'sm'], adornmentClassName), children: resolvedStartAdornment })), hasEndAdornment && (_jsx("div", { className: cn('pointer-events-none absolute inset-y-0 flex items-center justify-center text-foreground-muted', endAdornmentOffsetMap[size ?? 'sm'], adornmentSizeMap[size ?? 'sm'], adornmentClassName), children: resolvedEndAdornment }))] }), helperText && !controlError ? (_jsx("p", { id: helperId, className: "mt-1 text-xs font-medium text-foreground-muted", children: helperText })) : null] }));
         } }));
 });
 TextField.displayName = 'TextField';

package/dist/components/form-control-helpers.d.ts

@@ -1,10 +1,11 @@
 export declare const fieldWrapper = "flex w-full flex-col space-y-1";
 export declare const labelBase = "mb-1 text-md font-medium";
+export type FormControlVariant = 'default' | 'filled' | 'ghost' | 'neutral';
 interface ControlClassOptions {
     errorMessage?: string;
     extra?: string;
     disabled?: boolean;
-    variant?: 'default' | 'neutral';
+    variant?: FormControlVariant;
 }
 export type FormControlSize = 'xs' | 'sm' | 'md' | 'lg';
 export interface FormControlRenderProps {

package/dist/components/form-control-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-control-helpers.d.ts","sourceRoot":"","sources":["../../src/components/form-control-helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,mCAAmC,CAAC;AAE7D,eAAO,MAAM,SAAS,6BAA6B,CAAC;AAuBpD,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;AAClG,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC"}
+{"version":3,"file":"form-control-helpers.d.ts","sourceRoot":"","sources":["../../src/components/form-control-helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,mCAAmC,CAAC;AAE7D,eAAO,MAAM,SAAS,6BAA6B,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAgC5E,UAAU,mBAAmB;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,wBAAgB,cAAc,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;AAClG,wBAAgB,cAAc,CAAC,OAAO,CAAC,EAAE,mBAAmB,GAAG,MAAM,CAAC"}

package/dist/components/form-control-helpers.js

@@ -1,18 +1,20 @@
 import { cn } from '../utils/cn';
 export const fieldWrapper = 'flex w-full flex-col space-y-1';
 export const labelBase = 'mb-1 text-md font-medium';
-const controlBaseNoFocus = cn('bg-surface border-app-border text-foreground placeholder:text-foreground-muted w-full rounded-md px-3 py-2 transition-colors duration-200', 'disabled:bg-input-bg disabled:border-app-border', 'disabled:cursor-not-allowed disabled:opacity-60', 'font-medium', 'border enabled:hover:border-brand');
-const controlBaseWithFocus = cn(controlBaseNoFocus, 'focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand/50 focus:bg-input-bg');
-const controlNeutral = cn('text-foreground placeholder:text-foreground-muted w-full rounded-md px-3 py-2 transition-colors duration-200 font-medium border', 'bg-transparent border-transparent', 'enabled:hover:bg-input-bg/60 enabled:hover:border-app-border/60', 'focus:outline-none focus:bg-input-bg focus:border-app-border focus:ring-1 focus:ring-inset focus:ring-brand/30', 'disabled:cursor-not-allowed disabled:opacity-60');
+const controlShared = cn('text-foreground placeholder:text-foreground-muted w-full rounded-md px-3 py-2 font-medium border', 'transition-[background-color,border-color,box-shadow,color] duration-200', 'disabled:cursor-not-allowed disabled:opacity-60');
+const controlDefault = cn(controlShared, 'bg-surface border-app-border', 'enabled:hover:border-brand', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/35', 'disabled:bg-input-bg disabled:border-app-border');
+const controlFilled = cn(controlShared, 'bg-input-bg border-app-border', 'enabled:hover:border-brand enabled:hover:bg-[color-mix(in_srgb,var(--input-bg)_75%,var(--surface))]', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/35', 'disabled:bg-input-bg disabled:border-app-border');
+const controlGhost = cn(controlShared, 'bg-transparent border-transparent', 'enabled:hover:bg-[color-mix(in_srgb,var(--foreground-muted)_8%,transparent)] enabled:hover:border-[color-mix(in_srgb,var(--foreground-muted)_24%,transparent)]', 'focus:outline-none focus:bg-surface focus:border-brand focus:ring-2 focus:ring-inset focus:ring-brand/25', 'disabled:bg-transparent disabled:border-transparent');
 export function controlClasses(errorMessageOrOptions, extra, disabled) {
     const options = typeof errorMessageOrOptions === 'object'
         ? errorMessageOrOptions
         : { errorMessage: errorMessageOrOptions, extra, disabled };
-    const base = options.variant === 'neutral'
-        ? controlNeutral
-        : options.disabled
-            ? controlBaseNoFocus
-            : controlBaseWithFocus;
+    const variant = options.variant === 'neutral' ? 'ghost' : options.variant ?? 'default';
+    const base = variant === 'filled'
+        ? controlFilled
+        : variant === 'ghost'
+            ? controlGhost
+            : controlDefault;
     return cn(base, options.errorMessage &&
         'border-red-500 focus:border-red-500 focus:ring-inset focus:ring-red-200 dark:focus:border-red-400 dark:focus:ring-red-950', options.extra);
 }

package/dist/index.d.ts

@@ -12,7 +12,7 @@ export { FieldSkeleton, type FieldSkeletonProps } from './components/FieldSkelet
 export { FieldValidationError } from './components/FieldValidationError';
 export { Modal, type ModalBodyProps, type ModalDensity, type ModalRootProps, type ModalSectionProps, type ModalSize, type ModalVariant } from './components/Modal';
 export { MultiSelectField, type MultiSelectFieldProps, type MultiSelectOption } from './components/MultiSelectField';
-export { TextField, type TextFieldProps } from './components/TextField';
+export { TextField, type TextFieldIconPosition, type TextFieldProps, type TextFieldVariant } from './components/TextField';
 export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps } from './components/RadioGroup';
 export { RenderCase, type RenderCaseChildProps, type RenderCaseRootProps } from './components/RenderCase';
 export { RenderIf, type RenderIfProps } from './components/RenderIf';
@@ -22,7 +22,7 @@ export { Switch, type SwitchProps } from './components/Switch';
 export { TextareaField, type TextareaFieldProps } from './components/TextareaField';
 export { DateField, type DateFieldProps } from './components/DateField';
 export { DecimalField, type DecimalFieldProps } from './components/DecimalField';
-export { Pagination, type PaginationProps } from './components/Pagination';
+export { Pagination, type PaginationProps, type PaginationSize } from './components/Pagination';
 export { Page } from './components/Page';
 export { PageMessage, type PageMessageProps, type PageMessageVariant } from './components/PageMessage';
 export { PasswordInput, type PasswordInputProps } from './components/PasswordInput';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/styles.css

@@ -608,8 +608,6 @@ h2.react-datepicker__current-month {
     --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-amber-700: oklch(55.5% 0.163 48.998);
     --color-amber-800: oklch(47.3% 0.137 46.201);
-    --color-green-600: oklch(62.7% 0.194 149.214);
-    --color-green-700: oklch(52.7% 0.154 150.069);
     --color-emerald-50: oklch(97.9% 0.021 166.113);
     --color-emerald-100: oklch(95% 0.052 163.051);
     --color-emerald-200: oklch(90.5% 0.093 164.15);
@@ -636,6 +634,7 @@ h2.react-datepicker__current-month {
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-lg: 32rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -876,6 +875,12 @@ h2.react-datepicker__current-month {
   .top-full {
     top: 100%;
   }
+  .right-1\.5 {
+    right: calc(var(--spacing) * 1.5);
+  }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
@@ -894,9 +899,15 @@ h2.react-datepicker__current-month {
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-2 {
+    left: calc(var(--spacing) * 2);
+  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
+  .left-4 {
+    left: calc(var(--spacing) * 4);
+  }
   .left-7 {
     left: calc(var(--spacing) * 7);
   }
@@ -921,6 +932,12 @@ h2.react-datepicker__current-month {
   .z-\[70\] {
     z-index: 70;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
+  .z-\[110\] {
+    z-index: 110;
+  }
   .order-3 {
     order: 3;
   }
@@ -1152,6 +1169,9 @@ h2.react-datepicker__current-month {
   .min-h-9 {
     min-height: calc(var(--spacing) * 9);
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
   .min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
@@ -1245,6 +1265,15 @@ h2.react-datepicker__current-month {
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+  .w-\[28rem\] {
+    width: 28rem;
+  }
+  .w-\[42rem\] {
+    width: 42rem;
+  }
   .w-\[min\(10rem\,24vw\)\] {
     width: min(10rem, 24vw);
   }
@@ -1281,6 +1310,9 @@ h2.react-datepicker__current-month {
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -1320,6 +1352,9 @@ h2.react-datepicker__current-month {
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
+  .min-w-22 {
+    min-width: calc(var(--spacing) * 22);
+  }
   .min-w-24 {
     min-width: calc(var(--spacing) * 24);
   }
@@ -1329,6 +1364,9 @@ h2.react-datepicker__current-month {
   .min-w-\[18rem\] {
     min-width: 18rem;
   }
+  .min-w-\[48rem\] {
+    min-width: 48rem;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -1389,6 +1427,15 @@ h2.react-datepicker__current-month {
   .appearance-none {
     appearance: none;
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .grid-cols-\[8rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 8rem minmax(0,1fr);
+  }
+  .grid-cols-\[minmax\(0\,1fr\)_auto_auto_auto\] {
+    grid-template-columns: minmax(0,1fr) auto auto auto;
+  }
   .grid-rows-\[0fr\] {
     grid-template-rows: 0fr;
   }
@@ -1497,6 +1544,15 @@ h2.react-datepicker__current-month {
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .divide-y {
+    :where(& > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+  }
   .self-center {
     align-self: center;
   }
@@ -1593,12 +1649,36 @@ h2.react-datepicker__current-month {
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-\[color-mix\(in_srgb\,var\(--brand\)_28\%\,var\(--app-border\)\)\] {
+    border-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--brand) 28%,var(--app-border));
+    }
+  }
+  .border-\[color-mix\(in_srgb\,var\(--brand\)_40\%\,transparent\)\] {
+    border-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--brand) 40%,transparent);
+    }
+  }
   .border-\[color-mix\(in_srgb\,var\(--brand\)_64\%\,\#fff\)\] {
     border-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in srgb,var(--brand) 64%,#fff);
     }
   }
+  .border-\[color-mix\(in_srgb\,var\(--foreground-muted\)_24\%\,transparent\)\] {
+    border-color: var(--foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--foreground-muted) 24%,transparent);
+    }
+  }
+  .border-\[color-mix\(in_srgb\,var\(--foreground-muted\)_42\%\,var\(--app-border\)\)\] {
+    border-color: var(--foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--foreground-muted) 42%,var(--app-border));
+    }
+  }
   .border-\[var\(--status-danger-border\,\#fca5a5\)\] {
     border-color: var(--status-danger-border,#fca5a5);
   }
@@ -1635,10 +1715,16 @@ h2.react-datepicker__current-month {
   .\!bg-transparent {
     background-color: transparent !important;
   }
-  .bg-\[color-mix\(in_srgb\,var\(--app-border\)_60\%\,transparent\)\] {
-    background-color: var(--app-border);
+  .bg-\[color-mix\(in_srgb\,var\(--brand\)_10\%\,var\(--surface\)\)\] {
+    background-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--app-border) 60%,transparent);
+      background-color: color-mix(in srgb,var(--brand) 10%,var(--surface));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,var\(--brand\)_14\%\,var\(--surface\)\)\] {
+    background-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--brand) 14%,var(--surface));
     }
   }
   .bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,var\(--surface\)\)\] {
@@ -1647,18 +1733,42 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--destructive) 12%,var(--surface));
     }
   }
+  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--surface\)\)\] {
+    background-color: var(--foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--foreground-muted) 8%,var(--surface));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_14\%\,var\(--surface\)\)\] {
+    background-color: var(--foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--foreground-muted) 14%,var(--surface));
+    }
+  }
   .bg-\[rgb\(var\(--color-brand\)\/0\.08\)\] {
     background-color: rgb(var(--color-brand)/0.08);
   }
+  .bg-\[var\(--brand\)\] {
+    background-color: var(--brand);
+  }
+  .bg-\[var\(--destructive\)\] {
+    background-color: var(--destructive);
+  }
   .bg-\[var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)\] {
     background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
   }
+  .bg-\[var\(--status-danger-text\,\#b91c1c\)\] {
+    background-color: var(--status-danger-text,#b91c1c);
+  }
   .bg-\[var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)\] {
     background-color: var(--status-info-bg,rgba(219,234,254,0.8));
   }
   .bg-\[var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)\] {
     background-color: var(--status-success-bg,rgba(220,252,231,0.8));
   }
+  .bg-\[var\(--status-success-text\,\#15803d\)\] {
+    background-color: var(--status-success-text,#15803d);
+  }
   .bg-\[var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)\] {
     background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
   }
@@ -1680,15 +1790,9 @@ h2.react-datepicker__current-month {
   .bg-gray-300 {
     background-color: var(--color-gray-300);
   }
-  .bg-green-600 {
-    background-color: var(--color-green-600);
-  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
-  .bg-red-700 {
-    background-color: var(--color-red-700);
-  }
   .bg-slate-900\/18 {
     background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 18%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1762,6 +1866,9 @@ h2.react-datepicker__current-month {
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -1834,6 +1941,12 @@ h2.react-datepicker__current-month {
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
+  .pl-10 {
+    padding-left: calc(var(--spacing) * 10);
+  }
   .pl-12 {
     padding-left: calc(var(--spacing) * 12);
   }
@@ -1861,6 +1974,9 @@ h2.react-datepicker__current-month {
   .align-middle {
     vertical-align: middle;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -1990,6 +2106,12 @@ h2.react-datepicker__current-month {
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[var\(--brand\)\] {
+    color: var(--brand);
+  }
+  .text-\[var\(--primary-foreground\,\#ffffff\)\] {
+    color: var(--primary-foreground,#ffffff);
+  }
   .text-\[var\(--status-danger-text\,\#b91c1c\)\] {
     color: var(--status-danger-text,#b91c1c);
   }
@@ -2104,6 +2226,13 @@ h2.react-datepicker__current-month {
     --tw-shadow: 0 8px 24px -4px var(--tw-shadow-color, rgba(0,0,0,0.16)), 0 2px 8px -2px var(--tw-shadow-color, rgba(0,0,0,0.08));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--brand\)_70\%\,\#000\)\] {
+    --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--brand));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 70%,#000));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_12px_32px_rgba\(15\,23\,42\,0\.06\)\] {
     --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(15,23,42,0.06));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2172,6 +2301,11 @@ h2.react-datepicker__current-month {
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[background-color\,border-color\,box-shadow\,color\] {
+    transition-property: background-color,border-color,box-shadow,color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[background-color\,border-color\,color\,box-shadow\,transform\,opacity\] {
     transition-property: background-color,border-color,color,box-shadow,transform,opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2301,6 +2435,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_46\%\,var\(--app-border\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in srgb,var(--brand) 46%,var(--app-border));
+        }
+      }
+    }
+  }
   .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_52\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2311,6 +2455,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:border-\[color-mix\(in_srgb\,var\(--foreground-muted\)_42\%\,var\(--app-border\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--foreground-muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in srgb,var(--foreground-muted) 42%,var(--app-border));
+        }
+      }
+    }
+  }
   .hover\:border-transparent {
     &:hover {
       @media (hover: hover) {
@@ -2342,6 +2496,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,transparent\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--brand) 8%,transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_10\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2362,6 +2526,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_16\%\,var\(--surface\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--brand) 16%,var(--surface));
+        }
+      }
+    }
+  }
   .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2372,38 +2546,74 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:bg-\[rgb\(var\(--color-brand\)\/0\.11\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_88\%\,\#000\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: rgb(var(--color-brand)/0.11);
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--destructive) 88%,#000);
+        }
       }
     }
   }
-  .hover\:bg-\[rgb\(var\(--color-brand\)\/0\.12\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_10\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: rgb(var(--color-brand)/0.12);
+        background-color: var(--foreground-muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--foreground-muted) 10%,transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_10\%\,var\(--surface\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--foreground-muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--foreground-muted) 10%,var(--surface));
+        }
       }
     }
   }
-  .hover\:bg-green-700 {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-text\,\#b91c1c\)_88\%\,\#000\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-green-700);
+        background-color: var(--status-danger-text,#b91c1c);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--status-danger-text,#b91c1c) 88%,#000);
+        }
       }
     }
   }
-  .hover\:bg-red-600 {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-text\,\#15803d\)_88\%\,\#000\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-600);
+        background-color: var(--status-success-text,#15803d);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--status-success-text,#15803d) 88%,#000);
+        }
       }
     }
   }
-  .hover\:bg-red-800 {
+  .hover\:bg-\[rgb\(var\(--color-brand\)\/0\.11\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-800);
+        background-color: rgb(var(--color-brand)/0.11);
+      }
+    }
+  }
+  .hover\:bg-\[rgb\(var\(--color-brand\)\/0\.12\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgb(var(--color-brand)/0.12);
+      }
+    }
+  }
+  .hover\:bg-\[var\(--brand-hover\,var\(--brand\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand-hover,var(--brand));
       }
     }
   }
@@ -2425,6 +2635,13 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:text-\[var\(--brand\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--brand);
+      }
+    }
+  }
   .hover\:text-amber-700 {
     &:hover {
       @media (hover: hover) {
@@ -2470,12 +2687,6 @@ h2.react-datepicker__current-month {
       border-color: var(--color-red-500);
     }
   }
-  .focus\:ring-1 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2541,6 +2752,42 @@ h2.react-datepicker__current-month {
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .enabled\:hover\:border-\[color-mix\(in_srgb\,var\(--foreground-muted\)_24\%\,transparent\)\] {
+    &:enabled {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--foreground-muted);
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(in srgb,var(--foreground-muted) 24%,transparent);
+          }
+        }
+      }
+    }
+  }
+  .enabled\:hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,transparent\)\] {
+    &:enabled {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--foreground-muted);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in srgb,var(--foreground-muted) 8%,transparent);
+          }
+        }
+      }
+    }
+  }
+  .enabled\:hover\:bg-\[color-mix\(in_srgb\,var\(--input-bg\)_75\%\,var\(--surface\)\)\] {
+    &:enabled {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--input-bg);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in srgb,var(--input-bg) 75%,var(--surface));
+          }
+        }
+      }
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -2557,6 +2804,16 @@ h2.react-datepicker__current-month {
       cursor: not-allowed;
     }
   }
+  .disabled\:border-transparent {
+    &:disabled {
+      border-color: transparent;
+    }
+  }
+  .disabled\:bg-transparent {
+    &:disabled {
+      background-color: transparent;
+    }
+  }
   .disabled\:opacity-30 {
     &:disabled {
       opacity: 30%;
@@ -2683,6 +2940,21 @@ h2.react-datepicker__current-month {
       display: inline;
     }
   }
+  .min-\[901px\]\:min-w-\[5\.75rem\] {
+    @media (width >= 901px) {
+      min-width: 5.75rem;
+    }
+  }
+  .min-\[901px\]\:min-w-\[6\.25rem\] {
+    @media (width >= 901px) {
+      min-width: 6.25rem;
+    }
+  }
+  .min-\[901px\]\:min-w-\[6\.75rem\] {
+    @media (width >= 901px) {
+      min-width: 6.75rem;
+    }
+  }
   .sm\:flex-row {
     @media (width >= 40rem) {
       flex-direction: row;
@@ -2718,14 +2990,24 @@ h2.react-datepicker__current-month {
       width: calc(var(--spacing) * 20);
     }
   }
-  .md\:w-auto {
+  .md\:min-w-\[6\.75rem\] {
     @media (width >= 48rem) {
-      width: auto;
+      min-width: 6.75rem;
     }
   }
-  .md\:min-w-\[6\.75rem\] {
+  .md\:min-w-\[7\.5rem\] {
     @media (width >= 48rem) {
-      min-width: 6.75rem;
+      min-width: 7.5rem;
+    }
+  }
+  .md\:min-w-\[7\.25rem\] {
+    @media (width >= 48rem) {
+      min-width: 7.25rem;
+    }
+  }
+  .md\:min-w-\[7\.75rem\] {
+    @media (width >= 48rem) {
+      min-width: 7.75rem;
     }
   }
   .md\:min-w-\[7rem\] {
@@ -2733,6 +3015,11 @@ h2.react-datepicker__current-month {
       min-width: 7rem;
     }
   }
+  .md\:min-w-\[8rem\] {
+    @media (width >= 48rem) {
+      min-width: 8rem;
+    }
+  }
   .md\:min-w-\[9rem\] {
     @media (width >= 48rem) {
       min-width: 9rem;
@@ -2759,9 +3046,9 @@ h2.react-datepicker__current-month {
       gap: calc(var(--spacing) * 3);
     }
   }
-  .md\:px-2 {
+  .md\:gap-4 {
     @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 2);
+      gap: calc(var(--spacing) * 4);
     }
   }
   .md\:text-\[0\.8125rem\] {
@@ -3081,6 +3368,12 @@ h2.react-datepicker__current-month {
       height: calc(var(--spacing) * 5);
     }
   }
+  .\[\&_svg\]\:size-\[1\.125rem\] {
+    & svg {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+  }
   .\[\&_td\]\:py-2 {
     & td {
       padding-block: calc(var(--spacing) * 2);
@@ -3137,12 +3430,30 @@ h2.react-datepicker__current-month {
       padding: calc(var(--spacing) * 0);
     }
   }
+  .\[\&\>svg\]\:size-3\.5 {
+    &>svg {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+  }
   .\[\&\>svg\]\:size-4 {
     &>svg {
       width: calc(var(--spacing) * 4);
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&\>svg\]\:size-5 {
+    &>svg {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+    }
+  }
+  .\[\&\>svg\]\:size-\[1\.125rem\] {
+    &>svg {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+  }
   .\[\&\>svg\]\:size-full {
     &>svg {
       width: 100%;
@@ -3435,6 +3746,11 @@ h2.react-datepicker__current-month {
   inherits: false;
   initial-value: 0;
 }
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3638,6 +3954,7 @@ h2.react-datepicker__current-month {
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
+      --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wellingtonhlc/shared-ui",
-    "version": "0.1.7",
+    "version": "0.1.16",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",