@johly/bits-ui 2.18.1

package/dist/bits/checkbox/checkbox.svelte.js

@@ -0,0 +1,224 @@
+import { attachRef } from "svelte-toolbelt";
+import { Context, watch } from "runed";
+import { boolToStr, createBitsAttrs, getAriaChecked, boolToEmptyStrOrUndef, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { arraysAreEqual } from "../../internal/arrays.js";
+import { isHTMLElement } from "../../internal/is.js";
+const checkboxAttrs = createBitsAttrs({
+    component: "checkbox",
+    parts: ["root", "group", "group-label", "input"],
+});
+export const CheckboxGroupContext = new Context("Checkbox.Group");
+export class CheckboxGroupState {
+    static create(opts) {
+        return CheckboxGroupContext.set(new CheckboxGroupState(opts));
+    }
+    opts;
+    attachment;
+    labelId = $state(undefined);
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+    }
+    addValue(checkboxValue) {
+        if (!checkboxValue)
+            return;
+        if (!this.opts.value.current.includes(checkboxValue)) {
+            const newValue = [...$state.snapshot(this.opts.value.current), checkboxValue];
+            this.opts.value.current = newValue;
+            if (arraysAreEqual(this.opts.value.current, newValue))
+                return;
+            this.opts.onValueChange.current(newValue);
+        }
+    }
+    removeValue(checkboxValue) {
+        if (!checkboxValue)
+            return;
+        const index = this.opts.value.current.indexOf(checkboxValue);
+        if (index === -1)
+            return;
+        const newValue = this.opts.value.current.filter((v) => v !== checkboxValue);
+        this.opts.value.current = newValue;
+        if (arraysAreEqual(this.opts.value.current, newValue))
+            return;
+        this.opts.onValueChange.current(newValue);
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "group",
+        "aria-labelledby": this.labelId,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        [checkboxAttrs.group]: "",
+        ...this.attachment,
+    }));
+}
+export class CheckboxGroupLabelState {
+    static create(opts) {
+        return new CheckboxGroupLabelState(opts, CheckboxGroupContext.get());
+    }
+    opts;
+    group;
+    attachment;
+    constructor(opts, group) {
+        this.opts = opts;
+        this.group = group;
+        this.group.labelId = this.opts.id.current;
+        this.attachment = attachRef(this.opts.ref);
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.group.labelId = id;
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.group.opts.disabled.current),
+        [checkboxAttrs["group-label"]]: "",
+        ...this.attachment,
+    }));
+}
+const CheckboxRootContext = new Context("Checkbox.Root");
+export class CheckboxRootState {
+    static create(opts, group = null) {
+        return CheckboxRootContext.set(new CheckboxRootState(opts, group));
+    }
+    opts;
+    group;
+    trueName = $derived.by(() => {
+        if (this.group && this.group.opts.name.current)
+            return this.group.opts.name.current;
+        return this.opts.name.current;
+    });
+    trueRequired = $derived.by(() => {
+        if (this.group && this.group.opts.required.current)
+            return true;
+        return this.opts.required.current;
+    });
+    trueDisabled = $derived.by(() => {
+        if (this.group && this.group.opts.disabled.current)
+            return true;
+        return this.opts.disabled.current;
+    });
+    trueReadonly = $derived.by(() => {
+        if (this.group && this.group.opts.readonly.current)
+            return true;
+        return this.opts.readonly.current;
+    });
+    attachment;
+    constructor(opts, group) {
+        this.opts = opts;
+        this.group = group;
+        this.attachment = attachRef(this.opts.ref);
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onclick = this.onclick.bind(this);
+        watch.pre([() => $state.snapshot(this.group?.opts.value.current), () => this.opts.value.current], ([groupValue, value]) => {
+            if (!groupValue || !value)
+                return;
+            this.opts.checked.current = groupValue.includes(value);
+        });
+        watch.pre(() => this.opts.checked.current, (checked) => {
+            if (!this.group)
+                return;
+            if (checked) {
+                this.group?.addValue(this.opts.value.current);
+            }
+            else {
+                this.group?.removeValue(this.opts.value.current);
+            }
+        });
+    }
+    onkeydown(e) {
+        if (this.trueDisabled || this.trueReadonly)
+            return;
+        if (e.key === kbd.ENTER) {
+            e.preventDefault();
+            if (this.opts.type.current === "submit") {
+                const form = e.currentTarget.closest("form");
+                form?.requestSubmit();
+            }
+            return;
+        }
+        if (e.key === kbd.SPACE) {
+            e.preventDefault();
+            this.#toggle();
+        }
+    }
+    #toggle() {
+        if (this.opts.indeterminate.current) {
+            this.opts.indeterminate.current = false;
+            this.opts.checked.current = true;
+        }
+        else {
+            this.opts.checked.current = !this.opts.checked.current;
+        }
+    }
+    onclick(e) {
+        if (this.trueDisabled || this.trueReadonly)
+            return;
+        if (this.opts.type.current === "submit") {
+            this.#toggle();
+            return;
+        }
+        e.preventDefault();
+        this.#toggle();
+    }
+    snippetProps = $derived.by(() => ({
+        checked: this.opts.checked.current,
+        indeterminate: this.opts.indeterminate.current,
+    }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: "checkbox",
+        type: this.opts.type.current,
+        disabled: this.trueDisabled,
+        "aria-checked": getAriaChecked(this.opts.checked.current, this.opts.indeterminate.current),
+        "aria-required": boolToStr(this.trueRequired),
+        "aria-readonly": boolToStr(this.trueReadonly),
+        "data-disabled": boolToEmptyStrOrUndef(this.trueDisabled),
+        "data-readonly": boolToEmptyStrOrUndef(this.trueReadonly),
+        "data-state": getCheckboxDataState(this.opts.checked.current, this.opts.indeterminate.current),
+        [checkboxAttrs.root]: "",
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+export class CheckboxInputState {
+    static create() {
+        return new CheckboxInputState(CheckboxRootContext.get());
+    }
+    root;
+    trueChecked = $derived.by(() => {
+        if (!this.root.group)
+            return this.root.opts.checked.current;
+        if (this.root.opts.value.current !== undefined &&
+            this.root.group.opts.value.current.includes(this.root.opts.value.current)) {
+            return true;
+        }
+        return false;
+    });
+    shouldRender = $derived.by(() => Boolean(this.root.trueName));
+    constructor(root) {
+        this.root = root;
+        this.onfocus = this.onfocus.bind(this);
+    }
+    onfocus(_) {
+        if (!isHTMLElement(this.root.opts.ref.current))
+            return;
+        this.root.opts.ref.current.focus();
+    }
+    props = $derived.by(() => ({
+        type: "checkbox",
+        checked: this.root.opts.checked.current === true,
+        disabled: this.root.trueDisabled,
+        required: this.root.trueRequired,
+        name: this.root.trueName,
+        value: this.root.opts.value.current,
+        readonly: this.root.trueReadonly,
+        onfocus: this.onfocus,
+    }));
+}
+function getCheckboxDataState(checked, indeterminate) {
+    if (indeterminate)
+        return "indeterminate";
+    return checked ? "checked" : "unchecked";
+}

package/dist/bits/checkbox/components/checkbox-group-label.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CheckboxGroupLabelProps } from "../types.js";
+	import { CheckboxGroupLabelState } from "../checkbox.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		child,
+		children,
+		...restProps
+	}: CheckboxGroupLabelProps = $props();
+
+	const labelState = CheckboxGroupLabelState.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}
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/bits/checkbox/components/checkbox-group-label.svelte.d.ts

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

package/dist/bits/checkbox/components/checkbox-group.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CheckboxGroupProps } from "../types.js";
+	import { CheckboxGroupState } from "../checkbox.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { arraysAreEqual } from "../../../internal/arrays.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		value = $bindable([]),
+		onValueChange = noop,
+		name,
+		required,
+		disabled,
+		children,
+		child,
+		readonly,
+		...restProps
+	}: CheckboxGroupProps = $props();
+
+	const groupState = CheckboxGroupState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+		required: boxWith(() => Boolean(required)),
+		readonly: boxWith(() => Boolean(readonly)),
+		name: boxWith(() => name),
+		value: boxWith(
+			() => $state.snapshot(value),
+			(v) => {
+				if (arraysAreEqual(value, v)) return;
+				value = $state.snapshot(v);
+				onValueChange(v);
+			}
+		),
+		onValueChange: boxWith(() => onValueChange),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, groupState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/bits/checkbox/components/checkbox-group.svelte.d.ts

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

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

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

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

package/dist/bits/checkbox/components/checkbox.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { CheckboxRootProps } from "../types.js";
+	import { CheckboxGroupContext, CheckboxRootState } from "../checkbox.svelte.js";
+	import CheckboxInput from "./checkbox-input.svelte";
+	import { createId } from "../../../internal/create-id.js";
+	import { watch } from "runed";
+
+	const uid = $props.id();
+
+	let {
+		checked = $bindable(false),
+		ref = $bindable(null),
+		onCheckedChange,
+		children,
+		disabled = false,
+		required = false,
+		name = undefined,
+		value = "on",
+		id = createId(uid),
+		indeterminate = $bindable(false),
+		onIndeterminateChange,
+		child,
+		type = "button",
+		readonly,
+		...restProps
+	}: CheckboxRootProps = $props();
+
+	const group = CheckboxGroupContext.getOr(null);
+
+	if (group && value) {
+		if (group.opts.value.current.includes(value)) {
+			checked = true;
+		} else {
+			checked = false;
+		}
+	}
+
+	watch.pre(
+		() => value,
+		() => {
+			if (group && value) {
+				if (group.opts.value.current.includes(value)) {
+					checked = true;
+				} else {
+					checked = false;
+				}
+			}
+		}
+	);
+
+	const rootState = CheckboxRootState.create(
+		{
+			checked: boxWith(
+				() => checked,
+				(v) => {
+					checked = v;
+					onCheckedChange?.(v);
+				}
+			),
+			disabled: boxWith(() => disabled ?? false),
+			required: boxWith(() => required),
+			name: boxWith(() => name),
+			value: boxWith(() => value),
+			id: boxWith(() => id),
+			ref: boxWith(
+				() => ref,
+				(v) => (ref = v)
+			),
+			indeterminate: boxWith(
+				() => indeterminate,
+				(v) => {
+					indeterminate = v;
+					onIndeterminateChange?.(v);
+				}
+			),
+			type: boxWith(() => type),
+			readonly: boxWith(() => Boolean(readonly)),
+		},
+		group
+	);
+
+	const mergedProps = $derived(mergeProps({ ...restProps }, rootState.props));
+</script>
+
+{#if child}
+	{@render child({
+		props: mergedProps,
+		...rootState.snippetProps,
+	})}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.(rootState.snippetProps)}
+	</button>
+{/if}
+
+<CheckboxInput />

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

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

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

@@ -0,0 +1,4 @@
+export { default as Root } from "./components/checkbox.svelte";
+export { default as Group } from "./components/checkbox-group.svelte";
+export { default as GroupLabel } from "./components/checkbox-group-label.svelte";
+export type { CheckboxRootProps as RootProps, CheckboxGroupProps as GroupProps, CheckboxGroupLabelProps as GroupLabelProps, } from "./types.js";

package/dist/bits/checkbox/exports.js

@@ -0,0 +1,3 @@
+export { default as Root } from "./components/checkbox.svelte";
+export { default as Group } from "./components/checkbox-group.svelte";
+export { default as GroupLabel } from "./components/checkbox-group-label.svelte";

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

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

package/dist/bits/checkbox/index.js

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

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

@@ -0,0 +1,115 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
+export type CheckboxRootSnippetProps = {
+    checked: boolean;
+    indeterminate: boolean;
+};
+export type CheckboxRootPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the checkbox is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean | null | undefined;
+    /**
+     * Whether the checkbox is required (for form validation).
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the checkbox is read only.
+     *
+     * If readonly, the checkbox will be focusable by the user,
+     * but will not be able to be checked/unchecked.
+     *
+     * @default false
+     */
+    readonly?: boolean | null | undefined;
+    /**
+     * The name of the checkbox used in form submission.
+     * If not provided, the hidden input will not be rendered.
+     *
+     * @default undefined
+     */
+    name?: any;
+    /**
+     * The value of the checkbox used in form submission and to identify
+     * the checkbox when in a `Checkbox.Group`. If not provided while in a
+     * `Checkbox.Group`, the checkbox will use a random identifier.
+     *
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * The checked state of the checkbox. It can be one of:
+     * - `true` for checked
+     * - `false` for unchecked
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * A callback function called when the checked state changes.
+     */
+    onCheckedChange?: OnChangeFn<boolean>;
+    /**
+     * Whether the checkbox is in an indeterminate state or not.
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * A callback function called when the indeterminate state changes.
+     */
+    onIndeterminateChange?: OnChangeFn<boolean>;
+}, CheckboxRootSnippetProps>;
+export type CheckboxRootProps = CheckboxRootPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, CheckboxRootPropsWithoutHTML>;
+export type CheckboxGroupPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the checkbox group is disabled.
+     * This will disable all checkboxes in the group.
+     *
+     * @default false
+     */
+    disabled?: boolean | null | undefined;
+    /**
+     * Whether the checkbox group is read only.
+     *
+     * If readonly, the group will be focusable by the user,
+     * but the checkboxes not be able to be checked/unchecked.
+     *
+     * @default false
+     */
+    readonly?: boolean | null | undefined;
+    /**
+     * Whether the checkbox group is required (for form validation).
+     * This will mark all checkboxes in the group as required.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The name of the checkbox used in form submission.
+     * If not provided, the hidden input will not be rendered.
+     * This will be used as the name for all checkboxes in the group.
+     *
+     * @default undefined
+     */
+    name?: any;
+    /**
+     * The value of the checkbox group, indicating which
+     * of the checkboxes in the group are checked.
+     *
+     * @bindable
+     * @default []
+     */
+    value?: string[];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<string[]>;
+}>;
+export type CheckboxGroupProps = CheckboxGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CheckboxGroupPropsWithoutHTML>;
+export type CheckboxGroupLabelPropsWithoutHTML = WithChild;
+export type CheckboxGroupLabelProps = CheckboxGroupLabelPropsWithoutHTML & Without<BitsPrimitiveSpanAttributes, CheckboxGroupLabelPropsWithoutHTML>;

package/dist/bits/checkbox/types.js

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

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

@@ -0,0 +1,81 @@
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import { PresenceManager } from "../../internal/presence-manager.svelte.js";
+interface CollapsibleRootStateOpts extends WithRefOpts, WritableBoxedValues<{
+    open: boolean;
+}>, ReadableBoxedValues<{
+    disabled: boolean;
+    onOpenChangeComplete: OnChangeFn<boolean>;
+}> {
+}
+export declare class CollapsibleRootState {
+    static create(opts: CollapsibleRootStateOpts): CollapsibleRootState;
+    readonly opts: CollapsibleRootStateOpts;
+    readonly attachment: RefAttachment;
+    contentNode: HTMLElement | null;
+    contentPresence: PresenceManager;
+    contentId: string | undefined;
+    constructor(opts: CollapsibleRootStateOpts);
+    toggleOpen(): void;
+    readonly props: {
+        readonly id: string;
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+    };
+}
+interface CollapsibleContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    forceMount: boolean;
+    hiddenUntilFound: boolean;
+}> {
+}
+export declare class CollapsibleContentState {
+    #private;
+    static create(opts: CollapsibleContentStateOpts): CollapsibleContentState;
+    readonly opts: CollapsibleContentStateOpts;
+    readonly root: CollapsibleRootState;
+    readonly attachment: RefAttachment;
+    readonly present: boolean;
+    constructor(opts: CollapsibleContentStateOpts, root: CollapsibleRootState);
+    get shouldRender(): boolean;
+    readonly snippetProps: {
+        open: boolean;
+    };
+    readonly props: {
+        readonly hidden: boolean | "until-found" | undefined;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-starting-style"?: "";
+        readonly "data-ending-style"?: "";
+        readonly id: string;
+        readonly style: {
+            readonly "--bits-collapsible-content-height": string | undefined;
+            readonly "--bits-collapsible-content-width": string | undefined;
+        };
+        readonly "data-state": "open" | "closed";
+    };
+}
+interface CollapsibleTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean | null | undefined;
+}> {
+}
+export declare class CollapsibleTriggerState {
+    #private;
+    static create(opts: CollapsibleTriggerStateOpts): CollapsibleTriggerState;
+    readonly opts: CollapsibleTriggerStateOpts;
+    readonly root: CollapsibleRootState;
+    readonly attachment: RefAttachment;
+    constructor(opts: CollapsibleTriggerStateOpts, root: CollapsibleRootState);
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly props: {
+        readonly id: string;
+        readonly type: "button";
+        readonly disabled: boolean;
+        readonly "aria-controls": string | undefined;
+        readonly "aria-expanded": "true" | "false";
+        readonly "data-state": "open" | "closed";
+        readonly "data-disabled": "" | undefined;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+export {};