@agregio-solutions/design-system 1.95.0 → 1.96.0

package/dist/packages/components/Card/doc.md

@@ -0,0 +1,202 @@
+# Card
+
+## Props
+
+The complete Props documentation with JS doc for this component is available at this path:
+
+node_modules/@agregio-solutions/design-system/dist/packages/components/Card/Card.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
+import Card from "./Card";
+import Button from "../Button/Button";
+import Icon from "../Icon/Icon";
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  tags: ["autodocs"],
+  argTypes: {
+    children: { control: false },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs: Story["args"] = {
+  children: <div>Card content</div>,
+};
+
+const getCard = (canvasElement: HTMLElement) =>
+  within(canvasElement)
+    .getByText("Card content")
+    .closest('[data-design-system-component="Card"]');
+
+export const Playground: Story = {
+  args: defaultArgs,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Card content");
+    await expect(getCard(canvasElement)).toHaveAttribute("data-size", "md");
+    await expect(getCard(canvasElement)).toHaveAttribute("data-radius", "full");
+  },
+};
+
+export const NoPadding: Story = {
+  args: { ...defaultArgs, size: "no-padding" },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Card content");
+    await expect(getCard(canvasElement)).not.toHaveAttribute("data-size");
+  },
+};
+
+export const PaddingSm: Story = {
+  args: { ...defaultArgs, size: "sm" },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Card content");
+    await expect(getCard(canvasElement)).toHaveAttribute("data-size", "sm");
+  },
+};
+
+export const PaddingLg: Story = {
+  args: { ...defaultArgs, size: "lg" },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Card content");
+    await expect(getCard(canvasElement)).toHaveAttribute("data-size", "lg");
+  },
+};
+
+export const RadiusMinimal: Story = {
+  args: { ...defaultArgs, radius: "minimal" },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Card content");
+    await expect(getCard(canvasElement)).toHaveAttribute(
+      "data-radius",
+      "minimal",
+    );
+  },
+};
+
+export const RadiusRounded: Story = {
+  args: { ...defaultArgs, radius: "rounded" },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText("Card content");
+    await expect(getCard(canvasElement)).toHaveAttribute(
+      "data-radius",
+      "rounded",
+    );
+  },
+};
+
+/**
+ * A richer example that keeps the default padding: a title, a paragraph and a
+ * primary action pushed to the bottom-right corner of the card.
+ */
+export const WithTitleAndAction: Story = {
+  args: {
+    style: { maxWidth: 360 },
+    children: (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "var(--spacing-sm)",
+        }}
+      >
+        <h3
+          style={{
+            margin: 0,
+            color: "var(--color-content-neutral-primary)",
+          }}
+        >
+          Card title
+        </h3>
+        <p
+          style={{
+            margin: 0,
+            color: "var(--color-content-neutral-secondary)",
+          }}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </p>
+        <div style={{ display: "flex", justifyContent: "flex-end" }}>
+          <Button text="Voir plus" onClick={() => {}} />
+        </div>
+      </div>
+    ),
+  },
+};
+
+/**
+ * A fully custom layout. The card removes its own padding (`no-padding`) so the
+ * children can control everything: a colored header with a white title, and a
+ * body with its own padding, a pale bottom-heavy gradient and a decorative icon
+ * sitting in the background. `overflow: hidden` keeps the header and gradient
+ * clipped to the card radius.
+ */
+export const CustomHeaderAndBackground: Story = {
+  args: {
+    size: "no-padding",
+    style: { maxWidth: 360, overflow: "hidden" },
+    children: (
+      <>
+        <div
+          style={{
+            background: "var(--color-content-action-action)",
+            color: "var(--color-content-neutral-primary-reversed)",
+            padding: "var(--spacing-md)",
+          }}
+        >
+          <h3 style={{ margin: 0 }}>Consommation</h3>
+        </div>
+        <div
+          style={{
+            position: "relative",
+            overflow: "hidden",
+            padding: "var(--spacing-md)",
+            display: "flex",
+            flexDirection: "column",
+            gap: "var(--spacing-sm)",
+            background:
+              "linear-gradient(180deg, var(--color-background-neutral-overground) 0%, var(--color-content-action-action-lighter) 100%)",
+            color: "var(--color-content-neutral-primary)",
+          }}
+        >
+          <Icon
+            name="bolt"
+            style={{
+              position: "absolute",
+              right: "-12px",
+              bottom: "0",
+              width: 120,
+              height: 120,
+              color: "var(--color-content-action-action)",
+              opacity: 0.15,
+              pointerEvents: "none",
+            }}
+          />
+          <p style={{ margin: 0, position: "relative" }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suivi de
+            votre consommation en temps réel.
+          </p>
+          <p style={{ margin: 0, position: "relative" }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suivi de
+            votre consommation en temps réel.
+          </p>
+        </div>
+      </>
+    ),
+  },
+};
+```

package/dist/packages/components/Combobox/doc.md

@@ -480,6 +480,31 @@ export const ExampleWithLinks: StoryObj<typeof Combobox> = {
   },
 };
 
+export const ShouldRenderALinkItemWithATarget: StoryObj<typeof Combobox> = {
+  args: {
+    ...Playground.args,
+    defaultItems: [
+      { text: "Option 1", id: "1" },
+      {
+        text: "Google",
+        id: "google",
+        href: "https://google.com",
+        target: "_blank",
+      },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await user.type(canvas.getByLabelText("[Insert label]"), "Goo");
+    const link = (
+      await screen.findByText("Google", { selector: "span" })
+    ).closest("a");
+    await expect(link).toHaveAttribute("href", "https://google.com");
+    await expect(link).toHaveAttribute("target", "_blank");
+  },
+};
+
 export const ExampleWithCustomFiltering: StoryObj<typeof Combobox> = {
   render: () => {
     const options = [

package/dist/packages/components/DataTable/DataTableHeader/DataTableHeader.d.ts

@@ -7,6 +7,9 @@ export type Props = {
     iconLeft?: IconName;
     /**
      * Optional text content for the header. Can also be a React component.
+     * Rendered inside the sort button: it must not contain interactive elements
+     * (button, link, input), which would be invalid HTML and would trigger the sort
+     * on click.
      */
     text?: React.ReactNode;
     /**
@@ -14,7 +17,7 @@ export type Props = {
      */
     sortDirection?: "asc" | "desc" | "none";
     /**
-     * Callback fired when the sort icon is clicked. If not provided, the sort icon will not be displayed.
+     * Callback fired when the header cell is clicked. If not provided, the header is not sortable and the sort icon is not displayed.
      */
     onSortClick?: (event?: unknown) => void;
     /**

package/dist/packages/components/DatePicker/doc.md

@@ -500,7 +500,7 @@ Read [the React Aria blog post](https://react-spectrum.adobe.com/blog/date-and-t
 ## Value
 
 A `DatePicker` displays a placeholder by default. An initial, uncontrolled value can be provided to the `DatePicker` using the `defaultValue` prop.
-Alternatively, a controlled value can be provided using the `value` and `onchange` props.
+Alternatively, a controlled value can be provided using the `value` and `onChange` props.
 
 Date values are provided as string.
 This component handles correct international date manipulation across calendars, time zones, and other localization concerns.

package/dist/packages/components/DateRangePicker/doc.md

@@ -547,7 +547,7 @@ Read [the React Aria blog post](https://react-spectrum.adobe.com/blog/date-and-t
 ## Value
 
 A `DateRangePicker` displays a placeholder by default. An initial, uncontrolled value can be provided to the `DateRangePicker` using the `defaultValue` prop.
-Alternatively, a controlled value can be provided using the `value` and `onchange` props.
+Alternatively, a controlled value can be provided using the `value` and `onChange` props.
 
 Here is the type for the `value` prop (also valid for `defaultValue`, `onChange`, etc.):
 

package/dist/packages/components/SelectItem/SelectItem.d.ts

@@ -1,3 +1,4 @@
+import { HTMLAttributeAnchorTarget } from 'react';
 import { IconName } from '../Icon/Icon';
 export type Props = {
     /**
@@ -25,6 +26,11 @@ export type Props = {
      * A URL to link
      */
     href?: string;
+    /**
+     * Only active with the `href` prop.
+     * Give a target attribute to use on the rendered anchor.
+     */
+    target?: HTMLAttributeAnchorTarget;
     /**
      * Only active with the `href` prop.
      * Router-specific options to pass to the `Link` component under the hood. (configured by the RouterProvider).
@@ -41,4 +47,4 @@ export type Props = {
      */
     selectionMode?: "single" | "multiple";
 };
-export default function SelectItem({ text, id, iconRight, iconLeft, isSelected, href, routerOptions, className, selectionMode, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function SelectItem({ text, id, iconRight, iconLeft, isSelected, href, target, routerOptions, className, selectionMode, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/packages/components/TimeField/TimeField.d.ts

@@ -7,7 +7,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     id: string;
     /**
-     * Actual date value of the TimeField, should be a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) time string.
+     * Actual time value of the TimeField, should be a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) time string.
      */
     value?: string | null;
     /**
@@ -26,11 +26,12 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     ampm?: boolean;
     /**
-     * Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
+     * Determines the smallest unit that is displayed by the TimeField, and therefore which segments are editable.
+     * @default "minute"
      */
     granularity?: "hour" | "minute" | "second";
     /**
-     * Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
+     * Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
      */
     shouldForceLeadingZeros?: boolean;
     /**
@@ -58,10 +59,10 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     style?: React.CSSProperties;
     /**
-     * Specifies the nature of the Select (mainly to change the trigger border color and helperText color).
+     * Specifies the nature of the TimeField (mainly to change the input outline color and helperText color).
      * If you do not pass a nature prop, the component will automatically set the nature based on the presence of success/error messages.
      */
-    nature?: "default" | "negative" | "positive";
+    nature?: "default" | "negative" | "positive" | "warning";
     /**
      * Props to pass to the wrapper div (for example, style or className).
      */
@@ -81,7 +82,7 @@ declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label
      */
     id: string;
     /**
-     * Actual date value of the TimeField, should be a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) time string.
+     * Actual time value of the TimeField, should be a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) time string.
      */
     value?: string | null;
     /**
@@ -100,11 +101,12 @@ declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label
      */
     ampm?: boolean;
     /**
-     * Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
+     * Determines the smallest unit that is displayed by the TimeField, and therefore which segments are editable.
+     * @default "minute"
      */
     granularity?: "hour" | "minute" | "second";
     /**
-     * Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
+     * Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
      */
     shouldForceLeadingZeros?: boolean;
     /**
@@ -132,10 +134,10 @@ declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label
      */
     style?: React.CSSProperties;
     /**
-     * Specifies the nature of the Select (mainly to change the trigger border color and helperText color).
+     * Specifies the nature of the TimeField (mainly to change the input outline color and helperText color).
      * If you do not pass a nature prop, the component will automatically set the nature based on the presence of success/error messages.
      */
-    nature?: "default" | "negative" | "positive";
+    nature?: "default" | "negative" | "positive" | "warning";
     /**
      * Props to pass to the wrapper div (for example, style or className).
      */

package/dist/packages/components/TimeField/doc.md

@@ -16,7 +16,7 @@ Base stories:
 import { Meta, StoryObj } from "@storybook/react-vite";
 import TimeField from "./TimeField";
 import { I18nProvider } from "react-aria-components";
-import { fn } from "storybook/test";
+import { expect, fn, within } from "storybook/test";
 
 const meta: Meta<typeof TimeField> = {
   component: TimeField,
@@ -41,6 +41,12 @@ const meta: Meta<typeof TimeField> = {
 };
 export default meta;
 
+const getRoot = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-design-system-component="TimeField"]');
+
+const getInput = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector("[data-nature]");
+
 export const Playground: StoryObj<typeof TimeField> = {
   args: {
     label: "Time Field",
@@ -50,6 +56,14 @@ export const Playground: StoryObj<typeof TimeField> = {
     labelIconRight: "help_outline",
     labelIconRightTooltip: "Additional information",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Time Field")).toBeVisible();
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "data-nature",
+      "default",
+    );
+  },
 };
 
 export const Empty: StoryObj<typeof TimeField> = {
@@ -57,6 +71,13 @@ export const Empty: StoryObj<typeof TimeField> = {
     ...Playground.args,
     defaultValue: undefined,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("hour, Time Field")).toHaveAttribute(
+      "data-placeholder",
+      "true",
+    );
+  },
 };
 
 export const OnlyHour: StoryObj<typeof TimeField> = {
@@ -65,6 +86,15 @@ export const OnlyHour: StoryObj<typeof TimeField> = {
     defaultValue: "12",
     granularity: "hour",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("hour, Time Field")).toHaveTextContent(
+      "12",
+    );
+    await expect(
+      canvas.queryByLabelText("minute, Time Field"),
+    ).not.toBeInTheDocument();
+  },
 };
 
 export const HourMinute: StoryObj<typeof TimeField> = {
@@ -73,6 +103,18 @@ export const HourMinute: StoryObj<typeof TimeField> = {
     defaultValue: "12:34",
     granularity: "minute",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("hour, Time Field")).toHaveTextContent(
+      "12",
+    );
+    await expect(canvas.getByLabelText("minute, Time Field")).toHaveTextContent(
+      "34",
+    );
+    await expect(
+      canvas.queryByLabelText("second, Time Field"),
+    ).not.toBeInTheDocument();
+  },
 };
 
 export const HourMinuteSecond: StoryObj<typeof TimeField> = {
@@ -81,6 +123,12 @@ export const HourMinuteSecond: StoryObj<typeof TimeField> = {
     defaultValue: "12:34:56",
     granularity: "second",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("second, Time Field")).toHaveTextContent(
+      "56",
+    );
+  },
 };
 
 export const LocaleFR: StoryObj<typeof TimeField> = {
@@ -90,6 +138,9 @@ export const LocaleFR: StoryObj<typeof TimeField> = {
   args: {
     ...HourMinuteSecond.args,
   },
+  play: async ({ canvasElement }) => {
+    await expect(getInput(canvasElement)).toHaveTextContent("12:34:56");
+  },
 };
 
 export const Disabled: StoryObj<typeof TimeField> = {
@@ -97,6 +148,12 @@ export const Disabled: StoryObj<typeof TimeField> = {
     ...Playground.args,
     isDisabled: true,
   },
+  play: async ({ canvasElement }) => {
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  },
 };
 
 export const WithError: StoryObj<typeof TimeField> = {
@@ -106,6 +163,14 @@ export const WithError: StoryObj<typeof TimeField> = {
     errorHelperText: "Error message",
     errorHelperTextIcon: "error_outline",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Error message")).toBeVisible();
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "data-nature",
+      "negative",
+    );
+  },
 };
 
 export const WithSuccess: StoryObj<typeof TimeField> = {
@@ -115,6 +180,14 @@ export const WithSuccess: StoryObj<typeof TimeField> = {
     successHelperText: "Success message",
     successHelperTextIcon: "check",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Success message")).toBeVisible();
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "data-nature",
+      "positive",
+    );
+  },
 };
 
 export const WithWarning: StoryObj<typeof TimeField> = {
@@ -124,6 +197,14 @@ export const WithWarning: StoryObj<typeof TimeField> = {
     warningHelperText: "Warning message",
     warningHelperTextIcon: "warning_amber",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Warning message")).toBeVisible();
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "data-nature",
+      "warning",
+    );
+  },
 };
 
 export const WithHorizontalOrientation: StoryObj<typeof TimeField> = {
@@ -131,6 +212,11 @@ export const WithHorizontalOrientation: StoryObj<typeof TimeField> = {
     ...Playground.args,
     orientation: "horizontal",
   },
+  play: async ({ canvasElement }) => {
+    await expect(
+      canvasElement.querySelector("[data-orientation]"),
+    ).toHaveAttribute("data-orientation", "horizontal");
+  },
 };
 
 export const FullWidth: StoryObj<typeof TimeField> = {
@@ -141,6 +227,12 @@ export const FullWidth: StoryObj<typeof TimeField> = {
     ...Playground.args,
     fullWidth: true,
   },
+  play: async ({ canvasElement }) => {
+    await expect(getRoot(canvasElement)).toHaveAttribute(
+      "data-fullwidth",
+      "true",
+    );
+  },
 };
 ```
 
@@ -242,23 +334,23 @@ export const ControlledShouldSelectAValue: StoryObj<typeof TimeField> = {
 export const ExampleGranularity: StoryObj<typeof TimeField> = {
   render: () => {
     function Example() {
-      const [time, setDate] = useState("12:34");
+      const [time, setTime] = useState("12:34");
 
       return (
         <>
           <TimeField
-            id="time-and-time"
-            label="Date and time"
+            id="granularity-second"
+            label="Second granularity"
             granularity="second"
             value={time}
-            onChange={setDate}
+            onChange={setTime}
           />
           <TimeField
-            id="time"
-            label="Date"
+            id="granularity-hour"
+            label="Hour granularity"
             granularity="hour"
             value={time}
-            onChange={setDate}
+            onChange={setTime}
           />
         </>
       );
@@ -324,16 +416,24 @@ Read [the React Aria blog post](https://react-spectrum.adobe.com/blog/date-and-t
 ## Value
 
 A `TimeField` displays a placeholder by default. An initial, uncontrolled value can be provided to the `TimeField` using the `defaultValue` prop.
-Alternatively, a controlled value can be provided using the `value` and `onchange` props.
+Alternatively, a controlled value can be provided using the `value` and `onChange` props.
 
 Time values are provided as string.
-This component handles correct international time manipulation across time zones and other localization concerns.
-TimeField supports values of the following string formats:
+This component handles correct international time manipulation: hour cycle, locale-specific formatting and other localization concerns.
+Values carry no date and no time zone — a `TimeField` holds a plain time of day.
+TimeField accepts values in the following string formats:
+
+- `hh`
+- `hh:mm`
+- `hh:mm:ss`
+- `hh:mm:ss.sss`
+
+Every format is parsed into a complete time, with the missing units defaulting to zero — `"12"` and `"12:00:00"` are therefore equivalent values.
+
+The value format does **not** control what is rendered: the units displayed are decided by the `granularity` prop (see below).
+For example, `value="12:34:56"` with the default `"minute"` granularity displays `12:34`; pass `granularity="second"` to also show the seconds.
 
-- `hh` -> only the hour is displayed
-- `hh:mm` -> only the hour and minute are displayed
-- `hh:mm:ss` -> only the hour, minute and second are displayed
-- `hh:mm:ss.sss` -> the hour, minute, second and millisecond are displayed (millisecond are not selectable by the user and will not change when the rest of the time is changed)
+Milliseconds are preserved in the value but never displayed, and they are not editable by the user: they will not change when the rest of the time is changed.
 
 ## Granularity
 

package/dist/public_docs/components.md

@@ -9,6 +9,7 @@ title: Exhaustive list of all the Design System Components and their props
 - [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.
+- [Card](node_modules/@agregio-solutions/design-system/dist/packages/components/Card/doc.md) : A simple container surface with configurable padding size and border radius, extensible via className/style — use it as a base wrapper to group related content into a bounded, elevated block.
 - [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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.95.0",
+  "version": "1.96.0",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",
@@ -28,7 +28,6 @@
     "semantic-release": "semantic-release",
     "prettier:check": "prettier . --check --ignore-path .gitignore",
     "prettier:write": "prettier . --write --ignore-path .gitignore",
-    "repomix": "repomix",
     "storybook": "storybook dev -p 6006",
     "storybook:test": "vitest run --project storybook",
     "storybook:test:llm": "DEBUG_PRINT_LIMIT=0 vitest run --project=storybook --reporter=dot --silent --changed --passWithNoTests",
@@ -80,7 +79,6 @@
     "react-router-dom": "7.15.1",
     "recharts": "3.8.1",
     "remark-gfm": "4.0.1",
-    "repomix": "1.14.0",
     "semantic-release": "25.0.3",
     "storybook": "10.4.0",
     "typescript-eslint": "8.59.3",