@agregio-solutions/design-system 1.90.1 → 1.92.0

package/dist/public_docs/components.md

@@ -0,0 +1,68 @@
+---
+title: Exhaustive list of all the Design System Components and their props
+---
+
+# Exhaustive list of all the Design System Components and their props
+
+- [Accordion](node_modules/@agregio-solutions/design-system/dist/packages/components/Accordion/doc.md) : A collapsible disclosure panel with a titled header (optional left/right slots, description, and nature-based background) — use it to progressively reveal secondary content that would otherwise clutter the page, letting users expand sections only when needed.
+- [Badge](node_modules/@agregio-solutions/design-system/dist/packages/components/Badge/doc.md) : A small notification indicator displaying a numeric value or dot badge on an element, optionally with a maximum value threshold — use it to draw attention to counts, unread messages, or status indicators.
+- [Breadcrumbs](node_modules/@agregio-solutions/design-system/dist/packages/components/Breadcrumbs/doc.md) : A hierarchical navigation path showing the current location in a site structure with collapsible middle items for long paths — use it to help users understand where they are and navigate back to parent sections.
+- [Button](node_modules/@agregio-solutions/design-system/dist/packages/components/Button/doc.md) : An interactive clickable element supporting multiple modes (primary, secondary, tertiary), sizes, and optional icons/badges — use it for form submissions, actions, navigation, or triggering dialogs.
+- [Calendar](node_modules/@agregio-solutions/design-system/dist/packages/components/Calendar/doc.md) : A date picker supporting single selection, date ranges, or multiple selections with customizable constraints and cell rendering — use it to let users visually select one or more dates within an optional date range.
+- [ChartLegend](node_modules/@agregio-solutions/design-system/dist/packages/components/ChartLegend/doc.md) : A labeled color bullet (circle, square, or custom shape) optionally clickable to toggle chart series — use it to identify and optionally filter data series in charts.
+- [ChartTooltip](node_modules/@agregio-solutions/design-system/dist/packages/components/ChartTooltip/doc.md) : A structured tooltip with title, colored legend items, optional body section, and footer slot for displaying chart data details — use it to show detailed context when hovering over chart elements.
+- [Checkbox](node_modules/@agregio-solutions/design-system/dist/packages/components/Checkbox/doc.md) : A single checkbox input with optional label, supporting indeterminate state and form submissions — use it for binary on/off selections or as part of a CheckboxGroup for multiple options.
+- [CheckboxGroup](node_modules/@agregio-solutions/design-system/dist/packages/components/CheckboxGroup/doc.md) : A container managing multiple checkbox inputs as a controlled group with selection synchronization — use it when you need to track which checkboxes are selected as a unified value.
+- [Chip](node_modules/@agregio-solutions/design-system/dist/packages/components/Chip/doc.md) : A compact dismissible tag displaying text with optional size variants and close button — use it to display selectable or removable items in a compact format.
+- [Combobox](node_modules/@agregio-solutions/design-system/dist/packages/components/Combobox/doc.md) : A searchable dropdown with optional label, helper text, single or multiple selection modes, and automatic filtering — use it for large lists where users need to search for and select one or more values.
+- [DataTable](node_modules/@agregio-solutions/design-system/dist/packages/components/DataTable/doc.md) : A tabular component powered by react-table with pagination, optional row expansion, and filtering integration — use it to display, sort, filter, and paginate structured data sets.
+- [DatePicker](node_modules/@agregio-solutions/design-system/dist/packages/components/DatePicker/doc.md) : A date input field with an optional popover calendar, timezone support, and time granularity options — use it to let users select a single date or date-time with optional time zone awareness.
+- [DateRangePicker](node_modules/@agregio-solutions/design-system/dist/packages/components/DateRangePicker/doc.md) : A range date picker with two segmented date inputs and a popover calendar for selecting start and end dates — use it to let users select a contiguous date range with optional time support.
+- [Drawer](node_modules/@agregio-solutions/design-system/dist/packages/components/Drawer/doc.md) : A side panel sliding in from the edge with a title, optional actions footer, and dismissible overlay — use it for secondary tasks or detailed forms that don't require a full modal width.
+- [Dropdown](node_modules/@agregio-solutions/design-system/dist/packages/components/Dropdown/doc.md) : A low-level menu container for displaying a list of items with optional tall variant — use it as a building block for Menu or Select components to display options.
+- [EmptyState](node_modules/@agregio-solutions/design-system/dist/packages/components/EmptyState/doc.md) : A centered placeholder with optional icon, title, description, and action buttons for vacant content areas — use it to guide users when a list, table, or section has no data.
+- [ErrorBoundary](node_modules/@agregio-solutions/design-system/dist/packages/components/ErrorBoundary/doc.md) : A React component wrapper that catches JavaScript errors in child components and displays an error fallback — use it to prevent child component errors from crashing the entire application.
+- [FileUpload](node_modules/@agregio-solutions/design-system/dist/packages/components/FileUpload/doc.md) : A drag-and-drop file input with optional multi-file support, file type validation, and file list display — use it to let users upload single or multiple files with visual feedback.
+- [Filter](node_modules/@agregio-solutions/design-system/dist/packages/components/Filter/doc.md) : A toolbar with search input, action buttons, and a drawer for column-based filters with automatic chip display — use it to provide global search and column-level filtering UI for tables.
+- [FormGroupHelper](node_modules/@agregio-solutions/design-system/dist/packages/components/FormGroupHelper/doc.md) : A helper text or description display component for form fields with icon support and nature-based styling — use it to show validation errors, hints, or success messages below form inputs.
+- [FormGroupWrapper](node_modules/@agregio-solutions/design-system/dist/packages/components/FormGroupWrapper/doc.md) : A container component wrapping form fields with integrated label, helper text, description, and nature-based styling — use it to standardize form field layout and validation state presentation.
+- [Header](node_modules/@agregio-solutions/design-system/dist/packages/components/Header/doc.md) : A page header with title, optional breadcrumbs, subtitle, tags, helper/notification icons, and bottom tab slot — use it to establish page context, provide navigation breadcrumbs, and display page-level actions.
+- [I18nProvider](node_modules/@agregio-solutions/design-system/dist/packages/components/I18nProvider/doc.md) : A provider component that sets up internationalization context for the design system using language strings — use it at the root of your app to enable multi-language support.
+- [Icon](node_modules/@agregio-solutions/design-system/dist/packages/components/Icon/doc.md) : A component rendering named SVG icons from the design system's icon library with style and class support — use it to include semantic or decorative icons throughout your UI.
+- [Label](node_modules/@agregio-solutions/design-system/dist/packages/components/Label/doc.md) : A form label component with optional required asterisk, right-aligned icon with tooltip, and className support — use it to associate text labels with form inputs for accessibility and layout.
+- [LinearProgressBar](node_modules/@agregio-solutions/design-system/dist/packages/components/LinearProgressBar/doc.md) : A horizontal progress indicator showing a percentage with optional title, description, and status icon — use it to visualize progress toward completion or status of an operation.
+- [Link](node_modules/@agregio-solutions/design-system/dist/packages/components/Link/doc.md) : A navigation link element supporting color variants, optional link icon, and router integration — use it for in-app navigation or external links with consistent styling.
+- [List](node_modules/@agregio-solutions/design-system/dist/packages/components/List/doc.md) : A grouped list component with optional headers, item icons, tags, actions, and empty state handling — use it to display structured collections of related items with optional interactions.
+- [Loader](node_modules/@agregio-solutions/design-system/dist/packages/components/Loader/doc.md) : A spinning loader animation in small, medium, or large sizes — use it to indicate loading or processing state during async operations.
+- [Menu](node_modules/@agregio-solutions/design-system/dist/packages/components/Menu/doc.md) : A button-triggered dropdown menu with customizable positioning and optional tall variant — use it for action menus tied to a button trigger.
+- [MenuItem](node_modules/@agregio-solutions/design-system/dist/packages/components/MenuItem/doc.md) : A menu option within a Menu component supporting icons, href navigation, and disabled state — use it as a child of Menu to define individual selectable actions.
+- [Message](node_modules/@agregio-solutions/design-system/dist/packages/components/Message/doc.md) : An alert container displaying a message with optional title, colored nature, action buttons, and close button — use it to communicate important information, warnings, or errors to users.
+- [Modal](node_modules/@agregio-solutions/design-system/dist/packages/components/Modal/doc.md) : A centered dialog overlay with customizable width, title, and optional dismissible behavior — use it for focused tasks or important confirmations that need full user attention.
+- [Navigation](node_modules/@agregio-solutions/design-system/dist/packages/components/Navigation/doc.md) : A collapsible sidebar navigation with logo, collapsible items with nested sub-links, and footer actions — use it as the main navigation sidebar for app layouts.
+- [NavigationItem](node_modules/@agregio-solutions/design-system/dist/packages/components/NavigationItem/doc.md) : A navigation link or dropdown item within Navigation with icon, label, sub-links, and active state — use it to define navigation options in the Navigation component.
+- [NotificationCard](node_modules/@agregio-solutions/design-system/dist/packages/components/NotificationCard/doc.md) : A notification item displaying title, description, timestamp, optional avatar/icon, and action menu — use it as a child of Notifications to show individual notification entries.
+- [Notifications](node_modules/@agregio-solutions/design-system/dist/packages/components/Notifications/doc.md) : A popover panel triggered by a button showing notification cards with count badge and footer actions — use it to display a notification center or message inbox.
+- [NumberField](node_modules/@agregio-solutions/design-system/dist/packages/components/NumberField/doc.md) : A numeric input field with optional stepper buttons, formatting options, and display-only variant — use it for controlled numeric value input with increment/decrement controls.
+- [PageLayout](node_modules/@agregio-solutions/design-system/dist/packages/components/PageLayout/doc.md) : A two-column layout wrapper combining collapsible Navigation and main content area — use it as the root structure for pages with sidebar navigation.
+- [Pagination](node_modules/@agregio-solutions/design-system/dist/packages/components/Pagination/doc.md) : A pagination control with items-per-page selector, page range display, and navigation buttons — use it to paginate large tables or lists with user-controlled page size.
+- [Popover](node_modules/@agregio-solutions/design-system/dist/packages/components/Popover/doc.md) : A positioned overlay panel with title, close button, optional arrow, and dismissible behavior — use it to display supplementary content near a trigger element.
+- [Radio](node_modules/@agregio-solutions/design-system/dist/packages/components/Radio/doc.md) : A single radio button input with optional label positioned left or right — use it as part of a radio group for mutually exclusive single-selection options.
+- [RouterProvider](node_modules/@agregio-solutions/design-system/dist/packages/components/RouterProvider/doc.md) : A provider component configuring client-side router behavior for links and navigation — use it at the app root to integrate your router with design system link components.
+- [SearchBar](node_modules/@agregio-solutions/design-system/dist/packages/components/SearchBar/doc.md) : A full-screen search modal with keyboard shortcut support (Cmd+K), results count, and legend — use it to provide a prominent search interface with keyboard accessibility.
+- [SegmentedControl](node_modules/@agregio-solutions/design-system/dist/packages/components/SegmentedControl/doc.md) : A tab-like toggle button group with single or multiple selection modes and optional label — use it as a lightweight alternative to tabs for switching between related content views.
+- [Select](node_modules/@agregio-solutions/design-system/dist/packages/components/Select/doc.md) : A dropdown selector supporting single or multiple selection with optional label, helper text, and filtering — use it to let users choose one or more values from a list.
+- [SelectItem](node_modules/@agregio-solutions/design-system/dist/packages/components/SelectItem/doc.md) : A list item option within Select, Combobox, or other selection components with icons and href support — use it as a child to define individual selectable options.
+- [Skeleton](node_modules/@agregio-solutions/design-system/dist/packages/components/Skeleton/doc.md) : A placeholder shimmer component in text, rectangular, circular, or rounded variants — use it to represent content loading skeletons while data is being fetched.
+- [Slider](node_modules/@agregio-solutions/design-system/dist/packages/components/Slider/doc.md) : A range or single-value slider with optional input boxes, track dots, and validation feedback — use it for selecting numeric ranges or single values with visual interaction.
+- [Stepper](node_modules/@agregio-solutions/design-system/dist/packages/components/Stepper/doc.md) : A horizontal or vertical step indicator showing progress through a multi-step process — use it to display the current step in a wizard or multi-step form flow.
+- [Switch](node_modules/@agregio-solutions/design-system/dist/packages/components/Switch/doc.md) : A toggle switch input with optional label and customizable size — use it for binary on/off state selections in forms or settings.
+- [Tabs](node_modules/@agregio-solutions/design-system/dist/packages/components/Tabs/doc.md) : A tabbed interface with tab list and panels for organizing content into selectable sections — use it to group related content into separate panels accessed by clicking tabs.
+- [Tag](node_modules/@agregio-solutions/design-system/dist/packages/components/Tag/doc.md) : A small colored label with optional left icon, supporting different nature/semantic colors — use it to categorize, label, or mark content with semantic meaning.
+- [TextInput](node_modules/@agregio-solutions/design-system/dist/packages/components/TextInput/doc.md) : A text input field (or textarea) with optional label, icon, character counter, and helper text — use it for single-line or multi-line text entry with validation feedback.
+- [TimeField](node_modules/@agregio-solutions/design-system/dist/packages/components/TimeField/doc.md) : A time input field with segmented controls for hours/minutes/seconds and optional 12/24 format — use it to let users input or edit a specific time of day.
+- [Timeline](node_modules/@agregio-solutions/design-system/dist/packages/components/Timeline/doc.md) : A horizontal or vertical timeline displaying blocks representing events or periods on a time axis — use it to visualize events, activities, or states across a time range.
+- [Toaster](node_modules/@agregio-solutions/design-system/dist/packages/components/Toaster/doc.md) : A toast notification container positioning and managing multiple toast messages with auto-dismiss — use it to display temporary success, error, info, or warning notifications.
+- [ToggleButton](node_modules/@agregio-solutions/design-system/dist/packages/components/ToggleButton/doc.md) : A button that toggles between selected/unselected states, optionally with icon and tooltip — use it as a child of ToggleButtonGroup for button-like toggles.
+- [ToggleButtonGroup](node_modules/@agregio-solutions/design-system/dist/packages/components/ToggleButtonGroup/doc.md) : A group of toggle buttons supporting single or multiple selection with optional label — use it for toggling between multiple options with button styling.
+- [Tooltip](node_modules/@agregio-solutions/design-system/dist/packages/components/Tooltip/doc.md) : A small popup label appearing on hover or focus with optional arrow and customizable placement — use it to display brief contextual help text or descriptions on interactive elements.
+- [YearMonthPicker](node_modules/@agregio-solutions/design-system/dist/packages/components/YearMonthPicker/doc.md) : A picker for selecting year, month, or both with separate dropdown lists and optional icon — use it to let users select a specific month/year combination for date-based filters or settings.

package/dist/public_docs/index.md

@@ -0,0 +1,30 @@
+---
+title: Agregio Solutions Design System Documentation
+description: Welcome to the Agregio Solutions Design System Documentation.
+---
+
+Welcome to the Agregio Solutions Design System Documentation!
+
+## What is the Agregio Solutions Design System?
+
+The Agregio Solutions Design System is a collection of reusable components and patterns for building web applications. It is built with React, React Aria Components, styled-components, Vite, Storybook and TypeScript.
+
+## How to use the docs
+
+The docs are organized into 2 sections:
+
+- [Components](./components.md): list of all the components available in the design system, + their props, example usage and how to test them.
+- [Tokens](./tokens.md): list of all the tokens available in the design system and examples of how to use them.
+
+## Important rules to follow
+
+Check the [Components](./components.md) each time you:
+
+- need to create a new component
+- write code from a Figma file (it is highly possible that components with the same name are already available in the design system)
+- need to update an existing implementation of a Design System Component
+- need to write of update tests for a Design System Component
+- need to check the available props or developer notes for a Design System Component
+
+Check the [Tokens](./tokens.md) each time you want to use CSS values like spacing, colors, typography, etc.
+It contains the complete list of all the tokens available in the design system and examples of how to use them as well as the rules to follow to use them correctly.

package/dist/public_docs/tokens.md

@@ -0,0 +1,121 @@
+# Design tokens
+
+The design system exposes its tokens (colors, spacing, radius, stroke, typography sizes, z-index) as CSS custom properties on the `:root` selector. The stylesheet is imported once at the root of your application and any token can be referenced via `var(--token-name)` in your styles.
+
+The full list of available CSS variables is reproduced below.
+
+```css
+:root {
+  --color-content-action-action: #0059ff;
+  --color-content-action-action-darker: #0e275d;
+  --color-content-action-action-lighter: #edf8ff;
+  --color-content-neutral-primary: #001a70;
+  --color-content-neutral-primary-reversed: #ffffff;
+  --color-content-neutral-secondary: #454545;
+  --color-content-neutral-tertiary: #b0b0b0;
+  --color-content-neutral-stroke: #e7e7e7;
+  --color-content-brand-brand-1: #001a70;
+  --color-content-brand-brand-2: #3f6eff;
+  --color-content-brand-brand-3: #769fff;
+  --color-content-brand-brand-4: #326a21;
+  --color-content-brand-brand-5: #4f9e30;
+  --color-content-brand-brand-6: #76c853;
+  --color-content-brand-brand-7: #c62608;
+  --color-content-brand-brand-8: #fe5716;
+  --color-content-brand-brand-9: #ff7838;
+  --color-content-message-informative: #009fd4;
+  --color-content-message-informative-darker: #007fab;
+  --color-content-message-informative-darkest: #065874;
+  --color-content-message-informative-lighter: #effbff;
+  --color-content-message-negative: #ed1515;
+  --color-content-message-negative-darker: #c80d0d;
+  --color-content-message-negative-darkest: #881414;
+  --color-content-message-negative-lighter: #fff1f1;
+  --color-content-message-positive: #00c027;
+  --color-content-message-positive-darker: #067520;
+  --color-content-message-positive-darkest: #00370d;
+  --color-content-message-positive-lighter: #edfff0;
+  --color-content-message-warning: #e27500;
+  --color-content-message-warning-darker: #bb5002;
+  --color-content-message-warning-darkest: #7c330b;
+  --color-content-message-warning-lighter: #fffcea;
+  --color-content-dataviz-orange-1: #fff5ed;
+  --color-content-dataviz-orange-2: #ffcca8;
+  --color-content-dataviz-orange-3: #ff7838;
+  --color-content-dataviz-orange-4: #9d210f;
+  --color-content-dataviz-brown-1: #fffcea;
+  --color-content-dataviz-brown-2: #ffe785;
+  --color-content-dataviz-brown-3: #ffc01b;
+  --color-content-dataviz-brown-4: #983d08;
+  --color-content-dataviz-azure-1: #f1f7ff;
+  --color-content-dataviz-azure-2: #cee1ff;
+  --color-content-dataviz-azure-3: #769fff;
+  --color-content-dataviz-azure-4: #052dd2;
+  --color-content-dataviz-ocean-1: #effbff;
+  --color-content-dataviz-ocean-2: #b6efff;
+  --color-content-dataviz-ocean-3: #2cd9ff;
+  --color-content-dataviz-ocean-4: #006b8d;
+  --color-content-dataviz-purple-1: #f9f5ff;
+  --color-content-dataviz-purple-2: #e4d4ff;
+  --color-content-dataviz-purple-3: #a56eff;
+  --color-content-dataviz-purple-4: #5a1eab;
+  --color-content-dataviz-pink-1: #fdf2f7;
+  --color-content-dataviz-pink-2: #fbcfe5;
+  --color-content-dataviz-pink-3: #f571ae;
+  --color-content-dataviz-pink-4: #9e1645;
+  --color-content-dataviz-negative-1: #fff1f1;
+  --color-content-dataviz-negative-2: #ffc5c5;
+  --color-content-dataviz-negative-3: #ff6464;
+  --color-content-dataviz-negative-4: #a50f0f;
+  --color-content-dataviz-positive-1: #edfff0;
+  --color-content-dataviz-positive-2: #aeffc0;
+  --color-content-dataviz-positive-3: #00e634;
+  --color-content-dataviz-positive-4: #067520;
+  --color-content-dataviz-neutral-1: #f6f6f6;
+  --color-content-dataviz-neutral-2: #d1d1d1;
+  --color-content-dataviz-neutral-3: #888888;
+  --color-content-dataviz-neutral-4: #454545;
+  --color-background-neutral-overground: #ffffff;
+  --color-background-neutral-ground: #ffffff;
+  --color-background-neutral-ground-reversed: #0e275d;
+  --color-background-neutral-underground-1: #f6f6f6;
+  --color-background-neutral-underground-2: #e7e7e7;
+  --color-background-highlight-focus: #009fd4;
+  --color-background-highlight-focus-reversed: #ffffff;
+  --spacing-xxs: 4px;
+  --spacing-xs: 8px;
+  --spacing-sm: 16px;
+  --spacing-md: 24px;
+  --spacing-lg: 32px;
+  --spacing-xl: 48px;
+  --spacing-xxl: 80px;
+  --radius-minimal: 2px;
+  --radius-rounded: 4px;
+  --radius-full: 8px;
+  --stroke-default: 1px;
+  --stroke-doubled: 2px;
+  --text-font-size-3xl: 40px;
+  --text-font-size-2xl: 32px;
+  --text-font-size-xl: 24px;
+  --text-font-size-lg: 20px;
+  --text-font-size-md: 16px;
+  --text-font-size-sm: 14px;
+  --text-font-size-xs: 12px;
+  --text-line-height-3xl: 56px;
+  --text-line-height-2xl: 40px;
+  --text-line-height-xl: 32px;
+  --text-line-height-lg: 28px;
+  --text-line-height-md: 24px;
+  --text-line-height-sm: 20px;
+  --text-line-height-xs: 16px;
+  --z-index-base: 1;
+  --z-index-dropdown: 10;
+  --z-index-sticky: 20;
+  --z-index-fixed: 30;
+  --z-index-modal-backdrop: 40;
+  --z-index-off-canvas: 50;
+  --z-index-modal: 60;
+  --z-index-popover: 70;
+  --z-index-tooltip: 80;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.90.1",
+  "version": "1.92.0",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",
@@ -17,9 +17,10 @@
     "build-storybook": "storybook build",
     "chromatic": "chromatic",
     "consumer:smoke-check": "npm run build && node internal/consumer-check.mjs",
+    "docs:generate": "node internal/generateComponentDocs.mjs",
     "eslint": "eslint .",
     "formatters": "npm run prettier:check && npm run eslint && npm run typescript:check",
-    "integrity": "npm run formatters && npm run build && npm run vitest:all && npm run storybook:test",
+    "integrity": "npm run formatters && npm run build && npm run vitest:all && npm run storybook:test && npm run docs:generate",
     "jest:compatibility-check": "npm run build && jest internal/test-jest-compatibility.jest.js",
     "playwright:install": "playwright install --with-deps chromium",
     "pre-commit": "lint-staged && npm run typescript:check && npm run vitest:only-changed && npm run storybook:test:only-changed",