@fabio.caffarello/react-design-system 3.13.0 → 4.0.0

package/dist/ui/components/Autocomplete/AutocompleteList.d.ts

@@ -10,6 +10,10 @@ export interface AutocompleteListProps {
     allSelected?: boolean;
     onSelectAll?: () => void;
     onDeselectAll?: () => void;
+    /** listbox id; option ids are derived as `${id}-option-${index}`. */
+    id?: string;
+    /** Multi-select: values currently selected, to drive aria-selected. */
+    selectedValues?: string[];
     /**
      * Accessible name for the listbox. axe `aria-input-field-name`
      * (serious) flags a `role="listbox"` portal without `aria-label` /

package/dist/ui/components/Autocomplete/AutocompleteOption.d.ts

@@ -10,6 +10,14 @@ export interface AutocompleteOptionProps {
     option: AutocompleteOptionType;
     isHighlighted: boolean;
     onSelect: (option: AutocompleteOptionType) => void;
+    /** Stable id so the combobox input can point aria-activedescendant here. */
+    id?: string;
+    /**
+     * Selection state for multi-select usage. When provided it drives
+     * aria-selected; otherwise aria-selected reflects the highlight (the
+     * single-select activedescendant model).
+     */
+    selected?: boolean;
 }
 /**
  * AutocompleteOption Component

package/dist/ui/components/Breadcrumb/Breadcrumb.d.ts

@@ -11,7 +11,6 @@ interface Props extends HTMLAttributes<HTMLElement> {
  * Breadcrumb Component
  *
  * A breadcrumb navigation component for hierarchical navigation.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/ColorPicker/ColorPicker.d.ts

@@ -15,7 +15,6 @@ export interface ColorPickerProps {
  *
  * A color picker component for selecting colors.
  * Supports hex, rgb, and hsl formats with presets.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/CommandPalette/CommandPalette.d.ts

@@ -22,7 +22,6 @@ export interface CommandPaletteProps {
  *
  * A command palette component for quick command search and execution.
  * Supports keyboard navigation, grouping, and filtering.
- * Follows Atomic Design principles as an Organism component.
  *
  * @example
  * ```tsx

package/dist/ui/components/DataGrid/DataGrid.d.ts

@@ -91,7 +91,6 @@ export interface DataGridProps<T extends Record<string, unknown> = Record<string
  *
  * An advanced data grid component with sorting, filtering, grouping, column management, and export.
  * Extends the Table component with additional enterprise features.
- * Follows Atomic Design principles as an Organism component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Dialog/DialogContent.d.ts

@@ -4,5 +4,24 @@ export interface DialogContentProps extends Omit<HTMLAttributes<HTMLDivElement>,
     size?: "sm" | "md" | "lg" | "xl" | "fullscreen";
     closeOnOverlayClick?: boolean;
     closeOnEscape?: boolean;
+    /**
+     * Render the built-in close (✕) button in the top-right corner.
+     *
+     * Defaults to `true`, matching `Modal` and the house overlay
+     * convention (`Drawer` / `Popover` expose the same prop). Set `false`
+     * for **non-dismissable** dialogs where the consumer owns dismissal —
+     * LGPD consent gates, destructive confirmations with escalating
+     * friction, or guided wizards where a stray ✕ would abandon the flow.
+     *
+     * When `true`, do NOT also place an explicit `<Dialog.Close />` inside
+     * the content: that compound is for *custom placement* (e.g. a close
+     * affordance inside the footer) and would render a duplicate ✕. Use
+     * one or the other.
+     *
+     * Suppressing the ✕ only removes the button — ESC and overlay-click
+     * still close. For a fully non-dismissable dialog, pair this with
+     * `closeOnEscape={false}` and `closeOnOverlayClick={false}`.
+     */
+    showCloseButton?: boolean;
 }
-export declare function DialogContent({ children, size, closeOnOverlayClick, closeOnEscape, className, ...props }: DialogContentProps): import("react").JSX.Element | null;
+export declare function DialogContent({ children, size, closeOnOverlayClick, closeOnEscape, showCloseButton, className, ...props }: DialogContentProps): import("react").JSX.Element | null;

package/dist/ui/components/Drawer/Drawer.d.ts

@@ -17,7 +17,6 @@ export interface DrawerProps {
  * Drawer Component
  *
  * A side drawer component that slides in from different positions.
- * Follows Atomic Design principles as an Atom component.
  * Uses Compound Component pattern.
  *
  * @example

package/dist/ui/components/Dropdown/Dropdown.d.ts

@@ -17,7 +17,6 @@ export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
  * Dropdown Component
  *
  * A dropdown menu component for displaying actions and options.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/EmptyState/EmptyState.d.ts

@@ -11,7 +11,6 @@ export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
  * EmptyState Component
  *
  * A component for displaying empty states when there's no content to show.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/FileUpload/FileUpload.d.ts

@@ -23,7 +23,6 @@ export interface FileUploadProps {
  * FileUpload Component
  *
  * A file upload component with drag and drop, preview, validation, and progress.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Form/FormField.d.ts

@@ -6,6 +6,13 @@ export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues>
     label?: string;
     children: (props: {
         name: string;
+        /**
+         * Stable id owned by FormField — equal to `name` and already wired to
+         * the label's `htmlFor`. Spread it onto the input so the label points
+         * at a real element (`<Input id={id} {...register(name)} />`) instead
+         * of relying on the consumer to remember to hardcode a matching id.
+         */
+        id: string;
         register: (fieldName: Path<TFieldValues>) => ReturnType<UseFormReturn<TFieldValues>["register"]>;
         error?: string;
         value?: unknown;

package/dist/ui/components/Header/Header.d.ts

@@ -4,7 +4,7 @@
  * Horizontal header component with logo, navigation, and actions slots.
  * Uses compound components pattern for maximum flexibility.
  *
- * @see EPIC-002: Header Component (Molecule)
+ * @see EPIC-002: Header Component
  * @see RFC-003: Header Composition Pattern (APPROVED)
  * @see ADR-002: Header + SideNavbar Compatibility (ACCEPTED)
  */

package/dist/ui/components/Header/components/HeaderActions.d.ts

@@ -3,7 +3,7 @@
  *
  * Actions slot component for Header (typically buttons, user menu, etc.).
  *
- * @see EPIC-002: Header Component (Molecule)
+ * @see EPIC-002: Header Component
  * @see RFC-003: Header Composition Pattern (APPROVED)
  */
 import { type ReactNode } from "react";

package/dist/ui/components/Header/components/HeaderHamburger.d.ts

@@ -3,7 +3,7 @@
  *
  * Hamburger button for toggling mobile menu.
  *
- * @see EPIC-002: Header Component (Molecule)
+ * @see EPIC-002: Header Component
  * @see TASK-027: Hamburger Button
  */
 import React from "react";

package/dist/ui/components/Header/components/HeaderLogo.d.ts

@@ -3,7 +3,7 @@
  *
  * Logo slot component for Header.
  *
- * @see EPIC-002: Header Component (Molecule)
+ * @see EPIC-002: Header Component
  * @see RFC-003: Header Composition Pattern (APPROVED)
  */
 import { type ReactNode } from "react";

package/dist/ui/components/Header/components/HeaderMobileMenu.d.ts

@@ -3,7 +3,7 @@
  *
  * Mobile menu drawer for Header navigation.
  *
- * @see EPIC-002: Header Component (Molecule)
+ * @see EPIC-002: Header Component
  * @see TASK-028: Mobile Menu (Drawer)
  */
 import React from "react";

package/dist/ui/components/Header/components/HeaderNavigation.d.ts

@@ -3,7 +3,7 @@
  *
  * Navigation slot component for Header.
  *
- * @see EPIC-002: Header Component (Molecule)
+ * @see EPIC-002: Header Component
  * @see RFC-003: Header Composition Pattern (APPROVED)
  */
 import { type ReactNode } from "react";

package/dist/ui/components/Header/contexts/HeaderContext.d.ts

@@ -4,7 +4,7 @@
  * Context for managing Header component state, particularly mobile menu state.
  *
  * @see ADR-002: Header + SideNavbar Compatibility (ACCEPTED)
- * @see EPIC-002: Header Component (Molecule)
+ * @see EPIC-002: Header Component
  * @see TASK-014: Implementar HeaderContext Completo
  */
 import { type ReactNode } from "react";

package/dist/ui/components/Menu/Menu.d.ts

@@ -15,7 +15,6 @@ export interface MenuProps {
  * Menu Component
  *
  * A dropdown menu component with keyboard navigation and portal rendering.
- * Follows Atomic Design principles as an Atom component.
  * Uses Compound Component pattern.
  *
  * @example

package/dist/ui/components/Modal/Modal.d.ts

@@ -12,7 +12,6 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
  * Modal Component
  *
  * A modal/dialog component with overlay, portal rendering, and accessibility.
- * Follows Atomic Design principles as an Organism component.
  *
  * @example
  * ```tsx
@@ -21,5 +20,5 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
  * </Modal>
  * ```
  */
-export default function Modal({ isOpen, onClose, title, children, variant, showCloseButton, footer, className, ...props }: Props): import("react").JSX.Element | null;
+export default function Modal({ isOpen, onClose, title, children, variant, showCloseButton, footer, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: Props): import("react").JSX.Element | null;
 export {};

package/dist/ui/components/Navigation/Navigation.d.ts

@@ -3,7 +3,7 @@
  *
  * Horizontal or vertical navigation component using NavLink internally.
  *
- * @see EPIC-003: Navigation Component (Molecule)
+ * @see EPIC-003: Navigation Component
  * @see RFC-005: Navigation Composition Pattern (APPROVED)
  */
 import type { NavigationProps } from "./types";

package/dist/ui/components/PageHeader/PageHeader.d.ts

@@ -3,7 +3,7 @@
  *
  * Page header component with title, description, breadcrumb, and actions.
  *
- * @see EPIC-004: PageHeader Component (Molecule)
+ * @see EPIC-004: PageHeader Component
  */
 import type { PageHeaderProps } from "./types";
 /**

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

@@ -11,7 +11,6 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
  * Pagination Component
  *
  * A pagination component for navigating through pages of data.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Popover/Popover.d.ts

@@ -20,7 +20,6 @@ export interface PopoverProps {
  *
  * A popover component that displays content in a floating panel.
  * Supports positioning, portal rendering, and keyboard navigation.
- * Follows Atomic Design principles as an Atom component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Rating/Rating.d.ts

@@ -21,7 +21,6 @@ export interface RatingProps {
  *
  * A rating component for displaying and selecting ratings.
  * Supports filled and outlined variants, half ratings, and read-only mode.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/SearchInput/SearchInput.d.ts

@@ -10,7 +10,6 @@ export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
  * SearchInput Component
  *
  * A search input component with icon, clear button, and loading state.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Stepper/Stepper.d.ts

@@ -24,7 +24,6 @@ export interface StepperProps {
  *
  * A multi-step wizard component for guided workflows.
  * Supports validation, navigation, and completion callbacks.
- * Follows Atomic Design principles as an Organism component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Table/TableActions/TableActions.d.ts

@@ -15,7 +15,6 @@ export interface TableActionsProps<T extends Record<string, unknown> = Record<st
  * TableActions Component
  *
  * Dropdown menu for row actions in tables.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Table/TableFilters/TableFilters.d.ts

@@ -21,7 +21,6 @@ export interface TableFiltersProps extends HTMLAttributes<HTMLDivElement> {
  * TableFilters Component
  *
  * Filter controls for tables with support for text, select, and date filters.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Table/TablePagination/TablePagination.d.ts

@@ -13,7 +13,6 @@ export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
  * TablePagination Component
  *
  * Pagination controls for tables with page navigation and page size selection.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/TimePicker/TimePicker.d.ts

@@ -15,7 +15,6 @@ export interface TimePickerProps {
  *
  * A time picker component for selecting time values.
  * Supports 12h and 24h formats.
- * Follows Atomic Design principles as a Molecule component.
  *
  * @example
  * ```tsx

package/dist/ui/components/Timeline/Timeline.d.ts

@@ -19,7 +19,6 @@ export interface TimelineProps {
  *
  * A timeline component for displaying events in chronological order.
  * Supports horizontal and vertical orientations.
- * Follows Atomic Design principles as an Organism component.
  *
  * @example
  * ```tsx

package/dist/ui/primitives/Checkbox/Checkbox.d.ts

@@ -18,7 +18,6 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * Checkbox Component
  *
  * A styled checkbox input component.
- * Follows Atomic Design principles as an Atom component.
  * Uses Composite Pattern when combined with Label and ErrorMessage.
  *
  * @example

package/dist/ui/primitives/Chip/Chip.d.ts

@@ -15,6 +15,21 @@ interface ChipStandardProps extends ChipBaseProps {
     asChild?: false;
     onRemove?: () => void;
     onClick?: () => void;
+    /**
+     * Optional count sub-badge rendered at the end of the chip (before the
+     * remove ✕, if any) — e.g. `Casa 12`, `Tramitando 340` in a filter bar.
+     *
+     * The sub-badge inverts with the chip surface so it always contrasts:
+     * a brand pill on neutral chips, a light pill on brand chips
+     * (`selected` / `variant="filled"`). The number is folded into the
+     * interactive chip's accessible name (`"Casa, 12"`) so AT users hear
+     * it; pass an explicit `aria-label` to override that phrasing.
+     *
+     * Forbidden in the `asChild` form (the consumer composes the node).
+     * `0` is a legitimate value and renders `0`; omit the prop for "no
+     * count".
+     */
+    count?: number;
 }
 /**
  * `asChild` collapses the chip into a single node provided by the
@@ -47,6 +62,12 @@ interface ChipAsChildProps extends ChipBaseProps {
      * form when removal is required.
      */
     onRemove?: never;
+    /**
+     * `count` is forbidden when `asChild` is true — the collapsed node is
+     * a single consumer element with no slot for the sub-badge. Render the
+     * count inside the child yourself, or use the standard form.
+     */
+    count?: never;
 }
 export type ChipProps = ChipStandardProps | ChipAsChildProps;
 declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ui/primitives/ErrorMessage/ErrorMessage.d.ts

@@ -7,7 +7,6 @@ export interface ErrorMessageProps extends HTMLAttributes<HTMLDivElement> {
  * ErrorMessage Component
  *
  * A component for displaying validation error messages.
- * Follows Atomic Design principles as an Atom component.
  *
  * @example
  * ```tsx

package/dist/ui/primitives/Input/Input.d.ts

@@ -18,7 +18,6 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * Input Component
  *
  * A styled text input component with label, error/success states, icons, and clear button.
- * Follows Atomic Design principles as an Atom component.
  * Uses Composite Pattern when combined with Label and ErrorMessage.
  *
  * @example

package/dist/ui/primitives/Label/Label.d.ts

@@ -7,7 +7,6 @@ interface Props extends LabelHTMLAttributes<HTMLLabelElement> {
  * Label Component
  *
  * A styled label component for form inputs.
- * Follows Atomic Design principles as an Atom component.
  *
  * @example
  * ```tsx

package/dist/ui/primitives/NavLink/NavLink.d.ts

@@ -3,7 +3,7 @@
  *
  * Navigation link component with active state detection and Next.js integration.
  *
- * @see EPIC-001: NavLink Component (Atom)
+ * @see EPIC-001: NavLink Component
  * @see RFC-001: NavLink Hook Strategy (APPROVED)
  * @see RFC-002: Next.js Integration Strategy (APPROVED)
  * @see ADR-001: Active State Detection (ACCEPTED)

package/dist/ui/primitives/Radio/Radio.d.ts

@@ -17,7 +17,6 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * Radio Component
  *
  * A styled radio input component.
- * Follows Atomic Design principles as an Atom component.
  * Uses Composite Pattern when combined with Label and ErrorMessage.
  *
  * @example

package/dist/ui/primitives/Select/Select.d.ts

@@ -23,7 +23,6 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
  * Select Component
  *
  * A styled select dropdown component for forms.
- * Follows Atomic Design principles as an Atom component.
  * Supports both flat options and option groups.
  *
  * @example

package/dist/ui/primitives/Skeleton/Skeleton.d.ts

@@ -9,7 +9,6 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * Skeleton Component
  *
  * A skeleton loader component for displaying loading states.
- * Follows Atomic Design principles as an Atom component.
  *
  * @example
  * ```tsx

package/dist/ui/primitives/Slider/Slider.d.ts

@@ -29,7 +29,6 @@ export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
  *
  * A range input component for selecting numeric values.
  * Supports single and dual thumb (range) modes.
- * Follows Atomic Design principles as an Atom component.
  *
  * @example
  * ```tsx

package/dist/ui/primitives/Switch/Switch.d.ts

@@ -24,7 +24,6 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * Switch Component
  *
  * A toggle switch component for on/off states.
- * Follows Atomic Design principles as an Atom component.
  *
  * @example
  * ```tsx

package/dist/ui/primitives/Tooltip/Tooltip.d.ts

@@ -15,7 +15,6 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
  * Tooltip Component
  *
  * A tooltip component for displaying additional information on hover.
- * Follows Atomic Design principles as an Atom component.
  *
  * @example
  * ```tsx

package/dist/ui/providers/DialogContext.d.ts

@@ -4,6 +4,14 @@ export interface DialogContextValue {
     onClose: () => void;
     titleId?: string;
     descriptionId?: string;
+    /** True while at least one Dialog.Title is mounted. */
+    hasTitle: boolean;
+    /** True while at least one Dialog.Description is mounted. */
+    hasDescription: boolean;
+    /** Register a mounted Title; returns an unregister cleanup. */
+    registerTitle: () => () => void;
+    /** Register a mounted Description; returns an unregister cleanup. */
+    registerDescription: () => () => void;
 }
 export declare const DialogContext: import("react").Context<DialogContextValue | undefined>;
 export declare function useDialogContext(): DialogContextValue;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "3.13.0",
+  "version": "4.0.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -62,7 +62,7 @@
     "lucide-react": "^0.552.0 || ^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "react-hook-form": "^7.78.0"
+    "react-hook-form": "^7.79.0"
   },
   "overrides": {
     "handlebars": "^4.7.9",
@@ -114,15 +114,15 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/bun": "^1.3.7",
+    "@types/bun": "^1.3.14",
     "@types/node": "^25.9.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.0.4",
+    "@vitejs/plugin-react": "^5.2.0",
     "@vitest/browser-playwright": "^4.1.8",
     "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.5.0",
-    "baseline-browser-mapping": "^2.10.34",
+    "baseline-browser-mapping": "^2.10.37",
     "culori": "^4.0.2",
     "dependency-cruiser": "^17.3.6",
     "eslint": "^10.4.1",
@@ -135,10 +135,10 @@
     "lint-staged": "^16.2.7",
     "lucide-react": "^1.17.0",
     "madge": "^8.0.0",
-    "plop": "^4.0.4",
+    "plop": "^4.0.5",
     "postcss": "^8.5.6",
     "prettier": "^3.8.3",
-    "react-hook-form": "^7.78.0",
+    "react-hook-form": "^7.79.0",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.4.2",
     "storybook-addon-performance": "^0.17.3",