@uselets/ui 2.0.1 → 2.1.0

package/dist/postcss.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"postcss.config.js","names":["config"],"sources":["../postcss.config.mjs"],"sourcesContent":["/** @type {import('postcss-load-config').Config} */\nconst config = {\n    plugins: { \"@tailwindcss/postcss\": {} },\n};\n\nexport default config;\n"],"mappings":"AACA,MAAMA,EAAS,CACX,QAAS,CAAE,uBAAwB,CAAC,CAAE,CAC1C"}
+{"version":3,"file":"postcss.config.js","names":["config"],"sources":["../postcss.config.mjs"],"sourcesContent":["/** @type {import('postcss-load-config').Config} */\nconst config = {\n    plugins: { \"@tailwindcss/postcss\": {} },\n};\n\nexport default config;\n"],"mappings":"AACA,MAAMA,EAAS,CACX,QAAS,CAAE,uBAAwB,CAAC,CAAE,CAC1C,E"}

package/dist/resolve-class-name-BurP8ngI.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolve-class-name-BurP8ngI.js","names":["className","state"],"sources":["../src/utils/resolve-class-name.ts"],"sourcesContent":["/** Resolves a Base UI `className`, which can also be a function of the component state, for that state. */\nexport function resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n) {\n  return typeof className === 'function' ? className(state) : className\n}\n"],"mappings":"uCACA,SAAgB,iBACd,EACA,EACA,CACA,OAAO,OAAOA,GAAc,WAAaA,EAAUC,CAAK,EAAID,CAC9D"}
+{"version":3,"file":"resolve-class-name-BurP8ngI.js","names":["className","state"],"sources":["../src/utils/resolve-class-name.ts"],"sourcesContent":["/** Resolves a Base UI `className`, which can also be a function of the component state, for that state. */\nexport function resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n) {\n  return typeof className === 'function' ? className(state) : className\n}\n"],"mappings":"A,uCACA,SAAgB,iBACd,EACA,EACA,CACA,OAAO,OAAOA,GAAc,WAAaA,EAAUC,CAAK,EAAID,CAC9D,C"}

package/dist/skills/uselets-ui/SKILL.md

@@ -54,14 +54,14 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
   app's entry file (`import '@fontsource-variable/inter'` in `app/layout.tsx`, `pages/_app.tsx`, or `src/main.tsx`),
   not via `@import` in CSS — some bundlers, including Next.js, don't resolve third-party CSS `@import`s reliably.
 - Recommend `@uselets/ui/postcss.config` when the app needs the package PostCSS preset for Tailwind v4.
-- Interactive components are built on Base UI (`@base-ui/react`). Use `asChild` (Radix-style, single child element) for polymorphism; the child replaces the part's content. Not supported on `ScrollArea`, `ScrollBar`, `SelectContent`, `SelectItem`, `AccordionContent`, `Checkbox`, `Switch`, `RadioGroupItem`, `Progress`, `Slider`, `NavigationMenu`, `NumberFieldScrubArea`, `ComboboxInput`, `ComboboxClear`, `ComboboxChipsInput`, `NumberField`, `NumberFieldInput` (their internal structure is required). Do not pass Base UI's `render` prop — it is not part of the public API. When `asChild` wraps a button-like part (triggers, closes, `TabsTrigger`, `AccordionTrigger`, `Toggle`, `SelectTrigger`, `AlertDialogAction`/`Cancel`) with a non-`<button>` child, also pass `nativeButton={false}` (not needed for `TooltipTrigger`/`HoverCardTrigger`). Change callbacks of Base UI-backed components (`onOpenChange`, `onValueChange`, `onCheckedChange`, …) receive `(value, eventDetails)`; `DateRangePicker`, `SidebarProvider` and `Stepper` callbacks don't.
-- Popups unmount when closed. `keepMounted?: boolean` (default `false`) keeps them mounted while hidden on `DialogContent`, `AlertDialogContent`, `DrawerContent`, `PopoverContent`, `DropdownMenuContent`, `DropdownMenuSubContent`, `TooltipContent`/`Tooltip`, `HoverCardContent`, `ComboboxContent` and `NavigationMenuPositioner`; `SelectContent` does not accept it. `sticky?: boolean` (default `false`) keeps `PopoverContent`, `SelectContent`, `DropdownMenuContent`, `DropdownMenuSubContent`, `TooltipContent`/`Tooltip`, `HoverCardContent` and `ComboboxContent` in the viewport after the anchor scrolls out of view. Other positioner props (`collisionPadding`, `collisionBoundary`, `arrowPadding`, `collisionAvoidance`) are only exposed on `ComboboxContent`.
+- Interactive components are built on Base UI (`@base-ui/react`). Use `asChild` (Radix-style, single child element) for polymorphism; the child replaces the part's content. Not supported on `ScrollArea`, `ScrollBar`, `SelectContent`, `SelectItem`, `AccordionContent`, `Checkbox`, `Switch`, `RadioGroupItem`, `Progress`, `Slider`, `NavigationMenu`, `NumberFieldScrubArea`, `ComboboxInput`, `ComboboxClear`, `ComboboxChipsInput`, `AutocompleteInput`, `Meter`, `ToolbarInput`, `NumberField`, `NumberFieldInput` (their internal structure is required). Do not pass Base UI's `render` prop — it is not part of the public API. When `asChild` wraps a button-like part (triggers, closes, `TabsTrigger`, `AccordionTrigger`, `Toggle`, `SelectTrigger`, `AlertDialogAction`/`Cancel`) with a non-`<button>` child, also pass `nativeButton={false}` (not needed for `TooltipTrigger`/`HoverCardTrigger`). Change callbacks of Base UI-backed components (`onOpenChange`, `onValueChange`, `onCheckedChange`, …) receive `(value, eventDetails)`; `DateRangePicker`, `SidebarProvider` and `Stepper` callbacks don't.
+- Popups unmount when closed. `keepMounted?: boolean` (default `false`) keeps them mounted while hidden on `DialogContent`, `AlertDialogContent`, `DrawerContent`, `PopoverContent`, `DropdownMenuContent`, `DropdownMenuSubContent`, `TooltipContent`/`Tooltip`, `HoverCardContent`, `ComboboxContent`, `AutocompleteContent` and `NavigationMenuPositioner`; `SelectContent` does not accept it. `sticky?: boolean` (default `false`) keeps `PopoverContent`, `SelectContent`, `DropdownMenuContent`, `DropdownMenuSubContent`, `TooltipContent`/`Tooltip`, `HoverCardContent`, `ComboboxContent` and `AutocompleteContent` in the viewport after the anchor scrolls out of view. Other positioner props (`collisionPadding`, `collisionBoundary`, `arrowPadding`, `collisionAvoidance`) are only exposed on `ComboboxContent` and `AutocompleteContent`.
 - For Vite apps, `@tailwindcss/vite` (registered in `vite.config.ts`, no `postcss.config.mjs`) is a valid alternative to PostCSS; prefer it when the project uses isolated installs (pnpm, Bun workspaces). See `references/package-guide.md`.
 - For tooltip-heavy apps, wrap the app with `TooltipProvider` (`delay`, not `delayDuration`); use `Tooltip label={...}` for common trigger/content usage (it accepts `delay`/`closeDelay`) and `TooltipRoot` only when manual composition is needed.
 - Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
 - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
 - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
-- For form fields, `Field` automatically shares a generated control id with `FieldLabel` and labelable controls when explicit ids are omitted; pass explicit matching `htmlFor` and `id` only when a stable custom id is required. Use one control per `Field` (a `RadioGroup` counts as one control); for several checkboxes/switches use `FieldSet` + `FieldLegend` with one `Field` each. Mark errors with `<Field invalid>` (not `aria-invalid` on each control): it colors the label and propagates `aria-invalid` to the control; `Checkbox`/`Switch`/`RadioGroup` get the attribute but no red style.
+- For form fields, `Field` automatically shares a generated control id with `FieldLabel` and labelable controls when explicit ids are omitted; pass explicit matching `htmlFor` and `id` only when a stable custom id is required. Use one control per `Field` (a `RadioGroup` or `CheckboxGroup` counts as one control); for several checkboxes use a `CheckboxGroup` (it also provides "select all" via a `parent` checkbox), and for several switches use `FieldSet` + `FieldLegend` with one `Field` each. Mark errors with `<Field invalid>` (not `aria-invalid` on each control): it colors the label and propagates `aria-invalid` to the control; `Checkbox`/`Switch`/`RadioGroup`/`CheckboxGroup` get the attribute but no red style.
 - For client-side tabular data, use `DataTable` from `@uselets/ui/data-table`. Defaults are bare: `enableRowSelection`, `enableSorting`, and `showPagination` are all `false`. Set `enableRowSelection` to auto-prepend the selection checkbox column (no need to add `createDataTableSelectColumn` manually); set `enableSorting` to make `DataTableColumnHeader` clickable for sort. `filterColumns` accepts a single id or an array; with 2+ ids the toolbar renders an `InputGroup` with a column selector on the left. `toolbarActions` always sits at the right of the toolbar. All labels default to pt-BR; override any subset through `labels` (`Partial<DataTableLabels>`), with full defaults exposed as `defaultDataTableLabels`. Use `variant` on `DataTable` (or directly on the base `Table`) to switch chrome: `"line"` (default) renders only horizontal separators between rows; `"outline"` adds a rounded outer border around the table. The base `Table` from `@uselets/ui/table` renders only the `<table>` element and is striped by default (pass `striped={false}` to disable). Wrap it in `TableContainer` to control scroll; `minWidth` lives on `TableContainer`. Combine `stickyHeader` on `Table` with `max-h` + `overflow-y-auto` on the `TableContainer` to keep the `<thead>` visible during vertical scroll. `DataTable` wraps its `Table` in `TableContainer` automatically.
 
 ## Quick Routing

package/dist/skills/uselets-ui/references/component-catalog.md

@@ -115,11 +115,17 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Notes: action button with `solid`, `secondary`, `outline`, `subtle`, `ghost`, and `link` variants, `color: UIColor` (`primary` default), sizes from `xs` through `xl` plus icon sizes through `icon-xl`, and `loading`
 - `button-group`
   - Exports: `ButtonGroup`, `ButtonGroupSeparator`, `ButtonGroupText`, `buttonGroupVariants`
+- `toolbar`
+  - Exports: `Toolbar`, `ToolbarButton`, `ToolbarGroup`, `ToolbarInput`, `ToolbarLink`, `ToolbarSeparator`
+  - Notes: action bar (`role="toolbar"`) that is one tab stop; arrow keys move focus between its controls. Always pass `aria-label`. No background/border of its own (wrap in `Card` or a container). `Toolbar` props: `orientation: 'horizontal' | 'vertical'` (default `horizontal`), `loopFocus` (default `true`), `disabled`. `ToolbarButton` renders `Button`: `variant` (default `ghost`), `size` (default `sm`), `color: UIColor`, `loading`; disabled buttons stay focusable (`focusableWhenDisabled`, default `true`). To open a menu/popover: `<DropdownMenuTrigger asChild><ToolbarButton>…</ToolbarButton></DropdownMenuTrigger>`. `ToolbarSeparator` takes the opposite orientation automatically. `ToolbarInput` renders `Input` (no `asChild`). Use for action bars (bulk actions, filters, editors), not navigation (`Tabs`/`NavigationMenu`)
 - `empty`
   - Exports: `Empty`, `EmptyContent`, `EmptyDescription`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`
 - `progress`
   - Exports: `Progress`, `progressVariants`
   - Notes: linear progress bar driven by a single `value` (0–100); `size: 'sm' | 'md' | 'lg'` (default: `md`) controls bar height and `color: UIColor` (default: `primary`) controls the indicator; omitting `value` (or passing `null`) renders the indeterminate state
+- `meter`
+  - Exports: `Meter`, `meterVariants`
+  - Notes: linear bar for a static measurement within a range (usage, capacity, share of a total) with `role="meter"`; use `Progress` for task completion. `value` required; `min`/`max` (default `0`/`100`); `label?: React.ReactNode` renders above the bar and names it (without it, pass `aria-label`); `showValue?: boolean` (default `false`) prints the formatted value at the end of the label row, formatted with `format?: Intl.NumberFormatOptions` and `locale`. `size: 'sm' | 'md' | 'lg'` (default `md`) and `color: UIColor` (default `primary`) match `Progress`; `className` targets the bar. No `asChild`
 - `ring-progress`
   - Exports: `RingProgress`, `ringProgressVariants`
   - Notes: circular progress indicator driven by a single `value` (0–100); `size: 'sm' | 'md' | 'lg'` (default: `md`, `32/40/48px`), `thickness: 'thin' | 'md' | 'thick'` (default: `md`), and `color: UIColor` (default: `primary`); normalized `viewBox` means the size can also be set via `className` (e.g. `size-5`); rounded line caps
@@ -133,8 +139,8 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 
 - `field`
   - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`, `useFieldControlId`, `useFieldInvalid`, `useFieldLabelId`
-  - Notes: form layout and validation helpers; `Field` automatically provides a generated control id to `FieldLabel` and labelable descendants when explicit ids are omitted. One control per `Field`: a `RadioGroup` placed directly in a `Field` takes the `FieldLabel` as its group label (`aria-labelledby`) and its items keep their own ids; never put several `Checkbox`/`Switch` controls in one `Field` (they would share the control id) — use `FieldSet` + `FieldLegend` with one `Field` per control. `useFieldLabelId()` returns the current `FieldLabel` id (or `undefined` outside a `Field`) for custom group controls
-  - Invalid state: `Field.invalid?: boolean` (or legacy `data-invalid="true"`; `invalid` wins when both are set) renders `data-invalid="true"` (label/description turn destructive) and sets `aria-invalid` on the control inside. Styled red: `Input` (incl. `InputGroupInput`, `PhoneInput`), `Textarea`, `NativeSelect`, `SelectTrigger`, `ComboboxInput`, `ComboboxChipsInput`, `InputOTP` (+ slots), `NumberField`. `aria-invalid` only, no red style: `Checkbox`, `Switch`, `RadioGroup` (on the group). Not propagated: `Slider`, `DatePicker`/`DateRangePicker` triggers. A control's own `aria-invalid` (including `false`) overrides the `Field`. Do: `<Field invalid><FieldLabel/><Input/><FieldError/></Field>`. Don't: repeat `aria-invalid` on every control inside an invalid `Field`. Custom controls: `const invalid = useFieldInvalid(props['aria-invalid'])` → `aria-invalid={invalid}` (returns `undefined` outside a `Field`)
+  - Notes: form layout and validation helpers; `Field` automatically provides a generated control id to `FieldLabel` and labelable descendants when explicit ids are omitted. One control per `Field`: a `RadioGroup` placed directly in a `Field` takes the `FieldLabel` as its group label (`aria-labelledby`) and its items keep their own ids; a `CheckboxGroup` placed directly in a `Field` behaves the same way; never put several loose `Checkbox`/`Switch` controls in one `Field` (they would share the control id) — wrap checkboxes in a `CheckboxGroup`, or use `FieldSet` + `FieldLegend` with one `Field` per control. `useFieldLabelId()` returns the current `FieldLabel` id (or `undefined` outside a `Field`) for custom group controls
+  - Invalid state: `Field.invalid?: boolean` (or legacy `data-invalid="true"`; `invalid` wins when both are set) renders `data-invalid="true"` (label/description turn destructive) and sets `aria-invalid` on the control inside. Styled red: `Input` (incl. `InputGroupInput`, `PhoneInput`), `Textarea`, `NativeSelect`, `SelectTrigger`, `ComboboxInput`, `ComboboxChipsInput`, `AutocompleteInput`, `InputOTP` (+ slots), `NumberField`. `aria-invalid` only, no red style: `Checkbox`, `Switch`, `RadioGroup` and `CheckboxGroup` (on the group). Not propagated: `Slider`, `DatePicker`/`DateRangePicker` triggers. A control's own `aria-invalid` (including `false`) overrides the `Field`. Do: `<Field invalid><FieldLabel/><Input/><FieldError/></Field>`. Don't: repeat `aria-invalid` on every control inside an invalid `Field`. Custom controls: `const invalid = useFieldInvalid(props['aria-invalid'])` → `aria-invalid={invalid}` (returns `undefined` outside a `Field`)
 - `grid`
   - Exports: `Grid`, `GridItem`
   - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; spacing values `xs` to `xl` map to `4/8/16/24/32px`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
@@ -165,6 +171,9 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `checkbox`
   - Exports: `Checkbox`
   - Notes: supports `size: 'sm' | 'md' | 'lg'`, `color: UIColor` (default `primary`), `indeterminate?: boolean` for the mixed state (use it alongside a boolean `checked`; `checked="indeterminate"` is not supported), `label?: React.ReactNode`, `labelProps`, and automatic `id`/`htmlFor` wiring when a label is provided without an explicit `id`; composed label text follows checkbox size (`sm` 12px, `md` 14px, `lg` 18px); `description?: React.ReactNode` + `descriptionProps` render muted helper text (a `<p>`) below the label, linked via `aria-describedby`; description text is `sm` 12px, `md` 12px, `lg` 14px
+- `checkbox-group`
+  - Exports: `CheckboxGroup`
+  - Notes: shares one `string[]` value between child `Checkbox`es; each child needs `value`. `value`/`defaultValue`/`onValueChange(value: string[], eventDetails)`. Select all: pass every value in `allValues` and add `<Checkbox parent label="…" />` (no `value`); it checks/unchecks all and shows the mixed state automatically (don't compute `indeterminate` yourself). `orientation: 'vertical' | 'horizontal'` (default `vertical`; horizontal wraps in a row). `color: UIColor` (default `primary`) applies to every child; a child's own `color` wins. `disabled` disables all. Inside a `Field`, the group is labelled by `FieldLabel` (`aria-labelledby`), gets `aria-invalid` from an invalid `Field`, and each checkbox keeps its own id. Supports `asChild`
 - `switch`
   - Exports: `Switch`
   - Notes: supports `size: 'sm' | 'md' | 'lg'`, `color: UIColor` (default `green`), `label?: React.ReactNode`, `labelProps`, and automatic `id`/`htmlFor` wiring when a label is provided without an explicit `id`; `color` controls the checked track and indicator color only; track size is `sm` 30x14px, `md` 34x16px, and `lg` 42x20px (control heights match `Checkbox`); the thumb and internal indicator scale with the switch; composed label text follows switch size (`sm` 12px, `md` 14px, `lg` 18px (same as `Checkbox` and `RadioGroupItem`)); `description?: React.ReactNode` + `descriptionProps` render muted helper text (a `<p>`) below the label, linked via `aria-describedby`; description text is `sm` 12px, `md` 12px, `lg` 14px
@@ -179,6 +188,9 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `combobox`
   - Exports: `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor`
   - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxChips` supports `showClear?: boolean` to render a button that clears all selected chips at once; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs, and forwards the underlying Base UI Positioner's public props (`side`, `align`, `sideOffset`, `alignOffset`, `anchor`, `positionMethod` (default `'absolute'`), `collisionBoundary`, `collisionPadding`, `sticky`, `arrowPadding`, `disableAnchorTracking`, `collisionAvoidance`)
+- `autocomplete`
+  - Exports: `Autocomplete`, `AutocompleteInput`, `AutocompleteContent`, `AutocompleteList`, `AutocompleteItem`, `AutocompleteGroup`, `AutocompleteLabel`, `AutocompleteCollection`, `AutocompleteEmpty`, `AutocompleteStatus`, `AutocompleteSeparator`, `useAutocompleteFilter`
+  - Notes: free-text input with suggestions; the value is the input text (`value`/`defaultValue`/`onValueChange(value: string, eventDetails)`), so any text is valid. Use `Combobox` when the value must be one of the options. Pass suggestions in `items` and render with `AutocompleteCollection`; for object items set `itemToStringValue` so picking fills the input. Server suggestions: `filter={null}`, update `items` from the request, render loading/count text in `AutocompleteStatus` (live region). `AutocompleteInput` props: `icon`, `showClear` (default `false`), `showTrigger` (default `false`, unlike `ComboboxInput`), `triggerIcon`; no `asChild`. `AutocompleteContent` has the same positioner/portal props and defaults as `ComboboxContent` (`side` `bottom`, `align` `start`, `sideOffset` `6`, `container`, `keepMounted`, `sticky`, …). Root props include `mode` (`list` default, `both`, `inline`, `none`), `autoHighlight`, `openOnInputClick` (default `false`), `limit`, `submitOnItemClick`. `useAutocompleteFilter()` returns locale-aware `contains`/`startsWith`/`endsWith` matchers for a custom `filter`. Inside a `Field` it takes the control id and turns red when invalid
 - `dropzone`
   - Exports: `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone`
   - Notes: upload composition with validation, retry handling, status list UI, and optional `shiftOnMaxFiles`

package/dist/skills/uselets-ui/references/package-guide.md

@@ -287,7 +287,7 @@ The package stylesheet exposes these palette families:
 - `pink`
 - `green`
 
-The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
+The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `CheckboxGroup`, `RadioGroupItem`, `Switch`, `Progress`, and `Meter` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
 
 Each palette family is exposed in four layers:
 
@@ -465,9 +465,9 @@ A full working example lives in `apps/web/src/stories/data-table-virtualized.sto
 Choose components by intent:
 
 - actions and status:
-  - `Button`, `Badge`, `Alert`, `Progress`, `Skeleton`, `Spinner`, `toast`
+  - `Button`, `Badge`, `Alert`, `Progress`, `Meter`, `Skeleton`, `Spinner`, `toast`
 - forms and inputs:
-  - `Field`, `Input`, `Textarea`, `Checkbox`, `Switch`, `RadioGroup`, `Select`, `NativeSelect`, `Combobox`, `Dropzone`, `InputGroup`, `InputOTP`, `Slider`, `DateRangePicker`
+  - `Field`, `Input`, `Textarea`, `Checkbox`, `CheckboxGroup`, `Switch`, `RadioGroup`, `Select`, `NativeSelect`, `Combobox`, `Autocomplete`, `Dropzone`, `InputGroup`, `InputOTP`, `Slider`, `DateRangePicker`
 - overlays and floating UI:
   - `Dialog`, `Drawer`, `Popover`, `Tooltip`, `HoverCard`, `AlertDialog`
 - navigation:

package/dist/{use-hotkeys-D1_TEIwN.d.ts → use-hotkeys-BVm0IGb8.d.ts}

@@ -1,19 +1,15 @@
 import { t as __name } from "./rolldown-runtime-BhWHdk3m.js";
-//#region src/utils/parse-hotkey.d.ts
 type HotkeyItemOptions = {
   preventDefault?: boolean;
   usePhysicalKeys?: boolean;
 };
 type HotkeyItem$1 = [string, (event: unknown) => void, HotkeyItemOptions?];
 declare function getHotkeyHandler(hotkeys: HotkeyItem$1[]): (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
-//#endregion
-//#region src/hooks/use-hotkeys.d.ts
 type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];
 /** Registers keyboard shortcuts on the document. Items are `[hotkey, handler, options?]`; `mod` is `ctrl` or `⌘`. */
 declare function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void;
 declare namespace useHotkeys {
   type Hotkey = HotkeyItem;
 }
-//#endregion
 export { getHotkeyHandler as i, useHotkeys as n, HotkeyItemOptions as r, HotkeyItem as t };
-//# sourceMappingURL=use-hotkeys-D1_TEIwN.d.ts.map
+//# sourceMappingURL=use-hotkeys-BVm0IGb8.d.ts.map

package/dist/use-hotkeys-YDJmGWX6.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-hotkeys-YDJmGWX6.js","names":["keyNameMap","lowerKey","key","keys","hotkey","part","modifiers","reservedKeys","freeKey","pressedKey","pressedCode","event","alt","altKey","mod","ctrlKey","metaKey","ctrl","meta","shift","shiftKey","usePhysicalKeys","_event","hotkeys","handler","options","triggerOnContentEditable","tagsToIgnore","handleKeydown","useEffectEvent","useEffect"],"sources":["../src/utils/parse-hotkey.ts","../src/hooks/use-hotkeys.ts"],"sourcesContent":["export type KeyboardModifiers = {\n  alt: boolean\n  ctrl: boolean\n  meta: boolean\n  mod: boolean\n  shift: boolean\n}\n\nexport type Hotkey = KeyboardModifiers & {\n  key?: string\n}\n\ntype CheckHotkeyMatch = (event: KeyboardEvent) => boolean\n\nconst keyNameMap: Record<string, string> = {\n  ' ': 'space',\n  ArrowLeft: 'arrowleft',\n  ArrowRight: 'arrowright',\n  ArrowUp: 'arrowup',\n  ArrowDown: 'arrowdown',\n  Escape: 'escape',\n  Esc: 'escape',\n  esc: 'escape',\n  Enter: 'enter',\n  Tab: 'tab',\n  Backspace: 'backspace',\n  Delete: 'delete',\n  Insert: 'insert',\n  Home: 'home',\n  End: 'end',\n  PageUp: 'pageup',\n  PageDown: 'pagedown',\n  '+': 'plus',\n  '-': 'minus',\n  '*': 'asterisk',\n  '/': 'slash'\n}\n\nfunction normalizeKey(key: string): string {\n  const lowerKey = key.replace('Key', '').toLowerCase()\n  return keyNameMap[key] || lowerKey\n}\n\nexport function parseHotkey(hotkey: string): Hotkey {\n  const keys = hotkey\n    .toLowerCase()\n    .split('+')\n    .map((part) => part.trim())\n\n  const modifiers: KeyboardModifiers = {\n    alt: keys.includes('alt'),\n    ctrl: keys.includes('ctrl'),\n    meta: keys.includes('meta'),\n    mod: keys.includes('mod'),\n    shift: keys.includes('shift')\n  }\n\n  const reservedKeys = ['alt', 'ctrl', 'meta', 'shift', 'mod']\n\n  const freeKey = keys.find((key) => !reservedKeys.includes(key))\n\n  return {\n    ...modifiers,\n    key: freeKey === '[plus]' ? '+' : freeKey\n  }\n}\n\nfunction isExactHotkey(hotkey: Hotkey, event: KeyboardEvent, usePhysicalKeys?: boolean): boolean {\n  const { alt, ctrl, meta, mod, shift, key } = hotkey\n  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey, code: pressedCode } = event\n\n  if (alt !== altKey) {\n    return false\n  }\n\n  if (mod) {\n    if (!ctrlKey && !metaKey) {\n      return false\n    }\n  } else {\n    if (ctrl !== ctrlKey) {\n      return false\n    }\n    if (meta !== metaKey) {\n      return false\n    }\n  }\n  if (shift !== shiftKey) {\n    return false\n  }\n\n  if (\n    key &&\n    (usePhysicalKeys\n      ? normalizeKey(pressedCode) === normalizeKey(key)\n      : normalizeKey(pressedKey ?? pressedCode) === normalizeKey(key))\n  ) {\n    return true\n  }\n\n  return false\n}\n\nexport function getHotkeyMatcher(hotkey: string, usePhysicalKeys?: boolean): CheckHotkeyMatch {\n  return (event) => isExactHotkey(parseHotkey(hotkey), event, usePhysicalKeys)\n}\n\nexport type HotkeyItemOptions = {\n  preventDefault?: boolean\n  usePhysicalKeys?: boolean\n}\n\ntype HotkeyItem = [string, (event: unknown) => void, HotkeyItemOptions?]\n\nexport function getHotkeyHandler(hotkeys: HotkeyItem[]) {\n  return (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => {\n    const _event = 'nativeEvent' in event ? event.nativeEvent : event\n    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {\n      if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(_event)) {\n        if (options.preventDefault) {\n          event.preventDefault()\n        }\n\n        handler(_event)\n      }\n    })\n  }\n}\n","import { useEffect, useEffectEvent } from 'react'\n\nimport { getHotkeyHandler, getHotkeyMatcher, type HotkeyItemOptions } from '../utils/parse-hotkey'\n\nexport type { HotkeyItemOptions }\nexport { getHotkeyHandler }\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?]\n\nfunction shouldFireEvent(event: KeyboardEvent, tagsToIgnore: string[], triggerOnContentEditable = false) {\n  if (event.target instanceof HTMLElement) {\n    if (triggerOnContentEditable) {\n      return !tagsToIgnore.includes(event.target.tagName)\n    }\n\n    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName)\n  }\n\n  return true\n}\n\n/** Registers keyboard shortcuts on the document. Items are `[hotkey, handler, options?]`; `mod` is `ctrl` or `⌘`. */\nexport function useHotkeys(\n  hotkeys: HotkeyItem[],\n  tagsToIgnore: string[] = ['INPUT', 'TEXTAREA', 'SELECT'],\n  triggerOnContentEditable = false\n) {\n  const handleKeydown = useEffectEvent((event: KeyboardEvent) => {\n    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {\n      if (\n        getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event) &&\n        shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)\n      ) {\n        if (options.preventDefault) {\n          event.preventDefault()\n        }\n\n        handler(event)\n      }\n    })\n  })\n\n  useEffect(() => {\n    document.documentElement.addEventListener('keydown', handleKeydown)\n    return () => document.documentElement.removeEventListener('keydown', handleKeydown)\n  }, [])\n}\n\nexport namespace useHotkeys {\n  export type Hotkey = HotkeyItem\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-hotkeys-YDJmGWX6.js","names":["keyNameMap","lowerKey","key","keys","hotkey","part","modifiers","reservedKeys","freeKey","pressedKey","pressedCode","event","alt","altKey","mod","ctrlKey","metaKey","ctrl","meta","shift","shiftKey","usePhysicalKeys","_event","hotkeys","handler","options","triggerOnContentEditable","tagsToIgnore","handleKeydown","useEffectEvent","useEffect"],"sources":["../src/utils/parse-hotkey.ts","../src/hooks/use-hotkeys.ts"],"sourcesContent":["export type KeyboardModifiers = {\n  alt: boolean\n  ctrl: boolean\n  meta: boolean\n  mod: boolean\n  shift: boolean\n}\n\nexport type Hotkey = KeyboardModifiers & {\n  key?: string\n}\n\ntype CheckHotkeyMatch = (event: KeyboardEvent) => boolean\n\nconst keyNameMap: Record<string, string> = {\n  ' ': 'space',\n  ArrowLeft: 'arrowleft',\n  ArrowRight: 'arrowright',\n  ArrowUp: 'arrowup',\n  ArrowDown: 'arrowdown',\n  Escape: 'escape',\n  Esc: 'escape',\n  esc: 'escape',\n  Enter: 'enter',\n  Tab: 'tab',\n  Backspace: 'backspace',\n  Delete: 'delete',\n  Insert: 'insert',\n  Home: 'home',\n  End: 'end',\n  PageUp: 'pageup',\n  PageDown: 'pagedown',\n  '+': 'plus',\n  '-': 'minus',\n  '*': 'asterisk',\n  '/': 'slash'\n}\n\nfunction normalizeKey(key: string): string {\n  const lowerKey = key.replace('Key', '').toLowerCase()\n  return keyNameMap[key] || lowerKey\n}\n\nexport function parseHotkey(hotkey: string): Hotkey {\n  const keys = hotkey\n    .toLowerCase()\n    .split('+')\n    .map((part) => part.trim())\n\n  const modifiers: KeyboardModifiers = {\n    alt: keys.includes('alt'),\n    ctrl: keys.includes('ctrl'),\n    meta: keys.includes('meta'),\n    mod: keys.includes('mod'),\n    shift: keys.includes('shift')\n  }\n\n  const reservedKeys = ['alt', 'ctrl', 'meta', 'shift', 'mod']\n\n  const freeKey = keys.find((key) => !reservedKeys.includes(key))\n\n  return {\n    ...modifiers,\n    key: freeKey === '[plus]' ? '+' : freeKey\n  }\n}\n\nfunction isExactHotkey(hotkey: Hotkey, event: KeyboardEvent, usePhysicalKeys?: boolean): boolean {\n  const { alt, ctrl, meta, mod, shift, key } = hotkey\n  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKey, code: pressedCode } = event\n\n  if (alt !== altKey) {\n    return false\n  }\n\n  if (mod) {\n    if (!ctrlKey && !metaKey) {\n      return false\n    }\n  } else {\n    if (ctrl !== ctrlKey) {\n      return false\n    }\n    if (meta !== metaKey) {\n      return false\n    }\n  }\n  if (shift !== shiftKey) {\n    return false\n  }\n\n  if (\n    key &&\n    (usePhysicalKeys\n      ? normalizeKey(pressedCode) === normalizeKey(key)\n      : normalizeKey(pressedKey ?? pressedCode) === normalizeKey(key))\n  ) {\n    return true\n  }\n\n  return false\n}\n\nexport function getHotkeyMatcher(hotkey: string, usePhysicalKeys?: boolean): CheckHotkeyMatch {\n  return (event) => isExactHotkey(parseHotkey(hotkey), event, usePhysicalKeys)\n}\n\nexport type HotkeyItemOptions = {\n  preventDefault?: boolean\n  usePhysicalKeys?: boolean\n}\n\ntype HotkeyItem = [string, (event: unknown) => void, HotkeyItemOptions?]\n\nexport function getHotkeyHandler(hotkeys: HotkeyItem[]) {\n  return (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => {\n    const _event = 'nativeEvent' in event ? event.nativeEvent : event\n    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {\n      if (getHotkeyMatcher(hotkey, options.usePhysicalKeys)(_event)) {\n        if (options.preventDefault) {\n          event.preventDefault()\n        }\n\n        handler(_event)\n      }\n    })\n  }\n}\n","import { useEffect, useEffectEvent } from 'react'\n\nimport { getHotkeyHandler, getHotkeyMatcher, type HotkeyItemOptions } from '../utils/parse-hotkey'\n\nexport type { HotkeyItemOptions }\nexport { getHotkeyHandler }\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?]\n\nfunction shouldFireEvent(event: KeyboardEvent, tagsToIgnore: string[], triggerOnContentEditable = false) {\n  if (event.target instanceof HTMLElement) {\n    if (triggerOnContentEditable) {\n      return !tagsToIgnore.includes(event.target.tagName)\n    }\n\n    return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName)\n  }\n\n  return true\n}\n\n/** Registers keyboard shortcuts on the document. Items are `[hotkey, handler, options?]`; `mod` is `ctrl` or `⌘`. */\nexport function useHotkeys(\n  hotkeys: HotkeyItem[],\n  tagsToIgnore: string[] = ['INPUT', 'TEXTAREA', 'SELECT'],\n  triggerOnContentEditable = false\n) {\n  const handleKeydown = useEffectEvent((event: KeyboardEvent) => {\n    hotkeys.forEach(([hotkey, handler, options = { preventDefault: true, usePhysicalKeys: false }]) => {\n      if (\n        getHotkeyMatcher(hotkey, options.usePhysicalKeys)(event) &&\n        shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)\n      ) {\n        if (options.preventDefault) {\n          event.preventDefault()\n        }\n\n        handler(event)\n      }\n    })\n  })\n\n  useEffect(() => {\n    document.documentElement.addEventListener('keydown', handleKeydown)\n    return () => document.documentElement.removeEventListener('keydown', handleKeydown)\n  }, [])\n}\n\nexport namespace useHotkeys {\n  export type Hotkey = HotkeyItem\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uselets/ui",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "type": "module",
   "license": "UNLICENSED",
   "private": false,
@@ -63,23 +63,23 @@
     "@base-ui/react": "1.9.0",
     "@fontsource-variable/inter": "^5.3.0",
     "@react-input/mask": "2.0.4",
-    "@tabler/icons-react": "^3.49.0",
+    "@tabler/icons-react": "^3.50.0",
     "@tanstack/react-table": "9.3.1",
     "@uselets/tokens": "0.2.0",
     "class-variance-authority": "^0.7.1",
     "cmdk": "1.1.1",
-    "cn": "0.5.0",
+    "cn": "0.5.2",
     "commander": "15.0.0",
     "date-fns": "4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "1.5.0",
     "next-themes": "0.4.6",
     "react-day-picker": "10.0.2",
-    "react-dropzone": "20.1.3",
+    "react-dropzone": "20.1.4",
     "react-phone-number-input": "^3.4.18",
-    "react-resizable-panels": "4.14.5",
+    "react-resizable-panels": "4.17.0",
     "recharts": "^3.10.1",
-    "shadcn": "4.22.0",
+    "shadcn": "4.23.0",
     "sonner": "2.0.8"
   },
   "peerDependencies": {
@@ -88,18 +88,18 @@
   },
   "devDependencies": {
     "@bosh-code/tsdown-plugin-tailwindcss": "1.0.1",
-    "@tailwindcss/postcss": "4.3.3",
+    "@tailwindcss/postcss": "4.3.4",
     "@testing-library/react": "16.3.3",
-    "@vitest/coverage-v8": "5.0.5",
-    "@tsdown/css": "0.23.1",
-    "@turbo/gen": "2.11.9",
-    "@types/node": "26.6.5",
+    "@vitest/coverage-v8": "5.1.0",
+    "@tsdown/css": "0.23.5",
+    "@turbo/gen": "2.11.10",
+    "@types/node": "26.6.6",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "jsdom": "30.1.3",
-    "tailwindcss": "4.3.3",
-    "tsdown": "0.23.1",
+    "tailwindcss": "4.3.4",
+    "tsdown": "0.23.5",
     "typescript": "7.0.2",
-    "vitest": "5.0.5"
+    "vitest": "5.1.0"
   }
 }

package/skills/uselets-ui/SKILL.md

@@ -54,14 +54,14 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
   app's entry file (`import '@fontsource-variable/inter'` in `app/layout.tsx`, `pages/_app.tsx`, or `src/main.tsx`),
   not via `@import` in CSS — some bundlers, including Next.js, don't resolve third-party CSS `@import`s reliably.
 - Recommend `@uselets/ui/postcss.config` when the app needs the package PostCSS preset for Tailwind v4.
-- Interactive components are built on Base UI (`@base-ui/react`). Use `asChild` (Radix-style, single child element) for polymorphism; the child replaces the part's content. Not supported on `ScrollArea`, `ScrollBar`, `SelectContent`, `SelectItem`, `AccordionContent`, `Checkbox`, `Switch`, `RadioGroupItem`, `Progress`, `Slider`, `NavigationMenu`, `NumberFieldScrubArea`, `ComboboxInput`, `ComboboxClear`, `ComboboxChipsInput`, `NumberField`, `NumberFieldInput` (their internal structure is required). Do not pass Base UI's `render` prop — it is not part of the public API. When `asChild` wraps a button-like part (triggers, closes, `TabsTrigger`, `AccordionTrigger`, `Toggle`, `SelectTrigger`, `AlertDialogAction`/`Cancel`) with a non-`<button>` child, also pass `nativeButton={false}` (not needed for `TooltipTrigger`/`HoverCardTrigger`). Change callbacks of Base UI-backed components (`onOpenChange`, `onValueChange`, `onCheckedChange`, …) receive `(value, eventDetails)`; `DateRangePicker`, `SidebarProvider` and `Stepper` callbacks don't.
-- Popups unmount when closed. `keepMounted?: boolean` (default `false`) keeps them mounted while hidden on `DialogContent`, `AlertDialogContent`, `DrawerContent`, `PopoverContent`, `DropdownMenuContent`, `DropdownMenuSubContent`, `TooltipContent`/`Tooltip`, `HoverCardContent`, `ComboboxContent` and `NavigationMenuPositioner`; `SelectContent` does not accept it. `sticky?: boolean` (default `false`) keeps `PopoverContent`, `SelectContent`, `DropdownMenuContent`, `DropdownMenuSubContent`, `TooltipContent`/`Tooltip`, `HoverCardContent` and `ComboboxContent` in the viewport after the anchor scrolls out of view. Other positioner props (`collisionPadding`, `collisionBoundary`, `arrowPadding`, `collisionAvoidance`) are only exposed on `ComboboxContent`.
+- Interactive components are built on Base UI (`@base-ui/react`). Use `asChild` (Radix-style, single child element) for polymorphism; the child replaces the part's content. Not supported on `ScrollArea`, `ScrollBar`, `SelectContent`, `SelectItem`, `AccordionContent`, `Checkbox`, `Switch`, `RadioGroupItem`, `Progress`, `Slider`, `NavigationMenu`, `NumberFieldScrubArea`, `ComboboxInput`, `ComboboxClear`, `ComboboxChipsInput`, `AutocompleteInput`, `Meter`, `ToolbarInput`, `NumberField`, `NumberFieldInput` (their internal structure is required). Do not pass Base UI's `render` prop — it is not part of the public API. When `asChild` wraps a button-like part (triggers, closes, `TabsTrigger`, `AccordionTrigger`, `Toggle`, `SelectTrigger`, `AlertDialogAction`/`Cancel`) with a non-`<button>` child, also pass `nativeButton={false}` (not needed for `TooltipTrigger`/`HoverCardTrigger`). Change callbacks of Base UI-backed components (`onOpenChange`, `onValueChange`, `onCheckedChange`, …) receive `(value, eventDetails)`; `DateRangePicker`, `SidebarProvider` and `Stepper` callbacks don't.
+- Popups unmount when closed. `keepMounted?: boolean` (default `false`) keeps them mounted while hidden on `DialogContent`, `AlertDialogContent`, `DrawerContent`, `PopoverContent`, `DropdownMenuContent`, `DropdownMenuSubContent`, `TooltipContent`/`Tooltip`, `HoverCardContent`, `ComboboxContent`, `AutocompleteContent` and `NavigationMenuPositioner`; `SelectContent` does not accept it. `sticky?: boolean` (default `false`) keeps `PopoverContent`, `SelectContent`, `DropdownMenuContent`, `DropdownMenuSubContent`, `TooltipContent`/`Tooltip`, `HoverCardContent`, `ComboboxContent` and `AutocompleteContent` in the viewport after the anchor scrolls out of view. Other positioner props (`collisionPadding`, `collisionBoundary`, `arrowPadding`, `collisionAvoidance`) are only exposed on `ComboboxContent` and `AutocompleteContent`.
 - For Vite apps, `@tailwindcss/vite` (registered in `vite.config.ts`, no `postcss.config.mjs`) is a valid alternative to PostCSS; prefer it when the project uses isolated installs (pnpm, Bun workspaces). See `references/package-guide.md`.
 - For tooltip-heavy apps, wrap the app with `TooltipProvider` (`delay`, not `delayDuration`); use `Tooltip label={...}` for common trigger/content usage (it accepts `delay`/`closeDelay`) and `TooltipRoot` only when manual composition is needed.
 - Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
 - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
 - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
-- For form fields, `Field` automatically shares a generated control id with `FieldLabel` and labelable controls when explicit ids are omitted; pass explicit matching `htmlFor` and `id` only when a stable custom id is required. Use one control per `Field` (a `RadioGroup` counts as one control); for several checkboxes/switches use `FieldSet` + `FieldLegend` with one `Field` each. Mark errors with `<Field invalid>` (not `aria-invalid` on each control): it colors the label and propagates `aria-invalid` to the control; `Checkbox`/`Switch`/`RadioGroup` get the attribute but no red style.
+- For form fields, `Field` automatically shares a generated control id with `FieldLabel` and labelable controls when explicit ids are omitted; pass explicit matching `htmlFor` and `id` only when a stable custom id is required. Use one control per `Field` (a `RadioGroup` or `CheckboxGroup` counts as one control); for several checkboxes use a `CheckboxGroup` (it also provides "select all" via a `parent` checkbox), and for several switches use `FieldSet` + `FieldLegend` with one `Field` each. Mark errors with `<Field invalid>` (not `aria-invalid` on each control): it colors the label and propagates `aria-invalid` to the control; `Checkbox`/`Switch`/`RadioGroup`/`CheckboxGroup` get the attribute but no red style.
 - For client-side tabular data, use `DataTable` from `@uselets/ui/data-table`. Defaults are bare: `enableRowSelection`, `enableSorting`, and `showPagination` are all `false`. Set `enableRowSelection` to auto-prepend the selection checkbox column (no need to add `createDataTableSelectColumn` manually); set `enableSorting` to make `DataTableColumnHeader` clickable for sort. `filterColumns` accepts a single id or an array; with 2+ ids the toolbar renders an `InputGroup` with a column selector on the left. `toolbarActions` always sits at the right of the toolbar. All labels default to pt-BR; override any subset through `labels` (`Partial<DataTableLabels>`), with full defaults exposed as `defaultDataTableLabels`. Use `variant` on `DataTable` (or directly on the base `Table`) to switch chrome: `"line"` (default) renders only horizontal separators between rows; `"outline"` adds a rounded outer border around the table. The base `Table` from `@uselets/ui/table` renders only the `<table>` element and is striped by default (pass `striped={false}` to disable). Wrap it in `TableContainer` to control scroll; `minWidth` lives on `TableContainer`. Combine `stickyHeader` on `Table` with `max-h` + `overflow-y-auto` on the `TableContainer` to keep the `<thead>` visible during vertical scroll. `DataTable` wraps its `Table` in `TableContainer` automatically.
 
 ## Quick Routing

package/skills/uselets-ui/references/component-catalog.md

@@ -115,11 +115,17 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Notes: action button with `solid`, `secondary`, `outline`, `subtle`, `ghost`, and `link` variants, `color: UIColor` (`primary` default), sizes from `xs` through `xl` plus icon sizes through `icon-xl`, and `loading`
 - `button-group`
   - Exports: `ButtonGroup`, `ButtonGroupSeparator`, `ButtonGroupText`, `buttonGroupVariants`
+- `toolbar`
+  - Exports: `Toolbar`, `ToolbarButton`, `ToolbarGroup`, `ToolbarInput`, `ToolbarLink`, `ToolbarSeparator`
+  - Notes: action bar (`role="toolbar"`) that is one tab stop; arrow keys move focus between its controls. Always pass `aria-label`. No background/border of its own (wrap in `Card` or a container). `Toolbar` props: `orientation: 'horizontal' | 'vertical'` (default `horizontal`), `loopFocus` (default `true`), `disabled`. `ToolbarButton` renders `Button`: `variant` (default `ghost`), `size` (default `sm`), `color: UIColor`, `loading`; disabled buttons stay focusable (`focusableWhenDisabled`, default `true`). To open a menu/popover: `<DropdownMenuTrigger asChild><ToolbarButton>…</ToolbarButton></DropdownMenuTrigger>`. `ToolbarSeparator` takes the opposite orientation automatically. `ToolbarInput` renders `Input` (no `asChild`). Use for action bars (bulk actions, filters, editors), not navigation (`Tabs`/`NavigationMenu`)
 - `empty`
   - Exports: `Empty`, `EmptyContent`, `EmptyDescription`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`
 - `progress`
   - Exports: `Progress`, `progressVariants`
   - Notes: linear progress bar driven by a single `value` (0–100); `size: 'sm' | 'md' | 'lg'` (default: `md`) controls bar height and `color: UIColor` (default: `primary`) controls the indicator; omitting `value` (or passing `null`) renders the indeterminate state
+- `meter`
+  - Exports: `Meter`, `meterVariants`
+  - Notes: linear bar for a static measurement within a range (usage, capacity, share of a total) with `role="meter"`; use `Progress` for task completion. `value` required; `min`/`max` (default `0`/`100`); `label?: React.ReactNode` renders above the bar and names it (without it, pass `aria-label`); `showValue?: boolean` (default `false`) prints the formatted value at the end of the label row, formatted with `format?: Intl.NumberFormatOptions` and `locale`. `size: 'sm' | 'md' | 'lg'` (default `md`) and `color: UIColor` (default `primary`) match `Progress`; `className` targets the bar. No `asChild`
 - `ring-progress`
   - Exports: `RingProgress`, `ringProgressVariants`
   - Notes: circular progress indicator driven by a single `value` (0–100); `size: 'sm' | 'md' | 'lg'` (default: `md`, `32/40/48px`), `thickness: 'thin' | 'md' | 'thick'` (default: `md`), and `color: UIColor` (default: `primary`); normalized `viewBox` means the size can also be set via `className` (e.g. `size-5`); rounded line caps
@@ -133,8 +139,8 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 
 - `field`
   - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`, `useFieldControlId`, `useFieldInvalid`, `useFieldLabelId`
-  - Notes: form layout and validation helpers; `Field` automatically provides a generated control id to `FieldLabel` and labelable descendants when explicit ids are omitted. One control per `Field`: a `RadioGroup` placed directly in a `Field` takes the `FieldLabel` as its group label (`aria-labelledby`) and its items keep their own ids; never put several `Checkbox`/`Switch` controls in one `Field` (they would share the control id) — use `FieldSet` + `FieldLegend` with one `Field` per control. `useFieldLabelId()` returns the current `FieldLabel` id (or `undefined` outside a `Field`) for custom group controls
-  - Invalid state: `Field.invalid?: boolean` (or legacy `data-invalid="true"`; `invalid` wins when both are set) renders `data-invalid="true"` (label/description turn destructive) and sets `aria-invalid` on the control inside. Styled red: `Input` (incl. `InputGroupInput`, `PhoneInput`), `Textarea`, `NativeSelect`, `SelectTrigger`, `ComboboxInput`, `ComboboxChipsInput`, `InputOTP` (+ slots), `NumberField`. `aria-invalid` only, no red style: `Checkbox`, `Switch`, `RadioGroup` (on the group). Not propagated: `Slider`, `DatePicker`/`DateRangePicker` triggers. A control's own `aria-invalid` (including `false`) overrides the `Field`. Do: `<Field invalid><FieldLabel/><Input/><FieldError/></Field>`. Don't: repeat `aria-invalid` on every control inside an invalid `Field`. Custom controls: `const invalid = useFieldInvalid(props['aria-invalid'])` → `aria-invalid={invalid}` (returns `undefined` outside a `Field`)
+  - Notes: form layout and validation helpers; `Field` automatically provides a generated control id to `FieldLabel` and labelable descendants when explicit ids are omitted. One control per `Field`: a `RadioGroup` placed directly in a `Field` takes the `FieldLabel` as its group label (`aria-labelledby`) and its items keep their own ids; a `CheckboxGroup` placed directly in a `Field` behaves the same way; never put several loose `Checkbox`/`Switch` controls in one `Field` (they would share the control id) — wrap checkboxes in a `CheckboxGroup`, or use `FieldSet` + `FieldLegend` with one `Field` per control. `useFieldLabelId()` returns the current `FieldLabel` id (or `undefined` outside a `Field`) for custom group controls
+  - Invalid state: `Field.invalid?: boolean` (or legacy `data-invalid="true"`; `invalid` wins when both are set) renders `data-invalid="true"` (label/description turn destructive) and sets `aria-invalid` on the control inside. Styled red: `Input` (incl. `InputGroupInput`, `PhoneInput`), `Textarea`, `NativeSelect`, `SelectTrigger`, `ComboboxInput`, `ComboboxChipsInput`, `AutocompleteInput`, `InputOTP` (+ slots), `NumberField`. `aria-invalid` only, no red style: `Checkbox`, `Switch`, `RadioGroup` and `CheckboxGroup` (on the group). Not propagated: `Slider`, `DatePicker`/`DateRangePicker` triggers. A control's own `aria-invalid` (including `false`) overrides the `Field`. Do: `<Field invalid><FieldLabel/><Input/><FieldError/></Field>`. Don't: repeat `aria-invalid` on every control inside an invalid `Field`. Custom controls: `const invalid = useFieldInvalid(props['aria-invalid'])` → `aria-invalid={invalid}` (returns `undefined` outside a `Field`)
 - `grid`
   - Exports: `Grid`, `GridItem`
   - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; spacing values `xs` to `xl` map to `4/8/16/24/32px`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
@@ -165,6 +171,9 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `checkbox`
   - Exports: `Checkbox`
   - Notes: supports `size: 'sm' | 'md' | 'lg'`, `color: UIColor` (default `primary`), `indeterminate?: boolean` for the mixed state (use it alongside a boolean `checked`; `checked="indeterminate"` is not supported), `label?: React.ReactNode`, `labelProps`, and automatic `id`/`htmlFor` wiring when a label is provided without an explicit `id`; composed label text follows checkbox size (`sm` 12px, `md` 14px, `lg` 18px); `description?: React.ReactNode` + `descriptionProps` render muted helper text (a `<p>`) below the label, linked via `aria-describedby`; description text is `sm` 12px, `md` 12px, `lg` 14px
+- `checkbox-group`
+  - Exports: `CheckboxGroup`
+  - Notes: shares one `string[]` value between child `Checkbox`es; each child needs `value`. `value`/`defaultValue`/`onValueChange(value: string[], eventDetails)`. Select all: pass every value in `allValues` and add `<Checkbox parent label="…" />` (no `value`); it checks/unchecks all and shows the mixed state automatically (don't compute `indeterminate` yourself). `orientation: 'vertical' | 'horizontal'` (default `vertical`; horizontal wraps in a row). `color: UIColor` (default `primary`) applies to every child; a child's own `color` wins. `disabled` disables all. Inside a `Field`, the group is labelled by `FieldLabel` (`aria-labelledby`), gets `aria-invalid` from an invalid `Field`, and each checkbox keeps its own id. Supports `asChild`
 - `switch`
   - Exports: `Switch`
   - Notes: supports `size: 'sm' | 'md' | 'lg'`, `color: UIColor` (default `green`), `label?: React.ReactNode`, `labelProps`, and automatic `id`/`htmlFor` wiring when a label is provided without an explicit `id`; `color` controls the checked track and indicator color only; track size is `sm` 30x14px, `md` 34x16px, and `lg` 42x20px (control heights match `Checkbox`); the thumb and internal indicator scale with the switch; composed label text follows switch size (`sm` 12px, `md` 14px, `lg` 18px (same as `Checkbox` and `RadioGroupItem`)); `description?: React.ReactNode` + `descriptionProps` render muted helper text (a `<p>`) below the label, linked via `aria-describedby`; description text is `sm` 12px, `md` 12px, `lg` 14px
@@ -179,6 +188,9 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `combobox`
   - Exports: `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxClear`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor`
   - Notes: `ComboboxInput` supports `icon?: React.ReactNode`, `triggerIcon?: React.ReactNode`, `showTrigger?: boolean`, and `showClear?: boolean`; `ComboboxChips` supports `showClear?: boolean` to render a button that clears all selected chips at once; `ComboboxContent` supports `container` for rendering inside overlays such as dialogs, and forwards the underlying Base UI Positioner's public props (`side`, `align`, `sideOffset`, `alignOffset`, `anchor`, `positionMethod` (default `'absolute'`), `collisionBoundary`, `collisionPadding`, `sticky`, `arrowPadding`, `disableAnchorTracking`, `collisionAvoidance`)
+- `autocomplete`
+  - Exports: `Autocomplete`, `AutocompleteInput`, `AutocompleteContent`, `AutocompleteList`, `AutocompleteItem`, `AutocompleteGroup`, `AutocompleteLabel`, `AutocompleteCollection`, `AutocompleteEmpty`, `AutocompleteStatus`, `AutocompleteSeparator`, `useAutocompleteFilter`
+  - Notes: free-text input with suggestions; the value is the input text (`value`/`defaultValue`/`onValueChange(value: string, eventDetails)`), so any text is valid. Use `Combobox` when the value must be one of the options. Pass suggestions in `items` and render with `AutocompleteCollection`; for object items set `itemToStringValue` so picking fills the input. Server suggestions: `filter={null}`, update `items` from the request, render loading/count text in `AutocompleteStatus` (live region). `AutocompleteInput` props: `icon`, `showClear` (default `false`), `showTrigger` (default `false`, unlike `ComboboxInput`), `triggerIcon`; no `asChild`. `AutocompleteContent` has the same positioner/portal props and defaults as `ComboboxContent` (`side` `bottom`, `align` `start`, `sideOffset` `6`, `container`, `keepMounted`, `sticky`, …). Root props include `mode` (`list` default, `both`, `inline`, `none`), `autoHighlight`, `openOnInputClick` (default `false`), `limit`, `submitOnItemClick`. `useAutocompleteFilter()` returns locale-aware `contains`/`startsWith`/`endsWith` matchers for a custom `filter`. Inside a `Field` it takes the control id and turns red when invalid
 - `dropzone`
   - Exports: `Dropzone`, `DropzoneArea`, `DropzoneDescription`, `DropzoneFileList`, `DropzoneFileListItem`, `DropzoneFileMessage`, `DropzoneMessage`, `DropzoneRemoveFile`, `DropzoneRetryFile`, `DropzoneTrigger`, `InfiniteProgress`, `useDropzone`
   - Notes: upload composition with validation, retry handling, status list UI, and optional `shiftOnMaxFiles`

package/skills/uselets-ui/references/package-guide.md

@@ -287,7 +287,7 @@ The package stylesheet exposes these palette families:
 - `pink`
 - `green`
 
-The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `RadioGroupItem`, and `Switch` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
+The same palette family names are exported as `uiColors` and `UIColor`. `Button`, `Toggle`, `Checkbox`, `CheckboxGroup`, `RadioGroupItem`, `Switch`, `Progress`, and `Meter` use `UIColor` for color props. `ButtonColor` remains available as a compatibility alias, but new public APIs should use `UIColor`.
 
 Each palette family is exposed in four layers:
 
@@ -465,9 +465,9 @@ A full working example lives in `apps/web/src/stories/data-table-virtualized.sto
 Choose components by intent:
 
 - actions and status:
-  - `Button`, `Badge`, `Alert`, `Progress`, `Skeleton`, `Spinner`, `toast`
+  - `Button`, `Badge`, `Alert`, `Progress`, `Meter`, `Skeleton`, `Spinner`, `toast`
 - forms and inputs:
-  - `Field`, `Input`, `Textarea`, `Checkbox`, `Switch`, `RadioGroup`, `Select`, `NativeSelect`, `Combobox`, `Dropzone`, `InputGroup`, `InputOTP`, `Slider`, `DateRangePicker`
+  - `Field`, `Input`, `Textarea`, `Checkbox`, `CheckboxGroup`, `Switch`, `RadioGroup`, `Select`, `NativeSelect`, `Combobox`, `Autocomplete`, `Dropzone`, `InputGroup`, `InputOTP`, `Slider`, `DateRangePicker`
 - overlays and floating UI:
   - `Dialog`, `Drawer`, `Popover`, `Tooltip`, `HoverCard`, `AlertDialog`
 - navigation: