@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/navigation/stepper/stepper.d.mts

@@ -0,0 +1,19 @@
+import { FC, OlHTMLAttributes, Ref } from "react";
+//#region src/components/navigation/stepper/stepper.d.ts
+export type StepperStep = Readonly<{
+  label: string;
+  description?: string;
+}>;
+type Props = {
+  steps: readonly StepperStep[];
+  /** いまの段（0 始まり）。 */
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  /** 済んだ段を押して戻れるようにする。 */
+  interactive?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  ref?: Ref<HTMLOListElement>;
+} & Omit<OlHTMLAttributes<HTMLOListElement>, 'className' | 'style' | 'children' | 'onChange' | 'defaultValue'>;
+export declare const Stepper: FC<Props>;
+//#endregion

package/dist/components/navigation/stepper/stepper.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import sr_only_module_default from "../../_internal/sr-only.module.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
+import { CheckIcon } from "../../icons/lucide.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import stepper_module_default from "./stepper.module.mjs";
+import { clsx } from "clsx";
+import { useRef } from "react";
+import { flushSync } from "react-dom";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/stepper/stepper.tsx
+const MARKER = {
+	complete: stepper_module_default.markerComplete,
+	current: stepper_module_default.markerCurrent,
+	upcoming: stepper_module_default.markerUpcoming
+};
+const Stepper = ({ steps, value, defaultValue, onChange, interactive = false, orientation = "horizontal", ref, ...rest }) => {
+	const messages = getMessages();
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? 0,
+		onChange
+	});
+	const vertical = orientation === "vertical";
+	const currentRef = useRef(null);
+	return /* @__PURE__ */ jsx("ol", {
+		...rest,
+		className: clsx(stepper_module_default.root, vertical ? stepper_module_default.rootVertical : stepper_module_default.rootHorizontal),
+		ref,
+		children: steps.map((step, index) => {
+			const status = index < current ? "complete" : index === current ? "current" : "upcoming";
+			const isLast = index === steps.length - 1;
+			const marker = /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: clsx("writing-h", stepper_module_default.marker, MARKER[status]),
+				children: status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : index + 1
+			});
+			const connector = isLast ? null : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: clsx(stepper_module_default.connector, vertical ? stepper_module_default.connectorVertical : stepper_module_default.connectorHorizontal, status === "complete" && stepper_module_default.connectorComplete)
+			});
+			const text = /* @__PURE__ */ jsxs("span", {
+				className: stepper_module_default.text,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: clsx(stepper_module_default.label, status === "upcoming" && stepper_module_default.labelUpcoming),
+						children: step.label
+					}),
+					step.description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+						className: stepper_module_default.description,
+						children: step.description
+					}),
+					status === "complete" ? /* @__PURE__ */ jsx("span", {
+						className: sr_only_module_default.srOnly,
+						children: messages.stepperComplete
+					}) : null
+				]
+			});
+			const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [marker, text] });
+			const bodyLayout = clsx(stepper_module_default.body, vertical ? stepper_module_default.bodyVertical : stepper_module_default.bodyHorizontal, interactive && stepper_module_default.interactive);
+			return /* @__PURE__ */ jsxs("li", {
+				"aria-current": status === "current" ? "step" : void 0,
+				className: clsx(stepper_module_default.item, vertical ? stepper_module_default.itemVertical : stepper_module_default.itemHorizontal),
+				children: [interactive && status === "complete" ? /* @__PURE__ */ jsx("button", {
+					className: clsx(bodyLayout, stepper_module_default.button, focus_ring_module_default.ring),
+					onClick: (event) => {
+						const button = event.currentTarget;
+						flushSync(() => {
+							setCurrent(index);
+						});
+						if (!button.isConnected) currentRef.current?.focus();
+					},
+					type: "button",
+					children: body
+				}) : /* @__PURE__ */ jsx("span", {
+					className: clsx(bodyLayout, interactive && focus_ring_module_default.ring),
+					ref: status === "current" ? currentRef : void 0,
+					tabIndex: interactive && status === "current" ? -1 : void 0,
+					children: body
+				}), connector]
+			}, index);
+		})
+	});
+};
+//#endregion
+export { Stepper };

package/dist/components/navigation/stepper/stepper.module.mjs

@@ -0,0 +1,29 @@
+import './stepper.css';
+//#region src/components/navigation/stepper/stepper.module.css
+var stepper_module_default = {
+	"body": "WjZwvW_body",
+	"bodyHorizontal": "WjZwvW_bodyHorizontal",
+	"bodyVertical": "WjZwvW_bodyVertical",
+	"button": "WjZwvW_button",
+	"connector": "WjZwvW_connector",
+	"connectorComplete": "WjZwvW_connectorComplete",
+	"connectorHorizontal": "WjZwvW_connectorHorizontal",
+	"connectorVertical": "WjZwvW_connectorVertical",
+	"description": "WjZwvW_description",
+	"interactive": "WjZwvW_interactive",
+	"item": "WjZwvW_item",
+	"itemHorizontal": "WjZwvW_itemHorizontal",
+	"itemVertical": "WjZwvW_itemVertical",
+	"label": "WjZwvW_label",
+	"labelUpcoming": "WjZwvW_labelUpcoming",
+	"marker": "WjZwvW_marker",
+	"markerComplete": "WjZwvW_markerComplete",
+	"markerCurrent": "WjZwvW_markerCurrent",
+	"markerUpcoming": "WjZwvW_markerUpcoming",
+	"root": "WjZwvW_root",
+	"rootHorizontal": "WjZwvW_rootHorizontal",
+	"rootVertical": "WjZwvW_rootVertical",
+	"text": "WjZwvW_text"
+};
+//#endregion
+export { stepper_module_default as default };

package/dist/components/navigation/table-of-contents/index.d.mts

@@ -0,0 +1,2 @@
+import { TableOfContents, TableOfContentsItem } from "./table-of-contents.mjs";
+export { TableOfContents, type TableOfContentsItem };

package/dist/components/navigation/table-of-contents/index.mjs

@@ -0,0 +1,2 @@
+import { TableOfContents } from "./table-of-contents.mjs";
+export { TableOfContents };

package/dist/components/navigation/table-of-contents/table-of-contents.css

@@ -0,0 +1,17 @@
+@layer properties, theme, base;
+
+@layer components {
+  .SmKc1G_root {
+    gap: calc(var(--spacing) * 1);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .SmKc1G_nested {
+    gap: calc(var(--spacing) * .5);
+    flex-direction: column;
+    display: flex;
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/table-of-contents/table-of-contents.d.mts

@@ -0,0 +1,12 @@
+import { FC, HTMLAttributes } from "react";
+//#region src/components/navigation/table-of-contents/table-of-contents.d.ts
+export type TableOfContentsItem = {
+  id: string;
+  label: string;
+  children?: readonly TableOfContentsItem[];
+};
+export declare const TableOfContents: FC<{
+  items: readonly TableOfContentsItem[];
+  label?: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'children' | 'aria-labelledby'>>;
+//#endregion

package/dist/components/navigation/table-of-contents/table-of-contents.mjs

@@ -0,0 +1,94 @@
+"use client";
+import { getMessages } from "../../../i18n/current.mjs";
+import { NAV_LIST_CLASS_NAME, NAV_TITLE_CLASS_NAME, navLinkClassName } from "../../_internal/nav-link.mjs";
+import table_of_contents_module_default from "./table-of-contents.module.mjs";
+import { useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation/table-of-contents/table-of-contents.tsx
+const idsOf = (items) => items.flatMap((item) => [item.id, ...idsOf(item.children ?? [])]);
+const TOLERANCE = 2;
+const blockStartOf = (heading, rect) => {
+	const mode = getComputedStyle(heading).writingMode;
+	if (mode.startsWith("horizontal")) return rect.top;
+	if (mode.endsWith("-lr")) return rect.left;
+	return document.documentElement.clientWidth - rect.right;
+};
+const isScrolledToEnd = () => {
+	const root = document.scrollingElement ?? document.documentElement;
+	return (root.scrollHeight > root.clientHeight || root.scrollWidth > root.clientWidth) && root.scrollHeight - root.clientHeight - Math.abs(root.scrollTop) <= 1 && root.scrollWidth - root.clientWidth - Math.abs(root.scrollLeft) <= 1;
+};
+const resolveActive = (ids) => {
+	let active = null;
+	const present = [];
+	for (const id of ids) {
+		const heading = document.querySelector(`#${CSS.escape(id)}`);
+		if (heading === null) continue;
+		const rect = heading.getBoundingClientRect();
+		if (rect.width === 0 && rect.height === 0) continue;
+		present.push(id);
+		const margin = Number.parseFloat(getComputedStyle(heading).scrollMarginBlockStart);
+		if (blockStartOf(heading, rect) <= margin + TOLERANCE) active = id;
+	}
+	return isScrolledToEnd() ? present.at(-1) ?? active : active;
+};
+const useActiveHeading = (ids) => {
+	const [active, setActive] = useState(null);
+	const key = ids.join("\n");
+	useEffect(() => {
+		const targets = key === "" ? [] : key.split("\n");
+		let frame = 0;
+		const update = () => {
+			frame = 0;
+			setActive(resolveActive(targets));
+		};
+		const request = () => {
+			if (frame === 0) frame = requestAnimationFrame(update);
+		};
+		window.addEventListener("scroll", request, { passive: true });
+		window.addEventListener("resize", request);
+		const resize = new ResizeObserver(request);
+		resize.observe(document.body);
+		request();
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("scroll", request);
+			window.removeEventListener("resize", request);
+			resize.disconnect();
+		};
+	}, [key]);
+	return active;
+};
+const Items = ({ items, activeId, depth }) => /* @__PURE__ */ jsx("ul", {
+	className: depth === 0 ? NAV_LIST_CLASS_NAME : table_of_contents_module_default.nested,
+	children: items.map((item) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
+		"aria-current": item.id === activeId ? "location" : void 0,
+		className: navLinkClassName(item.id === activeId, depth),
+		href: `#${encodeURIComponent(item.id)}`,
+		children: item.label
+	}), item.children !== void 0 && item.children.length > 0 ? /* @__PURE__ */ jsx(Items, {
+		activeId,
+		depth: depth + 1,
+		items: item.children
+	}) : null] }, item.id))
+});
+const TableOfContents = ({ items, label, ...rest }) => {
+	const messages = getMessages();
+	const titleId = useId();
+	const activeId = useActiveHeading(idsOf(items));
+	return /* @__PURE__ */ jsxs("nav", {
+		...rest,
+		"aria-labelledby": titleId,
+		className: table_of_contents_module_default.root,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: NAV_TITLE_CLASS_NAME,
+			id: titleId,
+			children: label ?? messages.tableOfContents
+		}), /* @__PURE__ */ jsx(Items, {
+			activeId,
+			depth: 0,
+			items
+		})]
+	});
+};
+//#endregion
+export { TableOfContents };

package/dist/components/navigation/table-of-contents/table-of-contents.module.mjs

@@ -0,0 +1,8 @@
+import './table-of-contents.css';
+//#region src/components/navigation/table-of-contents/table-of-contents.module.css
+var table_of_contents_module_default = {
+	"nested": "SmKc1G_nested",
+	"root": "SmKc1G_root"
+};
+//#endregion
+export { table_of_contents_module_default as default };

package/dist/components/navigation/tabs/index.d.mts

@@ -1,2 +1,19 @@
-import { Tabs } from "./tabs.mjs";
-export { Tabs };
+//#region src/components/navigation/tabs/index.d.ts
+export declare const Tabs: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    defaultSelectedId?: string | null;
+    selectedId?: string;
+    onChange?: (id: string) => void;
+    ids: [string, ...string[]];
+  }>>;
+  readonly List: import("react").FC<import("react").PropsWithChildren<{
+    label: string;
+  }>>;
+  readonly Tab: import("react").FC<import("react").PropsWithChildren<{
+    id: string;
+  }>>;
+  readonly Panel: import("react").FC<import("react").PropsWithChildren<{
+    id: string;
+  }>>;
+};
+//#endregion

package/dist/components/navigation/tabs/index.mjs

@@ -1,2 +1,10 @@
-import { Tabs } from "./tabs.mjs";
+import { List, Panel, Root, Tab } from "./tabs.mjs";
+//#region src/components/navigation/tabs/index.ts
+const Tabs = {
+	Root,
+	List,
+	Tab,
+	Panel
+};
+//#endregion
 export { Tabs };

package/dist/components/navigation/tabs/tabs.css

@@ -0,0 +1,70 @@
+@layer properties, theme, base;
+
+@layer components {
+  .puC4KG_root {
+    gap: calc(var(--spacing) * 1);
+    padding: calc(var(--spacing) * .5);
+    flex-direction: column;
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .puC4KG_list {
+    border-block-end-width: 1px;
+    border-color: var(--color-border-base);
+    padding: calc(var(--spacing) * .5);
+    overflow-wrap: normal;
+    display: flex;
+    position: relative;
+    overflow: auto hidden;
+
+    @container style(--writing: vertical) {
+      overflow: hidden auto;
+    }
+  }
+
+  .puC4KG_indicator {
+    block-size: calc(var(--spacing) * 1);
+    pointer-events: none;
+    background-color: var(--color-primary-border);
+    position: absolute;
+    inset-block-start: calc(anchor(self-end) - var(--spacing) * .5);
+    inset-inline-start: anchor(self-start);
+    inset-inline-end: anchor(self-end);
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition-property: inset;
+      transition-duration: var(--duration-moderate);
+      transition-timing-function: var(--easing-in-out);
+    }
+  }
+
+  .puC4KG_tab {
+    cursor: pointer;
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--easing-out);
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    .puC4KG_unselected:hover {
+      background-color: var(--color-primary-bg-subtle);
+      color: var(--color-primary-fg);
+    }
+  }
+
+  .puC4KG_panel {
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2);
+    flex-grow: 1;
+  }
+}
+
+@layer utilities;

package/dist/components/navigation/tabs/tabs.d.mts

@@ -1,21 +1,18 @@
 import { FC, PropsWithChildren } from "react";
 //#region src/components/navigation/tabs/tabs.d.ts
-declare const Tabs: {
-  readonly Root: FC<PropsWithChildren<{
-    defaultSelectedId?: string | null;
-    selectedId?: string;
-    onChange?: (id: string) => void;
-    ids: [string, ...string[]];
-  }>>;
-  readonly List: FC<PropsWithChildren<{
-    label: string;
-  }>>;
-  readonly Tab: FC<PropsWithChildren<{
-    id: string;
-  }>>;
-  readonly Panel: FC<PropsWithChildren<{
-    id: string;
-  }>>;
-};
-//#endregion
-export { Tabs };
+export declare const Root: FC<PropsWithChildren<{
+  defaultSelectedId?: string | null;
+  selectedId?: string;
+  onChange?: (id: string) => void;
+  ids: [string, ...string[]];
+}>>;
+export declare const List: FC<PropsWithChildren<{
+  label: string;
+}>>;
+export declare const Tab: FC<PropsWithChildren<{
+  id: string;
+}>>;
+export declare const Panel: FC<PropsWithChildren<{
+  id: string;
+}>>;
+//#endregion

package/dist/components/navigation/tabs/tabs.mjs

@@ -1,21 +1,27 @@
 "use client";
-import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
-import { cn } from "../../../helpers/cn.mjs";
+import focus_ring_module_default from "../../_internal/focus-ring.module.mjs";
 import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
-import { useEffect, useId, useMemo, useRef } from "react";
+import tabs_module_default from "./tabs.module.mjs";
+import { clsx } from "clsx";
+import { ViewTransition, startTransition, useCallback, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/tabs/tabs.tsx
 const toAnchorName = (rootId) => `--ao-tab-${rootId.replaceAll(/[^a-zA-Z0-9_-]/gu, "")}`;
 const [TabsProvider, useTabsState] = createSafeContext("useTabsState must be used within a TabsProvider");
 const Root = ({ defaultSelectedId = null, selectedId, onChange, ids, children }) => {
 	const defaultIndex = defaultSelectedId !== null && defaultSelectedId !== "" ? ids.indexOf(defaultSelectedId) : 0;
-	const [currentId, setSelectedId] = useControllableState({
+	const [currentId, setCurrentId] = useControllableState({
 		value: selectedId,
 		defaultValue: defaultSelectedId ?? ids[defaultIndex] ?? ids[0],
 		onChange
 	});
+	const setSelectedId = useCallback((id) => {
+		startTransition(() => {
+			setCurrentId(id);
+		});
+	}, [setCurrentId]);
 	const rootId = useId();
 	const contextValue = useMemo(() => ({
 		rootId,
@@ -31,7 +37,7 @@ const Root = ({ defaultSelectedId = null, selectedId, onChange, ids, children })
 	return /* @__PURE__ */ jsx(TabsProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "flex flex-col gap-1 overflow-x-auto p-0.5",
+			className: tabs_module_default.root,
 			children
 		})
 	});
@@ -39,19 +45,19 @@ const Root = ({ defaultSelectedId = null, selectedId, onChange, ids, children })
 const [TabsListProvider, useTabsListState] = createSafeContext("useTabListState must be used within a TabListProvider");
 const List = ({ label, children }) => {
 	const { rootId } = useTabsState();
-	const setFocusRef = useRef(false);
-	const listRef = useRef(null);
-	const writingMode = useWritingMode(listRef);
+	const tabsRef = useRef(/* @__PURE__ */ new Map());
+	const [tablist, setTablist] = useState(null);
+	const writingMode = useWritingMode(tablist);
 	const listContextValue = useMemo(() => ({
-		setFocusRef,
+		tabsRef,
 		writingMode
 	}), [writingMode]);
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-label": label,
 		"aria-orientation": writingMode === "vertical" ? "vertical" : "horizontal",
-		className: "border-border-base vertical:border-b-0 vertical:border-l vertical:overflow-x-hidden vertical:overflow-y-auto relative flex overflow-x-auto overflow-y-hidden border-b p-0.5 wrap-normal",
+		className: tabs_module_default.list,
 		id: `${rootId}-tablist`,
-		ref: listRef,
+		ref: setTablist,
 		role: "tablist",
 		style: { anchorScope: toAnchorName(rootId) },
 		children: [/* @__PURE__ */ jsx(TabsListProvider, {
@@ -59,50 +65,48 @@ const List = ({ label, children }) => {
 			children
 		}), /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
-			className: "ao-tab-indicator bg-primary-border",
+			className: tabs_module_default.indicator,
 			style: { positionAnchor: toAnchorName(rootId) }
 		})]
 	});
 };
 const Tab = ({ id, children }) => {
 	const { rootId, ids, selectedId, setSelectedId } = useTabsState();
-	const { setFocusRef, writingMode } = useTabsListState();
-	const ref = useRef(null);
+	const { tabsRef, writingMode } = useTabsListState();
 	const activeIndex = ids.indexOf(selectedId);
 	const index = ids.indexOf(id);
-	useEffect(() => {
-		if (activeIndex === index && setFocusRef.current) {
-			ref.current?.focus();
-			setFocusRef.current = false;
-		}
-	}, [
-		activeIndex,
-		index,
-		setFocusRef
-	]);
-	const moveTo = (direction) => {
-		const nextActiveIndex = direction === 1 ? index === ids.length - 1 ? 0 : index + 1 : index === 0 ? ids.length - 1 : index - 1;
-		setSelectedId(ids[nextActiveIndex] ?? ids[0]);
-		setFocusRef.current = true;
+	const handleKeyDown = (event) => {
+		const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+		const [previousKey, nextKey] = writingMode === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+		const target = {
+			[previousKey]: (index - 1 + ids.length) % ids.length,
+			[nextKey]: (index + 1) % ids.length,
+			Home: 0,
+			End: ids.length - 1
+		}[event.key];
+		const targetId = target === void 0 ? void 0 : ids[target];
+		if (targetId === void 0) return;
+		event.preventDefault();
+		if (targetId === id) return;
+		tabsRef.current.get(targetId)?.focus();
+		setSelectedId(targetId);
 	};
 	return /* @__PURE__ */ jsx("div", {
 		"aria-controls": selectedId === id ? `${rootId}-panel-${id}` : void 0,
 		"aria-selected": selectedId === id,
-		className: cn("ao-tab relative cursor-pointer rounded-lg p-2 transition-colors", selectedId !== id && "hover:bg-primary-bg-subtle hover:text-primary-fg", FOCUS_RING),
+		className: clsx(tabs_module_default.tab, selectedId !== id && tabs_module_default.unselected, focus_ring_module_default.ring),
 		id: `${rootId}-tab-${id}`,
 		onClick: () => {
 			setSelectedId(id);
 		},
-		onKeyDown: (e) => {
-			const prevKey = writingMode === "vertical" ? "ArrowUp" : "ArrowLeft";
-			const nextKey = writingMode === "vertical" ? "ArrowDown" : "ArrowRight";
-			if (e.key === prevKey) {
-				moveTo(-1);
+		onKeyDown: handleKeyDown,
+		ref: (element) => {
+			if (element === null) {
+				tabsRef.current.delete(id);
 				return;
 			}
-			if (e.key === nextKey) moveTo(1);
+			tabsRef.current.set(id, element);
 		},
-		ref,
 		role: "tab",
 		style: selectedId === id ? { anchorName: toAnchorName(rootId) } : void 0,
 		tabIndex: activeIndex === index ? 0 : -1,
@@ -112,19 +116,18 @@ const Tab = ({ id, children }) => {
 const Panel = ({ id, children }) => {
 	const { rootId, selectedId } = useTabsState();
 	if (selectedId !== id) return null;
-	return /* @__PURE__ */ jsx("div", {
-		"aria-labelledby": `${rootId}-tab-${id}`,
-		className: cn("grow rounded-lg p-2", FOCUS_RING),
-		id: `${rootId}-panel-${id}`,
-		role: "tabpanel",
-		children
+	return /* @__PURE__ */ jsx(ViewTransition, {
+		default: "none",
+		enter: "auto",
+		exit: "auto",
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-labelledby": `${rootId}-tab-${id}`,
+			className: clsx(tabs_module_default.panel, focus_ring_module_default.ring),
+			id: `${rootId}-panel-${id}`,
+			role: "tabpanel",
+			children
+		})
 	});
 };
-const Tabs = {
-	Root,
-	List,
-	Tab,
-	Panel
-};
 //#endregion
-export { Tabs };
+export { List, Panel, Root, Tab };

package/dist/components/navigation/tabs/tabs.module.mjs

@@ -0,0 +1,12 @@
+import './tabs.css';
+//#region src/components/navigation/tabs/tabs.module.css
+var tabs_module_default = {
+	"indicator": "puC4KG_indicator",
+	"list": "puC4KG_list",
+	"panel": "puC4KG_panel",
+	"root": "puC4KG_root",
+	"tab": "puC4KG_tab",
+	"unselected": "puC4KG_unselected"
+};
+//#endregion
+export { tabs_module_default as default };

package/dist/components/observers/fragment-instance.d.mts

@@ -0,0 +1 @@
+export {}

package/dist/components/observers/in-view/in-view.d.mts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from "react";
+//#region src/components/observers/in-view/in-view.d.ts
+export declare const InView: FC<{
+  children: ReactNode;
+  onChange: (isInView: boolean) => void;
+  root?: Element | null;
+  rootMargin?: string;
+  threshold?: number;
+  once?: boolean;
+}>;
+//#endregion