@novi-ui/flatlay 0.1.0

package/dist/modal/modal.d.mts

@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { ModalProps } from "@novi-ui/core";
+//#region src/modal/modal.d.ts
+interface PartProps {
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * Modal の見出し。**ヘッダ行の中で「← 戻る」の右に並ぶ。**
+ *
+ * Raster は右上に ✕、Tactile はフッターに閉じるを置く。Flatlay が左端なのは、
+ * 書類の「戻る」が常に左上にあるから。名前が同じで位置が違う3例目（design.md）。
+ *
+ * @example
+ * <ModalTitle>削除しますか</ModalTitle>
+ */
+declare function ModalTitle({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * Modal の本体。`size` が効くのはここで、**本文の最大行長**として解釈される。
+ *
+ * @example
+ * <ModalBody>この操作は取り消せません。</ModalBody>
+ */
+declare function ModalBody({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * Modal の操作列。上辺の罫線で本文と切り、**左揃え**で並ぶ。
+ *
+ * 右揃え（Raster）でも縦積み（Tactile）でもないのは、
+ * ヘッダの「← 戻る」と縦の線を合わせるため。
+ *
+ * @example
+ * <ModalFooter>
+ *   <Button color="danger">削除</Button>
+ * </ModalFooter>
+ */
+declare function ModalFooter({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * 全画面テイクオーバー。開いている間フォーカスは内側に閉じ込められ、Escape で戻る。
+ *
+ * 浮かせる先が無いので、別の面を重ねる代わりに**紙ごと差し替える**。
+ * 地は暗転せず紙色のままで、文書が切り替わったことは
+ * ヘッダの「← 戻る」と下辺の罫線が示す（ADR-F2）。
+ *
+ * `size` は幅でも高さでもなく**本文の最大行長**です。
+ *
+ * @example
+ * <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+ *   <ModalTitle>削除しますか</ModalTitle>
+ *   <ModalBody>この操作は取り消せません。</ModalBody>
+ * </Modal>
+ */
+declare function Modal({ size, isOpen, defaultOpen, onOpenChange, isDismissable, isKeyboardDismissDisabled, children, className, classNames, id }: ModalProps): import("react").JSX.Element;
+//#endregion
+export { Modal, ModalBody, ModalFooter, ModalTitle };
+//# sourceMappingURL=modal.d.mts.map

package/dist/modal/modal.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.mts","names":[],"sources":["../../src/modal/modal.tsx"],"mappings":";;;UAOU;EACR,WAAW;EACX;;;;;;;;;;;iBA4Bc,aAAa,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAkB7C,YAAY,UAAU,aAAa,4BAAS,IAAA;;;;;;;;;;;;iBAmB5C,cAAc,UAAU,aAAa,4BAAS,IAAA;;;;;;;;;;;;;;;;iBA8B9C,QACd,MACA,QACA,aACA,cACA,eACA,2BACA,UACA,WACA,YACA,MACC,6BAAU,IAAA"}

package/dist/modal/modal.mjs

@@ -0,0 +1,120 @@
+"use client";
+import { backArrowClass, modalStyles } from "./modal.styles.mjs";
+import { Button, Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+//#region src/modal/modal.tsx
+/** 「← 戻る」。テイクオーバーは閉じて消えるのではなく、前の紙に戻る。 */
+function CloseButton({ className }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		slot: "close",
+		"data-slot": "closeButton",
+		className: modalStyles().closeButton({ class: className }),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: backArrowClass,
+			children: "←"
+		}), "戻る"]
+	});
+}
+/**
+* Modal の見出し。**ヘッダ行の中で「← 戻る」の右に並ぶ。**
+*
+* Raster は右上に ✕、Tactile はフッターに閉じるを置く。Flatlay が左端なのは、
+* 書類の「戻る」が常に左上にあるから。名前が同じで位置が違う3例目（design.md）。
+*
+* @example
+* <ModalTitle>削除しますか</ModalTitle>
+*/
+function ModalTitle({ children, className }) {
+	const s = modalStyles();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "header",
+		className: s.header(),
+		children: [/* @__PURE__ */ jsx(CloseButton, {}), /* @__PURE__ */ jsx(Heading, {
+			slot: "title",
+			"data-slot": "title",
+			className: s.title({ class: className }),
+			children
+		})]
+	});
+}
+/**
+* Modal の本体。`size` が効くのはここで、**本文の最大行長**として解釈される。
+*
+* @example
+* <ModalBody>この操作は取り消せません。</ModalBody>
+*/
+function ModalBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "body",
+		className: modalStyles().body({ class: className }),
+		children
+	});
+}
+/**
+* Modal の操作列。上辺の罫線で本文と切り、**左揃え**で並ぶ。
+*
+* 右揃え（Raster）でも縦積み（Tactile）でもないのは、
+* ヘッダの「← 戻る」と縦の線を合わせるため。
+*
+* @example
+* <ModalFooter>
+*   <Button color="danger">削除</Button>
+* </ModalFooter>
+*/
+function ModalFooter({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "footer",
+		className: modalStyles().footer({ class: className }),
+		children
+	});
+}
+/** 子に `ModalTitle` が含まれるか。含まれない場合だけ既定のヘッダを足す。 */
+function hasTitle(children) {
+	return Children.toArray(children).some((child) => isValidElement(child) && child.type === ModalTitle);
+}
+/**
+* 全画面テイクオーバー。開いている間フォーカスは内側に閉じ込められ、Escape で戻る。
+*
+* 浮かせる先が無いので、別の面を重ねる代わりに**紙ごと差し替える**。
+* 地は暗転せず紙色のままで、文書が切り替わったことは
+* ヘッダの「← 戻る」と下辺の罫線が示す（ADR-F2）。
+*
+* `size` は幅でも高さでもなく**本文の最大行長**です。
+*
+* @example
+* <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+*   <ModalTitle>削除しますか</ModalTitle>
+*   <ModalBody>この操作は取り消せません。</ModalBody>
+* </Modal>
+*/
+function Modal$1({ size, isOpen, defaultOpen, onOpenChange, isDismissable = true, isKeyboardDismissDisabled, children, className, classNames, id }) {
+	const s = modalStyles({ size });
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		isDismissable,
+		isKeyboardDismissDisabled,
+		"data-slot": "backdrop",
+		className: s.backdrop({ class: classNames?.backdrop }),
+		children: /* @__PURE__ */ jsx(Modal, {
+			"data-slot": "panel",
+			className: s.panel({ class: [className, classNames?.panel] }),
+			children: /* @__PURE__ */ jsxs(Dialog, {
+				id,
+				className: "outline-none flex flex-col grow",
+				children: [!hasTitle(children) && /* @__PURE__ */ jsx("div", {
+					"data-slot": "header",
+					className: s.header({ class: classNames?.header }),
+					children: /* @__PURE__ */ jsx(CloseButton, { className: classNames?.closeButton })
+				}), children]
+			})
+		})
+	});
+}
+//#endregion
+export { Modal$1 as Modal, ModalBody, ModalFooter, ModalTitle };
+
+//# sourceMappingURL=modal.mjs.map

package/dist/modal/modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.mjs","names":["Modal","RACModal"],"sources":["../../src/modal/modal.tsx"],"sourcesContent":["'use client'\n\nimport type { ModalProps } from '@novi-ui/core'\nimport { Children, isValidElement, type ReactNode } from 'react'\nimport { Button, Dialog, Heading, ModalOverlay, Modal as RACModal } from 'react-aria-components'\nimport { backArrowClass, modalStyles } from './modal.styles'\n\ninterface PartProps {\n  children?: ReactNode\n  className?: string\n}\n\n/** 「← 戻る」。テイクオーバーは閉じて消えるのではなく、前の紙に戻る。 */\nfunction CloseButton({ className }: { className?: string }) {\n  return (\n    <Button\n      slot=\"close\"\n      data-slot=\"closeButton\"\n      className={modalStyles().closeButton({ class: className })}\n    >\n      <span aria-hidden=\"true\" className={backArrowClass}>\n        ←\n      </span>\n      戻る\n    </Button>\n  )\n}\n\n/**\n * Modal の見出し。**ヘッダ行の中で「← 戻る」の右に並ぶ。**\n *\n * Raster は右上に ✕、Tactile はフッターに閉じるを置く。Flatlay が左端なのは、\n * 書類の「戻る」が常に左上にあるから。名前が同じで位置が違う3例目（design.md）。\n *\n * @example\n * <ModalTitle>削除しますか</ModalTitle>\n */\nexport function ModalTitle({ children, className }: PartProps) {\n  const s = modalStyles()\n  return (\n    <div data-slot=\"header\" className={s.header()}>\n      <CloseButton />\n      <Heading slot=\"title\" data-slot=\"title\" className={s.title({ class: className })}>\n        {children}\n      </Heading>\n    </div>\n  )\n}\n\n/**\n * Modal の本体。`size` が効くのはここで、**本文の最大行長**として解釈される。\n *\n * @example\n * <ModalBody>この操作は取り消せません。</ModalBody>\n */\nexport function ModalBody({ children, className }: PartProps) {\n  return (\n    <div data-slot=\"body\" className={modalStyles().body({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * Modal の操作列。上辺の罫線で本文と切り、**左揃え**で並ぶ。\n *\n * 右揃え（Raster）でも縦積み（Tactile）でもないのは、\n * ヘッダの「← 戻る」と縦の線を合わせるため。\n *\n * @example\n * <ModalFooter>\n *   <Button color=\"danger\">削除</Button>\n * </ModalFooter>\n */\nexport function ModalFooter({ children, className }: PartProps) {\n  return (\n    <div data-slot=\"footer\" className={modalStyles().footer({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/** 子に `ModalTitle` が含まれるか。含まれない場合だけ既定のヘッダを足す。 */\nfunction hasTitle(children: ReactNode): boolean {\n  return Children.toArray(children).some(\n    (child) => isValidElement(child) && child.type === ModalTitle,\n  )\n}\n\n/**\n * 全画面テイクオーバー。開いている間フォーカスは内側に閉じ込められ、Escape で戻る。\n *\n * 浮かせる先が無いので、別の面を重ねる代わりに**紙ごと差し替える**。\n * 地は暗転せず紙色のままで、文書が切り替わったことは\n * ヘッダの「← 戻る」と下辺の罫線が示す（ADR-F2）。\n *\n * `size` は幅でも高さでもなく**本文の最大行長**です。\n *\n * @example\n * <Modal isOpen={isOpen} onOpenChange={setIsOpen}>\n *   <ModalTitle>削除しますか</ModalTitle>\n *   <ModalBody>この操作は取り消せません。</ModalBody>\n * </Modal>\n */\nexport function Modal({\n  size,\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  children,\n  className,\n  classNames,\n  id,\n}: ModalProps) {\n  const s = modalStyles({ size })\n\n  return (\n    <ModalOverlay\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      isDismissable={isDismissable}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      data-slot=\"backdrop\"\n      className={s.backdrop({ class: classNames?.backdrop })}\n    >\n      <RACModal data-slot=\"panel\" className={s.panel({ class: [className, classNames?.panel] })}>\n        {/* RAC の ModalOverlay / Modal は id を受け取らないため Dialog に付ける */}\n        <Dialog id={id} className=\"outline-none flex flex-col grow\">\n          {/* 出口を必ず1つ持たせる。利用者が ModalTitle を置いた場合はそちらに入るので、\n              ここで足すと header slot が二重になる */}\n          {!hasTitle(children) && (\n            <div data-slot=\"header\" className={s.header({ class: classNames?.header })}>\n              <CloseButton className={classNames?.closeButton} />\n            </div>\n          )}\n\n          {children}\n        </Dialog>\n      </RACModal>\n    </ModalOverlay>\n  )\n}\n"],"mappings":";;;;;;;AAaA,SAAS,YAAY,EAAE,aAAqC;CAC1D,OACE,qBAAC,QAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,YAAY,CAAC,CAAC,YAAY,EAAE,OAAO,UAAU,CAAC;EAH3D,UAAA,CAKE,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAW;GAAgB,UAAA;EAE9C,CAAA,GAAC,IAED;;AAEZ;;;;;;;;;;AAWA,SAAgB,WAAW,EAAE,UAAU,aAAwB;CAC7D,MAAM,IAAI,YAAY;CACtB,OACE,qBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,EAAE,OAAO;EAA5C,UAAA,CACE,oBAAC,aAAD,CAAc,CAAA,GACd,oBAAC,SAAD;GAAS,MAAK;GAAQ,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,UAAU,CAAC;GAC5E;EACM,CAAA,CACN;;AAET;;;;;;;AAQA,SAAgB,UAAU,EAAE,UAAU,aAAwB;CAC5D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,YAAY,CAAC,CAAC,KAAK,EAAE,OAAO,UAAU,CAAC;EACrE;CACE,CAAA;AAET;;;;;;;;;;;;AAaA,SAAgB,YAAY,EAAE,UAAU,aAAwB;CAC9D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EACzE;CACE,CAAA;AAET;;AAGA,SAAS,SAAS,UAA8B;CAC9C,OAAO,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAC/B,UAAU,eAAe,KAAK,KAAK,MAAM,SAAS,UACrD;AACF;;;;;;;;;;;;;;;;AAiBA,SAAgBA,QAAM,EACpB,MACA,QACA,aACA,cACA,gBAAgB,MAChB,2BACA,UACA,WACA,YACA,MACa;CACb,MAAM,IAAI,YAAY,EAAE,KAAK,CAAC;CAE9B,OACE,oBAAC,cAAD;EACU;EACK;EACC;EACC;EACY;EAC3B,aAAU;EACV,WAAW,EAAE,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC;EAErD,UAAA,oBAACC,OAAD;GAAU,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,WAAW,YAAY,KAAK,EAAE,CAAC;GAEtF,UAAA,qBAAC,QAAD;IAAY;IAAI,WAAU;IAA1B,UAAA,CAGG,CAAC,SAAS,QAAQ,KACjB,oBAAC,OAAD;KAAK,aAAU;KAAS,WAAW,EAAE,OAAO,EAAE,OAAO,YAAY,OAAO,CAAC;KACvE,UAAA,oBAAC,aAAD,EAAa,WAAW,YAAY,YAAc,CAAA;IAC/C,CAAA,GAGN,QACK;;EACA,CAAA;CACE,CAAA;AAElB"}

package/dist/modal/modal.styles.d.mts

@@ -0,0 +1,70 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/modal/modal.styles.d.ts
+/**
+ * Modal のスタイル定義。
+ *
+ * @example
+ * import { modalStyles } from '@novi-ui/flatlay'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myModal = tv({ extend: modalStyles, slots: { body: 'max-w-[80rem]' } })
+ */
+declare const modalStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg" | "full", {
+    body: string;
+    footer: string;
+  }>;
+}, {
+  backdrop: string;
+  panel: string;
+  header: string;
+  /**
+   * 閉じるは**ヘッダ左端の「← 戻る」**。
+   * 右上の ✕（Raster）・フッターのフルワイド（Tactile）に続く第3の位置。
+   * ✕ が「閉じて消す」なら、テイクオーバーは前の紙に**戻る**ので矢印になる。
+   */
+  closeButton: string;
+  title: string;
+  body: string;
+  footer: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg" | "full", {
+    body: string;
+    footer: string;
+  }>;
+}, {
+  backdrop: string;
+  panel: string;
+  header: string;
+  /**
+   * 閉じるは**ヘッダ左端の「← 戻る」**。
+   * 右上の ✕（Raster）・フッターのフルワイド（Tactile）に続く第3の位置。
+   * ✕ が「閉じて消す」なら、テイクオーバーは前の紙に**戻る**ので矢印になる。
+   */
+  closeButton: string;
+  title: string;
+  body: string;
+  footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg" | "full", {
+    body: string;
+    footer: string;
+  }>;
+}, {
+  backdrop: string;
+  panel: string;
+  header: string;
+  /**
+   * 閉じるは**ヘッダ左端の「← 戻る」**。
+   * 右上の ✕（Raster）・フッターのフルワイド（Tactile）に続く第3の位置。
+   * ✕ が「閉じて消す」なら、テイクオーバーは前の紙に**戻る**ので矢印になる。
+   */
+  closeButton: string;
+  title: string;
+  body: string;
+  footer: string;
+}>>;
+type ModalStyleProps = Parameters<typeof modalStyles>[0];
+//#endregion
+export { ModalStyleProps, modalStyles };
+//# sourceMappingURL=modal.styles.d.mts.map

package/dist/modal/modal.styles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.styles.d.mts","names":[],"sources":["../../src/modal/modal.styles.ts"],"mappings":";;;;;;;;;;;cAoFa,yCAAW;;IAnB0B;IAAgB;;;;;;;;;;;;;;;;;IAAhB;IAAgB;;;;;;;;;;;;;;;;;IAAhB;IAAgB;;;;;;;;;;;;;;;;KAyBtD,kBAAkB,kBAAkB"}

package/dist/modal/modal.styles.mjs

@@ -0,0 +1,83 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/modal/modal.styles.ts
+/**
+* Flatlay の Modal は **全画面テイクオーバー**（design.md 着手条件1）。
+*
+* 中央ダイアログ（Raster）・ボトムシート（Tactile）に続く第3の構造。
+* 浮かせる先が無いので「別の面を重ねる」ができない。代わりに**紙ごと差し替える**。
+*
+* `position` 規律の**例外1号**。viewport 全面を占めるには `fixed` が要る。
+* ただし z-index は使わない — ポータル先が body 末尾なので、DOM 順だけで最前になる。
+* ここで z-10 を1つ足した瞬間に「重なりの順序を持つ UI」に変わってしまう（ADR-F2 / FR-06）。
+*
+* 地が暗転しないのも同じ理由。暗転は「背後に何かがある」ことの表現で、
+* それ自体が z 軸の語彙になる。`--novi-color-overlay` は紙色に固定されている。
+*/
+const slots = {
+	backdrop: "fixed inset-0 flex bg-[var(--novi-color-overlay)]",
+	panel: ["w-full h-full flex flex-col overflow-auto outline-none", "bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]"].join(" "),
+	header: ["shrink-0 flex items-center gap-3 px-4 h-10", "border-b border-[var(--novi-color-border-strong)]"].join(" "),
+	/**
+	* 閉じるは**ヘッダ左端の「← 戻る」**。
+	* 右上の ✕（Raster）・フッターのフルワイド（Tactile）に続く第3の位置。
+	* ✕ が「閉じて消す」なら、テイクオーバーは前の紙に**戻る**ので矢印になる。
+	*/
+	closeButton: [
+		"shrink-0 inline-flex items-center gap-1.5 h-7 px-2 -ml-2",
+		"text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
+		"border border-transparent",
+		"hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]",
+		"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
+		"transition-[background-color,border-color,color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		focusRing,
+		disabledState
+	].join(" "),
+	title: "truncate text-[length:var(--novi-text-base)] font-medium",
+	body: "grow w-full px-4 py-4 leading-[var(--novi-leading-body)]",
+	footer: ["shrink-0 flex items-center gap-2 w-full px-4 py-3", "border-t border-[var(--novi-color-border)]"].join(" ")
+};
+/**
+* Modal のスタイル定義。
+*
+* @example
+* import { modalStyles } from '@novi-ui/flatlay'
+* import { tv } from 'tailwind-variants'
+*
+* const myModal = tv({ extend: modalStyles, slots: { body: 'max-w-[80rem]' } })
+*/
+const modalStyles = tv({
+	slots,
+	variants: { size: {
+		sm: {
+			body: "max-w-[32rem]",
+			footer: "max-w-[32rem]"
+		},
+		md: {
+			body: "max-w-[44rem]",
+			footer: "max-w-[44rem]"
+		},
+		lg: {
+			body: "max-w-[56rem]",
+			footer: "max-w-[56rem]"
+		},
+		full: {
+			body: "max-w-none",
+			footer: "max-w-none"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* 「← 戻る」の矢印。**等幅で出す**（ADR-F7）。
+*
+* SVG ではなく文字なのは、記号そのものが帳票の語彙だから。
+* 等幅にすると、隣に別の記号ボタンが並んだときに幅が揃う。
+*/
+const backArrowClass = `shrink-0 ${mono}`;
+//#endregion
+export { backArrowClass, modalStyles };
+
+//# sourceMappingURL=modal.styles.mjs.map

package/dist/modal/modal.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.styles.mjs","names":[],"sources":["../../src/modal/modal.styles.ts"],"sourcesContent":["import type { modalRequiredSlots, modalSlots, NoviSize, SlotMap, VariantMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Modal は **全画面テイクオーバー**（design.md 着手条件1）。\n *\n * 中央ダイアログ（Raster）・ボトムシート（Tactile）に続く第3の構造。\n * 浮かせる先が無いので「別の面を重ねる」ができない。代わりに**紙ごと差し替える**。\n *\n * `position` 規律の**例外1号**。viewport 全面を占めるには `fixed` が要る。\n * ただし z-index は使わない — ポータル先が body 末尾なので、DOM 順だけで最前になる。\n * ここで z-10 を1つ足した瞬間に「重なりの順序を持つ UI」に変わってしまう（ADR-F2 / FR-06）。\n *\n * 地が暗転しないのも同じ理由。暗転は「背後に何かがある」ことの表現で、\n * それ自体が z 軸の語彙になる。`--novi-color-overlay` は紙色に固定されている。\n */\nconst slots = {\n  // 暗転しないので、backdrop は「覆う膜」ではなく差し替わった紙そのもの\n  backdrop: 'fixed inset-0 flex bg-[var(--novi-color-overlay)]',\n  panel: [\n    'w-full h-full flex flex-col overflow-auto outline-none',\n    'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n  ].join(' '),\n  // 書類のヘッダ行。下辺の罫線が「ここから別の文書」を示す唯一の手がかりになる\n  header: [\n    'shrink-0 flex items-center gap-3 px-4 h-10',\n    'border-b border-[var(--novi-color-border-strong)]',\n  ].join(' '),\n  /**\n   * 閉じるは**ヘッダ左端の「← 戻る」**。\n   * 右上の ✕（Raster）・フッターのフルワイド（Tactile）に続く第3の位置。\n   * ✕ が「閉じて消す」なら、テイクオーバーは前の紙に**戻る**ので矢印になる。\n   */\n  closeButton: [\n    'shrink-0 inline-flex items-center gap-1.5 h-7 px-2 -ml-2',\n    'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n    'border border-transparent',\n    'hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]',\n    'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n    'transition-[background-color,border-color,color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  title: 'truncate text-[length:var(--novi-text-base)] font-medium',\n  // 本文だけが行長の制限を受ける。`mx-auto` ではなく左寄せなのは、\n  // 帳票の本文が紙の左端から始まるため（中央寄せは「作品」の版面設計の言葉）\n  body: 'grow w-full px-4 py-4 leading-[var(--novi-leading-body)]',\n  // 操作行は上辺の罫線で本文と切る。左揃えは header の「← 戻る」と縦の線を合わせるため\n  footer: [\n    'shrink-0 flex items-center gap-2 w-full px-4 py-3',\n    'border-t border-[var(--novi-color-border)]',\n  ].join(' '),\n} satisfies SlotMap<typeof modalSlots, (typeof modalRequiredSlots)[number]>\n\n/**\n * テイクオーバーでは面積が全画面に固定されるので、幅（Raster）も高さ（Tactile）も\n * 段階を作れない。残るのは**本文の最大行長**で、`size` はそれとして解釈する。\n *\n * 語彙は core が共通で固定し、解釈はテーマの自由（ADR-06）。3例目。\n * footer にも同じ制限を掛けるのは、操作が本文の列から外れると\n * 「どの文書に対する操作か」が読めなくなるため。\n */\nconst size: VariantMap<NoviSize | 'full', { body: string; footer: string }> = {\n  sm: { body: 'max-w-[32rem]', footer: 'max-w-[32rem]' },\n  md: { body: 'max-w-[44rem]', footer: 'max-w-[44rem]' },\n  lg: { body: 'max-w-[56rem]', footer: 'max-w-[56rem]' },\n  full: { body: 'max-w-none', footer: 'max-w-none' },\n}\n\n// `radius` は実装しない。全画面を占める面に角は無く、書いても描画に出ない。\n// 死ぬコードを置くくらいなら、解釈を持たないことを明示する（README に記載）。\n\n/**\n * Modal のスタイル定義。\n *\n * @example\n * import { modalStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myModal = tv({ extend: modalStyles, slots: { body: 'max-w-[80rem]' } })\n */\nexport const modalStyles = tv({\n  slots,\n  variants: { size },\n  defaultVariants: { size: 'md' },\n})\n\nexport type ModalStyleProps = Parameters<typeof modalStyles>[0]\n\n/**\n * 「← 戻る」の矢印。**等幅で出す**（ADR-F7）。\n *\n * SVG ではなく文字なのは、記号そのものが帳票の語彙だから。\n * 等幅にすると、隣に別の記号ボタンが並んだときに幅が揃う。\n */\nexport const backArrowClass = `shrink-0 ${mono}`\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ;CAEZ,UAAU;CACV,OAAO,CACL,0DACA,uDACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ,CACN,8CACA,mDACF,CAAC,CAAC,KAAK,GAAG;;;;;;CAMV,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CAGP,MAAM;CAEN,QAAQ,CACN,qDACA,4CACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AA6BA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU,EAAE;EApBZ,IAAI;GAAE,MAAM;GAAiB,QAAQ;EAAgB;EACrD,IAAI;GAAE,MAAM;GAAiB,QAAQ;EAAgB;EACrD,IAAI;GAAE,MAAM;GAAiB,QAAQ;EAAgB;EACrD,MAAM;GAAE,MAAM;GAAc,QAAQ;EAAa;CAiBrC,EAAK;CACjB,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;;;;;;AAUD,MAAa,iBAAiB,YAAY"}

package/dist/popover/index.d.mts

@@ -0,0 +1,3 @@
+import { Popover, PopoverContent } from "./popover.mjs";
+import { PopoverStyleProps, popoverStyles } from "./popover.styles.mjs";
+export { Popover, PopoverContent, type PopoverStyleProps, popoverStyles };

package/dist/popover/popover.d.mts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+import { PopoverProps } from "@novi-ui/core";
+//#region src/popover/popover.d.ts
+/**
+ * Popover の中身。
+ *
+ * @example
+ * <PopoverContent>ここに補足を書く</PopoverContent>
+ */
+declare function PopoverContent({ children, className }: {
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * トリガーに紐づく注記の面。**面はトリガーの直後、フローの中に生える**
+ * （両テーマはトリガーの隣に浮かぶ）。
+ *
+ * 開くと後続が押し下げられるので、何かが隠れることが無い。
+ * Escape で閉じてトリガーへフォーカスが戻る。
+ *
+ * `placement` / `offset` は受け取るが**効かない**。浮かないものに寄せる先は無い。
+ * `arrow` slot も描かない。指す先が無いので、矢印は嘘になる。
+ *
+ * @example
+ * <Popover>
+ *   <Button>詳細</Button>
+ *   <PopoverContent>ここに補足を書く</PopoverContent>
+ * </Popover>
+ */
+declare function Popover({ radius, isOpen, defaultOpen, onOpenChange, children, className, classNames, id }: PopoverProps): import("react").JSX.Element;
+//#endregion
+export { Popover, PopoverContent };
+//# sourceMappingURL=popover.d.mts.map

package/dist/popover/popover.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.mts","names":[],"sources":["../../src/popover/popover.tsx"],"mappings":";;;;;;;;;iBAcgB,iBACd,UACA;EAEA,WAAW;EACX;oBACD,IAAA;;;;;;;;;;;;;;;;;iBAwBe,UACd,QACA,QACA,aACA,cACA,UACA,WACA,YACA,MACC,+BAAY,IAAA"}

package/dist/popover/popover.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { InflowPopover } from "../styles/inflow.mjs";
+import { popoverStyles } from "./popover.styles.mjs";
+import { Dialog, DialogTrigger } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/popover/popover.tsx
+/**
+* Popover の中身。
+*
+* @example
+* <PopoverContent>ここに補足を書く</PopoverContent>
+*/
+function PopoverContent({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "content",
+		className: popoverStyles().content({ class: className }),
+		children
+	});
+}
+/**
+* トリガーに紐づく注記の面。**面はトリガーの直後、フローの中に生える**
+* （両テーマはトリガーの隣に浮かぶ）。
+*
+* 開くと後続が押し下げられるので、何かが隠れることが無い。
+* Escape で閉じてトリガーへフォーカスが戻る。
+*
+* `placement` / `offset` は受け取るが**効かない**。浮かないものに寄せる先は無い。
+* `arrow` slot も描かない。指す先が無いので、矢印は嘘になる。
+*
+* @example
+* <Popover>
+*   <Button>詳細</Button>
+*   <PopoverContent>ここに補足を書く</PopoverContent>
+* </Popover>
+*/
+function Popover$1({ radius, isOpen, defaultOpen, onOpenChange, children, className, classNames, id }) {
+	const s = popoverStyles({ radius });
+	const [trigger, ...content] = Array.isArray(children) ? children : [children];
+	return /* @__PURE__ */ jsxs(DialogTrigger, {
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		children: [trigger, /* @__PURE__ */ jsx(InflowPopover, {
+			dataSlot: "root",
+			className: s.root({ class: [className, classNames?.root] }),
+			children: /* @__PURE__ */ jsx(Dialog, {
+				id,
+				className: "outline-none",
+				children: content
+			})
+		})]
+	});
+}
+//#endregion
+export { Popover$1 as Popover, PopoverContent };
+
+//# sourceMappingURL=popover.mjs.map

package/dist/popover/popover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.mjs","names":["Popover"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["'use client'\n\nimport type { PopoverProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport { Dialog, DialogTrigger } from 'react-aria-components'\nimport { InflowPopover } from '../styles/inflow'\nimport { popoverStyles } from './popover.styles'\n\n/**\n * Popover の中身。\n *\n * @example\n * <PopoverContent>ここに補足を書く</PopoverContent>\n */\nexport function PopoverContent({\n  children,\n  className,\n}: {\n  children?: ReactNode\n  className?: string\n}) {\n  return (\n    <div data-slot=\"content\" className={popoverStyles().content({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * トリガーに紐づく注記の面。**面はトリガーの直後、フローの中に生える**\n * （両テーマはトリガーの隣に浮かぶ）。\n *\n * 開くと後続が押し下げられるので、何かが隠れることが無い。\n * Escape で閉じてトリガーへフォーカスが戻る。\n *\n * `placement` / `offset` は受け取るが**効かない**。浮かないものに寄せる先は無い。\n * `arrow` slot も描かない。指す先が無いので、矢印は嘘になる。\n *\n * @example\n * <Popover>\n *   <Button>詳細</Button>\n *   <PopoverContent>ここに補足を書く</PopoverContent>\n * </Popover>\n */\nexport function Popover({\n  radius,\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  children,\n  className,\n  classNames,\n  id,\n}: PopoverProps) {\n  const s = popoverStyles({ radius })\n  const items = Array.isArray(children) ? children : [children]\n  const [trigger, ...content] = items\n\n  return (\n    <DialogTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {trigger}\n\n      {/* 注記面はトリガーの直後。ここに面が生えることで、後続が押し下がる */}\n      <InflowPopover dataSlot=\"root\" className={s.root({ class: [className, classNames?.root] })}>\n        {/* RAC の Popover は id を受け取らないため Dialog に付ける */}\n        <Dialog id={id} className=\"outline-none\">\n          {content}\n        </Dialog>\n      </InflowPopover>\n    </DialogTrigger>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAcA,SAAgB,eAAe,EAC7B,UACA,aAIC;CACD,OACE,oBAAC,OAAD;EAAK,aAAU;EAAU,WAAW,cAAc,CAAC,CAAC,QAAQ,EAAE,OAAO,UAAU,CAAC;EAC7E;CACE,CAAA;AAET;;;;;;;;;;;;;;;;;AAkBA,SAAgBA,UAAQ,EACtB,QACA,QACA,aACA,cACA,UACA,WACA,YACA,MACe;CACf,MAAM,IAAI,cAAc,EAAE,OAAO,CAAC;CAElC,MAAM,CAAC,SAAS,GAAG,WADL,MAAM,QAAQ,QAAQ,IAAI,WAAW,CAAC,QAAQ;CAG5D,OACE,qBAAC,eAAD;EAAuB;EAAqB;EAA2B;EAAvE,UAAA,CACG,SAGD,oBAAC,eAAD;GAAe,UAAS;GAAO,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;GAEvF,UAAA,oBAAC,QAAD;IAAY;IAAI,WAAU;IACvB,UAAA;GACK,CAAA;EACK,CAAA,CACF;;AAEnB"}

package/dist/popover/popover.styles.d.mts

@@ -0,0 +1,40 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/popover/popover.styles.d.ts
+/**
+ * Popover のスタイル定義。
+ *
+ * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、
+ * ここで `position` 系を書いても効かない（書く必要も無い）。
+ *
+ * @example
+ * const myPopover = tv({ extend: popoverStyles, slots: { content: 'px-4' } })
+ */
+declare const popoverStyles: import("tailwind-variants").TVReturnType<{
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  arrow: string;
+  content: string;
+}, undefined, {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  arrow: string;
+  content: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  arrow: string;
+  content: string;
+}>>;
+type PopoverStyleProps = Parameters<typeof popoverStyles>[0];
+//#endregion
+export { PopoverStyleProps, popoverStyles };
+//# sourceMappingURL=popover.styles.d.mts.map

package/dist/popover/popover.styles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.styles.d.mts","names":[],"sources":["../../src/popover/popover.styles.ts"],"mappings":";;;;;;;;;;;cAiDa,2CAAa;;IAjBmB;;;;;;;;IAAA;;;;;;;;IAAA;;;;;;;KAuBjC,oBAAoB,kBAAkB"}

package/dist/popover/popover.styles.mjs

@@ -0,0 +1,47 @@
+import { tv } from "tailwind-variants";
+//#region src/popover/popover.styles.ts
+/**
+* Flatlay の Popover は **インフローの注記面**（FR-05）。
+*
+* 両テーマはトリガーに紐づいて浮かぶが、Flatlay には浮かせる先が無い。
+* トリガーの直後に面が生えて後続を押し下げる。矢印（`arrow`）を描かないのは
+* Raster と同じ理由ではなく、**指す先が無いから**。浮いていないものは
+* 「あちらから来た」と示す必要がない。
+*
+* 地を一段落とすのは Menu / Select の展開部と役割を分けるため。
+* あちらは選ぶための一覧で、こちらは**読むための注記**。同じ紙の上で、
+* 書き足された欄であることを地の濃さが示す。
+*/
+const slots = {
+	root: [
+		"outline-none",
+		"border border-[var(--novi-color-border-strong)]",
+		"bg-[var(--novi-color-subtle)] text-[var(--novi-color-fg)]"
+	].join(" "),
+	arrow: "hidden",
+	content: "px-3 py-2 leading-[var(--novi-leading-body)]"
+};
+/**
+* Popover のスタイル定義。
+*
+* 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、
+* ここで `position` 系を書いても効かない（書く必要も無い）。
+*
+* @example
+* const myPopover = tv({ extend: popoverStyles, slots: { content: 'px-4' } })
+*/
+const popoverStyles = tv({
+	slots,
+	variants: { radius: {
+		none: { root: "rounded-[var(--novi-radius-none)]" },
+		sm: { root: "rounded-[var(--novi-radius-sm)]" },
+		md: { root: "rounded-[var(--novi-radius-md)]" },
+		lg: { root: "rounded-[var(--novi-radius-lg)]" },
+		full: { root: "rounded-[var(--novi-radius-full)]" }
+	} },
+	defaultVariants: { radius: "sm" }
+});
+//#endregion
+export { popoverStyles };
+
+//# sourceMappingURL=popover.styles.mjs.map

package/dist/popover/popover.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.styles.mjs","names":[],"sources":["../../src/popover/popover.styles.ts"],"sourcesContent":["import type {\n  NoviRadius,\n  popoverRequiredSlots,\n  popoverSlots,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\n/**\n * Flatlay の Popover は **インフローの注記面**（FR-05）。\n *\n * 両テーマはトリガーに紐づいて浮かぶが、Flatlay には浮かせる先が無い。\n * トリガーの直後に面が生えて後続を押し下げる。矢印（`arrow`）を描かないのは\n * Raster と同じ理由ではなく、**指す先が無いから**。浮いていないものは\n * 「あちらから来た」と示す必要がない。\n *\n * 地を一段落とすのは Menu / Select の展開部と役割を分けるため。\n * あちらは選ぶための一覧で、こちらは**読むための注記**。同じ紙の上で、\n * 書き足された欄であることを地の濃さが示す。\n */\nconst slots = {\n  root: [\n    'outline-none',\n    'border border-[var(--novi-color-border-strong)]',\n    'bg-[var(--novi-color-subtle)] text-[var(--novi-color-fg)]',\n  ].join(' '),\n  // 浮いていないので、どこから来た面かを指す必要が無い\n  arrow: 'hidden',\n  content: 'px-3 py-2 leading-[var(--novi-leading-body)]',\n} satisfies SlotMap<typeof popoverSlots, (typeof popoverRequiredSlots)[number]>\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n  none: { root: 'rounded-[var(--novi-radius-none)]' },\n  sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n  md: { root: 'rounded-[var(--novi-radius-md)]' },\n  lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n  full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Popover のスタイル定義。\n *\n * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、\n * ここで `position` 系を書いても効かない（書く必要も無い）。\n *\n * @example\n * const myPopover = tv({ extend: popoverStyles, slots: { content: 'px-4' } })\n */\nexport const popoverStyles = tv({\n  slots,\n  variants: { radius },\n  defaultVariants: { radius: 'sm' },\n})\n\nexport type PopoverStyleProps = Parameters<typeof popoverStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;CACP,SAAS;AACX;;;;;;;;;;AAmBA,MAAa,gBAAgB,GAAG;CAC9B;CACA,UAAU,EAAE;EAlBZ,MAAM,EAAE,MAAM,oCAAoC;EAClD,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,MAAM,EAAE,MAAM,oCAAoC;CActC,EAAO;CACnB,iBAAiB,EAAE,QAAQ,KAAK;AAClC,CAAC"}

package/dist/progress/index.d.mts

@@ -0,0 +1,3 @@
+import { Progress } from "./progress.mjs";
+import { ProgressStyleProps, progressStyles } from "./progress.styles.mjs";
+export { Progress, type ProgressStyleProps, progressStyles };

package/dist/progress/progress.d.mts

@@ -0,0 +1,15 @@
+import { ProgressProps } from "@novi-ui/core";
+//#region src/progress/progress.d.ts
+/**
+ * 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。
+ *
+ * Flatlay の進捗は**引かれていく罫線**で、面が伸びるのではなく線が引かれる。
+ * `prefers-reduced-motion` が有効なときは不確定表示の点滅を止める。
+ *
+ * @example
+ * <Progress label="アップロード中" value={62} showValueLabel />
+ */
+declare function Progress({ size, color, label, value, minValue, maxValue, showValueLabel, className, classNames, id }: ProgressProps): import("react").JSX.Element;
+//#endregion
+export { Progress };
+//# sourceMappingURL=progress.d.mts.map

package/dist/progress/progress.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.mts","names":[],"sources":["../../src/progress/progress.tsx"],"mappings":";;;;;;;;;;;iBAegB,WACd,MACA,OACA,OACA,OACA,UACA,UACA,gBACA,WACA,YACA,MACC,gCAAa,IAAA"}