@iota/apps-ui-kit 0.9.5 → 0.10.1

package/src/lib/components/molecules/date-picker/date-picker.helpers.ts

@@ -0,0 +1,67 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { DECADE_SIZE } from './date-picker.constants';
+import { DatePickerFormat } from './date-picker.enums';
+
+export function isSameDay(a: Date, b: Date): boolean {
+    return (
+        a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate()
+    );
+}
+
+export function startOfDay(date: Date): Date {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+/** Returns true when date falls outside the [min, max] inclusive range. */
+export function isDateDisabled(date: Date, min?: Date, max?: Date): boolean {
+    const d = startOfDay(date);
+    if (min && d < startOfDay(min)) return true;
+    if (max && d > startOfDay(max)) return true;
+    return false;
+}
+
+/** Returns true when every day in year is outside [min, max]. */
+export function isYearDisabled(year: number, min?: Date, max?: Date): boolean {
+    if (min && new Date(year, 11, 31) < startOfDay(min)) return true;
+    if (max && new Date(year, 0, 1) > startOfDay(max)) return true;
+    return false;
+}
+
+export function formatDate(date: Date, format: DatePickerFormat): string {
+    const year = String(date.getFullYear());
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    switch (format) {
+        case DatePickerFormat.DayMonthYear:
+            return `${day}/${month}/${year}`;
+        case DatePickerFormat.MonthDayYear:
+            return `${month}/${day}/${year}`;
+        case DatePickerFormat.YearMonthDay:
+            return `${year}/${month}/${day}`;
+        default:
+            return `${day}/${month}/${year}`;
+    }
+}
+
+/**
+ * Builds the 6×7 grid of dates for the calendar day view
+ * starts on Sunday of the week containing the 1st of the month.
+ */
+export function buildCalendarGrid(year: number, month: number): Date[] {
+    const firstDay = new Date(year, month, 1);
+    const startOffset = firstDay.getDay(); // 0 = Sunday
+    const grid: Date[] = [];
+    for (let i = -startOffset; i < 42 - startOffset; i++) {
+        grid.push(new Date(year, month, 1 + i));
+    }
+    return grid;
+}
+
+/** Returns the first year of the decade that contains year */
+export function decadeStart(year: number): number {
+    return Math.floor(year / DECADE_SIZE) * DECADE_SIZE;
+}

package/src/lib/components/molecules/date-picker/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './DatePicker';
+export * from './date-picker.enums';

package/src/lib/components/molecules/index.ts

@@ -17,3 +17,4 @@ export * from './search';
 export * from './card';
 export * from './display-stats';
 export * from './visual-asset-card';
+export * from './date-picker';

package/src/lib/styles/components.css

@@ -26,6 +26,14 @@
         border-color: var(--badge-border-color-soft);
     }
 
+    .badge-border-color-outlined {
+        border-color: theme('colors.iota-neutral.40');
+    }
+
+    .badge-ring-outlined {
+        box-shadow: inset 0 0 0 1px theme('colors.iota-neutral.40');
+    }
+
     .badge-text-color-neutral {
         color: var(--badge-text-color-neutral);
     }
@@ -724,6 +732,87 @@
         color: var(--table-text-color);
     }
 
+    /* DATE PICKER */
+    .date-picker-trigger-text-color {
+        color: var(--date-picker-text-color);
+    }
+
+    .date-picker-trigger-placeholder-color {
+        color: var(--date-picker-trigger-placeholder-color);
+    }
+
+    .date-picker-trigger-border-color {
+        border-color: var(--date-picker-border-color);
+    }
+
+    .date-picker-trigger-border-hover-color {
+        border-color: var(--date-picker-trigger-border-hover-color);
+    }
+
+    .date-picker-trigger-border-focus-color {
+        border-color: var(--date-picker-focus-color);
+    }
+
+    .date-picker-trigger-border-error-color {
+        border-color: var(--date-picker-trigger-border-error-color);
+    }
+
+    .date-picker-calendar-bg {
+        background-color: var(--date-picker-calendar-bg);
+    }
+
+    .date-picker-calendar-border-color {
+        border-color: var(--date-picker-border-color);
+    }
+
+    .date-picker-header-text-color {
+        color: var(--date-picker-text-color);
+    }
+
+    .date-picker-nav-icon-color {
+        color: var(--date-picker-muted-text-color);
+    }
+
+    .date-picker-nav-bg-hover:enabled:hover {
+        background-color: var(--date-picker-hover-bg);
+    }
+
+    .date-picker-weekday-text-color {
+        color: var(--date-picker-muted-text-color);
+    }
+
+    .date-picker-day-text-color {
+        color: var(--date-picker-text-color);
+    }
+
+    .date-picker-day-bg-hover:enabled:hover {
+        background-color: var(--date-picker-hover-bg);
+    }
+
+    .date-picker-day-text-color-hover:enabled:hover {
+        color: var(--date-picker-text-color);
+    }
+
+    .date-picker-day-bg-selected {
+        background-color: var(--date-picker-day-bg-selected);
+    }
+
+    .date-picker-day-text-selected {
+        color: var(--date-picker-day-text-selected);
+    }
+
+    .date-picker-day-today-ring {
+        box-shadow: inset 0 0 0 1.5px var(--date-picker-focus-color);
+    }
+
+    .date-picker-day-text-disabled {
+        color: var(--date-picker-day-text-disabled);
+    }
+
+    .date-picker-day-text-outside-month {
+        color: var(--date-picker-day-text-outside-month);
+    }
+
     /* DIALOG */
     .dialog-outline {
         outline: var(--dialog-outline);

package/src/lib/styles/variables/dark-variables.css

@@ -256,6 +256,21 @@
     /* TABLE */
     --table-text-color: theme('colors.iota-neutral.60');
 
+    /* DATE PICKER */
+    --date-picker-text-color: theme('colors.iota-neutral.92');
+    --date-picker-trigger-placeholder-color: rgba(136, 146, 161, 0.4);
+    --date-picker-border-color: theme('colors.iota-neutral.20');
+    --date-picker-trigger-border-hover-color: theme('colors.iota-neutral.60');
+    --date-picker-focus-color: theme('colors.iota-primary.80');
+    --date-picker-trigger-border-error-color: theme('colors.iota-error.80');
+    --date-picker-calendar-bg: theme('colors.iota-neutral.6');
+    --date-picker-muted-text-color: theme('colors.iota-neutral.60');
+    --date-picker-hover-bg: theme('colors.iota-neutral.12');
+    --date-picker-day-bg-selected: theme('colors.iota-primary.30');
+    --date-picker-day-text-selected: theme('colors.iota-primary.100');
+    --date-picker-day-text-disabled: theme('colors.iota-neutral.60');
+    --date-picker-day-text-outside-month: theme('colors.iota-neutral.40');
+
     /* DIALOG */
     --dialog-outline: none;
     --dialog-overlay-bg: theme('colors.shader-neutral-light.48');

package/src/lib/styles/variables/light-variables.css

@@ -270,6 +270,21 @@
     /* TABLE */
     --table-text-color: theme('colors.iota-neutral.40');
 
+    /* DATE PICKER */
+    --date-picker-text-color: theme('colors.iota-neutral.10');
+    --date-picker-trigger-placeholder-color: rgba(84, 94, 110, 0.4);
+    --date-picker-border-color: theme('colors.iota-neutral.80');
+    --date-picker-trigger-border-hover-color: theme('colors.iota-neutral.50');
+    --date-picker-focus-color: theme('colors.iota-primary.30');
+    --date-picker-trigger-border-error-color: theme('colors.iota-error.30');
+    --date-picker-calendar-bg: theme('colors.iota-neutral.100');
+    --date-picker-muted-text-color: theme('colors.iota-neutral.40');
+    --date-picker-hover-bg: theme('colors.iota-neutral.92');
+    --date-picker-day-bg-selected: theme('colors.iota-primary.30');
+    --date-picker-day-text-selected: theme('colors.iota-primary.100');
+    --date-picker-day-text-disabled: theme('colors.iota-neutral.40');
+    --date-picker-day-text-outside-month: theme('colors.iota-neutral.60');
+
     /* DIALOG */
     --dialog-outline: none;
     --dialog-overlay-bg: theme('colors.shader-neutral-light.48');

package/src/lib/styles/variables/names-variables.css

@@ -267,4 +267,19 @@
 
     /* TABLE */
     --table-text-color: theme('colors.names-neutral.70');
+
+    /* DATE PICKER */
+    --date-picker-text-color: theme('colors.names-neutral.92');
+    --date-picker-trigger-placeholder-color: rgba(136, 146, 161, 0.4);
+    --date-picker-border-color: theme('colors.names-neutral.20');
+    --date-picker-trigger-border-hover-color: theme('colors.names-neutral.60');
+    --date-picker-focus-color: theme('colors.names-primary.80');
+    --date-picker-trigger-border-error-color: theme('colors.names-error.80');
+    --date-picker-calendar-bg: theme('colors.names-neutral.6');
+    --date-picker-muted-text-color: theme('colors.names-neutral.70');
+    --date-picker-hover-bg: theme('colors.names-neutral.12');
+    --date-picker-day-bg-selected: theme('colors.names-primary.30');
+    --date-picker-day-text-selected: theme('colors.names-primary.100');
+    --date-picker-day-text-disabled: theme('colors.names-neutral.60');
+    --date-picker-day-text-outside-month: theme('colors.names-neutral.40');
 }

package/src/storybook/stories/design-tokens/{colors.stories.mdx → colors.mdx}

@@ -1,4 +1,4 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
 import {
     IOTA_PRIMITIVES_COLOR_PALETTE,
     IOTA_NAMES_COLOR_PALETTE,

package/src/storybook/stories/design-tokens/{icons.stories.mdx → icons.mdx}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
+import { Meta, Title, IconGallery, IconItem } from '@storybook/addon-docs/blocks';
 import * as Icons from '@iota/apps-ui-icons';
 import { DocsSyncTheme } from '../components';
 

package/src/storybook/stories/design-tokens/{typeset.stories.mdx → typeset.mdx}

@@ -1,4 +1,4 @@
-import { Meta, Typeset, Unstyled } from '@storybook/blocks';
+import { Meta, Typeset, Unstyled } from '@storybook/addon-docs/blocks';
 import { TYPESETS } from '../../constants';
 import { TypeSet, TypeSetItem } from '../../blocks';
 import { DocsSyncTheme } from '../components';

package/src/storybook/stories/design-tokens/{variable-spacing.stories.mdx → variable-spacing.mdx}

@@ -1,4 +1,4 @@
-import { Meta, Typeset, Unstyled } from '@storybook/blocks';
+import { Meta, Typeset, Unstyled } from '@storybook/addon-docs/blocks';
 import { VariableSpacingShowcase, DocsSyncTheme } from '../components';
 
 <DocsSyncTheme />

package/src/storybook/stories/molecules/DatePicker.stories.tsx

@@ -0,0 +1,132 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { DatePicker, DatePickerFormat } from '@/components/molecules/date-picker';
+
+const meta: Meta<typeof DatePicker> = {
+    component: DatePicker,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        dateFormat: {
+            control: { type: 'select' },
+            options: Object.values(DatePickerFormat),
+        },
+    },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Select Date',
+        caption: 'Choose a date from the calendar',
+        placeholder: 'DD/MM/YYYY',
+        dateFormat: DatePickerFormat.DayMonthYear,
+    },
+    render: (args) => {
+        const [date, setDate] = useState<Date | undefined>(undefined);
+        return (
+            <div className="w-72 pb-80">
+                <DatePicker {...args} value={date} onChange={setDate} />
+            </div>
+        );
+    },
+};
+
+export const WithDateFormat: Story = {
+    args: {
+        label: 'Format DD/MM/YYYY',
+        caption: 'Change the date format from the controls ',
+        dateFormat: DatePickerFormat.DayMonthYear,
+    },
+    render: (args) => {
+        const [date, setDate] = useState<Date | undefined>(new Date(2026, 3, 15));
+        return (
+            <div className="w-72 pb-80">
+                <DatePicker {...args} value={date} onChange={setDate} />
+            </div>
+        );
+    },
+};
+
+export const WithMinMaxLimitsInclusive: Story = {
+    name: 'Min & Max (inclusive)',
+    args: {
+        label: 'April 2026 only',
+        caption: 'Min = Apr 1 · Max = Apr 30 · both selectable',
+        dateFormat: DatePickerFormat.DayMonthYear,
+    },
+    render: (args) => {
+        const minDate = new Date(2026, 3, 1); // April 1 2026
+        const maxDate = new Date(2026, 3, 30); // April 30 2026
+        const [date, setDate] = useState<Date | undefined>(undefined);
+        return (
+            <div className="w-72 pb-80">
+                <DatePicker
+                    {...args}
+                    value={date}
+                    onChange={setDate}
+                    minDate={minDate}
+                    maxDate={maxDate}
+                />
+            </div>
+        );
+    },
+};
+
+export const YearPickerNavigation: Story = {
+    name: 'Year picker (click "Month Year")',
+    args: {
+        label: 'Birth date',
+        caption: 'Click "April 2026" header to jump to any year',
+        dateFormat: DatePickerFormat.DayMonthYear,
+    },
+    render: (args) => {
+        const [date, setDate] = useState<Date | undefined>(undefined);
+        return (
+            <div className="w-72 pb-80">
+                <DatePicker {...args} value={date} onChange={setDate} />
+            </div>
+        );
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        label: 'Expiry Date',
+        errorMessage: 'Date is required',
+        placeholder: 'DD/MM/YYYY',
+        dateFormat: DatePickerFormat.DayMonthYear,
+    },
+    render: (args) => {
+        const [date, setDate] = useState<Date | undefined>(undefined);
+        return (
+            <div className="w-72 pb-80">
+                <DatePicker {...args} value={date} onChange={setDate} />
+            </div>
+        );
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        label: 'Locked Date',
+        caption: 'This field is disabled',
+        disabled: true,
+        dateFormat: DatePickerFormat.DayMonthYear,
+    },
+    render: (args) => {
+        return (
+            <div className="w-72">
+                <DatePicker {...args} value={new Date(2026, 0, 1)} />
+            </div>
+        );
+    },
+};