bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,59 +1,185 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
+import { Context, watch } from "runed";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { createContext } from "../../internal/createContext.js";
-import { srOnlyStyles, styleToString } from "../../internal/style.js";
 const CHECKBOX_ROOT_ATTR = "data-checkbox-root";
-class CheckboxRootState {
-    #id;
-    #ref;
-    checked;
+const CHECKBOX_GROUP_ATTR = "data-checkbox-group";
+const CHECKBOX_GROUP_LABEL_ATTR = "data-checkbox-group-label";
+class CheckboxGroupState {
+    id;
+    ref;
+    value;
     disabled;
     required;
     name;
-    value;
+    labelId = $state(undefined);
     constructor(props) {
-        this.checked = props.checked;
+        this.id = props.id;
+        this.ref = props.ref;
+        this.value = props.value;
         this.disabled = props.disabled;
         this.required = props.required;
         this.name = props.name;
+        useRefById({
+            id: this.id,
+            ref: this.ref,
+        });
+    }
+    addValue(checkboxValue) {
+        if (!checkboxValue)
+            return;
+        if (!this.value.current.includes(checkboxValue)) {
+            this.value.current.push(checkboxValue);
+        }
+    }
+    removeValue(checkboxValue) {
+        if (!checkboxValue)
+            return;
+        const index = this.value.current.indexOf(checkboxValue);
+        if (index === -1)
+            return;
+        this.value.current.splice(index, 1);
+    }
+    props = $derived.by(() => ({
+        id: this.id.current,
+        role: "group",
+        "aria-labelledby": this.labelId,
+        "data-disabled": getDataDisabled(this.disabled.current),
+        [CHECKBOX_GROUP_ATTR]: "",
+    }));
+}
+class CheckboxGroupLabelState {
+    id;
+    ref;
+    group;
+    constructor(props, group) {
+        this.id = props.id;
+        this.ref = props.ref;
+        this.group = group;
+        useRefById({
+            id: this.id,
+            ref: this.ref,
+            onRefChange: (node) => {
+                if (node) {
+                    group.labelId = node.id;
+                }
+                else {
+                    group.labelId = undefined;
+                }
+            },
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.id.current,
+        "data-disabled": getDataDisabled(this.group.disabled.current),
+        [CHECKBOX_GROUP_LABEL_ATTR]: "",
+    }));
+}
+class CheckboxRootState {
+    #id;
+    #ref;
+    #type;
+    checked;
+    #disabled;
+    #required;
+    #name;
+    value;
+    indeterminate;
+    group = null;
+    trueName = $derived.by(() => {
+        if (this.group && this.group.name.current) {
+            return this.group.name.current;
+        }
+        else {
+            return this.#name.current;
+        }
+    });
+    trueRequired = $derived.by(() => {
+        if (this.group && this.group.required.current) {
+            return true;
+        }
+        return this.#required.current;
+    });
+    trueDisabled = $derived.by(() => {
+        if (this.group && this.group.disabled.current) {
+            return true;
+        }
+        return this.#disabled.current;
+    });
+    constructor(props, group = null) {
+        this.checked = props.checked;
+        this.#disabled = props.disabled;
+        this.#required = props.required;
+        this.#name = props.name;
         this.value = props.value;
         this.#ref = props.ref;
         this.#id = props.id;
+        this.indeterminate = props.indeterminate;
+        this.#type = props.type;
+        this.group = group;
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onclick = this.onclick.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
+        watch([() => $state.snapshot(this.group?.value.current), () => this.value.current], ([groupValue, value]) => {
+            if (!groupValue || !value)
+                return;
+            this.checked.current = groupValue.includes(value);
+        });
+        watch(() => this.checked.current, (checked) => {
+            if (!this.group)
+                return;
+            if (checked) {
+                this.group?.addValue(this.value.current);
+            }
+            else {
+                this.group?.removeValue(this.value.current);
+            }
+        });
     }
-    #onkeydown = (e) => {
+    onkeydown(e) {
+        if (this.#disabled.current)
+            return;
         if (e.key === kbd.ENTER)
             e.preventDefault();
-    };
-    #onclick = () => {
-        if (this.disabled.current)
-            return;
-        if (this.checked.current === "indeterminate") {
+        if (e.key === kbd.SPACE) {
+            e.preventDefault();
+            this.#toggle();
+        }
+    }
+    #toggle() {
+        if (this.indeterminate.current) {
+            this.indeterminate.current = false;
             this.checked.current = true;
-            return;
         }
-        this.checked.current = !this.checked.current;
-    };
-    createInput() {
-        return new CheckboxInputState(this);
+        else {
+            this.checked.current = !this.checked.current;
+        }
+    }
+    onclick(_) {
+        if (this.#disabled.current)
+            return;
+        this.#toggle();
     }
+    snippetProps = $derived.by(() => ({
+        checked: this.checked.current,
+        indeterminate: this.indeterminate.current,
+    }));
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "checkbox",
-        type: "button",
-        disabled: this.disabled.current,
-        "aria-checked": getAriaChecked(this.checked.current),
-        "aria-required": getAriaRequired(this.required.current),
-        "data-disabled": getDataDisabled(this.disabled.current),
-        "data-state": getCheckboxDataState(this.checked.current),
+        type: this.#type.current,
+        disabled: this.trueDisabled,
+        "aria-checked": getAriaChecked(this.checked.current, this.indeterminate.current),
+        "aria-required": getAriaRequired(this.trueRequired),
+        "data-disabled": getDataDisabled(this.trueDisabled),
+        "data-state": getCheckboxDataState(this.checked.current, this.indeterminate.current),
         [CHECKBOX_ROOT_ATTR]: "",
         //
-        onclick: this.#onclick,
-        onkeydown: this.#onkeydown,
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
     }));
 }
 //
@@ -61,37 +187,47 @@ class CheckboxRootState {
 //
 class CheckboxInputState {
     root;
-    shouldRender = $derived.by(() => Boolean(this.root.name.current));
+    trueChecked = $derived.by(() => {
+        if (this.root.group) {
+            if (this.root.value.current !== undefined &&
+                this.root.group.value.current.includes(this.root.value.current)) {
+                return true;
+            }
+            return false;
+        }
+        return this.root.checked.current;
+    });
+    shouldRender = $derived.by(() => Boolean(this.root.trueName));
     constructor(root) {
         this.root = root;
     }
     props = $derived.by(() => ({
         type: "checkbox",
         checked: this.root.checked.current === true,
-        disabled: this.root.disabled.current,
-        required: this.root.required.current,
-        name: this.root.name.current,
+        disabled: this.root.trueDisabled,
+        required: this.root.trueRequired,
+        name: this.root.trueName,
         value: this.root.value.current,
         "aria-hidden": "true",
         style: styleToString(srOnlyStyles),
     }));
 }
-//
-// HELPERS
-//
-function getCheckboxDataState(checked) {
-    if (checked === "indeterminate") {
+function getCheckboxDataState(checked, indeterminate) {
+    if (indeterminate)
         return "indeterminate";
-    }
     return checked ? "checked" : "unchecked";
 }
-//
-// CONTEXT METHODS
-//
-const [setCheckboxRootContext, getCheckboxRootContext] = createContext("Checkbox.Root");
+const CheckboxGroupContext = new Context("Checkbox.Group");
+const CheckboxRootContext = new Context("Checkbox.Root");
+export function useCheckboxGroup(props) {
+    return CheckboxGroupContext.set(new CheckboxGroupState(props));
+}
 export function useCheckboxRoot(props) {
-    return setCheckboxRootContext(new CheckboxRootState(props));
+    return CheckboxRootContext.set(new CheckboxRootState(props, CheckboxGroupContext.getOr(null)));
+}
+export function useCheckboxGroupLabel(props) {
+    return new CheckboxGroupLabelState(props, CheckboxGroupContext.get());
 }
 export function useCheckboxInput() {
-    return getCheckboxRootContext().createInput();
+    return new CheckboxInputState(CheckboxRootContext.get());
 }

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { CheckboxGroupLabelProps } from "../types.js";
+	import { useCheckboxGroupLabel } from "../checkbox.svelte.js";
+	import { useId } from "../../../internal/use-id.js";
+
+	let {
+		ref = $bindable(null),
+		id = useId(),
+		child,
+		children,
+		...restProps
+	}: CheckboxGroupLabelProps = $props();
+
+	const labelState = useCheckboxGroupLabel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, labelState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
+{/if}

package/dist/bits/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,45 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { CheckboxGroupProps } from "../types.js";
+	import { useCheckboxGroup } from "../checkbox.svelte.js";
+	import { noop } from "../../../internal/noop.js";
+	import { useId } from "../../../internal/use-id.js";
+
+	let {
+		ref = $bindable(null),
+		id = useId(),
+		value = $bindable([]),
+		onValueChange = noop,
+		name,
+		required,
+		disabled,
+		children,
+		child,
+		...restProps
+	}: CheckboxGroupProps = $props();
+
+	const groupState = useCheckboxGroup({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		disabled: box.with(() => Boolean(disabled)),
+		required: box.with(() => Boolean(required)),
+		name: box.with(() => name),
+		value: box.with(
+			() => value,
+			(v) => onValueChange(v)
+		),
+	});
+
+	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.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { CheckboxRootProps } from "../types.js";
 	import { useCheckboxRoot } from "../checkbox.svelte.js";
 	import CheckboxInput from "./checkbox-input.svelte";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		checked = $bindable(false),
@@ -16,21 +15,19 @@
 		name = undefined,
 		value = "on",
 		id = useId(),
-		controlledChecked = false,
+		indeterminate = $bindable(false),
+		onIndeterminateChange,
 		child,
+		type = "button",
 		...restProps
-	}: RootProps = $props();
+	}: CheckboxRootProps = $props();
 
 	const rootState = useCheckboxRoot({
 		checked: box.with(
 			() => checked,
 			(v) => {
-				if (controlledChecked) {
-					onCheckedChange?.(v);
-				} else {
-					checked = v;
-					onCheckedChange?.(v);
-				}
+				checked = v;
+				onCheckedChange?.(v);
 			}
 		),
 		disabled: box.with(() => disabled ?? false),
@@ -42,18 +39,27 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		indeterminate: box.with(
+			() => indeterminate,
+			(v) => {
+				indeterminate = v;
+				onIndeterminateChange?.(v);
+			}
+		),
+		type: box.with(() => type),
 	});
 
 	const mergedProps = $derived(mergeProps({ ...restProps }, rootState.props));
 </script>
 
 {#if child}
-	{@render child({ props: mergedProps, checked: rootState.checked.current })}
+	{@render child({
+		props: mergedProps,
+		...rootState.snippetProps,
+	})}
 {:else}
 	<button {...mergedProps}>
-		{@render children?.({
-			checked: rootState.checked.current,
-		})}
+		{@render children?.(rootState.snippetProps)}
 	</button>
 {/if}
 

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

@@ -1,19 +1,4 @@
-import type { RootProps } from "../index.js";
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Checkbox: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "checked" | "ref">;
-type Checkbox = InstanceType<typeof Checkbox>;
+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

@@ -1,2 +1 @@
-export { default as Root } from "./components/checkbox.svelte";
-export type { CheckboxRootProps as RootProps } from "./types.js";
+export * as Checkbox from "./exports.js";

package/dist/bits/checkbox/index.js

@@ -1 +1 @@
-export { default as Root } from "./components/checkbox.svelte";
+export * as Checkbox from "./exports.js";

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

@@ -1,7 +1,8 @@
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveSpanAttributes } from "../../shared/attributes.js";
 export type CheckboxRootSnippetProps = {
-    checked: boolean | "indeterminate";
+    checked: boolean;
+    indeterminate: boolean;
 };
 export type CheckboxRootPropsWithoutHTML = WithChild<{
     /**
@@ -24,7 +25,9 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
      */
     name?: any;
     /**
-     * The value of the checkbox used in form submission.
+     * 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.
      *
      * @defaultValue undefined
      */
@@ -33,23 +36,62 @@ export type CheckboxRootPropsWithoutHTML = WithChild<{
      * The checked state of the checkbox. It can be one of:
      * - `true` for checked
      * - `false` for unchecked
-     * - `"indeterminate"` for indeterminate
      *
      * @defaultValue false
      */
-    checked?: boolean | "indeterminate" | undefined;
+    checked?: boolean;
     /**
      * A callback function called when the checked state changes.
      */
-    onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+    onCheckedChange?: OnChangeFn<boolean>;
     /**
-     * Whether or not the checkbox is controlled or not. If `true`, the checkbox will not update
-     * the checked state internally, instead it will call `onCheckedChange` when it would have
-     * otherwise, and it is up to you to update the `checked` prop that is passed to the
-     * component.
+     * Whether the checkbox is in an indeterminate state or not.
      *
      * @defaultValue false
      */
-    controlledChecked?: boolean;
+    indeterminate?: boolean;
+    /**
+     * A callback function called when the indeterminate state changes.
+     */
+    onIndeterminateChange?: OnChangeFn<boolean>;
 }, CheckboxRootSnippetProps>;
-export type CheckboxRootProps = CheckboxRootPropsWithoutHTML & Without<PrimitiveButtonAttributes, CheckboxRootPropsWithoutHTML>;
+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.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | null | undefined;
+    /**
+     * Whether the checkbox group is required (for form validation).
+     * This will mark all checkboxes in the group as required.
+     *
+     * @defaultValue 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.
+     *
+     * @defaultValue undefined
+     */
+    name?: any;
+    /**
+     * The value of the checkbox group, indicating which
+     * of the checkboxes in the group are checked.
+     *
+     * @bindable
+     * @defaultValue []
+     */
+    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/collapsible/collapsible.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
+import type { BitsKeyboardEvent, BitsMouseEvent } from "../../internal/types.js";
 type CollapsibleRootStateProps = WritableBoxedValues<{
     open: boolean;
     ref: HTMLElement | null;
@@ -11,11 +12,8 @@ declare class CollapsibleRootState {
     open: CollapsibleRootStateProps["open"];
     disabled: CollapsibleRootStateProps["disabled"];
     contentNode: HTMLElement | null;
-    contentId: string | undefined;
     constructor(props: CollapsibleRootStateProps);
     toggleOpen(): void;
-    createContent(props: CollapsibleContentStateProps): CollapsibleContentState;
-    createTrigger(props: CollapsibleTriggerStateProps): CollapsibleTriggerState;
     props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";
@@ -57,16 +55,19 @@ type CollapsibleTriggerStateProps = ReadableBoxedValues<{
 declare class CollapsibleTriggerState {
     #private;
     constructor(props: CollapsibleTriggerStateProps, root: CollapsibleRootState);
+    onclick(e: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
         readonly type: "button";
         readonly disabled: boolean;
         readonly "aria-controls": string | undefined;
-        readonly "aria-expanded": "false" | "true";
+        readonly "aria-expanded": "true" | "false";
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
         readonly "data-collapsible-trigger": "";
-        readonly onclick: () => void;
+        readonly onclick: (e: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
 export declare function useCollapsibleRoot(props: CollapsibleRootStateProps): CollapsibleRootState;