@human-kit/svelte-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/clock/root/time-utils.js

@@ -0,0 +1,314 @@
+const timeValuePattern = /^(?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d)?$/;
+export function createEmptyTimePickerDraft() {
+    return {
+        hour: '',
+        minute: '',
+        second: '',
+        dayPeriod: ''
+    };
+}
+export function isValidTimePickerValue(value) {
+    return typeof value === 'string' && timeValuePattern.test(value);
+}
+export function parseTimePickerValue(value) {
+    if (!isValidTimePickerValue(value))
+        return null;
+    const [hourPart, minutePart, secondPart] = value.split(':');
+    return {
+        hour: Number(hourPart),
+        minute: Number(minutePart),
+        second: Number(secondPart ?? '0')
+    };
+}
+function pad2(value) {
+    return value.toString().padStart(2, '0');
+}
+function formatDraftTwoDigits(value) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric))
+        return value;
+    return pad2(Math.trunc(numeric));
+}
+function getDayPeriodPlaceholder(locale) {
+    try {
+        const formatter = new Intl.DateTimeFormat(locale, {
+            hour: 'numeric',
+            hourCycle: 'h12',
+            timeZone: 'UTC'
+        });
+        const dayPeriod = formatter
+            .formatToParts(new Date(Date.UTC(2024, 0, 1, 9, 0, 0)))
+            .find((part) => part.type === 'dayPeriod')
+            ?.value?.trim();
+        return dayPeriod && dayPeriod.length > 0 ? dayPeriod : 'AM';
+    }
+    catch {
+        return 'AM';
+    }
+}
+export function formatTimePickerValue(parts, granularity) {
+    const hour = pad2(parts.hour);
+    if (granularity === 'hour') {
+        return `${hour}:00`;
+    }
+    const minute = pad2(parts.minute);
+    if (granularity === 'minute') {
+        return `${hour}:${minute}`;
+    }
+    return `${hour}:${minute}:${pad2(parts.second)}`;
+}
+export function toDraftFromTimeValue(value, hourCycle) {
+    const parsed = parseTimePickerValue(value);
+    if (!parsed)
+        return createEmptyTimePickerDraft();
+    if (hourCycle === 24) {
+        return {
+            hour: String(parsed.hour),
+            minute: String(parsed.minute),
+            second: String(parsed.second),
+            dayPeriod: ''
+        };
+    }
+    const isPm = parsed.hour >= 12;
+    const hour12 = parsed.hour % 12 || 12;
+    return {
+        hour: String(hour12),
+        minute: String(parsed.minute),
+        second: String(parsed.second),
+        dayPeriod: isPm ? 'PM' : 'AM'
+    };
+}
+export function getRequiredSegments(granularity, hourCycle) {
+    const required = ['hour'];
+    if (granularity !== 'hour') {
+        required.push('minute');
+    }
+    if (granularity === 'second') {
+        required.push('second');
+    }
+    if (hourCycle === 12) {
+        required.push('dayPeriod');
+    }
+    return required;
+}
+export function normalizeSegmentNumberInput(value, maxDigits = 2) {
+    const digits = value.replace(/\D+/g, '').slice(0, maxDigits);
+    if (!digits)
+        return '';
+    const numeric = Number(digits);
+    if (!Number.isFinite(numeric))
+        return '';
+    return String(numeric);
+}
+export function isSegmentValueEmpty(value) {
+    return !value || value.trim().length === 0;
+}
+export function buildTimePartsFromDraft(draft, granularity, hourCycle) {
+    const hourRaw = draft.hour.trim();
+    const minuteRaw = draft.minute.trim();
+    const secondRaw = draft.second.trim();
+    const dayPeriodRaw = draft.dayPeriod.trim().toUpperCase();
+    if (!hourRaw)
+        return null;
+    if (granularity !== 'hour' && !minuteRaw)
+        return null;
+    if (granularity === 'second' && !secondRaw)
+        return null;
+    if (hourCycle === 12 && !dayPeriodRaw)
+        return null;
+    const hourNumeric = Number(hourRaw);
+    if (!Number.isInteger(hourNumeric))
+        return null;
+    let hour24 = hourNumeric;
+    if (hourCycle === 12) {
+        if (hourNumeric < 1 || hourNumeric > 12)
+            return null;
+        if (dayPeriodRaw !== 'AM' && dayPeriodRaw !== 'PM')
+            return null;
+        hour24 = hourNumeric % 12;
+        if (dayPeriodRaw === 'PM') {
+            hour24 += 12;
+        }
+    }
+    else if (hourNumeric < 0 || hourNumeric > 23) {
+        return null;
+    }
+    const minute = granularity === 'hour' ? 0 : Number(minuteRaw);
+    if (!Number.isInteger(minute) || minute < 0 || minute > 59)
+        return null;
+    const second = granularity === 'second' ? Number(secondRaw) : 0;
+    if (!Number.isInteger(second) || second < 0 || second > 59)
+        return null;
+    return {
+        hour: hour24,
+        minute,
+        second
+    };
+}
+export function compareTimeParts(left, right) {
+    const leftTotal = left.hour * 3600 + left.minute * 60 + left.second;
+    const rightTotal = right.hour * 3600 + right.minute * 60 + right.second;
+    if (leftTotal < rightTotal)
+        return -1;
+    if (leftTotal > rightTotal)
+        return 1;
+    return 0;
+}
+function truncateToGranularity(parts, granularity) {
+    if (granularity === 'hour')
+        return { hour: parts.hour, minute: 0, second: 0 };
+    if (granularity === 'minute')
+        return { hour: parts.hour, minute: parts.minute, second: 0 };
+    return parts;
+}
+export function isTimeOutOfRange(value, minValue, maxValue, granularity = 'second') {
+    const currentRaw = parseTimePickerValue(value);
+    if (!currentRaw)
+        return true;
+    const current = truncateToGranularity(currentRaw, granularity);
+    if (minValue) {
+        const minRaw = parseTimePickerValue(minValue);
+        if (minRaw) {
+            const min = truncateToGranularity(minRaw, granularity);
+            if (compareTimeParts(current, min) < 0)
+                return true;
+        }
+    }
+    if (maxValue) {
+        const maxRaw = parseTimePickerValue(maxValue);
+        if (maxRaw) {
+            const max = truncateToGranularity(maxRaw, granularity);
+            if (compareTimeParts(current, max) > 0)
+                return true;
+        }
+    }
+    return false;
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+export function clampToStep(value, step, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+    const clamped = clamp(value, min, max);
+    const stepped = Math.round(clamped / safeStep) * safeStep;
+    return clamp(stepped, min, max);
+}
+function wrapCircular(value, min, max) {
+    const range = max - min + 1;
+    if (range <= 0)
+        return min;
+    let normalized = (value - min) % range;
+    if (normalized < 0)
+        normalized += range;
+    return normalized + min;
+}
+export function adjustSegmentWithStep(currentValue, type, delta, options) {
+    let min = 0;
+    let max = 59;
+    let step = 1;
+    if (type === 'hour') {
+        if (options.hourCycle === 12) {
+            min = 1;
+            max = 12;
+        }
+        else {
+            min = 0;
+            max = 23;
+        }
+        step = Math.max(1, options.hourStep);
+    }
+    if (type === 'minute') {
+        min = 0;
+        max = 59;
+        step = Math.max(1, options.minuteStep);
+    }
+    if (type === 'second') {
+        min = 0;
+        max = 59;
+        step = Math.max(1, options.secondStep);
+    }
+    const current = Number(currentValue || String(min));
+    const base = Number.isFinite(current) ? current : min;
+    const next = wrapCircular(base + step * delta, min, max);
+    return String(next);
+}
+export function buildTimePickerSegments(params) {
+    const { locale, hourCycle, granularity, draft, formatter } = params;
+    const formatOptions = {
+        hour: 'numeric',
+        minute: granularity !== 'hour' ? '2-digit' : undefined,
+        second: granularity === 'second' ? '2-digit' : undefined,
+        hourCycle: hourCycle === 12 ? 'h12' : 'h23',
+        timeZone: 'UTC'
+    };
+    const sampleDate = new Date(Date.UTC(2024, 0, 1, 14, 30, 45));
+    const resolvedFormatter = formatter ?? new Intl.DateTimeFormat(locale, formatOptions);
+    const parts = resolvedFormatter.formatToParts(sampleDate);
+    return parts
+        .map((part) => {
+        if (part.type === 'literal') {
+            return {
+                type: 'literal',
+                text: part.value,
+                isPlaceholder: false
+            };
+        }
+        if (part.type === 'hour') {
+            const isPlaceholder = isSegmentValueEmpty(draft.hour);
+            const hourText = hourCycle === 24 && draft.hour.trim() === '0' ? '00' : draft.hour;
+            return {
+                type: 'hour',
+                text: isPlaceholder ? (hourCycle === 12 ? 'hh' : 'HH') : hourText,
+                isPlaceholder
+            };
+        }
+        if (part.type === 'minute' && granularity !== 'hour') {
+            const isPlaceholder = isSegmentValueEmpty(draft.minute);
+            return {
+                type: 'minute',
+                text: isPlaceholder ? 'mm' : formatDraftTwoDigits(draft.minute),
+                isPlaceholder
+            };
+        }
+        if (part.type === 'second' && granularity === 'second') {
+            const isPlaceholder = isSegmentValueEmpty(draft.second);
+            return {
+                type: 'second',
+                text: isPlaceholder ? 'ss' : formatDraftTwoDigits(draft.second),
+                isPlaceholder
+            };
+        }
+        if (part.type === 'dayPeriod' && hourCycle === 12) {
+            const isPlaceholder = isSegmentValueEmpty(draft.dayPeriod);
+            return {
+                type: 'dayPeriod',
+                text: isPlaceholder ? getDayPeriodPlaceholder(locale) : draft.dayPeriod,
+                isPlaceholder
+            };
+        }
+        return null;
+    })
+        .filter((part) => part !== null);
+}
+export function getEditableSegmentOrder(segments) {
+    return segments
+        .filter((segment) => segment.type !== 'literal')
+        .map((segment) => segment.type);
+}
+export function getSegmentLabel(type, locale) {
+    try {
+        const displayNames = new Intl.DisplayNames([locale], { type: 'dateTimeField' });
+        return displayNames.of(type) ?? type;
+    }
+    catch {
+        if (type === 'hour')
+            return 'Hour';
+        if (type === 'minute')
+            return 'Minute';
+        if (type === 'second')
+            return 'Second';
+        return 'Day period';
+    }
+}

package/dist/clock/root/wheel-options.d.ts

@@ -0,0 +1,17 @@
+import type { TimePickerDraft, TimePickerEditableSegmentType, TimePickerGranularity, TimePickerHourCycle, TimePickerTimeValue } from './time-utils';
+export type WheelOption = {
+    value: string;
+    label: string;
+    disabled: boolean;
+};
+export declare function buildWheelOptions(params: {
+    type: TimePickerEditableSegmentType;
+    granularity: TimePickerGranularity;
+    hourCycle: TimePickerHourCycle;
+    hourStep: number;
+    minuteStep: number;
+    secondStep: number;
+    hasRangeBounds: boolean;
+    getCandidateFromPartial: (partial: Partial<TimePickerDraft>) => TimePickerTimeValue | null;
+    isOutOfRange: (value: TimePickerTimeValue) => boolean;
+}): WheelOption[];

package/dist/clock/root/wheel-options.js

@@ -0,0 +1,63 @@
+export function buildWheelOptions(params) {
+    const { type, hourCycle, hourStep, minuteStep, secondStep, hasRangeBounds, getCandidateFromPartial, isOutOfRange } = params;
+    const options = [];
+    if (type === 'dayPeriod') {
+        for (const option of ['AM', 'PM']) {
+            const disabled = hasRangeBounds
+                ? (() => {
+                    const candidate = getCandidateFromPartial({ dayPeriod: option });
+                    return candidate ? isOutOfRange(candidate) : false;
+                })()
+                : false;
+            options.push({
+                value: option,
+                label: option,
+                disabled
+            });
+        }
+        return options;
+    }
+    let min = 0;
+    let max = 59;
+    let step = 1;
+    if (type === 'hour') {
+        if (hourCycle === 12) {
+            min = 1;
+            max = 12;
+        }
+        else {
+            min = 0;
+            max = 23;
+        }
+        step = Math.max(1, hourStep);
+    }
+    else if (type === 'minute') {
+        min = 0;
+        max = 59;
+        step = Math.max(1, minuteStep);
+    }
+    else if (type === 'second') {
+        min = 0;
+        max = 59;
+        step = Math.max(1, secondStep);
+    }
+    for (let current = min; current <= max; current += step) {
+        const valueString = String(current);
+        const disabled = hasRangeBounds
+            ? (() => {
+                const candidate = getCandidateFromPartial(type === 'hour'
+                    ? { hour: valueString }
+                    : type === 'minute'
+                        ? { minute: valueString }
+                        : { second: valueString });
+                return candidate ? isOutOfRange(candidate) : false;
+            })()
+            : false;
+        options.push({
+            value: valueString,
+            label: String(current).padStart(2, '0'),
+            disabled
+        });
+    }
+    return options;
+}

package/dist/clock/wheel-column/README.md

@@ -0,0 +1,25 @@
+# Clock WheelColumn
+
+## API reference
+
+### Clock.WheelColumn
+
+Name: `Clock.WheelColumn`  
+Description: Scrollable spinbutton column for a single editable segment (`hour`, `minute`, `second`, `dayPeriod`).
+
+| Prop           | Type                                                             | Default         | Description                                                 |
+| -------------- | ---------------------------------------------------------------- | --------------- | ----------------------------------------------------------- |
+| `type`         | `'hour' \| 'minute' \| 'second' \| 'dayPeriod'`                  | `required`      | Segment represented by this wheel column.                   |
+| `children`     | `Snippet<[{ value: string; label: string; disabled: boolean }]>` | `undefined`     | Optional custom item renderer for each wheel option.        |
+| `class`        | `string`                                                         | `'h-55'`        | CSS class names for the spinbutton column.                  |
+| `aria-label`   | `string`                                                         | `segment label` | Overrides the computed accessible column label.             |
+| `...restProps` | `HTMLAttributes<HTMLDivElement>`                                 | `-`             | Additional attributes forwarded to the column root element. |
+
+### Context utilities
+
+Name: `useClockContext`  
+Description: Reads shared state and operations from `Clock.Root`.
+
+| Prop              | Type                 | Default | Description                                      |
+| ----------------- | -------------------- | ------- | ------------------------------------------------ |
+| `useClockContext` | `() => ClockContext` | `-`     | Returns context and throws outside `Clock.Root`. |

package/dist/clock/wheel-column/clock-wheel-column-bindable-test.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import * as Clock from '../index.parts';
+
+	let value = $state<string | null>('14:30');
+</script>
+
+<Clock.Root bind:value hourCycle={24} class="flex gap-2">
+	{#snippet column(col)}
+		<Clock.WheelColumn type={col.type} class="h-44 w-16" />
+	{/snippet}
+</Clock.Root>
+
+<p data-testid="bind-value">{value}</p>
+<button type="button" data-testid="set-value-16-45" onclick={() => (value = '16:45')}
+	>Set value</button
+>

package/dist/clock/wheel-column/clock-wheel-column-bindable-test.svelte.d.ts

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

package/dist/clock/wheel-column/clock-wheel-column-custom-snippet-test.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Clock from '../index.parts';
+
+	type Props = {
+		defaultValue?: string;
+	};
+
+	let { defaultValue = '14:30' }: Props = $props();
+
+	let selectedValue = $state<string | null>('');
+</script>
+
+<Clock.Root
+	{defaultValue}
+	onChange={(nextValue) => {
+		selectedValue = nextValue;
+	}}
+	class="flex gap-2"
+>
+	{#snippet column(col)}
+		<Clock.WheelColumn type={col.type} class="h-44 w-16">
+			{#snippet children(option)}
+				<Clock.WheelItem type={col.type} {option} class="custom-wheel-item" />
+			{/snippet}
+		</Clock.WheelColumn>
+	{/snippet}
+</Clock.Root>
+
+<p data-testid="clock-value">{selectedValue}</p>

package/dist/clock/wheel-column/clock-wheel-column-custom-snippet-test.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    defaultValue?: string;
+};
+declare const ClockWheelColumnCustomSnippetTest: import("svelte").Component<Props, {}, "">;
+type ClockWheelColumnCustomSnippetTest = ReturnType<typeof ClockWheelColumnCustomSnippetTest>;
+export default ClockWheelColumnCustomSnippetTest;

package/dist/clock/wheel-column/clock-wheel-column-default-height-test.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import * as Clock from '../index.parts';
+
+	let value = $state<string | null>('14:30');
+</script>
+
+<Clock.Root bind:value hourCycle={24} class="flex gap-2">
+	{#snippet column(col)}
+		<Clock.WheelColumn type={col.type} class="w-16" />
+	{/snippet}
+</Clock.Root>

package/dist/clock/wheel-column/clock-wheel-column-default-height-test.svelte.d.ts

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

package/dist/clock/wheel-column/clock-wheel-column-test.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import * as Clock from '../index.parts';
+	import type { ClockColumnInfo } from '../root/resolve-visible-columns';
+
+	type Props = {
+		defaultValue?: string;
+		defaultOpen?: boolean;
+		hourCycle?: 12 | 24;
+		granularity?: 'hour' | 'minute' | 'second';
+		minValue?: string;
+		maxValue?: string;
+		useSnippet?: boolean;
+	};
+
+	let {
+		defaultValue = '14:30',
+		hourCycle = 24,
+		granularity = 'minute',
+		minValue,
+		maxValue,
+		useSnippet = false
+	}: Props = $props();
+
+	let value = $state<string | null>(untrack(() => defaultValue));
+</script>
+
+{#if useSnippet}
+	<Clock.Root bind:value {hourCycle} {granularity} {minValue} {maxValue} class="flex gap-2">
+		{#snippet column(col: ClockColumnInfo)}
+			<div data-testid="panel-column" data-type={col.type}>{col.label}</div>
+		{/snippet}
+	</Clock.Root>
+{:else}
+	<Clock.Root bind:value {hourCycle} {granularity} {minValue} {maxValue} class="flex gap-2" />
+{/if}
+
+<p data-testid="clock-value">{value}</p>

package/dist/clock/wheel-column/clock-wheel-column-test.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    defaultValue?: string;
+    defaultOpen?: boolean;
+    hourCycle?: 12 | 24;
+    granularity?: 'hour' | 'minute' | 'second';
+    minValue?: string;
+    maxValue?: string;
+    useSnippet?: boolean;
+};
+declare const ClockWheelColumnTest: import("svelte").Component<Props, {}, "">;
+type ClockWheelColumnTest = ReturnType<typeof ClockWheelColumnTest>;
+export default ClockWheelColumnTest;

package/dist/clock/wheel-column/clock-wheel-column-tp-test.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import * as Clock from '../index.parts';
+	import type { ClockColumnInfo } from '../root/resolve-visible-columns';
+
+	type Props = {
+		defaultValue?: string;
+		defaultOpen?: boolean;
+		hourCycle?: 12 | 24;
+		granularity?: 'hour' | 'minute' | 'second';
+		minValue?: string;
+		maxValue?: string;
+		useSnippet?: boolean;
+	};
+
+	let {
+		defaultValue = '14:30',
+		hourCycle = 24,
+		granularity = 'minute',
+		minValue,
+		maxValue,
+		useSnippet = false
+	}: Props = $props();
+
+	let value = $state<string | null>(untrack(() => defaultValue));
+</script>
+
+{#if useSnippet}
+	<Clock.Root bind:value {hourCycle} {granularity} {minValue} {maxValue} class="flex gap-2">
+		{#snippet column(col: ClockColumnInfo)}
+			<div data-testid="panel-column" data-type={col.type}>{col.label}</div>
+		{/snippet}
+	</Clock.Root>
+{:else}
+	<Clock.Root bind:value {hourCycle} {granularity} {minValue} {maxValue} class="flex gap-2" />
+{/if}
+
+<p data-testid="clock-value">{value}</p>

package/dist/clock/wheel-column/clock-wheel-column-tp-test.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    defaultValue?: string;
+    defaultOpen?: boolean;
+    hourCycle?: 12 | 24;
+    granularity?: 'hour' | 'minute' | 'second';
+    minValue?: string;
+    maxValue?: string;
+    useSnippet?: boolean;
+};
+declare const ClockWheelColumnTpTest: import("svelte").Component<Props, {}, "">;
+type ClockWheelColumnTpTest = ReturnType<typeof ClockWheelColumnTpTest>;
+export default ClockWheelColumnTpTest;

package/dist/clock/wheel-column/clock-wheel-column-untagged-snippet-test.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Clock from '../index.parts';
+
+	type Props = {
+		defaultValue?: string;
+	};
+
+	let { defaultValue = '14:30' }: Props = $props();
+
+	let selectedValue = $state<string | null>('');
+</script>
+
+<Clock.Root
+	{defaultValue}
+	onChange={(nextValue) => {
+		selectedValue = nextValue;
+	}}
+	class="flex gap-2"
+>
+	{#snippet column(col)}
+		<Clock.WheelColumn type={col.type} class="h-44 w-16">
+			{#snippet children(option)}
+				<div data-testid="untagged-wheel-option">{option.label}</div>
+			{/snippet}
+		</Clock.WheelColumn>
+	{/snippet}
+</Clock.Root>
+
+<p data-testid="clock-value">{selectedValue}</p>

package/dist/clock/wheel-column/clock-wheel-column-untagged-snippet-test.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    defaultValue?: string;
+};
+declare const ClockWheelColumnUntaggedSnippetTest: import("svelte").Component<Props, {}, "">;
+type ClockWheelColumnUntaggedSnippetTest = ReturnType<typeof ClockWheelColumnUntaggedSnippetTest>;
+export default ClockWheelColumnUntaggedSnippetTest;