sheer-ui 0.0.0

package/src/lib/components/calendar/components/calendar-cell.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { CalendarCellState } from '../calendar.svelte.js';
+	import type { CalendarCellProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), date, month, ...restProps }: CalendarCellProps = $props();
+
+	const cellState = CalendarCellState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		date: boxWith(() => date),
+		month: boxWith(() => month),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, cellState.props));
+</script>
+
+{#if child}
+	{@render child({
+		props: mergedProps,
+		...cellState.snippetProps,
+	})}
+{:else}
+	<td {...mergedProps}>
+		{@render children?.(cellState.snippetProps)}
+	</td>
+{/if}

package/src/lib/components/calendar/components/calendar-day.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { CalendarDayState } from '../calendar.svelte.js';
+	import type { CalendarDayProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: CalendarDayProps = $props();
+
+	const dayState = CalendarDayState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, dayState.props));
+</script>
+
+{#if child}
+	{@render child({
+		props: mergedProps,
+		...dayState.snippetProps,
+	})}
+{:else}
+	<div {...mergedProps}>
+		{#if children}
+			{@render children?.(dayState.snippetProps)}
+		{:else}
+			{dayState.cell.opts.date.current.day}
+		{/if}
+	</div>
+{/if}

package/src/lib/components/calendar/components/calendar-grid-body.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { CalendarGridBodyProps } from '../types.js';
+	import { CalendarGridBodyState } from '../calendar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: CalendarGridBodyProps = $props();
+
+	const gridBodyState = CalendarGridBodyState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, gridBodyState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<tbody {...mergedProps}>
+		{@render children?.()}
+	</tbody>
+{/if}

package/src/lib/components/calendar/components/calendar-grid-head.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { CalendarGridHeadState } from '../calendar.svelte.js';
+	import type { CalendarGridHeadProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: CalendarGridHeadProps = $props();
+
+	const gridHeadState = CalendarGridHeadState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, gridHeadState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<thead {...mergedProps}>
+		{@render children?.()}
+	</thead>
+{/if}

package/src/lib/components/calendar/components/calendar-grid-row.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { CalendarGridRowState } from '../calendar.svelte.js';
+	import type { CalendarGridRowProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: CalendarGridRowProps = $props();
+
+	const gridRowState = CalendarGridRowState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, gridRowState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<tr {...mergedProps}>
+		{@render children?.()}
+	</tr>
+{/if}

package/src/lib/components/calendar/components/calendar-grid.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { CalendarGridState } from '../calendar.svelte.js';
+	import type { CalendarGridProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: CalendarGridProps = $props();
+
+	const gridState = CalendarGridState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, gridState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<table {...mergedProps}>
+		{@render children?.()}
+	</table>
+{/if}

package/src/lib/components/calendar/components/calendar-head-cell.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { CalendarHeadCellState } from '../calendar.svelte.js';
+	import type { CalendarHeadCellProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: CalendarHeadCellProps = $props();
+
+	const headCellState = CalendarHeadCellState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, headCellState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<th {...mergedProps}>
+		{@render children?.()}
+	</th>
+{/if}

package/src/lib/components/calendar/components/calendar-header.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { CalendarHeaderState } from '../calendar.svelte.js';
+	import type { CalendarHeaderProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: CalendarHeaderProps = $props();
+
+	const headerState = CalendarHeaderState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, headerState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<header {...mergedProps}>
+		{@render children?.()}
+	</header>
+{/if}

package/src/lib/components/calendar/components/calendar-heading.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { CalendarHeadingProps } from '../types.js';
+	import { CalendarHeadingState } from '../calendar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { children, child, ref = $bindable(null), id = createId(uid), ...restProps }: CalendarHeadingProps = $props();
+
+	const headingState = CalendarHeadingState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, headingState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, headingValue: headingState.root.headingValue })}
+{:else}
+	<div {...mergedProps}>
+		{#if children}
+			{@render children?.({ headingValue: headingState.root.headingValue })}
+		{:else}
+			{headingState.root.headingValue}
+		{/if}
+	</div>
+{/if}

package/src/lib/components/calendar/components/calendar-month-select.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { CalendarMonthSelectProps } from '../types.js';
+	import { CalendarMonthSelectState } from '../calendar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+		monthFormat = 'long',
+		disabled = false,
+		'aria-label': ariaLabel = 'Select a month',
+		...restProps
+	}: CalendarMonthSelectProps = $props();
+
+	const monthSelectState = CalendarMonthSelectState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		months: boxWith(() => months),
+		monthFormat: boxWith(() => monthFormat),
+		disabled: boxWith(() => Boolean(disabled)),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, monthSelectState.props, { 'aria-label': ariaLabel }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...monthSelectState.snippetProps })}
+{:else}
+	<select {...mergedProps}>
+		{#if children}
+			{@render children?.(monthSelectState.snippetProps)}
+		{:else}
+			{#each monthSelectState.monthItems as month (month.value)}
+				<option value={month.value} selected={month.value === monthSelectState.currentMonth}>
+					{month.label}
+				</option>
+			{/each}
+		{/if}
+	</select>
+{/if}

package/src/lib/components/calendar/components/calendar-next-button.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { CalendarNextButtonState } from '../calendar.svelte.js';
+	import type { CalendarNextButtonProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		// for safari
+		tabindex = 0,
+		...restProps
+	}: CalendarNextButtonProps = $props();
+
+	const nextButtonState = CalendarNextButtonState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, nextButtonState.props, { tabindex }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/calendar/components/calendar-prev-button.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { CalendarPrevButtonProps } from '../types.js';
+	import { CalendarPrevButtonState } from '../calendar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		id = createId(uid),
+		ref = $bindable(null),
+		// for safari
+		tabindex = 0,
+		...restProps
+	}: CalendarPrevButtonProps = $props();
+
+	const prevButtonState = CalendarPrevButtonState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, prevButtonState.props, { tabindex }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/calendar/components/calendar-year-select.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { CalendarYearSelectProps } from '../types.js';
+	import { CalendarYearSelectState } from '../calendar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		years,
+		yearFormat = 'numeric',
+		disabled = false,
+		'aria-label': ariaLabel = 'Select a year',
+		...restProps
+	}: CalendarYearSelectProps = $props();
+
+	const yearSelectState = CalendarYearSelectState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		years: boxWith(() => years),
+		yearFormat: boxWith(() => yearFormat),
+		disabled: boxWith(() => Boolean(disabled)),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, yearSelectState.props, { 'aria-label': ariaLabel }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...yearSelectState.snippetProps })}
+{:else}
+	<select {...mergedProps}>
+		{#if children}
+			{@render children?.(yearSelectState.snippetProps)}
+		{:else}
+			{#each yearSelectState.yearItems as year (year.value)}
+				<option value={year.value} selected={year.value === yearSelectState.currentYear}>
+					{year.label}
+				</option>
+			{/each}
+		{/if}
+	</select>
+{/if}

package/src/lib/components/calendar/components/calendar.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { boxWith, repairBindable } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import { type DateValue } from '@internationalized/date';
+	import { CalendarRootState } from '../calendar.svelte.js';
+	import type { CalendarRootProps } from '../types.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { getDefaultDate } from '../../../internal/date-time/utils.js';
+	import { resolveLocaleProp } from '../../../internal/prop-resolvers.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(),
+		onValueChange = () => {},
+		placeholder = $bindable(),
+		onPlaceholderChange = () => {},
+		weekdayFormat = 'narrow',
+		weekStartsOn,
+		pagedNavigation = false,
+		isDateDisabled = () => false,
+		isDateUnavailable = () => false,
+		fixedWeeks = false,
+		numberOfMonths = 1,
+		locale,
+		calendarLabel = 'Event',
+		disabled = false,
+		readonly = false,
+		minValue = undefined,
+		maxValue = undefined,
+		preventDeselect = false,
+		type,
+		disableDaysOutsideMonth = true,
+		initialFocus = false,
+		maxDays,
+		monthFormat = 'long',
+		yearFormat = 'numeric',
+		...restProps
+	}: CalendarRootProps = $props();
+
+	const defaultPlaceholder = untrack(() =>
+		getDefaultDate({
+			defaultValue: value,
+			minValue,
+			maxValue,
+		}),
+	);
+
+	function repairUndefinedControlledPlaceholder() {
+		if (placeholder !== undefined) return;
+		placeholder = defaultPlaceholder;
+	}
+
+	// Calendar needs a writable placeholder for view navigation.
+	repairBindable(() => placeholder, repairUndefinedControlledPlaceholder);
+
+	const repairUndefinedControlledValue = () => {
+		if (value !== undefined) return;
+		value = type === 'single' ? undefined : [];
+	};
+
+	// Multiple mode owns an empty selection array, not undefined.
+	repairBindable(() => value, repairUndefinedControlledValue);
+
+	const rootState = CalendarRootState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		weekdayFormat: boxWith(() => weekdayFormat),
+		weekStartsOn: boxWith(() => weekStartsOn),
+		pagedNavigation: boxWith(() => pagedNavigation),
+		isDateDisabled: boxWith(() => isDateDisabled),
+		isDateUnavailable: boxWith(() => isDateUnavailable),
+		fixedWeeks: boxWith(() => fixedWeeks),
+		numberOfMonths: boxWith(() => numberOfMonths),
+		locale: resolveLocaleProp(() => locale),
+		calendarLabel: boxWith(() => calendarLabel),
+		readonly: boxWith(() => readonly),
+		disabled: boxWith(() => disabled),
+		minValue: boxWith(() => minValue),
+		maxValue: boxWith(() => maxValue),
+		disableDaysOutsideMonth: boxWith(() => disableDaysOutsideMonth),
+		initialFocus: boxWith(() => initialFocus),
+		maxDays: boxWith(() => maxDays),
+		placeholder: boxWith(
+			() => placeholder as DateValue,
+			(v) => {
+				placeholder = v;
+				onPlaceholderChange(v as DateValue);
+			},
+		),
+		preventDeselect: boxWith(() => preventDeselect),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				// oxlint-disable-next-line no-explicit-any
+				onValueChange(v as any);
+			},
+		),
+		type: boxWith(() => type),
+		monthFormat: boxWith(() => monthFormat),
+		yearFormat: boxWith(() => yearFormat),
+		defaultPlaceholder,
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...rootState.snippetProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.(rootState.snippetProps)}
+	</div>
+{/if}

package/src/lib/components/calendar/exports.ts

@@ -0,0 +1,31 @@
+export { default as Root } from "./components/calendar.svelte";
+export { default as Day } from "./components/calendar-day.svelte";
+export { default as Grid } from "./components/calendar-grid.svelte";
+export { default as GridBody } from "./components/calendar-grid-body.svelte";
+export { default as Cell } from "./components/calendar-cell.svelte";
+export { default as GridHead } from "./components/calendar-grid-head.svelte";
+export { default as HeadCell } from "./components/calendar-head-cell.svelte";
+export { default as GridRow } from "./components/calendar-grid-row.svelte";
+export { default as Header } from "./components/calendar-header.svelte";
+export { default as Heading } from "./components/calendar-heading.svelte";
+export { default as MonthSelect } from "./components/calendar-month-select.svelte";
+export { default as NextButton } from "./components/calendar-next-button.svelte";
+export { default as PrevButton } from "./components/calendar-prev-button.svelte";
+export { default as YearSelect } from "./components/calendar-year-select.svelte";
+
+export type {
+	CalendarRootProps as RootProps,
+	CalendarPrevButtonProps as PrevButtonProps,
+	CalendarNextButtonProps as NextButtonProps,
+	CalendarHeadingProps as HeadingProps,
+	CalendarHeaderProps as HeaderProps,
+	CalendarGridProps as GridProps,
+	CalendarGridHeadProps as GridHeadProps,
+	CalendarHeadCellProps as HeadCellProps,
+	CalendarGridBodyProps as GridBodyProps,
+	CalendarGridRowProps as GridRowProps,
+	CalendarCellProps as CellProps,
+	CalendarDayProps as DayProps,
+	CalendarMonthSelectProps as MonthSelectProps,
+	CalendarYearSelectProps as YearSelectProps,
+} from "./types.js";

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

@@ -0,0 +1,2 @@
+export * as Calendar from "./exports.js";
+export * from "./exports.js";