sheer-ui 0.4.2 → 0.5.0

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

@@ -0,0 +1,137 @@
+import type { Time } from "@internationalized/date";
+import type { EditableSegmentPart, WithChildren } from "../../internal/index.js";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../internal/attribute-types.js";
+import type { TimeGranularity, TimeOnInvalid, TimeSegmentPart, TimeValidator, TimeValue } from "../../internal/date-time/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/components/time-field/types.js

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

package/dist/components/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/components/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/components/time-range-field/components/time-range-field.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { TimeValue } from '../../../internal/date-time/types.js';
+import type { Time } from '@internationalized/date';
+import type { TimeRangeFieldRootProps } from '../types.js';
+declare function $$render<T extends TimeValue = Time>(): {
+    props: TimeRangeFieldRootProps<T>;
+    exports: {};
+    bindings: "ref" | "placeholder" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends TimeValue = Time> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "placeholder" | "value";
+    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/components/time-range-field/index.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/components/time-range-field/index.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/components/time-range-field/time-range-field.svelte.d.ts

@@ -0,0 +1,98 @@
+import type { Time } from '@internationalized/date';
+import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { TimeFieldRootState } from '../time-field/time-field.svelte.js';
+import { TimeFieldInputState } from '../time-field/time-field.svelte.js';
+import type { TimeSegmentPart } from '../../internal/index.js';
+import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { TimeGranularity, TimeOnInvalid, TimeEndpoints, TimeRangeValidator, TimeValue } from '../../internal/date-time/types.js';
+import { type TimeFormatter } from '../../internal/date-time/formatter.js';
+import { RangeFieldValueController } from '../../internal/date-time/field/range-field.svelte.js';
+export declare const timeRangeFieldAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "label"]>;
+export declare const getTimeRangeFieldRoot: () => TimeRangeFieldRootState<Time>, setTimeRangeFieldRoot: (context: TimeRangeFieldRootState<Time>) => TimeRangeFieldRootState<Time>;
+interface TimeRangeFieldRootStateOpts<T extends TimeValue = Time> extends WithRefOpts, WritableBoxedValues<{
+    value: TimeEndpoints<T>;
+    placeholder: TimeValue;
+}>, 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> {
+    static create<T extends TimeValue = Time>(opts: TimeRangeFieldRootStateOpts<T>): TimeRangeFieldRootState<Time>;
+    readonly opts: TimeRangeFieldRootStateOpts<T>;
+    readonly attachment: RefAttachment;
+    startFieldState: TimeFieldRootState | undefined;
+    endFieldState: TimeFieldRootState | undefined;
+    descriptionId: string;
+    formatter: TimeFormatter;
+    fieldNode: HTMLElement | null;
+    labelNode: HTMLElement | null;
+    descriptionNode: HTMLElement | null;
+    readonly valueController: RangeFieldValueController<T>;
+    get startValue(): T | undefined;
+    get endValue(): T | undefined;
+    get startValueComplete(): boolean;
+    get endValueComplete(): boolean;
+    get rangeComplete(): boolean;
+    readonly startValueTime: Time | undefined;
+    readonly endValueTime: Time | undefined;
+    readonly minValueTime: Time | undefined;
+    readonly maxValueTime: Time | undefined;
+    domContext: DOMContext;
+    constructor(opts: TimeRangeFieldRootStateOpts<T>);
+    /** Box for a child field's value: reads the derived side; writes override it and recommit the range. */
+    sideValueBox(type: 'start' | 'end'): import("../../internal/tools/box.svelte.js").WritableBox<T | undefined>;
+    readonly validationStatus: false | {
+        readonly reason: "custom";
+        readonly message: string | string[];
+    } | {
+        readonly reason: "min";
+        readonly message?: undefined;
+    } | {
+        readonly reason: "max";
+        readonly message?: undefined;
+    };
+    readonly isInvalid: boolean;
+    props: {
+        readonly id: string;
+        readonly role: "group";
+        readonly 'data-invalid': "" | undefined;
+    };
+}
+interface TimeRangeFieldLabelStateOpts extends WithRefOpts {
+}
+export declare class TimeRangeFieldLabelState {
+    #private;
+    static create(opts: TimeRangeFieldLabelStateOpts): TimeRangeFieldLabelState;
+    readonly opts: TimeRangeFieldLabelStateOpts;
+    readonly root: TimeRangeFieldRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: TimeRangeFieldLabelStateOpts, root: TimeRangeFieldRootState);
+    readonly props: {
+        readonly id: string;
+        readonly 'data-invalid': "" | undefined;
+        readonly 'data-disabled': "" | undefined;
+        readonly onclick: () => void;
+    };
+}
+interface TimeRangeFieldInputStateOpts<T extends TimeValue = Time> extends WritableBoxedValues<{
+    value: T | undefined;
+}>, ReadableBoxedValues<{
+    name: string;
+}>, WithRefOpts {
+}
+export declare class TimeRangeFieldInputState {
+    static create(opts: Omit<TimeRangeFieldInputStateOpts, 'value'>, type: 'start' | 'end'): TimeFieldInputState;
+}
+export {};

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

@@ -0,0 +1,166 @@
+import { boxWith, attachRef, DOMContext } from '../../internal/tools/index.js';
+import { createContext, onMount } from 'svelte';
+import { TimeFieldRootState } from '../time-field/time-field.svelte.js';
+import { TimeFieldInputState } from '../time-field/time-field.svelte.js';
+import { createId } from '../../internal/create-id.js';
+import { createBitsAttrs, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
+import { createTimeFormatter } from '../../internal/date-time/formatter.js';
+import { getFirstSegment } from '../../internal/date-time/field/segments.js';
+import { convertTimeValueToTime, isTimeBefore } from '../../internal/date-time/field/time-helpers.js';
+import { RangeFieldValueController } from '../../internal/date-time/field/range-field.svelte.js';
+export const timeRangeFieldAttrs = createBitsAttrs({
+    component: 'time-range-field',
+    parts: ['root', 'label'],
+});
+export const [getTimeRangeFieldRoot, setTimeRangeFieldRoot] = createContext();
+export class TimeRangeFieldRootState {
+    static create(opts) {
+        return setTimeRangeFieldRoot(new TimeRangeFieldRootState(opts));
+    }
+    opts;
+    attachment;
+    startFieldState = undefined;
+    endFieldState = undefined;
+    descriptionId;
+    formatter;
+    fieldNode = $state(null);
+    labelNode = $state(null);
+    descriptionNode = $state(null);
+    valueController;
+    get startValue() { return this.valueController.start; }
+    get endValue() { return this.valueController.end; }
+    get startValueComplete() { return this.valueController.startComplete; }
+    get endValueComplete() { return this.valueController.endComplete; }
+    get rangeComplete() { return this.valueController.complete; }
+    startValueTime = $derived.by(() => {
+        if (!this.startValue)
+            return undefined;
+        return convertTimeValueToTime(this.startValue);
+    });
+    endValueTime = $derived.by(() => {
+        if (!this.endValue)
+            return undefined;
+        return convertTimeValueToTime(this.endValue);
+    });
+    minValueTime = $derived.by(() => {
+        if (!this.opts.minValue.current)
+            return undefined;
+        return convertTimeValueToTime(this.opts.minValue.current);
+    });
+    maxValueTime = $derived.by(() => {
+        if (!this.opts.maxValue.current)
+            return undefined;
+        return convertTimeValueToTime(this.opts.maxValue.current);
+    });
+    domContext;
+    constructor(opts) {
+        this.opts = opts;
+        this.descriptionId = createId('description', opts.id.current);
+        this.valueController = new RangeFieldValueController(opts.value, boxWith(() => opts.placeholder.current, (value) => (opts.placeholder.current = value)));
+        this.formatter = createTimeFormatter(this.opts.locale.current);
+        this.domContext = new DOMContext(this.opts.ref);
+        this.attachment = attachRef(this.opts.ref, (v) => (this.fieldNode = v));
+        onMount(() => () => {
+            this.domContext.getDocument().getElementById(this.descriptionId)?.remove();
+        });
+        $effect(() => {
+            if (this.formatter.getLocale() === this.opts.locale.current)
+                return;
+            this.formatter.setLocale(this.opts.locale.current);
+        });
+    }
+    /** Box for a child field's value: reads the derived side; writes override it and recommit the range. */
+    sideValueBox(type) {
+        return this.valueController.sideValueBox(type);
+    }
+    validationStatus = $derived.by(() => {
+        const value = this.opts.value.current;
+        if (value === undefined)
+            return false;
+        if (value.start === undefined || value.end === undefined)
+            return false;
+        const msg = this.opts.validate.current?.({
+            start: value.start,
+            end: value.end,
+        });
+        if (msg) {
+            return {
+                reason: 'custom',
+                message: msg,
+            };
+        }
+        if (this.minValueTime && this.startValueTime && isTimeBefore(this.startValueTime, this.minValueTime)) {
+            return {
+                reason: 'min',
+            };
+        }
+        if (this.maxValueTime && this.endValueTime && isTimeBefore(this.maxValueTime, this.endValueTime)) {
+            return {
+                reason: 'max',
+            };
+        }
+        return false;
+    });
+    isInvalid = $derived(this.validationStatus !== false);
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: 'group',
+        [timeRangeFieldAttrs.root]: '',
+        'data-invalid': boolToEmptyStrOrUndef(this.isInvalid),
+        ...this.attachment,
+    }));
+}
+export class TimeRangeFieldLabelState {
+    static create(opts) {
+        return new TimeRangeFieldLabelState(opts, getTimeRangeFieldRoot());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.labelNode = v));
+    }
+    #onclick = () => {
+        if (this.root.opts.disabled.current)
+            return;
+        const firstSegment = getFirstSegment(this.root.fieldNode);
+        if (!firstSegment)
+            return;
+        firstSegment.focus();
+    };
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'data-invalid': boolToEmptyStrOrUndef(this.root.isInvalid),
+        'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+        [timeRangeFieldAttrs.label]: '',
+        onclick: this.#onclick,
+        ...this.attachment,
+    }));
+}
+export class TimeRangeFieldInputState {
+    static create(opts, type) {
+        const root = getTimeRangeFieldRoot();
+        const fieldState = TimeFieldRootState.create({
+            value: root.sideValueBox(type),
+            disabled: root.opts.disabled,
+            readonly: root.opts.readonly,
+            readonlySegments: root.opts.readonlySegments,
+            validate: boxWith(() => undefined),
+            minValue: root.opts.minValue,
+            maxValue: root.opts.maxValue,
+            hourCycle: root.opts.hourCycle,
+            locale: root.opts.locale,
+            hideTimeZone: root.opts.hideTimeZone,
+            required: root.opts.required,
+            granularity: root.opts.granularity,
+            placeholder: root.opts.placeholder,
+            onInvalid: root.opts.onInvalid,
+            errorMessageId: root.opts.errorMessageId,
+            isInvalidProp: boxWith(() => root.isInvalid),
+            descriptionId: createId(`${type}-description`, root.opts.id.current),
+        }, root);
+        return new TimeFieldInputState({ name: opts.name, id: opts.id, ref: opts.ref }, fieldState);
+    }
+}

package/dist/components/time-range-field/types.d.ts

@@ -0,0 +1,138 @@
+import type { Time } from "@internationalized/date";
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../internal/attribute-types.js";
+import type { TimeSegmentPart } from "../../internal/index.js";
+import type { TimeFieldSegmentProps, TimeFieldSegmentPropsWithoutHTML } from "../time-field/types.js";
+import type { EditableTimeSegmentPart, TimeGranularity, TimeOnInvalid, TimeEndpoints, TimeRangeValidator, TimeValue } from "../../internal/date-time/types.js";
+export type TimeRangeFieldRootPropsWithoutHTML<T extends TimeValue = Time> = WithChild<{
+    /**
+     * The value of the date range field.
+     *
+     * @bindable
+     */
+    value?: TimeEndpoints<T>;
+    /**
+     * A callback that is called when the value of the date range field changes.
+     */
+    onValueChange?: OnChangeFn<TimeEndpoints<T> | undefined>;
+    /**
+     * The placeholder value of the time field. This determines the format
+     * and what date 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 date is
+     * invalid, or nothing if the date is valid
+     */
+    validate?: TimeRangeValidator<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 date. When provided, the time field
+     * will be marked as invalid if the user enters a date before this date.
+     */
+    minValue?: TimeValue;
+    /**
+     * The maximum acceptable date. When provided, the time field
+     * will be marked as invalid if the user enters a date after this date.
+     */
+    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.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * If true, the time field will be required, which is useful when used within
+     * a form. If the time field is empty when the form is submitted, the form
+     * will not be valid.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * An array of segment names that should be readonly. If provided, only the
+     * segments not in this array will be editable.
+     */
+    readonlySegments?: EditableTimeSegmentPart[];
+    /**
+     * 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.
+     *
+     * @default - the locale's default time format
+     */
+    hourCycle?: 12 | 24;
+    /**
+     * The locale to use for formatting the time field.
+     *
+     * @default '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.
+     *
+     * @defaultValue false;
+     */
+    hideTimeZone?: boolean;
+    /**
+     * The `id` of the element which contains the error messages for the time field when the
+     * time is invalid.
+     */
+    errorMessageId?: string;
+}>;
+export type TimeRangeFieldRootProps<T extends TimeValue = Time> = TimeRangeFieldRootPropsWithoutHTML<T> & Without<BitsPrimitiveDivAttributes, TimeRangeFieldRootPropsWithoutHTML<T>>;
+export type TimeRangeFieldLabelPropsWithoutHTML = WithChild;
+export type TimeRangeFieldLabelProps = TimeRangeFieldLabelPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, TimeRangeFieldLabelPropsWithoutHTML>;
+export type TimeRangeFieldInputSnippetProps = {
+    segments: Array<{
+        part: TimeSegmentPart;
+        value: string;
+    }>;
+};
+export type TimeRangeFieldInputPropsWithoutHTML = WithChild<{
+    /**
+     * The name to use for the hidden input element associated with this input
+     * used for form submission.
+     */
+    name?: string;
+    /**
+     * Whether this input represents the start or end of the date range.
+     */
+    type: "start" | "end";
+}, TimeRangeFieldInputSnippetProps>;
+export type TimeRangeFieldInputProps = TimeRangeFieldInputPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TimeRangeFieldInputPropsWithoutHTML>;
+export type TimeRangeFieldSegmentPropsWithoutHTML = TimeFieldSegmentPropsWithoutHTML;
+export type TimeRangeFieldSegmentProps = TimeFieldSegmentProps;

package/dist/components/time-range-field/types.js

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

package/dist/components/toggle/components/toggle.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ToggleRootProps } from '../types.js';
+	import { ToggleRootState } from '../toggle.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { toggleVariants, type ToggleSize, type ToggleVariant } from '../variants.js';
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		pressed = $bindable(false),
+		onPressedChange = () => {},
+		disabled = false,
+		type = 'button',
+		children,
+		child,
+		variant = 'default',
+		size = 'default',
+		...restProps
+	}: ToggleRootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+
+	const toggleState = ToggleRootState.create({
+		get pressed() {
+			return pressed;
+		},
+		set pressed(v) {
+			pressed = v;
+			onPressedChange(v);
+		},
+		get disabled() {
+			return disabled ?? false;
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
+	});
+
+	const mergedProps = $derived(
+		mergeProps({ 'data-slot': 'toggle', class: toggleVariants({ variant, size }) }, restProps, toggleState.props, { type }),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...toggleState.snippetProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.(toggleState.snippetProps)}
+	</button>
+{/if}

package/dist/components/toggle/components/toggle.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ToggleRootProps } from '../types.js';
+import { type ToggleSize, type ToggleVariant } from '../variants.js';
+type $$ComponentProps = ToggleRootProps & {
+    variant?: ToggleVariant;
+    size?: ToggleSize;
+};
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "ref" | "pressed">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/toggle/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './components/toggle.svelte';
+export { toggleVariants } from './variants.js';