@agregio-solutions/design-system 1.92.1 → 1.93.0

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

@@ -0,0 +1,628 @@
+# TimePicker
+
+## 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/TimePicker/TimePicker.d.ts
+
+## Example usage
+
+Here are the Storybook Stories.
+
+Base stories:
+
+```tsx
+import { useState } from "react";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import TimePicker, { TimePickerValue } from "./TimePicker";
+import DatePicker from "@components/DatePicker/DatePicker";
+import { I18nProvider } from "react-aria-components";
+import { fn, within, expect } from "storybook/test";
+
+const meta: Meta<typeof TimePicker> = {
+  component: TimePicker,
+  argTypes: {
+    label: { control: "text" },
+    value: { control: false },
+    units: { control: false },
+    helperText: { control: "text" },
+    errorHelperText: { control: "text" },
+    successHelperText: { control: "text" },
+    warningHelperText: { control: "text" },
+  },
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story, context) => {
+      const [value, setValue] = useState<TimePickerValue | null>(
+        context.args.value as TimePickerValue | null,
+      );
+      return (
+        <I18nProvider locale={context.parameters.locale || "en-EN"}>
+          <Story
+            args={{
+              ...context.args,
+              value,
+              onChange: (next: TimePickerValue) => {
+                context.args.onChange?.(next);
+                setValue(next);
+              },
+            }}
+          />
+        </I18nProvider>
+      );
+    },
+  ],
+};
+export default meta;
+
+export const Playground: StoryObj<typeof TimePicker> = {
+  args: {
+    label: "Time Picker",
+    value: { hours: "12", minutes: "34", seconds: "56" },
+    onChange: fn(),
+    labelIconRight: "help_outline",
+    labelIconRightTooltip: "Additional information",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByLabelText("Time Picker : Hours")).toHaveTextContent(
+      "12h",
+    );
+    expect(canvas.getByLabelText("Time Picker : Minutes")).toHaveTextContent(
+      "34m",
+    );
+    expect(canvas.getByLabelText("Time Picker : Seconds")).toHaveTextContent(
+      "56s",
+    );
+  },
+};
+
+export const NoValue: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    value: null,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByLabelText("Time Picker : Hours")).toHaveTextContent(
+      "HH",
+    );
+    expect(canvas.getByLabelText("Time Picker : Minutes")).toHaveTextContent(
+      "MM",
+    );
+    expect(canvas.getByLabelText("Time Picker : Seconds")).toHaveTextContent(
+      "SS",
+    );
+  },
+};
+
+export const WithoutSeconds: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    value: { hours: "12", minutes: "34" },
+    units: ["hours", "minutes"],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByLabelText("Time Picker : Hours")).toHaveTextContent(
+      "12h",
+    );
+    expect(canvas.getByLabelText("Time Picker : Minutes")).toHaveTextContent(
+      "34m",
+    );
+    expect(
+      canvas.queryByLabelText("Time Picker : Seconds"),
+    ).not.toBeInTheDocument();
+  },
+};
+
+export const OnlyHours: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    value: { hours: "12" },
+    units: ["hours"],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByLabelText("Time Picker : Hours")).toHaveTextContent(
+      "12h",
+    );
+    expect(
+      canvas.queryByLabelText("Time Picker : Minutes"),
+    ).not.toBeInTheDocument();
+    expect(
+      canvas.queryByLabelText("Time Picker : Seconds"),
+    ).not.toBeInTheDocument();
+  },
+};
+
+export const OnlyMinutesSeconds: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    value: { minutes: "34", seconds: "56" },
+    units: ["minutes", "seconds"],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(
+      canvas.queryByLabelText("Time Picker : Hours"),
+    ).not.toBeInTheDocument();
+    expect(canvas.getByLabelText("Time Picker : Minutes")).toHaveTextContent(
+      "34m",
+    );
+    expect(canvas.getByLabelText("Time Picker : Seconds")).toHaveTextContent(
+      "56s",
+    );
+  },
+};
+
+export const Horizontal: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    orientation: "horizontal",
+    required: true,
+    helperText: "Pick a time during business hours",
+    helperTextIcon: "help_outline",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvasElement.querySelector(
+      '[data-design-system-component="TimePicker"]',
+    );
+    expect(root).toHaveAttribute("data-orientation", "horizontal");
+    expect(
+      canvas.getByText("Pick a time during business hours"),
+    ).toBeInTheDocument();
+  },
+};
+
+export const HorizontalWithoutSeconds: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Horizontal.args,
+    value: { hours: "12", minutes: "34" },
+    units: ["hours", "minutes"],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const root = canvasElement.querySelector(
+      '[data-design-system-component="TimePicker"]',
+    );
+    expect(root).toHaveAttribute("data-orientation", "horizontal");
+    expect(
+      canvas.queryByLabelText("Time Picker : Seconds"),
+    ).not.toBeInTheDocument();
+  },
+};
+
+export const Disabled: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    isDisabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const triggers = canvas.getAllByLabelText(/^Time Picker : /);
+    expect(triggers).toHaveLength(3);
+    triggers.forEach((trigger) => {
+      expect(trigger).toBeDisabled();
+    });
+  },
+};
+
+export const ReadOnly: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    isReadOnly: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.queryByRole("button", { name: /Hours/ }),
+    ).not.toBeInTheDocument();
+    const readOnly = canvasElement.querySelector(
+      '[data-design-system-component="TimePicker"] [data-readonly="true"]',
+    );
+    await expect(readOnly).toHaveTextContent("12:34:56");
+  },
+};
+
+export const WithError: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    errorHelperText: "Error message",
+    errorHelperTextIcon: "error_outline",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const triggers = canvas.getAllByLabelText(/^Time Picker : /);
+    expect(triggers).toHaveLength(3);
+    triggers.forEach((trigger) => {
+      expect(trigger).toHaveAttribute("data-nature", "negative");
+    });
+  },
+};
+
+export const WithWarning: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    warningHelperText: "Warning message",
+    warningHelperTextIcon: "warning_amber",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByLabelText("Time Picker : Hours")).toHaveAttribute(
+      "data-nature",
+      "warning",
+    );
+    expect(canvas.getByText("Warning message")).toBeInTheDocument();
+  },
+};
+
+export const WithSuccess: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    successHelperText: "Success message",
+    successHelperTextIcon: "check",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const triggers = canvas.getAllByLabelText(/^Time Picker : /);
+    expect(triggers).toHaveLength(3);
+    triggers.forEach((trigger) => {
+      expect(trigger).toHaveAttribute("data-nature", "positive");
+    });
+  },
+};
+
+export const WithStep: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    value: { hours: "12", minutes: "30", seconds: "40" },
+    minutesStep: 5,
+    secondsStep: 10,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByLabelText("Time Picker : Hours")).toHaveTextContent(
+      "12h",
+    );
+    expect(canvas.getByLabelText("Time Picker : Minutes")).toHaveTextContent(
+      "30m",
+    );
+    expect(canvas.getByLabelText("Time Picker : Seconds")).toHaveTextContent(
+      "40s",
+    );
+  },
+};
+
+/**
+ * Demonstrates assembling a full date-time without a dedicated component:
+ * a `DatePicker` (granularity "day") for the date and a `TimePicker` for the
+ * time. The two wall-clock values are combined into a native `Date` via
+ * `combineToDate`, which is DST-safe in the browser's local timezone.
+ */
+export const WithDatePicker: StoryObj<typeof TimePicker> = {
+  render: () => {
+    /**
+     * Combines a date (wall-clock "YYYY-MM-DD" from DatePicker) and a time
+     * (TimePickerValue) into a native Date in the browser's local timezone.
+     *
+     * The multi-argument Date constructor interprets its parts as local
+     * wall-clock time and applies the local timezone's DST rules automatically
+     * — no manual offset math, so no DST bugs. Note: never use
+     * `new Date("YYYY-MM-DD")` for the date part, as a date-only ISO string is
+     * parsed as UTC midnight, not local.
+     */
+    const combineToDate = (
+      date: string | null,
+      time: TimePickerValue,
+    ): Date | null => {
+      if (!date) return null;
+      const [year, month, day] = date.split("-").map(Number);
+      const hours = Number(time.hours ?? "0");
+      const minutes = Number(time.minutes ?? "0");
+      const seconds = Number(time.seconds ?? "0");
+      return new Date(year, month - 1, day, hours, minutes, seconds);
+    };
+
+    const DateTimeExample = () => {
+      const [date, setDate] = useState<string | null>("2020-01-15");
+      const [time, setTime] = useState<TimePickerValue>({
+        hours: "09",
+        minutes: "30",
+        seconds: "00",
+      });
+      const combined = combineToDate(date, time);
+      return (
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+          <div style={{ display: "flex", gap: "16px", alignItems: "flex-end" }}>
+            <DatePicker
+              id="date-time-date"
+              label="Date"
+              granularity="day"
+              value={date}
+              onChange={setDate}
+            />
+            <TimePicker label="Time" value={time} onChange={setTime} />
+          </div>
+          <div style={{ fontFamily: "monospace" }}>
+            <div data-testid="combined-local">
+              Date (local): {combined?.toString() ?? ""}
+            </div>
+            <div data-testid="combined-iso">
+              ISO (UTC): {combined?.toISOString() ?? ""}
+            </div>
+          </div>
+        </div>
+      );
+    };
+    return <DateTimeExample />;
+  },
+};
+```
+
+## How to test this component
+
+Here are some more advanced stories with more testing coverage and examples that you can read to understand how to test this component.
+
+```tsx
+import { Meta, StoryObj } from "@storybook/react-vite";
+import TimePicker, { TimePickerValue, TimeUnit } from "../TimePicker";
+import {
+  userEvent,
+  within,
+  waitFor,
+  screen,
+  fireEvent,
+  expect,
+  fn,
+} from "storybook/test";
+import { I18nProvider } from "react-aria-components";
+import { useState } from "react";
+import { Playground, WithDatePicker } from "../TimePicker.stories";
+
+const meta: Meta<typeof TimePicker> = {
+  component: TimePicker,
+  parameters: {
+    layout: "centered",
+    chromatic: { disableSnapshot: true },
+  },
+  decorators: [
+    (Story) => (
+      <I18nProvider locale="en-EN">
+        <Story />
+      </I18nProvider>
+    ),
+  ],
+};
+export default meta;
+
+const optionByText = async (text: string) => {
+  return screen.findByText(text, { selector: "span" });
+};
+
+const onChangeSpy = fn();
+
+const ControlledHarness = ({
+  initialValue = {},
+  units,
+  minutesStep,
+}: {
+  initialValue?: TimePickerValue;
+  units?: Array<TimeUnit>;
+  minutesStep?: number;
+}) => {
+  const [value, setValue] = useState<TimePickerValue>(initialValue);
+  return (
+    <TimePicker
+      {...Playground.args}
+      label="Time Picker"
+      units={units}
+      minutesStep={minutesStep}
+      value={value}
+      onChange={(next) => {
+        onChangeSpy(next);
+        setValue(next);
+      }}
+    />
+  );
+};
+
+export const ShouldSelectAllUnits: StoryObj<typeof TimePicker> = {
+  render: () => {
+    onChangeSpy.mockClear();
+    return <ControlledHarness />;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+
+    await user.click(canvas.getByRole("button", { name: /Hours/ }));
+    await user.click(await optionByText("11h"));
+    await waitFor(() =>
+      expect(onChangeSpy).toHaveBeenLastCalledWith({ hours: "11" }),
+    );
+
+    await user.click(canvas.getByRole("button", { name: /Minutes/ }));
+    await user.click(await optionByText("59m"));
+    await waitFor(() =>
+      expect(onChangeSpy).toHaveBeenLastCalledWith({
+        hours: "11",
+        minutes: "59",
+      }),
+    );
+
+    await user.click(canvas.getByRole("button", { name: /Seconds/ }));
+    await user.click(await optionByText("30s"));
+    await waitFor(() =>
+      expect(onChangeSpy).toHaveBeenLastCalledWith({
+        hours: "11",
+        minutes: "59",
+        seconds: "30",
+      }),
+    );
+  },
+};
+
+export const ShouldRespectMinutesStep: StoryObj<typeof TimePicker> = {
+  render: () => {
+    onChangeSpy.mockClear();
+    return <ControlledHarness minutesStep={15} />;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+
+    await user.click(canvas.getByRole("button", { name: /Minutes/ }));
+    await screen.findByText("00m", { selector: "span" });
+    const optionTexts = screen
+      .getAllByRole("option")
+      .map((option) => option.textContent?.trim());
+    expect(optionTexts).toEqual(["00m", "15m", "30m", "45m"]);
+  },
+};
+
+export const ShouldOmitSecondsWhenUnitsExcludeIt: StoryObj<typeof TimePicker> =
+  {
+    render: () => {
+      onChangeSpy.mockClear();
+      return <ControlledHarness units={["hours", "minutes"]} />;
+    },
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      const user = userEvent.setup({ delay: 50 });
+
+      await user.click(canvas.getByRole("button", { name: /Hours/ }));
+      await user.click(await optionByText("08h"));
+      await user.click(canvas.getByRole("button", { name: /Minutes/ }));
+      await user.click(await optionByText("45m"));
+
+      await waitFor(() =>
+        expect(onChangeSpy).toHaveBeenLastCalledWith({
+          hours: "08",
+          minutes: "45",
+        }),
+      );
+    },
+  };
+
+export const ReadOnlyShouldRenderText: StoryObj<typeof TimePicker> = {
+  args: {
+    ...Playground.args,
+    isReadOnly: true,
+    value: { hours: "01", minutes: "02", seconds: "03" },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(
+      canvas.queryByRole("button", { name: /Hours/ }),
+    ).not.toBeInTheDocument();
+    const readOnly = canvasElement.querySelector(
+      '[data-design-system-component="TimePicker"] [data-readonly="true"]',
+    );
+    await expect(readOnly).toHaveTextContent("01:02:03");
+  },
+};
+
+export const ShouldCombineDateAndTime: StoryObj<typeof TimePicker> = {
+  ...WithDatePicker,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+
+    await user.click(canvas.getByLabelText("Open calendar Date"));
+    await screen.findByLabelText("Monday, January 20, 2020");
+    await fireEvent.click(screen.getByLabelText("Monday, January 20, 2020"));
+
+    await user.click(canvas.getByLabelText("Time : Hours"));
+    await user.click(await optionByText("11h"));
+    await user.click(canvas.getByLabelText("Time : Minutes"));
+    await user.click(await optionByText("45m"));
+    await user.click(canvas.getByLabelText("Time : Seconds"));
+    await user.click(await optionByText("30s"));
+
+    await waitFor(() =>
+      expect(canvas.getByTestId("combined-local")).toHaveTextContent(
+        "Jan 20 2020 11:45:30",
+      ),
+    );
+  },
+};
+
+export const ExampleControlled: StoryObj<typeof TimePicker> = {
+  render: () => {
+    const ParentComponent = () => {
+      const [value, setValue] = useState<TimePickerValue>({
+        hours: "12",
+        minutes: "34",
+        seconds: "56",
+      });
+      return (
+        <>
+          <div>Selected time : {JSON.stringify(value)}</div>
+          <TimePicker label="Time Picker" value={value} onChange={setValue} />
+        </>
+      );
+    };
+    return <ParentComponent />;
+  },
+};
+```
+
+## Developer notes
+
+Here are the notes available for the developer on the built Storybook, you can read them to understand the component and how to use it.
+
+```mdx
+import {
+  Canvas,
+  Meta,
+  Stories,
+  Controls,
+  Source,
+} from "@storybook/addon-docs/blocks";
+
+import * as TimePicker from "./TimePicker.stories";
+import * as TimePickerTests from "./tests/TimePicker.stories";
+
+<Meta of={TimePicker} />
+
+# TimePicker
+
+A time picker allows users to pick a time using one Select per unit (hours, minutes, seconds). Unlike `TimeField` which is keyboard-segmented input, `TimePicker` is more tabular and exploratory.
+
+⚠️ Warning: This component **does not handle timezones natively**. It exposes values as an object so you can rebuild a correct date depending on your specific needs. See below for more details.
+
+<Canvas of={TimePicker.Playground} />
+<Controls of={TimePicker.Playground} />
+
+## Example
+
+<Source of={TimePickerTests.ExampleControlled} type="code" dark />
+
+## Value
+
+The value is an object of type `TimePickerValue = { hours?: string; minutes?: string; seconds?: string }`, where each segment is a 2-digit padded string in 24h format. Use `null` for the initial empty state.
+
+- All units set: `{ hours: "12", minutes: "34", seconds: "56" }`
+- Without seconds: `{ hours: "12", minutes: "34" }`
+- Without hours: `{ minutes: "34", seconds: "56" }`
+- Empty initial state: `null`
+
+`onChange` is called every time a unit changes and emits the full object with only the units that have a value (units the user hasn't selected yet are simply absent from the object).
+
+## Combining with DatePicker (date + time)
+
+`TimePicker` only holds wall-clock time, so to obtain a full date-time you assemble it with a `DatePicker` (granularity `"day"`). This avoids a dedicated component and keeps each picker focused on one concern.
+
+The assembly is done with **native JS only** and stays correct across daylight saving time (DST) changes in the browser's local timezone. See the `combineToDate` helper in the story source below.
+
+Why this is DST-safe: the multi-argument `Date` constructor interprets its parts as **local wall-clock time** and applies the local timezone's DST rules automatically — you never add an offset by hand, so no DST edge case can break it. This yields the same result as a `DatePicker` used at `granularity="second"` in the local timezone.
+
+⚠️ Do **not** build the date part with `new Date("YYYY-MM-DD")`: a date-only ISO string is parsed as **UTC midnight**, not local time. Always split the string and pass numbers to the constructor.
+
+<Canvas of={TimePicker.WithDatePicker} sourceState="shown" />
+```

package/dist/packages/components/TimePicker/utils/buildOptions/buildOptions.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Builds the list of 2-digit padded string options for a time unit.
+ *
+ * @param max - Maximum inclusive value (e.g. 23 for hours, 59 for minutes/seconds).
+ * @param step - Increment between consecutive options. Values < 1 or non-integers are clamped to 1.
+ * @returns Ascending list of padded strings from "00" up to the last value ≤ max.
+ */
+export declare function buildOptions(max: number, step: number): Array<string>;

package/dist/packages/components/TimePicker/utils/buildOptions/buildOptions.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/components/TimePicker/utils/getSegment/getSegment.d.ts

@@ -0,0 +1,9 @@
+import { TimePickerValue, TimeUnit } from '../../TimePicker';
+/**
+ * Extracts a unit segment from a TimePickerValue, normalized as a 2-digit padded string.
+ *
+ * @param value - The current TimePicker value, or `null` for the empty state.
+ * @param unit - The unit to extract (`"hours"`, `"minutes"`, or `"seconds"`).
+ * @returns The padded 2-digit string for the unit, or `null` when absent or empty.
+ */
+export declare function getSegment(value: TimePickerValue | null, unit: TimeUnit): string | null;

package/dist/packages/components/TimePicker/utils/getSegment/getSegment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/index.d.ts

@@ -61,6 +61,7 @@ import { default as Tabs } from './components/Tabs/Tabs/Tabs';
 import { default as Tag } from './components/Tag/Tag';
 import { default as TextInput } from './components/TextInput/TextInput';
 import { default as TimeField } from './components/TimeField/TimeField';
+import { default as TimePicker } from './components/TimePicker/TimePicker';
 import { default as Timeline } from './components/Timeline/Timeline';
 import { default as Toaster } from './components/Toaster/Toaster';
 import { default as ToggleButton } from './components/ToggleButton/ToggleButton';
@@ -72,5 +73,5 @@ import { default as createMuiTheme } from './mui/mui-theme.ts';
 import { tokens, fontSize, lineHeight } from './ds-design-tokens/index';
 import { I18nProvider } from 'react-aria';
 import { toast } from 'sonner';
-export { Accordion, Badge, Breadcrumbs, Button, Calendar, CalendarCell, ChartLegend, ChartTooltip, Checkbox, CheckboxGroup, Chip, Combobox, createMuiTheme, DataTable, DataTableCell, DataTableHeader, DataTableRoot, DataTableRow, DatePicker, DateRangePicker, Drawer, Dropdown, DropdownListItem, EmptyState, FileUpload, Filter, fontSize, Header, I18nProvider, Icon, Label, LinearProgressBar, lineHeight, Link, List, Loader, Menu, MenuItem, Message, Modal, ModalContent, ModalActions, ModalForm, Navigation, NavigationItem, Notifications, NotificationCard, NumberField, PageLayout, Pagination, Popover, PopoverTrigger, Radio, RouterProvider, SearchBar, SegmentedControl, SegmentedControlButton, SegmentedControlList, SegmentedControlPanel, Select, SelectItem, Skeleton, Slider, Stepper, Step, Switch, Tab, TabList, TabPanel, Tabs, Tag, TextInput, TimeField, Timeline, toast, Toaster, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, tokens, YearMonthPicker, };
+export { Accordion, Badge, Breadcrumbs, Button, Calendar, CalendarCell, ChartLegend, ChartTooltip, Checkbox, CheckboxGroup, Chip, Combobox, createMuiTheme, DataTable, DataTableCell, DataTableHeader, DataTableRoot, DataTableRow, DatePicker, DateRangePicker, Drawer, Dropdown, DropdownListItem, EmptyState, FileUpload, Filter, fontSize, Header, I18nProvider, Icon, Label, LinearProgressBar, lineHeight, Link, List, Loader, Menu, MenuItem, Message, Modal, ModalContent, ModalActions, ModalForm, Navigation, NavigationItem, Notifications, NotificationCard, NumberField, PageLayout, Pagination, Popover, PopoverTrigger, Radio, RouterProvider, SearchBar, SegmentedControl, SegmentedControlButton, SegmentedControlList, SegmentedControlPanel, Select, SelectItem, Skeleton, Slider, Stepper, Step, Switch, Tab, TabList, TabPanel, Tabs, Tag, TextInput, TimeField, TimePicker, Timeline, toast, Toaster, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, tokens, YearMonthPicker, };
 export type { TypeTableColumnWithFilter };

package/dist/public_docs/components.md

@@ -60,6 +60,7 @@ title: Exhaustive list of all the Design System Components and their props
 - [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.
+- [TimePicker](node_modules/@agregio-solutions/design-system/dist/packages/components/TimePicker/doc.md) : A time picker using one dropdown Select per unit (hours, minutes, seconds) with configurable units, steps, and read-only mode — use it for a tabular, exploratory time selection as an alternative to the keyboard-segmented TimeField.
 - [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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.92.1",
+  "version": "1.93.0",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",