@johly/bits-ui 2.18.1

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

@@ -0,0 +1,233 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
+import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
+export type TickItem = {
+    /**
+     * The value this tick represents
+     */
+    value: number;
+    /**
+     * The index of this tick in the array of ticks provided by the `children`
+     * or `child` snippet prop of the `Slider.Root` component.
+     */
+    index: number;
+};
+export type ThumbItem = {
+    /**
+     * The value this thumb represents
+     */
+    value: number;
+    /**
+     * The index of this thumb in the array of thumbs provided by the `children`
+     * or `child` snippet prop of the `Slider.Root` component.
+     */
+    index: number;
+};
+export type SliderLabelPosition = "top" | "bottom" | "left" | "right";
+export type SliderRootSnippetProps = {
+    /**
+     * Use `tickItems` instead. Will be removed in Bits UI v3.
+     *
+     * The indices of the ticks.
+     *
+     * @deprecated Use `tickItems` instead.
+     */
+    ticks: number[];
+    /**
+     * Use `thumbItems` instead. Will be removed in Bits UI v3.
+     *
+     * The indices of the thumbs.
+     *
+     * @deprecated Use `thumbItems` instead
+     */
+    thumbs: number[];
+    /**
+     * An array of objects containing the value and index of each tick, useful for
+     * rendering ticks along with labels for each tick.
+     */
+    tickItems: TickItem[];
+    /**
+     * An array of objects containing the value and index of each thumb, useful for
+     * rendering thumbs along with labels for each thumb.
+     */
+    thumbItems: ThumbItem[];
+};
+export type BaseSliderRootPropsWithoutHTML = {
+    /**
+     * Whether to automatically sort the values in the array when moving thumbs past
+     * one another.
+     *
+     * @default true
+     */
+    autoSort?: boolean;
+    /**
+     * The minimum value of the slider.
+     *
+     * @default 0 (for number step) or the min value of the step array (for array step)
+     */
+    min?: number;
+    /**
+     * The maximum value of the slider.
+     *
+     * @default 100 (for number step) or the max value of the step array (for array step)
+     */
+    max?: number;
+    /**
+     * The amount to increment the value by when the user presses the arrow keys,
+     * or an array of specific values that the slider can snap to.
+     *
+     * When an array is provided, the slider will only allow values that exist in the array,
+     * creating discrete tick points. The array values should be within the min/max range
+     * and will be automatically sorted.
+     *
+     * @default 1
+     */
+    step?: number | number[];
+    /**
+     * The direction of the slider.
+     *
+     * For vertical sliders, setting `dir` to `'rtl'` will caus the slider to start
+     * from the top and move downwards. For horizontal sliders, setting `dir` to `'rtl'`
+     * will cause the slider to start from the left and move rightwards.
+     *
+     * @default 'ltr'
+     */
+    dir?: Direction;
+    /**
+     * The orientation of the slider.
+     *
+     * @default "horizontal"
+     */
+    orientation?: Orientation;
+    /**
+     * Whether the slider is disabled or not.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The positioning of the slider thumb.
+     *
+     * @default "contain"
+     */
+    thumbPositioning?: SliderThumbPositioning;
+    /**
+     * Padding percentage for the track. Creates space before the first
+     * and after the last tick positions.
+     *
+     * This can also be used as an SSR-friendly alternative to `thumbPositioning="contain"`,
+     * which requires client-side measurement.
+     */
+    trackPadding?: number;
+};
+export type SliderSingleRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
+    /**
+     * The type of slider. If set to `'multiple'`, the slider will
+     * allow multiple ticks and the `value` will be an array of numbers.
+     *
+     * @required
+     */
+    type: "single";
+    /**
+     * The value of the slider.
+     * @bindable
+     *
+     * @default min
+     */
+    value?: number;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<number>;
+    /**
+     * A callback function called when the user stops dragging the
+     * thumb and the value is committed.
+     */
+    onValueCommit?: OnChangeFn<number>;
+};
+export type SliderMultiRootPropsWithoutHTML = BaseSliderRootPropsWithoutHTML & {
+    /**
+     * The type of slider. If set to `'multiple'`, the slider will
+     * allow multiple ticks and the `value` will be an array of numbers.
+     *
+     * @required
+     */
+    type: "multiple";
+    /**
+     * The value of the slider.
+     * @bindable
+     */
+    value?: number[];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<number[]>;
+    /**
+     * A callback function called when the user stops dragging the
+     * thumb and the value is committed.
+     */
+    onValueCommit?: OnChangeFn<number[]>;
+};
+export type SliderRootPropsWithoutHTML = WithChild<SliderSingleRootPropsWithoutHTML, SliderRootSnippetProps> | WithChild<SliderMultiRootPropsWithoutHTML, SliderRootSnippetProps>;
+export type SliderSingleRootProps = SliderSingleRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, WithChild<SliderSingleRootPropsWithoutHTML, SliderRootSnippetProps>>;
+export type SliderMultipleRootProps = SliderMultiRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, WithChild<SliderMultiRootPropsWithoutHTML, SliderRootSnippetProps>>;
+export type SliderRootProps = SliderRootPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderRootPropsWithoutHTML>;
+export type SliderRangePropsWithoutHTML = WithChild;
+export type SliderRangeProps = SliderRangePropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderRangePropsWithoutHTML>;
+export type SliderThumbSnippetProps = {
+    active: boolean;
+};
+export type SliderThumbPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the thumb is disabled or not.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The index of the thumb in the array of thumbs provided by the `children` snippet prop of the
+     * `Slider.Root` component.
+     */
+    index: number;
+}, SliderThumbSnippetProps>;
+export type SliderThumbProps = SliderThumbPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderThumbPropsWithoutHTML>;
+export type SliderTickPropsWithoutHTML = WithChild<{
+    /**
+     * The index of the tick in the array of ticks provided by the `children` snippet prop of the
+     * `Slider.Root` component.
+     */
+    index: number;
+}>;
+export type SliderTickProps = SliderTickPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderTickPropsWithoutHTML>;
+export type SliderTickLabelPropsWithoutHTML = WithChild<{
+    /**
+     * The index of the tick the label represents in the array of ticks
+     * provided by the  `children` snippet prop of the `Slider.Root` component.
+     */
+    index: number;
+    /**
+     * The position of the label relative to the tick.
+     * For horizontal sliders: "top" | "bottom"
+     * For vertical sliders: "left" | "right"
+     *
+     * @default for horizontal sliders = "top" and for vertical sliders = "left"
+     */
+    position?: SliderLabelPosition;
+}>;
+export type SliderTickLabelProps = SliderTickLabelPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderTickLabelPropsWithoutHTML>;
+export type SliderThumbLabelPropsWithoutHTML = WithChild<{
+    /**
+     * The index of the thumb the label represents in the array of thumbs
+     * provided by the `children` snippet prop of the `Slider.Root` component.
+     */
+    index: number;
+    /**
+     * The position of the label relative to the thumb.
+     * For horizontal sliders: "top" | "bottom"
+     * For vertical sliders: "left" | "right"
+     *
+     * @default for horizontal sliders = "top" and for vertical sliders = "left"
+     */
+    position?: SliderLabelPosition;
+}>;
+export type SliderThumbLabelProps = SliderThumbLabelPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SliderThumbLabelPropsWithoutHTML>;

package/dist/bits/slider/types.js

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

package/dist/bits/switch/components/switch-input.svelte

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

package/dist/bits/switch/components/switch-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 SwitchInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SwitchInput = InstanceType<typeof SwitchInput>;
+export default SwitchInput;

package/dist/bits/switch/components/switch-thumb.svelte

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

package/dist/bits/switch/components/switch-thumb.svelte.d.ts

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

package/dist/bits/switch/components/switch.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { SwitchRootProps } from "../types.js";
+	import { SwitchRootState } from "../switch.svelte.js";
+	import SwitchInput from "./switch-input.svelte";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		id = createId(uid),
+		disabled = false,
+		required = false,
+		checked = $bindable(false),
+		value = "on",
+		name = undefined,
+		type = "button",
+		onCheckedChange = noop,
+		...restProps
+	}: SwitchRootProps = $props();
+
+	const rootState = SwitchRootState.create({
+		checked: boxWith(
+			() => checked,
+			(v) => {
+				checked = v;
+				onCheckedChange?.(v);
+			}
+		),
+		disabled: boxWith(() => disabled ?? false),
+		required: boxWith(() => required),
+		value: boxWith(() => value),
+		name: boxWith(() => name),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props, { type }));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...rootState.snippetProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.(rootState.snippetProps)}
+	</button>
+{/if}
+
+<SwitchInput />

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

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

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

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/switch.svelte";
+export { default as Thumb } from "./components/switch-thumb.svelte";
+export type { SwitchRootProps as RootProps, SwitchThumbProps as ThumbProps } from "./types.js";

package/dist/bits/switch/exports.js

@@ -0,0 +1,2 @@
+export { default as Root } from "./components/switch.svelte";
+export { default as Thumb } from "./components/switch-thumb.svelte";

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

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

package/dist/bits/switch/index.js

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

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

@@ -0,0 +1,73 @@
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsKeyboardEvent, BitsPointerEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
+interface SwitchRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    required: boolean;
+    name: string | undefined;
+    value: string;
+}>, WritableBoxedValues<{
+    checked: boolean;
+}> {
+}
+export declare class SwitchRootState {
+    #private;
+    static create(opts: SwitchRootStateOpts): SwitchRootState;
+    readonly opts: SwitchRootStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: SwitchRootStateOpts);
+    onkeydown(e: BitsKeyboardEvent): void;
+    onclick(_: BitsPointerEvent): void;
+    readonly sharedProps: {
+        "data-disabled": "" | undefined;
+        "data-state": "checked" | "unchecked";
+        "data-required": "" | undefined;
+    };
+    readonly snippetProps: {
+        checked: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly role: "switch";
+        readonly disabled: true | undefined;
+        readonly "aria-checked": "true" | "false" | "mixed";
+        readonly "aria-required": "true" | "false";
+        readonly onclick: (_: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-state": "checked" | "unchecked";
+        readonly "data-required": "" | undefined;
+    };
+}
+export declare class SwitchInputState {
+    static create(): SwitchInputState;
+    readonly root: SwitchRootState;
+    readonly shouldRender: boolean;
+    constructor(root: SwitchRootState);
+    readonly props: {
+        readonly type: "checkbox";
+        readonly name: string | undefined;
+        readonly value: string;
+        readonly checked: boolean;
+        readonly disabled: boolean;
+        readonly required: boolean;
+    };
+}
+interface SwitchThumbStateOpts extends WithRefOpts {
+}
+export declare class SwitchThumbState {
+    static create(opts: SwitchThumbStateOpts): SwitchThumbState;
+    readonly opts: SwitchThumbStateOpts;
+    readonly root: SwitchRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: SwitchThumbStateOpts, root: SwitchRootState);
+    readonly snippetProps: {
+        checked: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-state": "checked" | "unchecked";
+        readonly "data-required": "" | undefined;
+    };
+}
+export {};

package/dist/bits/switch/switch.svelte.js

@@ -0,0 +1,97 @@
+import { attachRef } from "svelte-toolbelt";
+import { Context } from "runed";
+import { getAriaChecked, boolToStr, getDataChecked, boolToTrueOrUndef, createBitsAttrs, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+const switchAttrs = createBitsAttrs({
+    component: "switch",
+    parts: ["root", "thumb"],
+});
+const SwitchRootContext = new Context("Switch.Root");
+export class SwitchRootState {
+    static create(opts) {
+        return SwitchRootContext.set(new SwitchRootState(opts));
+    }
+    opts;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onclick = this.onclick.bind(this);
+    }
+    #toggle() {
+        this.opts.checked.current = !this.opts.checked.current;
+    }
+    onkeydown(e) {
+        if (!(e.key === kbd.ENTER || e.key === kbd.SPACE) || this.opts.disabled.current)
+            return;
+        e.preventDefault();
+        this.#toggle();
+    }
+    onclick(_) {
+        if (this.opts.disabled.current)
+            return;
+        this.#toggle();
+    }
+    sharedProps = $derived.by(() => ({
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        "data-state": getDataChecked(this.opts.checked.current),
+        "data-required": boolToEmptyStrOrUndef(this.opts.required.current),
+    }));
+    snippetProps = $derived.by(() => ({
+        checked: this.opts.checked.current,
+    }));
+    props = $derived.by(() => ({
+        ...this.sharedProps,
+        id: this.opts.id.current,
+        role: "switch",
+        disabled: boolToTrueOrUndef(this.opts.disabled.current),
+        "aria-checked": getAriaChecked(this.opts.checked.current, false),
+        "aria-required": boolToStr(this.opts.required.current),
+        [switchAttrs.root]: "",
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class SwitchInputState {
+    static create() {
+        return new SwitchInputState(SwitchRootContext.get());
+    }
+    root;
+    shouldRender = $derived.by(() => this.root.opts.name.current !== undefined);
+    constructor(root) {
+        this.root = root;
+    }
+    props = $derived.by(() => ({
+        type: "checkbox",
+        name: this.root.opts.name.current,
+        value: this.root.opts.value.current,
+        checked: this.root.opts.checked.current,
+        disabled: this.root.opts.disabled.current,
+        required: this.root.opts.required.current,
+    }));
+}
+export class SwitchThumbState {
+    static create(opts) {
+        return new SwitchThumbState(opts, SwitchRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+    }
+    snippetProps = $derived.by(() => ({
+        checked: this.root.opts.checked.current,
+    }));
+    props = $derived.by(() => ({
+        ...this.root.sharedProps,
+        id: this.opts.id.current,
+        [switchAttrs.thumb]: "",
+        ...this.attachment,
+    }));
+}

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

@@ -0,0 +1,47 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
+type SwitchRootSnippetProps = {
+    checked: boolean;
+};
+export type SwitchRootPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the switch is disabled.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | null | undefined;
+    /**
+     * Whether the switch is required (for form validation).
+     *
+     * @defaultValue false
+     */
+    required?: boolean;
+    /**
+     * The name of the switch used in form submission.
+     * If not provided, the hidden input will not be rendered.
+     *
+     * @defaultValue undefined
+     */
+    name?: string;
+    /**
+     * The value of the switch used in form submission.
+     *
+     * @defaultValue undefined
+     */
+    value?: any;
+    /**
+     * The checked state of the switch.
+     *
+     * @defaultValue false
+     */
+    checked?: boolean;
+    /**
+     * A callback function called when the checked state changes.
+     */
+    onCheckedChange?: OnChangeFn<boolean>;
+}, SwitchRootSnippetProps>;
+export type SwitchRootProps = SwitchRootPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, SwitchRootPropsWithoutHTML>;
+export type SwitchThumbSnippetProps = SwitchRootSnippetProps;
+export type SwitchThumbPropsWithoutHTML = WithChild<{}, SwitchThumbSnippetProps>;
+export type SwitchThumbProps = SwitchThumbPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, SwitchThumbPropsWithoutHTML>;
+export {};

package/dist/bits/switch/types.js

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

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

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

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

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

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

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