bits-ui 1.7.0 → 2.1.0

package/dist/bits/time-field/types.d.ts

@@ -0,0 +1,137 @@
+import type { Time } from "@internationalized/date";
+import type { EditableSegmentPart, WithChildren } from "../../shared/index.js";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
+import type { TimeGranularity, TimeOnInvalid, TimeSegmentPart, TimeValidator, TimeValue } from "../../shared/date/types.js";
+export type TimeFieldRootPropsWithoutHTML<T extends TimeValue = Time> = WithChildren<{
+    /**
+     * The value of the time field.
+     *
+     * @bindable
+     */
+    value?: T;
+    /**
+     * A callback that is called when the time field value changes.
+     *
+     */
+    onValueChange?: OnChangeFn<T | undefined>;
+    /**
+     * The placeholder value of the time field. This determines the format
+     * and what time the field starts at when it is empty.
+     *
+     * @bindable
+     */
+    placeholder?: TimeValue;
+    /**
+     * A callback that is called when the time field's placeholder value changes.
+     */
+    onPlaceholderChange?: OnChangeFn<TimeValue | undefined>;
+    /**
+     * A function that returns a string or array of strings as validation errors if the time is
+     * invalid, or nothing if the time is valid
+     */
+    validate?: TimeValidator<T>;
+    /**
+     * A callback fired when the time field's value is invalid. Use this to display an error
+     * message to the user.
+     */
+    onInvalid?: TimeOnInvalid;
+    /**
+     * The minimum acceptable time. When provided, the time field
+     * will be marked as invalid if the user enters a time before this time.
+     */
+    minValue?: TimeValue;
+    /**
+     * The maximum acceptable time. When provided, the time field
+     * will be marked as invalid if the user enters a time after this time.
+     */
+    maxValue?: TimeValue;
+    /**
+     * If true, the time field will be disabled and users will not be able
+     * to interact with it. This also disables the hidden input element if
+     * the time field is used in a form.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the time field will be readonly, and users will not be able to
+     * edit the values of any of the individual segments.
+     *
+     * @defaultValue false
+     */
+    readonly?: boolean;
+    /**
+     * An array of segment names that should be readonly. If provided, only the
+     * segments not in this array will be editable.
+     */
+    readonlySegments?: EditableSegmentPart[];
+    /**
+     * The format to use for displaying the time in the input.
+     * If using a 12 hour clock, ensure you also include the `dayPeriod`
+     * segment in your input to ensure the user can select AM/PM.
+     *
+     * @defaultValue the locale's default time format
+     */
+    hourCycle?: 12 | 24;
+    /**
+     * The locale to use for formatting the time field.
+     *
+     * @defaultValue 'en'
+     */
+    locale?: string;
+    /**
+     * The granularity of the time field. This determines which
+     * segments will be includes in the segments array used to
+     * build the time field.
+     *
+     * Granularity is only used for visual purposes, and does not impact
+     * the value of the time field. You can have the same value synced
+     * between multiple time fields with different granularities and they
+     * will all contain the same value.
+     *
+     * @default 'minute'
+     */
+    granularity?: TimeGranularity;
+    /**
+     * Whether or not to hide the timeZoneName segment from the time field.
+     *
+     * @default false;
+     */
+    hideTimeZone?: boolean;
+    /**
+     * Whether or not the hidden input of the time field requires a value
+     * to be submitted.
+     *
+     * @defaultValue false
+     */
+    required?: boolean;
+    /**
+     * The `id` of the element which contains the error messages for the time field when the
+     * time is invalid.
+     */
+    errorMessageId?: string;
+}>;
+export type TimeFieldRootProps<T extends TimeValue = Time> = TimeFieldRootPropsWithoutHTML<T>;
+export type TimeFieldInputSnippetProps = {
+    segments: Array<{
+        part: TimeSegmentPart;
+        value: string;
+    }>;
+};
+export type TimeFieldInputPropsWithoutHTML = WithChild<{
+    /**
+     * The name to use for the hidden input element of the time field,
+     * which is used to submit the ISO string value of the time field
+     * to a server. If not provided, the hidden input element will not
+     * be rendered.
+     */
+    name?: string;
+}, TimeFieldInputSnippetProps>;
+export type TimeFieldInputProps = TimeFieldInputPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TimeFieldInputPropsWithoutHTML>;
+export type TimeFieldSegmentPropsWithoutHTML = WithChild<{
+    part: TimeSegmentPart;
+}>;
+export type TimeFieldSegmentProps = TimeFieldSegmentPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, TimeFieldSegmentPropsWithoutHTML>;
+export type TimeFieldLabelPropsWithoutHTML = WithChild;
+export type TimeFieldLabelProps = TimeFieldLabelPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TimeFieldLabelPropsWithoutHTML>;

package/dist/bits/time-field/types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/time-range-field/components/time-range-field-input.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { TimeRangeFieldInputProps } from "../types.js";
+	import { useTimeRangeFieldInput } from "../time-range-field.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import TimeFieldHiddenInput from "../../time-field/components/time-field-hidden-input.svelte";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		name = "",
+		child,
+		children,
+		type,
+		...restProps
+	}: TimeRangeFieldInputProps = $props();
+
+	const inputState = useTimeRangeFieldInput(
+		{
+			id: box.with(() => id),
+			ref: box.with(
+				() => ref,
+				(v) => (ref = v)
+			),
+			name: box.with(() => name),
+		},
+		type
+	);
+
+	const mergedProps = $derived(mergeProps(restProps, inputState.props, { role: "presentation" }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, segments: inputState.root.segmentContents })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.({ segments: inputState.root.segmentContents })}
+	</div>
+{/if}
+
+<TimeFieldHiddenInput />

package/dist/bits/time-range-field/components/time-range-field-input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TimeRangeFieldInputProps } from "../types.js";
+declare const TimeRangeFieldInput: import("svelte").Component<TimeRangeFieldInputProps, {}, "ref">;
+type TimeRangeFieldInput = ReturnType<typeof TimeRangeFieldInput>;
+export default TimeRangeFieldInput;

package/dist/bits/time-range-field/components/time-range-field-label.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useTimeRangeFieldLabel } from "../time-range-field.svelte.js";
+	import type { TimeRangeFieldLabelProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		children,
+		child,
+		...restProps
+	}: TimeRangeFieldLabelProps = $props();
+
+	const labelState = useTimeRangeFieldLabel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, labelState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/bits/time-range-field/components/time-range-field-label.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TimeRangeFieldLabelProps } from "../types.js";
+declare const TimeRangeFieldLabel: import("svelte").Component<TimeRangeFieldLabelProps, {}, "ref">;
+type TimeRangeFieldLabel = ReturnType<typeof TimeRangeFieldLabel>;
+export default TimeRangeFieldLabel;

package/dist/bits/time-range-field/components/time-range-field.svelte

@@ -0,0 +1,144 @@
+<script lang="ts" module>
+	import type { TimeRange, TimeValue } from "../../../shared/date/types.js";
+	import type { Time } from "@internationalized/date";
+
+	type T = unknown;
+</script>
+
+<script lang="ts" generics="T extends TimeValue = Time">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useTimeRangeFieldRoot } from "../time-range-field.svelte.js";
+	import type { TimeRangeFieldRootProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import { getDefaultTime } from "../../../internal/date-time/utils.js";
+	import { watch } from "runed";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(),
+		onValueChange = noop,
+		placeholder = $bindable(),
+		onPlaceholderChange = noop,
+		disabled = false,
+		readonly = false,
+		required = false,
+		hourCycle,
+		granularity,
+		locale = "en-US",
+		hideTimeZone = false,
+		validate = noop,
+		onInvalid = noop,
+		maxValue,
+		minValue,
+		readonlySegments = [],
+		children,
+		child,
+		onStartValueChange = noop,
+		onEndValueChange = noop,
+		errorMessageId,
+		...restProps
+	}: TimeRangeFieldRootProps<T> = $props();
+
+	let startValue = $state<T | undefined>(value?.start);
+	let endValue = $state<T | undefined>(value?.end);
+
+	function handleDefaultPlaceholder() {
+		if (placeholder !== undefined) return;
+		const defaultPlaceholder = getDefaultTime({ granularity, defaultValue: value?.start });
+		placeholder = defaultPlaceholder;
+	}
+
+	// SSR
+	handleDefaultPlaceholder();
+
+	watch.pre(
+		() => placeholder,
+		() => {
+			handleDefaultPlaceholder();
+		}
+	);
+
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		const defaultValue = { start: undefined, end: undefined };
+		value = defaultValue;
+	}
+
+	// SSR
+	handleDefaultValue();
+
+	/**
+	 * Covers an edge case where when a spread props object is reassigned,
+	 * the props are reset to their default values, which would make value
+	 * undefined which causes errors to be thrown.
+	 */
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
+	const rootState = useTimeRangeFieldRoot({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		disabled: box.with(() => disabled),
+		readonly: box.with(() => readonly),
+		required: box.with(() => required),
+		hourCycle: box.with(() => hourCycle),
+		granularity: box.with(() => granularity),
+		locale: box.with(() => locale),
+		hideTimeZone: box.with(() => hideTimeZone),
+		validate: box.with(() => validate),
+		maxValue: box.with(() => maxValue),
+		minValue: box.with(() => minValue),
+		placeholder: box.with(
+			() => placeholder as TimeValue,
+			(v) => {
+				placeholder = v;
+				onPlaceholderChange(v);
+			}
+		),
+		readonlySegments: box.with(() => readonlySegments),
+		value: box.with(
+			() => value as TimeRange<T>,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			}
+		),
+		startValue: box.with(
+			() => startValue,
+			(v) => {
+				startValue = v;
+				onStartValueChange(v);
+			}
+		),
+		endValue: box.with(
+			() => endValue,
+			(v) => {
+				endValue = v;
+				onEndValueChange(v);
+			}
+		),
+		onInvalid: box.with(() => onInvalid),
+		errorMessageId: box.with(() => errorMessageId),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/time-range-field/components/time-range-field.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { TimeValue } from "../../../shared/date/types.js";
+import type { Time } from "@internationalized/date";
+import type { TimeRangeFieldRootProps } from "../types.js";
+declare class __sveltets_Render<T extends TimeValue = Time> {
+    props(): TimeRangeFieldRootProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "value" | "placeholder" | "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends TimeValue = Time>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends TimeValue = Time>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TimeRangeField: $$IsomorphicComponent;
+type TimeRangeField<T extends TimeValue = Time> = InstanceType<typeof TimeRangeField<T>>;
+export default TimeRangeField;

package/dist/bits/time-range-field/exports.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/time-range-field.svelte";
+export { default as Input } from "./components/time-range-field-input.svelte";
+export { default as Label } from "./components/time-range-field-label.svelte";
+export { default as Segment } from "../time-field/components/time-field-segment.svelte";
+export type { TimeRangeFieldRootProps as RootProps, TimeRangeFieldLabelProps as LabelProps, TimeRangeFieldInputProps as InputProps, TimeRangeFieldSegmentProps as SegmentProps, } from "./types.js";

package/dist/bits/time-range-field/exports.js

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/time-range-field.svelte";
+export { default as Input } from "./components/time-range-field-input.svelte";
+export { default as Label } from "./components/time-range-field-label.svelte";
+export { default as Segment } from "../time-field/components/time-field-segment.svelte";

package/dist/bits/time-range-field/index.d.ts

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

package/dist/bits/time-range-field/index.js

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

package/dist/bits/time-range-field/time-range-field.svelte.d.ts

@@ -0,0 +1,90 @@
+import type { Time } from "@internationalized/date";
+import { Context } from "runed";
+import type { TimeFieldRootState } from "../time-field/time-field.svelte.js";
+import { TimeFieldInputState } from "../time-field/time-field.svelte.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import type { TimeSegmentPart } from "../../shared/index.js";
+import type { WithRefProps } from "../../internal/types.js";
+import type { TimeGranularity, TimeOnInvalid, TimeRange, TimeRangeValidator, TimeValue } from "../../shared/date/types.js";
+import { type TimeFormatter } from "../../internal/date-time/formatter.js";
+export declare const TIME_RANGE_FIELD_ROOT_ATTR = "data-time-range-field-root";
+type TimeRangeFieldRootStateProps<T extends TimeValue = Time> = WithRefProps<WritableBoxedValues<{
+    value: TimeRange<T>;
+    placeholder: TimeValue;
+    startValue: T | undefined;
+    endValue: T | undefined;
+}> & ReadableBoxedValues<{
+    readonlySegments: TimeSegmentPart[];
+    validate: TimeRangeValidator<T> | undefined;
+    onInvalid: TimeOnInvalid | undefined;
+    minValue: TimeValue | undefined;
+    maxValue: TimeValue | undefined;
+    disabled: boolean;
+    readonly: boolean;
+    granularity: TimeGranularity | undefined;
+    hourCycle: 12 | 24 | undefined;
+    locale: string;
+    hideTimeZone: boolean;
+    required: boolean;
+    errorMessageId: string | undefined;
+}>>;
+export declare class TimeRangeFieldRootState<T extends TimeValue = Time> {
+    #private;
+    readonly opts: TimeRangeFieldRootStateProps<T>;
+    startFieldState: TimeFieldRootState | undefined;
+    endFieldState: TimeFieldRootState | undefined;
+    descriptionId: string;
+    formatter: TimeFormatter;
+    fieldNode: HTMLElement | null;
+    labelNode: HTMLElement | null;
+    descriptionNode: HTMLElement | null;
+    startValueComplete: boolean;
+    endValueComplete: boolean;
+    rangeComplete: boolean;
+    startValueTime: Time | undefined;
+    endValueTime: Time | undefined;
+    minValueTime: Time | undefined;
+    maxValueTime: Time | undefined;
+    constructor(opts: TimeRangeFieldRootStateProps<T>);
+    validationStatus: false | {
+        readonly reason: "custom";
+        readonly message: string | string[];
+    } | {
+        readonly reason: "min";
+        readonly message?: undefined;
+    } | {
+        readonly reason: "max";
+        readonly message?: undefined;
+    };
+    isInvalid: boolean;
+    props: {
+        readonly id: string;
+        readonly role: "group";
+        readonly "data-time-range-field-root": "";
+        readonly "data-invalid": "" | undefined;
+    };
+}
+type TimeRangeFieldLabelStateProps = WithRefProps;
+declare class TimeRangeFieldLabelState {
+    #private;
+    readonly opts: TimeRangeFieldLabelStateProps;
+    readonly root: TimeRangeFieldRootState;
+    constructor(opts: TimeRangeFieldLabelStateProps, root: TimeRangeFieldRootState);
+    props: {
+        readonly id: string;
+        readonly "data-invalid": "" | undefined;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-time-range-field-label": "";
+        readonly onclick: () => void;
+    };
+}
+type TimeRangeFieldInputStateProps<T extends TimeValue = Time> = WritableBoxedValues<{
+    value: T | undefined;
+}> & ReadableBoxedValues<{
+    name: string;
+}> & WithRefProps;
+export declare const TimeRangeFieldRootContext: Context<TimeRangeFieldRootState<Time>>;
+export declare function useTimeRangeFieldRoot<T extends TimeValue = Time>(props: TimeRangeFieldRootStateProps<T>): TimeRangeFieldRootState<Time>;
+export declare function useTimeRangeFieldLabel(props: TimeRangeFieldLabelStateProps): TimeRangeFieldLabelState;
+export declare function useTimeRangeFieldInput(props: Omit<TimeRangeFieldInputStateProps, "value">, type: "start" | "end"): TimeFieldInputState;
+export {};