@johly/bits-ui 2.18.1

package/dist/bits/toggle-group/toggle-group.svelte.d.ts

@@ -0,0 +1,95 @@
+import { type WritableBox, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { Orientation } from "../../shared/index.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+export declare const toggleGroupAttrs: import("../../internal/attrs.js").CreateBitsAttrsReturn<readonly ["root", "item"]>;
+interface ToggleGroupBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    rovingFocus: boolean;
+    loop: boolean;
+    orientation: Orientation;
+}> {
+}
+declare abstract class ToggleGroupBaseState {
+    readonly opts: ToggleGroupBaseStateOpts;
+    readonly rovingFocusGroup: RovingFocusGroup;
+    readonly attachment: RefAttachment;
+    constructor(opts: ToggleGroupBaseStateOpts);
+    readonly props: {
+        readonly id: string;
+        readonly role: "group";
+        readonly "data-orientation": Orientation;
+        readonly "data-disabled": "" | undefined;
+    };
+}
+interface ToggleGroupSingleStateOpts extends ToggleGroupBaseStateOpts, WritableBoxedValues<{
+    value: string;
+}> {
+}
+declare class ToggleGroupSingleState extends ToggleGroupBaseState {
+    readonly opts: ToggleGroupSingleStateOpts;
+    isMulti: boolean;
+    readonly anyPressed: boolean;
+    constructor(opts: ToggleGroupSingleStateOpts);
+    includesItem(item: string): boolean;
+    toggleItem(item: string, id: string): void;
+}
+interface ToggleGroupMultipleStateOpts extends ToggleGroupBaseStateOpts, WritableBoxedValues<{
+    value: string[];
+}> {
+}
+declare class ToggleGroupMultipleState extends ToggleGroupBaseState {
+    readonly opts: ToggleGroupMultipleStateOpts;
+    isMulti: boolean;
+    readonly anyPressed: boolean;
+    constructor(opts: ToggleGroupMultipleStateOpts);
+    includesItem(item: string): boolean;
+    toggleItem(item: string, id: string): void;
+}
+type ToggleGroup = ToggleGroupSingleState | ToggleGroupMultipleState;
+interface ToggleGroupRootOpts extends WithRefOpts, ReadableBoxedValues<{
+    disabled: boolean;
+    rovingFocus: boolean;
+    loop: boolean;
+    orientation: Orientation;
+}> {
+    type: "single" | "multiple";
+    value: WritableBox<string> | WritableBox<string[]>;
+}
+export declare class ToggleGroupRootState {
+    static create(opts: ToggleGroupRootOpts): ToggleGroup;
+}
+interface ToggleGroupItemStateOpts extends WithRefOpts, ReadableBoxedValues<{
+    value: string;
+    disabled: boolean;
+}> {
+}
+export declare class ToggleGroupItemState {
+    #private;
+    static create(opts: ToggleGroupItemStateOpts): ToggleGroupItemState;
+    readonly opts: ToggleGroupItemStateOpts;
+    readonly root: ToggleGroup;
+    readonly attachment: RefAttachment;
+    readonly isPressed: boolean;
+    constructor(opts: ToggleGroupItemStateOpts, root: ToggleGroup);
+    onclick(_: BitsMouseEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
+    readonly snippetProps: {
+        pressed: boolean;
+    };
+    readonly props: {
+        readonly id: string;
+        readonly role: "radio" | undefined;
+        readonly tabindex: number;
+        readonly "data-orientation": Orientation;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-state": "off" | "on";
+        readonly "data-value": string;
+        readonly "aria-pressed": "true" | "false" | undefined;
+        readonly "aria-checked": "true" | "false" | "mixed" | undefined;
+        readonly disabled: true | undefined;
+        readonly onclick: (_: BitsMouseEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+    };
+}
+export {};

package/dist/bits/toggle-group/toggle-group.svelte.js

@@ -0,0 +1,161 @@
+import { attachRef, } from "svelte-toolbelt";
+import { Context } from "runed";
+import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef, } from "../../internal/attrs.js";
+import { kbd } from "../../internal/kbd.js";
+import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
+export const toggleGroupAttrs = createBitsAttrs({
+    component: "toggle-group",
+    parts: ["root", "item"],
+});
+const ToggleGroupRootContext = new Context("ToggleGroup.Root");
+class ToggleGroupBaseState {
+    opts;
+    rovingFocusGroup;
+    attachment;
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
+        this.rovingFocusGroup = new RovingFocusGroup({
+            candidateAttr: toggleGroupAttrs.item,
+            rootNode: opts.ref,
+            loop: opts.loop,
+            orientation: opts.orientation,
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [toggleGroupAttrs.root]: "",
+        role: "group",
+        "data-orientation": this.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
+        ...this.attachment,
+    }));
+}
+class ToggleGroupSingleState extends ToggleGroupBaseState {
+    opts;
+    isMulti = false;
+    anyPressed = $derived.by(() => this.opts.value.current !== "");
+    constructor(opts) {
+        super(opts);
+        this.opts = opts;
+    }
+    includesItem(item) {
+        return this.opts.value.current === item;
+    }
+    toggleItem(item, id) {
+        if (this.includesItem(item)) {
+            this.opts.value.current = "";
+        }
+        else {
+            this.opts.value.current = item;
+            this.rovingFocusGroup.setCurrentTabStopId(id);
+        }
+    }
+}
+class ToggleGroupMultipleState extends ToggleGroupBaseState {
+    opts;
+    isMulti = true;
+    anyPressed = $derived.by(() => this.opts.value.current.length > 0);
+    constructor(opts) {
+        super(opts);
+        this.opts = opts;
+    }
+    includesItem(item) {
+        return this.opts.value.current.includes(item);
+    }
+    toggleItem(item, id) {
+        if (this.includesItem(item)) {
+            this.opts.value.current = this.opts.value.current.filter((v) => v !== item);
+        }
+        else {
+            this.opts.value.current = [...this.opts.value.current, item];
+            this.rovingFocusGroup.setCurrentTabStopId(id);
+        }
+    }
+}
+export class ToggleGroupRootState {
+    static create(opts) {
+        const { type, ...rest } = opts;
+        const rootState = type === "single"
+            ? new ToggleGroupSingleState(rest)
+            : new ToggleGroupMultipleState(rest);
+        return ToggleGroupRootContext.set(rootState);
+    }
+}
+export class ToggleGroupItemState {
+    static create(opts) {
+        return new ToggleGroupItemState(opts, ToggleGroupRootContext.get());
+    }
+    opts;
+    root;
+    attachment;
+    #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    isPressed = $derived.by(() => this.root.includesItem(this.opts.value.current));
+    #ariaChecked = $derived.by(() => {
+        return this.root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
+    });
+    #ariaPressed = $derived.by(() => {
+        return this.root.isMulti ? boolToStr(this.isPressed) : undefined;
+    });
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref);
+        $effect(() => {
+            if (!this.root.opts.rovingFocus.current) {
+                this.#tabIndex = 0;
+            }
+            else {
+                this.#tabIndex = this.root.rovingFocusGroup.getTabIndex(this.opts.ref.current);
+            }
+        });
+        this.onclick = this.onclick.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
+    }
+    #toggleItem() {
+        if (this.#isDisabled)
+            return;
+        this.root.toggleItem(this.opts.value.current, this.opts.id.current);
+    }
+    onclick(_) {
+        if (this.#isDisabled)
+            return;
+        this.root.toggleItem(this.opts.value.current, this.opts.id.current);
+    }
+    onkeydown(e) {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
+            e.preventDefault();
+            this.#toggleItem();
+            return;
+        }
+        if (!this.root.opts.rovingFocus.current)
+            return;
+        this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+    }
+    #tabIndex = $state(0);
+    snippetProps = $derived.by(() => ({
+        pressed: this.isPressed,
+    }));
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        role: this.root.isMulti ? undefined : "radio",
+        tabindex: this.#tabIndex,
+        "data-orientation": this.root.opts.orientation.current,
+        "data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
+        "data-state": getToggleItemDataState(this.isPressed),
+        "data-value": this.opts.value.current,
+        "aria-pressed": this.#ariaPressed,
+        "aria-checked": this.#ariaChecked,
+        disabled: boolToTrueOrUndef(this.#isDisabled),
+        [toggleGroupAttrs.item]: "",
+        //
+        onclick: this.onclick,
+        onkeydown: this.onkeydown,
+        ...this.attachment,
+    }));
+}
+function getToggleItemDataState(condition) {
+    return condition ? "on" : "off";
+}

package/dist/bits/toggle-group/types.d.ts

@@ -0,0 +1,61 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { Orientation } from "../../index.js";
+export type BaseToggleGroupRootProps = {
+    /**
+     * Whether the toggle group is disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to loop through the items when reaching the end
+     * when using the keyboard.
+     *
+     * @defaultValue true
+     */
+    loop?: boolean;
+    /**
+     * The orientation of the toggle group. Used to handle keyboard
+     * navigation between items.
+     *
+     * @defaultValue 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * Whether to enable roving focus or not. When enabled, users
+     * navigate between the items using the arrow keys. When disabled,
+     * users navigate between the items using the tab key.
+     */
+    rovingFocus?: boolean;
+};
+export type SingleToggleGroupRootPropsWithoutHTML = WithChild<BaseToggleGroupRootProps & {
+    type: "single";
+    value?: string;
+    onValueChange?: OnChangeFn<string>;
+}>;
+export type SingleToggleGroupRootProps = SingleToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SingleToggleGroupRootPropsWithoutHTML>;
+export type MultipleToggleGroupRootPropsWithoutHTML = WithChild<BaseToggleGroupRootProps> & {
+    type: "multiple";
+    value?: string[];
+    onValueChange?: OnChangeFn<string[]>;
+};
+export type MultipleToggleGroupRootProps = MultipleToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, MultipleToggleGroupRootPropsWithoutHTML>;
+export type ToggleGroupRootPropsWithoutHTML = SingleToggleGroupRootPropsWithoutHTML | MultipleToggleGroupRootPropsWithoutHTML;
+export type ToggleGroupRootProps = ToggleGroupRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ToggleGroupRootPropsWithoutHTML>;
+export type ToggleGroupItemSnippetProps = {
+    pressed: boolean;
+};
+export type ToggleGroupItemPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the toggle item is disabled or not.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean | null | undefined;
+    /**
+     * The value of the toggle item.
+     */
+    value: string;
+}, ToggleGroupItemSnippetProps>;
+export type ToggleGroupItemProps = ToggleGroupItemPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, ToggleGroupItemPropsWithoutHTML>;

package/dist/bits/toggle-group/types.js

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

package/dist/bits/toolbar/components/toolbar-button.svelte

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

package/dist/bits/toolbar/components/toolbar-button.svelte.d.ts

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

package/dist/bits/toolbar/components/toolbar-group-item.svelte

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

package/dist/bits/toolbar/components/toolbar-group-item.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ToolbarGroupItem: import("svelte").Component<import("../../toggle-group/types.js").ToggleGroupItemProps, {}, "ref">;
+type ToolbarGroupItem = ReturnType<typeof ToolbarGroupItem>;
+export default ToolbarGroupItem;

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { type WritableBox, boxWith } from "svelte-toolbelt";
+	import { mergeProps } from "svelte-toolbelt";
+	import type { ToolbarGroupProps } from "../types.js";
+	import { ToolbarGroupState } from "../toolbar.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { noop } from "../../../internal/noop.js";
+	import { watch } from "runed";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(),
+		onValueChange = noop,
+		type,
+		disabled = false,
+		child,
+		children,
+		...restProps
+	}: ToolbarGroupProps = $props();
+
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = type === "single" ? "" : [];
+	}
+
+	// SSR
+	handleDefaultValue();
+
+	watch.pre(
+		() => value,
+		() => {
+			handleDefaultValue();
+		}
+	);
+
+	const groupState = ToolbarGroupState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		type,
+		value: boxWith(
+			() => value!,
+			(v) => {
+				value = v;
+				// @ts-expect-error - we know
+				onValueChange(v);
+			}
+		) as WritableBox<string> | WritableBox<string[]>,
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = 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/toolbar/components/toolbar-group.svelte.d.ts

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

package/dist/bits/toolbar/components/toolbar-link.svelte

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

package/dist/bits/toolbar/components/toolbar-link.svelte.d.ts

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

package/dist/bits/toolbar/components/toolbar.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import type { ToolbarRootProps } from "../types.js";
+	import { ToolbarRootState } from "../toolbar.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		orientation = "horizontal",
+		loop = true,
+		child,
+		children,
+		...restProps
+	}: ToolbarRootProps = $props();
+
+	const rootState = ToolbarRootState.create({
+		id: boxWith(() => id),
+		orientation: boxWith(() => orientation),
+		loop: boxWith(() => loop),
+		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/toolbar/components/toolbar.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/toolbar.svelte";
+export { default as Button } from "./components/toolbar-button.svelte";
+export { default as Link } from "./components/toolbar-link.svelte";
+export { default as Group } from "./components/toolbar-group.svelte";
+export { default as GroupItem } from "./components/toolbar-group-item.svelte";
+export type { ToolbarRootProps as RootProps, ToolbarButtonProps as ButtonProps, ToolbarLinkProps as LinkProps, ToolbarGroupProps as GroupProps, ToolbarGroupItemProps as GroupItemProps, } from "./types.js";

package/dist/bits/toolbar/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/toolbar.svelte";
+export { default as Button } from "./components/toolbar-button.svelte";
+export { default as Link } from "./components/toolbar-link.svelte";
+export { default as Group } from "./components/toolbar-group.svelte";
+export { default as GroupItem } from "./components/toolbar-group-item.svelte";

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

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

package/dist/bits/toolbar/index.js

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