@novi-ui/raster 0.1.0

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;
+      popover?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      itemDescription?: import("tailwind-variants").ClassValue;
+      itemShortcut?: import("tailwind-variants").ClassValue;
+      separator?: 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;
+      popover?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      itemDescription?: import("tailwind-variants").ClassValue;
+      itemShortcut?: import("tailwind-variants").ClassValue;
+      separator?: 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;
+      popover?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
+      itemDescription?: import("tailwind-variants").ClassValue;
+      itemShortcut?: import("tailwind-variants").ClassValue;
+      separator?: 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":";;;;;;;cAwCa,wCAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEX,iBAAiB,kBAAkB"}

package/dist/menu/menu.styles.mjs

@@ -0,0 +1,40 @@
+import { tv } from "tailwind-variants";
+//#region src/menu/menu.styles.ts
+const slots = {
+	trigger: "outline-none",
+	popover: [
+		"text-[var(--novi-color-fg)]",
+		"min-w-40 outline-none",
+		"bg-[var(--novi-color-bg)]",
+		"border border-[var(--novi-color-border-strong)]",
+		"rounded-[var(--novi-radius-none)]",
+		"shadow-none",
+		"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
+	].join(" "),
+	list: "outline-none p-1 flex flex-col",
+	item: [
+		"flex items-center gap-3 justify-between",
+		"px-2 py-1.5 cursor-pointer outline-none",
+		"text-[var(--novi-color-fg)]",
+		"rounded-[var(--novi-radius-none)]",
+		"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  popover: [\n    'text-[var(--novi-color-fg)]',\n    'min-w-40 outline-none',\n    'bg-[var(--novi-color-bg)]',\n    'border border-[var(--novi-color-border-strong)]',\n    'rounded-[var(--novi-radius-none)]',\n    'shadow-none',\n    'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n  ].join(' '),\n  list: 'outline-none p-1 flex flex-col',\n  item: [\n    'flex items-center gap-3 justify-between',\n    'px-2 py-1.5 cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'rounded-[var(--novi-radius-none)]',\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;CACT,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,MAAM;EACJ;EACA;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,47 @@
+import { ReactNode } from "react";
+import { ModalProps } from "@novi-ui/core";
+//#region src/modal/modal.d.ts
+interface PartProps {
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * Modal の見出し。閉じるボタンと同じ行に並ぶ。
+ *
+ * @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 の操作列。右揃えで並ぶ。
+ *
+ * @example
+ * <ModalFooter>
+ *   <Button variant="outline">キャンセル</Button>
+ *   <Button color="danger">削除</Button>
+ * </ModalFooter>
+ */
+declare function ModalFooter({ children, className }: PartProps): import("react").JSX.Element;
+/**
+ * モーダルダイアログ。開いている間フォーカスは内側に閉じ込められ、Escape で閉じる。
+ *
+ * Raster では中央に置き、閉じるボタンをヘッダー右上に出す。
+ * 影を使わないため、階層は背景の暗転と 1px の境界線で作る。
+ *
+ * @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;;;;;;;;iBASc,aAAa,UAAU,aAAa,4BAAS,IAAA;;;;;;;iBAsB7C,YAAY,UAAU,aAAa,4BAAS,IAAA;;;;;;;;;;iBAiB5C,cAAc,UAAU,aAAa,4BAAS,IAAA;;;;;;;;;;;;;iBAoB9C,QACd,MACA,QACA,QACA,aACA,cACA,eACA,2BACA,UACA,WACA,YACA,MACC,6BAAU,IAAA"}

package/dist/modal/modal.mjs

@@ -0,0 +1,110 @@
+"use client";
+import { modalStyles } from "./modal.styles.mjs";
+import { Button, Dialog, Heading, Modal, ModalOverlay } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/modal/modal.tsx
+/**
+* Modal の見出し。閉じるボタンと同じ行に並ぶ。
+*
+* @example
+* <ModalTitle>削除しますか</ModalTitle>
+*/
+function ModalTitle({ children, className }) {
+	const s = modalStyles();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "header",
+		className: s.header(),
+		children: [/* @__PURE__ */ jsx(Heading, {
+			slot: "title",
+			"data-slot": "title",
+			className: s.title({ class: className }),
+			children
+		}), /* @__PURE__ */ jsx(Button, {
+			slot: "close",
+			"data-slot": "closeButton",
+			className: s.closeButton(),
+			"aria-label": "閉じる",
+			children: /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 16 16",
+				width: "1em",
+				height: "1em",
+				fill: "none",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M4 4l8 8M12 4l-8 8",
+					stroke: "currentColor",
+					strokeWidth: "1.5"
+				})
+			})
+		})]
+	});
+}
+/**
+* Modal の本体。
+*
+* @example
+* <ModalBody>この操作は取り消せません。</ModalBody>
+*/
+function ModalBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "body",
+		className: modalStyles().body({ class: className }),
+		children
+	});
+}
+/**
+* Modal の操作列。右揃えで並ぶ。
+*
+* @example
+* <ModalFooter>
+*   <Button variant="outline">キャンセル</Button>
+*   <Button color="danger">削除</Button>
+* </ModalFooter>
+*/
+function ModalFooter({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "footer",
+		className: modalStyles().footer({ class: className }),
+		children
+	});
+}
+/**
+* モーダルダイアログ。開いている間フォーカスは内側に閉じ込められ、Escape で閉じる。
+*
+* Raster では中央に置き、閉じるボタンをヘッダー右上に出す。
+* 影を使わないため、階層は背景の暗転と 1px の境界線で作る。
+*
+* @example
+* <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
+*   <ModalTitle>削除しますか</ModalTitle>
+*   <ModalBody>この操作は取り消せません。</ModalBody>
+* </Modal>
+*/
+function Modal$1({ size, radius, isOpen, defaultOpen, onOpenChange, isDismissable = true, isKeyboardDismissDisabled, children, className, classNames, id }) {
+	const s = modalStyles({
+		size,
+		radius
+	});
+	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__ */ jsx(Dialog, {
+				id,
+				className: "outline-none",
+				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 type { ReactNode } from 'react'\nimport { Button, Dialog, Heading, ModalOverlay, Modal as RACModal } from 'react-aria-components'\nimport { modalStyles } from './modal.styles'\n\ninterface PartProps {\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * Modal の見出し。閉じるボタンと同じ行に並ぶ。\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      <Heading slot=\"title\" data-slot=\"title\" className={s.title({ class: className })}>\n        {children}\n      </Heading>\n      <Button slot=\"close\" data-slot=\"closeButton\" className={s.closeButton()} aria-label=\"閉じる\">\n        <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\">\n          <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n        </svg>\n      </Button>\n    </div>\n  )\n}\n\n/**\n * Modal の本体。\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 * @example\n * <ModalFooter>\n *   <Button variant=\"outline\">キャンセル</Button>\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/**\n * モーダルダイアログ。開いている間フォーカスは内側に閉じ込められ、Escape で閉じる。\n *\n * Raster では中央に置き、閉じるボタンをヘッダー右上に出す。\n * 影を使わないため、階層は背景の暗転と 1px の境界線で作る。\n *\n * @example\n * <Modal isOpen={isOpen} onOpenChange={setIsOpen}>\n *   <ModalTitle>削除しますか</ModalTitle>\n *   <ModalBody>この操作は取り消せません。</ModalBody>\n * </Modal>\n */\nexport function Modal({\n  size,\n  radius,\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, radius })\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\">\n          {children}\n        </Dialog>\n      </RACModal>\n    </ModalOverlay>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,WAAW,EAAE,UAAU,aAAwB;CAC7D,MAAM,IAAI,YAAY;CACtB,OACE,qBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,EAAE,OAAO;EAA5C,UAAA,CACE,oBAAC,SAAD;GAAS,MAAK;GAAQ,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,UAAU,CAAC;GAC5E;EACM,CAAA,GACT,oBAAC,QAAD;GAAQ,MAAK;GAAQ,aAAU;GAAc,WAAW,EAAE,YAAY;GAAG,cAAW;GAClF,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,OAAM;IAAM,QAAO;IAAM,MAAK;IAAO,eAAY;IACxE,UAAA,oBAAC,QAAD;KAAM,GAAE;KAAqB,QAAO;KAAe,aAAY;IAAO,CAAA;GACnE,CAAA;EACC,CAAA,CACL;;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;;;;;;;;;;AAWA,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;;;;;;;;;;;;;AAcA,SAAgBA,QAAM,EACpB,MACA,QACA,QACA,aACA,cACA,gBAAgB,MAChB,2BACA,UACA,WACA,YACA,MACa;CACb,MAAM,IAAI,YAAY;EAAE;EAAM;CAAO,CAAC;CAEtC,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,oBAAC,QAAD;IAAY;IAAI,WAAU;IACvB;GACK,CAAA;EACA,CAAA;CACE,CAAA;AAElB"}

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

@@ -0,0 +1,58 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/modal/modal.styles.d.ts
+/**
+ * Modal のスタイル定義。
+ *
+ * @example
+ * const myModal = tv({ extend: modalStyles, slots: { panel: 'border-2' } })
+ */
+declare const modalStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg" | "full", {
+    panel: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    panel: string;
+  }>;
+}, {
+  backdrop: string;
+  panel: string;
+  header: string;
+  title: string;
+  closeButton: string;
+  body: string;
+  footer: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg" | "full", {
+    panel: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    panel: string;
+  }>;
+}, {
+  backdrop: string;
+  panel: string;
+  header: string;
+  title: string;
+  closeButton: string;
+  body: string;
+  footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg" | "full", {
+    panel: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    panel: string;
+  }>;
+}, {
+  backdrop: string;
+  panel: string;
+  header: string;
+  title: string;
+  closeButton: 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":";;;;;;;;cAsEa,yCAAW;;IArB2B;;;IAOL;;;;;;;;;;;;IAPK;;;IAOL;;;;;;;;;;;;IAPK;;;IAOL;;;;;;;;;;;KAoBlC,kBAAkB,kBAAkB"}

package/dist/modal/modal.styles.mjs

@@ -0,0 +1,69 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/modal/modal.styles.ts
+/**
+* Raster の Modal は **中央配置・閉じるボタンはヘッダー右上**（architecture.md §5 テーマA）。
+*
+* 影を使わないので、階層は backdrop の暗転と 1px の境界線だけで作る。
+*/
+const slots = {
+	backdrop: [
+		"fixed inset-0 z-50 grid place-items-center p-4",
+		"bg-[var(--novi-color-overlay)]",
+		"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
+	].join(" "),
+	panel: [
+		"text-[var(--novi-color-fg)]",
+		"w-full outline-none",
+		"bg-[var(--novi-color-bg)]",
+		"border border-[var(--novi-color-border-strong)]",
+		"shadow-none",
+		"max-h-[calc(100dvh-2rem)] overflow-auto"
+	].join(" "),
+	header: [
+		"flex items-baseline justify-between gap-4",
+		"px-6 pt-5 pb-4",
+		"border-b border-[var(--novi-color-border)]"
+	].join(" "),
+	title: "text-[length:var(--novi-text-lg)] font-medium tracking-tight text-[var(--novi-color-fg)]",
+	closeButton: [
+		"shrink-0 grid place-items-center size-8 -mr-2",
+		"text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]",
+		"transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		focusRing
+	].join(" "),
+	body: "px-6 py-5 text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]",
+	footer: ["flex justify-end gap-2 px-6 py-4", "border-t border-[var(--novi-color-border)]"].join(" ")
+};
+/**
+* Modal のスタイル定義。
+*
+* @example
+* const myModal = tv({ extend: modalStyles, slots: { panel: 'border-2' } })
+*/
+const modalStyles = tv({
+	slots,
+	variants: {
+		size: {
+			sm: { panel: "max-w-sm" },
+			md: { panel: "max-w-md" },
+			lg: { panel: "max-w-lg" },
+			full: { panel: "max-w-none h-[calc(100dvh-2rem)]" }
+		},
+		radius: {
+			none: { panel: "rounded-[var(--novi-radius-none)]" },
+			sm: { panel: "rounded-[var(--novi-radius-sm)]" },
+			md: { panel: "rounded-[var(--novi-radius-md)]" },
+			lg: { panel: "rounded-[var(--novi-radius-lg)]" },
+			full: { panel: "rounded-[var(--novi-radius-full)]" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		radius: "none"
+	}
+});
+//#endregion
+export { 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 {\n  modalRequiredSlots,\n  modalSlots,\n  NoviRadius,\n  NoviSize,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\n/**\n * Raster の Modal は **中央配置・閉じるボタンはヘッダー右上**（architecture.md §5 テーマA）。\n *\n * 影を使わないので、階層は backdrop の暗転と 1px の境界線だけで作る。\n */\nconst slots = {\n  backdrop: [\n    'fixed inset-0 z-50 grid place-items-center p-4',\n    'bg-[var(--novi-color-overlay)]',\n    'data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]',\n  ].join(' '),\n  panel: [\n    'text-[var(--novi-color-fg)]',\n    'w-full outline-none',\n    'bg-[var(--novi-color-bg)]',\n    'border border-[var(--novi-color-border-strong)]',\n    'shadow-none',\n    'max-h-[calc(100dvh-2rem)] overflow-auto',\n  ].join(' '),\n  // 見出しと閉じるを同じ行に置く。情報の階層を横方向で作る\n  header: [\n    'flex items-baseline justify-between gap-4',\n    'px-6 pt-5 pb-4',\n    'border-b border-[var(--novi-color-border)]',\n  ].join(' '),\n  title: 'text-[length:var(--novi-text-lg)] font-medium tracking-tight text-[var(--novi-color-fg)]',\n  closeButton: [\n    'shrink-0 grid place-items-center size-8 -mr-2',\n    'text-[var(--novi-color-muted)] hover:text-[var(--novi-color-fg)]',\n    'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    focusRing,\n  ].join(' '),\n  body: 'px-6 py-5 text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n  footer: ['flex justify-end gap-2 px-6 py-4', 'border-t border-[var(--novi-color-border)]'].join(\n    ' ',\n  ),\n} satisfies SlotMap<typeof modalSlots, (typeof modalRequiredSlots)[number]>\n\nconst size: VariantMap<NoviSize | 'full', { panel: string }> = {\n  sm: { panel: 'max-w-sm' },\n  md: { panel: 'max-w-md' },\n  lg: { panel: 'max-w-lg' },\n  full: { panel: 'max-w-none h-[calc(100dvh-2rem)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { panel: string }> = {\n  none: { panel: 'rounded-[var(--novi-radius-none)]' },\n  sm: { panel: 'rounded-[var(--novi-radius-sm)]' },\n  md: { panel: 'rounded-[var(--novi-radius-md)]' },\n  lg: { panel: 'rounded-[var(--novi-radius-lg)]' },\n  full: { panel: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Modal のスタイル定義。\n *\n * @example\n * const myModal = tv({ extend: modalStyles, slots: { panel: 'border-2' } })\n */\nexport const modalStyles = tv({\n  slots,\n  variants: { size, radius },\n  defaultVariants: { size: 'md', radius: 'none' },\n})\n\nexport type ModalStyleProps = Parameters<typeof modalStyles>[0]\n"],"mappings":";;;;;;;;AAgBA,MAAM,QAAQ;CACZ,UAAU;EACR;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;EACN;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,aAAa;EACX;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,QAAQ,CAAC,oCAAoC,4CAA4C,CAAC,CAAC,KACzF,GACF;AACF;;;;;;;AAuBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAtBZ,IAAI,EAAE,OAAO,WAAW;GACxB,IAAI,EAAE,OAAO,WAAW;GACxB,IAAI,EAAE,OAAO,WAAW;GACxB,MAAM,EAAE,OAAO,mCAAmC;EAmBtC;EAAM;GAflB,MAAM,EAAE,OAAO,oCAAoC;GACnD,IAAI,EAAE,OAAO,kCAAkC;GAC/C,IAAI,EAAE,OAAO,kCAAkC;GAC/C,IAAI,EAAE,OAAO,kCAAkC;GAC/C,MAAM,EAAE,OAAO,oCAAoC;EAWjC;CAAO;CACzB,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAO;AAChD,CAAC"}

package/dist/popover/index.d.mts

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