@torpor/ui 0.4.0 → 1.0.0

package/dist/TabGroup/TabHeader.torp

@@ -1,26 +1,31 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from "./TabGroupTypes";
+import {
+	type TabGroupContext,
+	TabGroupContextName,
+	type TabItemContext,
+	TabItemContextName,
+} from "./TabGroupTypes";
 
 interface TabHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+	style?: StyleValue;
 	/** The index of this header's item */
-	index?: number,
+	index?: number;
 	/** The value for this header's item */
-	value?: string,
+	value?: string;
+	/** If set to true, the user cannot interact with this header */
+	disabled?: boolean;
 }
 
 /**
  * The header for a tab item, which contains the TabTrigger.
  *
  * The structure of a TabHeader is:
- * 
+ *
  * ```
  * <TabHeader>
  * 	<TabTrigger />
@@ -28,20 +33,22 @@ interface TabHeaderProps {
  * ```
  */
 export default function TabHeader($props: TabHeaderProps | undefined) {
-	let button: HTMLButtonElement;
-
 	const context = $context[TabGroupContextName] as TabGroupContext;
 	if (!context) {
 		throw new Error("TabHeader must be contained within a TabGroup");
 	}
-	let $state = context.registerHeader($props?.index, $props?.value);
+	let $state = context.registerHeader($props?.index, $props?.value, $props?.disabled);
 
 	const itemContext: TabItemContext = {
 		triggerItem: context.triggerItem,
 		handleHeaderKey: context.handleHeaderKey,
 		state: $state,
-		orientation: context.orientation,
-		activation: context.activation
+		get orientation() {
+			return context.orientation;
+		},
+		get activation() {
+			return context.activation;
+		},
 	};
 	$context[TabItemContextName] = itemContext;
 
@@ -49,12 +56,11 @@ export default function TabHeader($props: TabHeaderProps | undefined) {
 	$run(() => {
 		return () => {
 			context.removeItem($state.index);
-		}
+		};
 	});
 
 	@render {
-		@// TODO: $props?.as
-		<h4
+		<div
 			{$props?.id}
 			class={[
 				"torp-tab-header",
@@ -62,11 +68,9 @@ export default function TabHeader($props: TabHeaderProps | undefined) {
 				context.orientation
 			]}
 			data-state={$state.active ? "active" : "inactive"}
-			data-disabled={$state.disabled ? "true" : undefined}
-			&ref={button}
 		>
 			<slot />
-		</h4>
+		</div>
 	}
 
 	@style {

package/dist/TabGroup/TabList.torp

@@ -1,22 +1,22 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { TabGroupContextName, type TabGroupContext } from "./TabGroupTypes";
+import { type TabGroupContext, TabGroupContextName } from "./TabGroupTypes";
 
 interface TabListProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the tab list to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 }
 
 /**
  * A component that holds the TabHeaders of a TabGroup.
- * 
+ *
  * The structure of a TabList is:
- * 
+ *
  * ```
  * <TabList>
  * 	<TabHeader>
@@ -31,17 +31,6 @@ export default function TabList($props: TabListProps | undefined) {
 	if (!context) {
 		throw new Error("TabList must be contained within a TabGroup");
 	}
-	// TODO: const { orientation } = context;
-	const orientation = context.orientation;
-
-	function handleFocus(e: FocusEvent & { currentTarget: EventTarget & HTMLElement }) {
-		// TODO: Should this be the first button?
-		const el = e.currentTarget.childNodes[0];
-		if (el instanceof HTMLElement) {
-			el.focus();
-			e.preventDefault();
-		}
-	}
 
 	@render {
 		<div
@@ -50,10 +39,8 @@ export default function TabList($props: TabListProps | undefined) {
 			{$props?.style}
 			role="tablist"
 			aria-label={$props?.ariaLabel}
-			aria-orientation={orientation}
-			data-orientation={orientation}
-			tabindex="0"
-			onfocus={handleFocus}
+			aria-orientation={context.orientation}
+			data-orientation={context.orientation}
 		>
 			<slot />
 		</div>

package/dist/TabGroup/TabTrigger.torp

@@ -1,14 +1,14 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { TabItemContextName, type TabItemContext } from "./TabGroupTypes";
+import { type TabItemContext, TabItemContextName } from "./TabGroupTypes";
 
 interface TabTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -58,13 +58,12 @@ export default function TabTrigger($props: TabTriggerProps | undefined) {
 			class={["torp-tab-trigger", $props?.class]}
 			{$props?.style}
 			role="tab"
-			tabindex="-1"
+			tabindex={$state.active ? "0" : "-1"}
 			disabled={$state.disabled || $state.parentDisabled}
-			aria-selected={$state.active.toString()}
-			aria-disabled={$state.disabled}
+			aria-selected={$state.active ? "true" : "false"}
+			aria-disabled={$state.disabled || $state.parentDisabled}
 			aria-controls={$state.contentId}
 			data-state={$state.active ? "active" : "inactive"}
-			data-disabled={$state.disabled}
 			data-orientation={context.orientation}
 			&ref={button}
 			onclick={handleClick}

package/dist/TabGroup/index.d.ts

@@ -5,13 +5,13 @@ interface TabContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The index of this item */
-	index?: number,
+	index?: number;
 	/** The value for this item */
-	value?: string,
+	value?: string;
 }
 
 /**
@@ -31,19 +31,19 @@ interface TabGroupProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The orientation of the tab buttons, which affects keyboard navigation */
-	orientation?: "horizontal" | "vertical",
+	orientation?: "horizontal" | "vertical";
 	/** How tabs are activated; if automatic they are shown on focus, if manual they must be clicked */
-	activation?: "automatic" | "manual",
+	activation?: "automatic" | "manual";
 	/** The value of the active TabContent */
-	value?: string,
+	value?: Bindable<string | undefined>;
 	/** If set to true, the user cannot interact with any items in the TabGroup */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the active item has changed */
-	onchange?: (value: string | string[]) => void
+	onchange?: (value: string | string[]) => void;
 }
 
 /**
@@ -79,22 +79,22 @@ interface TabHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+	style?: StyleValue;
 	/** The index of this header's item */
-	index?: number,
+	index?: number;
 	/** The value for this header's item */
-	value?: string,
+	value?: string;
+	/** If set to true, the user cannot interact with this header */
+	disabled?: boolean;
 }
 
 /**
  * The header for a tab item, which contains the TabTrigger.
  *
  * The structure of a TabHeader is:
- * 
+ *
  * ```
  * <TabHeader>
  * 	<TabTrigger />
@@ -115,18 +115,18 @@ interface TabListProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the tab list to screen readers */
-	ariaLabel?: string,
+	ariaLabel?: string;
 }
 
 /**
  * A component that holds the TabHeaders of a TabGroup.
- * 
+ *
  * The structure of a TabList is:
- * 
+ *
  * ```
  * <TabList>
  * 	<TabHeader>
@@ -149,9 +149,9 @@ interface TabTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -165,4 +165,4 @@ declare function TabTrigger(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { TabContent, TabGroup, TabHeader, TabList, TabTrigger };
+export { TabContent, TabGroup, TabHeader, TabList, TabTrigger };

package/dist/TabGroup/index.js

@@ -1,22 +1,6 @@
-// src/TabGroup/TabContent.torp
-import TabContent_default from "./TabContent.torp";
-
-// src/TabGroup/TabGroup.torp
-import TabGroup_default from "./TabGroup.torp";
-
-// src/TabGroup/TabHeader.torp
-import TabHeader_default from "./TabHeader.torp";
-
-// src/TabGroup/TabList.torp
-import TabList_default from "./TabList.torp";
-
-// src/TabGroup/TabTrigger.torp
-import TabTrigger_default from "./TabTrigger.torp";
-export {
-  TabContent_default as TabContent,
-  TabGroup_default as TabGroup,
-  TabHeader_default as TabHeader,
-  TabList_default as TabList,
-  TabTrigger_default as TabTrigger
-};
-//# sourceMappingURL=index.js.map
+import TabContent from "./TabContent.torp";
+import TabGroup from "./TabGroup.torp";
+import TabHeader from "./TabHeader.torp";
+import TabList from "./TabList.torp";
+import TabTrigger from "./TabTrigger.torp";
+export { TabContent, TabGroup, TabHeader, TabList, TabTrigger };