@torpor/ui 0.1.7 → 0.2.1

package/dist/Popover/index.d.ts

@@ -0,0 +1,191 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface PopoverProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether the popover is modal. If true, an overlay should be supplied to obscure outside content, and only the popover content will be visible to screen readers  */
+	modal?: boolean,
+	/** Whether the popover is visible  */
+	visible?: boolean,
+	/** The element to anchor this popover to, as an alternative to supplying a PopoverTrigger  */
+	anchor?: HTMLElement,
+	/** The position to display this popover at if it's contextual, as an alternative to supplying a PopoverTriggerContextual  */
+	position?: Point,
+	/** A function to be called when the user selects a response */
+	callback?: ((value: any) => void),
+}
+
+/**
+ * A popover that can be used to show rich content or obtain information from a user.
+ *
+ * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ *
+ * The structure of a Popover is:
+ *
+ * ```
+ * <Popover>
+ * 	<PopoverOverlay /> (optional, if modal)
+ * 	<PopoverTrigger/PopoverTriggerContextual/PopoverTriggerHover /> (optional)
+ * 	<PopoverContent/PopoverContentAnchored/PopoverContentContextual />
+ * </Popover>
+ * ```
+ */
+declare function Popover(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PopoverProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PopoverContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The content that is displayed for a Popover when it is open, such as a Dialog
+ * in the middle of the screen or a div that slides in from the side.
+ */
+declare function PopoverContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PopoverContentProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PopoverContentAnchoredProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Where the popover will be shown, relative to the popover button */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popover will be aligned, relative to the popover button */
+	alignment?: "start" | "center" | "end",
+}
+
+/**
+ * The content that is displayed for a Popover when it is open, displayed
+ * alongside an element.
+ */
+declare function PopoverContentAnchored(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PopoverContentAnchoredProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PopoverContentContextualProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The content that is displayed for a Popover when it is open, displayed at the
+ * position that the user right-clicked.
+ */
+declare function PopoverContentContextual(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PopoverContentContextualProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PopoverOverlayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
+ */
+declare function PopoverOverlay(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PopoverOverlayProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PopoverTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The button that causes a Popover to appear or disappear.
+ */
+declare function PopoverTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PopoverTriggerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PopoverTriggerContextualProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The element that causes a Popover to appear or disappear when right-clicked.
+ */
+declare function PopoverTriggerContextual(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PopoverTriggerContextualProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface PopoverTriggerHoverProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * The div that causes a Popover to appear or disappear when hovered.
+ */
+declare function PopoverTriggerHover(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: PopoverTriggerHoverProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Popover, PopoverContent, PopoverContentAnchored, PopoverContentContextual, PopoverOverlay, PopoverTrigger, PopoverTriggerContextual, PopoverTriggerHover };

package/dist/TabGroup/TabContent.torp

@@ -1,35 +1,41 @@
 import getId from "../utils/getId";
 import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
 
+interface TabContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * Content for a TabGroup, which can be revealed or hidden by an associated TabTrigger.
- *
- * @prop {string} [id] -- An ID for the TabContent's div container
  */
-export default function TabContent($props: any) {
+export default function TabContent($props: TabContentProps) {
+	$props ??= $watch({});
 	$props.id ||= getId();
 
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabContent must be contained within a TabGroup");
 	}
-	let $state = $context[TabGroupContextName].registerItem($props.index, $props.value);
+	let $state = context.registerItem($props.index, $props.value);
 
 	// Set the content ID so that it can be used with aria-controls in TabTrigger
 	$state.contentId = $props.id;
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-content ${$props.class ?? ""}`.trim()}
 			role="tabpanel"
 			aria-labelledby={$state.headerId}
 			data-orientation={$props.orientation}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.active) {
-				<:slot />
+				<slot />
 			}
 		</div>
 	}

package/dist/TabGroup/TabGroup.torp

@@ -1,5 +1,22 @@
 import { TabGroupContextName, type TabGroupContext, type ItemState } from "./TabGroupTypes";
 
+interface TabGroupProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The orientation of the tab buttons, which affects keyboard navigation */
+	orientation?: "horizontal" | "vertical",
+	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
+	activation?: "automatic" | "manual",
+	/** The value of the active TabContent */
+	value?: string | string[],
+	/** If set to true, the user cannot interact with any items in the TabGroup */
+	disabled?: boolean,
+	/** Raised when the active item has changed */
+	onchange?: (value: string | string[]) => void
+}
+
 /**
  * A list of interactive headings coupled with layered sections of content that
  * enable users to reveal a single section of content at a time.
@@ -18,14 +35,9 @@ import { TabGroupContextName, type TabGroupContext, type ItemState } from "./Tab
  * 	<TabContent />
  * </TabGroup>
  * ```
- *
- * @prop {"horizontal" | "vertical"} orientation -- The orientation of the tab buttons, which affects keyboard navigation
- * @prop {"automatic" | "manual"} activation -- How tabs are activated; if automatic they are shown on focus, if manual they must be clicked
- * @prop {string | string[]} value -- The value of the active TabContent
- * @prop {boolean} disabled -- If set to true, the user cannot interact with any items in the TabGroup
- * @prop {(value: string | string[]) => void} [onchange] -- Raised when the active item has changed
  */
-export default function TabGroup($props: any) {
+export default function TabGroup($props: TabGroupProps) {
+	$props ??= $watch({});
 	$props.orientation ||= "horizontal";
 	$props.activation ||= "automatic";
 	$props.value ||= "";
@@ -63,7 +75,7 @@ export default function TabGroup($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
@@ -74,7 +86,7 @@ export default function TabGroup($props: any) {
 		if (firstChange) {
 			firstChange = false;
 		} else if (ev) {
-			ev(value);
+			ev(value!);
 		}
 	});
 
@@ -218,11 +230,11 @@ export default function TabGroup($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-group ${$props.class ?? ""}`.trim()}
 			data-orientation={$props.orientation}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/TabGroup/TabHeader.torp

@@ -1,5 +1,14 @@
 import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
 
+interface TabHeaderProps {
+	/** 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 tab item, which contains the TabTrigger.
  *
@@ -10,15 +19,15 @@ import { TabGroupContextName, TabItemContextName, type TabGroupContext, type Tab
  * 	<TabTrigger />
  * </TabHeader>
  * ```
- *
- * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
-export default function TabHeader($props: any) {
+export default function TabHeader($props: TabHeaderProps) {
+	$props ??= $watch({});
+
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabHeader must be contained within a TabGroup");
 	}
-	let $state = $context[TabGroupContextName].registerHeader($props.index, $props.value);
+	let $state = context.registerHeader($props.index, $props.value);
 
 	const itemContext: TabItemContext = {
 		triggerItem: context.triggerItem,
@@ -37,16 +46,16 @@ export default function TabHeader($props: any) {
 	@render {
 		@// TODO: $props.as
 		<h4
-			id={$props.id}
+			{$props.id}
 			class={[
 				"torp-tab-header",
 				$props.class,
 				$state.orientation
 			]}
 			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}
 

package/dist/TabGroup/TabList.torp

@@ -1,4 +1,13 @@
-import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
+import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
+
+interface TabListProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the tab list to screen readers */
+	ariaLabel?: string,
+}
 
 /**
  * A component that holds the TabHeaders of a TabGroup.
@@ -12,10 +21,10 @@ import { TabGroupContextName, TabItemContextName, type TabGroupContext, type Tab
  * 	</TabHeader>
  * </TabList>
  * ```
- *
- * @prop {string} ariaLabel -- An ARIA label for describing the tab list to screen readers
  */
-export default function TabList($props: any) {
+export default function TabList($props: TabListProps) {
+	$props ??= $watch({});
+
 	// Get stuff out of the TabGroupContext
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
@@ -35,7 +44,7 @@ export default function TabList($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-list ${$props.class ?? ""}`.trim()}
 			role="tablist"
 			aria-label={$props.ariaLabel}
@@ -44,7 +53,7 @@ export default function TabList($props: any) {
 			tabindex="0"
 			onfocus={handleFocus}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/TabGroup/TabTrigger.torp

@@ -1,20 +1,28 @@
 import getId from "../utils/getId";
 import { TabItemContextName, type TabItemContext } from "./TabGroupTypes";
 
+interface TabTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * A header button for a tab item, which can be used to reveal an associated TabContent.
  */
-export default function TabTrigger() {
-	let button: HTMLButtonElement;
-
+export default function TabTrigger($props: TabTriggerProps) {
+	$props ??= $watch({});
 	$props.id ||= getId();
 
+	let button: HTMLButtonElement;
+
 	// Get stuff out of the TabItemContext
 	const context = $context[TabItemContextName] as TabItemContext;
 	if (!context) {
 		throw new Error("TabTrigger must be contained within a TabHeader");
 	}
-	let $state = $context[TabItemContextName].state;
+	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in TabContent
 	$state.headerId = $props.id;
@@ -44,7 +52,7 @@ export default function TabTrigger() {
 	@render {
 		<button
 			type="button"
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-trigger ${$props.class ?? ""}`.trim()}
 			role="tab"
 			tabindex="-1"
@@ -59,7 +67,7 @@ export default function TabTrigger() {
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/TabGroup/index.d.ts

@@ -0,0 +1,150 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface TabContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * Content for a TabGroup, which can be revealed or hidden by an associated TabTrigger.
+ */
+declare function TabContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TabContentProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TabGroupProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The orientation of the tab buttons, which affects keyboard navigation */
+	orientation?: "horizontal" | "vertical",
+	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
+	activation?: "automatic" | "manual",
+	/** The value of the active TabContent */
+	value?: string | string[],
+	/** If set to true, the user cannot interact with any items in the TabGroup */
+	disabled?: boolean,
+	/** Raised when the active item has changed */
+	onchange?: (value: string | string[]) => void
+}
+
+/**
+ * A list of interactive headings coupled with layered sections of content that
+ * enable users to reveal a single section of content at a time.
+ *
+ * See [the WAI ARIA guidelines for Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
+ *
+ * The structure of a TabGroup is:
+ *
+ * ```
+ * <TabGroup>
+ * 	<TabList>
+ * 		<TabHeader>
+ * 			<TabTrigger />
+ * 		</TabHeader>
+ * 	</TabList>
+ * 	<TabContent />
+ * </TabGroup>
+ * ```
+ */
+declare function TabGroup(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TabGroupProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TabHeaderProps {
+	/** 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 tab item, which contains the TabTrigger.
+ *
+ * The structure of a TabHeader is:
+ * 
+ * ```
+ * <TabHeader>
+ * 	<TabTrigger />
+ * </TabHeader>
+ * ```
+ */
+declare function TabHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TabHeaderProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TabListProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** An ARIA label for describing the tab list to screen readers */
+	ariaLabel?: string,
+}
+
+/**
+ * A component that holds the TabHeaders of a TabGroup.
+ * 
+ * The structure of a TabList is:
+ * 
+ * ```
+ * <TabList>
+ * 	<TabHeader>
+ * 		<TabTrigger />
+ * 	</TabHeader>
+ * </TabList>
+ * ```
+ */
+declare function TabList(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TabListProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface TabTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
+/**
+ * A header button for a tab item, which can be used to reveal an associated TabContent.
+ */
+declare function TabTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: TabTriggerProps,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { TabContent, TabGroup, TabHeader, TabList, TabTrigger };

package/dist/icons/ArrowDown.torp

@@ -0,0 +1,15 @@
+export default function ArrowDown($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<polygon points="25,40 50,70 75,40" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/ArrowLeft.torp

@@ -0,0 +1,15 @@
+export default function ArrowLeft($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<polygon points="60,25 30,50 60,75" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/ArrowRight.torp

@@ -0,0 +1,15 @@
+export default function ArrowRight($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<polygon points="40,25 70,50 40,75" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/ArrowUp.torp

@@ -0,0 +1,15 @@
+export default function ArrowUp($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<polygon points="25,60 50,30 75,60" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/Bars.torp

@@ -0,0 +1,17 @@
+export default function Bars($props: any) {
+	@render {
+		<svg
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M10,25 L90,25" />
+				<path d="M10,50 L90,50" />
+				<path d="M10,75 L90,75" />
+			</g>
+		</svg>
+	}
+}