@torpor/ui 0.3.7 → 1.0.0

package/dist/Splitter/index.d.ts

@@ -0,0 +1,103 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface SplitterProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The orientation of the splitter (default horizontal) */
+	orientation?: "horizontal" | "vertical";
+	/** The percentage of the container taken up by the primary (first) pane */
+	value?: Bindable<number>;
+	/** The minimum percentage for the primary pane (default 0) */
+	min?: number;
+	/** The maximum percentage for the primary pane (default 100) */
+	max?: number;
+	/** The percentage by which keyboard interaction changes the value (default 1) */
+	step?: number;
+	/** If set to true, the user cannot interact with this splitter */
+	disabled?: boolean;
+	/** Raised when the value has changed */
+	onchange?: (value: number) => void;
+}
+
+/**
+ * Two resizable panes with a separator between them, which the user can drag
+ * or move with the keyboard to resize the panes.
+ *
+ * See [the WAI ARIA guidelines for Window Splitters](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
+ *
+ * The structure of a Splitter is:
+ *
+ * ```
+ * <Splitter>
+ * 	<SplitterPane>...</SplitterPane>
+ * 	<SplitterHandle ariaLabel="Resize" />
+ * 	<SplitterPane>...</SplitterPane>
+ * </Splitter>
+ * ```
+ */
+declare function Splitter(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SplitterProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface SplitterHandleProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An accessible name for the separator */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this handle */
+	disabled?: boolean;
+}
+
+/**
+ * The separator in a Splitter that a user can drag, or move with the
+ * keyboard, to resize the panes on either side of it.
+ *
+ * See [the WAI ARIA guidelines for Window Splitters](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
+ */
+declare function SplitterHandle(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SplitterHandleProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface SplitterPaneProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * A pane in a Splitter. When there is more than one pane, the first pane is
+ * sized to the splitter's value and the others share what's left.
+ */
+declare function SplitterPane(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: SplitterPaneProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Splitter, SplitterHandle, SplitterPane };

package/dist/Splitter/index.js

@@ -0,0 +1,4 @@
+import Splitter from "./Splitter.torp";
+import SplitterHandle from "./SplitterHandle.torp";
+import SplitterPane from "./SplitterPane.torp";
+export { Splitter, SplitterHandle, SplitterPane };

package/dist/Stepper/Stepper.torp

@@ -0,0 +1,146 @@
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import $handle from "../utils/$handle";
+import { type StepperContext, StepperContextName } from "./StepperTypes";
+
+interface StepperProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The index of the current step */
+	value?: Bindable<number>;
+	/** Whether steps can only be visited in order, with completed ones revisitable (default true) */
+	linear?: boolean;
+	/** An accessible label for the steps */
+	ariaLabel?: string;
+	/** Raised when the current step has changed */
+	onchange?: (index: number) => void;
+	/** Raised when the user moves next from the last step */
+	oncomplete?: () => void;
+}
+
+/**
+ * A sequence of steps in a task, showing progress through them. Steps before
+ * the current one are complete, and can be revisited; the user moves between
+ * steps with the navigation controls.
+ *
+ * The structure of a Stepper is:
+ *
+ * ```
+ * <Stepper ariaLabel="Sign up">
+ * 	<StepperStep label="Account" />
+ * 	<StepperStep label="Profile" />
+ * 	<fill name="nav">
+ * 		<StepperPrevious />
+ * 		<StepperNext />
+ * 	</fill>
+ * </Stepper>
+ * ```
+ */
+export default function Stepper($props: StepperProps | undefined) {
+	let $state = $watch({
+		value: 0,
+		steps: [] as StepperStepStateLite[],
+	});
+
+	interface StepperStepStateLite {
+		index: number;
+	}
+
+	$bind($state, $props, "value");
+
+	// Set the context to pass down to steps and navigation controls
+	const context: StepperContext = {
+		registerStep,
+		removeStep,
+		getValue,
+		setValue,
+		next,
+		previous,
+		canNext,
+		canPrevious,
+		steps: () => $state.steps,
+		count: () => $state.steps.length,
+		linear: $props?.linear !== false,
+	};
+	$context[StepperContextName] = context;
+
+	// Dispatch the change event when the current step changes
+	$handle((first) => {
+		const value = getValue();
+		if (!first) $props?.onchange?.(value);
+	});
+
+	// The clamped index of the current step
+	function getValue(): number {
+		const last = Math.max(0, $state.steps.length - 1);
+		return Math.min(last, Math.max(0, $state.value));
+	}
+
+	function canNext(): boolean {
+		return getValue() < $state.steps.length - 1;
+	}
+
+	function canPrevious(): boolean {
+		return getValue() > 0;
+	}
+
+	function setValue(index: number) {
+		const last = Math.max(0, $state.steps.length - 1);
+		$state.value = Math.min(last, Math.max(0, index));
+	}
+
+	function next() {
+		if (canNext()) {
+			setValue(getValue() + 1);
+		} else {
+			$props?.oncomplete?.();
+		}
+	}
+
+	function previous() {
+		if (canPrevious()) {
+			setValue(getValue() - 1);
+		}
+	}
+
+	function registerStep(): StepperStepStateLite {
+		const state: StepperStepStateLite = $watch({ index: $state.steps.length });
+		$state.steps.push(state);
+		return state;
+	}
+
+	function removeStep(index: number) {
+		if (index >= 0 && index < $state.steps.length) {
+			$state.steps.splice(index, 1);
+		}
+		$state.steps.forEach((step, i) => (step.index = i));
+	}
+
+	@render {
+		<div {$props?.id} class={["torp-stepper", $props?.class]} {$props?.style}>
+			<ol class="torp-stepper-steps" aria-label={$props?.ariaLabel}>
+				<slot />
+			</ol>
+			<div class="torp-stepper-nav">
+				<slot name="nav" />
+			</div>
+		</div>
+	}
+
+	@style {
+		/* Headless: layout only, so the steps and navigation sit in rows. All
+		   appearance is up to the consuming theme */
+		.torp-stepper-steps {
+			display: flex;
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+		.torp-stepper-nav {
+			display: flex;
+		}
+	}
+}

package/dist/Stepper/StepperMarker.torp

@@ -0,0 +1,24 @@
+import Check from "../icons/Check.torp";
+
+interface StepperMarkerProps {
+	/** Whether the step this marker belongs to is complete */
+	complete: boolean;
+	/** The index of the step this marker belongs to */
+	index: number;
+}
+
+/**
+ * The marker for a Stepper step, which shows a check when the step is
+ * complete or its number otherwise.
+ */
+export default function StepperMarker($props: StepperMarkerProps) {
+	@render {
+		<span class="torp-stepper-marker" data-state={$props.complete ? "complete" : "incomplete"}>
+			@if ($props.complete) {
+				<Check />
+			} @else {
+				<span aria-hidden="true">{$props.index + 1}</span>
+			}
+		</span>
+	}
+}

package/dist/Stepper/StepperNext.torp

@@ -0,0 +1,44 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import ChevronRight from "../icons/ChevronRight.torp";
+import { type StepperContext, StepperContextName } from "./StepperTypes";
+
+interface StepperNextProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An ARIA label for the button, for screen readers when the button contains no text */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this button */
+	disabled?: boolean;
+}
+
+/**
+ * The button in a Stepper that a user can press to move to the next step,
+ * which raises the stepper's oncomplete event on the last step.
+ */
+export default function StepperNext($props: StepperNextProps | undefined) {
+	// Get stuff out of the Stepper context
+	const context = $context[StepperContextName] as StepperContext;
+	if (!context) {
+		throw new Error("StepperNext must be contained within a Stepper");
+	}
+
+	@render {
+		<button
+			{$props?.id}
+			class={["torp-stepper-next", $props?.class]}
+			{$props?.style}
+			type="button"
+			aria-label={$props?.ariaLabel ?? "Next step"}
+			disabled={$props?.disabled}
+			onclick={() => context.next()}
+		>
+			<slot>
+				<ChevronRight />
+			</slot>
+		</button>
+	}
+}

package/dist/Stepper/StepperPrevious.torp

@@ -0,0 +1,44 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import ChevronLeft from "../icons/ChevronLeft.torp";
+import { type StepperContext, StepperContextName } from "./StepperTypes";
+
+interface StepperPreviousProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An ARIA label for the button, for screen readers when the button contains no text */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this button */
+	disabled?: boolean;
+}
+
+/**
+ * The button in a Stepper that a user can press to move to the previous
+ * step.
+ */
+export default function StepperPrevious($props: StepperPreviousProps | undefined) {
+	// Get stuff out of the Stepper context
+	const context = $context[StepperContextName] as StepperContext;
+	if (!context) {
+		throw new Error("StepperPrevious must be contained within a Stepper");
+	}
+
+	@render {
+		<button
+			{$props?.id}
+			class={["torp-stepper-previous", $props?.class]}
+			{$props?.style}
+			type="button"
+			aria-label={$props?.ariaLabel ?? "Previous step"}
+			disabled={$props?.disabled || !context.canPrevious()}
+			onclick={() => context.previous()}
+		>
+			<slot>
+				<ChevronLeft />
+			</slot>
+		</button>
+	}
+}

package/dist/Stepper/StepperStep.torp

@@ -0,0 +1,90 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import StepperMarker from "./StepperMarker.torp";
+import { type StepperContext, StepperContextName } from "./StepperTypes";
+
+interface StepperStepProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** A label for the step, shown next to its marker */
+	label?: string;
+}
+
+/**
+ * A step in a Stepper, which is complete once the stepper has moved past it,
+ * and current when the stepper is on it.
+ */
+export default function StepperStep($props: StepperStepProps | undefined) {
+	// Get stuff out of the Stepper context
+	const context = $context[StepperContextName] as StepperContext;
+	if (!context) {
+		throw new Error("StepperStep must be contained within a Stepper");
+	}
+
+	// Register this step with the parent Stepper
+	let $state = context.registerStep();
+
+	$run(() => {
+		return () => {
+			context.removeStep($state.index);
+		};
+	});
+
+	function isComplete(): boolean {
+		return $state.index < context.getValue();
+	}
+
+	function isCurrent(): boolean {
+		return $state.index === context.getValue();
+	}
+
+	// Steps can always be revisited once complete; when the stepper is not
+	// linear, any step can be jumped to
+	function canVisit(): boolean {
+		return isComplete() || !context.linear;
+	}
+
+	function handleClick() {
+		if (canVisit()) {
+			context.setValue($state.index);
+		}
+	}
+
+	function stepLabel(): string {
+		return $props?.label ?? `Step ${$state.index + 1}`;
+	}
+
+	@render {
+		<li
+			{$props?.id}
+			class={["torp-stepper-step", $props?.class]}
+			{$props?.style}
+			aria-current={isCurrent() ? "step" : undefined}
+			data-state={isComplete() ? "complete" : isCurrent() ? "current" : "upcoming"}
+		>
+			@if (canVisit()) {
+				<button
+					type="button"
+					class="torp-stepper-step-button"
+					aria-label={`Go to ${stepLabel()}`}
+					onclick={handleClick}
+				>
+					<StepperMarker complete={isComplete()} index={$state.index} />
+					<slot>
+						<span>{stepLabel()}</span>
+					</slot>
+				</button>
+			} @else {
+				<span class="torp-stepper-step-label">
+					<StepperMarker complete={isComplete()} index={$state.index} />
+					<slot>
+						<span>{stepLabel()}</span>
+					</slot>
+				</span>
+			}
+		</li>
+	}
+}

package/dist/Stepper/StepperTypes.ts

@@ -0,0 +1,30 @@
+export const StepperContextName: unique symbol = Symbol.for("torp.Stepper");
+
+export interface StepperStepState {
+	/** The index of the step */
+	index: number;
+}
+
+export interface StepperContext {
+	/** Called from a step when it is added */
+	registerStep: () => StepperStepState;
+	/** Called from a step when it is removed */
+	removeStep: (index: number) => void;
+	/** The index of the current step */
+	getValue: () => number;
+	/** Moves to the step at the given index */
+	setValue: (index: number) => void;
+	/** Moves to the next step, or raises oncomplete on the last one */
+	next: () => void;
+	/** Moves to the previous step */
+	previous: () => void;
+	/** Whether the next / previous controls can move from the current step */
+	canNext: () => boolean;
+	canPrevious: () => boolean;
+	/** The reactive list of registered steps */
+	steps: () => StepperStepState[];
+	/** The number of registered steps */
+	count: () => number;
+	/** Whether steps can only be visited in order, with completed ones revisitable */
+	linear: boolean;
+}

package/dist/Stepper/index.d.ts

@@ -0,0 +1,149 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface StepperProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The index of the current step */
+	value?: Bindable<number>;
+	/** Whether steps can only be visited in order, with completed ones revisitable (default true) */
+	linear?: boolean;
+	/** An accessible label for the steps */
+	ariaLabel?: string;
+	/** Raised when the current step has changed */
+	onchange?: (index: number) => void;
+	/** Raised when the user moves next from the last step */
+	oncomplete?: () => void;
+}
+
+/**
+ * A sequence of steps in a task, showing progress through them. Steps before
+ * the current one are complete, and can be revisited; the user moves between
+ * steps with the navigation controls.
+ *
+ * The structure of a Stepper is:
+ *
+ * ```
+ * <Stepper ariaLabel="Sign up">
+ * 	<StepperStep label="Account" />
+ * 	<StepperStep label="Profile" />
+ * 	<fill name="nav">
+ * 		<StepperPrevious />
+ * 		<StepperNext />
+ * 	</fill>
+ * </Stepper>
+ * ```
+ */
+declare function Stepper(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: StepperProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface StepperMarkerProps {
+	/** Whether the step this marker belongs to is complete */
+	complete: boolean;
+	/** The index of the step this marker belongs to */
+	index: number;
+}
+
+/**
+ * The marker for a Stepper step, which shows a check when the step is
+ * complete or its number otherwise.
+ */
+declare function StepperMarker(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: StepperMarkerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface StepperNextProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An ARIA label for the button, for screen readers when the button contains no text */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this button */
+	disabled?: boolean;
+}
+
+/**
+ * The button in a Stepper that a user can press to move to the next step,
+ * which raises the stepper's oncomplete event on the last step.
+ */
+declare function StepperNext(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: StepperNextProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface StepperPreviousProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An ARIA label for the button, for screen readers when the button contains no text */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this button */
+	disabled?: boolean;
+}
+
+/**
+ * The button in a Stepper that a user can press to move to the previous
+ * step.
+ */
+declare function StepperPrevious(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: StepperPreviousProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface StepperStepProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** A label for the step, shown next to its marker */
+	label?: string;
+}
+
+/**
+ * A step in a Stepper, which is complete once the stepper has moved past it,
+ * and current when the stepper is on it.
+ */
+declare function StepperStep(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: StepperStepProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Stepper, StepperMarker, StepperNext, StepperPrevious, StepperStep };

package/dist/Stepper/index.js

@@ -0,0 +1,6 @@
+import Stepper from "./Stepper.torp";
+import StepperMarker from "./StepperMarker.torp";
+import StepperNext from "./StepperNext.torp";
+import StepperPrevious from "./StepperPrevious.torp";
+import StepperStep from "./StepperStep.torp";
+export { Stepper, StepperMarker, StepperNext, StepperPrevious, StepperStep };

package/dist/TabGroup/TabContent.torp

@@ -1,18 +1,18 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
+import { type TabGroupContext, TabGroupContextName } from "./TabGroupTypes";
 
 interface TabContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The index of this item */
-	index?: number,
+	index?: number;
 	/** The value for this item */
-	value?: string,
+	value?: string;
 }
 
 /**
@@ -36,10 +36,10 @@ export default function TabContent($props: TabContentProps | undefined) {
 			class={["torp-tab-content", $props?.class]}
 			{$props?.style}
 			role="tabpanel"
+			tabindex="0"
 			aria-labelledby={$state.headerId}
 			data-orientation={context.orientation}
 			data-state={$state.active ? "active" : "inactive"}
-			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.active) {
 				<slot />