@torpor/ui 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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

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);

package/dist/Accordion/AccordionContent.torp

@@ -1,20 +1,27 @@
 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;
@@ -26,7 +33,7 @@ export default function AccordionContent($props: any) {
 			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 />

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,15 +19,15 @@ 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
@@ -26,7 +35,7 @@ export default function AccordionHeader($props: any) {
 			{$props.id}
 			class={`torp-accordion-header ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<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() {
@@ -72,7 +86,7 @@ export default function AccordionItem($props: any) {
 			{$props.id}
 			class={`torp-accordion-item ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<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;
@@ -45,10 +53,10 @@ export default function AccordionTrigger() {
 			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}

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

@@ -1,90 +1,155 @@
 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,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * 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: any,
+	$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,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * Content for an AccordionItem, which can be revealed or hidden by an associated AccordionTrigger.
  */
 declare function AccordionContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$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",
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * 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: any,
+	$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,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * 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: any,
+	$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,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * 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?: Record<PropertyKey, any>,
+	$props: AccordionTriggerProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Breadcrumb/Breadcrumb.torp

@@ -1,4 +1,13 @@
 
+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.
@@ -17,10 +26,10 @@
  * ```
  *
  * 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) {
+export default function Breadcrumb($props: BreadcrumbProps) {
+	$props ??= $watch({});
+
 	@render {
 		<nav
 			{$props.id}

package/dist/Breadcrumb/BreadcrumbItem.torp

@@ -1,11 +1,20 @@
 
+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).
- *
- * @prop {boolean | undefined} current -- Whether this is the current page
  */
-export default function BreadcrumbItem($props: any) {
+export default function BreadcrumbItem($props: BreadcrumbItemProps) {
+	$props ??= $watch({});
+
 	@render {
 		<div
 			{$props.id}

package/dist/Breadcrumb/BreadcrumbSeparator.torp

@@ -1,9 +1,18 @@
 
+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: any) {
+export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps) {
+	$props ??= $watch({});
+
 	@render {
 		<div
 			{$props.id}

package/dist/Breadcrumb/index.d.ts

@@ -1,54 +1,82 @@
 import { type SlotRender } from "@torpor/view";
 
 
+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,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ *
+ * 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.
  */
 declare function Breadcrumb(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: BreadcrumbProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+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,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * An item in a breadcrumb, containing a link to one of the parent pages of the
+ * current page (or the current page).
  */
 declare function BreadcrumbItem(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: BreadcrumbItemProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface BreadcrumbSeparatorProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * A separator between links in a Breadcrumb component. It is hidden from
+ * screen readers.
  */
 declare function BreadcrumbSeparator(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: BreadcrumbSeparatorProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Calendar/Calendar.torp

@@ -7,7 +7,15 @@ import ChevronRight from "../icons/ChevronRight.torp";
 
 // TODO: Split this out into Calendar, CalendarHeader, CalendarPreviousTrigger, CalendarGrid etc
 
-export default function Calendar() {
+interface CalendarProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+export default function Calendar($props: CalendarProps) {
+	$props ??= $watch({});
 	$props.startOfWeek ??= 1;
 	$props.selectable ??= false;
 	$props.value ??= new Date();