@torpor/ui 0.1.7 → 0.2.0

package/dist/Popover/PopoverContentContextual.torp

@@ -10,7 +10,7 @@ import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
  */
 export default function PopoverContentContextual($props: any) {	
 	let div: HTMLDivElement;
-
+	let shown = false;
 	let closeOnClick = false;
 
 	// Get stuff out of the PopoverContext
@@ -20,42 +20,45 @@ export default function PopoverContentContextual($props: any) {
 	}
 	let $state = context.state;
 
-	let first = true;
 	$run(() => {
-		let visible = $state.visible;
+		if (!$state.visible) {
+			hide();
+		}
+	});
+
+	function show() {
+		shown = true;
+
+		// HACK: Because this Contextual could be shown with a click, we need to wait for another mousedown
+		// before we close on click. Otherwise the click immediately bubbles to the document
+		closeOnClick = false;
+		addDocumentEvent("mousedown", handleDocumentMouseDown);
+		addDocumentEvent("click", handleDocumentClick);
 
-		if (first) {
-			first = false;
-			return;
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
+		if (context.focusFirstElement) {
+			context.focusFirstElement();
 		}
+	}
+
+	function hide() {
+		if (!shown) return;
+
+		removeDocumentEvent("mousedown", handleDocumentMouseDown);
+		removeDocumentEvent("click", handleDocumentClick);
 
-		if (visible) {
-			// HACK: Because this Contextual could be shown with a click, we need to wait for another mousedown
-			// before we close on click. Otherwise the click immediately bubbles to the document
-			closeOnClick = false;
-			addDocumentEvent("mousedown", handleDocumentMouseDown);
-			addDocumentEvent("click", handleDocumentClick);
-			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
-			//await tick();
-			setPosition();
-			if (context.focusFirstElement) {
-				context.focusFirstElement();
-			}
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.addEventListener("resize", setPosition);
-			scrollParent.addEventListener("scroll", setPosition);
-		} else {
-			removeDocumentEvent("mousedown", handleDocumentMouseDown);
-			removeDocumentEvent("click", handleDocumentClick);
-			// Stop listening for window resize and focus the anchor element per WAI guidelines
-			const scrollParent = getScrollParent(context.anchorElement)
-			scrollParent.removeEventListener("resize", setPosition);
-			scrollParent.removeEventListener("scroll", setPosition);
-			if (context.anchorElement?.focus) {
-				context.anchorElement.focus();
-			}
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const scrollParent = getScrollParent(context.anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (context.anchorElement?.focus) {
+			context.anchorElement.focus();
 		}
-	});
+	}
 
 	function handleDocumentMouseDown() {
 		closeOnClick = true;
@@ -77,7 +80,7 @@ export default function PopoverContentContextual($props: any) {
 			throw new Error("ContextualContent must have an anchor element");
 		}
 
-		if (div && $state.position) {
+		if ($state.position) {
 			setContextPosition(context.anchorElement, div, $state.position);
 		}
 	}
@@ -85,12 +88,12 @@ export default function PopoverContentContextual($props: any) {
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-popover-content-contextual ${$props.class ?? ""}`.trim()}
 				&ref={div}
-				:onmount={(el) => setContextPosition(context.anchorElement, el, $state.position)}
+				onmount={show}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}

package/dist/Popover/PopoverOverlay.torp

@@ -18,12 +18,12 @@ export default function PopoverOverlay($props: any) {
 	@render {
 		@if ($state.visible) {
 			<div
-				id={$props.id}
+				{$props.id}
 				class={`torp-popover-overlay ${$props.class ?? ""}`.trim()}
 				tabindex="-1"
-				:onmount={(el) => disableScroll(el)}
+				onmount={(el) => disableScroll(el)}
 			>
-				<:slot />
+				<slot />
 			</div>
 		}
 	}

package/dist/Popover/PopoverTrigger.torp

@@ -18,12 +18,12 @@ export default function PopoverTrigger($props: any) {
 	@render {
 		<button
 			type="button"
-			id={$props.id}
+			{$props.id}
 			class={`torp-popover-trigger ${$props.class ?? ""}`.trim()}
 			onclick={handleClick}
 			&ref={context.anchorElement}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/Popover/PopoverTriggerContextual.torp

@@ -26,12 +26,12 @@ export default function PopoverTriggerContextual($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-popover-trigger-contextual ${$props.class ?? ""}`.trim()}
 			oncontextmenu={handleContextual}
 			&ref={context.anchorElement}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/Popover/PopoverTriggerHover.torp

@@ -27,12 +27,12 @@ export default function PopoverTriggerHover($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-popover-trigger-hover ${$props.class ?? ""}`.trim()}
-			:onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
+			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/Popover/index.d.ts

@@ -0,0 +1,146 @@
+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.
+ */
+declare function Popover(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function PopoverContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function PopoverContentAnchored(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function PopoverContentContextual(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function PopoverOverlay(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function PopoverTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function PopoverTriggerContextual(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function PopoverTriggerHover(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { Popover, PopoverContent, PopoverContentAnchored, PopoverContentContextual, PopoverOverlay, PopoverTrigger, PopoverTriggerContextual, PopoverTriggerHover };

package/dist/TabGroup/TabContent.torp

@@ -20,7 +20,7 @@ export default function TabContent($props: any) {
 
 	@render {
 		<div
-			id={$props.id}
+			{$props.id}
 			class={`torp-tab-content ${$props.class ?? ""}`.trim()}
 			role="tabpanel"
 			aria-labelledby={$state.headerId}
@@ -29,7 +29,7 @@ export default function TabContent($props: any) {
 			data-disabled={$state.dataDisabled}
 		>
 			@if ($state.active) {
-				<:slot />
+				<slot />
 			}
 		</div>
 	}

package/dist/TabGroup/TabGroup.torp

@@ -218,11 +218,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

@@ -37,7 +37,7 @@ export default function TabHeader($props: any) {
 	@render {
 		@// TODO: $props.as
 		<h4
-			id={$props.id}
+			{$props.id}
 			class={[
 				"torp-tab-header",
 				$props.class,
@@ -46,7 +46,7 @@ export default function TabHeader($props: any) {
 			data-state={$state.dataState}
 			data-disabled={$state.dataDisabled}
 		>
-			<:slot />
+			<slot />
 		</h4>
 	}
 

package/dist/TabGroup/TabList.torp

@@ -35,7 +35,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 +44,7 @@ export default function TabList($props: any) {
 			tabindex="0"
 			onfocus={handleFocus}
 		>
-			<:slot />
+			<slot />
 		</div>
 	}
 }

package/dist/TabGroup/TabTrigger.torp

@@ -44,7 +44,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 +59,7 @@ export default function TabTrigger() {
 			onclick={handleClick}
 			onkeydown={handleKey}
 		>
-			<:slot />
+			<slot />
 		</button>
 	}
 }

package/dist/TabGroup/index.d.ts

@@ -0,0 +1,92 @@
+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.
+ */
+declare function TabContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function TabGroup(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function TabHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function TabList(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: any,
+	$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.
+ */
+declare function TabTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props?: Record<PropertyKey, any>,
+	$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() {
+	@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() {
+	@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() {
+	@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() {
+	@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() {
+	@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>
+	}
+}

package/dist/icons/Check.torp

@@ -0,0 +1,15 @@
+export default function Check() {
+	@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,55 L35,80 L90,25" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/ChevronDown.torp

@@ -0,0 +1,15 @@
+export default function ChevronDown() {
+	@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,30 L50,70 L90,30" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/ChevronLeft.torp

@@ -0,0 +1,15 @@
+export default function ChevronLeft() {
+	@render {
+		<svg
+			{$props.id}
+			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M70,10 L30,50 L70,90" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/ChevronRight.torp

@@ -0,0 +1,15 @@
+export default function ChevronRight() {
+	@render {
+		<svg
+			{$props.id}
+			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			viewBox="0 0 100 100"
+			stroke-linejoin="round"
+			stroke-width="12"
+		>
+			<g>
+				<path d="M30,10 L70,50 L30,90" fill="none" />
+			</g>
+		</svg>
+	}
+}

package/dist/icons/ChevronUp.torp

@@ -0,0 +1,15 @@
+export default function ChevronUp() {
+	@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,70 L50,30 L90,70" fill="none" />
+			</g>
+		</svg>
+	}
+}