@wellingtonhlc/shared-ui 0.24.21 → 0.25.1

package/README.md

@@ -186,7 +186,7 @@ Componentes disponiveis na API publica:
 | Layout | `AppShell`, `Page`, `Sidebar`, `Card`, `StatCard` |
 | Acoes | `Button`, `ActionPrimitives`, `AppShellActions`, `ConfirmationDialog` |
 | Feedback | `Badge`, `EmptyState`, `PageMessage`, `Tooltip`, `CopyableField` |
-| Formularios | `FieldControl`, `FieldGroup`, `TextField`, `TextareaField`, `SelectField`, `DateField`, `DecimalField`, `MultiSelectField`, `PasswordInput`, `Switch`, `RadioGroup` |
+| Formularios | `FieldControl`, `FieldGroup`, `TextField`, `TextareaField`, `SelectField`, `SelectionField`, `DateField`, `DecimalField`, `MultiSelectField`, `PasswordInput`, `Switch`, `RadioGroup` |
 | Consulta | `Filter`, `Workspace` |
 | Dados | `Table`, `Pagination`, `TabsUnderlined` |
 | Controle de renderizacao | `RenderIf`, `RenderCase` |
@@ -239,6 +239,42 @@ Pontos de validacao:
 - Use `showColorSelector={false}` ou `showAppearanceSelector={false}` quando o consumidor precisar exibir apenas uma parte do controle.
 - A story `AppearanceStates` mostra as tres aparencias ja selecionadas para validacao visual rapida.
 
+## SelectionField
+
+`SelectionField` padroniza campos de selecao que exibem um registro, abrem uma busca externa e permitem limpar o valor selecionado. O componente nao gerencia modal nem estado interno do registro; o consumidor controla `value`, `onClick` e `onClear`.
+
+Contrato minimo:
+
+```tsx
+import { SelectionField, type SelectionDisplayValue } from '@wellingtonhlc/shared-ui';
+import { UserCheck } from 'lucide-react';
+
+const value: SelectionDisplayValue = {
+  title: 'Registro selecionado',
+  subtitle: 'Descricao complementar',
+  meta: 'COD-1024',
+};
+
+<SelectionField
+  label="Registro"
+  value={value}
+  icon={<UserCheck />}
+  clearable
+  size="sm"
+  selectTooltip="Selecionar registro"
+  clearTooltip="Limpar registro"
+  onClick={openSearch}
+  onClear={clearSelection}
+/>;
+```
+
+Pontos de validacao:
+
+- `size` segue a mesma escala visual dos campos base (`xs`, `sm`, `md`, `lg`).
+- Use `triggerSlot` quando o consumidor precisar injetar um botao proprio para abrir a selecao.
+- `clearable` exibe a acao de limpar somente quando ha `value` e `onClear`.
+- `shortcutHint` pode exibir atalhos de teclado, como `F1`.
+
 ## Filter
 
 `Filter.Root` organiza filtros compactos, ocupando apenas o espaço necessário. Quando houver muitos filtros, somente o corpo do painel rola e as ações continuam visíveis.

package/dist/components/SelectionField.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { type FormControlSize, type FormControlVariant } from './form-control-helpers';
+export interface SelectionDisplayValue {
+    title: string;
+    subtitle?: string | null;
+    meta?: string | null;
+}
+export type SelectionFieldSize = FormControlSize;
+export type SelectionFieldVariant = FormControlVariant;
+type SelectionTriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    tooltip?: string;
+};
+export interface SelectionFieldProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'className' | 'disabled' | 'required' | 'value'> {
+    label?: string;
+    description?: string;
+    value?: SelectionDisplayValue | null;
+    placeholder?: string;
+    icon?: React.ReactNode;
+    emptyIcon?: React.ReactNode;
+    triggerSlot?: React.ReactElement<SelectionTriggerProps>;
+    clearable?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    required?: boolean;
+    errorMessage?: string;
+    size?: SelectionFieldSize;
+    variant?: SelectionFieldVariant;
+    shortcutHint?: string;
+    selectTooltip?: string;
+    clearTooltip?: string;
+    className?: string;
+    controlClassName?: string;
+    labelClassName?: string;
+    labelPosition?: 'top' | 'right' | 'bottom' | 'left';
+    onClear?: () => void;
+}
+export declare function SelectionField({ label, description, value, placeholder, icon, emptyIcon, triggerSlot, clearable, disabled, loading, required, errorMessage, size, variant, shortcutHint, selectTooltip, clearTooltip, className, controlClassName, labelClassName, labelPosition, onClear, onClick, title: triggerTitle, type, ...triggerButtonProps }: SelectionFieldProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=SelectionField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionField.d.ts","sourceRoot":"","sources":["../../src/components/SelectionField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAIvG,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC;AACjD,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC;AAEvD,KAAK,qBAAqB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAC7D;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,CAAC;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,MAAM,IAAI,CAAC;CACtB;AAuDD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAqC,EACrC,IAAI,EACJ,SAAS,EACT,WAAW,EACX,SAAiB,EACjB,QAAgB,EAChB,OAAe,EACf,QAAgB,EAChB,YAAY,EACZ,IAAW,EACX,OAAmB,EACnB,YAAY,EACZ,aAA4B,EAC5B,YAA+B,EAC/B,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAqB,EACrB,OAAO,EACP,OAAO,EACP,KAAK,EAAE,YAAY,EACnB,IAAe,EACf,GAAG,kBAAkB,EACtB,EAAE,mBAAmB,qBAiMrB"}

package/dist/components/SelectionField.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../utils/cn';
+import { controlClasses } from './form-control-helpers';
+import { FieldControl } from './FieldControl';
+import { Search, X } from 'lucide-react';
+const controlSizeClass = {
+    xs: '!h-7 !pr-0.5 !py-0 text-xs',
+    sm: '!h-9 !pr-1 !py-0 text-sm',
+    md: '!h-12 !pr-1.5 !py-0 text-md',
+    lg: '!h-14 !pr-2 !py-0 text-base',
+};
+const controlLeadingPaddingClass = {
+    xs: '!pl-2',
+    sm: '!pl-3',
+    md: '!pl-4',
+    lg: '!pl-6',
+};
+const controlIconPaddingClass = {
+    xs: '!pl-0.5',
+    sm: '!pl-1',
+    md: '!pl-1.5',
+    lg: '!pl-2',
+};
+const controlGapClass = {
+    xs: 'gap-0.5',
+    sm: 'gap-1',
+    md: 'gap-1.5',
+    lg: 'gap-2',
+};
+const iconSizeClass = {
+    xs: '[&>svg]:size-3.5',
+    sm: '[&>svg]:size-4',
+    md: '[&>svg]:size-[1.125rem]',
+    lg: '[&>svg]:size-5',
+};
+const actionSizeClass = {
+    xs: '!size-6 !min-h-6 !min-w-6 !p-0 [&>svg]:size-3.5',
+    sm: '!size-7 !min-h-7 !min-w-7 !p-0 [&>svg]:size-4',
+    md: '!size-9 !min-h-9 !min-w-9 !p-0 [&>svg]:size-[1.125rem]',
+    lg: '!size-10 !min-h-10 !min-w-10 !p-0 [&>svg]:size-5',
+};
+const textGapClass = {
+    xs: 'gap-0',
+    sm: 'gap-0',
+    md: 'gap-1',
+    lg: 'gap-1',
+};
+function stopPropagation(event) {
+    event.stopPropagation();
+}
+export function SelectionField({ label, description, value, placeholder = 'Selecione um registro', icon, emptyIcon, triggerSlot, clearable = false, disabled = false, loading = false, required = false, errorMessage, size = 'sm', variant = 'default', shortcutHint, selectTooltip = 'Selecionar', clearTooltip = 'Limpar selecao', className, controlClassName, labelClassName, labelPosition = 'top', onClear, onClick, title: triggerTitle, type = 'button', ...triggerButtonProps }) {
+    const hasValue = !!value;
+    const resolvedIcon = hasValue ? icon : emptyIcon ?? icon;
+    const title = value?.title ?? placeholder;
+    const subtitle = value?.subtitle;
+    const meta = value?.meta;
+    const generatedDescriptionId = React.useId().replace(/:/g, '');
+    const describedById = description ? `${generatedDescriptionId}-description` : undefined;
+    const showClear = clearable && hasValue && !disabled && !loading && !!onClear;
+    const [isClearHover, setIsClearHover] = React.useState(false);
+    function handleClear(event) {
+        event.stopPropagation();
+        onClear?.();
+    }
+    function handleClearMouseEnter() {
+        setIsClearHover(true);
+    }
+    function handleClearMouseLeave() {
+        setIsClearHover(false);
+    }
+    function handleOpen(event) {
+        if (disabled || loading || event.defaultPrevented) {
+            return;
+        }
+        if (onClick) {
+            onClick(event);
+            return;
+        }
+        triggerSlot?.props.onClick?.(event);
+    }
+    const triggerClassName = cn('inline-flex cursor-pointer shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent text-foreground-muted transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30 disabled:pointer-events-none disabled:opacity-50', actionSizeClass[size]);
+    const selectionTrigger = triggerSlot
+        ? React.cloneElement(triggerSlot, {
+            'aria-label': triggerSlot.props['aria-label'] ?? selectTooltip,
+            className: cn(triggerClassName, triggerSlot.props.className),
+            disabled: disabled || loading || triggerSlot.props.disabled,
+            title: triggerSlot.props.title ?? triggerSlot.props.tooltip ?? selectTooltip,
+            type: triggerSlot.props.type ?? 'button',
+            onClick: triggerSlot.props.onClick,
+        })
+        : (_jsx("button", { ...triggerButtonProps, type: type, "aria-label": triggerButtonProps['aria-label'] ?? selectTooltip, className: triggerClassName, disabled: disabled || loading, title: triggerTitle ?? selectTooltip, onClick: onClick, children: _jsx(Search, { "aria-hidden": "true" }) }));
+    return (_jsx(FieldControl, { label: label, labelClassName: labelClassName, labelPosition: labelPosition, wrapperClassName: className, errorMessage: errorMessage, hasValidation: !!description, size: size, disabled: disabled || loading, children: ({ controlId, describedBy, errorMessage: controlError }) => {
+            const ariaDescribedBy = cn(describedBy, describedById);
+            return (_jsxs("div", { children: [_jsxs("div", { id: controlId, "aria-describedby": ariaDescribedBy || undefined, "aria-disabled": disabled || loading || undefined, "aria-invalid": !!controlError || undefined, className: controlClasses({
+                            errorMessage: controlError,
+                            disabled: disabled || loading,
+                            variant,
+                            extra: cn('group flex items-center overflow-hidden border-dashed', !hasValue && 'bg-[color-mix(in_srgb,var(--brand)_5%,var(--surface))]', hasValue && 'bg-surface', disabled || loading
+                                ? 'cursor-not-allowed'
+                                : cn('cursor-pointer', !isClearHover &&
+                                    'hover:border-[color-mix(in_srgb,var(--brand)_58%,var(--app-border))] hover:bg-[color-mix(in_srgb,var(--brand)_8%,var(--surface))]'), size === 'lg' ? 'rounded-lg' : 'rounded-md', controlSizeClass[size], controlGapClass[size], resolvedIcon ? controlIconPaddingClass[size] : controlLeadingPaddingClass[size], controlClassName),
+                        }), "data-empty": !hasValue || undefined, "data-loading": loading || undefined, onClick: handleOpen, children: [resolvedIcon ? (_jsx("span", { className: cn('inline-flex shrink-0 items-center justify-center rounded-md text-foreground-muted', !hasValue && 'text-[color-mix(in_srgb,var(--brand)_72%,var(--foreground-muted))]', actionSizeClass[size], iconSizeClass[size]), "aria-hidden": "true", children: resolvedIcon })) : null, _jsxs("div", { className: cn('min-w-0 flex-1 text-left', textGapClass[size]), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs("span", { className: cn('min-w-0 truncate font-semibold', hasValue ? 'text-foreground' : 'text-foreground-muted'), children: [title, required && !hasValue ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), meta ? (_jsx("span", { className: "border-app-border bg-background text-foreground-muted shrink-0 rounded border px-1.5 py-0.5 font-mono text-[0.65rem] leading-none", children: meta })) : null] }), subtitle ? (_jsx("p", { className: cn('text-foreground-muted truncate text-xs font-medium', (size === 'xs' || size === 'sm') && 'sr-only'), children: subtitle })) : null] }), shortcutHint ? (_jsx("kbd", { className: "border-app-border bg-background text-foreground-muted hidden shrink-0 rounded border px-1.5 py-1 font-mono text-[0.65rem] leading-none sm:inline-flex", children: shortcutHint })) : null, showClear ? (_jsx("button", { type: "button", "aria-label": clearTooltip, className: cn('inline-flex cursor-pointer shrink-0 items-center justify-center rounded-md border border-transparent bg-transparent text-foreground-muted transition-colors', 'hover:bg-[color-mix(in_srgb,var(--destructive)_10%,transparent)] hover:text-[var(--destructive)]', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--destructive)]/25', actionSizeClass[size]), title: clearTooltip, onClick: handleClear, onMouseEnter: handleClearMouseEnter, onMouseLeave: handleClearMouseLeave, children: _jsx(X, { "aria-hidden": "true" }) })) : null, _jsx("span", { onClick: stopPropagation, children: selectionTrigger })] }), description ? (_jsx("p", { id: describedById, className: "mt-1 text-xs font-medium text-foreground-muted", children: description })) : null] }));
+        } }));
+}

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { RenderCase, type RenderCaseChildProps, type RenderCaseRootProps } from
 export { RenderIf, type RenderIfProps } from './components/RenderIf';
 export { SelectField, type SelectFieldProps, type ValidValues } from './components/SelectField';
 export { SearchField, type SearchFieldProps } from './components/SearchField';
+export { SelectionField, type SelectionDisplayValue, type SelectionFieldProps, type SelectionFieldSize, type SelectionFieldVariant, } from './components/SelectionField';
 export { Switch, type SwitchProps } from './components/Switch';
 export { TextareaField, type TextareaFieldProps } from './components/TextareaField';
 export { DateField, type DateFieldProps } from './components/DateField';

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/index.js

@@ -18,6 +18,7 @@ export { RenderCase } from './components/RenderCase';
 export { RenderIf } from './components/RenderIf';
 export { SelectField } from './components/SelectField';
 export { SearchField } from './components/SearchField';
+export { SelectionField, } from './components/SelectionField';
 export { Switch } from './components/Switch';
 export { TextareaField } from './components/TextareaField';
 export { DateField } from './components/DateField';

package/dist/styles.css

@@ -607,6 +607,7 @@ h2.react-datepicker__current-month {
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -1068,6 +1069,22 @@ h2.react-datepicker__current-month {
   .table {
     display: table;
   }
+  .\!size-6 {
+    width: calc(var(--spacing) * 6) !important;
+    height: calc(var(--spacing) * 6) !important;
+  }
+  .\!size-7 {
+    width: calc(var(--spacing) * 7) !important;
+    height: calc(var(--spacing) * 7) !important;
+  }
+  .\!size-9 {
+    width: calc(var(--spacing) * 9) !important;
+    height: calc(var(--spacing) * 9) !important;
+  }
+  .\!size-10 {
+    width: calc(var(--spacing) * 10) !important;
+    height: calc(var(--spacing) * 10) !important;
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -1108,6 +1125,18 @@ h2.react-datepicker__current-month {
     width: calc(var(--spacing) * 14);
     height: calc(var(--spacing) * 14);
   }
+  .\!h-7 {
+    height: calc(var(--spacing) * 7) !important;
+  }
+  .\!h-9 {
+    height: calc(var(--spacing) * 9) !important;
+  }
+  .\!h-12 {
+    height: calc(var(--spacing) * 12) !important;
+  }
+  .\!h-14 {
+    height: calc(var(--spacing) * 14) !important;
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -1201,6 +1230,18 @@ h2.react-datepicker__current-month {
   .max-h-\[calc\(100vh-12rem\)\] {
     max-height: calc(100vh - 12rem);
   }
+  .\!min-h-6 {
+    min-height: calc(var(--spacing) * 6) !important;
+  }
+  .\!min-h-7 {
+    min-height: calc(var(--spacing) * 7) !important;
+  }
+  .\!min-h-9 {
+    min-height: calc(var(--spacing) * 9) !important;
+  }
+  .\!min-h-10 {
+    min-height: calc(var(--spacing) * 10) !important;
+  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -1393,9 +1434,24 @@ h2.react-datepicker__current-month {
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .\!min-w-6 {
+    min-width: calc(var(--spacing) * 6) !important;
+  }
+  .\!min-w-7 {
+    min-width: calc(var(--spacing) * 7) !important;
+  }
+  .\!min-w-9 {
+    min-width: calc(var(--spacing) * 9) !important;
+  }
+  .\!min-w-10 {
+    min-width: calc(var(--spacing) * 10) !important;
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1822,6 +1878,12 @@ h2.react-datepicker__current-month {
   .\!bg-transparent {
     background-color: transparent !important;
   }
+  .bg-\[color-mix\(in_srgb\,var\(--brand\)_5\%\,var\(--surface\)\)\] {
+    background-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--brand) 5%,var(--surface));
+    }
+  }
   .bg-\[color-mix\(in_srgb\,var\(--brand\)_10\%\,var\(--surface\)\)\] {
     background-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1993,6 +2055,9 @@ h2.react-datepicker__current-month {
   .fill-surface {
     fill: var(--color-surface);
   }
+  .\!p-0 {
+    padding: calc(var(--spacing) * 0) !important;
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -2044,6 +2109,9 @@ h2.react-datepicker__current-month {
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .\!py-0 {
+    padding-block: calc(var(--spacing) * 0) !important;
+  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
@@ -2086,6 +2154,18 @@ h2.react-datepicker__current-month {
   .pt-5 {
     padding-top: calc(var(--spacing) * 5);
   }
+  .\!pr-0\.5 {
+    padding-right: calc(var(--spacing) * 0.5) !important;
+  }
+  .\!pr-1 {
+    padding-right: calc(var(--spacing) * 1) !important;
+  }
+  .\!pr-1\.5 {
+    padding-right: calc(var(--spacing) * 1.5) !important;
+  }
+  .\!pr-2 {
+    padding-right: calc(var(--spacing) * 2) !important;
+  }
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
@@ -2110,6 +2190,27 @@ h2.react-datepicker__current-month {
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .\!pl-0\.5 {
+    padding-left: calc(var(--spacing) * 0.5) !important;
+  }
+  .\!pl-1 {
+    padding-left: calc(var(--spacing) * 1) !important;
+  }
+  .\!pl-1\.5 {
+    padding-left: calc(var(--spacing) * 1.5) !important;
+  }
+  .\!pl-2 {
+    padding-left: calc(var(--spacing) * 2) !important;
+  }
+  .\!pl-3 {
+    padding-left: calc(var(--spacing) * 3) !important;
+  }
+  .\!pl-4 {
+    padding-left: calc(var(--spacing) * 4) !important;
+  }
+  .\!pl-6 {
+    padding-left: calc(var(--spacing) * 6) !important;
+  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -2177,6 +2278,9 @@ h2.react-datepicker__current-month {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[0\.65rem\] {
+    font-size: 0.65rem;
+  }
   .text-\[0\.625rem\] {
     font-size: 0.625rem;
   }
@@ -2299,6 +2403,12 @@ h2.react-datepicker__current-month {
       color: color-mix(in srgb,var(--brand) 72%,var(--foreground));
     }
   }
+  .text-\[color-mix\(in_srgb\,var\(--brand\)_72\%\,var\(--foreground-muted\)\)\] {
+    color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--brand) 72%,var(--foreground-muted));
+    }
+  }
   .text-\[color-mix\(in_srgb\,var\(--brand\)_82\%\,var\(--foreground\)\)\] {
     color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2750,6 +2860,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_58\%\,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) 58%,var(--app-border));
+        }
+      }
+    }
+  }
   .hover\:border-\[var\(--destructive\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2825,6 +2945,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,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) 8%,var(--surface));
+        }
+      }
+    }
+  }
   .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_10\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2865,6 +2995,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_10\%\,transparent\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--destructive);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--destructive) 10%,transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3022,6 +3162,13 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:text-\[var\(--destructive\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--destructive);
+      }
+    }
+  }
   .hover\:text-amber-700 {
     &:hover {
       @media (hover: hover) {
@@ -3186,6 +3333,14 @@ h2.react-datepicker__current-month {
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-\[var\(--destructive\)\]\/25 {
+    &:focus-visible {
+      --tw-ring-color: var(--destructive);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--destructive) 25%, transparent);
+      }
+    }
+  }
   .focus-visible\:ring-brand\/30 {
     &:focus-visible {
       --tw-ring-color: var(--color-brand);
@@ -3496,6 +3651,11 @@ h2.react-datepicker__current-month {
       min-width: 6.75rem;
     }
   }
+  .sm\:inline-flex {
+    @media (width >= 40rem) {
+      display: inline-flex;
+    }
+  }
   .sm\:flex-row {
     @media (width >= 40rem) {
       flex-direction: row;

package/package.json

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