@novi-ui/tactile 0.1.0

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

@@ -0,0 +1,81 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/input/input.styles.d.ts
+/**
+ * Input のスタイル定義。
+ *
+ * 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。
+ *
+ * @example
+ * import { inputStyles } from '@novi-ui/tactile'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myInput = tv({
+ *   extend: inputStyles,
+ *   slots: { inputWrapper: 'font-mono' },
+ * })
+ */
+declare const inputStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  startContent: string;
+  endContent: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  startContent: string;
+  endContent: string;
+  description: string;
+  errorMessage: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  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":";;;;;;;;;;;;;;;;cA2Ga,yCAAW;;IAvD+B;;;IA2BN;IAAe;;;IAMX;;;;;;;;;;;;;IAjCE;;;IA2BN;IAAe;;;IAMX;;;;;;;;;;;;;IAjCE;;;IA2BN;IAAe;;;IAMX;;;;;;;;;;;;KA4BzC,kBAAkB,kBAAkB"}

package/dist/input/input.styles.mjs

@@ -0,0 +1,88 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/input/input.styles.ts
+/**
+* Tactile の Input は**指で触る前提の面**。境界線ではなく影で持ち上げ、
+* 入力の文字は 16px を下回らせない（iOS Safari が自動ズームしてレイアウトが飛ぶ）。
+*/
+const slots = {
+	root: "flex flex-col gap-1.5",
+	label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
+	inputWrapper: [
+		"text-[var(--novi-color-fg)]",
+		"flex items-center gap-2 w-full",
+		"bg-[var(--novi-color-surface)]",
+		"shadow-[var(--novi-shadow-sm)]",
+		"rounded-[var(--novi-radius-md)]",
+		"transition-[opacity,box-shadow]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]",
+		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)]",
+	endContent: "shrink-0 inline-flex text-[var(--novi-color-muted)]",
+	description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]"
+};
+/**
+* Input のスタイル定義。
+*
+* 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。
+*
+* @example
+* import { inputStyles } from '@novi-ui/tactile'
+* import { tv } from 'tailwind-variants'
+*
+* const myInput = tv({
+*   extend: inputStyles,
+*   slots: { inputWrapper: 'font-mono' },
+* })
+*/
+const inputStyles = tv({
+	slots,
+	variants: {
+		variant: {
+			solid: { inputWrapper: "bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]" },
+			outline: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]" },
+			soft: { inputWrapper: "bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]" },
+			ghost: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)]" },
+			plain: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]" }
+		},
+		size: {
+			sm: {
+				inputWrapper: "h-10 px-3",
+				input: "text-[length:var(--novi-text-base)]"
+			},
+			md: {
+				inputWrapper: "h-12 px-4",
+				input: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "h-14 px-5",
+				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)]" }
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		size: "md",
+		radius: "md"
+	}
+});
+//#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'\n\n/**\n * Tactile の Input は**指で触る前提の面**。境界線ではなく影で持ち上げ、\n * 入力の文字は 16px を下回らせない（iOS Safari が自動ズームしてレイアウトが飛ぶ）。\n */\n// 型注釈ではなく satisfies（ADR-R5）。任意 slot が呼べなくなるのを防ぐ。\nconst slots = {\n  root: 'flex flex-col gap-1.5',\n  // ラベルは常に上・左揃え。プレースホルダをラベル代わりにしない\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n  // RAC の Group を使う。Group は data-focus-visible / data-invalid を出すので、\n  // Button と同じ focusRing 定義がそのまま使える（属性名を書き換える必要がない）。\n  inputWrapper: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-center gap-2 w-full',\n    'bg-[var(--novi-color-surface)]',\n    'shadow-[var(--novi-shadow-sm)]',\n    'rounded-[var(--novi-radius-md)]',\n    'transition-[opacity,box-shadow]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]',\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  startContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n  endContent: 'shrink-0 inline-flex text-[var(--novi-color-muted)]',\n  description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n  // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n  errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof inputSlots, (typeof inputRequiredSlots)[number]>\n\n/**\n * core の語彙定義（solid=塗りつぶしで最も強い / soft=淡い背景で境界線なし）に従って\n * 5つを視覚的に区別する。同じクラスを生む variant があると\n * 「テーマを切り替えても API が同じ」という約束が形だけになる。\n */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n  // 持ち上がった面。最も強い\n  solid: { inputWrapper: 'bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]' },\n  // 輪郭のみ。影を持たない\n  outline: {\n    inputWrapper:\n      'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n  },\n  // 沈んだ面。輪郭も影も持たない\n  soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n  // 地に溶ける。表を詰めて並べるときに面を増やさない\n  ghost: { inputWrapper: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n  // 完全に無装飾。インライン編集などで使う\n  // 下線だけ残す。ghost（完全に地へ溶ける）と見分けがつかなくならないようにする\n  plain: {\n    inputWrapper:\n      'bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]',\n  },\n}\n\n/**\n * 高さは Button と揃える。40 / 48 / 56px。\n *\n * **入力の文字は全段 base(17px)** にする。`sm` でも小さくしないのは、\n * iOS Safari が 16px 未満の入力欄でフォーカス時にページごと拡大するため。\n * 視覚的な軽さは高さと余白で作る（FR-08 / AC-01-3）。\n */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string }> = {\n  sm: { inputWrapper: 'h-10 px-3', input: 'text-[length:var(--novi-text-base)]' },\n  md: { inputWrapper: 'h-12 px-4', input: 'text-[length:var(--novi-text-base)]' },\n  lg: { inputWrapper: 'h-14 px-5', 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 * 拡張は `base` ではなく `slots` で行う（slot ベースの定義のため）。\n *\n * @example\n * import { inputStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myInput = tv({\n *   extend: inputStyles,\n *   slots: { inputWrapper: 'font-mono' },\n * })\n */\nexport const inputStyles = tv({\n  slots,\n  variants: { variant, size, radius },\n  defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type InputStyleProps = Parameters<typeof inputStyles>[0]\n"],"mappings":";;;;;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;CAEN,OAAO;CAGP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,cAAc;CACd,YAAY;CACZ,aAAa;CAEb,cAAc;AAChB;;;;;;;;;;;;;;;AA8DA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAvDZ,OAAO,EAAE,cAAc,gEAAgE;GAEvF,SAAS,EACP,cACE,gGACJ;GAEA,MAAM,EAAE,cAAc,iEAAiE;GAEvF,OAAO,EAAE,cAAc,kDAAkD;GAGzE,OAAO,EACL,cACE,sIACJ;EAwCY;EAAS;GA7BrB,IAAI;IAAE,cAAc;IAAa,OAAO;GAAsC;GAC9E,IAAI;IAAE,cAAc;IAAa,OAAO;GAAsC;GAC9E,IAAI;IAAE,cAAc;IAAa,OAAO;GAAsC;EA2BzD;EAAM;GAvB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAmB/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;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,62 @@
+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;
+  /** キーボードショートカットの表示。桁が揃うよう等幅数字にしている */
+  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 の見出し付きグループ。項目が多いときに種類でまとめる。
+ *
+ * 語彙に `section` / `sectionLabel` があるのに実装がなく、
+ * T-41 の slot 語彙レビューで漏れが判明したもの。
+ *
+ * @example
+ * <MenuSection title="ファイル">
+ *   <MenuItem id="rename">名前を変更</MenuItem>
+ * </MenuSection>
+ */
+declare function MenuSection({ title, children, className }: {
+  title: ReactNode;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * トリガーから開く操作の一覧。矢印キーで移動、Escape で閉じる。
+ *
+ * 最初の子要素がトリガーになる。残りが項目として扱われる。
+ *
+ * @example
+ * <Menu onAction={(key) => run(key)}>
+ *   <Button>操作</Button>
+ *   <MenuItem id="rename">名前を変更</MenuItem>
+ *   <MenuItem id="delete">削除</MenuItem>
+ * </Menu>
+ */
+declare function Menu({ placement, offset, 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;;;;;;;;;;;;iBAiBnD,cACd,OACA,UACA;EAEA,OAAO;EACP,WAAW;EACX;oBACD,IAAA;;;;;;;;;;;;;iBAyBe,OACd,WACA,QACA,QACA,aACA,cACA,UACA,cACA,UACA,WACA,YACA,MACC,4BAAS,IAAA"}

package/dist/menu/menu.mjs

@@ -0,0 +1,115 @@
+"use client";
+import { menuStyles } from "./menu.styles.mjs";
+import { Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, 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 の見出し付きグループ。項目が多いときに種類でまとめる。
+*
+* 語彙に `section` / `sectionLabel` があるのに実装がなく、
+* T-41 の slot 語彙レビューで漏れが判明したもの。
+*
+* @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]
+	});
+}
+/**
+* トリガーから開く操作の一覧。矢印キーで移動、Escape で閉じる。
+*
+* 最初の子要素がトリガーになる。残りが項目として扱われる。
+*
+* @example
+* <Menu onAction={(key) => run(key)}>
+*   <Button>操作</Button>
+*   <MenuItem id="rename">名前を変更</MenuItem>
+*   <MenuItem id="delete">削除</MenuItem>
+* </Menu>
+*/
+function Menu$1({ placement = "bottom", offset = 4, 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(Popover, {
+			placement,
+			offset,
+			"data-slot": "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  Popover,\n  Menu as RACMenu,\n  MenuSection as RACMenuSection,\n  Separator,\n} from 'react-aria-components'\nimport { menuStyles } from './menu.styles'\n\nexport interface MenuItemProps {\n  /** 選ばれたときに `onAction` へ渡る値 */\n  id: string\n  isDisabled?: boolean\n  /** 補足説明。項目名だけで足りないときに使う */\n  description?: ReactNode\n  /** キーボードショートカットの表示。桁が揃うよう等幅数字にしている */\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 * 語彙に `section` / `sectionLabel` があるのに実装がなく、\n * T-41 の slot 語彙レビューで漏れが判明したもの。\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 * トリガーから開く操作の一覧。矢印キーで移動、Escape で閉じる。\n *\n * 最初の子要素がトリガーになる。残りが項目として扱われる。\n *\n * @example\n * <Menu onAction={(key) => run(key)}>\n *   <Button>操作</Button>\n *   <MenuItem id=\"rename\">名前を変更</MenuItem>\n *   <MenuItem id=\"delete\">削除</MenuItem>\n * </Menu>\n */\nexport function Menu({\n  placement = 'bottom',\n  offset = 4,\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      <Popover\n        placement={placement}\n        offset={offset}\n        data-slot=\"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      </Popover>\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;;;;;;;;;;;;AAaA,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;;;;;;;;;;;;;AAcA,SAAgBC,OAAK,EACnB,YAAY,UACZ,SAAS,GACT,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,GACN,oBAAC,SAAD;GACa;GACH;GACR,aAAU;GACV,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;EACF,CAAA,CACE;;AAEjB"}

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

@@ -0,0 +1,90 @@
+//#region src/menu/menu.styles.d.ts
+/**
+ * Menu のスタイル定義。
+ *
+ * @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;
+      separator?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
+      itemLabel?: 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;
+      separator?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
+      itemLabel?: 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;
+  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;
+      separator?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
+      itemLabel?: 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;
+  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;
+  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":";;;;;;;cA4Ca,wCAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEX,iBAAiB,kBAAkB"}

package/dist/menu/menu.styles.mjs

@@ -0,0 +1,42 @@
+import { tv } from "tailwind-variants";
+//#region src/menu/menu.styles.ts
+const slots = {
+	trigger: "outline-none",
+	popover: [
+		"text-[var(--novi-color-fg)]",
+		"outline-none",
+		"!fixed !top-auto !inset-x-0 !bottom-0 !max-w-none !w-full",
+		"!max-h-[70dvh]",
+		"bg-[var(--novi-color-surface)]",
+		"rounded-t-[var(--novi-radius-lg)]",
+		"shadow-[var(--novi-shadow-lg)]",
+		"pb-[env(safe-area-inset-bottom,0px)]",
+		"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
+	].join(" "),
+	list: "outline-none p-2 flex flex-col",
+	item: [
+		"flex items-center gap-3 justify-between",
+		"min-h-12 px-3 cursor-pointer outline-none",
+		"text-[var(--novi-color-fg)]",
+		"rounded-[var(--novi-radius-md)]",
+		"data-[focused]:bg-[var(--novi-color-subtle)]",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default"
+	].join(" "),
+	itemLabel: "truncate",
+	itemDescription: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
+	itemShortcut: "shrink-0 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tabular-nums",
+	separator: "my-1 h-px bg-[var(--novi-color-border)]",
+	section: "flex flex-col",
+	sectionLabel: "px-2 pt-2 pb-1 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tracking-wide"
+};
+/**
+* Menu のスタイル定義。
+*
+* @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'\n\nconst slots = {\n  trigger: 'outline-none',\n  // Select と同じ下端シート。RAC の位置決めを奪えるのは !important だけ（ADR-T2）\n  popover: [\n    'text-[var(--novi-color-fg)]',\n    'outline-none',\n    '!fixed !top-auto !inset-x-0 !bottom-0 !max-w-none !w-full',\n    '!max-h-[70dvh]',\n    'bg-[var(--novi-color-surface)]',\n    'rounded-t-[var(--novi-radius-lg)]',\n    'shadow-[var(--novi-shadow-lg)]',\n    'pb-[env(safe-area-inset-bottom,0px)]',\n    'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n  ].join(' '),\n  list: 'outline-none p-2 flex flex-col',\n  item: [\n    'flex items-center gap-3 justify-between',\n    // 一覧は誤タップが最も起きる場所。行高は 48px を下回らせない\n    'min-h-12 px-3 cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'rounded-[var(--novi-radius-md)]',\n    'data-[focused]:bg-[var(--novi-color-subtle)]',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n  ].join(' '),\n  itemLabel: 'truncate',\n  itemDescription: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n  // ショートカットは桁を揃える。等幅数字にしないと縦の線が揃わない\n  itemShortcut:\n    'shrink-0 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tabular-nums',\n  separator: 'my-1 h-px bg-[var(--novi-color-border)]',\n  section: 'flex flex-col',\n  sectionLabel:\n    'px-2 pt-2 pb-1 text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] tracking-wide',\n} satisfies SlotMap<typeof menuSlots, (typeof menuRequiredSlots)[number]>\n\n/**\n * Menu のスタイル定義。\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":";;AAGA,MAAM,QAAQ;CACZ,SAAS;CAET,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,MAAM;EACJ;EAEA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,iBAAiB;CAEjB,cACE;CACF,WAAW;CACX,SAAS;CACT,cACE;AACJ;;;;;;;AAQA,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 };

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 と違い**ヘッダー行を作らない** — 閉じるボタンはフッターにあるので、
+ * 横方向に並べる相手がいない。見出しは本文の上に素直に載る。
+ * それでも描画するのは、ダイアログにアクセシブルな名前が要るため。
+ *
+ * @example
+ * <ModalTitle>削除しますか</ModalTitle>
+ */
+declare function ModalTitle({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * Modal の本体。
+ *
+ * @example
+ * <ModalBody>この操作は取り消せません。</ModalBody>
+ */
+declare function ModalBody({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * Modal の操作列。**縦積みでフルワイド**になり、末尾に閉じるボタンが入る。
+ *
+ * 横に並べると1つあたりの幅が指に対して狭くなるため、Tactile では積む。
+ * 閉じるを最後に置くのは、親指が最も届く位置が下端だから。
+ *
+ * @example
+ * <ModalFooter>
+ *   <Button color="danger">削除</Button>
+ * </ModalFooter>
+ */
+declare function ModalFooter({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * 画面下端から出るボトムシート。開いている間フォーカスは内側に閉じ込められ、
+ * Escape で閉じる。
+ *
+ * Raster が中央のダイアログで閉じるを右上に置くのに対し、Tactile は
+ * **下から出て、閉じるをフッターのフルワイドボタンにする**。親指の届く位置に
+ * 出口を置くため。`size` は幅ではなく**最大高**の意味になる（ADR-T3）。
+ *
+ * @example
+ * <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+ *   <ModalTitle>削除しますか</ModalTitle>
+ *   <ModalBody>この操作は取り消せません。</ModalBody>
+ * </Modal>
+ */
+declare function Modal({ size, radius, 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;;;;;;;;;;;;iBAac,aAAa,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAc7C,YAAY,UAAU,aAAa,4BAAS,IAAA;;;;;;;;;;;;iBAgC5C,cAAc,UAAU,aAAa,4BAAS,IAAA;;;;;;;;;;;;;;;iBA8B9C,QACd,MACA,QACA,QACA,aACA,cACA,eACA,2BACA,UACA,WACA,YACA,MACC,6BAAU,IAAA"}