@iota/apps-ui-kit 0.9.5 → 0.10.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.9.5",
+  "version": "0.10.1",
   "sideEffects": false,
-  "repository": "https://github.com/iotaledger/iota",
+  "repository": "https://github.com/iotaledger/ts-packages",
   "license": "Apache-2.0",
   "files": [
     "CHANGELOG.md",
@@ -12,9 +12,9 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.umd.js"
     },
     "./styles": "./dist/style.css"
   },
@@ -34,32 +34,28 @@
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.0",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-interactions": "^7.1.0",
-    "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-themes": "^7.6.20",
-    "@storybook/blocks": "^7.1.0",
-    "@storybook/react": "^7.1.0",
-    "@storybook/react-vite": "^7.1.0",
+    "@chromatic-com/storybook": "^5.1.2",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-themes": "^10.3.6",
+    "@storybook/react": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^24.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
+    "@vitejs/plugin-react-swc": "^4.3.0",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
     "memfs": "^4.11.1",
     "postcss": "^8.4.31",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^7.1.0",
-    "storybook-dark-mode": "^4.0.2",
+    "storybook": "^10.3.6",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.5.3",
-    "vite": "^5.4.12",
-    "vite-plugin-dts": "^4.3.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite": "^8.0.1",
+    "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {
     "prettier:check": "prettier -c --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",

package/src/lib/components/atoms/badge/Badge.tsx

@@ -2,8 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { BadgeSize } from './badge.enums';
-import type { BadgeType } from './badge.enums';
+import { BadgeSize, BadgeType } from './badge.enums';
 import { BACKGROUND_COLORS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
 
 interface BadgeProps {
@@ -25,6 +24,7 @@ export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): Rea
     const backgroundClasses = BACKGROUND_COLORS[type];
     const textClasses = TEXT_COLORS[type];
     const isSmall = size === BadgeSize.Small;
+    const isOutlined = type === BadgeType.Outlined;
     const labelClasses = label ? 'px-xs py-xxs' : 'h-1.5 w-1.5';
     const textSizeClass = isSmall ? 'text-label-sm' : 'text-label-md';
 
@@ -33,8 +33,9 @@ export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): Rea
             className={cx(
                 'inline-flex items-center space-x-2 rounded-full disabled:opacity-30',
                 { border: !isSmall },
-                backgroundClasses,
                 { [BORDER_COLORS[type]]: !isSmall },
+                { 'badge-ring-outlined': isSmall && isOutlined },
+                backgroundClasses,
                 labelClasses,
             )}
         >

package/src/lib/components/atoms/badge/badge.classes.ts

@@ -9,6 +9,7 @@ export const BACKGROUND_COLORS = {
     [BadgeType.PrimarySoft]: 'badge-bg-color-primary-soft',
     [BadgeType.Success]: 'bg-success-surface',
     [BadgeType.Warning]: 'bg-warning-surface',
+    [BadgeType.Outlined]: 'bg-transparent',
     [BadgeType.Error]: 'bg-error-surface',
 };
 
@@ -18,6 +19,7 @@ export const TEXT_COLORS: Record<BadgeType, string> = {
     [BadgeType.PrimarySoft]: 'badge-text-color-primary-soft',
     [BadgeType.Success]: 'text-on-success',
     [BadgeType.Warning]: 'text-on-warning',
+    [BadgeType.Outlined]: 'badge-text-color-neutral',
     [BadgeType.Error]: 'text-on-error',
 };
 
@@ -27,5 +29,6 @@ export const BORDER_COLORS: Record<BadgeType, string> = {
     [BadgeType.PrimarySoft]: 'badge-border-color-soft',
     [BadgeType.Success]: 'border-success-surface',
     [BadgeType.Warning]: 'border-warning-surface',
+    [BadgeType.Outlined]: 'badge-border-color-outlined',
     [BadgeType.Error]: 'border-error-surface',
 };

package/src/lib/components/atoms/badge/badge.enums.ts

@@ -7,6 +7,7 @@ export enum BadgeType {
     PrimarySoft = 'primary-soft',
     Success = 'success',
     Warning = 'warning',
+    Outlined = 'outlined',
     Error = 'error',
 }
 

package/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -25,7 +25,7 @@ interface KeyValueProps {
     /**
      * The tooltip text.
      */
-    tooltipText?: string;
+    tooltipText?: ReactNode;
     /**
      * The supporting label of the KeyValue (optional).
      */

package/src/lib/components/atoms/label-text/LabelText.tsx

@@ -28,7 +28,7 @@ interface LabelTextProps {
     /**
      * The text of the LabelText.
      */
-    text: string;
+    text: React.ReactNode;
     /**
      * The tooltip position.
      */

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useRef, useState, useLayoutEffect } from 'react';
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { TooltipPosition } from './tooltip.enums';
 
 interface TooltipProps {
-    text: string;
+    text: ReactNode;
     position?: TooltipPosition;
     maxWidth?: string;
     offset?: number;

package/src/lib/components/molecules/date-picker/DatePicker.tsx

@@ -0,0 +1,412 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import {
+    ArrowLeft,
+    ArrowRight,
+    Calendar,
+    DoubleArrowLeft,
+    DoubleArrowRight,
+} from '@iota/apps-ui-icons';
+import { ButtonUnstyled } from '@/components/atoms/button';
+import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
+import {
+    DATE_PICKER_CALENDAR_CLASSES,
+    DATE_PICKER_DAY_BASE_CLASSES,
+    DATE_PICKER_DAY_DISABLED_CLASSES,
+    DATE_PICKER_DAY_HOVER_CLASSES,
+    DATE_PICKER_DAY_OUTSIDE_MONTH_CLASSES,
+    DATE_PICKER_DAY_SELECTED_CLASSES,
+    DATE_PICKER_DAY_TODAY_CLASSES,
+    DATE_PICKER_HEADER_BUTTON_CLASSES,
+    DATE_PICKER_NAV_BUTTON_CLASSES,
+    DATE_PICKER_TRIGGER_CLASSES,
+    DATE_PICKER_WEEKDAY_CLASSES,
+    DATE_PICKER_YEAR_CELL_BASE_CLASSES,
+    DATE_PICKER_YEAR_CELL_CURRENT_CLASSES,
+    DATE_PICKER_YEAR_CELL_DISABLED_CLASSES,
+    DATE_PICKER_YEAR_CELL_HOVER_CLASSES,
+    DATE_PICKER_YEAR_CELL_SELECTED_CLASSES,
+} from './date-picker.classes';
+import { DatePickerFormat } from './date-picker.enums';
+import { DECADE_SIZE, YEAR_GRID_SIZE, MONTHS, WEEKDAYS } from './date-picker.constants';
+import {
+    startOfDay,
+    decadeStart,
+    isDateDisabled,
+    buildCalendarGrid,
+    isSameDay,
+    isYearDisabled,
+    formatDate,
+} from './date-picker.helpers';
+
+type CalendarView = 'days' | 'years';
+
+export interface DatePickerProps {
+    /**
+     * The currently selected date value.
+     */
+    value?: Date;
+    /**
+     * Callback fired when the user selects a date.
+     */
+    onChange?: (date: Date) => void;
+    /**
+     * The earliest selectable date (inclusive).
+     */
+    minDate?: Date;
+    /**
+     * The latest selectable date (inclusive).
+     */
+    maxDate?: Date;
+    /**
+     * Controls how the selected date is displayed in the trigger field.
+     */
+    dateFormat?: DatePickerFormat;
+    /**
+     * The field label shown above the trigger.
+     */
+    label?: string;
+    /**
+     * Caption text shown below the trigger.
+     */
+    caption?: string;
+    /**
+     * Error message; overrides caption when set.
+     */
+    errorMessage?: string;
+    /**
+     * Whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text shown when no date is selected.
+     */
+    placeholder?: string;
+}
+
+export function DatePicker({
+    value,
+    onChange,
+    minDate,
+    maxDate,
+    dateFormat = DatePickerFormat.DayMonthYear,
+    label,
+    caption,
+    errorMessage,
+    disabled,
+    placeholder = 'Select a date',
+}: DatePickerProps): React.JSX.Element {
+    const today = startOfDay(new Date());
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [calendarView, setCalendarView] = useState<CalendarView>('days');
+    const [viewYear, setViewYear] = useState(() => value?.getFullYear() ?? today.getFullYear());
+    const [viewMonth, setViewMonth] = useState(() => value?.getMonth() ?? today.getMonth());
+
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (value) {
+            setViewYear(value.getFullYear());
+            setViewMonth(value.getMonth());
+        }
+    }, [value]);
+
+    useEffect(() => {
+        if (!isOpen) setCalendarView('days');
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        function handleClickOutside(e: MouseEvent) {
+            if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        function handleKeyDown(e: KeyboardEvent) {
+            if (e.key === 'Escape') setIsOpen(false);
+        }
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen]);
+
+    function toggleOpen() {
+        if (!disabled) setIsOpen((prev) => !prev);
+    }
+
+    function navigatePrevMonth() {
+        if (viewMonth === 0) {
+            setViewMonth(11);
+            setViewYear((year) => year - 1);
+        } else {
+            setViewMonth((month) => month - 1);
+        }
+    }
+
+    function navigateNextMonth() {
+        if (viewMonth === 11) {
+            setViewMonth(0);
+            setViewYear((year) => year + 1);
+        } else {
+            setViewMonth((month) => month + 1);
+        }
+    }
+
+    function goBackTenYears() {
+        setViewYear((year) => year - DECADE_SIZE);
+    }
+
+    function goForwardTenYears() {
+        setViewYear((year) => year + DECADE_SIZE);
+    }
+
+    function goBackOneDecade() {
+        setViewYear((year) => decadeStart(year) - DECADE_SIZE);
+    }
+
+    function goToNextDecade() {
+        setViewYear((year) => decadeStart(year) + DECADE_SIZE);
+    }
+
+    function handleYearSelect(year: number) {
+        setViewYear(year);
+        setCalendarView('days');
+    }
+
+    function handleDayClick(date: Date) {
+        if (isDateDisabled(date, minDate, maxDate)) return;
+        onChange?.(date);
+        setIsOpen(false);
+    }
+
+    const calendarGrid = buildCalendarGrid(viewYear, viewMonth);
+
+    const decadeStartYear = decadeStart(viewYear);
+    const yearsInDecade = Array.from({ length: YEAR_GRID_SIZE }, (_, i) => decadeStartYear + i);
+
+    const canNavigateBackDecade =
+        !minDate || new Date(viewYear - DECADE_SIZE, viewMonth + 1, 0) >= startOfDay(minDate);
+    const canNavigateToPreviousMonth =
+        !minDate || new Date(viewYear, viewMonth, 0) >= startOfDay(minDate);
+    const canNavigateNextMonth =
+        !maxDate || new Date(viewYear, viewMonth + 1, 1) <= startOfDay(maxDate);
+    const canNavigateNextDecade =
+        !maxDate || new Date(viewYear + DECADE_SIZE, viewMonth, 1) <= startOfDay(maxDate);
+
+    const isPreviousDecadeAccessible =
+        !minDate || new Date(decadeStartYear - 1, 11, 31) >= startOfDay(minDate);
+    const isNextDecadeAccessible =
+        !maxDate || new Date(decadeStartYear + YEAR_GRID_SIZE, 0, 1) <= startOfDay(maxDate);
+
+    return (
+        <InputWrapper
+            label={label}
+            caption={caption}
+            disabled={disabled}
+            errorMessage={errorMessage}
+            labelHtmlTag={LabelHtmlTag.Div}
+        >
+            <div className="relative w-full" ref={wrapperRef}>
+                <ButtonUnstyled
+                    onClick={toggleOpen}
+                    disabled={disabled}
+                    aria-expanded={isOpen}
+                    aria-haspopup="dialog"
+                    aria-label={value ? formatDate(value, dateFormat) : placeholder}
+                    className={cx(DATE_PICKER_TRIGGER_CLASSES, {
+                        'date-picker-trigger-border-focus-color': isOpen,
+                    })}
+                >
+                    <span
+                        className={cx('block w-full text-start text-body-lg', {
+                            'date-picker-trigger-placeholder-color': !value,
+                            'date-picker-trigger-text-color': !!value,
+                        })}
+                    >
+                        {value ? formatDate(value, dateFormat) : placeholder}
+                    </span>
+                    <span className="input-icon-color flex-shrink-0">
+                        <Calendar />
+                    </span>
+                </ButtonUnstyled>
+
+                {isOpen && (
+                    <div
+                        role="dialog"
+                        aria-label="Date picker calendar"
+                        className={cx(DATE_PICKER_CALENDAR_CLASSES, 'w-[280px]')}
+                    >
+                        {calendarView === 'days' ? (
+                            <>
+                                <div className="mb-1 flex items-center justify-between">
+                                    <ButtonUnstyled
+                                        onClick={goBackTenYears}
+                                        disabled={!canNavigateBackDecade}
+                                        aria-label="Previous 10 years"
+                                        className={DATE_PICKER_NAV_BUTTON_CLASSES}
+                                    >
+                                        <DoubleArrowLeft />
+                                    </ButtonUnstyled>
+
+                                    <div className="flex flex-1 items-center justify-between px-1">
+                                        <ButtonUnstyled
+                                            onClick={navigatePrevMonth}
+                                            disabled={!canNavigateToPreviousMonth}
+                                            aria-label="Previous month"
+                                            className={DATE_PICKER_NAV_BUTTON_CLASSES}
+                                        >
+                                            <ArrowLeft />
+                                        </ButtonUnstyled>
+
+                                        <ButtonUnstyled
+                                            onClick={() => setCalendarView('years')}
+                                            aria-label="Select year"
+                                            className={DATE_PICKER_HEADER_BUTTON_CLASSES}
+                                        >
+                                            {MONTHS[viewMonth]} {viewYear}
+                                        </ButtonUnstyled>
+
+                                        <ButtonUnstyled
+                                            onClick={navigateNextMonth}
+                                            disabled={!canNavigateNextMonth}
+                                            aria-label="Next month"
+                                            className={DATE_PICKER_NAV_BUTTON_CLASSES}
+                                        >
+                                            <ArrowRight />
+                                        </ButtonUnstyled>
+                                    </div>
+
+                                    <ButtonUnstyled
+                                        onClick={goForwardTenYears}
+                                        disabled={!canNavigateNextDecade}
+                                        aria-label="Next 10 years"
+                                        className={DATE_PICKER_NAV_BUTTON_CLASSES}
+                                    >
+                                        <DoubleArrowRight />
+                                    </ButtonUnstyled>
+                                </div>
+
+                                <div className="mb-1 grid grid-cols-7">
+                                    {WEEKDAYS.map((day) => (
+                                        <div key={day} className={DATE_PICKER_WEEKDAY_CLASSES}>
+                                            {day}
+                                        </div>
+                                    ))}
+                                </div>
+
+                                <div className="grid grid-cols-7">
+                                    {calendarGrid.map((date, index) => {
+                                        const isCurrentMonth = date.getMonth() === viewMonth;
+                                        const isSelected = !!value && isSameDay(date, value);
+                                        const isToday = isSameDay(date, today);
+                                        const isDisabled = isDateDisabled(date, minDate, maxDate);
+                                        const isOutsideMonth = !isCurrentMonth;
+
+                                        return (
+                                            <div
+                                                key={index}
+                                                className="flex items-center justify-center p-0.5"
+                                            >
+                                                <ButtonUnstyled
+                                                    onClick={() => handleDayClick(date)}
+                                                    disabled={isDisabled || isOutsideMonth}
+                                                    aria-label={formatDate(
+                                                        date,
+                                                        DatePickerFormat.DayMonthYear,
+                                                    )}
+                                                    aria-selected={isSelected}
+                                                    aria-disabled={isDisabled || isOutsideMonth}
+                                                    className={cx(DATE_PICKER_DAY_BASE_CLASSES, {
+                                                        [DATE_PICKER_DAY_SELECTED_CLASSES]:
+                                                            isSelected,
+                                                        [DATE_PICKER_DAY_TODAY_CLASSES]:
+                                                            isToday && !isSelected,
+                                                        [DATE_PICKER_DAY_DISABLED_CLASSES]:
+                                                            isDisabled && !isOutsideMonth,
+                                                        [DATE_PICKER_DAY_OUTSIDE_MONTH_CLASSES]:
+                                                            isOutsideMonth,
+                                                        [DATE_PICKER_DAY_HOVER_CLASSES]:
+                                                            !isSelected &&
+                                                            !isDisabled &&
+                                                            !isOutsideMonth,
+                                                    })}
+                                                >
+                                                    {date.getDate()}
+                                                </ButtonUnstyled>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </>
+                        ) : (
+                            <>
+                                <div className="mb-2 flex items-center justify-between">
+                                    <ButtonUnstyled
+                                        onClick={goBackOneDecade}
+                                        disabled={!isPreviousDecadeAccessible}
+                                        aria-label="Previous decade"
+                                        className={DATE_PICKER_NAV_BUTTON_CLASSES}
+                                    >
+                                        <DoubleArrowLeft />
+                                    </ButtonUnstyled>
+
+                                    <span className="date-picker-header-text-color text-label-lg font-semibold">
+                                        {decadeStartYear} – {decadeStartYear + YEAR_GRID_SIZE - 1}
+                                    </span>
+
+                                    <ButtonUnstyled
+                                        onClick={goToNextDecade}
+                                        disabled={!isNextDecadeAccessible}
+                                        aria-label="Next decade"
+                                        className={DATE_PICKER_NAV_BUTTON_CLASSES}
+                                    >
+                                        <DoubleArrowRight />
+                                    </ButtonUnstyled>
+                                </div>
+
+                                <div className="grid grid-cols-3 gap-1">
+                                    {yearsInDecade.map((year) => {
+                                        const isSelected = value?.getFullYear() === year;
+                                        const isCurrent = today.getFullYear() === year;
+                                        const isDisabled = isYearDisabled(year, minDate, maxDate);
+
+                                        return (
+                                            <ButtonUnstyled
+                                                key={year}
+                                                onClick={() => handleYearSelect(year)}
+                                                disabled={isDisabled}
+                                                aria-label={String(year)}
+                                                aria-selected={isSelected}
+                                                className={cx(DATE_PICKER_YEAR_CELL_BASE_CLASSES, {
+                                                    [DATE_PICKER_YEAR_CELL_SELECTED_CLASSES]:
+                                                        isSelected,
+                                                    [DATE_PICKER_YEAR_CELL_CURRENT_CLASSES]:
+                                                        isCurrent && !isSelected,
+                                                    [DATE_PICKER_YEAR_CELL_DISABLED_CLASSES]:
+                                                        isDisabled,
+                                                    [DATE_PICKER_YEAR_CELL_HOVER_CLASSES]:
+                                                        !isSelected && !isDisabled,
+                                                })}
+                                            >
+                                                {year}
+                                            </ButtonUnstyled>
+                                        );
+                                    })}
+                                </div>
+                            </>
+                        )}
+                    </div>
+                )}
+            </div>
+        </InputWrapper>
+    );
+}

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

@@ -0,0 +1,42 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const DATE_PICKER_TRIGGER_CLASSES =
+    'date-picker-trigger-border-color focus-visible:enabled:date-picker-trigger-border-focus-color hover:enabled:date-picker-trigger-border-hover-color group-[.errored]:date-picker-trigger-border-error-color flex w-full flex-row items-center gap-x-3 rounded-lg border px-md py-sm disabled:cursor-not-allowed [&_svg]:h-5 [&_svg]:w-5';
+
+export const DATE_PICKER_CALENDAR_CLASSES =
+    'date-picker-calendar-bg date-picker-calendar-border-color absolute z-50 mt-1 rounded-lg border p-3 shadow-lg';
+
+export const DATE_PICKER_DAY_BASE_CLASSES =
+    'date-picker-day-text-color flex h-8 w-8 items-center justify-center rounded-full text-body-md transition-colors hover:delay-75';
+
+export const DATE_PICKER_DAY_HOVER_CLASSES =
+    'enabled:hover:date-picker-day-bg-hover enabled:hover:date-picker-day-text-color-hover cursor-pointer';
+
+export const DATE_PICKER_DAY_SELECTED_CLASSES =
+    'date-picker-day-bg-selected date-picker-day-text-selected cursor-pointer';
+
+export const DATE_PICKER_DAY_TODAY_CLASSES = 'date-picker-day-today-ring font-semibold';
+
+export const DATE_PICKER_DAY_DISABLED_CLASSES =
+    'date-picker-day-text-disabled cursor-not-allowed opacity-40';
+
+export const DATE_PICKER_DAY_OUTSIDE_MONTH_CLASSES =
+    'date-picker-day-text-outside-month cursor-default opacity-30';
+
+export const DATE_PICKER_WEEKDAY_CLASSES =
+    'date-picker-weekday-text-color flex h-8 w-8 items-center justify-center text-label-sm font-medium';
+
+export const DATE_PICKER_NAV_BUTTON_CLASSES =
+    'date-picker-nav-icon-color enabled:hover:date-picker-nav-bg-hover flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:delay-75 disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:h-4 [&_svg]:w-4';
+
+export const DATE_PICKER_HEADER_BUTTON_CLASSES =
+    'date-picker-header-text-color enabled:hover:date-picker-nav-bg-hover rounded-md px-1 py-0.5 text-label-lg font-semibold transition-colors hover:delay-75 shrink-0';
+
+export const DATE_PICKER_YEAR_CELL_BASE_CLASSES =
+    'date-picker-day-text-color flex w-full items-center justify-center rounded-lg py-2 text-body-md transition-colors hover:delay-75';
+
+export const DATE_PICKER_YEAR_CELL_HOVER_CLASSES = DATE_PICKER_DAY_HOVER_CLASSES;
+export const DATE_PICKER_YEAR_CELL_SELECTED_CLASSES = DATE_PICKER_DAY_SELECTED_CLASSES;
+export const DATE_PICKER_YEAR_CELL_CURRENT_CLASSES = DATE_PICKER_DAY_TODAY_CLASSES;
+export const DATE_PICKER_YEAR_CELL_DISABLED_CLASSES = DATE_PICKER_DAY_DISABLED_CLASSES;

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

@@ -0,0 +1,23 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+export const MONTHS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
+
+export const DECADE_SIZE = 10;
+
+export const YEAR_GRID_SIZE = 12;

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

@@ -0,0 +1,8 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum DatePickerFormat {
+    DayMonthYear = 'DD/MM/YYYY',
+    MonthDayYear = 'MM/DD/YYYY',
+    YearMonthDay = 'YYYY/MM/DD',
+}