@human-kit/svelte-components 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/calendar/grid-header/calendar-grid-header.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useCalendarContext } from '../root/context';
+	import CalendarHeaderCell from '../header-cell/calendar-header-cell.svelte';
+
+	type CalendarGridHeaderProps = {
+		children?: Snippet<[string]>;
+		class?: string;
+	};
+
+	let { children, class: className = '' }: CalendarGridHeaderProps = $props();
+
+	const calendar = useCalendarContext();
+	const layoutVersion = calendar.layoutVersion;
+	const weekdays = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.weekdayLabels;
+	});
+</script>
+
+<thead class={className}>
+	<tr>
+		{#each weekdays as day (day)}
+			{#if children}
+				{@render children(day)}
+			{:else}
+				<CalendarHeaderCell>{day}</CalendarHeaderCell>
+			{/if}
+		{/each}
+	</tr>
+</thead>

package/dist/calendar/grid-header/calendar-grid-header.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type CalendarGridHeaderProps = {
+    children?: Snippet<[string]>;
+    class?: string;
+};
+declare const CalendarGridHeader: import("svelte").Component<CalendarGridHeaderProps, {}, "">;
+type CalendarGridHeader = ReturnType<typeof CalendarGridHeader>;
+export default CalendarGridHeader;

package/dist/calendar/header-cell/calendar-header-cell-test.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Calendar from '../index';
+</script>
+
+<table>
+	<thead>
+		<tr>
+			<Calendar.HeaderCell>Mon</Calendar.HeaderCell>
+		</tr>
+	</thead>
+</table>

package/dist/calendar/header-cell/calendar-header-cell-test.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CalendarHeaderCellTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CalendarHeaderCellTest = InstanceType<typeof CalendarHeaderCellTest>;
+export default CalendarHeaderCellTest;

package/dist/calendar/header-cell/calendar-header-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type CalendarHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
+		children?: Snippet;
+	};
+
+	let { children, class: className = '', ...restProps }: CalendarHeaderCellProps = $props();
+</script>
+
+<th role="columnheader" class={className} {...restProps}>
+	{#if children}
+		{@render children()}
+	{/if}
+</th>

package/dist/calendar/header-cell/calendar-header-cell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type CalendarHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
+    children?: Snippet;
+};
+declare const CalendarHeaderCell: import("svelte").Component<CalendarHeaderCellProps, {}, "">;
+type CalendarHeaderCell = ReturnType<typeof CalendarHeaderCell>;
+export default CalendarHeaderCell;

package/dist/calendar/heading/calendar-heading.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useCalendarContext } from '../root/context';
+
+	type CalendarHeadingProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
+
+	let { class: className = '', ...restProps }: CalendarHeadingProps = $props();
+
+	const calendar = useCalendarContext();
+	const layoutVersion = calendar.layoutVersion;
+	const heading = $derived.by(() => {
+		void $layoutVersion;
+		return calendar.headingLabel;
+	});
+</script>
+
+<h2 class={className} aria-live="polite" {...restProps}>{heading}</h2>

package/dist/calendar/heading/calendar-heading.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type CalendarHeadingProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
+declare const CalendarHeading: import("svelte").Component<CalendarHeadingProps, {}, "">;
+type CalendarHeading = ReturnType<typeof CalendarHeading>;
+export default CalendarHeading;

package/dist/calendar/index.d.ts

@@ -0,0 +1,13 @@
+export * as Calendar from './index.parts.ts';
+export { default as CalendarRoot } from './root/calendar-root.svelte';
+export { default as CalendarTriggerPrevious } from './trigger-previous/calendar-trigger-previous.svelte';
+export { default as CalendarHeading } from './heading/calendar-heading.svelte';
+export { default as CalendarTriggerNext } from './trigger-next/calendar-trigger-next.svelte';
+export { default as CalendarGrid } from './grid/calendar-grid.svelte';
+export { default as CalendarGridHeader } from './grid-header/calendar-grid-header.svelte';
+export { default as CalendarHeaderCell } from './header-cell/calendar-header-cell.svelte';
+export { default as CalendarGridBody } from './grid-body/calendar-grid-body.svelte';
+export { default as CalendarBodyCell } from './body-cell/calendar-body-cell.svelte';
+export { getCalendarContext, setCalendarContext, useCalendarContext, createCalendarContext, type CalendarContext, type CalendarMonth, type CalendarSelectionMode, type CalendarRangeValue, type CalendarValueBySelectionMode, type CalendarValue, type CreateCalendarContextOptions } from './root/context';
+import * as CalendarParts from './index.parts.ts';
+export default CalendarParts;

package/dist/calendar/index.js

@@ -0,0 +1,13 @@
+export * as Calendar from './index.parts.ts';
+export { default as CalendarRoot } from './root/calendar-root.svelte';
+export { default as CalendarTriggerPrevious } from './trigger-previous/calendar-trigger-previous.svelte';
+export { default as CalendarHeading } from './heading/calendar-heading.svelte';
+export { default as CalendarTriggerNext } from './trigger-next/calendar-trigger-next.svelte';
+export { default as CalendarGrid } from './grid/calendar-grid.svelte';
+export { default as CalendarGridHeader } from './grid-header/calendar-grid-header.svelte';
+export { default as CalendarHeaderCell } from './header-cell/calendar-header-cell.svelte';
+export { default as CalendarGridBody } from './grid-body/calendar-grid-body.svelte';
+export { default as CalendarBodyCell } from './body-cell/calendar-body-cell.svelte';
+export { getCalendarContext, setCalendarContext, useCalendarContext, createCalendarContext } from './root/context';
+import * as CalendarParts from './index.parts.ts';
+export default CalendarParts;

package/dist/calendar/index.parts.d.ts

@@ -0,0 +1,9 @@
+export { default as Root } from './root/calendar-root.svelte';
+export { default as TriggerPrevious } from './trigger-previous/calendar-trigger-previous.svelte';
+export { default as Heading } from './heading/calendar-heading.svelte';
+export { default as TriggerNext } from './trigger-next/calendar-trigger-next.svelte';
+export { default as Grid } from './grid/calendar-grid.svelte';
+export { default as GridHeader } from './grid-header/calendar-grid-header.svelte';
+export { default as HeaderCell } from './header-cell/calendar-header-cell.svelte';
+export { default as GridBody } from './grid-body/calendar-grid-body.svelte';
+export { default as BodyCell } from './body-cell/calendar-body-cell.svelte';

package/dist/calendar/index.parts.js

@@ -0,0 +1,9 @@
+export { default as Root } from './root/calendar-root.svelte';
+export { default as TriggerPrevious } from './trigger-previous/calendar-trigger-previous.svelte';
+export { default as Heading } from './heading/calendar-heading.svelte';
+export { default as TriggerNext } from './trigger-next/calendar-trigger-next.svelte';
+export { default as Grid } from './grid/calendar-grid.svelte';
+export { default as GridHeader } from './grid-header/calendar-grid-header.svelte';
+export { default as HeaderCell } from './header-cell/calendar-header-cell.svelte';
+export { default as GridBody } from './grid-body/calendar-grid-body.svelte';
+export { default as BodyCell } from './body-cell/calendar-body-cell.svelte';

package/dist/calendar/root/calendar-root-bind-value-test.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Calendar from '../index';
+
+	let value = $state('');
+</script>
+
+<Calendar.Root bind:value defaultValue="2026-02-10" aria-label="Bind value test calendar">
+	<Calendar.Grid>
+		<Calendar.GridHeader />
+		<Calendar.GridBody />
+	</Calendar.Grid>
+</Calendar.Root>
+
+<div data-testid="calendar-value">{value}</div>

package/dist/calendar/root/calendar-root-bind-value-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CalendarRootBindValueTest: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarRootBindValueTest = ReturnType<typeof CalendarRootBindValueTest>;
+export default CalendarRootBindValueTest;

package/dist/calendar/root/calendar-root-controlled-clear-test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Calendar from '../index';
+
+	let value = $state('2026-02-10');
+</script>
+
+<Calendar.Root
+	selectionMode="single"
+	{value}
+	onChange={(nextValue: string) => (value = nextValue)}
+	aria-label="Controlled clear test calendar"
+>
+	<Calendar.Grid>
+		<Calendar.GridHeader />
+		<Calendar.GridBody />
+	</Calendar.Grid>
+</Calendar.Root>
+
+<button type="button" data-testid="clear-value" onclick={() => (value = '')}>Clear value</button>
+<div data-testid="calendar-value">{value}</div>

package/dist/calendar/root/calendar-root-controlled-clear-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CalendarRootControlledClearTest: import("svelte").Component<Record<string, never>, {}, "">;
+type CalendarRootControlledClearTest = ReturnType<typeof CalendarRootControlledClearTest>;
+export default CalendarRootControlledClearTest;

package/dist/calendar/root/calendar-root-test.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import Calendar from '../index';
+	import type { CalendarRangeValue, CalendarSelectionMode, CalendarValue } from './context';
+
+	type Props = {
+		selectionMode?: CalendarSelectionMode;
+		visibleMonths?: number;
+		showOutsideDays?: boolean;
+		isDisabled?: boolean;
+		isReadOnly?: boolean;
+		defaultValue?: CalendarValue;
+		isDateUnavailable?: (date: string) => boolean;
+	};
+
+	let {
+		selectionMode = 'single',
+		visibleMonths = 1,
+		showOutsideDays = false,
+		isDisabled = false,
+		isReadOnly = false,
+		defaultValue,
+		isDateUnavailable
+	}: Props = $props();
+
+	const singleDefaultValue = $derived.by(() =>
+		typeof defaultValue === 'string' ? defaultValue : undefined
+	);
+	const rangeDefaultValue = $derived.by(() =>
+		typeof defaultValue === 'string' ? undefined : (defaultValue as CalendarRangeValue | undefined)
+	);
+</script>
+
+{#if selectionMode === 'range'}
+	<Calendar.Root
+		selectionMode="range"
+		{visibleMonths}
+		{showOutsideDays}
+		{isDisabled}
+		{isReadOnly}
+		defaultValue={rangeDefaultValue}
+		{isDateUnavailable}
+		aria-label="Test calendar"
+	>
+		<Calendar.TriggerPrevious>Previous</Calendar.TriggerPrevious>
+		<Calendar.Heading />
+		<Calendar.TriggerNext>Next</Calendar.TriggerNext>
+		<Calendar.Grid>
+			<Calendar.GridHeader />
+			<Calendar.GridBody />
+		</Calendar.Grid>
+	</Calendar.Root>
+{:else}
+	<Calendar.Root
+		selectionMode="single"
+		{visibleMonths}
+		{showOutsideDays}
+		{isDisabled}
+		{isReadOnly}
+		defaultValue={singleDefaultValue}
+		{isDateUnavailable}
+		aria-label="Test calendar"
+	>
+		<Calendar.TriggerPrevious>Previous</Calendar.TriggerPrevious>
+		<Calendar.Heading />
+		<Calendar.TriggerNext>Next</Calendar.TriggerNext>
+		<Calendar.Grid>
+			<Calendar.GridHeader />
+			<Calendar.GridBody />
+		</Calendar.Grid>
+	</Calendar.Root>
+{/if}

package/dist/calendar/root/calendar-root-test.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { CalendarSelectionMode, CalendarValue } from './context';
+type Props = {
+    selectionMode?: CalendarSelectionMode;
+    visibleMonths?: number;
+    showOutsideDays?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    defaultValue?: CalendarValue;
+    isDateUnavailable?: (date: string) => boolean;
+};
+declare const CalendarRootTest: import("svelte").Component<Props, {}, "">;
+type CalendarRootTest = ReturnType<typeof CalendarRootTest>;
+export default CalendarRootTest;

package/dist/calendar/root/calendar-root.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		createCalendarContext,
+		setCalendarContext,
+		type CalendarRangeValue,
+		type CalendarSelectionMode,
+		type CalendarValue
+	} from './context';
+	import { useLocaleContextOptional } from '../../locale-provider/context';
+	import { isValidCalendarDateValue, type CalendarDateValue } from './date-utils';
+
+	function isRangeValue(
+		valueToCheck: CalendarValue | undefined
+	): valueToCheck is CalendarRangeValue {
+		if (!valueToCheck || typeof valueToCheck === 'string') return false;
+		return true;
+	}
+
+	function normalizeRangeValue(
+		valueToCheck: CalendarRangeValue | undefined
+	): CalendarRangeValue | undefined {
+		if (!valueToCheck) return undefined;
+		const start =
+			valueToCheck.start && isValidCalendarDateValue(valueToCheck.start)
+				? valueToCheck.start
+				: undefined;
+		const end =
+			valueToCheck.end && isValidCalendarDateValue(valueToCheck.end) ? valueToCheck.end : undefined;
+		if (!start && !end) return undefined;
+		return { start, end };
+	}
+
+	type CalendarRootProps = {
+		selectionMode?: CalendarSelectionMode;
+		visibleMonths?: number;
+		showOutsideDays?: boolean;
+		isDateUnavailable?: (date: string) => boolean;
+		isDisabled?: boolean;
+		isReadOnly?: boolean;
+		children?: Snippet;
+		class?: string;
+		id?: string;
+		'aria-label'?: string;
+	};
+
+	type CalendarRootSingleProps = CalendarRootProps & {
+		selectionMode?: 'single';
+		value?: CalendarDateValue;
+		defaultValue?: CalendarDateValue;
+		onChange?: (value: CalendarDateValue) => void;
+	};
+
+	type CalendarRootRangeProps = CalendarRootProps & {
+		selectionMode: 'range';
+		value?: CalendarRangeValue;
+		defaultValue?: CalendarRangeValue;
+		onChange?: (value: CalendarRangeValue) => void;
+	};
+
+	type CalendarRootTypedProps = CalendarRootSingleProps | CalendarRootRangeProps;
+
+	let {
+		selectionMode = 'single',
+		visibleMonths = 1,
+		showOutsideDays = false,
+		isDateUnavailable,
+		isDisabled = false,
+		isReadOnly = false,
+		value = $bindable(),
+		defaultValue,
+		onChange,
+		children,
+		class: className = '',
+		id,
+		'aria-label': ariaLabel
+	}: CalendarRootTypedProps = $props();
+
+	function isCalendarRangeValue(valueToCheck: CalendarValue): valueToCheck is CalendarRangeValue {
+		if (!valueToCheck || typeof valueToCheck === 'string') return false;
+		return true;
+	}
+
+	const localeContext = useLocaleContextOptional();
+	const localeStore = localeContext?.locale;
+	const localeFromContext = $derived.by(() => {
+		if (!localeStore) return undefined;
+		return $localeStore;
+	});
+	const resolvedLocale = $derived(
+		localeFromContext ?? Intl.DateTimeFormat().resolvedOptions().locale
+	);
+
+	function getSyncOptions() {
+		const normalizedDefaultValue =
+			selectionMode === 'range'
+				? normalizeRangeValue(isRangeValue(defaultValue) ? defaultValue : undefined)
+				: typeof defaultValue === 'string' && isValidCalendarDateValue(defaultValue)
+					? defaultValue
+					: undefined;
+
+		return {
+			selectionMode,
+			visibleMonths,
+			showOutsideDays,
+			locale: resolvedLocale,
+			isDateUnavailable,
+			isDisabled,
+			isReadOnly,
+			value,
+			defaultValue: normalizedDefaultValue,
+			onChange: (nextValue: CalendarValue) => {
+				if (selectionMode === 'range' && isCalendarRangeValue(nextValue)) {
+					(onChange as ((value: CalendarRangeValue) => void) | undefined)?.(nextValue);
+				} else if (selectionMode !== 'range' && typeof nextValue === 'string') {
+					(onChange as ((value: CalendarDateValue) => void) | undefined)?.(nextValue);
+				}
+				value = nextValue;
+			}
+		};
+	}
+
+	const context = createCalendarContext(getSyncOptions());
+
+	setCalendarContext(context);
+
+	$effect(() => {
+		context.sync(getSyncOptions());
+	});
+</script>
+
+<div
+	{id}
+	class={className}
+	data-disabled={isDisabled || undefined}
+	data-readonly={isReadOnly || undefined}
+	inert={isDisabled || undefined}
+	aria-label={ariaLabel}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/calendar/root/calendar-root.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import { type CalendarRangeValue, type CalendarSelectionMode } from './context';
+import { type CalendarDateValue } from './date-utils';
+type CalendarRootProps = {
+    selectionMode?: CalendarSelectionMode;
+    visibleMonths?: number;
+    showOutsideDays?: boolean;
+    isDateUnavailable?: (date: string) => boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    children?: Snippet;
+    class?: string;
+    id?: string;
+    'aria-label'?: string;
+};
+type CalendarRootSingleProps = CalendarRootProps & {
+    selectionMode?: 'single';
+    value?: CalendarDateValue;
+    defaultValue?: CalendarDateValue;
+    onChange?: (value: CalendarDateValue) => void;
+};
+type CalendarRootRangeProps = CalendarRootProps & {
+    selectionMode: 'range';
+    value?: CalendarRangeValue;
+    defaultValue?: CalendarRangeValue;
+    onChange?: (value: CalendarRangeValue) => void;
+};
+type CalendarRootTypedProps = CalendarRootSingleProps | CalendarRootRangeProps;
+declare const CalendarRoot: import("svelte").Component<CalendarRootTypedProps, {}, "value">;
+type CalendarRoot = ReturnType<typeof CalendarRoot>;
+export default CalendarRoot;

package/dist/calendar/root/context.d.ts

@@ -0,0 +1,66 @@
+import { type Readable } from 'svelte/store';
+import { type CalendarDateValue, type CalendarDayCell } from './date-utils';
+export type CalendarSelectionMode = 'single' | 'range';
+export type CalendarRangeValue = {
+    start?: CalendarDateValue;
+    end?: CalendarDateValue;
+};
+export type CalendarValue = CalendarDateValue | CalendarRangeValue;
+export type CalendarValueBySelectionMode<TSelectionMode extends CalendarSelectionMode> = TSelectionMode extends 'range' ? CalendarRangeValue : CalendarDateValue;
+export type CalendarMonth = {
+    monthIndex: number;
+    monthStart: Date;
+    heading: string;
+    weeks: CalendarDayCell[][];
+};
+export type CreateCalendarContextOptions<TSelectionMode extends CalendarSelectionMode = CalendarSelectionMode> = {
+    selectionMode?: TSelectionMode;
+    visibleMonths?: number;
+    showOutsideDays?: boolean;
+    locale?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    value?: CalendarValueBySelectionMode<TSelectionMode>;
+    defaultValue?: CalendarValueBySelectionMode<TSelectionMode>;
+    isDateUnavailable?: (date: CalendarDateValue) => boolean;
+    onChange?: (value: CalendarValueBySelectionMode<TSelectionMode>) => void;
+};
+export type CalendarContext = {
+    layoutVersion: Readable<number>;
+    selectionVersion: Readable<number>;
+    locale: string;
+    selectionMode: CalendarSelectionMode;
+    firstDayOfWeek: number;
+    visibleMonths: number;
+    showOutsideDays: boolean;
+    isDisabled: boolean;
+    isReadOnly: boolean;
+    months: CalendarMonth[];
+    selectedValue: CalendarDateValue | undefined;
+    rangeValue: CalendarRangeValue | undefined;
+    focusedValue: CalendarDateValue;
+    focusVisible: boolean;
+    weekdayLabels: string[];
+    headingLabel: string;
+    isSelected: (date: CalendarDateValue) => boolean;
+    isRangeStart: (date: CalendarDateValue) => boolean;
+    isRangeEnd: (date: CalendarDateValue) => boolean;
+    isInRange: (date: CalendarDateValue) => boolean;
+    isDateUnavailable: (date: CalendarDateValue) => boolean;
+    isDateDisabled: (date: CalendarDateValue) => boolean;
+    isOutsideVisibleRange: (date: CalendarDateValue, monthIndex: number) => boolean;
+    setFocusedValue: (date: CalendarDateValue) => void;
+    setFocusVisible: (visible: boolean) => void;
+    setHoveredValue: (date: CalendarDateValue | undefined) => void;
+    selectDate: (date: CalendarDateValue) => void;
+    goToNextPage: () => void;
+    goToPreviousPage: () => void;
+    handleCellKeydown: (event: KeyboardEvent, date: CalendarDateValue) => void;
+    sync: (next: CreateCalendarContextOptions) => void;
+};
+export declare function createCalendarContext(options: CreateCalendarContextOptions<'single'>): CalendarContext;
+export declare function createCalendarContext(options: CreateCalendarContextOptions<'range'>): CalendarContext;
+export declare function createCalendarContext(options: CreateCalendarContextOptions): CalendarContext;
+export declare function setCalendarContext(context: CalendarContext): void;
+export declare function getCalendarContext(): CalendarContext;
+export declare function useCalendarContext(): CalendarContext;