@k8ordo/ui 2.0.0 → 2.2.0

package/dist/components/navigation/side-nav/side-nav.module.mjs

@@ -0,0 +1,11 @@
+import './side-nav.css';
+//#region src/components/navigation/side-nav/side-nav.module.css
+var side_nav_module_default = {
+	"chevron": "_2RqvcG_chevron",
+	"group": "_2RqvcG_group",
+	"root": "_2RqvcG_root",
+	"sub": "_2RqvcG_sub",
+	"summary": "_2RqvcG_summary"
+};
+//#endregion
+export { side_nav_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Stepper, StepperStep } from "./stepper.mjs";
+export { Stepper, type StepperStep };

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

@@ -0,0 +1 @@
+export { Stepper } from "./stepper.mjs";

package/dist/components/navigation/stepper/stepper.css

@@ -0,0 +1,151 @@
+@layer properties, theme, base;
+
+@layer components {
+  .WjZwvW_root {
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  .WjZwvW_rootVertical {
+    flex-direction: column;
+  }
+
+  .WjZwvW_rootHorizontal {
+    align-items: flex-start;
+    inline-size: 100%;
+  }
+
+  .WjZwvW_item {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .WjZwvW_itemVertical {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  .WjZwvW_itemHorizontal {
+    flex: 1;
+    position: relative;
+  }
+
+  .WjZwvW_marker {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: var(--font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    border-width: 2px;
+    flex-shrink: 0;
+    place-items: center;
+    display: grid;
+  }
+
+  .WjZwvW_markerComplete {
+    background-color: var(--color-primary-fg);
+    color: var(--color-fg-inverse);
+    border-color: #0000;
+
+    @media (forced-colors: active) {
+      background-color: var(--color-system-highlight);
+      color: var(--color-system-highlight-text);
+    }
+  }
+
+  .WjZwvW_markerCurrent {
+    border-color: var(--color-primary-border);
+    color: var(--color-primary-fg);
+  }
+
+  .WjZwvW_markerUpcoming {
+    border-color: var(--color-border-base);
+    color: var(--color-fg-mute);
+  }
+
+  .WjZwvW_connector {
+    border-radius: var(--radius-full);
+    background-color: var(--color-border-base);
+  }
+
+  .WjZwvW_connectorComplete {
+    background-color: var(--color-primary-fg);
+  }
+
+  @media (forced-colors: active) {
+    .WjZwvW_connector {
+      background-color: var(--color-system-canvas-text);
+    }
+  }
+
+  .WjZwvW_connectorVertical {
+    min-block-size: calc(var(--spacing) * 4);
+    inline-size: calc(var(--spacing) * .5);
+    align-self: stretch;
+    margin-inline-start: calc(var(--spacing) * 3.75);
+  }
+
+  .WjZwvW_connectorHorizontal {
+    block-size: calc(var(--spacing) * .5);
+    position: absolute;
+    inset-block-start: calc(var(--spacing) * 4 - 1px);
+    inset-inline-start: calc(var(--spacing) * 10);
+    inset-inline-end: 0;
+  }
+
+  .WjZwvW_text {
+    text-align: start;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .WjZwvW_label {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .WjZwvW_labelUpcoming {
+    color: var(--color-fg-mute);
+  }
+
+  .WjZwvW_description {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-fg-mute);
+  }
+
+  .WjZwvW_body {
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
+
+  .WjZwvW_bodyVertical {
+    align-items: center;
+  }
+
+  .WjZwvW_bodyHorizontal {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .WjZwvW_interactive {
+    margin: calc(var(--spacing) * -2);
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2);
+    align-self: flex-start;
+  }
+
+  .WjZwvW_button {
+    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);
+  }
+
+  @media (hover: hover) {
+    .WjZwvW_button:hover {
+      background-color: var(--color-bg-subtle);
+    }
+  }
+}
+
+@layer utilities;

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

@@ -0,0 +1,20 @@
+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
+export {};

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 @@
+export { TableOfContents } from "./table-of-contents.mjs";

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,5 +1,5 @@
 //#region src/components/navigation/tabs/index.d.ts
-declare const Tabs: {
+export declare const Tabs: {
   readonly Root: import("react").FC<import("react").PropsWithChildren<{
     defaultSelectedId?: string | null;
     selectedId?: string;
@@ -16,5 +16,4 @@ declare const Tabs: {
     id: string;
   }>>;
 };
-//#endregion
-export { Tabs };
+//#endregion

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