uikit-react-public 0.14.21 → 0.21.8

package/lib/components/Calendar/index.ts

@@ -1,6 +1,2 @@
 export { default } from './Calendar';
-export type {
-  CalendarProps,
-  CalendarEvent,
-  AcademicWeek,
-} from './Calendar.types';
+export type { CalendarProps, CalendarEvent, AcademicWeek } from './Calendar.types';

package/lib/components/Calendar/subcomponents/AcademicWeek.tsx

@@ -18,7 +18,8 @@ const AcademicWeek = ({ weekNumber }: AcademicWeekProps) => {
     height: 40px;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f14};
-    color: #6345a5; // TODO: Needs a sensible design token
+    /* color: #6345a5; */
+    color: ${theme.colour.text.brandPrimary};
   `;
 
   const style = cx(NAME, baseStyle);

package/lib/components/Calendar/subcomponents/AcademicWeeks.tsx

@@ -22,7 +22,7 @@ const AcademicWeeks = ({ date, weeks }: AcademicWeeksProps) => {
     flex-direction: column;
     padding-top: 32px;
     width: 50px;
-    background-color: ${theme.color.interaction.blue5};
+    background-color: ${theme.colour.surface.brand};
     user-select: none;
   `;
 

package/lib/components/Calendar/subcomponents/ColumnHeading.tsx

@@ -19,8 +19,8 @@ const ColumnHeading = ({ index, day, isWeekend }: ColumnHeadingProps) => {
     width: 40px;
     height: 32px;
     color: ${isWeekend
-      ? theme.color.system.orange100
-      : theme.color.neutral.grey60};
+      ? theme.colour.text.warningOnBgFill
+      : theme.colour.text.secondary};
     font-weight: 700;
   `;
 

package/lib/components/Calendar/subcomponents/Controls.tsx

@@ -32,7 +32,7 @@ const Controls = ({ month, changeMonth }: ControlsProps) => {
     cursor: pointer;
 
     &:hover {
-      color: ${theme.color.neutral.grey60};
+      color: ${theme.colour.icon.default};
     }
   `;
 

package/lib/components/Calendar/subcomponents/Day.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Day from './Day';
 
 const meta = {
-  title: 'Components/Work in progress/Calendar/Day',
+  title: 'Components/Calendar/Day',
   component: Day,
   argTypes: {
     events: {

package/lib/components/Calendar/subcomponents/Day.tsx

@@ -42,25 +42,24 @@ const Day = ({
     position: relative;
     width: 40px;
     height: 40px;
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.fill.inverse};
     cursor: pointer;
     outline: none;
 
     &:hover {
-      background-color: ${theme.color.neutral.grey10};
+      background-color: ${theme.colour.fill.hover};
     }
 
     ${isSelected &&
     css`
-      /* background-color: ${theme.color.interaction.blue70}; */
       background-color: ${isDisabled
-        ? theme.color.neutral.grey10
-        : theme.color.interaction.blue70};
+        ? theme.colour.fill.disabled
+        : theme.colour.fill.brand};
 
-      color: ${theme.color.text.inverted};
+      color: ${theme.colour.text.inverse};
 
       &:hover {
-        background-color: ${theme.color.interaction.blue100};
+        background-color: ${theme.colour.fill.brandHover};
       }
     `}
     ${isDisabled &&
@@ -68,7 +67,6 @@ const Day = ({
       cursor: not-allowed;
 
       &:hover {
-        /* background-color: ${theme.color.neutral.white}; */
         background-color: ${isSelected
           ? theme.color.neutral.grey10
           : theme.color.neutral.white};
@@ -91,7 +89,7 @@ const Day = ({
     `}
     ${isDisabled &&
     css`
-      color: ${theme.color.neutral.grey20};
+      color: ${theme.colour.text.disabled};
     `}
   `;
 

package/lib/components/Calendar/subcomponents/EventDot.tsx

@@ -11,14 +11,11 @@ interface EventDotProps {
 const EventDot = ({ inverted, inCurrentMonth }: EventDotProps) => {
   const [theme] = useTheme();
 
-  const invertedColour = theme.color.neutral.white;
-  const outOfCurrentMonthColour = '#8C8C8C'; // TODO: Needs adding to `defaultTheme.ts`, as a design token
-
   const backgroundColour = inCurrentMonth
     ? inverted
-      ? invertedColour
-      : theme.color.interaction.blue70
-    : outOfCurrentMonthColour;
+      ? theme.colour.icon.inverse
+      : theme.colour.icon.brand
+    : theme.colour.icon.tertiary;
 
   const baseStyle = css`
     width: 6px;

package/lib/components/Calendar/subcomponents/index.ts

@@ -4,4 +4,4 @@ export { default as AcademicWeek } from './AcademicWeek';
 export { default as Grid } from './Grid';
 export { default as ColumnHeading } from './ColumnHeading';
 export { default as Day } from './Day';
-export { default as EventDot } from './EventDot';
+export { default as EventDot } from './EventDot';

package/lib/components/Calendar/utils/getDatesForCalendarGrid/getDatesForCalendarGrid.ts

@@ -17,15 +17,24 @@
  * ```
  */
 const getDatesForCalendarGrid = (date: Date): Date[] => {
-  if (!date || !(date instanceof Date)) throw new Error('No date provided');
+  if (!date || !(date instanceof Date))
+    throw new Error('No date provided');
 
   const month = date.getMonth();
-  const daysInMonth = new Date(date.getFullYear(), month + 1, 0).getDate();
+  const daysInMonth = new Date(
+    date.getFullYear(),
+    month + 1,
+    0
+  ).getDate();
 
   // Get all days in current month
   const dates: Date[] = [];
   for (let day = 1; day <= daysInMonth; day++) {
-    const newDate = new Date(date.getFullYear(), month, day);
+    const newDate = new Date(
+      date.getFullYear(),
+      month,
+      day
+    );
     if (newDate.getMonth() !== month) break;
     dates.push(newDate);
   }
@@ -34,14 +43,28 @@ const getDatesForCalendarGrid = (date: Date): Date[] => {
   // Sunday (0) should become 6
   // Monday (1) should become 0
   // Tuesday (2) should become 1, etc.
-  const adjustDay = (day: number): number => (day === 0 ? 6 : day - 1);
+  const adjustDay = (day: number): number =>
+    day === 0 ? 6 : day - 1;
 
   // Calculate previous month's "grey days"
   const prevMonthGreyDays = [];
-  const prevMonth = new Date(date.getFullYear(), month - 1, 1);
-  const firstDayOfMonth = new Date(date.getFullYear(), month, 1).getDay();
-  const numberOfDaysFromPrevMonth = adjustDay(firstDayOfMonth);
-  const totalDaysInPrevMonth = new Date(date.getFullYear(), month, 0).getDate();
+  const prevMonth = new Date(
+    date.getFullYear(),
+    month - 1,
+    1
+  );
+  const firstDayOfMonth = new Date(
+    date.getFullYear(),
+    month,
+    1
+  ).getDay();
+  const numberOfDaysFromPrevMonth =
+    adjustDay(firstDayOfMonth);
+  const totalDaysInPrevMonth = new Date(
+    date.getFullYear(),
+    month,
+    0
+  ).getDate();
 
   for (let i = numberOfDaysFromPrevMonth; i > 0; i--) {
     prevMonthGreyDays.push(
@@ -55,17 +78,26 @@ const getDatesForCalendarGrid = (date: Date): Date[] => {
 
   // Calculate next month's "grey days"
   const nextMonthGreyDays = [];
-  const nextMonth = new Date(date.getFullYear(), month + 1, 1);
+  const nextMonth = new Date(
+    date.getFullYear(),
+    month + 1,
+    1
+  );
   const lastDayOfMonth = new Date(
     date.getFullYear(),
     month,
     daysInMonth
   ).getDay();
-  const numberOfDaysFromNextMonth = 6 - adjustDay(lastDayOfMonth);
+  const numberOfDaysFromNextMonth =
+    6 - adjustDay(lastDayOfMonth);
 
   for (let i = 1; i <= numberOfDaysFromNextMonth; i++) {
     nextMonthGreyDays.push(
-      new Date(nextMonth.getFullYear(), nextMonth.getMonth(), i)
+      new Date(
+        nextMonth.getFullYear(),
+        nextMonth.getMonth(),
+        i
+      )
     );
   }
 

package/lib/components/Calendar/utils/normaliseMonth/normaliseMonth.test.ts

@@ -2,15 +2,15 @@ import { describe, expect, test } from 'vitest';
 import normaliseMonth from './normaliseMonth';
 
 describe('Calendar: normaliseMonth', () => {
-  test('Should return null if given undefined', () => {
+  test("Should return null if given undefined", () => {
     expect(normaliseMonth(undefined)).toBeNull();
   });
 
-  test('Should return null if given null', () => {
+  test("Should return null if given null", () => {
     expect(normaliseMonth(null)).toBeNull();
   });
 
-  test('Returns a Date object set to the first of the month', () => {
+  test("Returns a Date object set to the first of the month", () => {
     const date = new Date('2025-03-10');
     const normalisedDate = normaliseMonth(date);
     expect(normalisedDate).toBeInstanceOf(Date);
@@ -19,7 +19,7 @@ describe('Calendar: normaliseMonth', () => {
     expect(normalisedDate?.getDate()).toBe(1);
   });
 
-  test('Works for a date within daylight saving time', () => {
+  test("Works for a date within daylight saving time", () => {
     const date = new Date('2025-06-15');
     const normalisedDate = normaliseMonth(date);
     expect(normalisedDate).toBeInstanceOf(Date);
@@ -28,7 +28,7 @@ describe('Calendar: normaliseMonth', () => {
     expect(normalisedDate?.getDate()).toBe(1);
   });
 
-  test('Returned date is normalised for midnight', () => {
+  test("Returned date is normalised for midnight", () => {
     const date = new Date('2025-01-01T12:34:56');
     const normalisedDate = normaliseMonth(date);
     expect(normalisedDate).toBeInstanceOf(Date);

package/lib/components/Checkbox/Checkbox.stories.tsx

@@ -4,7 +4,7 @@ import { useArgs } from '@storybook/preview-api';
 import Checkbox from './Checkbox';
 
 const meta = {
-  title: 'Components/Work in progress/Checkbox',
+  title: 'Components/Checkbox',
   component: Checkbox,
   argTypes: {
     checked: { control: { type: 'boolean' } },

package/lib/components/Checkbox/Checkbox.tsx

@@ -12,10 +12,10 @@ import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-checkbox';
 
-export interface CheckboxBaseProps
-  extends InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxBaseProps extends InputHTMLAttributes<HTMLInputElement> {
   indeterminate?: boolean;
   testId?: string;
+  ariaLabel?: string;
 }
 
 export type CheckboxProps = CheckboxBaseProps & MarginProps;
@@ -30,6 +30,7 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
       defaultChecked,
       disabled,
       testId = NAME,
+      ariaLabel,
       className,
       ...props
     },
@@ -61,7 +62,7 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
       border-radius: ${theme.radius.r2};
       outline: none;
       box-sizing: border-box;
-      color: ${theme.color.neutral.white};
+      color: ${theme.colour.icon.inverse};
       transition:
         background-color 0.15s ease-out,
         border-color 0.15s ease-out;
@@ -75,19 +76,19 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
     `;
 
     const checkedStyle = css`
-      background-color: ${theme.color.interaction.blue70};
-      border-color: ${theme.color.interaction.blue70};
-      color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.icon.brand};
+      border-color: ${theme.colour.icon.brand};
+      color: ${theme.colour.icon.inverse};
     `;
 
     const uncheckedStyle = css`
-      background-color: ${theme.color.neutral.white};
-      border-color: ${theme.color.neutral.grey60};
+      background-color: ${theme.colour.icon.inverse};
+      border-color: ${theme.colour.speciality.inputDefault};
     `;
 
     const disabledStyle = css`
-      background-color: ${theme.color.neutral.grey20};
-      border-color: ${theme.color.neutral.grey20};
+      background-color: ${theme.colour.icon.disabled};
+      border-color: ${theme.colour.icon.disabled};
       cursor: not-allowed;
     `;
 
@@ -140,6 +141,7 @@ const Checkbox = forwardRef<Ref, CheckboxProps>(
           ref={ref}
           className={hiddenInputStyle}
           data-testid={testId}
+          aria-label={ariaLabel}
           {...(isControlled ? { checked } : { defaultChecked })}
           disabled={disabled}
           onChange={handleChange}

package/lib/components/Checkbox/__tests__/Checkbox.test.tsx

@@ -96,4 +96,33 @@ describe('Checkbox', () => {
     await user.click(checkbox);
     expect(checkbox.checked).toBe(false);
   });
+
+  // Accessibility tests
+
+  test('ariaLabel prop is applied to the input as aria-label', () => {
+    render(
+      <ThemeContextProvider>
+        <Checkbox ariaLabel='Select John Smith' />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Select John Smith'
+    );
+  });
+
+  test('aria-label passed via spread props overrides ariaLabel', () => {
+    render(
+      <ThemeContextProvider>
+        <Checkbox
+          ariaLabel='Default label'
+          aria-label='Override label'
+        />
+      </ThemeContextProvider>
+    );
+    expect(screen.getByRole('checkbox')).toHaveAttribute(
+      'aria-label',
+      'Override label'
+    );
+  });
 });

package/lib/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Checkbox > snapshot: checked prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-1g4adr4"
+  class="ucl-uikit-checkbox css-xzd91z"
 >
   <input
     checked=""
@@ -32,7 +32,7 @@ exports[`Checkbox > snapshot: checked prop 1`] = `
 
 exports[`Checkbox > snapshot: indeterminate prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-1g4adr4"
+  class="ucl-uikit-checkbox css-xzd91z"
 >
   <input
     class="css-nzy7im"
@@ -64,7 +64,7 @@ exports[`Checkbox > snapshot: indeterminate prop 1`] = `
 
 exports[`Checkbox > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-checkbox css-cg31xm"
+  class="ucl-uikit-checkbox css-tumlz"
 >
   <input
     class="css-nzy7im"
@@ -76,7 +76,7 @@ exports[`Checkbox > snapshot: no props 1`] = `
 
 exports[`Checkbox > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-checkbox css-cg31xm"
+  class="ucl-uikit-checkbox css-tumlz"
 >
   <input
     class="css-nzy7im"

package/lib/components/Datepicker/Datepicker.lld.md

@@ -0,0 +1,108 @@
+# Datepicker - Low-level design documentation
+
+## Overview
+
+The `<Datepicker>` allows the user to enter a date into the system.
+
+By default, it is a 'custom' implementation built using React logic.
+
+A 'browser-native' implementation is also available from this component, using prop `native={true}`.
+
+## Design specifications
+
+- Figma: [UCL Design System - UIKit Datepicker](https://www.figma.com/design/8Sm5PxWOWJYpYXAzhRzUzt/UCL-Design-System-UI-Kit?node-id=6531-3397)
+
+## Conceptual model
+
+The Calendar displayed is a separate UI 'unit' in the Design System, so it is imported rather than defined in this component.
+
+There are additional useful features, such as displaying when 'events' are in the calendar. The Datepicker needs to pass these to the Calendar.
+
+The Datepicker supports minimum & maximum dates, and validates against a date being outside this range.
+
+### User interaction
+
+The user wants to enter a date into the system. They do this by clicking on the datepicker and typing. This is the **primary** interaction model.
+
+The user might also want to see and then select a date from the calendar view. This is the **secondary** interaction model.
+
+## Implementation details
+
+As much as possible, all core logic should be defined in `<CustomDatepicker>`. Subcomponents should be simple and focused on a single responsibility.
+
+### Props
+
+The Datepicker receives a `Date` object via `value`, and returns a `Date` object via `onValueChange`. `onValueChange` also returns the raw event object as its second argument, in case the consumer needs to access it. This aligns with the props pattern used by other form-field-level components in `uikit-react`.
+
+### Subcomponents
+
+- `<CustomDatepicker>`: The default implementation of the Datepicker, built using React logic.
+- `<VisibleField>`: Handles the part of the Datepicker that is _always_ visible to the user -- as a 'form field' input. Composes the controlled input and buttons for opening the calendar and clearing the field.
+- `<DatepickerInput>`: The input field for the Datepicker, used in the custom implementation.
+- `<Panel>`: Wrapper component that handles positioning.
+- `<NativeDatepicker>`: An alternative implementation of the Datepicker, using the browser's native date input.
+
+**Additional components:**
+- `<Calendar>`: Imported as a separate component and passed as child to `<Panel>`.
+
+#### Subcomponent hierarchy
+
+```mermaid
+graph TD
+    A[Datepicker] -->| native=false | B[CustomDatepicker]
+    A -->| native=true | C[NativeDatepicker]
+    B --> D[VisibleField]
+    D --> E[DatepickerInput]
+    B --> F[Panel]
+    F --> G[Calendar]
+```
+
+### Date parsing
+
+After the user types a date into the input, they need to press ENTER or TAB to parse the date.
+
+### Accessibility
+
+Utility function [`announce`](../../utils/announce.ts) is used to provide screen-reader feedback when a date is selected. Places where this is used:
+
+- When a date is 'picked' with the Calendar
+- When a date is entered into the input field and successfully parsed.
+
+`announce` is only called in `CustomDatepicker`.
+
+Automatic association of `<Label>` with `DatepickerInput` when `<Datepicker>` is in a `<Field>` would improve default accessibility -- described in [Datepicker_improv_004]. 
+
+## Known issues
+
+- **[Datepicker_issue_001]**: The Calendar itself, when rendered in the Panel, may not pass Accessibility tests. However, we expect users with Accessibility needs are able to successfully enter a date using the controlled input.
+  - The Calendar panel lacks ARIA roles (`role="dialog"`, `role="grid"`, `aria-selected`, etc.), keyboard navigation (arrow keys between days, Escape to close), and the calendar toggle in `<VisibleField>` is a `<div>` with `role="button"` rather than a native `<button>`. This is a WCAG 2.2 AA compliance risk.
+- **[Datepicker_issue_002]**: The Panel only appears below the Datepicker's visible field. If the Datepicker is close to the bottom of the browser viewport, this increases the viewport size while the Panel is open (temporarily).
+- **[Datepicker_issue_003]**: `minDate` and `maxDate` are ISO date strings (`'YYYY-MM-DD'`), which are parsed via `new Date(string)` in several places (`CustomDatepicker.tsx`, `parseInputValue.ts`). This creates UTC dates, not local dates, causing off-by-one day bugs in timezones behind UTC. Options:
+  - **Option A**: Create a `parseISODateLocal` utility that splits the string and uses `new Date(year, month - 1, day)`, and use it everywhere.
+  - **Option B**: Change `minDate`/`maxDate` to accept `Date` objects instead of strings, aligning with the `value` prop. This would push the parsing responsibility to the consumer and eliminate the UTC ambiguity entirely.
+- **[Datepicker_issue_004]**: The Calendar panel renders inside the component's DOM tree, so it can be clipped by `overflow: hidden` ancestors. Fix: [Datepicker_improv_002].
+- **[Datepicker_issue_005]**: Date handling uses raw `Date` objects with no timezone awareness or locale-aware formatting. Input parsing is hardcoded to `DD/MM/YYYY`.
+
+## Suggested future improvements
+
+- **[Datepicker_improv_001]**: Extract `<Panel>` into a shared utility component.
+  - `<Select>` also uses a similar Panel (etc).
+- **[Datepicker_improv_002]**: Use library [Floating UI](https://floating-ui.com/) to handle Panel positioning and portalling (via `FloatingPortal`).
+  - Fix for [Datepicker_issue_002] and [Datepicker_issue_004].
+- **[Datepicker_improv_003]**: Extract `<NativeDatepicker>` into a separate component.
+  - This would simplify props typing.
+  - This would remove the need for `Datepicker.tsx` itself to act as a 'routing' component.
+- **[Datepicker_improv_004]**: Integrate `<Datepicker>` with `<Field>` and `<Label>`, to use the shared context solution already used in `<Input>` & `<Textarea>`.
+  - This would simplify the API for consumers, and ensure consistent behaviour across form-field-level components.
+    - Developers using these components get automatic label->input association without having to manually pass `id` and `htmlFor` props.
+- **[Datepicker_improv_005]**: Separate the button that opens the Calendar and the button that clears the input field, so they can be seen & used independently -- currently they are conditionally rendered with joined logic.
+- **[Datepicker_improv_006]**: Extract the button that opens the Calendar into a separate subcomponent, for cleaner composition in the return statement of `VisibleField`.
+- **[Datepicker_improv_007]**: Extract the button that clears the input field into a separate subcomponent, for cleaner composition in the return statement of `VisibleField`.
+- **[Datepicker_improv_008]**: Extract core logic from `<CustomDatepicker>` into a `useDatepicker` hook. Benefits:
+  - **Testability**: Hook logic can be tested in isolation with `renderHook()`, without rendering the full component tree.
+  - **Reusability**: Logic can be shared across variants (e.g. date range picker, inline calendar, mobile-specific version).
+  - **Composition**: Consumers could use the hook directly for advanced/custom layouts.
+  - **Debugging**: Cleanly separates logic bugs from rendering bugs.
+  - **Performance**: Allows more granular control over which state changes trigger re-renders.
+- **[Datepicker_improv_009]**: Adopt a date utility library (`date-fns` or `dayjs`) to replace manual string parsing and provide timezone/locale support.
+  - Fix for [Datepicker_issue_005].

package/lib/components/Datepicker/Datepicker.stories.tsx

@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
 import Datepicker from './Datepicker';
+import Field from '../Field';
+import Label from '../Label';
 
 const meta = {
-  title: 'Components/Ready to use/Datepicker',
+  title: 'Components/Datepicker',
   component: Datepicker,
   parameters: { layout: 'padded' },
   argTypes: {
@@ -11,7 +13,7 @@ const meta = {
     minDate: { control: { type: 'date' } },
     maxDate: { control: { type: 'date' } },
     disabled: { control: { type: 'boolean' } },
-    native: { control: { type: 'boolean' } },
+    clearable: { control: { type: 'boolean' } },
     showAcademicWeeks: { control: { type: 'boolean' } },
   },
   tags: ['autodocs'],
@@ -49,6 +51,42 @@ export const Default: Story = {
   },
 };
 
+export const InAField: Story = {
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null | undefined) =>
+      updateArgs({ value: value });
+
+    // Could be `useId` or a hardcoded string..
+    const datepickerInputId = 'datepicker-input';
+    // TODO: Associate <Label> and <DatepickerInput> via <Field> context automatically -- [Datepicker_improv_004]
+    return (
+      <Field>
+        <Label htmlFor={datepickerInputId}>Date of event</Label>
+        <Field.HelperText>
+          Please enter your preferred date for the event
+        </Field.HelperText>
+        <Datepicker
+          {...args}
+          onValueChange={onValueChange}
+          inputProps={{ id: datepickerInputId }}
+        />
+      </Field>
+    );
+  },
+};
+
 // Story repeated in Calendar.stories.tsx
 export const WithEvents: Story = {
   name: 'With events',
@@ -237,10 +275,11 @@ export const MinMaxDates: Story = {
   },
 };
 
-export const Native: Story = {
-  name: 'As native fallback',
+export const Clearable: Story = {
+  name: 'With clearable',
   args: {
-    native: true,
+    clearable: true,
+    value: new Date(), // Start with a value to show the clear button
   },
   render: () => {
     const [args, updateArgs] = useArgs();

package/lib/components/Datepicker/Datepicker.tsx

@@ -1,5 +1,4 @@
-import { NativeDatepicker, CustomDatepicker } from './subcomponents';
-import { dateToLocaleISOString } from './utils';
+import { CustomDatepicker } from './subcomponents';
 import type { DatepickerProps } from './Datepicker.types';
 
 const Datepicker = ({
@@ -9,42 +8,21 @@ const Datepicker = ({
   maxDate,
   disabled,
   className,
-  native,
-  nativeRef,
-  nativeHTMLAttributes,
+  clearable,
   ...props
 }: DatepickerProps) => {
-  if (native) {
-    const nativeValue = dateToLocaleISOString(value);
-
-    return (
-      <NativeDatepicker
-        value={nativeValue || ''}
-        onChange={(event) => {
-          const dateString = event.target.value;
-          onValueChange?.(dateString ? new Date(dateString) : null, event);
-        }}
-        min={minDate || undefined}
-        max={maxDate || undefined}
-        disabled={disabled}
-        className={className}
-        ref={nativeRef}
-        {...nativeHTMLAttributes}
-      />
-    );
-  } else {
-    return (
-      <CustomDatepicker
-        value={value}
-        onValueChange={onValueChange}
-        minDate={minDate}
-        maxDate={maxDate}
-        className={className}
-        disabled={disabled}
-        {...props}
-      />
-    );
-  }
+  return (
+    <CustomDatepicker
+      value={value}
+      onValueChange={onValueChange}
+      minDate={minDate}
+      maxDate={maxDate}
+      className={className}
+      disabled={disabled}
+      clearable={clearable}
+      {...props}
+    />
+  );
 };
 
 export default Datepicker;