@novi-ui/tactile 0.1.0

package/dist/textarea/textarea.styles.d.mts

@@ -0,0 +1,73 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/textarea/textarea.styles.d.ts
+/**
+ * TextArea のスタイル定義。
+ *
+ * @example
+ * import { textareaStyles } from '@novi-ui/tactile'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myTextarea = tv({
+ *   extend: textareaStyles,
+ *   slots: { textarea: 'font-mono' },
+ * })
+ */
+declare const textareaStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    textarea: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  textarea: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    textarea: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  textarea: 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;
+    textarea: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  textarea: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type TextareaStyleProps = Parameters<typeof textareaStyles>[0];
+//#endregion
+export { TextareaStyleProps, textareaStyles };
+//# sourceMappingURL=textarea.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.d.mts","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"mappings":";;;;;;;;;;;;;;cAsFa,4CAAc;;IA3C4B;;;IAgBN;IAAkB;;;IAOd;;;;;;;;;;;IAvBE;;;IAgBN;IAAkB;;;IAOd;;;;;;;;;;;IAvBE;;;IAgBN;IAAkB;;;IAOd;;;;;;;;;;KA0BzC,qBAAqB,kBAAkB"}

package/dist/textarea/textarea.styles.mjs

@@ -0,0 +1,83 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/textarea/textarea.styles.ts
+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 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(" "),
+	textarea: [
+		"w-full min-w-0 bg-transparent outline-none",
+		"text-[var(--novi-color-fg)]",
+		"placeholder:text-[var(--novi-color-muted)]",
+		"resize-y",
+		"min-h-24",
+		"leading-[var(--novi-leading-body)]"
+	].join(" "),
+	description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]"
+};
+/**
+* TextArea のスタイル定義。
+*
+* @example
+* import { textareaStyles } from '@novi-ui/tactile'
+* import { tv } from 'tailwind-variants'
+*
+* const myTextarea = tv({
+*   extend: textareaStyles,
+*   slots: { textarea: 'font-mono' },
+* })
+*/
+const textareaStyles = 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: "px-3 py-2",
+				textarea: "text-[length:var(--novi-text-base)]"
+			},
+			md: {
+				inputWrapper: "px-4 py-3",
+				textarea: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "px-5 py-4",
+				textarea: "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 { textareaStyles };
+
+//# sourceMappingURL=textarea.styles.mjs.map

package/dist/textarea/textarea.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.mjs","names":[],"sources":["../../src/textarea/textarea.styles.ts"],"sourcesContent":["import type {\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  textareaRequiredSlots,\n  textareaSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n  root: 'flex flex-col gap-1.5',\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n  inputWrapper: [\n    'text-[var(--novi-color-fg)]',\n    'flex 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  textarea: [\n    'w-full min-w-0 bg-transparent outline-none',\n    'text-[var(--novi-color-fg)]',\n    'placeholder:text-[var(--novi-color-muted)]',\n    // 横に伸ばすとレイアウトが崩れるので縦のみ許可する\n    'resize-y',\n    // 指で書く前提なので最低でも3行ぶんの高さを確保する\n    'min-h-24',\n    'leading-[var(--novi-leading-body)]',\n  ].join(' '),\n  // 文字数カウンタもここに置く。専用 slot を増やさない\n  description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n  errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof textareaSlots, (typeof textareaRequiredSlots)[number]>\n\n/** Input と同じ解釈。面の重さで5段を作る（境界線ではなく影と背景で区別する）。 */\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n  solid: { inputWrapper: 'bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]' },\n  outline: {\n    inputWrapper:\n      'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n  },\n  soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n  ghost: { inputWrapper: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\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/** 1行入力と違い高さは固定しない。余白と文字サイズだけを段階で変える。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; textarea: string }> = {\n  // 入力の文字は全段 base(17px)。16px を割ると iOS Safari が自動ズームする\n  sm: { inputWrapper: 'px-3 py-2', textarea: 'text-[length:var(--novi-text-base)]' },\n  md: { inputWrapper: 'px-4 py-3', textarea: 'text-[length:var(--novi-text-base)]' },\n  lg: { inputWrapper: 'px-5 py-4', textarea: '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 * TextArea のスタイル定義。\n *\n * @example\n * import { textareaStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myTextarea = tv({\n *   extend: textareaStyles,\n *   slots: { textarea: 'font-mono' },\n * })\n */\nexport const textareaStyles = tv({\n  slots,\n  variants: { variant, size, radius },\n  defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type TextareaStyleProps = Parameters<typeof textareaStyles>[0]\n"],"mappings":";;;AAYA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,UAAU;EACR;EACA;EACA;EAEA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AA8CA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GA5CZ,OAAO,EAAE,cAAc,gEAAgE;GACvF,SAAS,EACP,cACE,gGACJ;GACA,MAAM,EAAE,cAAc,iEAAiE;GACvF,OAAO,EAAE,cAAc,kDAAkD;GAEzE,OAAO,EACL,cACE,sIACJ;EAiCY;EAAS;GA3BrB,IAAI;IAAE,cAAc;IAAa,UAAU;GAAsC;GACjF,IAAI;IAAE,cAAc;IAAa,UAAU;GAAsC;GACjF,IAAI;IAAE,cAAc;IAAa,UAAU;GAAsC;EAyB5D;EAAM;GArB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAiB/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}

package/dist/toast/index.d.mts

@@ -0,0 +1,3 @@
+import { NoviToast, NoviToastRegion, createToastQueue } from "./toast.mjs";
+import { ToastStyleProps, toastStyles } from "./toast.styles.mjs";
+export { type NoviToast, NoviToastRegion, type ToastStyleProps, createToastQueue, toastStyles };

package/dist/toast/toast.d.mts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import { ToastQueue } from "@novi-ui/core/client";
+import { NoviColor } from "@novi-ui/core";
+//#region src/toast/toast.d.ts
+/** 1件分の通知内容。 */
+interface NoviToast {
+  title?: ReactNode;
+  description?: ReactNode;
+  color?: NoviColor;
+  /** 補助操作。「元に戻す」など */
+  action?: ReactNode;
+}
+/**
+ * 通知のキュー。アプリで1つ作って使い回す。
+ *
+ * 上流の React Aria では Toast がまだ不安定な API のため、
+ * core が安定名で再公開したものを経由している。
+ *
+ * @example
+ * export const toast = createToastQueue()
+ * toast.add({ title: '保存しました', color: 'success' }, { timeout: 4000 })
+ */
+declare function createToastQueue(): ToastQueue<NoviToast>;
+/**
+ * 通知の表示領域。アプリのルート付近に1つ置く。
+ *
+ * 操作に必須の情報を Toast に置かないこと。自動で消えるため読み落とすと取り返しがつかない。
+ *
+ * @example
+ * <NoviToastRegion queue={toast} />
+ */
+declare function NoviToastRegion({ queue, className }: {
+  queue: ReturnType<typeof createToastQueue>;
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion
+export { NoviToast, NoviToastRegion, createToastQueue };
+//# sourceMappingURL=toast.d.mts.map

package/dist/toast/toast.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.mts","names":[],"sources":["../../src/toast/toast.tsx"],"mappings":";;;;;UAUiB;EACf,QAAQ;EACR,cAAc;EACd,QAAQ;;EAER,SAAS;;;;;;;;;;;;iBAaK,oBAAgB,WAAA;;;;;;;;;iBAYhB,kBACd,OACA;EAEA,OAAO,kBAAkB;EACzB;oBACD,IAAA"}

package/dist/toast/toast.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { toastStyles } from "./toast.styles.mjs";
+import { Button, Text } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast, ToastContent, ToastQueue, ToastRegion } from "@novi-ui/core/client";
+//#region src/toast/toast.tsx
+/**
+* 通知のキュー。アプリで1つ作って使い回す。
+*
+* 上流の React Aria では Toast がまだ不安定な API のため、
+* core が安定名で再公開したものを経由している。
+*
+* @example
+* export const toast = createToastQueue()
+* toast.add({ title: '保存しました', color: 'success' }, { timeout: 4000 })
+*/
+function createToastQueue() {
+	return new ToastQueue({ maxVisibleToasts: 4 });
+}
+/**
+* 通知の表示領域。アプリのルート付近に1つ置く。
+*
+* 操作に必須の情報を Toast に置かないこと。自動で消えるため読み落とすと取り返しがつかない。
+*
+* @example
+* <NoviToastRegion queue={toast} />
+*/
+function NoviToastRegion({ queue, className }) {
+	return /* @__PURE__ */ jsx(ToastRegion, {
+		queue,
+		"data-slot": "region",
+		className: toastStyles().region({ class: className }),
+		children: ({ toast }) => {
+			const s = toastStyles({ color: toast.content.color });
+			return /* @__PURE__ */ jsxs(Toast, {
+				toast,
+				"data-slot": "root",
+				className: s.root(),
+				children: [
+					/* @__PURE__ */ jsxs(ToastContent, {
+						"data-slot": "content",
+						className: s.content(),
+						children: [toast.content.title !== void 0 && /* @__PURE__ */ jsx(Text, {
+							slot: "title",
+							"data-slot": "title",
+							className: s.title(),
+							children: toast.content.title
+						}), toast.content.description !== void 0 && /* @__PURE__ */ jsx(Text, {
+							slot: "description",
+							"data-slot": "description",
+							className: s.description(),
+							children: toast.content.description
+						})]
+					}),
+					toast.content.action !== void 0 && /* @__PURE__ */ jsx("span", {
+						"data-slot": "action",
+						className: s.action(),
+						children: toast.content.action
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						slot: "close",
+						"data-slot": "closeButton",
+						className: s.closeButton(),
+						"aria-label": "閉じる",
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 16 16",
+							width: "0.875em",
+							height: "0.875em",
+							fill: "none",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx("path", {
+								d: "M4 4l8 8M12 4l-8 8",
+								stroke: "currentColor",
+								strokeWidth: "1.5"
+							})
+						})
+					})
+				]
+			});
+		}
+	});
+}
+//#endregion
+export { NoviToastRegion, createToastQueue };
+
+//# sourceMappingURL=toast.mjs.map

package/dist/toast/toast.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.mjs","names":[],"sources":["../../src/toast/toast.tsx"],"sourcesContent":["'use client'\n\nimport type { NoviColor } from '@novi-ui/core'\n// UNSTABLE_ には触れない。core が安定名で再公開したものだけを使う（ADR-07）\nimport { Toast, ToastContent, ToastQueue, ToastRegion } from '@novi-ui/core/client'\nimport type { ReactNode } from 'react'\nimport { Button, Text } from 'react-aria-components'\nimport { toastStyles } from './toast.styles'\n\n/** 1件分の通知内容。 */\nexport interface NoviToast {\n  title?: ReactNode\n  description?: ReactNode\n  color?: NoviColor\n  /** 補助操作。「元に戻す」など */\n  action?: ReactNode\n}\n\n/**\n * 通知のキュー。アプリで1つ作って使い回す。\n *\n * 上流の React Aria では Toast がまだ不安定な API のため、\n * core が安定名で再公開したものを経由している。\n *\n * @example\n * export const toast = createToastQueue()\n * toast.add({ title: '保存しました', color: 'success' }, { timeout: 4000 })\n */\nexport function createToastQueue() {\n  return new ToastQueue<NoviToast>({ maxVisibleToasts: 4 })\n}\n\n/**\n * 通知の表示領域。アプリのルート付近に1つ置く。\n *\n * 操作に必須の情報を Toast に置かないこと。自動で消えるため読み落とすと取り返しがつかない。\n *\n * @example\n * <NoviToastRegion queue={toast} />\n */\nexport function NoviToastRegion({\n  queue,\n  className,\n}: {\n  queue: ReturnType<typeof createToastQueue>\n  className?: string\n}) {\n  return (\n    <ToastRegion\n      queue={queue}\n      data-slot=\"region\"\n      className={toastStyles().region({ class: className })}\n    >\n      {({ toast }) => {\n        const s = toastStyles({ color: toast.content.color })\n        return (\n          <Toast toast={toast} data-slot=\"root\" className={s.root()}>\n            <ToastContent data-slot=\"content\" className={s.content()}>\n              {toast.content.title !== undefined && (\n                <Text slot=\"title\" data-slot=\"title\" className={s.title()}>\n                  {toast.content.title}\n                </Text>\n              )}\n              {toast.content.description !== undefined && (\n                <Text slot=\"description\" data-slot=\"description\" className={s.description()}>\n                  {toast.content.description}\n                </Text>\n              )}\n            </ToastContent>\n\n            {toast.content.action !== undefined && (\n              <span data-slot=\"action\" className={s.action()}>\n                {toast.content.action}\n              </span>\n            )}\n\n            <Button\n              slot=\"close\"\n              data-slot=\"closeButton\"\n              className={s.closeButton()}\n              aria-label=\"閉じる\"\n            >\n              <svg\n                viewBox=\"0 0 16 16\"\n                width=\"0.875em\"\n                height=\"0.875em\"\n                fill=\"none\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n              </svg>\n            </Button>\n          </Toast>\n        )\n      }}\n    </ToastRegion>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA4BA,SAAgB,mBAAmB;CACjC,OAAO,IAAI,WAAsB,EAAE,kBAAkB,EAAE,CAAC;AAC1D;;;;;;;;;AAUA,SAAgB,gBAAgB,EAC9B,OACA,aAIC;CACD,OACE,oBAAC,aAAD;EACS;EACP,aAAU;EACV,WAAW,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EAElD,WAAA,EAAE,YAAY;GACd,MAAM,IAAI,YAAY,EAAE,OAAO,MAAM,QAAQ,MAAM,CAAC;GACpD,OACE,qBAAC,OAAD;IAAc;IAAO,aAAU;IAAO,WAAW,EAAE,KAAK;IAAxD,UAAA;KACE,qBAAC,cAAD;MAAc,aAAU;MAAU,WAAW,EAAE,QAAQ;MAAvD,UAAA,CACG,MAAM,QAAQ,UAAU,KAAA,KACvB,oBAAC,MAAD;OAAM,MAAK;OAAQ,aAAU;OAAQ,WAAW,EAAE,MAAM;OACrD,UAAA,MAAM,QAAQ;MACX,CAAA,GAEP,MAAM,QAAQ,gBAAgB,KAAA,KAC7B,oBAAC,MAAD;OAAM,MAAK;OAAc,aAAU;OAAc,WAAW,EAAE,YAAY;OACvE,UAAA,MAAM,QAAQ;MACX,CAAA,CAEI;;KAEb,MAAM,QAAQ,WAAW,KAAA,KACxB,oBAAC,QAAD;MAAM,aAAU;MAAS,WAAW,EAAE,OAAO;MAC1C,UAAA,MAAM,QAAQ;KACX,CAAA;KAGR,oBAAC,QAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,EAAE,YAAY;MACzB,cAAW;MAEX,UAAA,oBAAC,OAAD;OACE,SAAQ;OACR,OAAM;OACN,QAAO;OACP,MAAK;OACL,eAAY;OAEZ,UAAA,oBAAC,QAAD;QAAM,GAAE;QAAqB,QAAO;QAAe,aAAY;OAAO,CAAA;MACnE,CAAA;KACC,CAAA;IACH;;EAEX;CACW,CAAA;AAEjB"}

package/dist/toast/toast.styles.d.mts

@@ -0,0 +1,61 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/toast/toast.styles.d.ts
+/**
+ * Toast のスタイル定義。
+ *
+ * @example
+ * const myToast = tv({ extend: toastStyles, slots: { region: 'bottom-8' } })
+ */
+declare const toastStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  region: string;
+  root: string;
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  closeButton: string;
+  action: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  region: string;
+  root: string;
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  closeButton: string;
+  action: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  region: string;
+  root: string;
+  icon: string;
+  content: string;
+  title: string;
+  description: string;
+  closeButton: string;
+  action: string;
+}>>;
+type ToastStyleProps = Parameters<typeof toastStyles>[0];
+//#endregion
+export { ToastStyleProps, toastStyles };
+//# sourceMappingURL=toast.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.styles.d.mts","names":[],"sources":["../../src/toast/toast.styles.ts"],"mappings":";;;;;;;;cAgEa,yCAAW;;IAvBmB;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;KAoBjC,kBAAkB,kBAAkB"}

package/dist/toast/toast.styles.mjs

@@ -0,0 +1,59 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/toast/toast.styles.ts
+const slots = {
+	region: ["fixed top-0 inset-x-0 z-50 flex flex-col gap-2 outline-none", "p-3 pt-[calc(env(safe-area-inset-top,0px)+0.75rem)]"].join(" "),
+	root: [
+		"text-[var(--novi-color-fg)]",
+		"flex items-start gap-3 px-4 py-3 outline-none",
+		"bg-[var(--novi-color-surface)]",
+		"rounded-[var(--novi-radius-lg)]",
+		"shadow-[var(--novi-shadow-md)]",
+		"data-[entering]:motion-safe:animate-[novi-fade-in_200ms_ease-out]"
+	].join(" "),
+	icon: "shrink-0 mt-0.5 text-[var(--c)]",
+	content: "flex-1 min-w-0 flex flex-col gap-0.5",
+	title: "font-medium text-[var(--novi-color-fg)]",
+	description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] leading-[var(--novi-leading-body)]",
+	closeButton: [
+		"shrink-0 grid place-items-center size-6 -mr-1",
+		"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(" "),
+	action: "shrink-0"
+};
+/**
+* Toast のスタイル定義。
+*
+* @example
+* const myToast = tv({ extend: toastStyles, slots: { region: 'bottom-8' } })
+*/
+const toastStyles = tv({
+	slots,
+	variants: {
+		color: {
+			default: { root: "[--c:var(--novi-color-fg)]" },
+			primary: { root: "[--c:var(--novi-color-primary)]" },
+			secondary: { root: "[--c:var(--novi-color-secondary)]" },
+			success: { root: "[--c:var(--novi-color-success)] border-l-[var(--novi-color-success)]" },
+			warning: { root: "[--c:var(--novi-color-warning)] border-l-[var(--novi-color-warning)]" },
+			danger: { root: "[--c:var(--novi-color-danger)] border-l-[var(--novi-color-danger)]" }
+		},
+		radius: {
+			none: { root: "rounded-[var(--novi-radius-none)]" },
+			sm: { root: "rounded-[var(--novi-radius-sm)]" },
+			md: { root: "rounded-[var(--novi-radius-md)]" },
+			lg: { root: "rounded-[var(--novi-radius-lg)]" },
+			full: { root: "rounded-[var(--novi-radius-full)]" }
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		radius: "lg"
+	}
+});
+//#endregion
+export { toastStyles };
+
+//# sourceMappingURL=toast.styles.mjs.map

package/dist/toast/toast.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.styles.mjs","names":[],"sources":["../../src/toast/toast.styles.ts"],"sourcesContent":["import type {\n  NoviColor,\n  NoviRadius,\n  SlotMap,\n  toastRequiredSlots,\n  toastSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\nconst slots = {\n  // 右下に固定する。操作の起点から遠く、視線移動が最小になる位置\n  // 上端に出すのは、下端がシートとソフトウェアキーボードに占有されるため。\n  // safe-area(top) はノッチぶんを避ける\n  region: [\n    'fixed top-0 inset-x-0 z-50 flex flex-col gap-2 outline-none',\n    'p-3 pt-[calc(env(safe-area-inset-top,0px)+0.75rem)]',\n  ].join(' '),\n  root: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-start gap-3 px-4 py-3 outline-none',\n    'bg-[var(--novi-color-surface)]',\n    'rounded-[var(--novi-radius-lg)]',\n    'shadow-[var(--novi-shadow-md)]',\n    'data-[entering]:motion-safe:animate-[novi-fade-in_200ms_ease-out]',\n  ].join(' '),\n  icon: 'shrink-0 mt-0.5 text-[var(--c)]',\n  content: 'flex-1 min-w-0 flex flex-col gap-0.5',\n  title: 'font-medium text-[var(--novi-color-fg)]',\n  description:\n    'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] leading-[var(--novi-leading-body)]',\n  closeButton: [\n    'shrink-0 grid place-items-center size-6 -mr-1',\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  action: 'shrink-0',\n} satisfies SlotMap<typeof toastSlots, (typeof toastRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n  default: { root: '[--c:var(--novi-color-fg)]' },\n  primary: { root: '[--c:var(--novi-color-primary)]' },\n  secondary: { root: '[--c:var(--novi-color-secondary)]' },\n  success: { root: '[--c:var(--novi-color-success)] border-l-[var(--novi-color-success)]' },\n  warning: { root: '[--c:var(--novi-color-warning)] border-l-[var(--novi-color-warning)]' },\n  danger: { root: '[--c:var(--novi-color-danger)] border-l-[var(--novi-color-danger)]' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n  none: { root: 'rounded-[var(--novi-radius-none)]' },\n  sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n  md: { root: 'rounded-[var(--novi-radius-md)]' },\n  lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n  full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Toast のスタイル定義。\n *\n * @example\n * const myToast = tv({ extend: toastStyles, slots: { region: 'bottom-8' } })\n */\nexport const toastStyles = tv({\n  slots,\n  variants: { color, radius },\n  defaultVariants: { color: 'default', radius: 'lg' },\n})\n\nexport type ToastStyleProps = Parameters<typeof toastStyles>[0]\n"],"mappings":";;;AAWA,MAAM,QAAQ;CAIZ,QAAQ,CACN,+DACA,qDACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;CACT,OAAO;CACP,aACE;CACF,aAAa;EACX;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;AACV;;;;;;;AAyBA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GAxBZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,uEAAuE;GACxF,SAAS,EAAE,MAAM,uEAAuE;GACxF,QAAQ,EAAE,MAAM,qEAAqE;EAmBzE;EAAO;GAfnB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAW/B;CAAO;CAC1B,iBAAiB;EAAE,OAAO;EAAW,QAAQ;CAAK;AACpD,CAAC"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@novi-ui/tactile",
+  "version": "0.1.0",
+  "description": "Novi UI theme 2 — touch-first. Bottom sheets, generous tap targets, soft elevation.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yuuto22009911-hash/novi.git",
+    "directory": "packages/tactile"
+  },
+  "homepage": "https://novi-42r.pages.dev",
+  "bugs": "https://github.com/yuuto22009911-hash/novi/issues",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./tactile.css": "./dist/tactile.css",
+    "./tactile.scoped.css": "./dist/tactile.scoped.css"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-aria-components": "^1.20.0"
+  },
+  "dependencies": {
+    "tailwind-variants": "^3.3.1",
+    "@novi-ui/core": "0.1.1"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^13.0.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.5",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.2.4",
+    "@vitest/coverage-v8": "^4.1.11",
+    "esbuild": "^0.25.0",
+    "jsdom": "^30.0.1",
+    "react": "^19.0.0",
+    "react-aria-components": "^1.20.0",
+    "react-dom": "^19.2.8",
+    "size-limit": "^13.0.3",
+    "tsdown": "0.22.14",
+    "typescript": "6.0.3",
+    "vitest": "4.1.11",
+    "@novi-ui/raster": "0.3.0"
+  },
+  "scripts": {
+    "build": "tsdown && node scripts/generate-theme-css.mjs",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "check:design": "node scripts/check-design-rules.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "size": "size-limit",
+    "check:treeshaking": "node scripts/check-treeshaking.mjs"
+  }
+}