@torpor/ui 0.1.7 → 0.2.1

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;
 
@@ -25,10 +34,10 @@ export default function DialogHeader($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-dialog-footer ${$props.class ?? ""}`.trim()}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/Dialog/index.d.ts

@@ -0,0 +1,135 @@
+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,
+}
+
+/**
+ * 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: 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,
+}
+
+/**
+ * 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: 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,
+}
+
+/**
+ * A button that is placed in a DialogFooter and signals a response by a user.
+ * 
+ */
+declare function DialogButton(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$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,
+}
+
+/**
+ * The footer for a Dialog, which may contain one or more DialogButtons.
+ */
+declare function DialogFooter(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$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,
+}
+
+/**
+ * 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: DialogHeaderProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Dialog, DialogBody, DialogButton, DialogFooter, DialogHeader };

package/dist/Disclosure/Disclosure.torp

@@ -0,0 +1,79 @@
+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.
+ *
+ * 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>
+ * ```
+ */
+export default function Disclosure($props: DisclosureProps) {
+	$props ??= $watch({});
+	$props.expanded ??= false;
+	$props.disabled ??= false;
+
+	let $state: DisclosureState = $watch({
+		expanded: $props.expanded && $props.expanded !== "false",
+		disabled: $props.disabled,
+		get dataState() {
+			return this.expanded ? "open" : "closed";
+		},
+	});
+
+	// Update $state with $props
+	$run(() => {
+		$state.expanded = $props.expanded && $props.expanded !== "false";
+		$state.disabled = $props.disabled;
+	});
+
+	// Put stuff into a DisclosureContext
+	const itemContext: DisclosureContext = {
+		state: $state,
+	};
+	$context[DisclosureContextName] = itemContext;
+
+	// Dispatch the toggle event when the value of expanded changes
+	let firstToggle = true;
+	$run(() => {
+		const ev = $props.ontoggle;
+		const expanded = $state.expanded;
+		if (firstToggle) {
+			firstToggle = false;
+		} else if (ev) {
+			ev(expanded);
+		}
+	});
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-disclosure-item ${$props.class ?? ""}`.trim()}
+			data-state={$state.dataState}
+			data-disabled={$state.disabled ? "true" : undefined}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/Disclosure/DisclosureContent.torp

@@ -0,0 +1,43 @@
+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.
+ */
+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.state
+
+	// Set the content ID so that it can be used with aria-controls in DisclosureTrigger
+	$state.contentId = $props.id;
+
+	@render {
+		<div
+			{$props.id}
+			class={`torp-disclosure-content ${$props.class ?? ""}`.trim()}
+			role={$props.ariaRegion ? "region" : undefined}
+			aria-labelledby={$state.headerId}
+			data-state={$state.dataState}
+			data-disabled={$state.disabled ? "true" : undefined}
+		>
+			@if ($state.expanded) {
+				<slot />
+			}
+		</div>
+	}
+}

package/dist/Disclosure/DisclosureHeader.torp

@@ -0,0 +1,43 @@
+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.
+ *
+ * The structure of a DisclosureHeader is:
+ * 
+ * ```
+ * <DisclosureHeader>
+ *    <DisclosureTrigger />
+ * </DisclosureHeader>
+ * ```
+ */
+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.state
+
+	@render {
+		@// TODO: $props.as
+		<h4
+			{$props.id}
+			class={`torp-disclosure-header ${$props.class ?? ""}`.trim()}
+			data-state={$state.dataState}
+			data-disabled={$state.disabled ? "true" : undefined}
+		>
+			<slot />
+		</h4>
+	}
+}

package/dist/Disclosure/DisclosureTrigger.torp

@@ -0,0 +1,44 @@
+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($props: DisclosureTriggerProps) {
+	$props ??= $watch({});
+	$props.id ||= getId();
+
+	// Get stuff out of the DisclosureContext
+	const context = $context[DisclosureContextName] as DisclosureContext;
+	if (!context) {
+		throw new Error("DisclosureTrigger must be contained within a Disclosure");
+	}
+	let $state = context.state;
+
+	// Set the header ID so that it can be used with aria-labelledby in DisclosureContent
+	$state.headerId = $props.id;
+
+	@render {
+		<button
+			type="button"
+			{$props.id}
+			class={`torp-disclosure-trigger ${$props.class ?? ""}`.trim()}
+			disabled={$state.disabled || $state.parentDisabled}
+			aria-expanded={$state.expanded.toString()}
+			aria-disabled={$state.disabled}
+			aria-controls={$state.contentId}
+			data-state={$state.dataState}
+			data-disabled={$state.disabled}
+			onclick={() => $state.expanded = !$state.expanded}
+		>
+			<slot />
+		</button>
+	}
+}

package/dist/Disclosure/DisclosureTypes.ts

@@ -0,0 +1,14 @@
+export const DisclosureContextName = "Disclosure";
+
+export interface DisclosureContext {
+	/** The reactive state for a Disclosure */
+	state: DisclosureState;
+}
+
+export interface DisclosureState {
+	headerId: string;
+	contentId: string;
+	expanded: boolean;
+	disabled: boolean;
+	dataState: "open" | "closed";
+}

package/dist/Disclosure/index.d.ts

@@ -0,0 +1,113 @@
+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,
+}
+
+/**
+ * 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: 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,
+}
+
+/**
+ * Content for a Disclosure, which can be revealed or hidden by an associated DisclosureTrigger.
+ */
+declare function DisclosureContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$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",
+}
+
+/**
+ * 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: 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,
+}
+
+/**
+ * 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: DisclosureTriggerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Disclosure, DisclosureContent, DisclosureHeader, DisclosureTrigger };

package/dist/Disclosure/index.js

@@ -0,0 +1,18 @@
+// src/Disclosure/Disclosure.torp
+import Disclosure_default from "./Disclosure.torp";
+
+// src/Disclosure/DisclosureContent.torp
+import DisclosureContent_default from "./DisclosureContent.torp";
+
+// src/Disclosure/DisclosureHeader.torp
+import DisclosureHeader_default from "./DisclosureHeader.torp";
+
+// src/Disclosure/DisclosureTrigger.torp
+import DisclosureTrigger_default from "./DisclosureTrigger.torp";
+export {
+  Disclosure_default as Disclosure,
+  DisclosureContent_default as DisclosureContent,
+  DisclosureHeader_default as DisclosureHeader,
+  DisclosureTrigger_default as DisclosureTrigger
+};
+//# sourceMappingURL=index.js.map

package/dist/Disclosure/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/{src/Offscreen/Offscreen.torp → dist/Drawer/Drawer.torp}

@@ -1,6 +1,16 @@
 
-export default function Offscreen($props: any) {
-	$props.visible ||= true;
+interface DrawerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	visible?: boolean,
+	position?: "left" | "right",
+}
+
+export default function Drawer($props: DrawerProps) {
+	$props ??= $watch({});
+	$props.visible ??= true;
 	$props.position ||= "left";
 
 	let offscreen: HTMLElement | undefined;
@@ -66,25 +76,16 @@ export default function Offscreen($props: any) {
 		}
 	}
 
-	function close() {
-		$props.visible = false;
-		if ($props.onclose) {
-			$props.onclose()
-		}
-	}
-
 	@render {
 		@if ($props.visible) {
-			<div onclick={close} >
-				<div
-					id={$props.id}
-					class={`torp-offscreen ${$props.class ?? ""}`.trim()}
-					style="position: fixed;"
-					:transition={transitionArgs()}
-					&ref={offscreen}
-				>
-					<:slot />
-				</div>
+			<div
+				{$props.id}
+				class={`torp-offscreen ${$props.class ?? ""}`.trim()}
+				style="position: fixed;"
+				transition={transitionArgs()}
+				&ref={offscreen}
+			>
+				<slot />
 			</div>
 		}
 	}

package/dist/Drawer/index.d.ts

@@ -0,0 +1,21 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface DrawerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	visible?: boolean,
+	position?: "left" | "right",
+}
+
+declare function Drawer(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DrawerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Drawer };

package/dist/Drawer/index.js

@@ -0,0 +1,6 @@
+// src/Drawer/Drawer.torp
+import Drawer_default from "./Drawer.torp";
+export {
+  Drawer_default as Drawer
+};
+//# sourceMappingURL=index.js.map

package/dist/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}