@torpor/ui 0.2.0 → 0.3.0

package/dist/mount/clickPopover.ts

@@ -0,0 +1,51 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//
+//interface ClickPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//}
+//
+///**
+// * A mount directive for showing a popover when an element is clicked.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component and any props
+// */
+//export default function clickPopover(node: HTMLElement, options: ClickPopoverOptions) {
+//	const { popover, props } = options;
+//
+//	// Add a click event handler to the node
+//	node.addEventListener("click", handleClick);
+//
+//	function handleClick(e: MouseEvent) {
+//		e.preventDefault();
+//		show();
+//	}
+//
+//	let div: HTMLDivElement;
+//
+//	function show() {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		showPopover(popover, node, props, div);
+//	}
+//
+//	return {
+//		destroy(): void {
+//			// Remove the event listener from the node on destroy
+//			node.removeEventListener("click", handleClick);
+//
+//			// Remove the div we added
+//			// TODO: Should we do this in more places?
+//			if (div) {
+//				document.body.removeChild(div);
+//			}
+//		},
+//	};
+//}
+//

package/dist/mount/contextPopover.ts

@@ -0,0 +1,51 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//
+//interface ContextPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//}
+//
+///**
+// * A mount directive for showing a popover when the user opens an element's context menu.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component and any props
+// */
+//export default function contextPopover(node: HTMLElement, options: ContextPopoverOptions) {
+//	const { popover, props } = options;
+//
+//	// Add a contextmenu event handler to the node
+//	node.addEventListener("contextmenu", handleClick);
+//
+//	function handleClick(e: MouseEvent) {
+//		e.preventDefault();
+//		show();
+//	}
+//
+//	let div: HTMLDivElement;
+//
+//	function show() {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		showPopover(popover, node, props, div);
+//	}
+//
+//	return {
+//		destroy(): void {
+//			// Remove the event listener from the node on destroy
+//			node.removeEventListener("contextmenu", handleClick);
+//
+//			// Remove the div we added
+//			// TODO: Should we do this in more places?
+//			if (div) {
+//				document.body.removeChild(div);
+//			}
+//		},
+//	};
+//}
+//

package/dist/mount/hoverPopover.ts

@@ -0,0 +1,58 @@
+//import type { Component } from "@torpor/view";
+//import showPopover from "../Modal/showModal";
+//import hoverTrigger from "./hoverTrigger";
+//
+//interface HoverPopoverOptions {
+//	popover: Component;
+//	props?: Record<PropertyKey, any>;
+//	hoverDelay?: number;
+//	touchDelay?: number;
+//}
+//
+///**
+// * A mount directive for showing a popover when an element is hovered.
+// * @param node The element to show the popover for
+// * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch
+// */
+//export default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {
+//	const { popover, props, hoverDelay, touchDelay } = options;
+//
+//	let div: HTMLDivElement | undefined;
+//
+//	function onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {
+//		// Show the popover in a div
+//		if (div) {
+//			document.body.removeChild(div);
+//		}
+//		div = document.createElement("div");
+//		document.body.appendChild(div);
+//
+//		// Get the position relative to the element, so we can reposition on scroll
+//		const rect = node.getBoundingClientRect();
+//		let position: { x: number; y: number };
+//		if (e.type.startsWith("mouse")) {
+//			const me = e as MouseEvent;
+//			position = { x: me.clientX - rect.left, y: me.clientY - rect.top };
+//		} else {
+//			const te = e as TouchEvent;
+//			position = {
+//				x: te.touches[0].clientX - rect.left,
+//				y: te.touches[0].clientY - rect.top,
+//			};
+//		}
+//		const allProps = Object.assign({}, props, { anchor: node, position });
+//
+//		showPopover(popover, node, allProps, div);
+//	}
+//
+//	function onExit() {
+//		// Remove the div
+//		if (div) {
+//			document.body.removeChild(div);
+//			div = undefined;
+//		}
+//	}
+//
+//	return hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });
+//}
+//

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Accessible, unstyled components for use in your Torpor front-end",
   "type": "module",
   "exports": {
@@ -14,8 +14,11 @@
     },
     "./Calendar": {
       "types": "./dist/Calendar/index.d.ts",
-      "import": "./dist/Calendar/index.js",
-      "require": "./dist/Calendar/index.cjs"
+      "import": "./dist/Calendar/index.js"
+    },
+    "./Contextual": {
+      "types": "./dist/Contextual/index.d.ts",
+      "import": "./dist/Contextual/index.js"
     },
     "./Dialog": {
       "types": "./dist/Dialog/index.d.ts",
@@ -29,6 +32,10 @@
       "types": "./dist/Drawer/index.d.ts",
       "import": "./dist/Drawer/index.js"
     },
+    "./Form": {
+      "types": "./dist/Form/index.d.ts",
+      "import": "./dist/Form/index.js"
+    },
     "./Menu": {
       "types": "./dist/Menu/index.d.ts",
       "import": "./dist/Menu/index.js"
@@ -37,6 +44,10 @@
       "types": "./dist/MenuBar/index.d.ts",
       "import": "./dist/MenuBar/index.js"
     },
+    "./Modal": {
+      "types": "./dist/Modal/index.d.ts",
+      "import": "./dist/Modal/index.js"
+    },
     "./NavMenu": {
       "types": "./dist/NavMenu/index.d.ts",
       "import": "./dist/NavMenu/index.js"
@@ -53,9 +64,13 @@
       "types": "./dist/TabGroup/index.d.ts",
       "import": "./dist/TabGroup/index.js"
     },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    },
     "./motion": {
-      "types": "./dist/motion.d.ts",
-      "import": "./dist/motion.js"
+      "types": "./dist/motion/index.d.ts",
+      "import": "./dist/motion/index.js"
     }
   },
   "publishConfig": {
@@ -65,8 +80,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@torpor/unplugin": "^0.2.0",
-    "@torpor/view": "^0.3.0"
+    "@torpor/view": "^0.4.0",
+    "@torpor/unplugin": "^0.2.1"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -74,16 +89,17 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jsdom": "^27.0.0",
-    "@types/node": "^24.6.2",
-    "@typescript/native-preview": "7.0.0-dev.20251005.1",
+    "@types/node": "^24.9.2",
+    "@typescript/native-preview": "7.0.0-dev.20251027.1",
     "chalk": "^5.6.2",
     "esno": "^4.8.0",
     "fast-glob": "^3.3.3",
-    "jsdom": "^27.0.0",
-    "oxlint-tsgolint": "^0.2.0",
+    "jsdom": "^27.0.1",
+    "oxlint-tsgolint": "^0.3.0",
     "tsup": "^8.5.0",
     "typescript": "^5.9.3",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.4",
+    "zod": "^4.1.12"
   },
   "scripts": {
     "build": "tsgo --noEmit && tsup",

package/scripts/postbuild.ts

@@ -25,6 +25,12 @@ async function run() {
 		lstatSync(join(distFolder, f)).isDirectory(),
 	);
 	for (const component of componentFolders) {
+		// If it's an old folder, delete it
+		if (!existsSync(join(sourceFolder, component))) {
+			await fs.rmdir(join(distFolder, component));
+			continue;
+		}
+
 		console.log(chalk.cyan.inverse(" POST "), `Tidy ${component}`);
 
 		// Loop through files and change declarations to imports so they get
@@ -85,9 +91,13 @@ async function run() {
 		await fs.writeFile(join(distFolder, component, "index.d.ts"), dts);
 	}
 
-	// Move all utils/*.ts files into the dest folder
+	// Move all `utils` and `mount` TS files into the dest folder
 	await moveUtils(distFolder, "utils");
 	await moveUtils(distFolder, "mount");
+
+	// HACK: Move index.d.ts into the motion folder. This works because it's the
+	// only d.ts file we create (for now...?)
+	await fs.copyFile(join(distFolder, "index.d.ts"), join(distFolder, "motion", "index.d.ts"));
 }
 
 async function moveUtils(distFolder: string, folderName: string) {

package/src/Accordion/Accordion.torp

@@ -1,5 +1,20 @@
 import { AccordionContextName, type AccordionContext, type ItemState } from "./AccordionTypes";
 
+interface AccordionProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
+	type?: "single" | "multiple",
+	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
+	value?: string | string[],
+	/** If set to true, the user cannot interact with any items in the Accordion */
+	disabled?: boolean,
+	/** Raised when the expanded item(s) have changed */
+	onchange?: (value: string | string[]) => void,
+}
+
 /**
  * A vertically stacked set of interactive headings that enable users to reveal
  * or hide associated sections of content.
@@ -18,15 +33,19 @@ import { AccordionContextName, type AccordionContext, type ItemState } from "./A
  * 	</AccordionItem>
  * </Accordion>
  * ```
- *
- * @prop {"single" | "multiple"} type -- Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time
- * @prop {string | string[]} value -- The value of the expanded AccordionItem, or an array of values if the type is "multiple"
- * @prop {boolean} disabled -- If set to true, the user cannot interact with any items in the Accordion
- * @prop {(value: string | string[]) => void} [onchange] -- Raised when the expanded item(s) have changed
  */
-export default function Accordion($props: any) {
-	$props.type ||= "single";
-	$props.value ||= $props.type === "single" ? "" : [];
+export default function Accordion($props: AccordionProps | undefined) {
+	let type = $props?.type ?? "single";
+
+	let $state = $watch({
+		value: $props?.value ?? (type === "single" ? "" : [] as string[])
+	});
+
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
 
 	let itemStates: ItemState[] = [];
 
@@ -44,13 +63,13 @@ export default function Accordion($props: any) {
 
 	$run(() => {
 		// HACK: This should probably be done with setters?
-		let newValue = $props.value;
+		let newValue = $state.value;
 
 		// Get the value
-		switch ($props.type) {
+		switch (type) {
 			case "single": {
 				// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-				newValue = newValue?.toString();
+				newValue = newValue.toString();
 				for (let item of itemStates) {
 					item.expanded = item.value === newValue;
 				}
@@ -69,18 +88,18 @@ export default function Accordion($props: any) {
 		}
 
 		// Set the value
-		$props.value = newValue;
+		$state.value = newValue;
 	})
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props.disabled);
+		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
 	let firstChange = true;
 	$run(() => {
-		const ev = $props.onchange;
-		const value = $props.value;
+		const ev = $props?.onchange;
+		const value = $state.value;
 		if (firstChange) {
 			firstChange = false;
 		} else if (ev) {
@@ -100,21 +119,21 @@ export default function Accordion($props: any) {
 		}
 
 		// If we have a value, set whether the item should be expanded
-		if ($props.value) {
-			switch ($props.type) {
+		if ($state.value) {
+			switch (type) {
 				case "single": {
-					itemState.expanded = $props.value === itemState.value;
+					itemState.expanded = $state.value === itemState.value;
 					break;
 				}
 				case "multiple": {
-					itemState.expanded = $props.value.includes(itemState.value);
+					itemState.expanded = $state.value.includes(itemState.value);
 					break;
 				}
 			}
 		}
 
 		// Set whether the Accordion itself is disabled
-		itemState.parentDisabled = $props.disabled
+		itemState.parentDisabled = $props?.disabled === true
 
 		// Add the item's state to the array
 		itemStates.splice(itemState.index, 0, itemState);
@@ -131,13 +150,13 @@ export default function Accordion($props: any) {
 	}
 
 	function toggleItem(toggleValue: string) {
-		switch ($props.type) {
+		switch (type) {
 			case "single": {
 				for (let item of itemStates) {
 					// The item is expanded if it has the supplied value (i.e. if it was clicked) and if it
 					// wasn't already expanded (i.e. we collapse it if it was expanded and clicked)
 					if (item.value === toggleValue) {
-						$props.value = item.expanded ? "" : item.value;
+						$state.value = item.expanded ? "" : item.value;
 						break;
 					}
 				}
@@ -155,7 +174,7 @@ export default function Accordion($props: any) {
 						newValue.push(item.value);
 					}
 				}
-				$props.value = newValue.sort();
+				$state.value = newValue.sort();
 				break;
 			}
 		}
@@ -198,8 +217,8 @@ export default function Accordion($props: any) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-accordion ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/src/Accordion/AccordionContent.torp

@@ -1,32 +1,38 @@
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
+interface AccordionContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this content should act as a region. Set this when the content contains heading elements or a nested Accordion */
+	ariaRegion?: boolean,
+}
+
 /**
  * Content for an AccordionItem, which can be revealed or hidden by an associated AccordionTrigger.
- *
- * @prop {string} [id] -- An ID for the AccordionContent's div container
- * @prop {boolean} [ariaRegion] -- Whether this content should act as a region. Set this when the content contains heading elements or a nested Accordion
  */
-export default function AccordionContent($props: any) {
-	$props.id ||= getId();
+export default function AccordionContent($props: AccordionContentProps | undefined) {
+	let defaultId = getId();
 
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
 		throw new Error("AccordionContent must be contained within an AccordionItem");
 	}
-	let $state = $context[AccordionItemContextName].state
+	let $state = context.state
 
 	// Set the content ID so that it can be used with aria-controls in AccordionTrigger
-	$state.contentId = $props.id;
+	$state.contentId = $props?.id ?? defaultId;
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion-content ${$props.class ?? ""}`.trim()}
-			role={$props.ariaRegion ? "region" : undefined}
+			id={$props?.id ?? defaultId}
+			class={`torp-accordion-content ${$props?.class ?? ""}`.trim()}
+			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
-			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-state={$state.expanded ? "open" : "closed"}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.expanded) {
 				<slot />

package/src/Accordion/AccordionHeader.torp

@@ -1,5 +1,14 @@
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
+interface AccordionHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The type of HTML header to use */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+}
+
 /**
  * The header for an AccordionItem, which contains the AccordionTrigger.
  *
@@ -10,23 +19,21 @@ import { AccordionItemContextName, type AccordionItemContext } from "./Accordion
  * 	<AccordionTrigger />
  * </AccordionHeader>
  * ```
- *
- * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
-export default function AccordionHeader($props: any) {
+export default function AccordionHeader($props: AccordionHeaderProps | undefined) {
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
 		throw new Error("AccordionHeader must be contained within an AccordionItem");
 	}
-	let $state = $context[AccordionItemContextName].state
+	let $state = context.state
 
 	@render {
 		@// TODO: $props.as
 		<h4
-			{$props.id}
-			class={`torp-accordion-header ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			{$props?.id}
+			class={`torp-accordion-header ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
 		</h4>

package/src/Accordion/AccordionItem.torp

@@ -1,4 +1,19 @@
-import { AccordionContextName, AccordionItemContextName, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
+import { AccordionContextName, AccordionItemContextName, type ItemState, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
+
+interface AccordionItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
+	index?: number,
+	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
+	value?: string,
+	/** If set to true, the user cannot interact with this AccordionItem */
+	disabled?: boolean,
+	/** Raised when this item is opened or closed */
+	ontoggle?: (open: boolean) => void,
+}
 
 /**
  * An item in an Accordion, which must consist of an AccordionTrigger and an AccordionContent.
@@ -13,22 +28,17 @@ import { AccordionContextName, AccordionItemContextName, type AccordionContext,
  * 	<AccordionContent />
  * </AccordionItem>
  * ```
- *
- * @prop {number} [index] -- The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically
- * @prop {string} [value] -- A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index
- * @prop {boolean} [disabled] -- If set to true, the user cannot interact with this AccordionItem
- * @prop {(boolean) => void} [ontoggle] -- Raised when this item is opened or closed
  */
-export default function AccordionItem($props: any) {
+export default function AccordionItem($props: AccordionItemProps | undefined) {
 	let $state: ItemState = $watch({
 		index: -1,
 		value: "",
 		expanded: false,
-		disabled: $props.disabled,
+		headerId: "",
+		contentId: "",
+		disabled: $props?.disabled ?? false,
 		parentDisabled: false,
-		get dataState() {
-			return this.expanded ? "open" : "closed";
-		},
+		setFocused
 	})
 
 	// Get stuff out of the AccordionContext
@@ -46,7 +56,7 @@ export default function AccordionItem($props: any) {
 	$context[AccordionItemContextName] = itemContext;
 
 	// Register this item with the parent Accordion, which will handle toggling expanded for all items
-	context.registerItem($state);
+	context.registerItem($state, setFocused);
 
 	// Remove the item from the parent Accordion when this item is destroyed
 	$run(() => {
@@ -58,7 +68,7 @@ export default function AccordionItem($props: any) {
 	// Dispatch the toggle event when the value of expanded changes
 	let firstToggle = true;
 	$run(() => {
-		const ev = $props.ontoggle;
+		const ev = $props?.ontoggle;
 		const expanded = $state.expanded;
 		if (firstToggle) {
 			firstToggle = false;
@@ -67,12 +77,19 @@ export default function AccordionItem($props: any) {
 		}
 	});
 
+	// Called from the parent Accordion; pass the focus command along to the AccordionButton
+	function setFocused() {
+		if (itemContext.setHeaderFocused) {
+			itemContext.setHeaderFocused();
+		}
+	}
+
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion-item ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			{$props?.id}
+			class={`torp-accordion-item ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
 		</div>

package/src/Accordion/AccordionTrigger.torp

@@ -1,23 +1,30 @@
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
+interface AccordionTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * A header button for an AccordionItem, which can be used to reveal or hide an associated AccordionContent.
  */
-export default function AccordionTrigger() {
-	let button: HTMLButtonElement;
+export default function AccordionTrigger($props: AccordionTriggerProps | undefined) {
+	let defaultId = getId();
 
-	$props.id ||= getId();
+	let button: HTMLButtonElement;
 
 	// Get stuff out of the AccordionItemContext
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
 		throw new Error("AccordionTrigger must be contained within an AccordionItem");
 	}
-	let $state = $context[AccordionItemContextName].state;
+	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in AccordionContent
-	$state.headerId = $props.id;
+	$state.headerId = $props?.id ?? defaultId;
 
 	// Let the item know how to set the button's focus
 	$state.setFocused = setFocused;
@@ -41,14 +48,14 @@ export default function AccordionTrigger() {
 	@render {
 		<button
 			type="button"
-			{$props.id}
-			class={`torp-accordion-trigger ${$props.class ?? ""}`.trim()}
+			id={$props?.id ?? defaultId}
+			class={`torp-accordion-trigger ${$props?.class ?? ""}`.trim()}
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-expanded={$state.expanded.toString()}
-			aria-disabled={$state.disabled}
+			aria-disabled={$state.disabled ? "true" : undefined}
 			aria-controls={$state.contentId}
-			data-state={$state.dataState}
-			data-disabled={$state.disabled}
+			data-state={$state.expanded ? "open" : "closed"}
+			data-disabled={$state.disabled ? "true" : undefined}
 			&ref={button}
 			onclick={handleClick}
 			onkeydown={handleKey}