@torpor/ui 0.2.0 → 0.2.1

package/dist/Calendar/CalendarDay.torp

@@ -1,7 +1,15 @@
 import { areDatesEqual } from "../utils/dateUtils";
 import { type CalendarContext, type CalendarEvent, CalendarContextName } from "./CalendarTypes";
 
-export default function CalendarDay() {
+interface CalendarDayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+export default function CalendarDay($props: CalendarDayProps) {
+	$props ??= $watch({});
 	$props.date ??= new Date();
 	$props.selectable ??= false;
 	$props.muted ??= false;

package/dist/Calendar/index.d.ts

@@ -1,36 +1,34 @@
 import { type SlotRender } from "@torpor/view";
 
 
-/**
- * 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.
- */
+interface CalendarProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 declare function Calendar(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: CalendarProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): 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.
- */
+interface CalendarDayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 declare function CalendarDay(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: CalendarDayProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Dialog/Dialog.torp

@@ -4,6 +4,17 @@ import { trapFocus, type TrapFocusOptions } from "../mount/trapFocus";
 import { PopoverContextName, type PopoverContext } from "../Popover/PopoverTypes";
 import { DialogContextName, type DialogContext, type DialogState } from "./DialogTypes";
 
+interface DialogProps {
+	/** 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,
+	/** Whether the dialog should alert the user via the screen reader */
+	alert?: boolean,
+}
+
 /**
  * Content for a window displayed in a Popover.
  * 
@@ -21,10 +32,9 @@ import { DialogContextName, type DialogContext, type DialogState } from "./Dialo
  * </Dialog>
  * ```
  * 
- * @prop {string | undefined} ariaLabel -- An ARIA label for describing the popover to screen readers 
- * @prop {boolean} alert -- Whether the dialog should alert the user via the screen reader
  */
-export default function Dialog($props: any) {
+export default function Dialog($props: DialogProps) {
+	$props ??= $watch({});
 	$props.id ??= getId();
 	$props.dialog ??= false;
 

package/dist/Dialog/DialogBody.torp

@@ -1,13 +1,21 @@
 import getId from "../utils/getId";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
+interface DialogBodyProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the body content will be announced by screen readers when the Dialog is opened */
+	ariaAnnounce?: boolean,
+}
+
 /**
  * The body information for a Dialog. Content in the body will be announced by
  * screen readers when the Dialog is opened, unless ariaAnnounce is false.
- * 
- * @prop {boolean} ariaAnnounce -- Whether the body content will be announced by screen readers when the Dialog is opened
  */
-export default function DialogBody($props: any) {
+export default function DialogBody($props: DialogBodyProps) {
+	$props ??= $watch({});
 	$props.id ??= getId();
 	$props.ariaAnnounce ??= true;
 

package/dist/Dialog/DialogButton.torp

@@ -1,13 +1,25 @@
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
+interface DialogButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
+	value?: any,
+	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
+	type?: "confirm" | "cancel",
+	/** Whether this button is disabled */
+	disabled?: boolean,
+}
+
 /**
  * A button that is placed in a DialogFooter and signals a response by a user.
  * 
- * @prop {any | undefined} value -- The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover
- * @prop {"confirm" | "cancel" | undefined} type -- "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key
- * @prop {boolean} disabled -- Whether this button is disabled
  */
-export default function DialogButton($props: any) {
+export default function DialogButton($props: DialogButtonProps) {
+	$props ??= $watch({});
+
 	let button: HTMLButtonElement;
 
 	// Get stuff out of the DialogContext

package/dist/Dialog/DialogFooter.torp

@@ -1,7 +1,17 @@
+
+interface DialogFooterProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * The footer for a Dialog, which may contain one or more DialogButtons.
  */
-export default function DialogFooter($props: any) {
+export default function DialogFooter($props: DialogFooterProps) {
+	$props ??= $watch({});
+
 	@render {
 		<div
 			{$props.id}

package/dist/Dialog/DialogHeader.torp

@@ -1,13 +1,22 @@
 import getId from "../utils/getId";
 import { DialogContextName, type DialogContext } from "./DialogTypes";
 
+interface DialogHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the header will be announced by screen readers when the Dialog is opened */
+	ariaAnnounce?: boolean,
+}
+
 /**
  * The header for a Dialog. Content in the header will be announced by screen
  * readers when the Dialog is opened, unless ariaAnnounce is false.
  * 
- * @prop {boolean} ariaAnnounce -- Whether the header will be announced by screen readers when the Dialog is opened
  */
-export default function DialogHeader($props: any) {
+export default function DialogHeader($props: DialogHeaderProps) {
+	$props ??= $watch({});
 	$props.id ??= getId();
 	$props.ariaAnnounce ??= true;
 

package/dist/Dialog/index.d.ts

@@ -1,90 +1,133 @@
 import { type SlotRender } from "@torpor/view";
 
 
+interface DialogProps {
+	/** 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,
+	/** Whether the dialog should alert the user via the screen reader */
+	alert?: 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 a window displayed in a Popover.
+ * 
+ * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ * 
+ * The structure of a Dialog is:
+ * 
+ * ```
+ * <Dialog>
+ *     <DialogHeader /> (optional)
+ *     <DialogBody /> (optional)
+ *     <DialogFooter> (optional)
+ *         <DialogButton /> (optional)
+ *     </DialogFooter>
+ * </Dialog>
+ * ```
+ * 
  */
 declare function Dialog(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: DialogProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface DialogBodyProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the body content will be announced by screen readers when the Dialog is opened */
+	ariaAnnounce?: 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.
+ * The body information for a Dialog. Content in the body will be announced by
+ * screen readers when the Dialog is opened, unless ariaAnnounce is false.
  */
 declare function DialogBody(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: DialogBodyProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface DialogButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
+	value?: any,
+	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
+	type?: "confirm" | "cancel",
+	/** Whether this button is disabled */
+	disabled?: 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.
+ * A button that is placed in a DialogFooter and signals a response by a user.
+ * 
  */
 declare function DialogButton(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: DialogButtonProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface DialogFooterProps {
+	/** 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.
+ * The footer for a Dialog, which may contain one or more DialogButtons.
  */
 declare function DialogFooter(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: DialogFooterProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface DialogHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the header will be announced by screen readers when the Dialog is opened */
+	ariaAnnounce?: 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.
+ * The header for a Dialog. Content in the header will be announced by screen
+ * readers when the Dialog is opened, unless ariaAnnounce is false.
+ * 
  */
 declare function DialogHeader(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: DialogHeaderProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/Disclosure/Disclosure.torp

@@ -1,4 +1,17 @@
-import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
+import { DisclosureContextName, type DisclosureContext, type DisclosureState } from "./DisclosureTypes";
+
+interface DisclosureProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the Disclosure is expanded and its content visible */
+	expanded?: boolean,
+	/** If set to true, the user cannot interact with this Disclosure */
+	disabled?: boolean,
+	/** Raised when this item is opened or closed */
+	ontoggle?: (open: boolean) => void,
+}
 
 /**
  * An interactive header that enables users to reveal or hide an associated section of content.
@@ -15,12 +28,9 @@ import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes
  *     <DisclosureContent />
  * </Disclosure>
  * ```
- *
- * @prop {boolean} [expanded] -- Whether the Disclosure is expanded and its content visible
- * @prop {boolean} [disabled] -- If set to true, the user cannot interact with this Disclosure
- * @prop {(boolean) => void} [ontoggle] -- Raised when this item is opened or closed
  */
-export default function Disclosure($props: any) {
+export default function Disclosure($props: DisclosureProps) {
+	$props ??= $watch({});
 	$props.expanded ??= false;
 	$props.disabled ??= false;
 
@@ -61,7 +71,7 @@ export default function Disclosure($props: any) {
 			{$props.id}
 			class={`torp-disclosure-item ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
 		</div>

package/dist/Disclosure/DisclosureContent.torp

@@ -1,20 +1,27 @@
 import getId from "../utils/getId";
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
+interface DisclosureContentProps {
+	/** 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 Disclosure */
+	ariaRegion?: boolean,
+}
+
 /**
  * Content for a Disclosure, which can be revealed or hidden by an associated DisclosureTrigger.
- *
- * @prop {string} [id] -- An ID for the DisclosureContent'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 Disclosure
  */
-export default function DisclosureContent($props: any) {
+export default function DisclosureContent($props: DisclosureContentProps) {
+	$props ??= $watch({});
 	$props.id ||= getId();
 
 	const context = $context[DisclosureContextName] as DisclosureContext;
 	if (!context) {
 		throw new Error("DisclosureContent must be contained within a Disclosure");
 	}
-	let $state = $context[DisclosureContextName].state
+	let $state = context.state
 
 	// Set the content ID so that it can be used with aria-controls in DisclosureTrigger
 	$state.contentId = $props.id;
@@ -26,7 +33,7 @@ export default function DisclosureContent($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/Disclosure/DisclosureHeader.torp

@@ -1,5 +1,14 @@
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
+interface DisclosureHeaderProps {
+	/** 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 a Disclosure, which contains the DisclosureTrigger.
  *
@@ -10,15 +19,15 @@ import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes
  *    <DisclosureTrigger />
  * </DisclosureHeader>
  * ```
- *
- * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
-export default function DisclosureHeader($props: any) {
+export default function DisclosureHeader($props: DisclosureHeaderProps) {
+	$props ??= $watch({});
+
 	const context = $context[DisclosureContextName] as DisclosureContext;
 	if (!context) {
 		throw new Error("DisclosureHeader must be contained within a Disclosure");
 	}
-	let $state = $context[DisclosureContextName].state
+	let $state = context.state
 
 	@render {
 		@// TODO: $props.as
@@ -26,7 +35,7 @@ export default function DisclosureHeader($props: any) {
 			{$props.id}
 			class={`torp-disclosure-header ${$props.class ?? ""}`.trim()}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
 		</h4>

package/dist/Disclosure/DisclosureTrigger.torp

@@ -1,10 +1,18 @@
 import getId from "../utils/getId";
 import { DisclosureContextName, type DisclosureContext } from "./DisclosureTypes";
 
+interface DisclosureTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * A header button for a Disclosure, which can be used to reveal or hide an associated DisclosureContent.
  */
-export default function DisclosureTrigger() {
+export default function DisclosureTrigger($props: DisclosureTriggerProps) {
+	$props ??= $watch({});
 	$props.id ||= getId();
 
 	// Get stuff out of the DisclosureContext
@@ -12,7 +20,7 @@ export default function DisclosureTrigger() {
 	if (!context) {
 		throw new Error("DisclosureTrigger must be contained within a Disclosure");
 	}
-	let $state = $context[DisclosureContextName].state;
+	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in DisclosureContent
 	$state.headerId = $props.id;

package/dist/Disclosure/index.d.ts

@@ -1,72 +1,111 @@
 import { type SlotRender } from "@torpor/view";
 
 
+interface DisclosureProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the Disclosure is expanded and its content visible */
+	expanded?: boolean,
+	/** If set to true, the user cannot interact with this Disclosure */
+	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 interactive header that enables users to reveal or hide an associated section of content.
+ *
+ * See [the WAI ARIA guidelines for Disclosures](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+ *
+ * The structure of a Disclosure is:
+ *
+ * ```
+ * <Disclosure>
+ *     <DisclosureHeader>
+ *         <DisclosureTrigger />
+ *     </DisclosureHeader>
+ *     <DisclosureContent />
+ * </Disclosure>
+ * ```
  */
 declare function Disclosure(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: DisclosureProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface DisclosureContentProps {
+	/** 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 Disclosure */
+	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 a Disclosure, which can be revealed or hidden by an associated DisclosureTrigger.
  */
 declare function DisclosureContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: DisclosureContentProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface DisclosureHeaderProps {
+	/** 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 a Disclosure, which contains the DisclosureTrigger.
+ *
+ * The structure of a DisclosureHeader is:
+ * 
+ * ```
+ * <DisclosureHeader>
+ *    <DisclosureTrigger />
+ * </DisclosureHeader>
+ * ```
  */
 declare function DisclosureHeader(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: DisclosureHeaderProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface DisclosureTriggerProps {
+	/** 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 a Disclosure, which can be used to reveal or hide an associated DisclosureContent.
  */
 declare function DisclosureTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: DisclosureTriggerProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;