@torpor/ui 0.3.7 → 1.0.0

package/dist/utils/maskUtils.ts

@@ -0,0 +1,98 @@
+/**
+ * Masked input plumbing: masks are strings where token characters accept
+ * user input and everything else is a literal.
+ *
+ * - `9` -- digit (0-9)
+ * - `L` -- letter (a-z, case preserved)
+ * - `a` -- alphanumeric
+ * - `\x` -- the literal character x
+ */
+
+export interface MaskToken {
+	/** Literal characters render as-is; tokens accept input */
+	literal: boolean;
+	char: string;
+	pattern?: RegExp;
+}
+
+/** Splits a mask into literal/token parts */
+export function parseMask(mask: string): MaskToken[] {
+	const tokens: MaskToken[] = [];
+	for (let i = 0; i < mask.length; i++) {
+		const char = mask[i];
+		if (char === "\\" && i + 1 < mask.length) {
+			tokens.push({ literal: true, char: mask[i + 1] });
+			i++;
+			continue;
+		}
+		switch (char) {
+			case "9":
+				tokens.push({ literal: false, char, pattern: /[0-9]/ });
+				break;
+			case "L":
+				tokens.push({ literal: false, char, pattern: /[A-Za-z]/ });
+				break;
+			case "a":
+				tokens.push({ literal: false, char, pattern: /[A-Za-z0-9]/ });
+				break;
+			default:
+				tokens.push({ literal: true, char });
+		}
+	}
+	return tokens;
+}
+
+/** The characters a mask can hold, ignoring literals */
+export function tokenCount(tokens: MaskToken[]): number {
+	return tokens.filter((t) => !t.literal).length;
+}
+
+/**
+ * Walks user-entered text against the mask, keeping only characters that
+ * fit the remaining slots. Typing ahead of literals works because missing
+ * literals are skipped, so `5551234` formats like `(555) 123-4`.
+ */
+export function extractRaw(tokens: MaskToken[], text: string): string {
+	let result = "";
+	let ti = 0;
+
+	for (const ch of text) {
+		if (ti >= tokens.length) break;
+
+		// Skip forward to the first token this character satisfies
+		while (ti < tokens.length && tokens[ti].literal && tokens[ti].char !== ch) {
+			ti++;
+		}
+		const token = tokens[ti];
+		if (!token) break;
+
+		if (token.literal) {
+			// The user typed the literal itself
+			ti++;
+			continue;
+		}
+		if (!token.pattern!.test(ch)) continue;
+
+		result += ch;
+		ti++;
+	}
+	return result;
+}
+
+/** Builds the displayed text from raw input characters */
+export function formatMask(tokens: MaskToken[], raw: string): string {
+	let result = "";
+	let index = 0;
+	let lastFilledEnd = 0;
+
+	for (let i = 0; i < tokens.length && index < raw.length; i++) {
+		const token = tokens[i];
+		if (token.literal) {
+			result += token.char;
+			continue;
+		}
+		result += raw[index++];
+		lastFilledEnd = result.length;
+	}
+	return result.slice(0, lastFilledEnd);
+}

package/dist/utils/popoutContent.ts

@@ -0,0 +1,137 @@
+import { addDocumentEvent, removeDocumentEvent } from "./documentEvents";
+import getScrollParent from "./getScrollParent";
+import setPopoverPosition from "./setPopoverPosition";
+
+export interface PopoutContentOptions {
+	/** Resolves the element to position the content against */
+	getAnchor: () => HTMLElement | undefined;
+	/** Resolves the content element */
+	getContent: () => HTMLElement | undefined;
+	/** Closes the popout (e.g. by setting visible to false) */
+	close: (e: MouseEvent | KeyboardEvent) => void;
+	/** Where to show the content, relative to the anchor */
+	side?: "top" | "right" | "bottom" | "left";
+	/** How to align the content, relative to the anchor */
+	alignment?: "start" | "center" | "end";
+	/** Custom positioning, as an alternative to side/alignment */
+	position?: () => void;
+	/** Whether pressing Escape closes the popout */
+	closeOnEscape?: boolean;
+	/** Only close on Escape when the focus is inside the content */
+	escapeOnlyWhenFocused?: boolean;
+	/** Ignore clicks on the anchor element when closing on outside clicks */
+	ignoreAnchorClicks?: boolean;
+	/** Called after the content is shown, to set focus for accessibility */
+	focusFirstElement?: () => void;
+	/** Focus the anchor element after hiding */
+	refocusAnchorOnHide?: boolean;
+}
+
+/**
+ * Shared show/hide machinery for popout content components: outside click
+ * handling, Escape handling, repositioning on scroll/resize and focus
+ * management.
+ *
+ * HACK: Because the popout could be shown with a click, we need to wait for
+ * another mousedown before we close on click. Otherwise the click that opened
+ * the popout immediately bubbles to the document and closes it again.
+ */
+export function createPopoutContent(options: PopoutContentOptions): {
+	show: () => void;
+	hide: () => void;
+} {
+	let shown = false;
+	let closeOnClick = false;
+
+	function setPosition() {
+		const anchor = options.getAnchor();
+		const content = options.getContent();
+		if (!anchor || !content) return;
+
+		if (options.position) {
+			options.position();
+		} else {
+			setPopoverPosition(anchor, content, options.side ?? "bottom", options.alignment ?? "start");
+		}
+	}
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		const content = options.getContent();
+		const anchor = options.getAnchor();
+		if (!closeOnClick || !content || content.contains(e.target as HTMLElement)) {
+			return;
+		}
+		if (options.ignoreAnchorClicks && anchor?.contains(e.target as HTMLElement)) {
+			return;
+		}
+		e.preventDefault();
+		options.close(e);
+	}
+
+	function handleDocumentKeyDown(e: KeyboardEvent) {
+		if (e.key !== "Escape") return;
+		const content = options.getContent();
+		if (options.escapeOnlyWhenFocused && content && !content.contains(e.target as Node)) {
+			return;
+		}
+		e.preventDefault();
+		options.close(e);
+	}
+
+	function show() {
+		shown = true;
+
+		closeOnClick = false;
+		addDocumentEvent("mousedown", handleDocumentMouseDown);
+		addDocumentEvent("click", handleDocumentClick);
+		if (options.closeOnEscape) {
+			addDocumentEvent("keydown", handleDocumentKeyDown);
+		}
+
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		addEventListener("resize", setPosition);
+		const anchor = options.getAnchor();
+		if (anchor) {
+			getScrollParent(anchor).addEventListener("scroll", setPosition);
+		}
+
+		options.focusFirstElement?.();
+	}
+
+	function hide() {
+		if (!shown) return;
+		shown = false;
+
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
+		removeDocumentEvent("keydown", handleDocumentKeyDown);
+		removeEventListener("resize", setPosition);
+		const anchor = options.getAnchor();
+		if (anchor) {
+			getScrollParent(anchor).removeEventListener("scroll", setPosition);
+		}
+
+		// Focus the anchor element again, per the WAI guidelines, unless focus
+		// has already moved elsewhere (e.g. to an adjacent menubar item's menu).
+		// If the focused element was removed with the content, focus has fallen
+		// back to the body, and the anchor is focused again
+		if (options.refocusAnchorOnHide) {
+			const content = options.getContent();
+			if (
+				!content ||
+				content.contains(document.activeElement) ||
+				document.activeElement === document.body
+			) {
+				const el = options.getAnchor();
+				el?.focus?.();
+			}
+		}
+	}
+
+	return { show, hide };
+}

package/dist/utils/reorderList.ts

@@ -0,0 +1,52 @@
+/**
+ * Pure helpers for reorderable collections, used by list and tree drag &
+ * drop. Geometry-free on purpose: components measure their own slots with
+ * slotIndex and combine the result with these.
+ */
+
+/** Moves an item to a final index; out-of-range targets are clamped */
+export function moveItem<T>(items: T[], from: number, to: number): T[] {
+	const next = items.slice();
+	if (from < 0 || from >= next.length) return next;
+	const clamped = Math.min(next.length - 1, Math.max(0, to));
+	const [item] = next.splice(from, 1);
+	next.splice(clamped, 0, item);
+	return next;
+}
+
+/**
+ * Moves an item to sit at the slot `insertAt` occupied *before* the move --
+ * i.e. `insertAt` indexes into the original order, which is what pointer
+ * math produces (dropped before item N). Handles the index shift caused by
+ * removing the dragged element.
+ */
+export function moveToSlot<T>(items: T[], from: number, insertAt: number): T[] {
+	let to = insertAt;
+	if (from < insertAt) {
+		to = insertAt - 1;
+	}
+	return moveItem(items, from, to);
+}
+
+/**
+ * Finds which slot a pointer sits in along an axis: the index of the first
+ * element whose midpoint the point has passed (or elements.length when past
+ * all of them). `elements` must already be in display order.
+ *
+ * ```
+ * const insert = slotIndex([...list.children], "y", e.clientY);
+ * list.set(items => moveToSlot(items, dragFrom, insert));
+ * ```
+ */
+export function slotIndex(
+	elements: { getBoundingClientRect(): DOMRect }[],
+	axis: "x" | "y",
+	point: number,
+): number {
+	for (let i = 0; i < elements.length; i++) {
+		const rect = elements[i].getBoundingClientRect();
+		const mid = axis === "x" ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+		if (point < mid) return i;
+	}
+	return elements.length;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/ui",
-  "version": "0.3.7",
+  "version": "1.0.0",
   "description": "Accessible, unstyled components for use in your Torpor front-end",
   "type": "module",
   "exports": {
@@ -16,14 +16,42 @@
       "types": "./dist/Calendar/index.d.ts",
       "import": "./dist/Calendar/index.js"
     },
-    "./Chart": {
-      "types": "./dist/Chart/index.d.ts",
-      "import": "./dist/Chart/index.js"
+    "./Carousel": {
+      "types": "./dist/Carousel/index.d.ts",
+      "import": "./dist/Carousel/index.js"
+    },
+    "./Charts": {
+      "types": "./dist/Charts/index.d.ts",
+      "import": "./dist/Charts/index.js"
+    },
+    "./CommandPalette": {
+      "types": "./dist/CommandPalette/index.d.ts",
+      "import": "./dist/CommandPalette/index.js"
+    },
+    "./ColorPicker": {
+      "types": "./dist/ColorPicker/index.d.ts",
+      "import": "./dist/ColorPicker/index.js"
+    },
+    "./ComboBox": {
+      "types": "./dist/ComboBox/index.d.ts",
+      "import": "./dist/ComboBox/index.js"
     },
     "./Contextual": {
       "types": "./dist/Contextual/index.d.ts",
       "import": "./dist/Contextual/index.js"
     },
+    "./DataGrid": {
+      "types": "./dist/DataGrid/index.d.ts",
+      "import": "./dist/DataGrid/index.js"
+    },
+    "./DatePicker": {
+      "types": "./dist/DatePicker/index.d.ts",
+      "import": "./dist/DatePicker/index.js"
+    },
+    "./DateRangePicker": {
+      "types": "./dist/DateRangePicker/index.d.ts",
+      "import": "./dist/DateRangePicker/index.js"
+    },
     "./Dialog": {
       "types": "./dist/Dialog/index.d.ts",
       "import": "./dist/Dialog/index.js"
@@ -36,10 +64,18 @@
       "types": "./dist/Drawer/index.d.ts",
       "import": "./dist/Drawer/index.js"
     },
+    "./FocusGroup": {
+      "types": "./dist/FocusGroup/index.d.ts",
+      "import": "./dist/FocusGroup/index.js"
+    },
     "./Form": {
       "types": "./dist/Form/index.d.ts",
       "import": "./dist/Form/index.js"
     },
+    "./ListBox": {
+      "types": "./dist/ListBox/index.d.ts",
+      "import": "./dist/ListBox/index.js"
+    },
     "./Menu": {
       "types": "./dist/Menu/index.d.ts",
       "import": "./dist/Menu/index.js"
@@ -52,22 +88,78 @@
       "types": "./dist/Modal/index.d.ts",
       "import": "./dist/Modal/index.js"
     },
+    "./NumberInput": {
+      "types": "./dist/NumberInput/index.d.ts",
+      "import": "./dist/NumberInput/index.js"
+    },
     "./NavMenu": {
       "types": "./dist/NavMenu/index.d.ts",
       "import": "./dist/NavMenu/index.js"
     },
+    "./MaskedInput": {
+      "types": "./dist/MaskedInput/index.d.ts",
+      "import": "./dist/MaskedInput/index.js"
+    },
     "./Notification": {
       "types": "./dist/Notification/index.d.ts",
       "import": "./dist/Notification/index.js"
     },
+    "./Pagination": {
+      "types": "./dist/Pagination/index.d.ts",
+      "import": "./dist/Pagination/index.js"
+    },
+    "./Progress": {
+      "types": "./dist/Progress/index.d.ts",
+      "import": "./dist/Progress/index.js"
+    },
     "./Popover": {
       "types": "./dist/Popover/index.d.ts",
       "import": "./dist/Popover/index.js"
     },
+    "./Rating": {
+      "types": "./dist/Rating/index.d.ts",
+      "import": "./dist/Rating/index.js"
+    },
+    "./SelectBox": {
+      "types": "./dist/SelectBox/index.d.ts",
+      "import": "./dist/SelectBox/index.js"
+    },
+    "./SegmentedControl": {
+      "types": "./dist/SegmentedControl/index.d.ts",
+      "import": "./dist/SegmentedControl/index.js"
+    },
+    "./Slider": {
+      "types": "./dist/Slider/index.d.ts",
+      "import": "./dist/Slider/index.js"
+    },
+    "./Splitter": {
+      "types": "./dist/Splitter/index.d.ts",
+      "import": "./dist/Splitter/index.js"
+    },
+    "./Stepper": {
+      "types": "./dist/Stepper/index.d.ts",
+      "import": "./dist/Stepper/index.js"
+    },
     "./TabGroup": {
       "types": "./dist/TabGroup/index.d.ts",
       "import": "./dist/TabGroup/index.js"
     },
+    "./TagInput": {
+      "types": "./dist/TagInput/index.d.ts",
+      "import": "./dist/TagInput/index.js"
+    },
+    "./Tree": {
+      "types": "./dist/Tree/index.d.ts",
+      "import": "./dist/Tree/index.js"
+    },
+    "./ToolBar": {
+      "types": "./dist/ToolBar/index.d.ts",
+      "import": "./dist/ToolBar/index.js"
+    },
+    "./TimePicker": {
+      "types": "./dist/TimePicker/index.d.ts",
+      "import": "./dist/TimePicker/index.js"
+    },
     "./icons": {
       "types": "./dist/icons/index.d.ts",
       "import": "./dist/icons/index.js"
@@ -87,31 +179,30 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@torpor/view": "^0.4.17",
-    "@torpor/unplugin": "^0.2.1"
+    "@torpor/unplugin": "^1.0.0",
+    "@torpor/view": "^1.0.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/user-event": "^14.6.1",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
-    "@types/jsdom": "^27.0.0",
-    "@types/node": "^24.10.1",
-    "@typescript/native-preview": "7.0.0-dev.20251112.1",
-    "chalk": "^5.6.2",
-    "esno": "^4.8.0",
-    "fast-glob": "^3.3.3",
-    "jsdom": "^27.2.0",
-    "oxlint-tsgolint": "^0.6.0",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.8",
-    "zod": "^4.1.12"
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/user-event": "^14.6.3",
+    "@types/jsdom": "^28.0.3",
+    "@types/node": "^26.1.2",
+    "@typescript/native-preview": "7.0.0-dev.20260707.2",
+    "chalk": "^6.0.0",
+    "jsdom": "^30.0.1",
+    "tsx": "^4.23.5",
+    "typescript": "^7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.7",
+    "vite-plus": "0.2.7",
+    "zod": "^4.4.3",
+    "@torpor/prettier": "^1.0.0",
+    "@torpor/check": "^1.0.0"
   },
   "scripts": {
-    "build": "tsgo --noEmit && tsup",
-    "build:fix": "esno scripts/postbuild.ts",
-    "check": "tsgo --noEmit && pnpm dlx oxlint --type-aware",
-    "test": "vitest"
+    "build": "tsgo --noEmit && vp pack",
+    "check": "torp-check && pnpm dlx oxlint --type-aware",
+    "test": "vp test",
+    "format": "vp fmt ."
   }
 }

package/dist/Accordion/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Breadcrumb/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Calendar/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/Chart/BarChart.torp

@@ -1,159 +0,0 @@
-import type { ClassValue, StyleValue } from "@torpor/view";
-import XAxis from "./XAxis.torp";
-import YAxis from "./YAxis.torp";
-import GridLines from "./GridLines.torp";
-import {
-	calculateMaxValue,
-	calculateStepValue,
-	calculateStepLabels,
-	calculateItemWidth,
-	calculateValueHeight,
-	calculateChartBottom,
-	calculateChartLeft
-} from "../utils/chartUtils";
-import { chartColors } from "../utils/chartColors";
-
-import type DataSeries from "./DataSeries";
-
-interface BarChartProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Classes for the root element */
-	class?: ClassValue,
-	/** Styles for the root element */
-	style?: StyleValue,
-	series: DataSeries[],
-	height?: number,
-	width?: number,
-	xLabel?: string,
-	yLabel?: string,
-	maxValue?: number,
-	stepCount?: number,
-	stepValue?: number,
-	hideXAxis?: boolean,
-	hideYAxis?: boolean,
-	showHLines?: boolean,
-	showVLines?: boolean,
-}
-
-export default function BarChart($props: BarChartProps) {
-	const defaultHeight = 200;
-	const defaultWidth = 400;
-
-	let container: HTMLElement;
-	let measurer: SVGTextElement;
-
-	let $state = $watch({
-		textWidth: 0,
-		textHeight: 0,
-		get labels() {
-			return $props.series.map((s) => s.name);
-		},
-		get calculatedHeight() { 
-			return $props.height || defaultHeight;
-		},
-		get calculatedWidth() { 
-			return $props.width || container?.clientWidth || defaultWidth;
-		},
-		get maxValue () {
-			return $props.maxValue || calculateMaxValue($props.series);
-		},
-		get calculatedStepValue() {
-			return $props.stepValue || calculateStepValue($state.maxValue, $props.stepCount);
-		},
-		get stepLabels() {
-			return calculateStepLabels($props.stepCount || 2, $state.calculatedStepValue);
-		},
-		get itemWidth() {
-			return calculateItemWidth($state.calculatedWidth, $state.chartLeft, $state.labels);
-		},
-		get valueHeight() {
-			return calculateValueHeight($state.chartBottom, $state.textHeight, $state.calculatedStepValue, $props.stepCount || 2);
-		},
-		get chartBottom() {
-			return calculateChartBottom($props.xLabel ?? "", $state.calculatedHeight, $state.textHeight);
-		},
-		get chartLeft() {
-			return calculateChartLeft($state.stepLabels, $props.yLabel ?? "", $state.textHeight, $state.textWidth);
-		}
-	});
-
-	$mount(() => {
-		// HACK: Wait until the measurer is really available
-		setTimeout(() => {
-			const bbox = measurer.getBBox();
-			$state.textWidth = bbox.width;
-			$state.textHeight = bbox.height * 1.5;
-			measurer.remove();
-		}, 1);
-	});
-
-	@render {
-		<div
-			{$props?.id}
-			class={["torp-bar-chart", $props?.class]}
-			{$props?.style}
-			&ref={container}
-		>
-			<svg version="1.1" width={$state.calculatedWidth} height={$state.calculatedHeight} xmlns="http://www.w3.org/2000/svg">
-				<g>
-				 	<text &ref={measurer} x="-999" y="-999">8</text>
-	
-					@if ($state.textWidth && $state.textHeight) {
-						<XAxis
-							showAxis={!$props.hideXAxis}
-							height={$state.calculatedHeight}
-							width={$state.calculatedWidth}
-							{$state.itemWidth}
-							{$state.textHeight}
-							xLabel={$props.xLabel ?? ""}
-							stepLabels={[]}
-							stepValue={0}
-							{$state.labels}
-							{$state.chartLeft}
-							{$state.chartBottom}
-						/>
-						<YAxis
-							showAxis={!$props.hideYAxis}
-							{$state.valueHeight}
-							{$state.textHeight}
-							yLabel={$props.yLabel ?? ""}
-							{$state.stepLabels}
-							stepValue={$state.calculatedStepValue}
-							{$state.chartLeft}
-							{$state.chartBottom}
-						/>
-						<GridLines
-							{$props.showHLines}
-							{$props.showVLines}
-							width={$state.calculatedWidth}
-							{$state.labels}
-							xStepValue={0}
-							xStepLabels={[]}
-							yStepValue={$state.calculatedStepValue}
-							yStepLabels={$state.stepLabels}
-							{$state.itemWidth}
-							{$state.valueHeight}
-							{$state.chartLeft}
-							{$state.chartBottom}
-							type="bar"
-						/>
-						@for (let [i, series] of $props.series.entries()) {
-							<rect
-								x={$state.chartLeft +
-									i * $state.itemWidth +
-									$state.itemWidth / 4}
-								y={$state.chartBottom - Math.max(1, series.data[0] * $state.valueHeight)}
-								width={Math.max(1, $state.itemWidth / 2)}
-								height={Math.max(1, series.data[0] * $state.valueHeight)}
-								fill={series.color || chartColors[i % chartColors.length]}
-							>
-								<title>{`${[series.name, series.data[0]].filter(Boolean).join("\n")}`}</title>
-							</rect>
-						}
-					}
-				</g>
-			</svg>
-		</div>
-	}
-}