@torpor/ui 0.1.7 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # @torpor/ui
 
+## 0.2.1
+
+### Patch Changes
+
+- 84f7d87: Fix: prop types
+- 34d17f7: Feat: UI Form component and client-side submit
+- Updated dependencies [f4716c5]
+- Updated dependencies [1253f7a]
+- Updated dependencies [6268e00]
+- Updated dependencies [f2fb547]
+  - @torpor/view@0.3.2
+
+## 0.2.0
+
+### Minor Changes
+
+- 51dbba7: Chore: drop CJS build and go ESM only
+
+### Patch Changes
+
+- e613d99: Feat: create UI component d.ts files
+- 55750d4: Feat: UI Notification component
+- 94e8f0b: !Refactor: renamed OffScreen to Drawer
+- ede55da: Feat: add some basic UI icons
+- 7000755: Feat: UI Breadcrumb component
+- 2232fae: Feat: UI Menu and MenuBar components
+- 5492230: Feat: UI Calendar component
+- Updated dependencies [be98b35]
+- Updated dependencies [51dbba7]
+- Updated dependencies [2298a87]
+- Updated dependencies [3a8431a]
+- Updated dependencies [eb58d37]
+- Updated dependencies [e0637be]
+- Updated dependencies [9fcc613]
+- Updated dependencies [f5f84e6]
+- Updated dependencies [6cc57ff]
+- Updated dependencies [c4f9d18]
+- Updated dependencies [5598bc9]
+- Updated dependencies [18f1ccf]
+- Updated dependencies [c2b5c02]
+- Updated dependencies [91d1536]
+- Updated dependencies [4dc16df]
+- Updated dependencies [543b229]
+- Updated dependencies [3cf3ae6]
+  - @torpor/view@0.3.0
+  - @torpor/unplugin@0.2.0
+
 ## 0.1.7
 
 ### Patch Changes

package/dist/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/dist/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/dist/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>
 	}
 }

package/dist/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,17 +28,16 @@ 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) {
+	$props ??= $watch({});
+
 	let $state: ItemState = $watch({
 		index: -1,
 		value: "",
 		expanded: false,
+		headerId: "",
+		contentId: "",
 		disabled: $props.disabled,
 		parentDisabled: false,
 		get dataState() {
@@ -69,12 +83,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}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/Accordion/AccordionTrigger.torp

@@ -1,20 +1,28 @@
 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) {
+	$props ??= $watch({});
 	$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;
@@ -41,19 +49,19 @@ 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()}
-			aria-disabled={$state.disabled}
+			aria-disabled={$state.disabled ? "true" : undefined}
 			aria-controls={$state.contentId}
 			data-state={$state.dataState}
-			data-disabled={$state.disabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 			&ref={button}
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/Accordion/AccordionTypes.ts

@@ -25,6 +25,8 @@ export interface ItemState {
 	index: number;
 	value: string;
 	expanded: boolean;
+	headerId: string;
+	contentId: string;
 	disabled: boolean;
 	parentDisabled: boolean;
 	dataState: "open" | "closed";

package/dist/Accordion/index.d.ts

@@ -0,0 +1,157 @@
+import { type SlotRender } from "@torpor/view";
+
+
+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.
+ *
+ * See [the WAI ARIA guidelines for Accordions](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+ *
+ * The structure of an Accordion is:
+ *
+ * ```
+ * <Accordion>
+ * 	<AccordionItem>
+ * 		<AccordionHeader>
+ * 			<AccordionTrigger />
+ * 		</AccordionHeader>
+ * 		<AccordionContent />
+ * 	</AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare function Accordion(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: AccordionProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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.
+ */
+declare function AccordionContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: AccordionContentProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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.
+ *
+ * The structure of an AccordionHeader is:
+ * 
+ * ```
+ * <AccordionHeader>
+ * 	<AccordionTrigger />
+ * </AccordionHeader>
+ * ```
+ */
+declare function AccordionHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: AccordionHeaderProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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.
+ * 
+ * The structure of an AccordionItem is:
+ * 
+ * ```
+ * <AccordionItem>
+ * 	<AccordionHeader>
+ * 		<AccordionTrigger />
+ * 	</AccordionHeader>
+ * 	<AccordionContent />
+ * </AccordionItem>
+ * ```
+ */
+declare function AccordionItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: AccordionItemProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+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.
+ */
+declare function AccordionTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: AccordionTriggerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/Breadcrumb/Breadcrumb.torp

@@ -0,0 +1,42 @@
+
+interface BreadcrumbProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the popover to screen readers  */
+	ariaLabel?: string | undefined,
+}
+
+/**
+ *
+ * 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.
+ */
+export default function Breadcrumb($props: BreadcrumbProps) {
+	$props ??= $watch({});
+
+	@render {
+		<nav
+			{$props.id}
+			class={`torp-breadcrumb ${$props.class ?? ""}`.trim()}
+			aria-label={$props.ariaLabel}
+		>
+			<slot />
+		</nav>
+	}
+}

package/dist/Breadcrumb/BreadcrumbItem.torp

@@ -0,0 +1,28 @@
+
+interface BreadcrumbItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this is the current page */
+	current?: boolean,
+}
+
+/**
+ * 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({});
+
+	@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/dist/Breadcrumb/BreadcrumbSeparator.torp

@@ -0,0 +1,25 @@
+
+interface BreadcrumbSeparatorProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * A separator between links in a Breadcrumb component. It is hidden from
+ * screen readers.
+ */
+export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps) {
+	$props ??= $watch({});
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-breadcrumb-separator ${$props.class ?? ""}`.trim()}
+			aria-hidden="true"
+		>
+			<slot />
+		</div>
+	}
+}