@torpor/ui 0.2.0 → 0.2.1

package/dist/TabGroup/index.d.ts

@@ -1,90 +1,148 @@
 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,
+}
+
 /**
- * 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 TabGroup, which can be revealed or hidden by an associated TabTrigger.
  */
 declare function TabContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$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
+}
+
 /**
- * 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 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: any,
+	$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"
+}
+
 /**
- * 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 tab item, which contains the TabTrigger.
+ *
+ * The structure of a TabHeader is:
+ * 
+ * ```
+ * <TabHeader>
+ * 	<TabTrigger />
+ * </TabHeader>
+ * ```
  */
 declare function TabHeader(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$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,
+}
+
 /**
- * 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 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: any,
+	$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,
+}
+
 /**
- * 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 tab item, which can be used to reveal an associated TabContent.
  */
 declare function TabTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: TabTriggerProps,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;

package/dist/icons/ArrowDown.torp

@@ -1,8 +1,8 @@
-export default function ArrowDown() {
+export default function ArrowDown($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ArrowLeft.torp

@@ -1,8 +1,8 @@
-export default function ArrowLeft() {
+export default function ArrowLeft($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ArrowRight.torp

@@ -1,8 +1,8 @@
-export default function ArrowRight() {
+export default function ArrowRight($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ArrowUp.torp

@@ -1,8 +1,8 @@
-export default function ArrowUp() {
+export default function ArrowUp($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/Bars.torp

@@ -1,8 +1,8 @@
-export default function Bars() {
+export default function Bars($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/Check.torp

@@ -1,8 +1,8 @@
-export default function Check() {
+export default function Check($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ChevronDown.torp

@@ -1,8 +1,8 @@
-export default function ChevronDown() {
+export default function ChevronDown($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ChevronLeft.torp

@@ -1,8 +1,8 @@
-export default function ChevronLeft() {
+export default function ChevronLeft($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ChevronRight.torp

@@ -1,8 +1,8 @@
-export default function ChevronRight() {
+export default function ChevronRight($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/ChevronUp.torp

@@ -1,8 +1,8 @@
-export default function ChevronUp() {
+export default function ChevronUp($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/Cross.torp

@@ -1,8 +1,8 @@
-export default function Cross() {
+export default function Cross($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/Loading.torp

@@ -1,8 +1,8 @@
-export default function Loading() {
+export default function Loading($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="20"

package/dist/icons/Minus.torp

@@ -1,8 +1,8 @@
-export default function Minus() {
+export default function Minus($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/Plus.torp

@@ -1,8 +1,8 @@
-export default function Plus() {
+export default function Plus($props: any) {
 	@render {
 		<svg
-			{$props.id}
-			class={`torp-icon ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-icon ${$props?.class ?? ""}`.trim()}
 			viewBox="0 0 100 100"
 			stroke-linejoin="round"
 			stroke-width="12"

package/dist/icons/index.d.ts

@@ -1,252 +1,140 @@
 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 ArrowDown(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 ArrowLeft(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 ArrowRight(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 ArrowUp(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 Bars(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 Check(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 ChevronDown(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 ChevronLeft(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 ChevronRight(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 ChevronUp(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 Cross(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 Loading(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 Minus(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$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 Plus(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: any,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;