@novi-ui/flatlay 0.1.0

package/dist/input/input.styles.d.mts

@@ -0,0 +1,97 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/input/input.styles.d.ts
+/**
+ * Input のスタイル定義。
+ *
+ * @example
+ * import { inputStyles } from '@novi-ui/flatlay'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myInput = tv({ extend: inputStyles, slots: { input: 'text-right' } })
+ */
+declare const inputStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  /**
+   * 記入欄の枠。RAC の `Group` は `data-focus-visible` / `data-invalid` を出すので、
+   * Button と同じ `focusRing` がそのまま効く。
+   *
+   * 罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。
+   * 色を base に書くと tailwind-merge が後勝ちで落とすので、ここには幅しか置かない。
+   */
+  inputWrapper: string;
+  input: string;
+  startContent: string;
+  endContent: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  /**
+   * 記入欄の枠。RAC の `Group` は `data-focus-visible` / `data-invalid` を出すので、
+   * Button と同じ `focusRing` がそのまま効く。
+   *
+   * 罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。
+   * 色を base に書くと tailwind-merge が後勝ちで落とすので、ここには幅しか置かない。
+   */
+  inputWrapper: string;
+  input: string;
+  startContent: string;
+  endContent: string;
+  description: string;
+  errorMessage: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  /**
+   * 記入欄の枠。RAC の `Group` は `data-focus-visible` / `data-invalid` を出すので、
+   * Button と同じ `focusRing` がそのまま効く。
+   *
+   * 罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。
+   * 色を base に書くと tailwind-merge が後勝ちで落とすので、ここには幅しか置かない。
+   */
+  inputWrapper: string;
+  input: string;
+  startContent: string;
+  endContent: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type InputStyleProps = Parameters<typeof inputStyles>[0];
+//#endregion
+export { InputStyleProps, inputStyles };
+//# sourceMappingURL=input.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.d.mts","names":[],"sources":["../../src/input/input.styles.ts"],"mappings":";;;;;;;;;;;cAoGa,yCAAW;;IAvByB;IAAe;;;IAMX;;;IAnBE;;;;;;;;;;;;;;;;;;;;IAaN;IAAe;;;IAMX;;;IAnBE;;;;;;;;;;;;;;;;;;;;IAaN;IAAe;;;IAMX;;;IAnBE;;;;;;;;;;;;;;;;;;;KA2C3C,kBAAkB,kBAAkB"}

package/dist/input/input.styles.mjs

@@ -0,0 +1,96 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { mono, monoNumeric } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/input/input.styles.ts
+/**
+* Flatlay の Input は**記入欄**。罫線で囲った枠に書き込む。
+*
+* 押下の反転（ADR-F3）はここには無い。入力欄は「押す」ものではなく、
+* カーソルが入って書くものなので、反転させると書いた文字が読めなくなる。
+* 手応えを返すのは罫線の色だけで、フォーカスはリングが担う。
+*
+* ラベルが等幅なのは ADR-F7 の運用。**読ませる文（本文）と読み取らせる項目名**を
+* 書体で分けるのが帳票の作法で、Flatlay が影を持たない代わりの区別になっている。
+*/
+const slots = {
+	root: "flex flex-col gap-1.5",
+	label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
+	/**
+	* 記入欄の枠。RAC の `Group` は `data-focus-visible` / `data-invalid` を出すので、
+	* Button と同じ `focusRing` がそのまま効く。
+	*
+	* 罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。
+	* 色を base に書くと tailwind-merge が後勝ちで落とすので、ここには幅しか置かない。
+	*/
+	inputWrapper: [
+		"flex items-center gap-2 w-full",
+		"text-[var(--novi-color-fg)]",
+		"border",
+		"rounded-[var(--novi-radius-sm)]",
+		"data-[invalid]:border-[var(--novi-color-danger)]",
+		"transition-[border-color,opacity]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		focusRing,
+		disabledState
+	].join(" "),
+	input: [
+		"w-full min-w-0 bg-transparent outline-none",
+		"text-[var(--novi-color-fg)]",
+		"placeholder:text-[var(--novi-color-muted)]"
+	].join(" "),
+	startContent: `shrink-0 inline-flex text-[var(--novi-color-muted)] ${monoNumeric}`,
+	endContent: `shrink-0 inline-flex text-[var(--novi-color-muted)] ${monoNumeric}`,
+	description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,
+	errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`
+};
+/**
+* Input のスタイル定義。
+*
+* @example
+* import { inputStyles } from '@novi-ui/flatlay'
+* import { tv } from 'tailwind-variants'
+*
+* const myInput = tv({ extend: inputStyles, slots: { input: 'text-right' } })
+*/
+const inputStyles = tv({
+	slots,
+	variants: {
+		size: {
+			sm: {
+				inputWrapper: "h-7 px-2.5",
+				input: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				inputWrapper: "h-8 px-3",
+				input: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "h-10 px-4",
+				input: "text-[length:var(--novi-text-base)]"
+			}
+		},
+		radius: {
+			none: { inputWrapper: "rounded-[var(--novi-radius-none)]" },
+			sm: { inputWrapper: "rounded-[var(--novi-radius-sm)]" },
+			md: { inputWrapper: "rounded-[var(--novi-radius-md)]" },
+			lg: { inputWrapper: "rounded-[var(--novi-radius-lg)]" },
+			full: { inputWrapper: "rounded-[var(--novi-radius-full)]" }
+		},
+		variant: {
+			solid: { inputWrapper: "bg-[var(--novi-color-surface)] border-[var(--novi-color-border-strong)]" },
+			outline: { inputWrapper: "bg-transparent border-[var(--novi-color-border-strong)]" },
+			soft: { inputWrapper: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]" },
+			ghost: { inputWrapper: "bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]" },
+			plain: { inputWrapper: "bg-transparent border-transparent px-0" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		radius: "sm",
+		variant: "outline"
+	}
+});
+//#endregion
+export { inputStyles };
+
+//# sourceMappingURL=input.styles.mjs.map

package/dist/input/input.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.mjs","names":[],"sources":["../../src/input/input.styles.ts"],"sourcesContent":["import type {\n  inputRequiredSlots,\n  inputSlots,\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono, monoNumeric } from '../styles/mono'\n\n/**\n * Flatlay の Input は**記入欄**。罫線で囲った枠に書き込む。\n *\n * 押下の反転（ADR-F3）はここには無い。入力欄は「押す」ものではなく、\n * カーソルが入って書くものなので、反転させると書いた文字が読めなくなる。\n * 手応えを返すのは罫線の色だけで、フォーカスはリングが担う。\n *\n * ラベルが等幅なのは ADR-F7 の運用。**読ませる文（本文）と読み取らせる項目名**を\n * 書体で分けるのが帳票の作法で、Flatlay が影を持たない代わりの区別になっている。\n */\nconst slots = {\n  root: 'flex flex-col gap-1.5',\n  // 項目名は等幅。プレースホルダをラベル代わりにはしない\n  label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n  /**\n   * 記入欄の枠。RAC の `Group` は `data-focus-visible` / `data-invalid` を出すので、\n   * Button と同じ `focusRing` がそのまま効く。\n   *\n   * 罫線の幅は全 variant が持ち、色だけを variant が決める（Flatlay の型）。\n   * 色を base に書くと tailwind-merge が後勝ちで落とすので、ここには幅しか置かない。\n   */\n  inputWrapper: [\n    'flex items-center gap-2 w-full',\n    'text-[var(--novi-color-fg)]',\n    'border',\n    'rounded-[var(--novi-radius-sm)]',\n    'data-[invalid]:border-[var(--novi-color-danger)]',\n    'transition-[border-color,opacity]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  input: [\n    'w-full min-w-0 bg-transparent outline-none',\n    'text-[var(--novi-color-fg)]',\n    'placeholder:text-[var(--novi-color-muted)]',\n  ].join(' '),\n  // 差し込まれるのは単位・通貨記号・件数といった「読み取らせる値」なので等幅（ADR-F7）\n  startContent: `shrink-0 inline-flex text-[var(--novi-color-muted)] ${monoNumeric}`,\n  endContent: `shrink-0 inline-flex text-[var(--novi-color-muted)] ${monoNumeric}`,\n  description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n  // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n  errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`,\n} satisfies SlotMap<typeof inputSlots, (typeof inputRequiredSlots)[number]>\n\n/**\n * variant が決めるのは**枠の強さと地の色**。\n *\n * `ghost` が下線だけになるのは帳票の記入線そのもので、表を詰めて並べたときに\n * 面を増やさずに「ここに書く」を示せる。Flatlay で唯一これが自然に効く形。\n */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n  solid: {\n    inputWrapper: 'bg-[var(--novi-color-surface)] border-[var(--novi-color-border-strong)]',\n  },\n  outline: { inputWrapper: 'bg-transparent border-[var(--novi-color-border-strong)]' },\n  soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n  ghost: {\n    inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n  },\n  plain: { inputWrapper: 'bg-transparent border-transparent px-0' },\n}\n\n/** 高さは Button と同じ帳票の行。28 / 32 / 40px。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string }> = {\n  sm: { inputWrapper: 'h-7 px-2.5', input: 'text-[length:var(--novi-text-sm)]' },\n  md: { inputWrapper: 'h-8 px-3', input: 'text-[length:var(--novi-text-base)]' },\n  lg: { inputWrapper: 'h-10 px-4', input: 'text-[length:var(--novi-text-base)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n  none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n  sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n  md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n  lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n  full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Input のスタイル定義。\n *\n * @example\n * import { inputStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myInput = tv({ extend: inputStyles, slots: { input: 'text-right' } })\n */\nexport const inputStyles = tv({\n  slots,\n  // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n  variants: { size, radius, variant },\n  defaultVariants: { size: 'md', radius: 'sm', variant: 'outline' },\n})\n\nexport type InputStyleProps = Parameters<typeof inputStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,QAAQ;CACZ,MAAM;CAEN,OAAO,iEAAiE;;;;;;;;CAQxE,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,cAAc,uDAAuD;CACrE,YAAY,uDAAuD;CACnE,aAAa,oEAAoE;CAEjF,cAAc,qEAAqE;AACrF;;;;;;;;;;AA4CA,MAAa,cAAc,GAAG;CAC5B;CAEA,UAAU;EAAE;GAzBZ,IAAI;IAAE,cAAc;IAAc,OAAO;GAAoC;GAC7E,IAAI;IAAE,cAAc;IAAY,OAAO;GAAsC;GAC7E,IAAI;IAAE,cAAc;IAAa,OAAO;GAAsC;EAuBlE;EAAM;GAnBlB,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAexC;EAAQ;GAtC1B,OAAO,EACL,cAAc,0EAChB;GACA,SAAS,EAAE,cAAc,0DAA0D;GACnF,MAAM,EAAE,cAAc,kEAAkE;GACxF,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,yCAAyC;EA8BtC;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAU;AAClE,CAAC"}

package/dist/menu/index.d.mts

@@ -0,0 +1,3 @@
+import { Menu, MenuItemComponent, MenuItemProps, MenuSection, MenuSeparator } from "./menu.mjs";
+import { MenuStyleProps, menuStyles } from "./menu.styles.mjs";
+export { Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, menuStyles };

package/dist/menu/menu.d.mts

@@ -0,0 +1,66 @@
+import { ReactNode } from "react";
+import { MenuProps } from "@novi-ui/core";
+//#region src/menu/menu.d.ts
+interface MenuItemProps {
+  /** 選ばれたときに `onAction` へ渡る値 */
+  id: string;
+  isDisabled?: boolean;
+  /** 補足説明。項目名だけで足りないときに使う */
+  description?: ReactNode;
+  /** キーボードショートカットの表示。Flatlay では本文と同じ濃さで右端に揃う */
+  shortcut?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * Menu の項目。
+ *
+ * @example
+ * <MenuItem id="rename" shortcut="⌘R">名前を変更</MenuItem>
+ */
+declare function MenuItemComponent({ id, isDisabled, description, shortcut, children, className }: MenuItemProps): import("react").JSX.Element;
+/**
+ * Menu の区切り線。行の罫線より濃く、まとまりの切れ目を示す。
+ *
+ * @example
+ * <MenuSeparator />
+ */
+declare function MenuSeparator({ className }: {
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * Menu の見出し付きグループ。項目が多いときに種類でまとめる。
+ *
+ * @example
+ * <MenuSection title="ファイル">
+ *   <MenuItem id="rename">名前を変更</MenuItem>
+ * </MenuSection>
+ */
+declare function MenuSection({ title, children, className }: {
+  title: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * トリガーから開く操作の一覧。**一覧はトリガーの直後、フローの中に展開される**
+ * （Raster は隣に浮き、Tactile は画面下端のシート）。
+ *
+ * 開くと後続が押し下げられるので、何かが隠れることが無い。
+ * 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。
+ *
+ * `placement` / `offset` は受け取るが**効かない**。浮かないものに寄せる先は無い。
+ * 他テーマ向けに書いたコードがそのまま動くよう、受け取ること自体はやめていない。
+ *
+ * 最初の子要素がトリガーになる。残りが項目として扱われる。
+ *
+ * @example
+ * <Menu onAction={(key) => run(key)}>
+ *   <Button>操作</Button>
+ *   <MenuItem id="rename" shortcut="⌘R">名前を変更</MenuItem>
+ *   <MenuItem id="delete">削除</MenuItem>
+ * </Menu>
+ */
+declare function Menu({ isOpen, defaultOpen, onOpenChange, onAction, disabledKeys, children, className, classNames, id }: MenuProps): import("react").JSX.Element;
+//#endregion
+export { Menu, MenuItemComponent, MenuItemProps, MenuSection, MenuSeparator };
+//# sourceMappingURL=menu.d.mts.map

package/dist/menu/menu.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.mts","names":[],"sources":["../../src/menu/menu.tsx"],"mappings":";;;UAeiB;;EAEf;EACA;;EAEA,cAAc;;EAEd,WAAW;EACX,WAAW;EACX;;;;;;;;iBASc,oBACd,IACA,YACA,aACA,UACA,UACA,aACC,gCAAa,IAAA;;;;;;;iBAoCA,gBAAgB;EAAe;oBAAoB,IAAA;;;;;;;;;iBAcnD,cACd,OACA,UACA;EAEA,OAAO;EACP,WAAW;EACX;oBACD,IAAA;;;;;;;;;;;;;;;;;;;;iBAgCe,OACd,QACA,aACA,cACA,UACA,cACA,UACA,WACA,YACA,MACC,4BAAS,IAAA"}

package/dist/menu/menu.mjs

@@ -0,0 +1,118 @@
+"use client";
+import { InflowPopover } from "../styles/inflow.mjs";
+import { menuStyles } from "./menu.styles.mjs";
+import { Header, Menu, MenuItem, MenuSection, MenuTrigger, Separator } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/menu/menu.tsx
+/**
+* Menu の項目。
+*
+* @example
+* <MenuItem id="rename" shortcut="⌘R">名前を変更</MenuItem>
+*/
+function MenuItemComponent({ id, isDisabled, description, shortcut, children, className }) {
+	const s = menuStyles();
+	return /* @__PURE__ */ jsxs(MenuItem, {
+		id,
+		isDisabled,
+		textValue: typeof children === "string" ? children : void 0,
+		"data-slot": "item",
+		className: s.item({ class: className }),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col min-w-0",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "itemLabel",
+				className: s.itemLabel(),
+				children
+			}), description !== void 0 && /* @__PURE__ */ jsx("span", {
+				"data-slot": "itemDescription",
+				className: s.itemDescription(),
+				children: description
+			})]
+		}), shortcut !== void 0 && /* @__PURE__ */ jsx("span", {
+			"data-slot": "itemShortcut",
+			className: s.itemShortcut(),
+			children: shortcut
+		})]
+	});
+}
+/**
+* Menu の区切り線。行の罫線より濃く、まとまりの切れ目を示す。
+*
+* @example
+* <MenuSeparator />
+*/
+function MenuSeparator({ className }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "separator",
+		className: menuStyles().separator({ class: className })
+	});
+}
+/**
+* Menu の見出し付きグループ。項目が多いときに種類でまとめる。
+*
+* @example
+* <MenuSection title="ファイル">
+*   <MenuItem id="rename">名前を変更</MenuItem>
+* </MenuSection>
+*/
+function MenuSection$1({ title, children, className }) {
+	const s = menuStyles();
+	return /* @__PURE__ */ jsxs(MenuSection, {
+		"data-slot": "section",
+		className: s.section({ class: className }),
+		children: [/* @__PURE__ */ jsx(Header, {
+			"data-slot": "sectionLabel",
+			className: s.sectionLabel(),
+			children: title
+		}), children]
+	});
+}
+/**
+* トリガーから開く操作の一覧。**一覧はトリガーの直後、フローの中に展開される**
+* （Raster は隣に浮き、Tactile は画面下端のシート）。
+*
+* 開くと後続が押し下げられるので、何かが隠れることが無い。
+* 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。
+*
+* `placement` / `offset` は受け取るが**効かない**。浮かないものに寄せる先は無い。
+* 他テーマ向けに書いたコードがそのまま動くよう、受け取ること自体はやめていない。
+*
+* 最初の子要素がトリガーになる。残りが項目として扱われる。
+*
+* @example
+* <Menu onAction={(key) => run(key)}>
+*   <Button>操作</Button>
+*   <MenuItem id="rename" shortcut="⌘R">名前を変更</MenuItem>
+*   <MenuItem id="delete">削除</MenuItem>
+* </Menu>
+*/
+function Menu$1({ isOpen, defaultOpen, onOpenChange, onAction, disabledKeys, children, className, classNames, id }) {
+	const s = menuStyles();
+	const [trigger, ...rest] = Array.isArray(children) ? children : [children];
+	return /* @__PURE__ */ jsxs(MenuTrigger, {
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "trigger",
+			className: s.trigger({ class: classNames?.trigger }),
+			children: trigger
+		}), /* @__PURE__ */ jsx(InflowPopover, {
+			dataSlot: "popover",
+			className: s.popover({ class: [className, classNames?.popover] }),
+			children: /* @__PURE__ */ jsx(Menu, {
+				id,
+				"data-slot": "list",
+				className: s.list({ class: classNames?.list }),
+				onAction: (key) => onAction?.(String(key)),
+				disabledKeys,
+				children: rest
+			})
+		})]
+	});
+}
+//#endregion
+export { Menu$1 as Menu, MenuItemComponent, MenuSection$1 as MenuSection, MenuSeparator };
+
+//# sourceMappingURL=menu.mjs.map

package/dist/menu/menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.mjs","names":["MenuSection","RACMenuSection","Menu","RACMenu"],"sources":["../../src/menu/menu.tsx"],"sourcesContent":["'use client'\n\nimport type { MenuProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport {\n  Header,\n  MenuItem,\n  MenuTrigger,\n  Menu as RACMenu,\n  MenuSection as RACMenuSection,\n  Separator,\n} from 'react-aria-components'\nimport { InflowPopover } from '../styles/inflow'\nimport { menuStyles } from './menu.styles'\n\nexport interface MenuItemProps {\n  /** 選ばれたときに `onAction` へ渡る値 */\n  id: string\n  isDisabled?: boolean\n  /** 補足説明。項目名だけで足りないときに使う */\n  description?: ReactNode\n  /** キーボードショートカットの表示。Flatlay では本文と同じ濃さで右端に揃う */\n  shortcut?: ReactNode\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * Menu の項目。\n *\n * @example\n * <MenuItem id=\"rename\" shortcut=\"⌘R\">名前を変更</MenuItem>\n */\nexport function MenuItemComponent({\n  id,\n  isDisabled,\n  description,\n  shortcut,\n  children,\n  className,\n}: MenuItemProps) {\n  const s = menuStyles()\n\n  return (\n    <MenuItem\n      id={id}\n      isDisabled={isDisabled}\n      textValue={typeof children === 'string' ? children : undefined}\n      data-slot=\"item\"\n      className={s.item({ class: className })}\n    >\n      <span className=\"flex flex-col min-w-0\">\n        <span data-slot=\"itemLabel\" className={s.itemLabel()}>\n          {children}\n        </span>\n        {description !== undefined && (\n          <span data-slot=\"itemDescription\" className={s.itemDescription()}>\n            {description}\n          </span>\n        )}\n      </span>\n      {shortcut !== undefined && (\n        <span data-slot=\"itemShortcut\" className={s.itemShortcut()}>\n          {shortcut}\n        </span>\n      )}\n    </MenuItem>\n  )\n}\n\n/**\n * Menu の区切り線。行の罫線より濃く、まとまりの切れ目を示す。\n *\n * @example\n * <MenuSeparator />\n */\nexport function MenuSeparator({ className }: { className?: string }) {\n  return (\n    <Separator data-slot=\"separator\" className={menuStyles().separator({ class: className })} />\n  )\n}\n\n/**\n * Menu の見出し付きグループ。項目が多いときに種類でまとめる。\n *\n * @example\n * <MenuSection title=\"ファイル\">\n *   <MenuItem id=\"rename\">名前を変更</MenuItem>\n * </MenuSection>\n */\nexport function MenuSection({\n  title,\n  children,\n  className,\n}: {\n  title: ReactNode\n  children?: ReactNode\n  className?: string\n}) {\n  const s = menuStyles()\n\n  return (\n    <RACMenuSection data-slot=\"section\" className={s.section({ class: className })}>\n      <Header data-slot=\"sectionLabel\" className={s.sectionLabel()}>\n        {title}\n      </Header>\n      {children}\n    </RACMenuSection>\n  )\n}\n\n/**\n * トリガーから開く操作の一覧。**一覧はトリガーの直後、フローの中に展開される**\n * （Raster は隣に浮き、Tactile は画面下端のシート）。\n *\n * 開くと後続が押し下げられるので、何かが隠れることが無い。\n * 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。\n *\n * `placement` / `offset` は受け取るが**効かない**。浮かないものに寄せる先は無い。\n * 他テーマ向けに書いたコードがそのまま動くよう、受け取ること自体はやめていない。\n *\n * 最初の子要素がトリガーになる。残りが項目として扱われる。\n *\n * @example\n * <Menu onAction={(key) => run(key)}>\n *   <Button>操作</Button>\n *   <MenuItem id=\"rename\" shortcut=\"⌘R\">名前を変更</MenuItem>\n *   <MenuItem id=\"delete\">削除</MenuItem>\n * </Menu>\n */\nexport function Menu({\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  onAction,\n  disabledKeys,\n  children,\n  className,\n  classNames,\n  id,\n}: MenuProps) {\n  const s = menuStyles()\n  const items = Array.isArray(children) ? children : [children]\n  const [trigger, ...rest] = items\n\n  return (\n    <MenuTrigger isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      <span data-slot=\"trigger\" className={s.trigger({ class: classNames?.trigger })}>\n        {trigger}\n      </span>\n\n      {/* 展開部はトリガーの直後。ここに面が生えることで、後続が押し下がる */}\n      <InflowPopover\n        dataSlot=\"popover\"\n        className={s.popover({ class: [className, classNames?.popover] })}\n      >\n        {/* RAC の Popover は id を受け取らないため Menu 本体に付ける */}\n        <RACMenu\n          id={id}\n          data-slot=\"list\"\n          className={s.list({ class: classNames?.list })}\n          onAction={(key) => onAction?.(String(key))}\n          disabledKeys={disabledKeys}\n        >\n          {rest}\n        </RACMenu>\n      </InflowPopover>\n    </MenuTrigger>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAiCA,SAAgB,kBAAkB,EAChC,IACA,YACA,aACA,UACA,UACA,aACgB;CAChB,MAAM,IAAI,WAAW;CAErB,OACE,qBAAC,UAAD;EACM;EACQ;EACZ,WAAW,OAAO,aAAa,WAAW,WAAW,KAAA;EACrD,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,UAAU,CAAC;EALxC,UAAA,CAOE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAY,WAAW,EAAE,UAAU;IAChD;GACG,CAAA,GACL,gBAAgB,KAAA,KACf,oBAAC,QAAD;IAAM,aAAU;IAAkB,WAAW,EAAE,gBAAgB;IAC5D,UAAA;GACG,CAAA,CAEJ;EACL,CAAA,GAAA,aAAa,KAAA,KACZ,oBAAC,QAAD;GAAM,aAAU;GAAe,WAAW,EAAE,aAAa;GACtD,UAAA;EACG,CAAA,CAEA;;AAEd;;;;;;;AAQA,SAAgB,cAAc,EAAE,aAAqC;CACnE,OACE,oBAAC,WAAD;EAAW,aAAU;EAAY,WAAW,WAAW,CAAC,CAAC,UAAU,EAAE,OAAO,UAAU,CAAC;CAAI,CAAA;AAE/F;;;;;;;;;AAUA,SAAgBA,cAAY,EAC1B,OACA,UACA,aAKC;CACD,MAAM,IAAI,WAAW;CAErB,OACE,qBAACC,aAAD;EAAgB,aAAU;EAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,UAAU,CAAC;EAA7E,UAAA,CACE,oBAAC,QAAD;GAAQ,aAAU;GAAe,WAAW,EAAE,aAAa;GACxD,UAAA;EACK,CAAA,GACP,QACa;;AAEpB;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgBC,OAAK,EACnB,QACA,aACA,cACA,UACA,cACA,UACA,WACA,YACA,MACY;CACZ,MAAM,IAAI,WAAW;CAErB,MAAM,CAAC,SAAS,GAAG,QADL,MAAM,QAAQ,QAAQ,IAAI,WAAW,CAAC,QAAQ;CAG5D,OACE,qBAAC,aAAD;EAAqB;EAAqB;EAA2B;EAArE,UAAA,CACE,oBAAC,QAAD;GAAM,aAAU;GAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;GAC1E,UAAA;EACG,CAAA,GAGN,oBAAC,eAAD;GACE,UAAS;GACT,WAAW,EAAE,QAAQ,EAAE,OAAO,CAAC,WAAW,YAAY,OAAO,EAAE,CAAC;GAGhE,UAAA,oBAACC,MAAD;IACM;IACJ,aAAU;IACV,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;IAC7C,WAAW,QAAQ,WAAW,OAAO,GAAG,CAAC;IAC3B;IAEb,UAAA;GACM,CAAA;EACI,CAAA,CACJ;;AAEjB"}

package/dist/menu/menu.styles.d.mts

@@ -0,0 +1,114 @@
+//#region src/menu/menu.styles.d.ts
+/**
+ * Menu のスタイル定義。
+ *
+ * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、
+ * ここで `position` 系を書いても効かない（書く必要も無い）。
+ *
+ * @example
+ * const myMenu = tv({ extend: menuStyles, slots: { popover: 'min-w-56' } })
+ */
+declare const menuStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      item?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
+      itemDescription?: import("tailwind-variants").ClassValue;
+      itemShortcut?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+      sectionLabel?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      item?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
+      itemDescription?: import("tailwind-variants").ClassValue;
+      itemShortcut?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+      sectionLabel?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  trigger: string;
+  popover: string;
+  list: string;
+  item: string;
+  itemLabel: string;
+  itemDescription: string;
+  /**
+   * ショートカットは**主役**（FR-10）。
+   *
+   * 両テーマは muted の小さな注記として右端に添えるが、帳票の世界では
+   * 「キーで引ける」ことが操作そのものの見出しになる。本文と同じ濃さ・
+   * 同じ大きさで、等幅の列として縦に揃える。
+   */
+  itemShortcut: string;
+  separator: string;
+  section: string;
+  sectionLabel: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      item?: import("tailwind-variants").ClassValue;
+      trigger?: import("tailwind-variants").ClassValue;
+      list?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
+      itemDescription?: import("tailwind-variants").ClassValue;
+      itemShortcut?: import("tailwind-variants").ClassValue;
+      section?: import("tailwind-variants").ClassValue;
+      sectionLabel?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  trigger: string;
+  popover: string;
+  list: string;
+  item: string;
+  itemLabel: string;
+  itemDescription: string;
+  /**
+   * ショートカットは**主役**（FR-10）。
+   *
+   * 両テーマは muted の小さな注記として右端に添えるが、帳票の世界では
+   * 「キーで引ける」ことが操作そのものの見出しになる。本文と同じ濃さ・
+   * 同じ大きさで、等幅の列として縦に揃える。
+   */
+  itemShortcut: string;
+  separator: string;
+  section: string;
+  sectionLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  trigger: string;
+  popover: string;
+  list: string;
+  item: string;
+  itemLabel: string;
+  itemDescription: string;
+  /**
+   * ショートカットは**主役**（FR-10）。
+   *
+   * 両テーマは muted の小さな注記として右端に添えるが、帳票の世界では
+   * 「キーで引ける」ことが操作そのものの見出しになる。本文と同じ濃さ・
+   * 同じ大きさで、等幅の列として縦に揃える。
+   */
+  itemShortcut: string;
+  separator: string;
+  section: string;
+  sectionLabel: string;
+}>>;
+type MenuStyleProps = Parameters<typeof menuStyles>[0];
+//#endregion
+export { MenuStyleProps, menuStyles };
+//# sourceMappingURL=menu.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.styles.d.mts","names":[],"sources":["../../src/menu/menu.styles.ts"],"mappings":";;;;;;;;;;cAoEa,wCAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEX,iBAAiB,kBAAkB"}

package/dist/menu/menu.styles.mjs

@@ -0,0 +1,66 @@
+import { disabledState } from "../styles/focus-ring.mjs";
+import { mono, monoNumeric } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/menu/menu.styles.ts
+/**
+* Flatlay の Menu は **インフロー押し下げ**（FR-05）。
+*
+* 両テーマはトリガーの隣（Raster）か画面下端（Tactile）に浮かせるが、Flatlay には
+* 浮かせる先が無い。**一覧はトリガーの直後に生えて後続を押し下げる**。
+* 配置は `styles/inflow.tsx` が担い、ここは面の見た目だけを決める。
+*
+* `placement` / `offset` は受け取るが効かない。浮かないものに寄せる先は無い。
+*/
+const slots = {
+	trigger: "outline-none",
+	popover: [
+		"min-w-40 outline-none",
+		"border border-[var(--novi-color-border-strong)]",
+		"bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]",
+		"rounded-[var(--novi-radius-sm)]",
+		"overflow-hidden"
+	].join(" "),
+	list: "outline-none flex flex-col divide-y divide-[var(--novi-color-border)]",
+	item: [
+		"flex items-center justify-between gap-3",
+		"min-h-7 px-2 py-1 cursor-pointer outline-none",
+		"text-[var(--novi-color-fg)]",
+		"data-[focused]:bg-[var(--novi-color-subtle)]",
+		"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
+		"transition-[background-color,color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		disabledState
+	].join(" "),
+	itemLabel: "truncate",
+	itemDescription: `text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] ${mono}`,
+	/**
+	* ショートカットは**主役**（FR-10）。
+	*
+	* 両テーマは muted の小さな注記として右端に添えるが、帳票の世界では
+	* 「キーで引ける」ことが操作そのものの見出しになる。本文と同じ濃さ・
+	* 同じ大きさで、等幅の列として縦に揃える。
+	*/
+	itemShortcut: `shrink-0 text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${monoNumeric}`,
+	separator: "h-px bg-[var(--novi-color-border-strong)]",
+	section: "flex flex-col",
+	sectionLabel: [
+		"px-2 py-1",
+		"bg-[var(--novi-color-subtle)]",
+		"text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
+		mono
+	].join(" ")
+};
+/**
+* Menu のスタイル定義。
+*
+* 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、
+* ここで `position` 系を書いても効かない（書く必要も無い）。
+*
+* @example
+* const myMenu = tv({ extend: menuStyles, slots: { popover: 'min-w-56' } })
+*/
+const menuStyles = tv({ slots });
+//#endregion
+export { menuStyles };
+
+//# sourceMappingURL=menu.styles.mjs.map

package/dist/menu/menu.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.styles.mjs","names":[],"sources":["../../src/menu/menu.styles.ts"],"sourcesContent":["import type { menuRequiredSlots, menuSlots, SlotMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState } from '../styles/focus-ring'\nimport { mono, monoNumeric } from '../styles/mono'\n\n/**\n * Flatlay の Menu は **インフロー押し下げ**（FR-05）。\n *\n * 両テーマはトリガーの隣（Raster）か画面下端（Tactile）に浮かせるが、Flatlay には\n * 浮かせる先が無い。**一覧はトリガーの直後に生えて後続を押し下げる**。\n * 配置は `styles/inflow.tsx` が担い、ここは面の見た目だけを決める。\n *\n * `placement` / `offset` は受け取るが効かない。浮かないものに寄せる先は無い。\n */\nconst slots = {\n  trigger: 'outline-none',\n  popover: [\n    // 影が無い以上、面の存在を示せるのは罫線だけ\n    'min-w-40 outline-none',\n    'border border-[var(--novi-color-border-strong)]',\n    'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n    'rounded-[var(--novi-radius-sm)]',\n    'overflow-hidden',\n  ].join(' '),\n  // 行の切れ目も線。Select の一覧と同じ帳票の目\n  list: 'outline-none flex flex-col divide-y divide-[var(--novi-color-border)]',\n  item: [\n    'flex items-center justify-between gap-3',\n    'min-h-7 px-2 py-1 cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'data-[focused]:bg-[var(--novi-color-subtle)]',\n    // 押下は反転スタンプ（ADR-F3）。選ばれた瞬間だけ面が返る\n    'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n    'transition-[background-color,color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    disabledState,\n  ].join(' '),\n  itemLabel: 'truncate',\n  itemDescription: `text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] ${mono}`,\n  /**\n   * ショートカットは**主役**（FR-10）。\n   *\n   * 両テーマは muted の小さな注記として右端に添えるが、帳票の世界では\n   * 「キーで引ける」ことが操作そのものの見出しになる。本文と同じ濃さ・\n   * 同じ大きさで、等幅の列として縦に揃える。\n   */\n  itemShortcut: `shrink-0 text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${monoNumeric}`,\n  // 行の線より濃い。ここが「まとまりの切れ目」であることを線の濃さで示す\n  separator: 'h-px bg-[var(--novi-color-border-strong)]',\n  section: 'flex flex-col',\n  // 表の見出し行。地を一段落として、浮かせずに階層を作る\n  sectionLabel: [\n    'px-2 py-1',\n    'bg-[var(--novi-color-subtle)]',\n    'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n    mono,\n  ].join(' '),\n} satisfies SlotMap<typeof menuSlots, (typeof menuRequiredSlots)[number]>\n\n/**\n * Menu のスタイル定義。\n *\n * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、\n * ここで `position` 系を書いても効かない（書く必要も無い）。\n *\n * @example\n * const myMenu = tv({ extend: menuStyles, slots: { popover: 'min-w-56' } })\n */\nexport const menuStyles = tv({ slots })\n\nexport type MenuStyleProps = Parameters<typeof menuStyles>[0]\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,QAAQ;CACZ,SAAS;CACT,SAAS;EAEP;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,MAAM;CACN,MAAM;EACJ;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,iBAAiB,oEAAoE;;;;;;;;CAQrF,cAAc,0EAA0E;CAExF,WAAW;CACX,SAAS;CAET,cAAc;EACZ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AAWA,MAAa,aAAa,GAAG,EAAE,MAAM,CAAC"}

package/dist/modal/index.d.mts

@@ -0,0 +1,3 @@
+import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal.mjs";
+import { ModalStyleProps, modalStyles } from "./modal.styles.mjs";
+export { Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, modalStyles };