@corvu-next/calendar 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2025 Jasmin Noetzli
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,434 @@
+import * as _solidjs_web from '@solidjs/web';
+import { ValidComponent, JSX } from '@solidjs/web';
+import { Accessor, Setter } from 'solid-js';
+import { Ref, ElementOf } from '@corvu-next/utils/dom';
+import { DynamicButtonSharedElementProps, DynamicButtonElementProps, DynamicProps } from '@corvu-next/utils/dynamic';
+export { DynamicProps } from '@corvu-next/utils/dynamic';
+
+type CalendarContextValue<Mode extends 'single' | 'multiple' | 'range' = 'single' | 'multiple' | 'range'> = Mode extends 'single' ? CalendarContextSingleValue : Mode extends 'multiple' ? CalendarContextMultipleValue : Mode extends 'range' ? CalendarContextRangeValue : CalendarContextSingleValue | CalendarContextMultipleValue | CalendarContextRangeValue;
+type CalendarContextSingleValue = {
+    /** The mode of the calendar. */
+    mode: Accessor<'single'>;
+    /** The value of the calendar. */
+    value: Accessor<Date | null>;
+    /** Setter to change the value of the calendar. */
+    setValue: Setter<Date | null>;
+} & CalendarContextBaseValue;
+type CalendarContextMultipleValue = {
+    /** The mode of the calendar. */
+    mode: Accessor<'multiple'>;
+    /** The value of the calendar. */
+    value: Accessor<Date[]>;
+    /** Setter to change the value of the calendar. */
+    setValue: Setter<Date[]>;
+    /** The minimum number of days that have to be selected. */
+    min: Accessor<number | null>;
+    /** The maximum number of days that can be selected. */
+    max: Accessor<number | null>;
+} & CalendarContextBaseValue;
+type CalendarContextRangeValue = {
+    /** The mode of the calendar. */
+    mode: Accessor<'range'>;
+    /** The value of the calendar. */
+    value: Accessor<{
+        from: Date | null;
+        to: Date | null;
+    }>;
+    /** Setter to change the value of the calendar. */
+    setValue: Setter<{
+        from: Date | null;
+        to: Date | null;
+    }>;
+    /** Whether to reset the range selection if a disabled day is included in the range. */
+    excludeDisabled: Accessor<boolean>;
+} & CalendarContextBaseValue;
+type CalendarContextBaseValue = {
+    /** The month to display in the calendar. Is always the first month if multiple months are displayed. */
+    month: Accessor<Date>;
+    /** Setter to change the month to display in the calendar. Automatically adjusts the focusedDay to be within the visible range. */
+    setMonth: Setter<Date>;
+    /** The day that is currently focused in the calendar grid. */
+    focusedDay: Accessor<Date>;
+    /** Setter to change the focused day in the calendar grid. Automatically adjusts the month to ensure the focused day is visible. */
+    setFocusedDay: Setter<Date>;
+    /** The first day of the week. (0-6, 0 is Sunday) */
+    startOfWeek: Accessor<number>;
+    /** Whether the value is required. Prevents unselecting the value. */
+    required: Accessor<boolean>;
+    /** The number of months to display in the calendar. */
+    numberOfMonths: Accessor<number>;
+    /** Whether to disable outside days (Days falling in the previous or next month). */
+    disableOutsideDays: Accessor<boolean>;
+    /** Whether to always display 6 weeks in a month. */
+    fixedWeeks: Accessor<boolean>;
+    /** The text direction of the calendar. */
+    textDirection: Accessor<'ltr' | 'rtl'>;
+    /** Array of weekdays starting from the first day of the week. */
+    weekdays: Accessor<Date[]>;
+    /** Array of the currently displayed months. */
+    months: Accessor<{
+        month: Date;
+        weeks: Date[][];
+    }[]>;
+    /** Function to get the weeks of the current month. Useful if only one month is being rendered. */
+    weeks: Accessor<Date[][]>;
+    /** Function to navigate the calendar. */
+    navigate: (action: `${'prev' | 'next'}-${'month' | 'year'}` | ((date: Date) => Date)) => void;
+    /** The ref of the currently focused calendar cell trigger. */
+    focusedDayRef: Accessor<HTMLElement | null>;
+    /** The `id` attributes of the calendar label elements. Can be undefined if no `Calendar.Label` is present for the given month index. */
+    labelIds: Accessor<Accessor<string | undefined>[]>;
+};
+
+type CalendarCellCorvuProps = {};
+type CalendarCellSharedElementProps<T extends ValidComponent = 'td'> = {};
+type CalendarCellElementProps = CalendarCellSharedElementProps & {
+    role: 'presentation';
+    'data-corvu-calendar-cell': '' | null;
+};
+type CalendarCellProps<T extends ValidComponent = 'td'> = CalendarCellCorvuProps & Partial<CalendarCellSharedElementProps<T>>;
+
+type CalendarCellTriggerCorvuProps = {
+    day: Date;
+    /**
+     * The month that this cell trigger belongs to. Is optional as it's not required if only one month is rendered.
+     */
+    month?: Date;
+    /**
+     * The `id` of the calendar context to use.
+     */
+    contextId?: string;
+};
+type CalendarCellTriggerSharedElementProps<T extends ValidComponent = 'button'> = {
+    ref: Ref<ElementOf<T>>;
+    onClick: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
+    onKeyDown: JSX.EventHandlerUnion<ElementOf<T>, KeyboardEvent>;
+    disabled: boolean | undefined;
+};
+type CalendarCellTriggerElementProps = CalendarCellTriggerSharedElementProps & {
+    role: 'gridcell';
+    tabIndex: number;
+    'aria-selected': 'true' | 'false' | undefined;
+    'aria-disabled': 'true' | undefined;
+    'data-selected': '' | undefined;
+    'data-disabled': '' | undefined;
+    'data-today': '' | undefined;
+    'data-range-start': '' | undefined;
+    'data-range-end': '' | undefined;
+    'data-in-range': '' | undefined;
+    'data-corvu-calendar-celltrigger': '' | null;
+};
+type CalendarCellTriggerProps<T extends ValidComponent = 'button'> = CalendarCellTriggerCorvuProps & Partial<CalendarCellTriggerSharedElementProps<T>>;
+
+type CalendarHeadCellCorvuProps = {};
+type CalendarHeadCellSharedElementProps<T extends ValidComponent = 'th'> = {
+    abbr?: string;
+};
+type CalendarHeadCellElementProps = CalendarHeadCellSharedElementProps & {
+    scope: 'col';
+    'data-corvu-calendar-headcell': '' | null;
+};
+type CalendarHeadCellProps<T extends ValidComponent = 'th'> = CalendarHeadCellCorvuProps & Partial<CalendarHeadCellSharedElementProps<T>>;
+
+type CalendarLabelCorvuProps = {
+    /**
+     * The index of the calendar table that this label is describing. Is optional as it's not required if only one month is rendered.
+     */
+    index?: number;
+    /**
+     * The `id` of the calendar context to use.
+     */
+    contextId?: string;
+};
+type CalendarLabelSharedElementProps<T extends ValidComponent = 'h2'> = {};
+type CalendarLabelElementProps = CalendarLabelSharedElementProps & {
+    id: string | undefined;
+    'aria-live': 'polite';
+    'data-corvu-calendar-label': '' | null;
+};
+type CalendarLabelProps<T extends ValidComponent = 'h2'> = CalendarLabelCorvuProps & Partial<CalendarLabelSharedElementProps<T>>;
+
+type CalendarNavCorvuProps = {
+    /**
+     * The action to perform when pressing this navigation button.
+     */
+    action: `${'prev' | 'next'}-${'month' | 'year'}` | ((date: Date) => Date);
+    /**
+     * The `id` of the calendar context to use.
+     */
+    contextId?: string;
+};
+type CalendarNavSharedElementProps<T extends ValidComponent = 'button'> = {
+    onClick: JSX.EventHandlerUnion<ElementOf<T>, MouseEvent>;
+} & DynamicButtonSharedElementProps<T>;
+type CalendarNavElementProps = CalendarNavSharedElementProps & DynamicButtonElementProps & {
+    'data-corvu-calendar-nav': '' | null;
+};
+type CalendarNavProps<T extends ValidComponent = 'button'> = CalendarNavCorvuProps & Partial<CalendarNavSharedElementProps<T>>;
+
+type CalendarRootProps = CalendarRootSingleProps | CalendarRootMultipleProps | CalendarRootRangeProps;
+type CalendarRootSingleProps = {
+    /**
+     * The mode of the calendar.
+     */
+    mode: 'single';
+    /**
+     * The value of the calendar.
+     */
+    value?: Date | null;
+    /**
+     * Callback fired when the value changes.
+     */
+    onValueChange?: (value: Date | null) => void;
+    /**
+     * The initial value of the calendar.
+     * @defaultValue `null`
+     */
+    initialValue?: Date | null;
+    /** @hidden */
+    children: JSX.Element | ((props: CalendarRootChildrenSingleProps) => JSX.Element);
+} & CalendarRootBaseProps;
+type CalendarRootMultipleProps = {
+    /**
+     * The mode of the calendar.
+     */
+    mode: 'multiple';
+    /**
+     * The value of the calendar.
+     */
+    value?: Date[];
+    /**
+     * Callback fired when the value changes.
+     */
+    onValueChange?: (value: Date[]) => void;
+    /**
+     * The initial value of the calendar.
+     * @defaultValue `[]`
+     */
+    initialValue?: Date[];
+    /**
+     * The minimum number of days that have to be selected.
+     * @defaultValue `null`
+     */
+    min?: number | null;
+    /**
+     * The maximum number of days that can be selected.
+     * @defaultValue `null`
+     */
+    max?: number | null;
+    /** @hidden */
+    children: JSX.Element | ((props: CalendarRootChildrenMultipleProps) => JSX.Element);
+} & CalendarRootBaseProps;
+type CalendarRootRangeProps = {
+    /**
+     * The mode of the calendar.
+     */
+    mode: 'range';
+    /**
+     * The value of the calendar.
+     */
+    value?: {
+        from: Date | null;
+        to: Date | null;
+    };
+    /**
+     * Callback fired when the value changes.
+     */
+    onValueChange?: (value: {
+        from: Date | null;
+        to: Date | null;
+    }) => void;
+    /**
+     * The initial value of the calendar.
+     * @defaultValue `{ from: null, to: null }`
+     */
+    initialValue?: {
+        from: Date | null;
+        to: Date | null;
+    };
+    /**
+     * Whether to reset the range selection if a disabled day is included in the range.
+     * @defaultValue `false`
+     */
+    excludeDisabled?: boolean;
+    /** @hidden */
+    children: JSX.Element | ((props: CalendarRootChildrenRangeProps) => JSX.Element);
+} & CalendarRootBaseProps;
+type CalendarRootBaseProps = {
+    /**
+     * The month to display in the calendar. Is always the first month if multiple months are displayed.
+     */
+    month?: Date;
+    /**
+     * Callback fired when the month changes.
+     */
+    onMonthChange?: (month: Date) => void;
+    /**
+     * The initial month to display in the calendar.
+     * @defaultValue `new Date()`
+     */
+    initialMonth?: Date;
+    /**
+     * The day that is currently focused in the calendar grid.
+     */
+    focusedDay?: Date;
+    /**
+     * Callback fired when the focused day changes.
+     */
+    onFocusedDayChange?: (focusedDay: Date) => void;
+    /**
+     * The initial date that should be focused in the calendar grid.
+     * @defaultValue `new Date()`
+     */
+    initialFocusedDay?: Date;
+    /**
+     * The first day of the week. (0-6, 0 is Sunday)
+     * @defaultValue `1`
+     */
+    startOfWeek?: number;
+    /**
+     * Whether the value is required. Prevents unselecting the value.
+     * @defaultValue `false`
+     */
+    required?: boolean;
+    /**
+     * Callback to determine if any given day is disabled.
+     * @defaultValue `() => false`
+     */
+    disabled?: (day: Date) => boolean;
+    /**
+     * The number of months to display in the calendar.
+     * @defaultValue `1`
+     */
+    numberOfMonths?: number;
+    /**
+     * Whether to disable outside days (Days falling in the previous or next month).
+     * @defaultValue `true`
+     */
+    disableOutsideDays?: boolean;
+    /**
+     * Whether to always display 6 weeks in a month.
+     * @defaultValue `false`
+     */
+    fixedWeeks?: boolean;
+    /**
+     * The text direction of the calendar.
+     * @defaultValue `ltr`
+     */
+    textDirection?: 'ltr' | 'rtl';
+    /**
+     * The `id` attribute of the calendar label element(s). There can be multiple labels for each month that is being displayed.
+     * @defaultValue `createUniqueId()`
+     */
+    labelIds?: string[];
+    /**
+     * The `id` of the calendar context. Useful if you have nested calendars and want to create components that belong to a calendar higher up in the tree.
+     */
+    contextId?: string;
+};
+/** Props that are passed to the Root component children callback. */
+type CalendarRootChildrenProps = CalendarRootChildrenSingleProps | CalendarRootChildrenMultipleProps | CalendarRootChildrenRangeProps;
+type CalendarRootChildrenSingleProps = {
+    /** The mode of the calendar. */
+    mode: 'single';
+    /** The value of the calendar. */
+    value: Date | null;
+    /** Setter to change the value of the calendar. */
+    setValue: Setter<Date | null>;
+} & CalendarRootChildrenBaseProps;
+type CalendarRootChildrenMultipleProps = {
+    /** The mode of the calendar. */
+    mode: 'multiple';
+    /** The value of the calendar. */
+    value: Date[];
+    /** Setter to change the value of the calendar. */
+    setValue: Setter<Date[]>;
+    /** The minimum number of days that have to be selected. */
+    min: number | null;
+    /** The maximum number of days that can be selected. */
+    max: number | null;
+} & CalendarRootChildrenBaseProps;
+type CalendarRootChildrenRangeProps = {
+    /** The mode of the calendar. */
+    mode: 'range';
+    /** The value of the calendar. */
+    value: {
+        from: Date | null;
+        to: Date | null;
+    };
+    /** Setter to change the value of the calendar. */
+    setValue: Setter<{
+        from: Date | null;
+        to: Date | null;
+    }>;
+    /** Whether to reset the range selection if a disabled day is included in the range. */
+    excludeDisabled: boolean;
+} & CalendarRootChildrenBaseProps;
+type CalendarRootChildrenBaseProps = {
+    /** The month to display in the calendar. Is always the first month if multiple months are displayed. */
+    month: Date;
+    /** Setter to change the month to display in the calendar. Automatically adjusts the focusedDay to be within the visible range. */
+    setMonth: Setter<Date>;
+    /** The day that is currently focused in the calendar grid. */
+    focusedDay: Date;
+    /** Setter to change the focused day in the calendar grid. Automatically adjusts the month to ensure the focused day is visible. */
+    setFocusedDay: Setter<Date>;
+    /** The first day of the week. (0-6, 0 is Sunday) */
+    startOfWeek: number;
+    /** Whether the value is required. Prevents unselecting the value. */
+    required: boolean;
+    /** The number of months to display in the calendar. */
+    numberOfMonths: number;
+    /** Whether to disable outside days (Days falling in the previous or next month). */
+    disableOutsideDays: boolean;
+    /** Whether to always display 6 weeks in a month. */
+    fixedWeeks: boolean;
+    /** The text direction of the calendar. */
+    textDirection: 'ltr' | 'rtl';
+    /** Array of weekdays starting from the first day of the week. */
+    weekdays: Date[];
+    /** Array of the currently displayed months. */
+    months: {
+        month: Date;
+        weeks: Date[][];
+    }[];
+    /** Weeks of the current month. Useful if only one month is being rendered. */
+    weeks: Date[][];
+    /** Function to navigate the calendar. */
+    navigate: (action: `${'prev' | 'next'}-${'month' | 'year'}` | ((date: Date) => Date)) => void;
+    /** The ref of the currently focused calendar cell trigger. */
+    focusedDayRef: HTMLElement | null;
+    /** The `id` attributes of the calendar label elements. Can be undefined if no `Calendar.Label` is present for the given month index. */
+    labelIds: (string | undefined)[];
+};
+
+type CalendarTableCorvuProps = {
+    /**
+     * The index of the month that this table is rendering. Is optional as it's not required if only one month is rendered.
+     */
+    index?: number;
+    /**
+     * The `id` of the calendar context to use.
+     */
+    contextId?: string;
+};
+type CalendarTableSharedElementProps<T extends ValidComponent = 'table'> = {};
+type CalendarTableElementProps = CalendarTableSharedElementProps & {
+    role: 'grid';
+    'aria-labelledby': string | undefined;
+    'aria-multiselectable': 'true' | undefined;
+    'data-corvu-calendar-table': '' | null;
+};
+type CalendarTableProps<T extends ValidComponent = 'table'> = CalendarTableCorvuProps & Partial<CalendarTableSharedElementProps<T>>;
+
+declare const Calendar: ((props: CalendarRootProps) => _solidjs_web.JSX.Element) & {
+    Label: <T extends _solidjs_web.ValidComponent = "h2">(props: DynamicProps<T, CalendarLabelProps<T>>) => _solidjs_web.JSX.Element;
+    Nav: <T extends _solidjs_web.ValidComponent = "button">(props: DynamicProps<T, CalendarNavProps<T>>) => _solidjs_web.JSX.Element;
+    Table: <T extends _solidjs_web.ValidComponent = "table">(props: DynamicProps<T, CalendarTableProps<T>>) => _solidjs_web.JSX.Element;
+    HeadCell: <T extends _solidjs_web.ValidComponent = "th">(props: DynamicProps<T, CalendarHeadCellProps<T>>) => _solidjs_web.JSX.Element;
+    Cell: <T extends _solidjs_web.ValidComponent = "td">(props: DynamicProps<T, CalendarCellProps<T>>) => _solidjs_web.JSX.Element;
+    CellTrigger: <T extends _solidjs_web.ValidComponent = "button">(props: DynamicProps<T, CalendarCellTriggerProps<T>>) => _solidjs_web.JSX.Element;
+    useContext: <Mode extends "single" | "multiple" | "range" = "single" | "multiple" | "range">(contextId?: string) => CalendarContextValue<Mode>;
+};
+
+export { type CalendarCellCorvuProps as CellCorvuProps, type CalendarCellElementProps as CellElementProps, type CalendarCellProps as CellProps, type CalendarCellSharedElementProps as CellSharedElementProps, type CalendarCellTriggerCorvuProps as CellTriggerCorvuProps, type CalendarCellTriggerElementProps as CellTriggerElementProps, type CalendarCellTriggerProps as CellTriggerProps, type CalendarCellTriggerSharedElementProps as CellTriggerSharedElementProps, type CalendarContextBaseValue as ContextBaseValue, type CalendarContextMultipleValue as ContextMultipleValue, type CalendarContextRangeValue as ContextRangeValue, type CalendarContextSingleValue as ContextSingleValue, type CalendarContextValue as ContextValue, type CalendarHeadCellCorvuProps as HeadCellCorvuProps, type CalendarHeadCellElementProps as HeadCellElementProps, type CalendarHeadCellProps as HeadCellProps, type CalendarHeadCellSharedElementProps as HeadCellSharedElementProps, type CalendarLabelCorvuProps as LabelCorvuProps, type CalendarLabelElementProps as LabelElementProps, type CalendarLabelProps as LabelProps, type CalendarLabelSharedElementProps as LabelSharedElementProps, type CalendarNavCorvuProps as NavCorvuProps, type CalendarNavElementProps as NavElementProps, type CalendarNavProps as NavProps, type CalendarNavSharedElementProps as NavSharedElementProps, type CalendarRootBaseProps as RootBaseProps, type CalendarRootChildrenBaseProps as RootChildrenBaseProps, type CalendarRootChildrenMultipleProps as RootChildrenMultipleProps, type CalendarRootChildrenProps as RootChildrenProps, type CalendarRootChildrenRangeProps as RootChildrenRangeProps, type CalendarRootChildrenSingleProps as RootChildrenSingleProps, type CalendarRootMultipleProps as RootMultipleProps, type CalendarRootProps as RootProps, type CalendarRootRangeProps as RootRangeProps, type CalendarRootSingleProps as RootSingleProps, type CalendarTableCorvuProps as TableCorvuProps, type CalendarTableElementProps as TableElementProps, type CalendarTableProps as TableProps, type CalendarTableSharedElementProps as TableSharedElementProps, Calendar as default };