@torpor/ui 0.1.6 → 0.2.0

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,61 @@
 {
   "name": "@torpor/ui",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "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"
+    },
+    "./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"
     },
     "./motion": {
       "types": "./dist/motion.d.ts",
-      "import": "./dist/motion.js",
-      "require": "./dist/motion.cjs"
+      "import": "./dist/motion.js"
     }
   },
   "publishConfig": {
@@ -49,30 +64,31 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "@torpor/unplugin": "^0.2.0",
+    "@torpor/view": "^0.3.0"
+  },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@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": "^5.2.2",
-    "@types/jsdom": "^21.1.7",
-    "@types/node": "^24.0.4",
-    "chalk": "^5.4.1",
+    "@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.8.3",
+    "typescript": "^5.9.3",
     "vitest": "^3.2.4"
   },
-  "dependencies": {
-    "@torpor/unplugin": "^0.1.16",
-    "@torpor/view": "^0.1.6"
-  },
   "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

@@ -198,10 +198,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

@@ -21,7 +21,7 @@ export default function AccordionContent($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion-content ${$props.class ?? ""}`.trim()}
 			role={$props.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
@@ -29,7 +29,7 @@ export default function AccordionContent($props: any) {
 			data-disabled={$state.dataDisabled}
 		>
 			@if ($state.expanded) {
-				<:slot />
+				<slot />
 			}
 		</div>
 	}

package/src/Accordion/AccordionHeader.torp

@@ -23,12 +23,12 @@ export default function AccordionHeader($props: any) {
 	@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}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}
 }

package/src/Accordion/AccordionItem.torp

@@ -69,12 +69,12 @@ export default function AccordionItem($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion-item ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
 			data-disabled={$state.dataDisabled}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/src/Accordion/AccordionTrigger.torp

@@ -41,7 +41,7 @@ export default function AccordionTrigger() {
 	@render {
 		<button
 			type="button"
-			id={$props.id}
+			{$props.id}
 			class={`torp-accordion-trigger ${$props.class ?? ""}`.trim()}
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-expanded={$state.expanded.toString()}
@@ -53,7 +53,7 @@ export default function AccordionTrigger() {
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/src/Breadcrumb/Breadcrumb.torp

@@ -0,0 +1,33 @@
+
+/**
+ *
+ * A list of links to the parent pages of the current page in hierarchical order.
+ *
+ * See [the WAI ARIA guidelines for Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/).
+ *
+ * The structure of a Breadcrumb is:
+ *
+ * ```
+ * <Breadcrumb>
+ *     <BreadcrumbItem />
+ *     <BreadcrumbSeparator /> (optional)
+ *     <BreadcrumbItem />
+ * 	...
+ * </Breadcrumb>
+ * ```
+ *
+ * You can separate BreadcrumbItems using BreadcrumbSeparators or by using CSS.
+ *
+ * @prop {string | undefined} ariaLabel -- An ARIA label for describing the popover to screen readers 
+ */
+export default function Breadcrumb($props: any) {
+	@render {
+		<nav
+			{$props.id}
+			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
+			aria-label={$props.ariaLabel}
+		>
+			<slot />
+		</nav>
+	}
+}

package/src/Breadcrumb/BreadcrumbItem.torp

@@ -0,0 +1,19 @@
+
+/**
+ * An item in a breadcrumb, containing a link to one of the parent pages of the
+ * current page (or the current page).
+ *
+ * @prop {boolean | undefined} current -- Whether this is the current page
+ */
+export default function BreadcrumbItem($props: any) {
+	@render {
+		<div
+			{$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

@@ -0,0 +1,16 @@
+
+/**
+ * A separator between links in a Breadcrumb component. It is hidden from
+ * screen readers.
+ */
+export default function BreadcrumbSeparator($props: any) {
+	@render {
+		<div
+			{$props.id}
+			class={`torp-breadcrumb-separator ${$props.class ?? ""}`.trim()}
+			aria-hidden="true"
+		>
+			<slot />
+		</div>
+	}
+}

package/src/Breadcrumb/index.ts

@@ -0,0 +1,5 @@
+import Breadcrumb from "./Breadcrumb.torp";
+import BreadcrumbItem from "./BreadcrumbItem.torp";
+import BreadcrumbSeparator from "./BreadcrumbSeparator.torp";
+
+export { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator };