@wellingtonhlc/shared-ui 0.24.20 → 0.25.0

package/README.md

@@ -43,19 +43,6 @@ Este pacote foi desenhado para oferecer infraestrutura visual generica:
 - helpers sem dependencia de dominio;
 - composicao por slots quando o componente possui partes internas.
 
-## Scripts
-
-| Comando | Uso |
-|---------|-----|
-| `npm run typecheck` | Valida tipos sem emitir arquivos. |
-| `npm run test` | Executa testes de contrato e acessibilidade com Vitest, Testing Library e axe. |
-| `npm run check:storybook-static` | Confere se o Storybook estatico gerado possui artefatos e stories publicas. |
-| `npm run check` | Gate local completo: typecheck, testes, build, Storybook, smoke do Storybook estatico e `npm pack --dry-run`. |
-| `npm run build` | Compila TypeScript e copia assets para `dist`. |
-| `npm run prepack` | Executado automaticamente antes de empacotar/publicar. |
-| `npm run storybook` | Sobe o Storybook local. |
-| `npm run build-storybook` | Gera build estatico do Storybook. |
-
 ## Validacao de Page Actions
 
 O pacote publica o CLI `shared-ui-check-page-actions` para validar o contrato de actions em uma aplicacao.
@@ -159,25 +146,8 @@ Telas podem limitar o contrato localmente:
 
 Acoes auxiliares podem ser passadas por `helpContent`, `metaActions` ou por componentes
 marcados como meta. Em barras verticais, o grupo meta e renderizado em modo compacto
-para preservar alinhamento; as labels continuam obrigatorias no contrato e sao usadas
-para acessibilidade e tooltip.
-
-## Storybook
-
-O Storybook esta na linha `10.4.6` (`storybook`, `@storybook/react-vite`, `@storybook/addon-docs` e `@storybook/addon-a11y`).
-
-Use o Storybook para validar estados visuais antes de publicar mudancas no pacote:
-
-```bash
-npm run storybook
-```
-
-Antes de publicar ou consumir localmente uma alteracao visual, gere tambem a build estatica:
-
-```bash
-npm run build-storybook
-npm run check:storybook-static
-```
+e alinhado na borda externa da barra para preservar leitura visual; as labels continuam
+obrigatorias no contrato e sao usadas para acessibilidade e tooltip.
 
 ## Exportacoes
 
@@ -216,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` |
@@ -269,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.
@@ -313,79 +319,3 @@ Exports removidos:
 - `SearchFilter`: use `Filter`.
 - `SearchWorkspace`: componha layout no consumidor ou com componentes genéricos.
 - `TabsUnderline` e `UnderlinedTabs`: use `TabsUnderlined`.
-
-## Versionamento
-
-Este pacote segue SemVer, mesmo antes da v1:
-
-- `patch`: correcoes internas sem alteracao de contrato.
-- `minor`: novos componentes, novas props opcionais ou novas variantes compativeis.
-- `major` ou `minor` com destaque pre-v1: remocao/renomeacao de API publica ou mudanca que exige migracao nos consumidores.
-
-Tabela de historico:
-
-| Versao | Data | Tipo | Resumo | Validacao |
-|--------|------|------|--------|-----------|
-| `0.24.20` | 2026-06-20 | Patch | Mantem acoes meta em modo compacto quando `Page.Actions` esta na vertical, preservando label para acessibilidade e tooltip. | `npm run check`. |
-| `0.24.11` | 2026-06-20 | Patch | Mantem o botao de ajuda antes das acoes da pagina para evitar que fique oculto em barras horizontais com overflow. | `npm run check`. |
-| `0.24.10` | 2026-06-20 | Patch | Documenta o uso de `Page.ActionsProvider`, preferencias de posicao, slots e consumo pos-publicacao com `@latest`. | `npm run check`. |
-| `0.24.9` | 2026-06-20 | Patch | Estabiliza o pacote publicado de `Page.Actions` movel para consumo em aplicacoes React. | `npm run typecheck`; `npm run build`; builds de consumidores. |
-| `0.24.8` | 2026-06-20 | Patch | Corrige a renderizacao de `Page.Actions` em slots clonando o componente com marcador interno de slot. | `npm run typecheck`; `npm run test`; `npm run build`. |
-| `0.24.7` | 2026-06-20 | Minor pre-v1 | Adiciona `Page.ActionsProvider`, `Page.ActionsSlot`, posicoes `left/top/right/bottom`, ajuda contextual e movimentacao de acoes por preferencia do consumidor. | `npm run check`. |
-| `0.24.3` | 2026-06-18 | Patch | Amplia testes de contrato para exports publicos, adiciona gate axe e smoke do Storybook estatico ao `check`. | `npm run test`; `npm run check`. |
-| `0.24.2` | 2026-06-18 | Patch | Alinha metadados e documentacao do pacote npm publico, mantendo o contrato generico e sem regra de negocio. | `npm run build`; `npm run build-storybook`; `npm pack --dry-run`. |
-| `0.24.0` | 2026-06-17 | Minor pre-v1 | Adiciona `Workspace` e corrige a composicao de `Filter` para consultas com painel de filtros e area de resultados. | `npm run build`; build de consumidor. |
-| `0.21.0` | 2026-06-17 | Minor pre-v1 | Adiciona stories para `Modal`, `Card`, `PageMessage`, `EmptyState`, `StatCard`, `SelectField`, `TextareaField`, `DateField`, `DecimalField`, `RadioGroup`, `MultiSelectField`, `TabsUnderlined`, `Tooltip`, `CopyableField`, `FieldGroup`, `FieldSkeleton`, `FieldValidationError`, `NavCard`, `Sidebar` e `AppShell`. | `npm run build`; `npm run build-storybook`. |
-| `0.1.17` | 2026-06-16 | Minor pre-v1 | Remove a variante ambigua `default` de `Button`; adiciona variants semanticas `information` e `warning`; `ConfirmationDialog` usa `information`, `question`, `warning` e `destructive` com botao principal na cor da variant; Storybook passou a gerar tokens semanticos de tema. | `npm run build`; `npm run build-storybook`; builds de consumidores. |
-| `0.1.16` | 2026-06-16 | Patch | Consolida ajustes visuais recentes do pacote para consumo em aplicacoes React. | `npm run build`; `npm run build-storybook`; validacao em consumidor. |
-| `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 de consumidor. |
-| `0.1.7` | 2026-06-16 | Minor pre-v1 | Adiciona props de customizacao dos botoes de aparencia em `ThemePreferencesSelector`. | `npm run build`; build de consumidor. |
-| `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 de consumidor. |
-| `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 de consumidor. |
-| `0.1.4` | 2026-06-16 | Patch | Usa estado `data-selected` no `ThemePreferencesSelector` para manter o destaque da aparencia selecionada nos consumidores. | `npm run build`; `npm run build-storybook`. |
-| `0.1.3` | 2026-06-16 | Patch | Atualiza Storybook para `10.4.6`, documenta `ThemePreferencesSelector` e reforca o destaque visual da aparencia selecionada. | `npm run build`; `npm run build-storybook`. |
-| `0.1.0` | 2026-06-15 | Breaking pre-v1 | Define `Filter.Root`/`Filter.Footer` como contrato final de filtros e remove aliases públicos provisórios. | `npm run build`; builds de consumidores. |
-| `0.0.7` | 2026-06-14 | Breaking pre-v1 | Publica API composicional `SearchWorkspace.Root` e `SearchFilter.Root`/`SearchFilter.Footer` para consultas com filtros compactos. | Pendente antes da publicacao. |
-| `0.0.5` | 2026-06-14 | Minor pre-v1 | Adiciona `Table.Root isFramed`, `fill`, `viewportClassName` e `wrapperProps` para controlar frame e ocupacao de espaco sem classes ad-hoc. | `npm run build`. |
-| `0.0.4` | 2026-06-14 | Minor pre-v1 | Adiciona `Table.Row isInteractive` para controlar cursor de linhas interativas, com padrao `true`. | `npm run build`. |
-| `0.0.3` | 2026-06-14 | Breaking pre-v1 | Define API final de `Card` por slots explicitos; remove `<Card>` chamavel, `Card.Content` e `CardContentProps`. | `npm run build`; builds de consumidores. |
-| `0.0.2` | 2026-06-14 | Minor pre-v1 | Publica pacote no npm publico com novos slots de `Card` ainda retrocompativeis. | `npm run build`. |
-| `0.0.0` | 2026-06-14 | Inicial | Publicacao inicial do pacote `@wellingtonhlc/shared-ui`. | Build do pacote. |
-
-## Publicacao
-
-Validacao e publicacao npm:
-
-```bash
-npm run build
-npm run check
-npm pack --dry-run
-npm publish --access public --registry=https://registry.npmjs.org/
-```
-
-Quando o npm exigir OTP:
-
-```bash
-npm publish --access public --registry=https://registry.npmjs.org/ --otp CODIGO_OTP
-```
-
-Depois de publicar, atualize a aplicacao consumidora:
-
-```bash
-npm install @wellingtonhlc/shared-ui@latest
-npm run build
-```
-
-Se o consumidor estiver com dev server Vite em execucao, reinicie com cache limpo:
-
-```powershell
-Remove-Item -Recurse -Force node_modules\.vite -ErrorAction SilentlyContinue
-npm run dev -- --force
-```

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

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

package/dist/components/Page.js

@@ -73,6 +73,12 @@ function resolvePageActionsShowLabels(props, preferences) {
 function resolvePageActionsShowLabelsChange(props, preferences) {
     return props.onShowLabelsChange ?? preferences?.onShowLabelsChange;
 }
+function getVerticalMetaAlignment(position) {
+    return position === 'left' ? 'items-start' : 'items-end';
+}
+function getVerticalMetaJustification(position) {
+    return position === 'left' ? 'justify-start' : 'justify-end';
+}
 function useIsMobile() {
     const [isMobile, setIsMobile] = useState(false);
     useEffect(() => {
@@ -247,14 +253,16 @@ function Actions({ align = 'start', __fromSlot = false, children, className, def
     function handleToggleLabels() {
         effectiveOnShowLabelsChange?.(!effectiveShowLabels);
     }
-    const helpButton = helpVisible ? (_jsx("div", { className: cn('flex shrink-0', isVertical && 'w-full justify-end'), children: _jsx(Tooltip, { className: cn('max-w-[22rem] px-3 py-2', helpClassName), content: helpContent, delayDuration: 120, openOnClick: true, side: getHelpSide(effectivePosition), children: _jsx(ActionButtonPrimitive, { "aria-label": helpLabel, icon: _jsx(CircleHelpIcon, { "aria-hidden": "true" }), tooltip: helpLabel }) }) })) : null;
+    const verticalMetaAlignment = getVerticalMetaAlignment(effectivePosition);
+    const verticalMetaJustification = getVerticalMetaJustification(effectivePosition);
+    const helpButton = helpVisible ? (_jsx("div", { className: cn('flex shrink-0', isVertical && 'w-full', isVertical && verticalMetaJustification), children: _jsx(Tooltip, { className: cn('max-w-[22rem] px-3 py-2', helpClassName), content: helpContent, delayDuration: 120, openOnClick: true, side: getHelpSide(effectivePosition), children: _jsx(ActionButtonPrimitive, { "aria-label": helpLabel, icon: _jsx(CircleHelpIcon, { "aria-hidden": "true" }), tooltip: helpLabel }) }) })) : null;
     const labelToggleButton = canToggleLabels ? (_jsx(ActionButtonPrimitive, { "aria-pressed": effectiveShowLabels, "aria-label": effectiveShowLabels ? 'Ocultar labels das acoes' : 'Mostrar labels das acoes', icon: effectiveShowLabels ? _jsx(CaptionsOffIcon, { "aria-hidden": "true" }) : _jsx(CaptionsIcon, { "aria-hidden": "true" }), tooltip: effectiveShowLabels ? 'Ocultar labels das acoes' : 'Mostrar labels das acoes', onClick: handleToggleLabels })) : null;
-    const moveButton = canMove ? (_jsxs("div", { className: cn('relative flex shrink-0', isVertical && 'w-full justify-end'), children: [_jsx(ActionButtonPrimitive, { "aria-haspopup": "menu", "aria-label": "Mover barra de acoes", "aria-expanded": isMenuOpen, className: cn('touch-none [&]:cursor-grab [&_*]:cursor-grab active:[&]:cursor-grabbing active:[&_*]:cursor-grabbing', isDragging && '[&]:cursor-grabbing [&_*]:cursor-grabbing'), icon: _jsx(GripVerticalIcon, { "aria-hidden": "true" }), tooltip: "Mover barra de acoes", onClick: handleMoveMenuToggle, onKeyDown: handleMoveKeyDown, onPointerCancel: handleMovePointerCancel, onPointerDown: handleMovePointerDown, onPointerMove: handleMovePointerMove, onPointerUp: handleMovePointerUp }), isMenuOpen ? (_jsx("div", { role: "menu", className: cn('border-app-border bg-surface text-foreground absolute z-40 min-w-36 rounded-md border p-1 text-xs shadow-lg', isVertical ? 'left-full top-0 ml-2' : 'right-0 top-full mt-2'), children: effectiveAllowedPositions.map((nextPosition) => (_jsx(PageActionsMoveOption, { active: nextPosition === effectivePosition, label: positionLabels[nextPosition], onSelect: handleSelectPosition, position: nextPosition }, nextPosition))) })) : null] })) : null;
+    const moveButton = canMove ? (_jsxs("div", { className: cn('relative flex shrink-0', isVertical && 'w-full', isVertical && verticalMetaJustification), children: [_jsx(ActionButtonPrimitive, { "aria-haspopup": "menu", "aria-label": "Mover barra de acoes", "aria-expanded": isMenuOpen, className: cn('touch-none [&]:cursor-grab [&_*]:cursor-grab active:[&]:cursor-grabbing active:[&_*]:cursor-grabbing', isDragging && '[&]:cursor-grabbing [&_*]:cursor-grabbing'), icon: _jsx(GripVerticalIcon, { "aria-hidden": "true" }), tooltip: "Mover barra de acoes", onClick: handleMoveMenuToggle, onKeyDown: handleMoveKeyDown, onPointerCancel: handleMovePointerCancel, onPointerDown: handleMovePointerDown, onPointerMove: handleMovePointerMove, onPointerUp: handleMovePointerUp }), isMenuOpen ? (_jsx("div", { role: "menu", className: cn('border-app-border bg-surface text-foreground absolute z-40 min-w-36 rounded-md border p-1 text-xs shadow-lg', isVertical && effectivePosition === 'left' && 'left-full top-0 ml-2', isVertical && effectivePosition === 'right' && 'right-full top-0 mr-2', !isVertical && 'right-0 top-full mt-2'), children: effectiveAllowedPositions.map((nextPosition) => (_jsx(PageActionsMoveOption, { active: nextPosition === effectivePosition, label: positionLabels[nextPosition], onSelect: handleSelectPosition, position: nextPosition }, nextPosition))) })) : null] })) : null;
     const actions = (_jsxs("div", { className: cn('flex min-h-0 min-w-0 gap-2', isVertical ? 'h-full w-full flex-col' : 'w-full items-center'), children: [_jsx(PageActionsRenderContext.Provider, { value: { showLabels: effectiveShowLabels }, children: _jsx(ActionGroupPrimitive, { align: align, size: size, className: cn('min-w-0 flex-1', isVertical
                         ? cn('min-h-0 flex-col content-start [&>[data-action-separator=true]]:h-px [&>[data-action-separator=true]]:min-h-0 [&>[data-action-separator=true]]:w-full [&>[data-action-separator=true]]:self-auto', effectiveShowLabels
                             ? 'w-full items-stretch [&>button]:w-full [&>button]:justify-start [&>div]:w-full [&>div>button]:w-full [&>div>button]:justify-start'
                             : 'w-auto items-center')
-                        : 'overflow-x-auto overflow-y-hidden', alignClasses[align]), children: mainChildren }) }), _jsx(PageActionsRenderContext.Provider, { value: { showLabels: !isVertical && effectiveShowLabels }, children: _jsxs("div", { className: cn('flex shrink-0 gap-2', isVertical ? 'w-full flex-col items-end' : 'ml-auto items-center'), children: [helpButton, metaActions, metaChildren, labelToggleButton, moveButton] }) })] }));
+                        : 'overflow-x-auto overflow-y-hidden', alignClasses[align]), children: mainChildren }) }), _jsx(PageActionsRenderContext.Provider, { value: { showLabels: !isVertical && effectiveShowLabels }, children: _jsxs("div", { className: cn('flex shrink-0 gap-2', isVertical ? cn('w-full flex-col', verticalMetaAlignment) : 'ml-auto items-center'), children: [helpButton, metaActions, metaChildren, labelToggleButton, moveButton] }) })] }));
     return (_jsxs("div", { className: cn('flex min-w-0', positionClasses[effectivePosition], isVertical ? 'flex-col' : 'items-center', className), children: [actions, isDragging ? _jsx(PageActionsDropZones, { activePosition: dragTarget ?? effectivePosition, allowedPositions: effectiveAllowedPositions }) : null] }));
 }
 function PageActionsDropZones({ activePosition, allowedPositions }) {

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,qBAmKrB"}

package/dist/components/SelectionField.js

@@ -0,0 +1,85 @@
+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;
+    function handleClear(event) {
+        event.stopPropagation();
+        onClear?.();
+    }
+    const triggerClassName = cn('inline-flex 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(--brand)_10%,transparent)] hover:text-[color-mix(in_srgb,var(--brand)_86%,var(--foreground))]', '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', !hasValue && 'border-dashed bg-[color-mix(in_srgb,var(--brand)_5%,var(--surface))]', hasValue && 'bg-surface', disabled || loading ? 'cursor-not-allowed' : 'cursor-default', size === 'lg' ? 'rounded-lg' : 'rounded-md', controlSizeClass[size], controlGapClass[size], resolvedIcon ? controlIconPaddingClass[size] : controlLeadingPaddingClass[size], controlClassName),
+                        }), "data-empty": !hasValue || undefined, "data-loading": loading || undefined, 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, 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;
@@ -1005,6 +1006,9 @@ h2.react-datepicker__current-month {
   .mt-px {
     margin-top: 1px;
   }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
   .mr-auto {
     margin-right: auto;
   }
@@ -1065,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);
@@ -1105,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);
   }
@@ -1198,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);
   }
@@ -1390,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);
   }
@@ -1493,6 +1552,9 @@ h2.react-datepicker__current-month {
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .cursor-default {
+    cursor: default;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1819,6 +1881,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)) {
@@ -1990,6 +2058,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);
   }
@@ -2041,6 +2112,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);
   }
@@ -2083,6 +2157,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);
   }
@@ -2107,6 +2193,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);
   }
@@ -2174,6 +2281,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;
   }
@@ -2296,6 +2406,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)) {
@@ -2862,6 +2978,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) {
@@ -3019,6 +3145,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) {
@@ -3183,6 +3316,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);
@@ -3493,6 +3634,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.20",
+    "version": "0.25.0",
     "private": false,
     "type": "module",
     "main": "./dist/index.js",