@torpor/ui 0.0.16 → 0.0.17

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @torpor/ui
 
+## 0.0.17
+
+### Patch Changes
+
+- 819a7d8: Feat: UI TabGroup component
+- Updated dependencies [fb896c6]
+- Updated dependencies [85bccf6]
+  - @torpor/view@0.0.14
+  - @torpor/unplugin@0.1.10
+
 ## 0.0.16
 
 ### Patch Changes

package/dist/TabGroup/TabContent.torp

@@ -0,0 +1,36 @@
+import getId from '../utils/getId';
+import { TabGroupContextName, type TabGroupContext } from './TabGroupTypes';
+
+/**
+ * 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) {
+	$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);
+
+	// Set the content ID so that it can be used with aria-controls in TabTrigger
+	$state.contentId = $props.id;
+
+	@render {
+		<div
+			id={$props.id}
+			class='torp-tab-content'
+			role="tabpanel"
+			aria-labelledby={$state.headerId}
+			data-orientation={$props.orientation}
+			data-state={$state.dataState}
+			data-disabled={$state.dataDisabled}
+		>
+			@if ($state.active) {
+				<:slot />
+			}
+		</div>
+	}
+}

package/dist/TabGroup/TabGroup.torp

@@ -0,0 +1,226 @@
+import { TabGroupContextName, type TabGroupContext, type ItemState } from './TabGroupTypes';
+
+/**
+ * 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>
+ * ```
+ *
+ * @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) {
+	$props.orientation ||= 'horizontal';
+	$props.activation ||= 'automatic';
+	$props.value ||= '';
+
+	interface State {
+		value: string;
+		itemStates: ItemState[];
+	}
+
+	let $state: State = $watch({
+		value: $props.value,
+		itemStates: []
+	})
+
+	// This is used to assign automatic indexes to items where needed
+	let nextHeaderIndex = 0;
+	let nextItemIndex = 0;
+
+	// Set the context to pass down to headers and content, with functions for each item to call
+	let context: TabGroupContext = {
+		registerHeader,
+		registerItem,
+		removeItem,
+		triggerItem,
+		handleHeaderKey,
+		orientation: $props.orientation,
+		activation: $props.activation,
+	};
+	$context[TabGroupContextName] = context;
+
+	$run(() => {
+		// HACK: This should probably be done with setters?
+		let newValue = $state.value;
+
+		// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
+		newValue = newValue?.toString();
+		for (let item of $state.itemStates) {
+			item.active = item.value === newValue;
+		}
+
+		// Set the value
+		$state.value = newValue;
+	});
+
+	$run(() => {
+		$state.itemStates.forEach((s) => s.parentDisabled = $props.disabled);
+	});
+
+	// Dispatch the change event when the value changes
+	// TODO: Should this be a setter instead?
+	$run(() => {
+		if ($props.onchange) {
+			$props.onchange($state.value);
+		}
+	})
+
+	// TODO:
+	//$mount(() => {
+	//	if ($state.value === "" && $state.itemStates.length) {
+	//		$state.value = $state.itemStates[0].value;
+	//	}
+	//})
+
+	function registerHeader(index: number | undefined, value: string | undefined, setFocused: () => void): ItemState {
+		// If an index wasn't set for the header, set it automatically
+		if (!index) {
+			index = nextHeaderIndex++;
+		}
+
+		// Get or add the ItemState at this index
+		const itemState = getItemState(index, value);
+
+		itemState.setFocused = setFocused;
+
+		return itemState;
+	}
+
+	function registerItem(index: number | undefined, value: string | undefined): ItemState {
+		// If an index wasn't set for the item, set it automatically
+		if (!index) {
+			index = nextItemIndex++;
+		}
+
+		// Get or add the ItemState at this index
+		const itemState = getItemState(index, value);
+
+		return itemState;
+	}
+
+	function getItemState(index: number, value: string | undefined): ItemState {
+		// If we already have an item at this index, just return it
+		if ($state.itemStates.length > index) {
+			return $state.itemStates[index];
+		}
+
+		// If a value wasn't set for the item, set it to the index
+		if (!value) {
+			value = index.toString();
+		}
+
+		// Add the item's state to the array
+		const newItemState: ItemState = $watch({
+			index,
+			value,
+			active: value === $state.value,
+			headerId: '',
+			contentId: '',
+			disabled: false,
+			parentDisabled: false,
+			setFocused: () => {},
+			orientation: $props.orientation,
+			activation: $props.activation
+		});
+		$state.itemStates.splice(index, 0, newItemState);
+
+		return newItemState;
+	}
+
+	// TODO: I think this should be done by value
+	function removeItem(itemIndex: number) {
+		// Remove the item and re-index
+		let index = $state.itemStates.findIndex((item) => item.index === itemIndex);
+		if (index !== -1) {
+			$state.itemStates.splice(itemIndex, 1);
+		}
+		$state.itemStates.forEach((item, i) => (item.index = i));
+	}
+
+	function triggerItem(toggleValue: string) {
+		for (let item of $state.itemStates) {
+			// The item is active if it has the supplied value
+			if (item.value === toggleValue) {
+				$state.value = item.value;
+				break;
+			}
+		}
+	}
+
+	function handleHeaderKey(headerIndex: number, e: KeyboardEvent) {
+		switch (e.key) {
+			case 'Left':
+			case 'ArrowLeft': {
+				if ($props.orientation === 'horizontal' && headerIndex > 0) {
+					e.preventDefault();
+					$state.itemStates[headerIndex - 1].setFocused();
+				}
+				break;
+			}
+			case 'Up':
+			case 'ArrowUp': {
+				if ($props.orientation === 'vertical' && headerIndex > 0) {
+					e.preventDefault();
+					$state.itemStates[headerIndex - 1].setFocused();
+				}
+				break;
+			}
+			case 'Right':
+			case 'ArrowRight': {
+				if ($props.orientation === 'horizontal' && headerIndex < $state.itemStates.length - 1) {
+					e.preventDefault();
+					$state.itemStates[headerIndex + 1].setFocused();
+				}
+				break;
+			}
+			case 'Down':
+			case 'ArrowDown': {
+				if ($props.orientation === 'vertical' && headerIndex < $state.itemStates.length - 1) {
+					e.preventDefault();
+					$state.itemStates[headerIndex + 1].setFocused();
+				}
+				break;
+			}
+			case 'Home': {
+				if (headerIndex > 0) {
+					e.preventDefault();
+					$state.itemStates[0].setFocused();
+				}
+				break;
+			}
+			case 'End': {
+				if (headerIndex < $state.itemStates.length - 1) {
+					e.preventDefault();
+					$state.itemStates[$state.itemStates.length - 1].setFocused();
+				}
+				break;
+			}
+		}
+	}
+
+	@render {
+		<div
+			class="torp-tab-group"
+			data-orientation={$props.orientation}
+		>
+			<:slot />
+		</div>
+	}
+}

package/dist/TabGroup/TabGroupTypes.ts

@@ -0,0 +1,38 @@
+export const TabGroupContextName = "TabGroup";
+export const TabItemContextName = "TabItem";
+
+export interface TabGroupContext {
+	/** Called from a header when it is added */
+	registerHeader: (index: number, value: string, setFocused: () => void) => ItemState;
+	/** Called from an item when it is added */
+	registerItem: (index: number, value: string) => ItemState;
+	/** Called from an item when it is removed */
+	removeItem: (index: number) => void;
+	/** Called from an item when it is triggered */
+	triggerItem: (value: string) => void;
+	/** Called from a TabHeader when it receives a keyboard event */
+	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
+	orientation: "horizontal" | "vertical";
+	activation: "automatic" | "manual";
+}
+
+export interface TabItemContext {
+	/** Called when an item is triggered */
+	triggerItem: (value: string) => void;
+	/** Called when a TabHeader receives a keyboard event */
+	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
+	/** The reactive state for an item */
+	state: ItemState;
+}
+
+export interface ItemState {
+	index: number;
+	value: string;
+	active: boolean;
+	headerId: string;
+	contentId: string;
+	disabled: boolean;
+	parentDisabled: boolean;
+	/** Called in the TabGroup when a header needs to be focused */
+	setFocused: () => void;
+}

package/dist/TabGroup/TabHeader.torp

@@ -0,0 +1,60 @@
+import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from './TabGroupTypes';
+
+/**
+ * The header for a tab item, which contains the TabTrigger.
+ *
+ * The structure of an TabHeader is:
+ * 
+ * ```
+ * <TabHeader>
+ * 	<TabTrigger />
+ * </TabHeader>
+ * ```
+ *
+ * @prop {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} as -- The type of HTML header to use
+ */
+export default function TabHeader($props: any) {
+	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);
+
+	const itemContext: TabItemContext = {
+		triggerItem: context.triggerItem,
+		handleHeaderKey: context.handleHeaderKey,
+		state: $state,
+	};
+	$context[TabItemContextName] = itemContext;
+
+	// Remove the item from the parent TabGroup when this item is destroyed
+	$run(() => {
+		return () => {
+			context.removeItem($state.index);
+		}
+	});
+
+	@render {
+		@// TODO: $props.as
+		<h4
+			:class={{
+				'torp-tab-header': true,
+				horizontal: $state.orientation === "horizontal",
+				vertical: $state.orientation === "vertical" }}
+			data-state={$state.dataState}
+			data-disabled={$state.dataDisabled}
+		>
+			<:slot />
+		</h4>
+	}
+
+	@style {
+		.torp-tab-header.horizontal {
+			display: inline-block;
+		}
+
+		.torp-tab-header.vertical {
+			display: block;
+		}
+	}
+}

package/dist/TabGroup/TabList.torp

@@ -0,0 +1,49 @@
+import { TabGroupContextName, TabItemContextName, type TabGroupContext, type TabItemContext } from './TabGroupTypes';
+
+/**
+ * A component that holds the TabHeaders of a TabGroup.
+ * 
+ * The structure of a TabList is:
+ * 
+ * ```
+ * <TabList>
+ * 	<TabHeader>
+ * 		<TabTrigger />
+ * 	</TabHeader>
+ * </TabList>
+ * ```
+ *
+ * @prop {string} ariaLabel -- An ARIA label for describing the tab list to screen readers
+ */
+export default function TabList($props: any) {
+	// Get stuff out of the TabGroupContext
+	const context = $context[TabGroupContextName] as TabGroupContext;
+	if (!context) {
+		throw new Error('TabList must be contained within an 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
+			class='torp-tab-list'
+			role="tablist"
+			aria-label={$props.ariaLabel}
+			aria-orientation={orientation}
+			data-orientation={orientation}
+			tabindex="0"
+			onfocus={handleFocus}
+		>
+			<:slot />
+		</div>
+	}
+}

package/dist/TabGroup/TabTrigger.torp

@@ -0,0 +1,65 @@
+import getId from '../utils/getId';
+import { TabItemContextName, type TabItemContext } from './TabGroupTypes';
+
+/**
+ * A header button for a tab item, which can be used to reveal an associated TabContent.
+ */
+export default function TabTrigger() {
+	let button: HTMLButtonElement;
+
+	$props.id ||= getId();
+
+	// Get stuff out of the TabItemContext
+	const context = $context[TabItemContextName] as TabItemContext;
+	if (!context) {
+		throw new Error('TabTrigger must be contained within an TabItem');
+	}
+	let $state = $context[TabItemContextName].state;
+
+	// Set the header ID so that it can be used with aria-labelledby in TabContent
+	$state.headerId = $props.id;
+
+	// Let the item know how to set the button's focus
+	$state.setFocused = setFocused;
+
+	// This function is called by the parent TabGroup to focus this item's button
+	function setFocused() {
+		button.focus();
+		if ($state.activation === 'automatic') {
+			context.triggerItem($state.value);
+		}
+	}
+
+	function handleClick() {
+		// Pass the value to the triggerItem method in the parent TabGroup which will handle toggling
+		// the value of active for all items (e.g. to close other items if necessary)
+		context.triggerItem($state.value);
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		// Pass the key press up to the parent TabGroup which will handle setting the focused button
+		context.handleHeaderKey($state.index, e);
+	}
+
+	@render {
+		<button
+			type="button"
+			id={$props.id}
+			class='torp-tab-trigger'
+			role="tab"
+			tabindex="-1"
+			disabled={$state.disabled || $state.parentDisabled}
+			aria-selected={$state.active.toString()}
+			aria-disabled={$state.disabled}
+			aria-controls={$state.contentId}
+			data-state={$state.dataState}
+			data-disabled={$state.disabled}
+			data-orientation={$state.orientation}
+			:self={button}
+			onclick={handleClick}
+			onkeydown={handleKey}
+		>
+			<:slot />
+		</button>
+	}
+}

package/dist/TabGroup/index.cjs

@@ -0,0 +1,53 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/TabGroup/index.ts
+var TabGroup_exports = {};
+__export(TabGroup_exports, {
+  TabContent: () => TabContent_default,
+  TabGroup: () => TabGroup_default,
+  TabHeader: () => TabHeader_default,
+  TabList: () => TabList_default,
+  TabTrigger: () => TabTrigger_default
+});
+module.exports = __toCommonJS(TabGroup_exports);
+
+// 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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TabContent,
+  TabGroup,
+  TabHeader,
+  TabList,
+  TabTrigger
+});
+//# sourceMappingURL=index.cjs.map

package/dist/TabGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TabGroup/index.ts"],"sourcesContent":["import TabContent from \"./TabContent.torp\";\nimport TabGroup from \"./TabGroup.torp\";\nimport TabHeader from \"./TabHeader.torp\";\nimport TabList from \"./TabList.torp\";\nimport TabTrigger from \"./TabTrigger.torp\";\n\nexport { TabGroup, TabList, TabHeader, TabTrigger, TabContent };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A","names":[]}

package/dist/TabGroup/index.js

@@ -0,0 +1,22 @@
+// 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

package/dist/TabGroup/index.js.map

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

package/dist/metafile-cjs.json

@@ -1 +1 @@
-{"inputs":{"src/motion/fade.ts":{"bytes":155,"imports":[],"format":"esm"},"src/motion.ts":{"bytes":52,"imports":[{"path":"src/motion/fade.ts","kind":"import-statement","original":"./motion/fade"}],"format":"esm"},"src/Accordion/Accordion.torp":{"bytes":5525,"imports":[]},"src/Accordion/AccordionContent.torp":{"bytes":1189,"imports":[]},"src/Accordion/AccordionHeader.torp":{"bytes":855,"imports":[]},"src/Accordion/AccordionItem.torp":{"bytes":2331,"imports":[]},"src/Accordion/AccordionTrigger.torp":{"bytes":1815,"imports":[]},"src/Accordion/index.ts":{"bytes":349,"imports":[{"path":"src/Accordion/Accordion.torp","kind":"import-statement","original":"./Accordion.torp"},{"path":"src/Accordion/AccordionContent.torp","kind":"import-statement","original":"./AccordionContent.torp"},{"path":"src/Accordion/AccordionHeader.torp","kind":"import-statement","original":"./AccordionHeader.torp"},{"path":"src/Accordion/AccordionItem.torp","kind":"import-statement","original":"./AccordionItem.torp"},{"path":"src/Accordion/AccordionTrigger.torp","kind":"import-statement","original":"./AccordionTrigger.torp"}],"format":"esm"}},"outputs":{"dist/motion.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":487},"dist/motion.cjs":{"imports":[],"exports":[],"entryPoint":"src/motion.ts","inputs":{"src/motion.ts":{"bytesInOutput":130},"src/motion/fade.ts":{"bytesInOutput":92}},"bytes":1160},"dist/Accordion-E6VNLVJW.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/Accordion.torp":{"bytesInOutput":5525}},"bytes":5525},"dist/AccordionContent-HGVMBVT6.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionContent.torp":{"bytesInOutput":1189}},"bytes":1189},"dist/AccordionHeader-YC7XXPRV.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionHeader.torp":{"bytesInOutput":855}},"bytes":855},"dist/AccordionItem-RQ6AWHXL.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionItem.torp":{"bytesInOutput":2331}},"bytes":2331},"dist/AccordionTrigger-7OBA72E2.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionTrigger.torp":{"bytesInOutput":1815}},"bytes":1815},"dist/Accordion/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":557},"dist/Accordion/index.cjs":{"imports":[{"path":"dist/Accordion-E6VNLVJW.torp","kind":"file-loader"},{"path":"dist/AccordionContent-HGVMBVT6.torp","kind":"file-loader"},{"path":"dist/AccordionHeader-YC7XXPRV.torp","kind":"file-loader"},{"path":"dist/AccordionItem-RQ6AWHXL.torp","kind":"file-loader"},{"path":"dist/AccordionTrigger-7OBA72E2.torp","kind":"file-loader"}],"exports":[],"entryPoint":"src/Accordion/index.ts","inputs":{"src/Accordion/index.ts":{"bytesInOutput":349},"src/Accordion/Accordion.torp":{"bytesInOutput":54},"src/Accordion/AccordionContent.torp":{"bytesInOutput":68},"src/Accordion/AccordionHeader.torp":{"bytesInOutput":66},"src/Accordion/AccordionItem.torp":{"bytesInOutput":62},"src/Accordion/AccordionTrigger.torp":{"bytesInOutput":68}},"bytes":1861}}}
+{"inputs":{"src/motion/fade.ts":{"bytes":155,"imports":[],"format":"esm"},"src/motion.ts":{"bytes":52,"imports":[{"path":"src/motion/fade.ts","kind":"import-statement","original":"./motion/fade"}],"format":"esm"},"src/Accordion/Accordion.torp":{"bytes":5525,"imports":[]},"src/Accordion/AccordionContent.torp":{"bytes":1189,"imports":[]},"src/Accordion/AccordionHeader.torp":{"bytes":855,"imports":[]},"src/Accordion/AccordionItem.torp":{"bytes":2331,"imports":[]},"src/Accordion/AccordionTrigger.torp":{"bytes":1815,"imports":[]},"src/Accordion/index.ts":{"bytes":349,"imports":[{"path":"src/Accordion/Accordion.torp","kind":"import-statement","original":"./Accordion.torp"},{"path":"src/Accordion/AccordionContent.torp","kind":"import-statement","original":"./AccordionContent.torp"},{"path":"src/Accordion/AccordionHeader.torp","kind":"import-statement","original":"./AccordionHeader.torp"},{"path":"src/Accordion/AccordionItem.torp","kind":"import-statement","original":"./AccordionItem.torp"},{"path":"src/Accordion/AccordionTrigger.torp","kind":"import-statement","original":"./AccordionTrigger.torp"}],"format":"esm"},"src/TabGroup/TabContent.torp":{"bytes":1004,"imports":[]},"src/TabGroup/TabGroup.torp":{"bytes":5988,"imports":[]},"src/TabGroup/TabHeader.torp":{"bytes":1434,"imports":[]},"src/TabGroup/TabList.torp":{"bytes":1230,"imports":[]},"src/TabGroup/TabTrigger.torp":{"bytes":1881,"imports":[]},"src/TabGroup/index.ts":{"bytes":274,"imports":[{"path":"src/TabGroup/TabContent.torp","kind":"import-statement","original":"./TabContent.torp"},{"path":"src/TabGroup/TabGroup.torp","kind":"import-statement","original":"./TabGroup.torp"},{"path":"src/TabGroup/TabHeader.torp","kind":"import-statement","original":"./TabHeader.torp"},{"path":"src/TabGroup/TabList.torp","kind":"import-statement","original":"./TabList.torp"},{"path":"src/TabGroup/TabTrigger.torp","kind":"import-statement","original":"./TabTrigger.torp"}],"format":"esm"}},"outputs":{"dist/motion.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":487},"dist/motion.cjs":{"imports":[],"exports":[],"entryPoint":"src/motion.ts","inputs":{"src/motion.ts":{"bytesInOutput":130},"src/motion/fade.ts":{"bytesInOutput":92}},"bytes":1160},"dist/Accordion-E6VNLVJW.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/Accordion.torp":{"bytesInOutput":5525}},"bytes":5525},"dist/AccordionContent-HGVMBVT6.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionContent.torp":{"bytesInOutput":1189}},"bytes":1189},"dist/AccordionHeader-YC7XXPRV.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionHeader.torp":{"bytesInOutput":855}},"bytes":855},"dist/AccordionItem-RQ6AWHXL.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionItem.torp":{"bytesInOutput":2331}},"bytes":2331},"dist/AccordionTrigger-7OBA72E2.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionTrigger.torp":{"bytesInOutput":1815}},"bytes":1815},"dist/Accordion/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":557},"dist/Accordion/index.cjs":{"imports":[{"path":"dist/Accordion-E6VNLVJW.torp","kind":"file-loader"},{"path":"dist/AccordionContent-HGVMBVT6.torp","kind":"file-loader"},{"path":"dist/AccordionHeader-YC7XXPRV.torp","kind":"file-loader"},{"path":"dist/AccordionItem-RQ6AWHXL.torp","kind":"file-loader"},{"path":"dist/AccordionTrigger-7OBA72E2.torp","kind":"file-loader"}],"exports":[],"entryPoint":"src/Accordion/index.ts","inputs":{"src/Accordion/index.ts":{"bytesInOutput":349},"src/Accordion/Accordion.torp":{"bytesInOutput":54},"src/Accordion/AccordionContent.torp":{"bytesInOutput":68},"src/Accordion/AccordionHeader.torp":{"bytesInOutput":66},"src/Accordion/AccordionItem.torp":{"bytesInOutput":62},"src/Accordion/AccordionTrigger.torp":{"bytesInOutput":68}},"bytes":1861},"dist/TabContent-47Q6KW7X.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabContent.torp":{"bytesInOutput":1004}},"bytes":1004},"dist/TabGroup-NYWPQAQC.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabGroup.torp":{"bytesInOutput":5988}},"bytes":5988},"dist/TabHeader-MIXZZW3W.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabHeader.torp":{"bytesInOutput":1434}},"bytes":1434},"dist/TabList-RQKKSKQX.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabList.torp":{"bytesInOutput":1230}},"bytes":1230},"dist/TabTrigger-W2D6RBVP.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabTrigger.torp":{"bytesInOutput":1881}},"bytes":1881},"dist/TabGroup/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":481},"dist/TabGroup/index.cjs":{"imports":[{"path":"dist/TabContent-47Q6KW7X.torp","kind":"file-loader"},{"path":"dist/TabGroup-NYWPQAQC.torp","kind":"file-loader"},{"path":"dist/TabHeader-MIXZZW3W.torp","kind":"file-loader"},{"path":"dist/TabList-RQKKSKQX.torp","kind":"file-loader"},{"path":"dist/TabTrigger-W2D6RBVP.torp","kind":"file-loader"}],"exports":[],"entryPoint":"src/TabGroup/index.ts","inputs":{"src/TabGroup/index.ts":{"bytesInOutput":296},"src/TabGroup/TabContent.torp":{"bytesInOutput":56},"src/TabGroup/TabGroup.torp":{"bytesInOutput":52},"src/TabGroup/TabHeader.torp":{"bytesInOutput":54},"src/TabGroup/TabList.torp":{"bytesInOutput":50},"src/TabGroup/TabTrigger.torp":{"bytesInOutput":56}},"bytes":1702}}}

package/dist/metafile-esm.json

@@ -1 +1 @@
-{"inputs":{"src/motion/fade.ts":{"bytes":155,"imports":[],"format":"esm"},"src/motion.ts":{"bytes":52,"imports":[{"path":"src/motion/fade.ts","kind":"import-statement","original":"./motion/fade"}],"format":"esm"},"src/Accordion/Accordion.torp":{"bytes":5525,"imports":[]},"src/Accordion/AccordionContent.torp":{"bytes":1189,"imports":[]},"src/Accordion/AccordionHeader.torp":{"bytes":855,"imports":[]},"src/Accordion/AccordionItem.torp":{"bytes":2331,"imports":[]},"src/Accordion/AccordionTrigger.torp":{"bytes":1815,"imports":[]},"src/Accordion/index.ts":{"bytes":349,"imports":[{"path":"src/Accordion/Accordion.torp","kind":"import-statement","original":"./Accordion.torp"},{"path":"src/Accordion/AccordionContent.torp","kind":"import-statement","original":"./AccordionContent.torp"},{"path":"src/Accordion/AccordionHeader.torp","kind":"import-statement","original":"./AccordionHeader.torp"},{"path":"src/Accordion/AccordionItem.torp","kind":"import-statement","original":"./AccordionItem.torp"},{"path":"src/Accordion/AccordionTrigger.torp","kind":"import-statement","original":"./AccordionTrigger.torp"}],"format":"esm"}},"outputs":{"dist/motion.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":360},"dist/motion.js":{"imports":[],"exports":["fade"],"entryPoint":"src/motion.ts","inputs":{"src/motion/fade.ts":{"bytesInOutput":92},"src/motion.ts":{"bytesInOutput":0}},"bytes":149},"dist/Accordion-E6VNLVJW.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/Accordion.torp":{"bytesInOutput":5525}},"bytes":5525},"dist/AccordionContent-HGVMBVT6.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionContent.torp":{"bytesInOutput":1189}},"bytes":1189},"dist/AccordionHeader-YC7XXPRV.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionHeader.torp":{"bytesInOutput":855}},"bytes":855},"dist/AccordionItem-RQ6AWHXL.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionItem.torp":{"bytesInOutput":2331}},"bytes":2331},"dist/AccordionTrigger-7OBA72E2.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionTrigger.torp":{"bytesInOutput":1815}},"bytes":1815},"dist/Accordion/index.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"dist/Accordion/index.js":{"imports":[{"path":"dist/Accordion-E6VNLVJW.torp","kind":"file-loader"},{"path":"dist/AccordionContent-HGVMBVT6.torp","kind":"file-loader"},{"path":"dist/AccordionHeader-YC7XXPRV.torp","kind":"file-loader"},{"path":"dist/AccordionItem-RQ6AWHXL.torp","kind":"file-loader"},{"path":"dist/AccordionTrigger-7OBA72E2.torp","kind":"file-loader"}],"exports":["Accordion","AccordionContent","AccordionHeader","AccordionItem","AccordionTrigger"],"entryPoint":"src/Accordion/index.ts","inputs":{"src/Accordion/Accordion.torp":{"bytesInOutput":54},"src/Accordion/AccordionContent.torp":{"bytesInOutput":68},"src/Accordion/AccordionHeader.torp":{"bytesInOutput":66},"src/Accordion/AccordionItem.torp":{"bytesInOutput":62},"src/Accordion/AccordionTrigger.torp":{"bytesInOutput":68},"src/Accordion/index.ts":{"bytesInOutput":0}},"bytes":735}}}
+{"inputs":{"src/motion/fade.ts":{"bytes":155,"imports":[],"format":"esm"},"src/motion.ts":{"bytes":52,"imports":[{"path":"src/motion/fade.ts","kind":"import-statement","original":"./motion/fade"}],"format":"esm"},"src/Accordion/Accordion.torp":{"bytes":5525,"imports":[]},"src/Accordion/AccordionContent.torp":{"bytes":1189,"imports":[]},"src/Accordion/AccordionHeader.torp":{"bytes":855,"imports":[]},"src/Accordion/AccordionItem.torp":{"bytes":2331,"imports":[]},"src/Accordion/AccordionTrigger.torp":{"bytes":1815,"imports":[]},"src/Accordion/index.ts":{"bytes":349,"imports":[{"path":"src/Accordion/Accordion.torp","kind":"import-statement","original":"./Accordion.torp"},{"path":"src/Accordion/AccordionContent.torp","kind":"import-statement","original":"./AccordionContent.torp"},{"path":"src/Accordion/AccordionHeader.torp","kind":"import-statement","original":"./AccordionHeader.torp"},{"path":"src/Accordion/AccordionItem.torp","kind":"import-statement","original":"./AccordionItem.torp"},{"path":"src/Accordion/AccordionTrigger.torp","kind":"import-statement","original":"./AccordionTrigger.torp"}],"format":"esm"},"src/TabGroup/TabContent.torp":{"bytes":1004,"imports":[]},"src/TabGroup/TabGroup.torp":{"bytes":5988,"imports":[]},"src/TabGroup/TabHeader.torp":{"bytes":1434,"imports":[]},"src/TabGroup/TabList.torp":{"bytes":1230,"imports":[]},"src/TabGroup/TabTrigger.torp":{"bytes":1881,"imports":[]},"src/TabGroup/index.ts":{"bytes":274,"imports":[{"path":"src/TabGroup/TabContent.torp","kind":"import-statement","original":"./TabContent.torp"},{"path":"src/TabGroup/TabGroup.torp","kind":"import-statement","original":"./TabGroup.torp"},{"path":"src/TabGroup/TabHeader.torp","kind":"import-statement","original":"./TabHeader.torp"},{"path":"src/TabGroup/TabList.torp","kind":"import-statement","original":"./TabList.torp"},{"path":"src/TabGroup/TabTrigger.torp","kind":"import-statement","original":"./TabTrigger.torp"}],"format":"esm"}},"outputs":{"dist/motion.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":360},"dist/motion.js":{"imports":[],"exports":["fade"],"entryPoint":"src/motion.ts","inputs":{"src/motion/fade.ts":{"bytesInOutput":92},"src/motion.ts":{"bytesInOutput":0}},"bytes":149},"dist/Accordion-E6VNLVJW.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/Accordion.torp":{"bytesInOutput":5525}},"bytes":5525},"dist/AccordionContent-HGVMBVT6.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionContent.torp":{"bytesInOutput":1189}},"bytes":1189},"dist/AccordionHeader-YC7XXPRV.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionHeader.torp":{"bytesInOutput":855}},"bytes":855},"dist/AccordionItem-RQ6AWHXL.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionItem.torp":{"bytesInOutput":2331}},"bytes":2331},"dist/AccordionTrigger-7OBA72E2.torp":{"imports":[],"exports":[],"inputs":{"src/Accordion/AccordionTrigger.torp":{"bytesInOutput":1815}},"bytes":1815},"dist/Accordion/index.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"dist/Accordion/index.js":{"imports":[{"path":"dist/Accordion-E6VNLVJW.torp","kind":"file-loader"},{"path":"dist/AccordionContent-HGVMBVT6.torp","kind":"file-loader"},{"path":"dist/AccordionHeader-YC7XXPRV.torp","kind":"file-loader"},{"path":"dist/AccordionItem-RQ6AWHXL.torp","kind":"file-loader"},{"path":"dist/AccordionTrigger-7OBA72E2.torp","kind":"file-loader"}],"exports":["Accordion","AccordionContent","AccordionHeader","AccordionItem","AccordionTrigger"],"entryPoint":"src/Accordion/index.ts","inputs":{"src/Accordion/Accordion.torp":{"bytesInOutput":54},"src/Accordion/AccordionContent.torp":{"bytesInOutput":68},"src/Accordion/AccordionHeader.torp":{"bytesInOutput":66},"src/Accordion/AccordionItem.torp":{"bytesInOutput":62},"src/Accordion/AccordionTrigger.torp":{"bytesInOutput":68},"src/Accordion/index.ts":{"bytesInOutput":0}},"bytes":735},"dist/TabContent-47Q6KW7X.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabContent.torp":{"bytesInOutput":1004}},"bytes":1004},"dist/TabGroup-NYWPQAQC.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabGroup.torp":{"bytesInOutput":5988}},"bytes":5988},"dist/TabHeader-MIXZZW3W.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabHeader.torp":{"bytesInOutput":1434}},"bytes":1434},"dist/TabList-RQKKSKQX.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabList.torp":{"bytesInOutput":1230}},"bytes":1230},"dist/TabTrigger-W2D6RBVP.torp":{"imports":[],"exports":[],"inputs":{"src/TabGroup/TabTrigger.torp":{"bytesInOutput":1881}},"bytes":1881},"dist/TabGroup/index.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"dist/TabGroup/index.js":{"imports":[{"path":"dist/TabContent-47Q6KW7X.torp","kind":"file-loader"},{"path":"dist/TabGroup-NYWPQAQC.torp","kind":"file-loader"},{"path":"dist/TabHeader-MIXZZW3W.torp","kind":"file-loader"},{"path":"dist/TabList-RQKKSKQX.torp","kind":"file-loader"},{"path":"dist/TabTrigger-W2D6RBVP.torp","kind":"file-loader"}],"exports":["TabContent","TabGroup","TabHeader","TabList","TabTrigger"],"entryPoint":"src/TabGroup/index.ts","inputs":{"src/TabGroup/TabContent.torp":{"bytesInOutput":56},"src/TabGroup/TabGroup.torp":{"bytesInOutput":52},"src/TabGroup/TabHeader.torp":{"bytesInOutput":54},"src/TabGroup/TabList.torp":{"bytesInOutput":50},"src/TabGroup/TabTrigger.torp":{"bytesInOutput":56},"src/TabGroup/index.ts":{"bytesInOutput":0}},"bytes":605}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@torpor/ui",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Accessible, unstyled components for use in your Torpor front-end",
   "type": "module",
   "main": "dist/index.cjs",
@@ -12,6 +12,11 @@
       "import": "./dist/Accordion/index.js",
       "require": "./dist/Accordion/index.cjs"
     },
+    "./TabGroup": {
+      "types": "./dist/TabGroup/index.d.ts",
+      "import": "./dist/TabGroup/index.js",
+      "require": "./dist/TabGroup/index.cjs"
+    },
     "./motion": {
       "types": "./dist/motion.d.ts",
       "import": "./dist/motion.js",
@@ -40,8 +45,8 @@
     "vitest": "^3.1.3"
   },
   "dependencies": {
-    "@torpor/view": "^0.0.13",
-    "@torpor/unplugin": "^0.1.9"
+    "@torpor/unplugin": "^0.1.10",
+    "@torpor/view": "^0.0.14"
   },
   "scripts": {
     "build": "tsc --noEmit && tsup",