sheer-ui 0.0.0

package/src/lib/components/checkbox/checkbox.svelte.ts

@@ -0,0 +1,199 @@
+import { createContext } from 'svelte';
+import { joinGroup } from '../../internal/group-value.svelte.js';
+import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { boolToStr, createBitsAttrs, getAriaChecked, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
+import { kbd } from '../../internal/kbd.js';
+
+const checkboxAttrs = createBitsAttrs({
+	component: 'checkbox',
+	parts: ['root', 'group', 'group-label', 'input'],
+});
+
+interface CheckboxGroupStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+			required: boolean;
+			readonly: boolean;
+		}>,
+		WritableBoxedValues<{
+			value: string[];
+		}> {}
+
+const [getCheckboxGroup, setCheckboxGroup, hasCheckboxGroup] = createContext<CheckboxGroupState>();
+
+export class CheckboxGroupState {
+	static create(opts: CheckboxGroupStateOpts) {
+		return setCheckboxGroup(new CheckboxGroupState(opts));
+	}
+
+	readonly opts: CheckboxGroupStateOpts;
+	readonly attachment: RefAttachment;
+	labelState = $state<CheckboxGroupLabelState | null>(null);
+	readonly labelId = $derived.by(() => this.labelState?.opts.id.current);
+
+	constructor(opts: CheckboxGroupStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+	}
+
+	readonly 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,
+			}) as const,
+	);
+}
+
+interface CheckboxGroupLabelStateOpts extends WithRefOpts {}
+
+export class CheckboxGroupLabelState {
+	static create(opts: CheckboxGroupLabelStateOpts) {
+		return new CheckboxGroupLabelState(opts, getCheckboxGroup());
+	}
+
+	readonly opts: CheckboxGroupLabelStateOpts;
+	readonly group: CheckboxGroupState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: CheckboxGroupLabelStateOpts, group: CheckboxGroupState) {
+		this.opts = opts;
+		this.group = group;
+		this.group.labelState = this;
+		this.attachment = attachRef(this.opts.ref);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'data-disabled': boolToEmptyStrOrUndef(this.group.opts.disabled.current),
+				[checkboxAttrs['group-label']]: '',
+				...this.attachment,
+			}) as const,
+	);
+}
+
+const [, setCheckboxRoot] = createContext<CheckboxRootState>();
+
+interface CheckboxRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+			required: boolean;
+			readonly: boolean;
+			value: string | undefined;
+			type: HTMLButtonAttributes['type'];
+		}>,
+		WritableBoxedValues<{
+			checked: boolean;
+			indeterminate: boolean;
+		}> {}
+
+export class CheckboxRootState {
+	static create(opts: CheckboxRootStateOpts) {
+		const group = hasCheckboxGroup() ? getCheckboxGroup() : null;
+		return setCheckboxRoot(new CheckboxRootState(opts, group));
+	}
+
+	readonly opts: CheckboxRootStateOpts;
+	readonly group: CheckboxGroupState | null;
+	readonly groupChecked: () => boolean | undefined;
+	readonly trueRequired = $derived.by(() => {
+		if (this.group && this.group.opts.required.current) return true;
+		return this.opts.required.current;
+	});
+	readonly trueDisabled = $derived.by(() => {
+		if (this.group && this.group.opts.disabled.current) return true;
+		return this.opts.disabled.current;
+	});
+	readonly trueReadonly = $derived.by(() => {
+		if (this.group && this.group.opts.readonly.current) return true;
+		return this.opts.readonly.current;
+	});
+	readonly attachment: RefAttachment;
+
+	constructor(opts: CheckboxRootStateOpts, group: CheckboxGroupState | null) {
+		this.opts = opts;
+		this.group = group;
+		this.attachment = attachRef(this.opts.ref);
+		this.onkeydown = this.onkeydown.bind(this);
+		this.onclick = this.onclick.bind(this);
+		this.groupChecked = joinGroup(group, opts);
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		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: BitsMouseEvent) {
+		if (this.trueDisabled || this.trueReadonly) return;
+		if (this.opts.type.current === 'submit') {
+			this.#toggle();
+			return;
+		}
+		e.preventDefault();
+		this.#toggle();
+	}
+
+	readonly snippetProps = $derived.by(() => ({
+		checked: this.opts.checked.current,
+		indeterminate: this.opts.indeterminate.current,
+	}));
+
+	readonly 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,
+			}) as const,
+	);
+}
+
+function getCheckboxDataState(checked: boolean, indeterminate: boolean) {
+	if (indeterminate) return 'indeterminate';
+	return checked ? 'checked' : 'unchecked';
+}

package/src/lib/components/checkbox/components/checkbox-group-label.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	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/src/lib/components/checkbox/components/checkbox-group.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { bindableWith, boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { CheckboxGroupProps } from '../types.js';
+	import { CheckboxGroupState } from '../checkbox.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		value = $bindable([]),
+		onValueChange = () => {},
+		required,
+		disabled,
+		children,
+		child,
+		readonly,
+		...restProps
+	}: CheckboxGroupProps = $props();
+
+	const groupState = CheckboxGroupState.create({
+		id: boxWith(() => id),
+		ref: bindableWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		disabled: boxWith(() => Boolean(disabled)),
+		required: boxWith(() => Boolean(required)),
+		readonly: boxWith(() => Boolean(readonly)),
+		value: bindableWith(
+			() => $state.snapshot(value),
+			(v) => (value = $state.snapshot(v)),
+			(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/src/lib/components/checkbox/components/checkbox.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	// Checkbox (button): controlled / headless. A <button role=checkbox> for table
+	// select-all, JS-owned state, and Checkbox.Group. It does NOT submit in a form;
+	// use `CheckboxNative` (name/value) for form fields.
+	import { bindableWith, boxWith, repairBindable } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { CheckboxRootProps } from '../types.js';
+	import { CheckboxRootState } from '../checkbox.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+
+	const uid = $props.id();
+
+	let {
+		checked = $bindable(false),
+		ref = $bindable(null),
+		onCheckedChange,
+		children,
+		disabled = false,
+		required = false,
+		value = 'on',
+		id = createId(uid),
+		indeterminate = $bindable(false),
+		onIndeterminateChange,
+		child,
+		type = 'button',
+		readonly,
+		...restProps
+	}: CheckboxRootProps = $props();
+
+	const rootState = CheckboxRootState.create({
+		checked: bindableWith(
+			() => checked,
+			(v) => (checked = v),
+			(v) => onCheckedChange?.(v),
+		),
+		disabled: boxWith(() => disabled ?? false),
+		required: boxWith(() => required),
+		value: boxWith(() => value),
+		id: boxWith(() => id),
+		ref: bindableWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		indeterminate: bindableWith(
+			() => indeterminate,
+			(v) => (indeterminate = v),
+			(v) => onIndeterminateChange?.(v),
+		),
+		type: boxWith(() => type),
+		readonly: boxWith(() => Boolean(readonly)),
+	});
+
+	repairBindable(rootState.groupChecked, () => (checked = rootState.groupChecked() ?? checked));
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'checkbox',
+				class:
+					'border-border dark:bg-border/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer grid size-4 shrink-0 place-items-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+			},
+			restProps,
+			rootState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({
+		props: mergedProps,
+		...rootState.snippetProps,
+	})}
+{:else}
+	<button {...mergedProps}>
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	</button>
+{/if}

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

@@ -0,0 +1,9 @@
+export { default as Root, default as Checkbox } 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/src/lib/components/checkbox/types.ts

@@ -0,0 +1,131 @@
+import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
+import type {
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+	BitsPrimitiveSpanAttributes,
+} from "../../internal/attribute-types.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 value used to identify the checkbox when in a `Checkbox.Group`. If
+		 * not provided while in a `Checkbox.Group`, the checkbox uses 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>;
+
+		/**
+		 * Not supported: this checkbox renders a `<button>` and never submits.
+		 * Use `CheckboxNative` (with `name`/`value`) for form fields.
+		 */
+		name?: never;
+	},
+	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 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/src/lib/components/checkbox-native/checkbox.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+	// CheckboxNative: the form checkbox. A real <input type=checkbox> that submits
+	// (name/value) and supports bind:checked / bind:indeterminate. For controlled,
+	// headless, or grouped use (table select-all, Checkbox.Group) use `../checkbox`.
+	import { join } from 'overrule';
+	import type { ClassValue, HTMLAttributes } from 'svelte/elements';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+
+	export type CheckboxProps = Omit<HTMLAttributes<HTMLSpanElement>, 'class'> & {
+		ref?: HTMLInputElement | null;
+		id?: string;
+		class?: ClassValue | null;
+		checked?: boolean;
+		indeterminate?: boolean;
+		disabled?: boolean | null;
+		required?: boolean;
+		readonly?: boolean | null;
+		name?: string;
+		value?: string;
+		onCheckedChange?: (checked: boolean) => void;
+		onIndeterminateChange?: (indeterminate: boolean) => void;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		id,
+		class: className,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		disabled = false,
+		required = false,
+		readonly = false,
+		name = undefined,
+		value = 'on',
+		onCheckedChange,
+		onIndeterminateChange,
+		...restProps
+	}: CheckboxProps = $props();
+
+	// A real <input type="checkbox"> is the interactive, focusable, form-participating element
+	// (focus lands on it, so the box's has-focus-visible ring only shows for keyboard focus,
+	// matching :focus-visible on a bare control), overlaid invisibly on the
+	// styled box + indicator icon. Mirrors the data-state semantics of the headless checkbox:
+	// indeterminate wins, then checked, then unchecked.
+	const state = $derived(indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked');
+
+	const shared = $derived({
+		'data-disabled': disabled ? '' : undefined,
+		'data-readonly': readonly ? '' : undefined,
+		'data-state': state,
+		'data-required': required ? '' : undefined,
+	});
+</script>
+
+<span
+	data-slot="checkbox"
+	{...shared}
+	{...restProps}
+	class={join(
+		'border-border dark:bg-border/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-[state=checked]:border-primary has-focus-visible:border-ring has-focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative grid size-4 shrink-0 place-items-center rounded-[4px] border shadow-xs transition-shadow outline-none has-focus-visible:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+		className,
+	)}>
+	<input
+		bind:this={ref}
+		bind:checked
+		bind:indeterminate
+		type="checkbox"
+		data-slot="checkbox-input"
+		{...shared}
+		{id}
+		{name}
+		{value}
+		{disabled}
+		{required}
+		aria-required={required ? 'true' : 'false'}
+		aria-readonly={readonly ? 'true' : undefined}
+		onclick={(e) => {
+			if (readonly) e.preventDefault();
+		}}
+		onchange={() => {
+			onCheckedChange?.(checked);
+			onIndeterminateChange?.(indeterminate);
+		}}
+		class="peer absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed" />
+
+	<div data-slot="checkbox-indicator" class="pointer-events-none text-current transition-none">
+		{#if indeterminate}
+			<MinusIcon class="size-3.5" />
+		{:else if checked}
+			<CheckIcon class="size-3.5" />
+		{/if}
+	</div>
+</span>

package/src/lib/components/checkbox-native/index.ts

@@ -0,0 +1,8 @@
+import Root from './checkbox.svelte';
+export type { CheckboxProps } from './checkbox.svelte';
+
+export {
+	Root,
+	//
+	Root as CheckboxNative,
+};

package/src/lib/components/collapsible/components/collapsible-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { CollapsibleContentProps } from '../types.js';
+
+	let { ref = $bindable(null), children, ...restProps }: CollapsibleContentProps = $props();
+</script>
+
+<!-- The slot is the animated grid; its single bare child collapses via min-height 0. Consumer
+     classes (padding included) go one level deeper — padding on the grid container or the
+     collapsing child would floor the closed track at the padding height. -->
+<div data-slot="collapsible-content" bind:this={ref}>
+	<div>
+		<div {...restProps}>
+			{@render children?.()}
+		</div>
+	</div>
+</div>

package/src/lib/components/collapsible/components/collapsible-trigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { CollapsibleTriggerProps } from '../types.js';
+
+	let { class: className, ref = $bindable(null), children, ...restProps }: CollapsibleTriggerProps = $props();
+</script>
+
+<summary
+	{...restProps}
+	data-slot="collapsible-trigger"
+	class={join('cursor-pointer list-none marker:hidden', className)}
+	bind:this={ref}>
+	{@render children?.()}
+</summary>