@torpor/ui 0.2.1 → 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.1",
+  "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",
@@ -41,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"
@@ -58,12 +65,12 @@
       "import": "./dist/TabGroup/index.js"
     },
     "./icons": {
-      "types": "./dist/icons.d.ts",
-      "import": "./dist/icons.js"
+      "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": {
@@ -73,8 +80,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@torpor/view": "^0.3.2",
-    "@torpor/unplugin": "^0.2.0"
+    "@torpor/view": "^0.4.0",
+    "@torpor/unplugin": "^0.2.1"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
@@ -82,16 +89,16 @@
     "@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": {

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

@@ -34,11 +34,18 @@ interface AccordionProps {
  * </Accordion>
  * ```
  */
-export default function Accordion($props: AccordionProps) {
-	$props ??= $watch({ type: "single", value: "" });
+export default function Accordion($props: AccordionProps | undefined) {
+	let type = $props?.type ?? "single";
 
-	$props.type ||= "single";
-	$props.value ||= $props.type === "single" ? "" : [];
+	let $state = $watch({
+		value: $props?.value ?? (type === "single" ? "" : [] as string[])
+	});
+
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
 
 	let itemStates: ItemState[] = [];
 
@@ -56,13 +63,13 @@ export default function Accordion($props: AccordionProps) {
 
 	$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;
 				}
@@ -81,22 +88,22 @@ export default function Accordion($props: AccordionProps) {
 		}
 
 		// Set the value
-		$props.value = newValue;
+		$state.value = newValue;
 	})
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props.disabled === true);
+		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) {
-			ev(value!);
+			ev(value);
 		}
 	});
 
@@ -112,21 +119,21 @@ export default function Accordion($props: AccordionProps) {
 		}
 
 		// 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 === true
+		itemState.parentDisabled = $props?.disabled === true
 
 		// Add the item's state to the array
 		itemStates.splice(itemState.index, 0, itemState);
@@ -143,13 +150,13 @@ export default function Accordion($props: AccordionProps) {
 	}
 
 	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;
 					}
 				}
@@ -167,7 +174,7 @@ export default function Accordion($props: AccordionProps) {
 						newValue.push(item.value);
 					}
 				}
-				$props.value = newValue.sort();
+				$state.value = newValue.sort();
 				break;
 			}
 		}
@@ -210,8 +217,8 @@ export default function Accordion($props: AccordionProps) {
 
 	@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

@@ -13,9 +13,8 @@ interface AccordionContentProps {
 /**
  * Content for an AccordionItem, which can be revealed or hidden by an associated AccordionTrigger.
  */
-export default function AccordionContent($props: AccordionContentProps) {
-	$props ??= $watch({});
-	$props.id ||= getId();
+export default function AccordionContent($props: AccordionContentProps | undefined) {
+	let defaultId = getId();
 
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
@@ -24,15 +23,15 @@ export default function AccordionContent($props: AccordionContentProps) {
 	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-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.expanded) {

package/src/Accordion/AccordionHeader.torp

@@ -20,9 +20,7 @@ interface AccordionHeaderProps {
  * </AccordionHeader>
  * ```
  */
-export default function AccordionHeader($props: AccordionHeaderProps) {
-	$props ??= $watch({});
-
+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");
@@ -32,9 +30,9 @@ export default function AccordionHeader($props: AccordionHeaderProps) {
 	@render {
 		@// TODO: $props.as
 		<h4
-			{$props.id}
-			class={`torp-accordion-header ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
+			{$props?.id}
+			class={`torp-accordion-header ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />

package/src/Accordion/AccordionItem.torp

@@ -29,20 +29,16 @@ interface AccordionItemProps {
  * </AccordionItem>
  * ```
  */
-export default function AccordionItem($props: AccordionItemProps) {
-	$props ??= $watch({});
-
+export default function AccordionItem($props: AccordionItemProps | undefined) {
 	let $state: ItemState = $watch({
 		index: -1,
 		value: "",
 		expanded: false,
 		headerId: "",
 		contentId: "",
-		disabled: $props.disabled,
+		disabled: $props?.disabled ?? false,
 		parentDisabled: false,
-		get dataState() {
-			return this.expanded ? "open" : "closed";
-		},
+		setFocused
 	})
 
 	// Get stuff out of the AccordionContext
@@ -60,7 +56,7 @@ export default function AccordionItem($props: AccordionItemProps) {
 	$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(() => {
@@ -72,7 +68,7 @@ export default function AccordionItem($props: AccordionItemProps) {
 	// 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;
@@ -81,11 +77,18 @@ export default function AccordionItem($props: AccordionItemProps) {
 		}
 	});
 
+	// 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}
+			{$props?.id}
+			class={`torp-accordion-item ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />

package/src/Accordion/AccordionTrigger.torp

@@ -11,9 +11,8 @@ interface AccordionTriggerProps {
 /**
  * A header button for an AccordionItem, which can be used to reveal or hide an associated AccordionContent.
  */
-export default function AccordionTrigger($props: AccordionTriggerProps) {
-	$props ??= $watch({});
-	$props.id ||= getId();
+export default function AccordionTrigger($props: AccordionTriggerProps | undefined) {
+	let defaultId = getId();
 
 	let button: HTMLButtonElement;
 
@@ -25,7 +24,7 @@ export default function AccordionTrigger($props: AccordionTriggerProps) {
 	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;
@@ -49,13 +48,13 @@ export default function AccordionTrigger($props: AccordionTriggerProps) {
 	@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 ? "true" : undefined}
 			aria-controls={$state.contentId}
-			data-state={$state.dataState}
+			data-state={$state.expanded ? "open" : "closed"}
 			data-disabled={$state.disabled ? "true" : undefined}
 			&ref={button}
 			onclick={handleClick}

package/src/Accordion/AccordionTypes.ts

@@ -13,12 +13,14 @@ export interface AccordionContext {
 }
 
 export interface AccordionItemContext {
-	/** Called when an AccordionItem is toggled */
+	/** Raised when an AccordionItem is toggled */
 	toggleItem: (value: string) => void;
-	/** Called when an AccordionHeader receives a keyboard event */
+	/** Raised when an AccordionHeader receives a keyboard event */
 	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
 	/** The reactive state for an AccordionItem */
 	state: ItemState;
+	/** Called in an AccordionItem when its header needs to be focused */
+	setHeaderFocused?: () => void;
 }
 
 export interface ItemState {
@@ -29,7 +31,6 @@ export interface ItemState {
 	contentId: string;
 	disabled: boolean;
 	parentDisabled: boolean;
-	dataState: "open" | "closed";
 	/** Called in the Accordion when a header needs to be focused */
 	setFocused: () => void;
 }

package/src/Breadcrumb/Breadcrumb.torp

@@ -18,23 +18,22 @@ interface BreadcrumbProps {
  *
  * ```
  * <Breadcrumb>
- *     <BreadcrumbItem />
- *     <BreadcrumbSeparator /> (optional)
- *     <BreadcrumbItem />
- * 	...
+ * 	<BreadcrumbItem />
+ * 	<BreadcrumbSeparator /> (optional)
+ * 	<BreadcrumbItem>
+ * 		...
+ * 	</BreadcrumbItem>
  * </Breadcrumb>
  * ```
  *
  * You can separate BreadcrumbItems using BreadcrumbSeparators or by using CSS.
  */
-export default function Breadcrumb($props: BreadcrumbProps) {
-	$props ??= $watch({});
-
+export default function Breadcrumb($props: BreadcrumbProps | undefined) {
 	@render {
 		<nav
-			{$props.id}
-			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
-			aria-label={$props.ariaLabel}
+			{$props?.id}
+			class={`torp-breadcrumb ${$props?.class ?? ""}`.trim()}
+			aria-label={$props?.ariaLabel}
 		>
 			<slot />
 		</nav>

package/src/Breadcrumb/BreadcrumbItem.torp

@@ -12,15 +12,13 @@ interface BreadcrumbItemProps {
  * An item in a breadcrumb, containing a link to one of the parent pages of the
  * current page (or the current page).
  */
-export default function BreadcrumbItem($props: BreadcrumbItemProps) {
-	$props ??= $watch({});
-
+export default function BreadcrumbItem($props: BreadcrumbItemProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
-			aria-current={$props.current ? "page" : undefined}
-			data-current={$props.current ? "current" : undefined}
+			{$props?.id}
+			class={`torp-breadcrumb ${$props?.class ?? ""}`.trim()}
+			aria-current={$props?.current ? "page" : undefined}
+			data-current={$props?.current ? "current" : undefined}
 		>
 			<slot />
 		</div>

package/src/Breadcrumb/BreadcrumbSeparator.torp

@@ -10,13 +10,11 @@ interface BreadcrumbSeparatorProps {
  * A separator between links in a Breadcrumb component. It is hidden from
  * screen readers.
  */
-export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps) {
-	$props ??= $watch({});
-
+export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps | undefined) {
 	@render {
 		<div
-			{$props.id}
-			class={`torp-breadcrumb-separator ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-breadcrumb-separator ${$props?.class ?? ""}`.trim()}
 			aria-hidden="true"
 		>
 			<slot />