@torpor/ui 0.1.7 → 0.2.1

package/dist/utils/dateUtils.ts

@@ -0,0 +1,244 @@
+// TODO: Can we get these from the locale?
+const monthNames: string[] = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December",
+];
+const shortMonthNames: string[] = monthNames.map((n) => n.substring(0, 3).toLowerCase());
+
+const dayNames: string[] = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday",
+	"Sunday",
+];
+const shortDayNames: string[] = dayNames.map((n) => n.substring(0, 3).toLowerCase());
+
+export { monthNames, shortMonthNames, dayNames, shortDayNames };
+
+export function areDatesEqual(date1: Date, date2: Date): boolean {
+	if ((date1 && !date2) || (date2 && !date1)) {
+		return false;
+	}
+	return (
+		date1.getFullYear() === date2.getFullYear() &&
+		date1.getMonth() === date2.getMonth() &&
+		date1.getDate() === date2.getDate()
+	);
+}
+
+export function parseDateTime(text: string, dateOrder: string): Date {
+	const parts = text
+		.toString()
+		.toLowerCase()
+		.split(/[.,/ :-]/);
+
+	const today = new Date();
+	let day = today.getDate();
+	let month = today.getMonth();
+	let year = today.getFullYear();
+	let hour = 9;
+	let minute = 0;
+	//let ampm = "";
+
+	let dayPart = -1;
+	let monthPart = -1;
+	let yearPart = -1;
+	//let hourPart = -1;
+
+	// Try to get the month if it's been supplied as a word
+	for (let i = 0; i < parts.length; i++) {
+		const index = shortMonthNames.indexOf(parts[i].substring(0, 3));
+		if (index !== -1) {
+			month = index;
+			monthPart = i;
+			break;
+		}
+	}
+
+	// Get each date part based on the dateOrder supplied
+	const dateOrderLower = dateOrder.toLowerCase();
+	for (let i = 0; i < dateOrder.length; i++) {
+		if (dateOrderLower[i] === "d") {
+			const dayResult = getDayPart(parts, monthPart, yearPart);
+			if (dayResult) {
+				day = dayResult.value;
+				dayPart = dayResult.part;
+			}
+		}
+		if (dateOrderLower[i] === "m" && monthPart === -1) {
+			const monthResult = getMonthPart(parts, dayPart, yearPart);
+			if (monthResult) {
+				month = monthResult.value;
+				monthPart = monthResult.part;
+			}
+		}
+		if (dateOrderLower[i] === "y") {
+			const yearResult = getYearPart(parts, dayPart, monthPart);
+			if (yearResult) {
+				year = yearResult.value;
+				yearPart = yearResult.part;
+			}
+		}
+	}
+
+	// TODO: Time...
+	//if (includeTime) {
+	//    // Hour part is the first part that isn't a date part
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (i !== yearPart && i !== monthPart && i !== dayPart) {
+	//            const maybehour = parseInt(parts[i])
+	//            if (!isNaN(maybehour)) {
+	//                hour = maybehour
+	//                hourPart = i
+	//                break
+	//            }
+	//        }
+	//    }
+	//
+	//    // Minute part is the first part that isn't a date part or the hour part
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (i !== yearPart && i !== monthPart && i !== dayPart && i !== hourPart) {
+	//            const maybeminute = parseInt(parts[i])
+	//            if (!isNaN(maybeminute)) {
+	//                minute = maybeminute
+	//                break
+	//            }
+	//        }
+	//    }
+	//
+	//    // Look for AM or PM
+	//    for (let i = 0; i < parts.length; i++) {
+	//        if (parts[i] === 'am' || parts[i] === 'pm') {
+	//            ampm = parts[i].toString().toUpperCase()
+	//            if (ampm === 'PM') {
+	//                hour = hour + 12
+	//            }
+	//            break
+	//        }
+	//    }
+	//}
+
+	return new Date(year, month, day, hour, minute);
+}
+
+interface DatePart {
+	value: number;
+	part: number;
+}
+
+function getDayPart(parts: string[], monthPart: number, yearPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== monthPart && i !== yearPart) {
+			const maybeday = parseInt(parts[i]);
+			if (!isNaN(maybeday)) {
+				const value = maybeday;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+function getMonthPart(parts: string[], dayPart: number, yearPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== dayPart && i !== yearPart) {
+			const maybemonth = parseInt(parts[i]);
+			if (!isNaN(maybemonth)) {
+				const value = maybemonth - 1;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+function getYearPart(parts: string[], dayPart: number, monthPart: number): DatePart | undefined {
+	for (let i = 0; i < parts.length; i++) {
+		if (i !== monthPart && i !== dayPart) {
+			const maybeyear = parseInt(parts[i]);
+			if (!isNaN(maybeyear)) {
+				const value = maybeyear < 100 ? maybeyear + 2000 : maybeyear;
+				const part = i;
+				return { value, part };
+			}
+		}
+	}
+}
+
+export function formatDate(value: Date, dateFormat: string): string {
+	if (!value) {
+		return "";
+	}
+
+	const date = new Date(value);
+
+	// Build the text that will be displayed
+	return dateFormat.replace(/(d+)|(M+)|(y+)/g, (m) => {
+		if (m.indexOf("d") >= 0) {
+			return formatDay(date, m);
+		} else if (m.indexOf("M") >= 0) {
+			return formatMonth(date, m);
+		} else if (m.indexOf("y") >= 0) {
+			return formatYear(date, m);
+		} else {
+			throw new Error("Invalid date format string");
+		}
+	});
+
+	// TODO: Time
+	//if (includeTime) {
+	//    const ampm = hour >= 12 ? 'PM' : 'AM'
+	//    hour = hour % 12
+	//    hour = hour || 12 // the hour '0' should be '12'
+	//
+	//    minute = minute < 10 ? '0' + minute : minute
+	//    text = text + ' ' + hour + ':' + minute + ' ' + ampm
+	//}
+}
+
+function formatDay(date: Date, d: string): string {
+	if (d.length >= 4) {
+		return dayNames[date.getDay()];
+	} else if (d.length === 3) {
+		return dayNames[date.getDay()].substring(0, 3);
+	} else if (d.length == 2) {
+		let text = date.getDate().toString();
+		return text.length < 2 ? "0" + text : text;
+	} else {
+		return date.getDate().toString();
+	}
+}
+
+function formatMonth(date: Date, m: string): string {
+	if (m.length >= 4) {
+		return monthNames[date.getMonth()];
+	} else if (m.length === 3) {
+		return monthNames[date.getMonth()].substring(0, 3);
+	} else if (m.length == 2) {
+		let text = date.getMonth().toString();
+		return text.length < 2 ? "0" + text : text;
+	} else {
+		return date.getMonth().toString();
+	}
+}
+
+function formatYear(date: Date, y: string): string {
+	return date
+		.getFullYear()
+		.toString()
+		.substring(4 - y.length, y.length);
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { type SlotRender } from "@torpor/view";
+export {  };

package/dist/utils/setPopoverPosition.ts

@@ -42,6 +42,7 @@ export default function setPopoverPosition(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid MenuPopout side: ${side}`);
 		}
 	}
@@ -68,6 +69,7 @@ export default function setPopoverPosition(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid MenuPopout side: ${side}`);
 		}
 	}
@@ -94,6 +96,7 @@ function setVerticalAlignment(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid Popout alignment: ${alignment}`);
 		}
 	}
@@ -126,6 +129,7 @@ function setHorizontalAlignment(
 			break;
 		}
 		default: {
+			// eslint-disable-next-line restrict-template-expressions
 			throw new Error(`Invalid Popout alignment: ${alignment}`);
 		}
 	}

package/package.json

@@ -1,46 +1,69 @@
 {
   "name": "@torpor/ui",
-  "version": "0.1.7",
+  "version": "0.2.1",
   "description": "Accessible, unstyled components for use in your Torpor front-end",
   "type": "module",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
   "exports": {
     "./Accordion": {
       "types": "./dist/Accordion/index.d.ts",
-      "import": "./dist/Accordion/index.js",
-      "require": "./dist/Accordion/index.cjs"
+      "import": "./dist/Accordion/index.js"
+    },
+    "./Breadcrumb": {
+      "types": "./dist/Breadcrumb/index.d.ts",
+      "import": "./dist/Breadcrumb/index.js"
+    },
+    "./Calendar": {
+      "types": "./dist/Calendar/index.d.ts",
+      "import": "./dist/Calendar/index.js",
+      "require": "./dist/Calendar/index.cjs"
     },
     "./Dialog": {
       "types": "./dist/Dialog/index.d.ts",
-      "import": "./dist/Dialog/index.js",
-      "require": "./dist/Dialog/index.cjs"
+      "import": "./dist/Dialog/index.js"
+    },
+    "./Disclosure": {
+      "types": "./dist/Disclosure/index.d.ts",
+      "import": "./dist/Disclosure/index.js"
+    },
+    "./Drawer": {
+      "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"
+    },
+    "./MenuBar": {
+      "types": "./dist/MenuBar/index.d.ts",
+      "import": "./dist/MenuBar/index.js"
     },
     "./NavMenu": {
       "types": "./dist/NavMenu/index.d.ts",
-      "import": "./dist/NavMenu/index.js",
-      "require": "./dist/NavMenu/index.cjs"
+      "import": "./dist/NavMenu/index.js"
     },
-    "./Offscreen": {
-      "types": "./dist/Offscreen/index.d.ts",
-      "import": "./dist/Offscreen/index.js",
-      "require": "./dist/Offscreen/index.cjs"
+    "./Notification": {
+      "types": "./dist/Notification/index.d.ts",
+      "import": "./dist/Notification/index.js"
     },
     "./Popover": {
       "types": "./dist/Popover/index.d.ts",
-      "import": "./dist/Popover/index.js",
-      "require": "./dist/Popover/index.cjs"
+      "import": "./dist/Popover/index.js"
     },
     "./TabGroup": {
       "types": "./dist/TabGroup/index.d.ts",
-      "import": "./dist/TabGroup/index.js",
-      "require": "./dist/TabGroup/index.cjs"
+      "import": "./dist/TabGroup/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons.d.ts",
+      "import": "./dist/icons.js"
     },
     "./motion": {
       "types": "./dist/motion.d.ts",
-      "import": "./dist/motion.js",
-      "require": "./dist/motion.cjs"
+      "import": "./dist/motion.js"
     }
   },
   "publishConfig": {
@@ -49,30 +72,32 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "@torpor/view": "^0.3.2",
+    "@torpor/unplugin": "^0.2.0"
+  },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^24.2.1",
-    "chalk": "^5.5.0",
+    "@types/jsdom": "^27.0.0",
+    "@types/node": "^24.6.2",
+    "@typescript/native-preview": "7.0.0-dev.20251005.1",
+    "chalk": "^5.6.2",
     "esno": "^4.8.0",
     "fast-glob": "^3.3.3",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.0.0",
+    "oxlint-tsgolint": "^0.2.0",
     "tsup": "^8.5.0",
-    "typescript": "^5.9.2",
-    "vitest": "^3.2.4"
-  },
-  "dependencies": {
-    "@torpor/unplugin": "^0.1.17",
-    "@torpor/view": "^0.2.0"
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4",
+    "zod": "^4.1.12"
   },
   "scripts": {
-    "build": "tsc --noEmit && tsup",
+    "build": "tsgo --noEmit && tsup",
     "build:fix": "esno scripts/postbuild.ts",
-    "check": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "check": "tsgo --noEmit && pnpm dlx oxlint --type-aware",
+    "test": "vitest"
   }
 }

package/scripts/postbuild.ts

@@ -1,3 +1,4 @@
+import { buildType, parse } from "@torpor/view/compile";
 import chalk from "chalk";
 import { existsSync, promises as fs, lstatSync } from "node:fs";
 import { basename, dirname, join, resolve } from "node:path";
@@ -11,6 +12,11 @@ async function run() {
 	const sourceFolder = resolve(scriptsFolder, "../src");
 	const distFolder = resolve(scriptsFolder, "../dist");
 
+	// Wait for the types to be generated, then wait another 500ms, because
+	// otherwise the types WE generate get deleted
+	await waitUntilFileExists(join(distFolder, "index.d.ts"));
+	await new Promise((resolve, _reject) => setTimeout(() => resolve(true), 500));
+
 	// Read the dist files first, not for every component
 	const distFiles = (await fs.readdir(distFolder)).filter((f) => f.endsWith(".torp"));
 
@@ -32,6 +38,8 @@ async function run() {
 		}
 
 		// Move all *.torp files for the component into this folder
+		// And while we're at it, create type definitions
+		let typeDefs: string[] = [];
 		let relatedFiles = (await fs.readdir(join(sourceFolder, component)))
 			.filter((f) => f.endsWith(".torp") && f !== component)
 			.map((f) => basename(f, ".torp"))
@@ -43,8 +51,13 @@ async function run() {
 				return output!;
 			});
 		for (let file of relatedFiles) {
-			const newfile = file.substring(0, file.indexOf("-")) + ".torp";
-			await fs.rename(join(distFolder, file), join(distFolder, component, newfile));
+			const newFileName = file.substring(0, file.indexOf("-")) + ".torp";
+			const newFilePath = join(distFolder, component, newFileName);
+			await fs.rename(join(distFolder, file), newFilePath);
+
+			const parsed = parse(await fs.readFile(newFilePath, "utf8"));
+			// HACK: by this point we should be certain there's no errors
+			typeDefs.push(buildType(parsed.template!));
 		}
 
 		// Move all *.ts files into this folder
@@ -55,11 +68,26 @@ async function run() {
 		for (const file of tsFiles) {
 			await fs.copyFile(join(srcFolder, file), join(distFolder, component, file));
 		}
+
+		// Create the d.ts file from the type definitions
+		let dts = `import { type SlotRender } from "@torpor/view";\n`;
+		let exportNames: string[] = [];
+		for (let typeDef of typeDefs) {
+			const match = /export default (.+?);/.exec(typeDef);
+			if (match) {
+				exportNames.push(match[1]);
+				typeDef = typeDef.replace(match[0], "");
+			}
+			typeDef = typeDef.replace(`import { type SlotRender } from "@torpor/view";`, "");
+			dts += typeDef;
+		}
+		dts += `export { ${exportNames.join(", ")} };`;
+		await fs.writeFile(join(distFolder, component, "index.d.ts"), dts);
 	}
 
 	// Move all utils/*.ts files into the dest folder
-	moveUtils(distFolder, "utils");
-	moveUtils(distFolder, "mount");
+	await moveUtils(distFolder, "utils");
+	await moveUtils(distFolder, "mount");
 }
 
 async function moveUtils(distFolder: string, folderName: string) {
@@ -77,4 +105,13 @@ async function moveUtils(distFolder: string, folderName: string) {
 	}
 }
 
-run();
+// From https://stackoverflow.com/a/62339353
+async function waitUntilFileExists(filePath: string, currentTime = 0, timeout = 5000) {
+	if (existsSync(filePath)) return true;
+	if (currentTime === timeout) return false;
+	const interval = 500;
+	await new Promise((resolve, _reject) => setTimeout(() => resolve(true), interval));
+	return waitUntilFileExists(filePath, currentTime + interval, timeout);
+}
+
+await run();

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,13 +33,10 @@ 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) {
+export default function Accordion($props: AccordionProps) {
+	$props ??= $watch({ type: "single", value: "" });
+
 	$props.type ||= "single";
 	$props.value ||= $props.type === "single" ? "" : [];
 
@@ -44,10 +56,10 @@ export default function Accordion($props: any) {
 
 	$run(() => {
 		// HACK: This should probably be done with setters?
-		let newValue = $props.value;
+		let newValue = $props.value!;
 
 		// Get the value
-		switch ($props.type) {
+		switch ($props!.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();
@@ -73,7 +85,7 @@ export default function Accordion($props: any) {
 	})
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props.disabled);
+		itemStates.forEach((s) => s.parentDisabled = $props.disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
@@ -84,7 +96,7 @@ export default function Accordion($props: any) {
 		if (firstChange) {
 			firstChange = false;
 		} else if (ev) {
-			ev(value);
+			ev(value!);
 		}
 	});
 
@@ -114,7 +126,7 @@ export default function Accordion($props: any) {
 		}
 
 		// 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);
@@ -198,10 +210,10 @@ export default function Accordion($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Accordion/AccordionContent.torp

@@ -1,35 +1,42 @@
 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) {
+export default function AccordionContent($props: AccordionContentProps) {
+	$props ??= $watch({});
 	$props.id ||= 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;
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			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-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.expanded) {
-				<:slot />
+				<slot />
 			}
 		</div>
 	}

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,25 +19,25 @@ 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) {
+	$props ??= $watch({});
+
 	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
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion-header ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}
 }