@lt-three/love3 0.0.0 → 0.1.0

package/dist/web/layout/accordion.js

@@ -0,0 +1,29 @@
+import { cn } from "../lib/utils.js";
+import { Accordion as Accordion$1, AccordionContent, AccordionItem, AccordionTrigger } from "../base/accordion.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/accordion.tsx
+/**
+* shadcn のプリミティブを包んだ、データ駆動の Accordion。
+* 呼び出し側が Item / Trigger / Content を自分で組まなくて済む。
+*/
+function Accordion({ items, itemClassName, triggerClassName, contentClassName, className, ...rest }) {
+	return /* @__PURE__ */ jsx(Accordion$1, {
+		className,
+		...rest,
+		children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
+			value: item.value,
+			className: cn(itemClassName),
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: cn(triggerClassName),
+				children: item.trigger
+			}), /* @__PURE__ */ jsx(AccordionContent, {
+				className: cn(contentClassName),
+				children: item.content
+			})]
+		}, item.value))
+	});
+}
+
+//#endregion
+export { Accordion };

package/dist/web/layout/alert-modal.d.ts

@@ -0,0 +1,41 @@
+import * as React$1 from "react";
+//#region src/web/layout/alert-modal.d.ts
+export type AlertModalTone = "default" | "danger";
+export type AlertModalAction = {
+  label: string;
+  onClick: () => void;
+  /**
+   * 省略時は「最後の操作が主操作（インディゴ塗り。danger なら destructive-solid の塗り）、それ以外は枠だけ（outline）」。
+   */
+  emphasis?: "primary" | "secondary";
+  disabled?: boolean;
+  "data-testid"?: string;
+};
+type AlertModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** `danger` は取り消せない操作の確認。見出しの左に state-error のアイコンが付き、主操作が destructive-solid の塗りになる（見出しの文字色は通常のまま）。 */
+  tone?: AlertModalTone;
+  title: React$1.ReactNode;
+  description?: React$1.ReactNode;
+  /** 左から順に右寄せで並ぶ。通常は [取消, 主操作]。 */
+  actions: AlertModalAction[];
+  /** false のとき、スクリムのクリック・Esc で閉じない（どちらかを選ばせる）。 */
+  dismissible?: boolean;
+  "data-testid"?: string;
+};
+/**
+ * 確認のための小さなモーダル（× を持たない）。
+ *
+ * overlay 面・p-5・幅 400（ビューポートに収まる）。見出し（16/24 semibold）と本文（13/20・muted）、右寄せの操作（gap-2・Button の既定サイズ）。
+ * `danger` では見出しの左に小さな state-error のアイコンが付き、主操作が destructive-solid の塗りになる。
+ * 枠もリングも付けない（影だけで浮く。`DialogContent` の流儀）。開閉状態は呼び出し側が持つ（制御専用）。
+ *
+ * 表示中は `data-modal-open` を持つので、浮いている常駐 UI を CSS で隠せる。
+ *
+ * 開いたときの初期フォーカスは、キーボードで開いたときだけ最初の操作に置き、それ以外はモーダルの本体に置く
+ * （マウスで開いて最初のボタンに枠が出ないように。`useModalOpenAutoFocus`）。
+ */
+export declare function AlertModal({ open, onOpenChange, tone, title, description, actions, dismissible, "data-testid": testId }: AlertModalProps): React$1.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/alert-modal.js

@@ -0,0 +1,71 @@
+import { Button } from "../base/button.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../base/dialog.js";
+import { useModalOpenAutoFocus } from "../lib/modal-open-focus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TriangleAlertIcon } from "lucide-react";
+
+//#region src/web/layout/alert-modal.tsx
+/**
+* 確認のための小さなモーダル（× を持たない）。
+*
+* overlay 面・p-5・幅 400（ビューポートに収まる）。見出し（16/24 semibold）と本文（13/20・muted）、右寄せの操作（gap-2・Button の既定サイズ）。
+* `danger` では見出しの左に小さな state-error のアイコンが付き、主操作が destructive-solid の塗りになる。
+* 枠もリングも付けない（影だけで浮く。`DialogContent` の流儀）。開閉状態は呼び出し側が持つ（制御専用）。
+*
+* 表示中は `data-modal-open` を持つので、浮いている常駐 UI を CSS で隠せる。
+*
+* 開いたときの初期フォーカスは、キーボードで開いたときだけ最初の操作に置き、それ以外はモーダルの本体に置く
+* （マウスで開いて最初のボタンに枠が出ないように。`useModalOpenAutoFocus`）。
+*/
+function AlertModal({ open, onOpenChange, tone = "default", title, description, actions, dismissible = true, "data-testid": testId }) {
+	const danger = tone === "danger";
+	const lastIndex = actions.length - 1;
+	const { contentRef, onOpenAutoFocus } = useModalOpenAutoFocus();
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			ref: contentRef,
+			onOpenAutoFocus,
+			showCloseButton: false,
+			"data-modal-open": "",
+			"data-testid": testId,
+			onInteractOutside: (e) => {
+				if (!dismissible) e.preventDefault();
+			},
+			onEscapeKeyDown: (e) => {
+				if (!dismissible) e.preventDefault();
+			},
+			className: "flex w-[400px] max-w-[calc(100%-2rem)] flex-col gap-4 outline-none sm:max-w-[400px]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsxs(DialogTitle, {
+					className: "flex items-center gap-2 text-base leading-6 font-semibold",
+					children: [danger && /* @__PURE__ */ jsx(TriangleAlertIcon, {
+						className: "size-4 shrink-0 text-state-error",
+						"aria-hidden": true
+					}), title]
+				}), description && /* @__PURE__ */ jsx(DialogDescription, {
+					className: "text-[13px] leading-5 whitespace-pre-line text-muted-foreground",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-end gap-2",
+				children: actions.map((action, i) => {
+					const primary = (action.emphasis ?? (i === lastIndex ? "primary" : "secondary")) === "primary";
+					return /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: primary ? danger ? "destructive" : "default" : "outline",
+						disabled: action.disabled,
+						"data-testid": action["data-testid"],
+						onClick: action.onClick,
+						children: action.label
+					}, action.label);
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+export { AlertModal };

package/dist/web/layout/card.d.ts

@@ -0,0 +1,17 @@
+import { Card as Card$1, CardHeadingLevel } from "../base/card.js";
+import React from "react";
+//#region src/web/layout/card.d.ts
+export type CardProps = {
+  title?: React.ReactNode;
+  /** 題を見出し（`<h2>`〜`<h6>`）にする。見出しの階層に入れたいときに渡す（省略は `<div>`）。native も同じ名前。 */
+  headingLevel?: CardHeadingLevel;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  actionOnClick?: () => void;
+  content: React.ReactNode;
+  footer?: React.ReactNode;
+  shadow?: boolean;
+  contentClassName?: string;
+} & Omit<React.ComponentProps<typeof Card$1>, "content" | "title">;
+export declare function Card({ title, headingLevel, description, action, shadow, className, actionOnClick, footer, content, contentClassName, ...props }: CardProps): React.JSX.Element;
+//#endregion

package/dist/web/layout/card.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { Card as Card$1, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../base/card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/card.tsx
+function Card({ title, headingLevel, description, action, shadow = true, className, actionOnClick, footer, content, contentClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(Card$1, {
+		className: cn("gap-2", !shadow && "shadow-none", className),
+		...props,
+		children: [
+			(title || action || description) && /* @__PURE__ */ jsxs(CardHeader, { children: [
+				title && /* @__PURE__ */ jsx(CardTitle, {
+					headingLevel,
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+				/* @__PURE__ */ jsx(CardAction, {
+					onClick: actionOnClick,
+					children: action
+				})
+			] }),
+			/* @__PURE__ */ jsx(CardContent, {
+				className: cn("grow flex flex-col gap-4", contentClassName),
+				children: content
+			}),
+			footer && /* @__PURE__ */ jsx(CardFooter, {
+				className: "flex justify-end gap-4 mt-2",
+				children: footer
+			})
+		]
+	});
+}
+
+//#endregion
+export { Card };

package/dist/web/layout/description.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+//#region src/web/layout/description.d.ts
+type DescriptionProps = {
+  sections: {
+    title: string;
+    titleIcon?: React.ReactNode;
+    description: React.ReactNode;
+  }[];
+};
+export declare function Description(props: DescriptionProps): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/description.js

@@ -0,0 +1,20 @@
+import { Separator } from "../base/separator.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/description.tsx
+function Description(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-8 mx-auto",
+		children: props.sections.map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h2", {
+			className: "flex items-center gap-2 font-bold mb-2",
+			children: [section.titleIcon, section.title]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-4 whitespace-pre-wrap",
+			children: section.description
+		})] }), index < props.sections.length - 1 && /* @__PURE__ */ jsx(Separator, {})] }, section.title))
+	});
+}
+
+//#endregion
+export { Description };

package/dist/web/layout/information.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+//#region src/web/layout/information.d.ts
+export type InformationField = {
+  label: string;
+  value: React.ReactNode;
+  separator?: never;
+} | {
+  label?: never;
+  value?: never;
+  separator: true;
+};
+type InformationProps = {
+  displayType?: "half" | "fitContent";
+  highlighted?: boolean;
+  fields: InformationField[][];
+  wrap?: "no-wrap" | "pre-wrap";
+  /**
+   * 列を並べる内側の要素（flex コンテナ）のクラス。`className` は外側のコンテナ（`@container`）に付くので、
+   * 列の間隔（`gap-*`）や並び（`flex-*`）を変えるときはこちらを使う。
+   */
+  columnsClassName?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * ラベルと値の組を並べる、読み取り専用の詳細表示。
+ *
+ * **親が幅を持つこと前提。** 列を縦に積むか横に並べるかは、外側の要素のコンテナクエリ（`@container`・`@xl:`）で決める。
+ * コンテナクエリは外側の幅を中身から測れない（inline-size の containment）ので、**幅が中身で決まる親**
+ * （`flex` の子・`inline-block`・`inline-flex`・table セル・`grid-cols-[auto_…]`）の中に置くと、幅 0 に潰れる。
+ * そういう親の中では、`className` に具体的な幅（`w-96` など。`flex` の子なら `flex-1` でもよい）を与える。
+ * `w-full` は効かない（親の幅が中身で決まるので、割合の基準が無い）。
+ *
+ * `className` と残りの属性は**外側のコンテナ**に付く（移植元では flex コンテナそのものだった）。
+ */
+export declare const Information: ({ displayType, highlighted, fields, className, columnsClassName, wrap, ...remain }: InformationProps) => React.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/information.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import { Separator } from "../base/separator.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/information.tsx
+/**
+* ラベルと値の組を並べる、読み取り専用の詳細表示。
+*
+* **親が幅を持つこと前提。** 列を縦に積むか横に並べるかは、外側の要素のコンテナクエリ（`@container`・`@xl:`）で決める。
+* コンテナクエリは外側の幅を中身から測れない（inline-size の containment）ので、**幅が中身で決まる親**
+* （`flex` の子・`inline-block`・`inline-flex`・table セル・`grid-cols-[auto_…]`）の中に置くと、幅 0 に潰れる。
+* そういう親の中では、`className` に具体的な幅（`w-96` など。`flex` の子なら `flex-1` でもよい）を与える。
+* `w-full` は効かない（親の幅が中身で決まるので、割合の基準が無い）。
+*
+* `className` と残りの属性は**外側のコンテナ**に付く（移植元では flex コンテナそのものだった）。
+*/
+const Information = ({ displayType = "fitContent", highlighted, fields, className, columnsClassName, wrap = "pre-wrap", ...remain }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "information",
+		className: cn("@container", className),
+		...remain,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "information-columns",
+			className: cn("flex flex-col @xl:flex-row gap-2 @xl:gap-4", columnsClassName),
+			children: fields.map((innerFields, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				style: { gridTemplateRows: `repeat(${innerFields.length}, min-content)` },
+				className: cn("flex-[1] grid gap-y-3 gap-x-2", displayType === "fitContent" ? "grid-cols-[min-content_min-content_1fr]" : "grid-cols-[minmax(max-content,100px)_min-content_2fr]", highlighted && "gap-x-4"),
+				children: innerFields.map(({ label, value, separator }, innerIndex) => separator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Separator, { orientation: "horizontal" }),
+					/* @__PURE__ */ jsx(Separator, { orientation: "horizontal" }),
+					/* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })
+				] }, `${index}-${innerIndex.toString()}-separator`) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cn("self-center text-xs text-muted-foreground font-semibold whitespace-nowrap underline decoration-border underline-offset-4"),
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+					/* @__PURE__ */ jsx("div", {
+						className: cn("flex justify-between items-center gap-2 text-sm min-h-7", wrap === "no-wrap" && "whitespace-nowrap", wrap === "pre-wrap" && "whitespace-pre-wrap", highlighted && "text-lg py-1"),
+						children: value
+					})
+				] }, label))
+			}), index < fields.length - 1 && /* @__PURE__ */ jsx(Separator, {
+				orientation: "vertical",
+				className: cn("hidden @xl:block")
+			})] }, `${innerFields[0]?.label}`))
+		})
+	});
+};
+
+//#endregion
+export { Information };

package/dist/web/layout/modal.d.ts

@@ -0,0 +1,16 @@
+import { DialogController } from "../lib/dialog.js";
+import React from "react";
+//#region src/web/layout/modal.d.ts
+type Props = {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  dialog: DialogController;
+  content: React.ReactNode;
+  footer: React.ReactNode;
+  size?: "md" | "flexible";
+  /** 閉じるボタンの読み上げ名（既定は「閉じる」） */
+  closeLabel?: string;
+};
+export declare function Modal({ title, description, dialog, content, footer, size, closeLabel }: Props): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/modal.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/utils.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../base/dialog.js";
+import { ScrollArea } from "../base/scroll-area.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/modal.tsx
+function Modal({ title, description, dialog, content, footer, size, closeLabel }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: dialog.isOpen,
+		modal: true,
+		onOpenChange: (next) => !next && dialog.close(),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: cn("max-h-3/4 flex flex-col", size === "flexible" && "!max-w-[80vw] min-w-lg w-max"),
+			onInteractOutside: (e) => {
+				e.preventDefault();
+				dialog.onOutsideClick();
+			},
+			closeLabel,
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+				/* @__PURE__ */ jsx(ScrollArea, {
+					className: "flex-1 -mx-2",
+					viewPortClassName: "w-full",
+					innerViewPortClassName: "px-2",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-4 wrap-break-word",
+						children: content
+					})
+				}),
+				/* @__PURE__ */ jsx(DialogFooter, { children: footer })
+			]
+		})
+	});
+}
+
+//#endregion
+export { Modal };

package/dist/web/layout/page-frame.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+//#region src/web/layout/page-frame.d.ts
+export type PageFrameNavItem = {
+  label: string;
+  /** 現在の画面。`aria-current="page"` になる。 */
+  current?: boolean;
+  /** あればリンク（`<a>`）、無ければボタン（`<button>`。押すと `onSelect`）。 */
+  href?: string;
+  onSelect?: () => void;
+};
+export type PageFrameProps = {
+  /** ヘッダ左端のブランド（文字でも要素でも）。 */
+  brand: React.ReactNode;
+  nav?: readonly PageFrameNavItem[];
+  /** ナビの読み上げ名（ランドマークが複数あるとき区別する）。 */
+  navLabel?: string;
+  /** ヘッダ右端（テーマ切替・ユーザーなど）。 */
+  trailing?: React.ReactNode;
+  children: React.ReactNode;
+  /** フッタの中身。未指定なら年を持たない著作権表記（年は使う側が決める）。 */
+  footer?: React.ReactNode;
+  /** ヘッダ・本文・フッタの中身の最大幅（Tailwind のクラス）。 */
+  maxWidthClassName?: string;
+  className?: string;
+};
+/**
+ * ページの骨組み。`header`（banner）・`nav`・`main`・`footer`（contentinfo）を持ち、ランドマークが揃う。
+ * 画面ごとに手で組むと、`main` を忘れる・ナビに名前が無い・狭い幅で崩れる、が起きるので、ここに 1 つだけ置く。
+ *
+ * - ヘッダの DOM の順（ブランド・ナビ・右端）が、見た目の順（狭い幅は 1 行ずつ）と同じ。`order` で見た目だけを入れ替えると
+ *   Tab の順が見た目とずれる
+ * - 本文は `flex-1`（短い画面でもフッタが下に付く）。`main` の `id` は `main`（使う側がスキップリンクを置くときの飛び先。
+ *   PageFrame 自身はスキップリンクを置かない。`main` ランドマークがあるので、axe の bypass（ブロックのスキップ）は満たされる）
+ * - 色は `border-border` / `text-muted-foreground` だけ。ダークはトークンが切り替える
+ */
+export declare function PageFrame({ brand, nav, navLabel, trailing, children, footer, maxWidthClassName, className }: PageFrameProps): React.JSX.Element;
+//#endregion

package/dist/web/layout/page-frame.js

@@ -0,0 +1,79 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/page-frame.tsx
+/**
+* ページの骨組み。`header`（banner）・`nav`・`main`・`footer`（contentinfo）を持ち、ランドマークが揃う。
+* 画面ごとに手で組むと、`main` を忘れる・ナビに名前が無い・狭い幅で崩れる、が起きるので、ここに 1 つだけ置く。
+*
+* - ヘッダの DOM の順（ブランド・ナビ・右端）が、見た目の順（狭い幅は 1 行ずつ）と同じ。`order` で見た目だけを入れ替えると
+*   Tab の順が見た目とずれる
+* - 本文は `flex-1`（短い画面でもフッタが下に付く）。`main` の `id` は `main`（使う側がスキップリンクを置くときの飛び先。
+*   PageFrame 自身はスキップリンクを置かない。`main` ランドマークがあるので、axe の bypass（ブロックのスキップ）は満たされる）
+* - 色は `border-border` / `text-muted-foreground` だけ。ダークはトークンが切り替える
+*/
+function PageFrame({ brand, nav = [], navLabel = "メイン", trailing, children, footer, maxWidthClassName = "max-w-[1280px]", className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "page-frame",
+		className: cn("flex min-h-dvh flex-col", className),
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "border-border border-b",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("mx-auto flex w-full flex-wrap items-center gap-x-6 gap-y-2 px-4 py-3 sm:px-6", maxWidthClassName),
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "basis-full font-mono text-base font-semibold tracking-tight sm:basis-auto",
+							children: brand
+						}),
+						nav.length > 0 ? /* @__PURE__ */ jsx("nav", {
+							"aria-label": navLabel,
+							className: "min-w-0 basis-full sm:basis-0 sm:flex-1",
+							children: /* @__PURE__ */ jsx("ul", {
+								className: "flex flex-wrap items-center gap-x-4 gap-y-1",
+								children: nav.map((item) => {
+									const select = () => {
+										if (!item.current) item.onSelect?.();
+									};
+									const itemClass = cn("focus-visible:ring-ring cursor-pointer rounded-control py-1 text-sm underline-offset-8 outline-none hover:underline focus-visible:ring-2", item.current ? "text-foreground font-medium underline" : "text-muted-foreground");
+									return /* @__PURE__ */ jsx("li", { children: item.href !== void 0 ? /* @__PURE__ */ jsx("a", {
+										href: item.href,
+										"aria-current": item.current ? "page" : void 0,
+										onClick: select,
+										className: itemClass,
+										children: item.label
+									}) : /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-current": item.current ? "page" : void 0,
+										onClick: select,
+										className: itemClass,
+										children: item.label
+									}) }, item.label);
+								})
+							})
+						}) : null,
+						trailing ? /* @__PURE__ */ jsx("div", {
+							className: "ml-auto flex items-center gap-2",
+							children: trailing
+						}) : null
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("main", {
+				id: "main",
+				className: cn("mx-auto flex w-full flex-1 flex-col gap-6 px-4 py-6 sm:px-6", maxWidthClassName),
+				children
+			}),
+			/* @__PURE__ */ jsx("footer", {
+				className: "border-border text-muted-foreground border-t",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("mx-auto w-full px-4 py-4 text-xs sm:px-6", maxWidthClassName),
+					children: footer ?? /* @__PURE__ */ jsx("p", { children: "© <3（Less Than Three）" })
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { PageFrame };

package/dist/web/layout/scroll-area.d.ts

@@ -0,0 +1,10 @@
+import { ScrollArea as ScrollArea$1 } from "../base/scroll-area.js";
+import { ComponentProps } from "react";
+//#region src/web/layout/scroll-area.d.ts
+type ScrollAreaProps = ComponentProps<typeof ScrollArea$1> & {
+  /** 水平スクロールバーを表示する */
+  horizontal?: boolean;
+};
+export declare function ScrollArea({ horizontal, children, ...props }: ScrollAreaProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/scroll-area.js

@@ -0,0 +1,13 @@
+import { ScrollArea as ScrollArea$1, ScrollBar } from "../base/scroll-area.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/scroll-area.tsx
+function ScrollArea({ horizontal, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollArea$1, {
+		...props,
+		children: [children, horizontal && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })]
+	});
+}
+
+//#endregion
+export { ScrollArea };

package/dist/web/layout/sheet.d.ts

@@ -0,0 +1,32 @@
+import { SheetContent } from "../base/sheet.js";
+import { DialogController } from "../lib/dialog.js";
+import React, { ComponentProps } from "react";
+//#region src/web/layout/sheet.d.ts
+type BaseProps = {
+  title: React.ReactNode;
+  description?: string;
+  content: React.ReactNode;
+  footer?: React.ReactNode;
+  /** シートの表示方向 */
+  side?: ComponentProps<typeof SheetContent>["side"];
+  /** SheetContent に渡すクラス名 */
+  contentClassName?: string;
+  /** SheetTitle に渡すクラス名 */
+  titleClassName?: string;
+  /** 閉じるボタンの読み上げ名（既定は「閉じる」） */
+  closeLabel?: string;
+};
+type DialogModeProps = BaseProps & {
+  dialog: DialogController;
+  open?: never;
+  onOpenChange?: never;
+};
+type ControlledModeProps = BaseProps & {
+  dialog?: never;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+type Props = DialogModeProps | ControlledModeProps;
+export declare function Sheet(props: Props): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/sheet.js

@@ -0,0 +1,68 @@
+import { cn } from "../lib/utils.js";
+import { ScrollArea } from "../base/scroll-area.js";
+import { Sheet as Sheet$1, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../base/sheet.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/sheet.tsx
+function Sheet(props) {
+	const { title, description, content, footer, side, contentClassName, titleClassName, closeLabel } = props;
+	if (props.dialog) {
+		const { dialog } = props;
+		return /* @__PURE__ */ jsx(Sheet$1, {
+			open: dialog.isOpen,
+			onOpenChange: (next) => !next && dialog.close(),
+			children: /* @__PURE__ */ jsxs(SheetContent, {
+				side,
+				className: cn("flex flex-col", contentClassName),
+				onInteractOutside: (e) => {
+					e.preventDefault();
+					dialog.onOutsideClick();
+				},
+				closeLabel,
+				children: [
+					/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, {
+						className: titleClassName,
+						children: title
+					}), description && /* @__PURE__ */ jsx(SheetDescription, { children: description })] }),
+					/* @__PURE__ */ jsx(ScrollArea, {
+						className: "flex-1",
+						viewPortClassName: "w-full",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col gap-4 px-5 pb-5 wrap-break-word",
+							children: content
+						})
+					}),
+					footer && /* @__PURE__ */ jsx(SheetFooter, { children: footer })
+				]
+			})
+		});
+	}
+	const { open, onOpenChange } = props;
+	return /* @__PURE__ */ jsx(Sheet$1, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side,
+			className: cn("flex flex-col", contentClassName),
+			closeLabel,
+			children: [
+				/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, {
+					className: titleClassName,
+					children: title
+				}), description && /* @__PURE__ */ jsx(SheetDescription, { children: description })] }),
+				/* @__PURE__ */ jsx(ScrollArea, {
+					className: "flex-1",
+					viewPortClassName: "w-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-4 px-5 pb-5 wrap-break-word",
+						children: content
+					})
+				}),
+				footer && /* @__PURE__ */ jsx(SheetFooter, { children: footer })
+			]
+		})
+	});
+}
+
+//#endregion
+export { Sheet };

package/dist/web/layout/simple-dialog.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+//#region src/web/layout/simple-dialog.d.ts
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  children: React.ReactNode;
+};
+export declare function SimpleDialog({ open, onOpenChange, title, children }: Props): React.JSX.Element;
+//#endregion
+export {};