@johly/bits-ui 2.18.1

package/dist/bits/tabs/components/tabs-list.svelte.d.ts

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

package/dist/bits/tabs/components/tabs-trigger.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { TabsTriggerProps } from "../types.js";
+	import { TabsTriggerState } from "../tabs.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		disabled = false,
+		id = createId(uid),
+		type = "button",
+		value,
+		ref = $bindable(null),
+		...restProps
+	}: TabsTriggerProps = $props();
+
+	const triggerState = TabsTriggerState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		value: boxWith(() => value),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/bits/tabs/components/tabs-trigger.svelte.d.ts

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

package/dist/bits/tabs/components/tabs.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { TabsRootProps } from "../types.js";
+	import { TabsRootState } from "../tabs.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(""),
+		onValueChange = noop,
+		orientation = "horizontal",
+		loop = true,
+		activationMode = "automatic",
+		disabled = false,
+		children,
+		child,
+		...restProps
+	}: TabsRootProps = $props();
+
+	const rootState = TabsRootState.create({
+		id: boxWith(() => id),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			}
+		),
+		orientation: boxWith(() => orientation),
+		loop: boxWith(() => loop),
+		activationMode: boxWith(() => activationMode),
+		disabled: boxWith(() => disabled),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/tabs/components/tabs.svelte.d.ts

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

package/dist/bits/tabs/exports.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/tabs.svelte";
+export { default as Content } from "./components/tabs-content.svelte";
+export { default as List } from "./components/tabs-list.svelte";
+export { default as Trigger } from "./components/tabs-trigger.svelte";
+export type { TabsRootProps as RootProps, TabsContentProps as ContentProps, TabsTriggerProps as TriggerProps, TabsListProps as ListProps, } from "./types.js";

package/dist/bits/tabs/exports.js

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/tabs.svelte";
+export { default as Content } from "./components/tabs-content.svelte";
+export { default as List } from "./components/tabs-list.svelte";
+export { default as Trigger } from "./components/tabs-trigger.svelte";

package/dist/bits/tabs/index.d.ts

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

package/dist/bits/tabs/index.js

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

package/dist/bits/tabs/tabs.svelte.d.ts

@@ -0,0 +1,103 @@
+import { SvelteMap } from "svelte/reactivity";
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { TabsActivationMode } from "./types.js";
+import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import type { Orientation } from "../../shared/index.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+interface TabsRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    orientation: Orientation;
+    loop: boolean;
+    activationMode: TabsActivationMode;
+    disabled: boolean;
+}>, WritableBoxedValues<{
+    value: string;
+}> {
+}
+export declare class TabsRootState {
+    static create(opts: TabsRootStateOpts): TabsRootState;
+    readonly opts: TabsRootStateOpts;
+    readonly attachment: RefAttachment;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    triggerIds: string[];
+    readonly valueToTriggerId: SvelteMap<string, string>;
+    readonly valueToContentId: SvelteMap<string, string>;
+    constructor(opts: TabsRootStateOpts);
+    registerTrigger(id: string, value: string): () => void;
+    registerContent(id: string, value: string): () => void;
+    setValue(v: string): void;
+    readonly props: {
+        readonly id: string;
+        readonly "data-orientation": Orientation;
+    };
+}
+interface TabsListStateOpts extends WithRefOpts {
+}
+export declare class TabsListState {
+    #private;
+    static create(opts: TabsListStateOpts): TabsListState;
+    readonly opts: TabsListStateOpts;
+    readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: TabsListStateOpts, root: TabsRootState);
+    readonly props: {
+        readonly id: string;
+        readonly role: "tablist";
+        readonly "aria-orientation": Orientation;
+        readonly "data-orientation": Orientation;
+        readonly "data-disabled": "" | undefined;
+    };
+}
+interface TabsTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    value: string;
+    disabled: boolean;
+}> {
+}
+export declare class TabsTriggerState {
+    #private;
+    static create(opts: TabsTriggerStateOpts): TabsTriggerState;
+    readonly opts: TabsTriggerStateOpts;
+    readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: TabsTriggerStateOpts, root: TabsRootState);
+    onfocus(_: BitsFocusEvent): void;
+    onclick(_: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly role: "tab";
+        readonly "data-state": "active" | "inactive";
+        readonly "data-value": string;
+        readonly "data-orientation": Orientation;
+        readonly "data-disabled": "" | undefined;
+        readonly "aria-selected": "true" | "false";
+        readonly "aria-controls": string | undefined;
+        readonly disabled: true | undefined;
+        readonly tabindex: number;
+        readonly onclick: (_: BitsMouseEvent) => void;
+        readonly onfocus: (_: BitsFocusEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+interface TabsContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    value: string;
+}> {
+}
+export declare class TabsContentState {
+    #private;
+    static create(opts: TabsContentStateOpts): TabsContentState;
+    readonly opts: TabsContentStateOpts;
+    readonly root: TabsRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: TabsContentStateOpts, root: TabsRootState);
+    readonly props: {
+        readonly id: string;
+        readonly role: "tabpanel";
+        readonly hidden: true | undefined;
+        readonly tabindex: 0;
+        readonly "data-value": string;
+        readonly "data-state": "active" | "inactive";
+        readonly "aria-labelledby": string | undefined;
+        readonly "data-orientation": Orientation;
+    };
+}
+export {};

package/dist/bits/tabs/tabs.svelte.js

@@ -0,0 +1,190 @@
+import { SvelteMap } from "svelte/reactivity";
+import { attachRef } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+const tabsAttrs = createBitsAttrs({
+    component: "tabs",
+    parts: ["root", "list", "trigger", "content"],
+});
+const TabsRootContext = new Context("Tabs.Root");
+export class TabsRootState {
+    static create(opts) {
+        return TabsRootContext.set(new TabsRootState(opts));
+    }
+    opts;
+    attachment;
+    rovingFocusGroup;
+    triggerIds = $state([]);
+    // holds the trigger ID for each value to associate it with the content
+    valueToTriggerId = new SvelteMap();
+    // holds the content ID for each value to associate it with the trigger
+    valueToContentId = new SvelteMap();
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+        this.rovingFocusGroup = new RovingFocusGroup({
+            candidateAttr: tabsAttrs.trigger,
+            rootNode: this.opts.ref,
+            loop: this.opts.loop,
+            orientation: this.opts.orientation,
+        });
+    }
+    registerTrigger(id, value) {
+        this.triggerIds.push(id);
+        this.valueToTriggerId.set(value, id);
+        // returns the deregister function
+        return () => {
+            this.triggerIds = this.triggerIds.filter((triggerId) => triggerId !== id);
+            this.valueToTriggerId.delete(value);
+        };
+    }
+    registerContent(id, value) {
+        this.valueToContentId.set(value, id);
+        // returns the deregister function
+        return () => {
+            this.valueToContentId.delete(value);
+        };
+    }
+    setValue(v) {
+        this.opts.value.current = v;
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "data-orientation": this.opts.orientation.current,
+        [tabsAttrs.root]: "",
+        ...this.attachment,
+    }));
+}
+export class TabsListState {
+    static create(opts) {
+        return new TabsListState(opts, TabsRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #isDisabled = $derived.by(() => this.root.opts.disabled.current);
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "tablist",
+        "aria-orientation": this.root.opts.orientation.current,
+        "data-orientation": this.root.opts.orientation.current,
+        [tabsAttrs.list]: "",
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        ...this.attachment,
+    }));
+}
+export class TabsTriggerState {
+    static create(opts) {
+        return new TabsTriggerState(opts, TabsRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #tabIndex = $state(0);
+    #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
+    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    #ariaControls = $derived.by(() => this.root.valueToContentId.get(this.opts.value.current));
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+        watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {
+            return this.root.registerTrigger(id, value);
+        });
+        $effect(() => {
+            this.root.triggerIds.length;
+            if (this.#isActive || !this.root.opts.value.current) {
+                this.#tabIndex = 0;
+            }
+            else {
+                this.#tabIndex = -1;
+            }
+        });
+        this.onfocus = this.onfocus.bind(this);
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    #activate() {
+        if (this.root.opts.value.current === this.opts.value.current)
+            return;
+        this.root.setValue(this.opts.value.current);
+    }
+    onfocus(_) {
+        if (this.root.opts.activationMode.current !== "automatic" || this.#isDisabled)
+            return;
+        this.#activate();
+    }
+    onclick(_) {
+        if (this.#isDisabled)
+            return;
+        this.#activate();
+    }
+    onkeydown(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#activate();
+            return;
+        }
+        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "tab",
+        "data-state": getTabDataState(this.#isActive),
+        "data-value": this.opts.value.current,
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        "aria-selected": boolToStr(this.#isActive),
+        "aria-controls": this.#ariaControls,
+        [tabsAttrs.trigger]: "",
+        disabled: boolToTrueOrUndef(this.#isDisabled),
+        tabindex: this.#tabIndex,
+        //
+        onclick: this.onclick,
+        onfocus: this.onfocus,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class TabsContentState {
+    static create(opts) {
+        return new TabsContentState(opts, TabsRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #isActive = $derived.by(() => this.root.opts.value.current === this.opts.value.current);
+    #ariaLabelledBy = $derived.by(() => this.root.valueToTriggerId.get(this.opts.value.current));
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+        watch([() => this.opts.id.current, () => this.opts.value.current], ([id, value]) => {
+            return this.root.registerContent(id, value);
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "tabpanel",
+        hidden: boolToTrueOrUndef(!this.#isActive),
+        tabindex: 0,
+        "data-value": this.opts.value.current,
+        "data-state": getTabDataState(this.#isActive),
+        "aria-labelledby": this.#ariaLabelledBy,
+        "data-orientation": this.root.opts.orientation.current,
+        [tabsAttrs.content]: "",
+        ...this.attachment,
+    }));
+}
+function getTabDataState(condition) {
+    return condition ? "active" : "inactive";
+}

package/dist/bits/tabs/types.d.ts

@@ -0,0 +1,64 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { Orientation } from "../../index.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+export type TabsActivationMode = "manual" | "automatic";
+export type TabsRootPropsWithoutHTML = WithChild<{
+    /**
+     * The value of the selected tab.
+     */
+    value?: string;
+    /**
+     * A callback function called when the selected tab changes.
+     */
+    onValueChange?: OnChangeFn<string>;
+    /**
+     * The orientation of the tabs.
+     *
+     * @defaultValue "horizontal"
+     */
+    orientation?: Orientation;
+    /**
+     * Whether to loop through the tabs when reaching the end
+     * when using the keyboard.
+     *
+     * @defaultValue false
+     */
+    loop?: boolean;
+    /**
+     * How the tabs should be activated. If set to `'automatic'`, the tabs
+     * will be activated when the trigger is focused. If set to `'manual'`,
+     * the tabs will be activated when the trigger is pressed.
+     *
+     * @defaultValue "automatic"
+     */
+    activationMode?: TabsActivationMode;
+    /**
+     * Whether the tabs are disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+}>;
+export type TabsRootProps = TabsRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsRootPropsWithoutHTML>;
+export type TabsListPropsWithoutHTML = WithChild;
+export type TabsListProps = TabsListPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsListPropsWithoutHTML>;
+export type TabsTriggerPropsWithoutHTML = WithChild<{
+    /**
+     * The value of the tab associated with this trigger.
+     */
+    value: string;
+    /**
+     * Whether the trigger is disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | null | undefined;
+}>;
+export type TabsTriggerProps = TabsTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, TabsTriggerPropsWithoutHTML>;
+export type TabsContentPropsWithoutHTML = WithChild<{
+    /**
+     * The value of the tab associated with this content.
+     */
+    value: string;
+}>;
+export type TabsContentProps = TabsContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, TabsContentPropsWithoutHTML>;

package/dist/bits/tabs/types.js

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { TimeFieldHiddenInputState } from "../time-field.svelte.js";
+	import HiddenInput from "../../utilities/hidden-input.svelte";
+
+	const hiddenInputState = TimeFieldHiddenInputState.create();
+</script>
+
+{#if hiddenInputState.shouldRender}
+	<HiddenInput {...hiddenInputState.props} />
+{/if}

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TimeFieldHiddenInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TimeFieldHiddenInput = InstanceType<typeof TimeFieldHiddenInput>;
+export default TimeFieldHiddenInput;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { DateFieldSegmentState } from "../time-field.svelte.js";
+	import type { TimeFieldSegmentProps } from "../types.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		children,
+		child,
+		part,
+		...restProps
+	}: TimeFieldSegmentProps = $props();
+
+	const segmentState = DateFieldSegmentState.create(part, {
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(restProps, segmentState.props as Record<string, unknown>)
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
+{/if}

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

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