sheer-ui 0.0.0

package/src/lib/components/toggle-group/toggle-group.svelte.ts

@@ -0,0 +1,235 @@
+import { createContext } from 'svelte';
+import { type WritableBox, type ReadableBoxedValues, type WritableBoxedValues, attachRef } from '../../internal/tools/index.js';
+import { createBitsAttrs, getAriaChecked, boolToStr, boolToEmptyStrOrUndef, boolToTrueOrUndef } from '../../internal/attrs.js';
+import { kbd } from '../../internal/kbd.js';
+import type { Orientation } from '../../internal/index.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusItem } from '../../internal/roving-focus-item.svelte.js';
+
+export const toggleGroupAttrs = createBitsAttrs({
+	component: 'toggle-group',
+	parts: ['root', 'item'],
+});
+
+const [getToggleGroupRoot, setToggleGroupRoot] = createContext<ToggleGroup>();
+
+interface ToggleGroupBaseStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+			rovingFocus: boolean;
+			loop: boolean;
+			orientation: Orientation;
+		}> {}
+
+abstract class ToggleGroupBaseState {
+	readonly opts: ToggleGroupBaseStateOpts;
+	readonly rovingFocusGroup: RovingFocusGroup;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: ToggleGroupBaseStateOpts) {
+		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,
+		});
+	}
+
+	readonly 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,
+			}) as const,
+	);
+}
+
+interface ToggleGroupSingleStateOpts
+	extends
+		ToggleGroupBaseStateOpts,
+		WritableBoxedValues<{
+			value: string;
+		}> {}
+
+class ToggleGroupSingleState extends ToggleGroupBaseState {
+	override readonly opts: ToggleGroupSingleStateOpts;
+	isMulti = false;
+	readonly anyPressed = $derived.by(() => this.opts.value.current !== '');
+
+	constructor(opts: ToggleGroupSingleStateOpts) {
+		super(opts);
+		this.opts = opts;
+	}
+
+	includesItem(item: string) {
+		return this.opts.value.current === item;
+	}
+
+	toggleItem(item: string, id: string) {
+		if (this.includesItem(item)) {
+			this.opts.value.current = '';
+		} else {
+			this.opts.value.current = item;
+			this.rovingFocusGroup.setCurrentTabStopId(id);
+		}
+	}
+}
+
+//
+// MULTIPLE
+//
+
+interface ToggleGroupMultipleStateOpts
+	extends
+		ToggleGroupBaseStateOpts,
+		WritableBoxedValues<{
+			value: string[];
+		}> {}
+
+class ToggleGroupMultipleState extends ToggleGroupBaseState {
+	override readonly opts: ToggleGroupMultipleStateOpts;
+	isMulti = true;
+	readonly anyPressed = $derived.by(() => this.opts.value.current.length > 0);
+
+	constructor(opts: ToggleGroupMultipleStateOpts) {
+		super(opts);
+
+		this.opts = opts;
+	}
+
+	includesItem(item: string) {
+		return this.opts.value.current.includes(item);
+	}
+
+	toggleItem(item: string, id: string) {
+		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);
+		}
+	}
+}
+
+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 class ToggleGroupRootState {
+	static create(opts: ToggleGroupRootOpts): ToggleGroup {
+		const { type, ...rest } = opts;
+		const rootState =
+			type === 'single'
+				? new ToggleGroupSingleState(rest as ToggleGroupSingleStateOpts)
+				: new ToggleGroupMultipleState(rest as ToggleGroupMultipleStateOpts);
+		return setToggleGroupRoot(rootState);
+	}
+}
+
+interface ToggleGroupItemStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			value: string;
+			disabled: boolean;
+		}> {}
+
+export class ToggleGroupItemState {
+	static create(opts: ToggleGroupItemStateOpts) {
+		return new ToggleGroupItemState(opts, getToggleGroupRoot());
+	}
+	readonly opts: ToggleGroupItemStateOpts;
+	readonly root: ToggleGroup;
+	readonly rovingItem: RovingFocusItem;
+	readonly #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+	readonly isPressed = $derived.by(() => this.root.includesItem(this.opts.value.current));
+
+	readonly #ariaChecked = $derived.by(() => {
+		return this.root.isMulti ? undefined : getAriaChecked(this.isPressed, false);
+	});
+
+	readonly #ariaPressed = $derived.by(() => {
+		return this.root.isMulti ? boolToStr(this.isPressed) : undefined;
+	});
+
+	constructor(opts: ToggleGroupItemStateOpts, root: ToggleGroup) {
+		this.opts = opts;
+		this.root = root;
+		this.rovingItem = new RovingFocusItem({
+			group: this.root.rovingFocusGroup,
+			ref: this.opts.ref,
+			enabled: this.root.opts.rovingFocus,
+		});
+
+		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(_: BitsMouseEvent) {
+		if (this.#isDisabled) return;
+		this.root.toggleItem(this.opts.value.current, this.opts.id.current);
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		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.rovingItem.handleKeydown(e);
+	}
+
+	readonly snippetProps = $derived.by(() => ({
+		pressed: this.isPressed,
+	}));
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: this.root.isMulti ? undefined : 'radio',
+				'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.rovingItem.props,
+			}) as const,
+	);
+}
+
+const getToggleItemDataState = (condition: boolean) => condition ? 'on' : 'off';

package/src/lib/components/toggle-group/types.ts

@@ -0,0 +1,89 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type {
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+} from "../../internal/attribute-types.js";
+import type { Orientation } from "../../internal/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/src/lib/components/toolbar/components/toolbar-button.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ToolbarButtonProps } from '../types.js';
+	import { ToolbarButtonState } from '../toolbar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { toggleVariants, type ToggleSize, type ToggleVariant } from '../../toggle/variants.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		disabled = false,
+		type = 'button',
+		id = createId(uid),
+		ref = $bindable(null),
+		variant = 'default',
+		size = 'default',
+		...restProps
+	}: ToolbarButtonProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+
+	const buttonState = ToolbarButtonState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps({ 'data-slot': 'toolbar-button', class: toggleVariants({ variant, size }) }, restProps, buttonState.props, { type }),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+	</button>
+{/if}

package/src/lib/components/toolbar/components/toolbar-group-item.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ToolbarGroupItemProps } from '../types.js';
+	import { ToolbarGroupItemState } from '../toolbar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import { toggleVariants, type ToggleSize, type ToggleVariant } from '../../toggle/variants.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		value,
+		disabled = false,
+		type = 'button',
+		id = createId(uid),
+		ref = $bindable(null),
+		variant = 'default',
+		size = 'default',
+		...restProps
+	}: ToolbarGroupItemProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $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(
+			{
+				'data-slot': 'toolbar-group-item',
+				class: toggleVariants({ variant, size }),
+			},
+			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/src/lib/components/toolbar/components/toolbar-group.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { type WritableBox, boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ToolbarGroupProps } from '../types.js';
+	import { ToolbarGroupState } from '../toolbar.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(),
+		onValueChange = () => {},
+		type,
+		disabled = false,
+		child,
+		children,
+		...restProps
+	}: ToolbarGroupProps = $props();
+
+	// Mode is construction-static: ToolbarGroupState chooses a single/multiple class once.
+	const valueType = untrack(() => type);
+
+	function getDefaultValue(): string | string[] {
+		return valueType === 'single' ? '' : [];
+	}
+
+	function handleDefaultValue() {
+		if (value !== undefined) return;
+		value = getDefaultValue();
+	}
+
+	function getValue() {
+		return value ?? getDefaultValue();
+	}
+
+	// SSR
+	handleDefaultValue();
+
+	const groupState = ToolbarGroupState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		type: valueType,
+		value: boxWith(
+			() => getValue(),
+			(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({ 'data-slot': 'toolbar-group', class: 'flex items-center gap-1' }, restProps, groupState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/toolbar/components/toolbar-link.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	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(
+			{
+				'data-slot': 'toolbar-link',
+				class:
+					'focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center justify-center rounded-md text-sm font-medium underline-offset-4 transition-colors outline-none hover:underline focus-visible:ring-3',
+			},
+			restProps,
+			linkState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a {href} {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}

package/src/lib/components/toolbar/components/toolbar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	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({ 'data-slot': 'toolbar', class: 'flex items-center gap-1' }, restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/toolbar/index.ts

@@ -0,0 +1,13 @@
+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';