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

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

@@ -0,0 +1,51 @@
+import type { TimePickerEditableSegmentType, TimePickerGranularity, TimePickerHourCycle, TimePickerSegmentPart, TimePickerSegmentType, TimePickerTimeValue } from './time-utils';
+import type { PopoverChangeReason, PopoverOpenChangeDetails } from '../../popover/root/context';
+export type TimePickerOpenChangeReason = PopoverChangeReason;
+export type TimePickerOpenChangeDetails = PopoverOpenChangeDetails;
+export type TimePickerContext = {
+    id: string;
+    isDisabled: boolean;
+    isReadOnly: boolean;
+    isRequired: boolean;
+    granularity: TimePickerGranularity;
+    hourCycle: TimePickerHourCycle;
+    open: boolean;
+    focusVisible: boolean;
+    focusWithin: boolean;
+    isInvalidDraft: boolean;
+    value: TimePickerTimeValue | null;
+    locale: string;
+    triggerRef: HTMLElement | null;
+    activeSegment: Exclude<TimePickerSegmentType, 'literal'> | null;
+    setTriggerRef: (element: HTMLElement | null) => void;
+    setFocusVisible: (visible: boolean) => void;
+    syncFocusWithin: () => void;
+    setActiveSegment: (segment: Exclude<TimePickerSegmentType, 'literal'> | null) => void;
+    openPopover: (reason?: TimePickerOpenChangeReason, event?: Event) => void;
+    closePopover: (reason?: TimePickerOpenChangeReason, event?: Event) => void;
+    togglePopover: (reason?: TimePickerOpenChangeReason, event?: Event) => void;
+    onOpenChange: (open: boolean, details: TimePickerOpenChangeDetails) => void;
+    setValue: (nextValue: TimePickerTimeValue | null) => void;
+    getSegments: () => TimePickerSegmentPart[];
+    getSegmentValue: (type: Exclude<TimePickerSegmentType, 'literal'>) => string;
+    setSegmentValue: (type: Exclude<TimePickerSegmentType, 'literal'>, nextValue: string) => void;
+    typeSegmentDigit: (type: Exclude<TimePickerSegmentType, 'literal'>, digit: string) => boolean;
+    adjustSegmentValue: (type: Exclude<TimePickerSegmentType, 'literal'>, step: number) => void;
+    getSegmentLabel: (type: TimePickerEditableSegmentType) => string;
+    registerSegmentRef: (type: TimePickerEditableSegmentType, element: HTMLElement | null) => void;
+    focusNextPlaceholderOrLastSegment: () => boolean;
+    focusNextSegment: (type: TimePickerEditableSegmentType) => boolean;
+    focusPreviousSegment: (type: TimePickerEditableSegmentType) => boolean;
+    focusLastSegment: () => boolean;
+    selectWheelValue: (type: TimePickerEditableSegmentType, value: string) => void;
+    getSelectedWheelValue: (type: TimePickerEditableSegmentType) => string | null;
+    getWheelOptions: (type: TimePickerEditableSegmentType) => Array<{
+        value: string;
+        label: string;
+        disabled: boolean;
+    }>;
+};
+export declare function setTimePickerContext(context: TimePickerContext): void;
+export declare function getTimePickerContext(): TimePickerContext | undefined;
+export declare function useTimePickerContext(): TimePickerContext;
+export type { TimePickerSegmentPart, TimePickerSegmentType, TimePickerEditableSegmentType };

package/dist/timepicker/root/context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('time-picker');
+export function setTimePickerContext(context) {
+    setContext(KEY, context);
+}
+export function getTimePickerContext() {
+    return getContext(KEY);
+}
+export function useTimePickerContext() {
+    const context = getTimePickerContext();
+    if (!context) {
+        throw new Error('TimePicker components must be used within TimePicker.Root.');
+    }
+    return context;
+}

package/dist/timepicker/root/time-picker-12h-test.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { LocaleProvider } from '../../locale-provider';
+	import TimePicker from '../index';
+
+	let value = $state<string | null>('14:30');
+</script>
+
+<LocaleProvider locale="en-US">
+	<TimePicker.Root bind:value hourCycle={12}>
+		<TimePicker.Input aria-label="Time input">
+			{#snippet children(segment)}
+				<TimePicker.Segment {segment} />
+			{/snippet}
+		</TimePicker.Input>
+		<TimePicker.Trigger>Open time picker</TimePicker.Trigger>
+		<TimePicker.Popover>
+			<TimePicker.Clock />
+		</TimePicker.Popover>
+	</TimePicker.Root>
+</LocaleProvider>
+
+<p data-testid="bind-value">{value}</p>

package/dist/timepicker/root/time-picker-12h-test.svelte.d.ts

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

package/dist/timepicker/root/time-picker-bindable-test.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import TimePicker from '../index';
+
+	let value = $state<string | null | undefined>('14:30');
+	let open = $state(false);
+</script>
+
+<TimePicker.Root bind:value bind:open hourCycle={24}>
+	<TimePicker.Input aria-label="Time input">
+		{#snippet children(segment)}
+			<TimePicker.Segment {segment} />
+		{/snippet}
+	</TimePicker.Input>
+	<TimePicker.Trigger>Open time picker</TimePicker.Trigger>
+	<TimePicker.Popover>
+		<TimePicker.Clock />
+	</TimePicker.Popover>
+</TimePicker.Root>
+
+<p data-testid="bind-value">{value}</p>
+<p data-testid="bind-open">{String(open)}</p>
+<button type="button" data-testid="clear-undefined" onclick={() => (value = undefined)}
+	>Clear undefined</button
+>
+<button type="button" data-testid="clear-null" onclick={() => (value = null)}>Clear null</button>

package/dist/timepicker/root/time-picker-bindable-test.svelte.d.ts

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

package/dist/timepicker/root/time-picker-empty-test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import TimePicker from '../index';
+
+	let value = $state<string | null>(null);
+</script>
+
+<TimePicker.Root bind:value hourCycle={24}>
+	<TimePicker.Input aria-label="Time input">
+		{#snippet children(segment)}
+			<TimePicker.Segment {segment} />
+		{/snippet}
+	</TimePicker.Input>
+	<TimePicker.Trigger>Open time picker</TimePicker.Trigger>
+	<TimePicker.Popover>
+		<TimePicker.Clock />
+	</TimePicker.Popover>
+</TimePicker.Root>
+
+<p data-testid="bind-value">{value}</p>
+<button type="button" data-testid="outside-button">Outside</button>

package/dist/timepicker/root/time-picker-empty-test.svelte.d.ts

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