@novi-ui/tactile 0.1.0 → 0.2.0

package/dist/avatar/avatar.d.mts

@@ -11,7 +11,7 @@ declare function initialsOf(name: string): string;
  * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。
  *
  * @example
- * <Avatar src="/me.jpg" name="小島 佑翔" />
+ * <Avatar src="/me.jpg" name="山本 太郎" />
  */
 declare function Avatar({ size, radius, src, name, fallback, badge, className, classNames, id }: AvatarProps): import("react").JSX.Element;
 //#endregion

package/dist/avatar/avatar.mjs

@@ -19,7 +19,7 @@ function initialsOf(name) {
 * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。
 *
 * @example
-* <Avatar src="/me.jpg" name="小島 佑翔" />
+* <Avatar src="/me.jpg" name="山本 太郎" />
 */
 function Avatar({ size, radius, src, name, fallback, badge, className, classNames, id }) {
 	const s = avatarStyles({

package/dist/avatar/avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.mjs","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["'use client'\n\nimport type { AvatarProps } from '@novi-ui/core'\nimport { useState } from 'react'\nimport { avatarStyles } from './avatar.styles'\n\n/**\n * 表示名からイニシャルを作る。\n *\n * 日本語の氏名は空白で区切られないことが多いので、\n * 空白があれば各語の先頭、なければ先頭1文字を使う。\n */\nexport function initialsOf(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean)\n  if (parts.length === 0) return ''\n  if (parts.length === 1) return [...(parts[0] as string)][0] ?? ''\n  return parts\n    .slice(0, 2)\n    .map((part) => [...part][0] ?? '')\n    .join('')\n}\n\n/**\n * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。\n *\n * @example\n * <Avatar src=\"/me.jpg\" name=\"小島 佑翔\" />\n */\nexport function Avatar({\n  size,\n  radius,\n  src,\n  name,\n  fallback,\n  badge,\n  className,\n  classNames,\n  id,\n}: AvatarProps) {\n  const s = avatarStyles({ size, radius })\n  const [failed, setFailed] = useState(false)\n  const showImage = src !== undefined && src !== '' && !failed\n\n  return (\n    <span id={id} data-slot=\"root\" className={s.root({ class: [className, classNames?.root] })}>\n      {showImage ? (\n        <img\n          data-slot=\"image\"\n          className={s.image({ class: classNames?.image })}\n          src={src}\n          alt={name ?? ''}\n          onError={() => setFailed(true)}\n        />\n      ) : (\n        // 画像の代わりなので role=\"img\" を与える。\n        // これがないと aria-label が効かず、読み上げが「小佑」のような\n        // イニシャルだけになって氏名が伝わらない\n        <span\n          data-slot=\"fallback\"\n          className={s.fallback({ class: classNames?.fallback })}\n          role=\"img\"\n          aria-label={name}\n        >\n          {fallback ?? (name !== undefined ? initialsOf(name) : null)}\n        </span>\n      )}\n\n      {badge !== undefined && (\n        <span data-slot=\"badge\" className={s.badge({ class: classNames?.badge })}>\n          {badge}\n        </span>\n      )}\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,WAAW,MAAsB;CAC/C,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,WAAW,GAAG,OAAO,CAAC,GAAI,MAAM,EAAa,CAAC,CAAC,MAAM;CAC/D,OAAO,MACJ,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,CACjC,KAAK,EAAE;AACZ;;;;;;;AAQA,SAAgB,OAAO,EACrB,MACA,QACA,KACA,MACA,UACA,OACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAM;CAAO,CAAC;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,YAAY,QAAQ,KAAA,KAAa,QAAQ,MAAM,CAAC;CAEtD,OACE,qBAAC,QAAD;EAAU;EAAI,aAAU;EAAO,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAAzF,UAAA,CACG,YACC,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GAC1C;GACL,KAAK,QAAQ;GACb,eAAe,UAAU,IAAI;EAC9B,CAAA,IAKD,oBAAC,QAAD;GACE,aAAU;GACV,WAAW,EAAE,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC;GACrD,MAAK;GACL,cAAY;GAEX,UAAA,aAAa,SAAS,KAAA,IAAY,WAAW,IAAI,IAAI;EAClD,CAAA,GAGP,UAAU,KAAA,KACT,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACpE,UAAA;EACG,CAAA,CAEJ;;AAEV"}
+{"version":3,"file":"avatar.mjs","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["'use client'\n\nimport type { AvatarProps } from '@novi-ui/core'\nimport { useState } from 'react'\nimport { avatarStyles } from './avatar.styles'\n\n/**\n * 表示名からイニシャルを作る。\n *\n * 日本語の氏名は空白で区切られないことが多いので、\n * 空白があれば各語の先頭、なければ先頭1文字を使う。\n */\nexport function initialsOf(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean)\n  if (parts.length === 0) return ''\n  if (parts.length === 1) return [...(parts[0] as string)][0] ?? ''\n  return parts\n    .slice(0, 2)\n    .map((part) => [...part][0] ?? '')\n    .join('')\n}\n\n/**\n * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。\n *\n * @example\n * <Avatar src=\"/me.jpg\" name=\"山本 太郎\" />\n */\nexport function Avatar({\n  size,\n  radius,\n  src,\n  name,\n  fallback,\n  badge,\n  className,\n  classNames,\n  id,\n}: AvatarProps) {\n  const s = avatarStyles({ size, radius })\n  const [failed, setFailed] = useState(false)\n  const showImage = src !== undefined && src !== '' && !failed\n\n  return (\n    <span id={id} data-slot=\"root\" className={s.root({ class: [className, classNames?.root] })}>\n      {showImage ? (\n        <img\n          data-slot=\"image\"\n          className={s.image({ class: classNames?.image })}\n          src={src}\n          alt={name ?? ''}\n          onError={() => setFailed(true)}\n        />\n      ) : (\n        // 画像の代わりなので role=\"img\" を与える。\n        // これがないと aria-label が効かず、読み上げが「山太」のような\n        // イニシャルだけになって氏名が伝わらない\n        <span\n          data-slot=\"fallback\"\n          className={s.fallback({ class: classNames?.fallback })}\n          role=\"img\"\n          aria-label={name}\n        >\n          {fallback ?? (name !== undefined ? initialsOf(name) : null)}\n        </span>\n      )}\n\n      {badge !== undefined && (\n        <span data-slot=\"badge\" className={s.badge({ class: classNames?.badge })}>\n          {badge}\n        </span>\n      )}\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,WAAW,MAAsB;CAC/C,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,WAAW,GAAG,OAAO,CAAC,GAAI,MAAM,EAAa,CAAC,CAAC,MAAM;CAC/D,OAAO,MACJ,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,CACjC,KAAK,EAAE;AACZ;;;;;;;AAQA,SAAgB,OAAO,EACrB,MACA,QACA,KACA,MACA,UACA,OACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAM;CAAO,CAAC;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,YAAY,QAAQ,KAAA,KAAa,QAAQ,MAAM,CAAC;CAEtD,OACE,qBAAC,QAAD;EAAU;EAAI,aAAU;EAAO,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAAzF,UAAA,CACG,YACC,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GAC1C;GACL,KAAK,QAAQ;GACb,eAAe,UAAU,IAAI;EAC9B,CAAA,IAKD,oBAAC,QAAD;GACE,aAAU;GACV,WAAW,EAAE,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC;GACrD,MAAK;GACL,cAAY;GAEX,UAAA,aAAa,SAAS,KAAA,IAAY,WAAW,IAAI,IAAI;EAClD,CAAA,GAGP,UAAU,KAAA,KACT,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACpE,UAAA;EACG,CAAA,CAEJ;;AAEV"}

package/dist/avatar/avatar.styles.d.mts

@@ -10,7 +10,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {
@@ -22,7 +22,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {
@@ -34,7 +34,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {

package/dist/badge/badge.styles.d.mts

@@ -14,7 +14,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
     root: string;
     dot: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -32,7 +32,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
     root: string;
     dot: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -50,7 +50,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
     root: string;
     dot: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {

package/dist/button/button.styles.d.mts

@@ -25,7 +25,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -44,7 +44,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -63,7 +63,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {

package/dist/card/card.styles.d.mts

@@ -10,7 +10,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   isPressable: {
@@ -29,7 +29,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   isPressable: {
@@ -48,7 +48,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
   isPressable: {

package/dist/color-picker/color-picker.d.mts

@@ -0,0 +1,25 @@
+import { ColorPickerProps, NoviColorOption } from "@novi-ui/core";
+//#region src/color-picker/color-picker.d.ts
+/**
+ * Tactile のカラーセット（Textile Dyes）。**利用側が色値を書かなくてよい**ように既定で並ぶ。
+ *
+ * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも
+ * Raster では Print Inks が出る。色はモデルの持ち物で、共通ではない。
+ */
+declare const COLOR_OPTIONS: readonly NoviColorOption[];
+/**
+ * テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。
+ *
+ * @example
+ * // 色 id を書かない。未指定ならテーマの既定色から始まる
+ * const [color, setColor] = useState<string>()
+ * return (
+ *   <div data-novi-color={color}>
+ *     <ColorPicker label="配色" onChange={setColor} />
+ *   </div>
+ * )
+ */
+declare function ColorPicker({ size, label, description, errorMessage, value, defaultValue, onChange, colors, showLabels, isDisabled, isReadOnly, isRequired, isInvalid, name, className, classNames, id }: ColorPickerProps): import("react").JSX.Element;
+//#endregion
+export { COLOR_OPTIONS, ColorPicker };
+//# sourceMappingURL=color-picker.d.mts.map

package/dist/color-picker/color-picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.mts","names":[],"sources":["../../src/color-picker/color-picker.tsx"],"mappings":";;;;;;;;cAmBa,wBAAwB;;;;;;;;;;;;;iBAyBrB,cACd,MACA,OACA,aACA,cACA,OACA,cACA,UACA,QACA,YACA,YACA,YACA,YACA,WACA,MACA,WACA,YACA,MACC,mCAAgB,IAAA"}

package/dist/color-picker/color-picker.mjs

@@ -0,0 +1,109 @@
+"use client";
+import { DEFAULT_COLOR_ID, TACTILE_COLOR_SET } from "../tokens/color-set.mjs";
+import { colorPickerStyles } from "./color-picker.styles.mjs";
+import { FieldError, Label, Radio, RadioGroup, Text } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/color-picker/color-picker.tsx
+/**
+* Tactile のカラーセット（Textile Dyes）。**利用側が色値を書かなくてよい**ように既定で並ぶ。
+*
+* ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも
+* Raster では Print Inks が出る。色はモデルの持ち物で、共通ではない。
+*/
+const COLOR_OPTIONS = TACTILE_COLOR_SET.map(({ id, name, description }) => ({
+	id,
+	name,
+	description
+}));
+/** 選択中であることを色以外でも示す印。 */
+function CheckMark() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "0.75em",
+		height: "0.75em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2.5 8.5l3.5 3.5 7.5-8",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		})
+	});
+}
+/**
+* テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。
+*
+* @example
+* // 色 id を書かない。未指定ならテーマの既定色から始まる
+* const [color, setColor] = useState<string>()
+* return (
+*   <div data-novi-color={color}>
+*     <ColorPicker label="配色" onChange={setColor} />
+*   </div>
+* )
+*/
+function ColorPicker({ size, label, description, errorMessage, value, defaultValue = DEFAULT_COLOR_ID, onChange, colors = COLOR_OPTIONS, showLabels = false, isDisabled, isReadOnly, isRequired, isInvalid, name, className, classNames, id }) {
+	const s = colorPickerStyles({ size });
+	return /* @__PURE__ */ jsxs(RadioGroup, {
+		id,
+		name,
+		value,
+		defaultValue,
+		onChange,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		isInvalid,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsx(Label, {
+				"data-slot": "label",
+				className: s.label({ class: classNames?.label }),
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "list",
+				className: s.list({ class: classNames?.list }),
+				children: colors.map((color) => /* @__PURE__ */ jsx(Radio, {
+					value: color.id,
+					"aria-label": color.name,
+					"data-slot": "item",
+					className: `group ${s.item({ class: classNames?.item })}`,
+					children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						"data-slot": "swatch",
+						style: {
+							background: `var(--novi-swatch-${color.id})`,
+							color: `var(--novi-swatch-${color.id}-fg)`
+						},
+						className: s.swatch({ class: classNames?.swatch }),
+						children: isSelected && /* @__PURE__ */ jsx("span", {
+							"data-slot": "indicator",
+							className: s.indicator({ class: classNames?.indicator }),
+							children: /* @__PURE__ */ jsx(CheckMark, {})
+						})
+					}), showLabels && /* @__PURE__ */ jsx("span", {
+						"data-slot": "itemLabel",
+						className: s.itemLabel({ class: classNames?.itemLabel }),
+						children: color.name
+					})] })
+				}, color.id))
+			}),
+			description !== void 0 && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				"data-slot": "description",
+				className: s.description({ class: classNames?.description }),
+				children: description
+			}),
+			errorMessage !== void 0 && /* @__PURE__ */ jsx(FieldError, {
+				"data-slot": "errorMessage",
+				className: s.errorMessage({ class: classNames?.errorMessage }),
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+export { COLOR_OPTIONS, ColorPicker };
+
+//# sourceMappingURL=color-picker.mjs.map

package/dist/color-picker/color-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.mjs","names":["RACRadioGroup","RACRadio"],"sources":["../../src/color-picker/color-picker.tsx"],"sourcesContent":["'use client'\n\nimport type { ColorPickerProps, NoviColorOption } from '@novi-ui/core'\nimport {\n  FieldError,\n  Label,\n  Radio as RACRadio,\n  RadioGroup as RACRadioGroup,\n  Text,\n} from 'react-aria-components'\nimport { DEFAULT_COLOR_ID, TACTILE_COLOR_SET } from '../tokens/color-set'\nimport { colorPickerStyles } from './color-picker.styles'\n\n/**\n * Tactile のカラーセット（Textile Dyes）。**利用側が色値を書かなくてよい**ように既定で並ぶ。\n *\n * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも\n * Raster では Print Inks が出る。色はモデルの持ち物で、共通ではない。\n */\nexport const COLOR_OPTIONS: readonly NoviColorOption[] = TACTILE_COLOR_SET.map(\n  ({ id, name, description }) => ({ id, name, description }),\n)\n\n/** 選択中であることを色以外でも示す印。 */\nfunction CheckMark() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M2.5 8.5l3.5 3.5 7.5-8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n    </svg>\n  )\n}\n\n/**\n * テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。\n *\n * @example\n * // 色 id を書かない。未指定ならテーマの既定色から始まる\n * const [color, setColor] = useState<string>()\n * return (\n *   <div data-novi-color={color}>\n *     <ColorPicker label=\"配色\" onChange={setColor} />\n *   </div>\n * )\n */\nexport function ColorPicker({\n  size,\n  label,\n  description,\n  errorMessage,\n  value,\n  defaultValue = DEFAULT_COLOR_ID,\n  onChange,\n  colors = COLOR_OPTIONS,\n  showLabels = false,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  name,\n  className,\n  classNames,\n  id,\n}: ColorPickerProps) {\n  const s = colorPickerStyles({ size })\n\n  return (\n    <RACRadioGroup\n      id={id}\n      name={name}\n      value={value}\n      defaultValue={defaultValue}\n      onChange={onChange}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      isInvalid={isInvalid}\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      {label !== undefined && (\n        <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n          {label}\n        </Label>\n      )}\n\n      <div data-slot=\"list\" className={s.list({ class: classNames?.list })}>\n        {colors.map((color) => (\n          <RACRadio\n            key={color.id}\n            value={color.id}\n            // スウォッチは色の面でしかない。名前を持たせないと読み上げが「ラジオボタン」で終わる\n            aria-label={color.name}\n            data-slot=\"item\"\n            className={`group ${s.item({ class: classNames?.item })}`}\n          >\n            {({ isSelected }) => (\n              <>\n                {/*\n                  色の解決は生成 CSS の `--novi-swatch-*` に委ねる。実装は色値を持たない。\n                  `data-novi-color` を置く形は採れない — テーマ宣言ごと切り替わってしまい、\n                  ライト / ダークの選択からも外れる（06 の申し送り）。\n                */}\n                <span\n                  data-slot=\"swatch\"\n                  style={{\n                    background: `var(--novi-swatch-${color.id})`,\n                    color: `var(--novi-swatch-${color.id}-fg)`,\n                  }}\n                  className={s.swatch({ class: classNames?.swatch })}\n                >\n                  {isSelected && (\n                    <span\n                      data-slot=\"indicator\"\n                      className={s.indicator({ class: classNames?.indicator })}\n                    >\n                      <CheckMark />\n                    </span>\n                  )}\n                </span>\n\n                {showLabels && (\n                  <span\n                    data-slot=\"itemLabel\"\n                    className={s.itemLabel({ class: classNames?.itemLabel })}\n                  >\n                    {color.name}\n                  </span>\n                )}\n              </>\n            )}\n          </RACRadio>\n        ))}\n      </div>\n\n      {description !== undefined && (\n        <Text\n          slot=\"description\"\n          data-slot=\"description\"\n          className={s.description({ class: classNames?.description })}\n        >\n          {description}\n        </Text>\n      )}\n\n      {errorMessage !== undefined && (\n        <FieldError\n          data-slot=\"errorMessage\"\n          className={s.errorMessage({ class: classNames?.errorMessage })}\n        >\n          {errorMessage}\n        </FieldError>\n      )}\n    </RACRadioGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAa,gBAA4C,kBAAkB,KACxE,EAAE,IAAI,MAAM,mBAAmB;CAAE;CAAI;CAAM;AAAY,EAC1D;;AAGA,SAAS,YAAY;CACnB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC9E,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAyB,QAAO;GAAe,aAAY;EAAK,CAAA;CACrE,CAAA;AAET;;;;;;;;;;;;;AAcA,SAAgB,YAAY,EAC1B,MACA,OACA,aACA,cACA,OACA,eAAe,kBACf,UACA,SAAS,eACT,aAAa,OACb,YACA,YACA,YACA,WACA,MACA,WACA,YACA,MACmB;CACnB,MAAM,IAAI,kBAAkB,EAAE,KAAK,CAAC;CAEpC,OACE,qBAACA,YAAD;EACM;EACE;EACC;EACO;EACJ;EACE;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAX5D,UAAA;GAaG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,oBAAC,OAAD;IAAK,aAAU;IAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;IAChE,UAAA,OAAO,KAAK,UACX,oBAACC,OAAD;KAEE,OAAO,MAAM;KAEb,cAAY,MAAM;KAClB,aAAU;KACV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAEpD,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CAME,oBAAC,QAAD;MACE,aAAU;MACV,OAAO;OACL,YAAY,qBAAqB,MAAM,GAAG;OAC1C,OAAO,qBAAqB,MAAM,GAAG;MACvC;MACA,WAAW,EAAE,OAAO,EAAE,OAAO,YAAY,OAAO,CAAC;MAEhD,UAAA,cACC,oBAAC,QAAD;OACE,aAAU;OACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;OAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;MACR,CAAA;KAEJ,CAAA,GAEL,cACC,oBAAC,QAAD;MACE,aAAU;MACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;MAEtD,UAAA,MAAM;KACH,CAAA,CAER,EAAA,CAAA;IAEI,GA1CH,MAAM,EA0CH,CACX;GACE,CAAA;GAEJ,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAGP,iBAAiB,KAAA,KAChB,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EAED;;AAEnB"}

package/dist/color-picker/color-picker.styles.d.mts

@@ -0,0 +1,76 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/color-picker/color-picker.styles.d.ts
+/**
+ * ColorPicker のスタイル定義。
+ *
+ * @example
+ * import { colorPickerStyles } from '@novi-ui/tactile'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'gap-4' } })
+ */
+declare const colorPickerStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    swatch: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  description: string;
+  errorMessage: string;
+  list: string;
+  item: string;
+  /**
+   * 色そのものを見せる面。
+   *
+   * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
+   * 染料が増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
+   */
+  swatch: string;
+  indicator: string;
+  itemLabel: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    swatch: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  description: string;
+  errorMessage: string;
+  list: string;
+  item: string;
+  /**
+   * 色そのものを見せる面。
+   *
+   * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
+   * 染料が増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
+   */
+  swatch: string;
+  indicator: string;
+  itemLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    swatch: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  description: string;
+  errorMessage: string;
+  list: string;
+  item: string;
+  /**
+   * 色そのものを見せる面。
+   *
+   * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
+   * 染料が増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
+   */
+  swatch: string;
+  indicator: string;
+  itemLabel: string;
+}>>;
+type ColorPickerStyleProps = Parameters<typeof colorPickerStyles>[0];
+//#endregion
+export { ColorPickerStyleProps, colorPickerStyles };
+//# sourceMappingURL=color-picker.styles.d.mts.map

package/dist/color-picker/color-picker.styles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.styles.d.mts","names":[],"sources":["../../src/color-picker/color-picker.styles.ts"],"mappings":";;;;;;;;;;;cA0Ea,+CAAiB;;IAfa;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;KAqB/B,wBAAwB,kBAAkB"}

package/dist/color-picker/color-picker.styles.mjs

@@ -0,0 +1,64 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tapTarget } from "../styles/tap-target.mjs";
+import { tv } from "tailwind-variants";
+//#region src/color-picker/color-picker.styles.ts
+/**
+* Tactile のカラー選択は**染料の玉**。丸く、指で押せる大きさで並べる。
+*
+* Raster が見本帳（角のある矩形を方眼に敷き詰める）なのに対して、
+* こちらは1粒ずつ間隔をあけて置く。**寸法はテーマの美学**（ADR-06）で、
+* 小さく詰めた見本帳は指では押し分けられない。
+*/
+const slots = {
+	root: ["flex flex-col gap-2", disabledState].join(" "),
+	label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
+	description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]",
+	list: "flex flex-wrap items-start gap-3",
+	item: [
+		"inline-flex flex-col items-center gap-1.5",
+		"cursor-pointer",
+		"data-[disabled]:cursor-default",
+		tapTarget
+	].join(" "),
+	/**
+	* 色そのものを見せる面。
+	*
+	* **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
+	* 染料が増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
+	*/
+	swatch: [
+		"inline-grid place-items-center",
+		"rounded-[var(--novi-radius-full)]",
+		"shadow-[var(--novi-shadow-sm)]",
+		"transition-[scale,box-shadow]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"group-data-[pressed]:scale-[0.92] motion-reduce:group-data-[pressed]:scale-100",
+		"group-data-[selected]:shadow-[var(--novi-shadow-md)]",
+		focusRing
+	].join(" "),
+	indicator: "leading-none",
+	itemLabel: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]"
+};
+/**
+* ColorPicker のスタイル定義。
+*
+* @example
+* import { colorPickerStyles } from '@novi-ui/tactile'
+* import { tv } from 'tailwind-variants'
+*
+* const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'gap-4' } })
+*/
+const colorPickerStyles = tv({
+	slots,
+	variants: { size: {
+		sm: { swatch: "size-8" },
+		md: { swatch: "size-11" },
+		lg: { swatch: "size-14" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { colorPickerStyles };
+
+//# sourceMappingURL=color-picker.styles.mjs.map

package/dist/color-picker/color-picker.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.styles.mjs","names":[],"sources":["../../src/color-picker/color-picker.styles.ts"],"sourcesContent":["import type {\n  colorPickerRequiredSlots,\n  colorPickerSlots,\n  NoviSize,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { tapTarget } from '../styles/tap-target'\n\n/**\n * Tactile のカラー選択は**染料の玉**。丸く、指で押せる大きさで並べる。\n *\n * Raster が見本帳（角のある矩形を方眼に敷き詰める）なのに対して、\n * こちらは1粒ずつ間隔をあけて置く。**寸法はテーマの美学**（ADR-06）で、\n * 小さく詰めた見本帳は指では押し分けられない。\n */\nconst slots = {\n  root: ['flex flex-col gap-2', disabledState].join(' '),\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\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  // 玉と玉の間は 12px 空ける。44px の当たり判定どうしが重なると押し間違える\n  list: 'flex flex-wrap items-start gap-3',\n  item: [\n    'inline-flex flex-col items-center gap-1.5',\n    'cursor-pointer',\n    'data-[disabled]:cursor-default',\n    // 見た目の玉は 32〜44px でも、指の当たる範囲は必ず 44px 以上にする\n    tapTarget,\n  ].join(' '),\n  /**\n   * 色そのものを見せる面。\n   *\n   * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、\n   * 染料が増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。\n   */\n  swatch: [\n    'inline-grid place-items-center',\n    'rounded-[var(--novi-radius-full)]',\n    'shadow-[var(--novi-shadow-sm)]',\n    'transition-[scale,box-shadow]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    // 押した瞬間だけ沈む。触れている感触をここで返す\n    'group-data-[pressed]:scale-[0.92] motion-reduce:group-data-[pressed]:scale-100',\n    // 選択は「持ち上がり」でも示す。色面だけだと選択中が色の違いに埋もれる\n    'group-data-[selected]:shadow-[var(--novi-shadow-md)]',\n    focusRing,\n  ].join(' '),\n  // 色だけに頼らず印でも示す（WCAG 1.4.1）\n  indicator: 'leading-none',\n  itemLabel: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof colorPickerSlots, (typeof colorPickerRequiredSlots)[number]>\n\n/**\n * 玉の直径。**最小でも 32px**（Raster の sm は 24px）。\n * 実効タップ領域は `tapTarget` が 44px を保証するので、視覚寸法はここで決めてよい。\n */\nconst size: VariantMap<NoviSize, { swatch: string }> = {\n  sm: { swatch: 'size-8' },\n  md: { swatch: 'size-11' },\n  lg: { swatch: 'size-14' },\n}\n\n/**\n * ColorPicker のスタイル定義。\n *\n * @example\n * import { colorPickerStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'gap-4' } })\n */\nexport const colorPickerStyles = tv({\n  slots,\n  variants: { size },\n  defaultVariants: { size: 'md' },\n})\n\nexport type ColorPickerStyleProps = Parameters<typeof colorPickerStyles>[0]\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,QAAQ;CACZ,MAAM,CAAC,uBAAuB,aAAa,CAAC,CAAC,KAAK,GAAG;CACrD,OAAO;CACP,aAAa;CACb,cAAc;CAEd,MAAM;CACN,MAAM;EACJ;EACA;EACA;EAEA;CACF,CAAC,CAAC,KAAK,GAAG;;;;;;;CAOV,QAAQ;EACN;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,WAAW;AACb;;;;;;;;;;AAqBA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU,EAAE;EAhBZ,IAAI,EAAE,QAAQ,SAAS;EACvB,IAAI,EAAE,QAAQ,UAAU;EACxB,IAAI,EAAE,QAAQ,UAAU;CAcZ,EAAK;CACjB,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/color-picker/index.d.mts

@@ -0,0 +1,3 @@
+import { COLOR_OPTIONS, ColorPicker } from "./color-picker.mjs";
+import { ColorPickerStyleProps, colorPickerStyles } from "./color-picker.styles.mjs";
+export { COLOR_OPTIONS, ColorPicker, type ColorPickerStyleProps, colorPickerStyles };

package/dist/index.d.mts

@@ -19,6 +19,9 @@ import "./card/index.mjs";
 import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
 import { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.mjs";
 import "./checkbox/index.mjs";
+import { COLOR_OPTIONS, ColorPicker } from "./color-picker/color-picker.mjs";
+import { ColorPickerStyleProps, colorPickerStyles } from "./color-picker/color-picker.styles.mjs";
+import "./color-picker/index.mjs";
 import { Input } from "./input/input.mjs";
 import { InputStyleProps, inputStyles } from "./input/input.styles.mjs";
 import "./input/index.mjs";
@@ -58,4 +61,4 @@ import "./textarea/index.mjs";
 import { NoviToast, NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
 import { ToastStyleProps, toastStyles } from "./toast/toast.styles.mjs";
 import "./toast/index.mjs";
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, ColorPicker, type ColorPickerStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };

package/dist/index.mjs

@@ -13,6 +13,8 @@ import { cardStyles } from "./card/card.styles.mjs";
 import { Card, CardBody, CardFooter, CardHeader, CardImage } from "./card/card.mjs";
 import { checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.mjs";
 import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
+import { colorPickerStyles } from "./color-picker/color-picker.styles.mjs";
+import { COLOR_OPTIONS, ColorPicker } from "./color-picker/color-picker.mjs";
 import { inputStyles } from "./input/input.styles.mjs";
 import { Input } from "./input/input.mjs";
 import { menuStyles } from "./menu/menu.styles.mjs";
@@ -39,4 +41,4 @@ import { textareaStyles } from "./textarea/textarea.styles.mjs";
 import { TextArea } from "./textarea/textarea.mjs";
 import { toastStyles } from "./toast/toast.styles.mjs";
 import { NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
-export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
+export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, ColorPicker, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };

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

@@ -22,7 +22,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     input: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     inputWrapper: string;
   }>;
 }, {
@@ -42,7 +42,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     input: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     inputWrapper: string;
   }>;
 }, {
@@ -62,7 +62,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     input: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     inputWrapper: string;
   }>;
 }, {

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

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

package/dist/menu/menu.styles.mjs

@@ -11,6 +11,7 @@ const slots = {
 		"rounded-t-[var(--novi-radius-lg)]",
 		"shadow-[var(--novi-shadow-lg)]",
 		"pb-[env(safe-area-inset-bottom,0px)]",
+		"pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]",
 		"data-[entering]:motion-safe:animate-[novi-fade-in_120ms_ease-out]"
 	].join(" "),
 	list: "outline-none p-2 flex flex-col",

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

@@ -1 +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"}
+{"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    // 横向きのノッチは左右に来る。面は全幅のまま、中身だけを内側へ寄せる（FR-13）\n    'pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,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;EAEA;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/modal.styles.d.mts

@@ -13,7 +13,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
 }, {
@@ -27,7 +27,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
 }, {
@@ -41,7 +41,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
 }, {

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

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.d.mts","names":[],"sources":["../../src/modal/modal.styles.ts"],"mappings":";;;;;;;;;;;cA4Fa,yCAAW;;IAzB2B;;;IAQL;;;;;;;;;;;IARK;;;IAQL;;;;;;;;;;;IARK;;;IAQL;;;;;;;;;;KAuBlC,kBAAkB,kBAAkB"}
+{"version":3,"file":"modal.styles.d.mts","names":[],"sources":["../../src/modal/modal.styles.ts"],"mappings":";;;;;;;;;;;cA8Fa,yCAAW;;IAzB2B;;;IAQL;;;;;;;;;;;IARK;;;IAQL;;;;;;;;;;;IARK;;;IAQL;;;;;;;;;;KAuBlC,kBAAkB,kBAAkB"}

package/dist/modal/modal.styles.mjs

@@ -23,6 +23,7 @@ const slots = {
 		"shadow-[var(--novi-shadow-lg)]",
 		"overflow-auto",
 		"pb-[env(safe-area-inset-bottom,0px)]",
+		"pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]",
 		"data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]"
 	].join(" "),
 	title: [

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

@@ -1 +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 * Tactile の Modal は **下端から出るボトムシート**（architecture.md §5 テーマB）。\n *\n * Raster との構造差:\n * - 中央配置 → 画面下端に張り付く（`items-end`）\n * - ヘッダー行に ✕ → **フッターのフルワイドボタン**（親指の届く位置に出口を置く）\n * - 上下すべて角丸 → **上端だけ角丸**（下から出てきた紙という形）\n * - 影は下向き → **上向き**（下端から来る面には上から光が当たる）\n */\nconst slots = {\n  backdrop: [\n    // items-end が「下から出る」の全て。Raster は place-items-center\n    'fixed inset-0 z-50 flex items-end justify-center',\n    'bg-[var(--novi-color-overlay)]',\n    'data-[entering]:motion-safe:animate-[novi-fade-in_200ms_ease-out]',\n  ].join(' '),\n  panel: [\n    'text-[var(--novi-color-fg)]',\n    'w-full outline-none',\n    'bg-[var(--novi-color-surface)]',\n    'shadow-[var(--novi-shadow-lg)]',\n    'overflow-auto',\n    // 下端の余白はホームインジケータぶんを足す。env() の第2引数で\n    // safe-area の無い環境（デスクトップ）では 0 に落ちる（AC-10-3 / FR-13）\n    'pb-[env(safe-area-inset-bottom,0px)]',\n    // 下から せり上がる。260ms は移動距離に見合う時間（120ms では瞬間移動に見える）\n    'data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]',\n  ].join(' '),\n  // header は描画しない（任意 slot の省略）。title だけが body の上に載る\n  title: [\n    'px-5 pt-5 pb-2',\n    'text-[length:var(--novi-text-lg)] font-bold',\n    'text-[var(--novi-color-fg)]',\n  ].join(' '),\n  closeButton: [\n    // フルワイド。指がどこに落ちても当たる\n    'w-full h-14 grid place-items-center',\n    'text-[length:var(--novi-text-base)] font-bold',\n    'text-[var(--novi-color-fg)]',\n    'bg-[var(--novi-color-subtle)]',\n    'rounded-[var(--novi-radius-md)]',\n    'transition-[background-color,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[pressed]:scale-[0.97] motion-reduce:data-[pressed]:scale-100',\n    focusRing,\n  ].join(' '),\n  body: ['px-5 pb-5 pt-1', 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]'].join(\n    ' ',\n  ),\n  // 縦積み。横並びだと1つあたりの幅が指に対して狭くなる\n  footer: 'flex flex-col gap-2 px-5 pb-5',\n} satisfies SlotMap<typeof modalSlots, (typeof modalRequiredSlots)[number]>\n\n/**\n * 全幅シートに幅の段階は存在しないため、`size` は**最大高**として解釈する（ADR-T3）。\n * 語彙は共通、解釈はテーマの自由（ADR-06）。\n */\nconst size: VariantMap<NoviSize | 'full', { panel: string }> = {\n  sm: { panel: 'max-h-[40dvh]' },\n  md: { panel: 'max-h-[60dvh]' },\n  lg: { panel: 'max-h-[80dvh]' },\n  full: { panel: 'max-h-[100dvh] h-[100dvh]' },\n}\n\n/** 下端は画面に接しているので、角丸は上端だけに効く。 */\nconst radius: VariantMap<NoviRadius, { panel: string }> = {\n  none: { panel: 'rounded-t-[var(--novi-radius-none)]' },\n  sm: { panel: 'rounded-t-[var(--novi-radius-sm)]' },\n  md: { panel: 'rounded-t-[var(--novi-radius-md)]' },\n  lg: { panel: 'rounded-t-[var(--novi-radius-lg)]' },\n  full: { panel: 'rounded-t-[var(--novi-radius-full)]' },\n}\n\n/**\n * Modal のスタイル定義。\n *\n * @example\n * import { modalStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myModal = tv({ extend: modalStyles, slots: { panel: 'max-h-[50dvh]' } })\n */\nexport const modalStyles = tv({\n  slots,\n  variants: { size, radius },\n  defaultVariants: { size: 'md', radius: 'lg' },\n})\n\nexport type ModalStyleProps = Parameters<typeof modalStyles>[0]\n\n/**\n * シート上端の掴み手。**装飾であり slot ではない**（architecture.md §5 の運用）。\n *\n * ドラッグ開閉は MVP の対象外（NG6）なので、掴めそうに見せすぎない。\n * 細く低コントラストにして「シートの上端」を示す線に留める。\n */\nexport const grabberClass = [\n  'mx-auto mt-2 mb-1 h-1 w-9 shrink-0',\n  'rounded-[var(--novi-radius-full)]',\n  'bg-[var(--novi-color-border)]',\n].join(' ')\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,QAAQ;CACZ,UAAU;EAER;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;EACA;EAGA;EAEA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;EAEX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM,CAAC,kBAAkB,gEAAgE,CAAC,CAAC,KACzF,GACF;CAEA,QAAQ;AACV;;;;;;;;;;AA+BA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GA1BZ,IAAI,EAAE,OAAO,gBAAgB;GAC7B,IAAI,EAAE,OAAO,gBAAgB;GAC7B,IAAI,EAAE,OAAO,gBAAgB;GAC7B,MAAM,EAAE,OAAO,4BAA4B;EAuB/B;EAAM;GAlBlB,MAAM,EAAE,OAAO,sCAAsC;GACrD,IAAI,EAAE,OAAO,oCAAoC;GACjD,IAAI,EAAE,OAAO,oCAAoC;GACjD,IAAI,EAAE,OAAO,oCAAoC;GACjD,MAAM,EAAE,OAAO,sCAAsC;EAcnC;CAAO;CACzB,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAK;AAC9C,CAAC;;;;;;;AAUD,MAAa,eAAe;CAC1B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG"}
+{"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 * Tactile の Modal は **下端から出るボトムシート**（architecture.md §5 テーマB）。\n *\n * Raster との構造差:\n * - 中央配置 → 画面下端に張り付く（`items-end`）\n * - ヘッダー行に ✕ → **フッターのフルワイドボタン**（親指の届く位置に出口を置く）\n * - 上下すべて角丸 → **上端だけ角丸**（下から出てきた紙という形）\n * - 影は下向き → **上向き**（下端から来る面には上から光が当たる）\n */\nconst slots = {\n  backdrop: [\n    // items-end が「下から出る」の全て。Raster は place-items-center\n    'fixed inset-0 z-50 flex items-end justify-center',\n    'bg-[var(--novi-color-overlay)]',\n    'data-[entering]:motion-safe:animate-[novi-fade-in_200ms_ease-out]',\n  ].join(' '),\n  panel: [\n    'text-[var(--novi-color-fg)]',\n    'w-full outline-none',\n    'bg-[var(--novi-color-surface)]',\n    'shadow-[var(--novi-shadow-lg)]',\n    'overflow-auto',\n    // 下端の余白はホームインジケータぶんを足す。env() の第2引数で\n    // safe-area の無い環境（デスクトップ）では 0 に落ちる（AC-10-3 / FR-13）\n    'pb-[env(safe-area-inset-bottom,0px)]',\n    // 横向きではノッチが左右に来る。面は画面幅いっぱいのまま、中身だけを内側へ寄せる\n    'pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]',\n    // 下から せり上がる。260ms は移動距離に見合う時間（120ms では瞬間移動に見える）\n    'data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]',\n  ].join(' '),\n  // header は描画しない（任意 slot の省略）。title だけが body の上に載る\n  title: [\n    'px-5 pt-5 pb-2',\n    'text-[length:var(--novi-text-lg)] font-bold',\n    'text-[var(--novi-color-fg)]',\n  ].join(' '),\n  closeButton: [\n    // フルワイド。指がどこに落ちても当たる\n    'w-full h-14 grid place-items-center',\n    'text-[length:var(--novi-text-base)] font-bold',\n    'text-[var(--novi-color-fg)]',\n    'bg-[var(--novi-color-subtle)]',\n    'rounded-[var(--novi-radius-md)]',\n    'transition-[background-color,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[pressed]:scale-[0.97] motion-reduce:data-[pressed]:scale-100',\n    focusRing,\n  ].join(' '),\n  body: ['px-5 pb-5 pt-1', 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]'].join(\n    ' ',\n  ),\n  // 縦積み。横並びだと1つあたりの幅が指に対して狭くなる\n  footer: 'flex flex-col gap-2 px-5 pb-5',\n} satisfies SlotMap<typeof modalSlots, (typeof modalRequiredSlots)[number]>\n\n/**\n * 全幅シートに幅の段階は存在しないため、`size` は**最大高**として解釈する（ADR-T3）。\n * 語彙は共通、解釈はテーマの自由（ADR-06）。\n */\nconst size: VariantMap<NoviSize | 'full', { panel: string }> = {\n  sm: { panel: 'max-h-[40dvh]' },\n  md: { panel: 'max-h-[60dvh]' },\n  lg: { panel: 'max-h-[80dvh]' },\n  full: { panel: 'max-h-[100dvh] h-[100dvh]' },\n}\n\n/** 下端は画面に接しているので、角丸は上端だけに効く。 */\nconst radius: VariantMap<NoviRadius, { panel: string }> = {\n  none: { panel: 'rounded-t-[var(--novi-radius-none)]' },\n  sm: { panel: 'rounded-t-[var(--novi-radius-sm)]' },\n  md: { panel: 'rounded-t-[var(--novi-radius-md)]' },\n  lg: { panel: 'rounded-t-[var(--novi-radius-lg)]' },\n  full: { panel: 'rounded-t-[var(--novi-radius-full)]' },\n}\n\n/**\n * Modal のスタイル定義。\n *\n * @example\n * import { modalStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myModal = tv({ extend: modalStyles, slots: { panel: 'max-h-[50dvh]' } })\n */\nexport const modalStyles = tv({\n  slots,\n  variants: { size, radius },\n  defaultVariants: { size: 'md', radius: 'lg' },\n})\n\nexport type ModalStyleProps = Parameters<typeof modalStyles>[0]\n\n/**\n * シート上端の掴み手。**装飾であり slot ではない**（architecture.md §5 の運用）。\n *\n * ドラッグ開閉は MVP の対象外（NG6）なので、掴めそうに見せすぎない。\n * 細く低コントラストにして「シートの上端」を示す線に留める。\n */\nexport const grabberClass = [\n  'mx-auto mt-2 mb-1 h-1 w-9 shrink-0',\n  'rounded-[var(--novi-radius-full)]',\n  'bg-[var(--novi-color-border)]',\n].join(' ')\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,QAAQ;CACZ,UAAU;EAER;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;EACA;EACA;EAGA;EAEA;EAEA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;EAEX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM,CAAC,kBAAkB,gEAAgE,CAAC,CAAC,KACzF,GACF;CAEA,QAAQ;AACV;;;;;;;;;;AA+BA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GA1BZ,IAAI,EAAE,OAAO,gBAAgB;GAC7B,IAAI,EAAE,OAAO,gBAAgB;GAC7B,IAAI,EAAE,OAAO,gBAAgB;GAC7B,MAAM,EAAE,OAAO,4BAA4B;EAuB/B;EAAM;GAlBlB,MAAM,EAAE,OAAO,sCAAsC;GACrD,IAAI,EAAE,OAAO,oCAAoC;GACjD,IAAI,EAAE,OAAO,oCAAoC;GACjD,IAAI,EAAE,OAAO,oCAAoC;GACjD,MAAM,EAAE,OAAO,sCAAsC;EAcnC;CAAO;CACzB,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAK;AAC9C,CAAC;;;;;;;AAUD,MAAa,eAAe;CAC1B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG"}

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

@@ -7,7 +7,7 @@ import { VariantMap } from "@novi-ui/core";
  * const myPopover = tv({ extend: popoverStyles, slots: { content: 'p-6' } })
  */
 declare const popoverStyles: import("tailwind-variants").TVReturnType<{
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {
@@ -15,7 +15,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
   arrow: string;
   content: string;
 }, undefined, {
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {
@@ -23,7 +23,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
   arrow: string;
   content: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {

package/dist/select/select.styles.d.mts

@@ -17,7 +17,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
     trigger: string;
     option: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     trigger: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -39,7 +39,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
     trigger: string;
     option: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     trigger: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -61,7 +61,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
     trigger: string;
     option: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     trigger: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {

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

@@ -1 +1 @@
-{"version":3,"file":"select.styles.d.mts","names":[],"sources":["../../src/select/select.styles.ts"],"mappings":";;;;;;;;;;;;;;cA0Ha,0CAAY;;IAhDmB;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;;IAvBN;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;;IAvBN;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;KA+BtC,mBAAmB,kBAAkB"}
+{"version":3,"file":"select.styles.d.mts","names":[],"sources":["../../src/select/select.styles.ts"],"mappings":";;;;;;;;;;;;;;cA4Ha,0CAAY;;IAhDmB;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;;IAvBN;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;;IAvBN;IAAgB;;;IAeZ;;;IAQE;;;;;;;;;;;;;;KA+BtC,mBAAmB,kBAAkB"}

package/dist/select/select.styles.mjs

@@ -37,6 +37,7 @@ const slots = {
 		"shadow-[var(--novi-shadow-lg)]",
 		"overflow-auto",
 		"pb-[env(safe-area-inset-bottom,0px)]",
+		"pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]",
 		"data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]"
 	].join(" "),
 	listbox: "outline-none p-2 flex flex-col",

package/dist/select/select.styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.styles.mjs","names":[],"sources":["../../src/select/select.styles.ts"],"sourcesContent":["import type {\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  selectRequiredSlots,\n  selectSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Select は **画面下端から出るシート型ピッカー**（Raster はアンカー型ポップオーバー）。\n *\n * 一覧は誤タップが最も起きる場所なので、行を大きく取り、選択済みをチェックで示す。\n *\n * **`!` 付きのユーティリティは意図的**。RAC の `Popover` はトリガー基準の位置を\n * インラインスタイルで書き込むため、通常のクラスでも `style` prop でも勝てない。\n * スタイルシートの `!important` だけがインラインに勝つ（ADR-T2 / T-13 の実測）。\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  trigger: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-center justify-between gap-2 w-full',\n    'text-left',\n    'bg-[var(--novi-color-surface)]',\n    'shadow-[var(--novi-shadow-sm)]',\n    'rounded-[var(--novi-radius-md)]',\n    'transition-[opacity,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[pressed]:scale-[0.99] motion-reduce:data-[pressed]:scale-100',\n    'group-data-[invalid]:ring-1 group-data-[invalid]:ring-[var(--novi-color-danger)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  value: [\n    'truncate text-[var(--novi-color-fg)]',\n    'data-[placeholder]:text-[var(--novi-color-muted)]',\n  ].join(' '),\n  icon: 'shrink-0 text-[var(--novi-color-muted)]',\n  popover: [\n    // ここが Raster との構造差そのもの。トリガーの隣ではなく画面下端に張り付く\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    'text-[var(--novi-color-fg)]',\n    // 下端は画面に接するので上端だけ角丸。下から出てきた紙の形\n    'rounded-t-[var(--novi-radius-lg)]',\n    'shadow-[var(--novi-shadow-lg)]',\n    'overflow-auto',\n    'pb-[env(safe-area-inset-bottom,0px)]',\n    'data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]',\n  ].join(' '),\n  listbox: 'outline-none p-2 flex flex-col',\n  option: [\n    'flex items-center justify-between gap-3',\n    'px-3 cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'rounded-[var(--novi-radius-md)]',\n    'transition-[background-color] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[focused]:bg-[var(--novi-color-subtle)]',\n    'data-[selected]:font-bold',\n    disabledState,\n  ].join(' '),\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 selectSlots, (typeof selectRequiredSlots)[number]>\n\n/**\n * `size` はトリガーの寸法と**行の密度**（ADR-T3）。\n * 行はどの段でも 48px を下回らない — 一覧は誤タップが最も起きる場所。\n */\nconst size: VariantMap<NoviSize, { trigger: string; option: string }> = {\n  sm: {\n    trigger: 'h-10 px-3 text-[length:var(--novi-text-sm)]',\n    option: 'h-12 text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    trigger: 'h-12 px-4 text-[length:var(--novi-text-base)]',\n    option: 'h-14 text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    trigger: 'h-14 px-5 text-[length:var(--novi-text-base)]',\n    option: 'h-16 text-[length:var(--novi-text-base)]',\n  },\n}\n\nconst radius: VariantMap<NoviRadius, { trigger: string }> = {\n  none: { trigger: 'rounded-[var(--novi-radius-none)]' },\n  sm: { trigger: 'rounded-[var(--novi-radius-sm)]' },\n  md: { trigger: 'rounded-[var(--novi-radius-md)]' },\n  lg: { trigger: 'rounded-[var(--novi-radius-lg)]' },\n  full: { trigger: 'rounded-[var(--novi-radius-full)]' },\n}\n\nconst variant: VariantMap<NoviVariant, { trigger: string }> = {\n  solid: { trigger: 'bg-[var(--novi-color-surface)]' },\n  outline: {\n    trigger:\n      'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n  },\n  soft: { trigger: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n  ghost: { trigger: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n  plain: {\n    trigger: 'bg-transparent shadow-[var(--novi-shadow-none)] px-0 underline underline-offset-4',\n  },\n}\n\n/**\n * Select のスタイル定義。\n *\n * `popover` の `!` 付きクラスを `classNames` で上書きすることはできない\n * （`!important` 同士では後勝ちにならない）。配置を変えたい場合は `tv({ extend })` を使う。\n *\n * @example\n * import { selectStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const mySelect = tv({ extend: selectStyles, slots: { option: 'font-mono' } })\n */\nexport const selectStyles = tv({\n  slots,\n  variants: { size, radius, variant },\n  defaultVariants: { size: 'md', radius: 'md', variant: 'solid' },\n})\n\nexport type SelectStyleProps = Parameters<typeof selectStyles>[0]\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO,CACL,wCACA,mDACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;EAEP;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;CACT,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AAsDA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GAjDZ,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;EAsCY;EAAM;GAlClB,MAAM,EAAE,SAAS,oCAAoC;GACrD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,MAAM,EAAE,SAAS,oCAAoC;EA8BnC;EAAQ;GA1B1B,OAAO,EAAE,SAAS,iCAAiC;GACnD,SAAS,EACP,SACE,gGACJ;GACA,MAAM,EAAE,SAAS,iEAAiE;GAClF,OAAO,EAAE,SAAS,kDAAkD;GACpE,OAAO,EACL,SAAS,oFACX;EAiB0B;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAQ;AAChE,CAAC"}
+{"version":3,"file":"select.styles.mjs","names":[],"sources":["../../src/select/select.styles.ts"],"sourcesContent":["import type {\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  selectRequiredSlots,\n  selectSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Tactile の Select は **画面下端から出るシート型ピッカー**（Raster はアンカー型ポップオーバー）。\n *\n * 一覧は誤タップが最も起きる場所なので、行を大きく取り、選択済みをチェックで示す。\n *\n * **`!` 付きのユーティリティは意図的**。RAC の `Popover` はトリガー基準の位置を\n * インラインスタイルで書き込むため、通常のクラスでも `style` prop でも勝てない。\n * スタイルシートの `!important` だけがインラインに勝つ（ADR-T2 / T-13 の実測）。\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  trigger: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-center justify-between gap-2 w-full',\n    'text-left',\n    'bg-[var(--novi-color-surface)]',\n    'shadow-[var(--novi-shadow-sm)]',\n    'rounded-[var(--novi-radius-md)]',\n    'transition-[opacity,scale] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[pressed]:scale-[0.99] motion-reduce:data-[pressed]:scale-100',\n    'group-data-[invalid]:ring-1 group-data-[invalid]:ring-[var(--novi-color-danger)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  value: [\n    'truncate text-[var(--novi-color-fg)]',\n    'data-[placeholder]:text-[var(--novi-color-muted)]',\n  ].join(' '),\n  icon: 'shrink-0 text-[var(--novi-color-muted)]',\n  popover: [\n    // ここが Raster との構造差そのもの。トリガーの隣ではなく画面下端に張り付く\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    'text-[var(--novi-color-fg)]',\n    // 下端は画面に接するので上端だけ角丸。下から出てきた紙の形\n    'rounded-t-[var(--novi-radius-lg)]',\n    'shadow-[var(--novi-shadow-lg)]',\n    'overflow-auto',\n    'pb-[env(safe-area-inset-bottom,0px)]',\n    // 横向きのノッチは左右に来る。面は全幅のまま、中身だけを内側へ寄せる（FR-13）\n    'pl-[env(safe-area-inset-left,0px)] pr-[env(safe-area-inset-right,0px)]',\n    'data-[entering]:motion-safe:animate-[novi-slide-up_260ms_var(--novi-ease-emphasized)]',\n  ].join(' '),\n  listbox: 'outline-none p-2 flex flex-col',\n  option: [\n    'flex items-center justify-between gap-3',\n    'px-3 cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'rounded-[var(--novi-radius-md)]',\n    'transition-[background-color] duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[focused]:bg-[var(--novi-color-subtle)]',\n    'data-[selected]:font-bold',\n    disabledState,\n  ].join(' '),\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 selectSlots, (typeof selectRequiredSlots)[number]>\n\n/**\n * `size` はトリガーの寸法と**行の密度**（ADR-T3）。\n * 行はどの段でも 48px を下回らない — 一覧は誤タップが最も起きる場所。\n */\nconst size: VariantMap<NoviSize, { trigger: string; option: string }> = {\n  sm: {\n    trigger: 'h-10 px-3 text-[length:var(--novi-text-sm)]',\n    option: 'h-12 text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    trigger: 'h-12 px-4 text-[length:var(--novi-text-base)]',\n    option: 'h-14 text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    trigger: 'h-14 px-5 text-[length:var(--novi-text-base)]',\n    option: 'h-16 text-[length:var(--novi-text-base)]',\n  },\n}\n\nconst radius: VariantMap<NoviRadius, { trigger: string }> = {\n  none: { trigger: 'rounded-[var(--novi-radius-none)]' },\n  sm: { trigger: 'rounded-[var(--novi-radius-sm)]' },\n  md: { trigger: 'rounded-[var(--novi-radius-md)]' },\n  lg: { trigger: 'rounded-[var(--novi-radius-lg)]' },\n  full: { trigger: 'rounded-[var(--novi-radius-full)]' },\n}\n\nconst variant: VariantMap<NoviVariant, { trigger: string }> = {\n  solid: { trigger: 'bg-[var(--novi-color-surface)]' },\n  outline: {\n    trigger:\n      'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n  },\n  soft: { trigger: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n  ghost: { trigger: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n  plain: {\n    trigger: 'bg-transparent shadow-[var(--novi-shadow-none)] px-0 underline underline-offset-4',\n  },\n}\n\n/**\n * Select のスタイル定義。\n *\n * `popover` の `!` 付きクラスを `classNames` で上書きすることはできない\n * （`!important` 同士では後勝ちにならない）。配置を変えたい場合は `tv({ extend })` を使う。\n *\n * @example\n * import { selectStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const mySelect = tv({ extend: selectStyles, slots: { option: 'font-mono' } })\n */\nexport const selectStyles = tv({\n  slots,\n  variants: { size, radius, variant },\n  defaultVariants: { size: 'md', radius: 'md', variant: 'solid' },\n})\n\nexport type SelectStyleProps = Parameters<typeof selectStyles>[0]\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO,CACL,wCACA,mDACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,SAAS;EAEP;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;CACT,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AAsDA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GAjDZ,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;EAsCY;EAAM;GAlClB,MAAM,EAAE,SAAS,oCAAoC;GACrD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,MAAM,EAAE,SAAS,oCAAoC;EA8BnC;EAAQ;GA1B1B,OAAO,EAAE,SAAS,iCAAiC;GACnD,SAAS,EACP,SACE,gGACJ;GACA,MAAM,EAAE,SAAS,iEAAiE;GAClF,OAAO,EAAE,SAAS,kDAAkD;GACpE,OAAO,EACL,SAAS,oFACX;EAiB0B;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAQ;AAChE,CAAC"}

package/dist/skeleton/skeleton.styles.d.mts

@@ -7,19 +7,19 @@ import { VariantMap } from "@novi-ui/core";
  * const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
  */
 declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {
   root: string;
 }, undefined, {
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {
   root: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {

package/dist/tactile.css

@@ -17,7 +17,7 @@
     --novi-radius-md: 14px;
     --novi-radius-lg: 20px;
     --novi-radius-full: 9999px;
-    --novi-shadow-none: none;
+    --novi-shadow-none: 0 0 #0000;
     --novi-shadow-sm: 0 1px 3px oklch(20% 0.01 255 / 0.10), 0 1px 2px oklch(20% 0.01 255 / 0.06);
     --novi-shadow-md: 0 6px 16px oklch(20% 0.01 255 / 0.14), 0 2px 4px oklch(20% 0.01 255 / 0.08);
     --novi-shadow-lg: 0 -8px 32px oklch(20% 0.01 255 / 0.18), 0 -2px 8px oklch(20% 0.01 255 / 0.08);
@@ -54,6 +54,22 @@
     --novi-color-warning-fg: oklch(98.5% 0.004 62);
     --novi-color-danger: oklch(50% 0.16 27);
     --novi-color-danger-fg: oklch(98.5% 0.004 27);
+    --novi-swatch-indigo: oklch(50% 0.08 255);
+    --novi-swatch-indigo-fg: oklch(98.5% 0.004 255);
+    --novi-swatch-peacock: oklch(50% 0.08 200);
+    --novi-swatch-peacock-fg: oklch(98.5% 0.004 200);
+    --novi-swatch-sage: oklch(50% 0.08 148);
+    --novi-swatch-sage-fg: oklch(98.5% 0.004 148);
+    --novi-swatch-saffron: oklch(50% 0.08 78);
+    --novi-swatch-saffron-fg: oklch(98.5% 0.004 78);
+    --novi-swatch-madder: oklch(50% 0.08 28);
+    --novi-swatch-madder-fg: oklch(98.5% 0.004 28);
+    --novi-swatch-cochineal: oklch(50% 0.08 5);
+    --novi-swatch-cochineal-fg: oklch(98.5% 0.004 5);
+    --novi-swatch-mauve: oklch(50% 0.08 315);
+    --novi-swatch-mauve-fg: oklch(98.5% 0.004 315);
+    --novi-swatch-greige: oklch(50% 0.022 80);
+    --novi-swatch-greige-fg: oklch(98.5% 0.004 80);
   }
 
   [data-novi-scheme='dark'] {
@@ -77,6 +93,22 @@
     --novi-color-warning-fg: oklch(18% 0.02 65);
     --novi-color-danger: oklch(74% 0.14 27);
     --novi-color-danger-fg: oklch(18% 0.02 27);
+    --novi-swatch-indigo: oklch(76% 0.075 255);
+    --novi-swatch-indigo-fg: oklch(18% 0.02 255);
+    --novi-swatch-peacock: oklch(76% 0.075 200);
+    --novi-swatch-peacock-fg: oklch(18% 0.02 200);
+    --novi-swatch-sage: oklch(76% 0.075 148);
+    --novi-swatch-sage-fg: oklch(18% 0.02 148);
+    --novi-swatch-saffron: oklch(76% 0.075 78);
+    --novi-swatch-saffron-fg: oklch(18% 0.02 78);
+    --novi-swatch-madder: oklch(76% 0.075 28);
+    --novi-swatch-madder-fg: oklch(18% 0.02 28);
+    --novi-swatch-cochineal: oklch(76% 0.075 5);
+    --novi-swatch-cochineal-fg: oklch(18% 0.02 5);
+    --novi-swatch-mauve: oklch(76% 0.075 315);
+    --novi-swatch-mauve-fg: oklch(18% 0.02 315);
+    --novi-swatch-greige: oklch(76% 0.018 80);
+    --novi-swatch-greige-fg: oklch(18% 0.02 80);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -101,6 +133,22 @@
       --novi-color-warning-fg: oklch(18% 0.02 65);
       --novi-color-danger: oklch(74% 0.14 27);
       --novi-color-danger-fg: oklch(18% 0.02 27);
+      --novi-swatch-indigo: oklch(76% 0.075 255);
+      --novi-swatch-indigo-fg: oklch(18% 0.02 255);
+      --novi-swatch-peacock: oklch(76% 0.075 200);
+      --novi-swatch-peacock-fg: oklch(18% 0.02 200);
+      --novi-swatch-sage: oklch(76% 0.075 148);
+      --novi-swatch-sage-fg: oklch(18% 0.02 148);
+      --novi-swatch-saffron: oklch(76% 0.075 78);
+      --novi-swatch-saffron-fg: oklch(18% 0.02 78);
+      --novi-swatch-madder: oklch(76% 0.075 28);
+      --novi-swatch-madder-fg: oklch(18% 0.02 28);
+      --novi-swatch-cochineal: oklch(76% 0.075 5);
+      --novi-swatch-cochineal-fg: oklch(18% 0.02 5);
+      --novi-swatch-mauve: oklch(76% 0.075 315);
+      --novi-swatch-mauve-fg: oklch(18% 0.02 315);
+      --novi-swatch-greige: oklch(76% 0.018 80);
+      --novi-swatch-greige-fg: oklch(18% 0.02 80);
     }
   }
 

package/dist/tactile.scoped.css

@@ -17,7 +17,7 @@
     --novi-radius-md: 14px;
     --novi-radius-lg: 20px;
     --novi-radius-full: 9999px;
-    --novi-shadow-none: none;
+    --novi-shadow-none: 0 0 #0000;
     --novi-shadow-sm: 0 1px 3px oklch(20% 0.01 255 / 0.10), 0 1px 2px oklch(20% 0.01 255 / 0.06);
     --novi-shadow-md: 0 6px 16px oklch(20% 0.01 255 / 0.14), 0 2px 4px oklch(20% 0.01 255 / 0.08);
     --novi-shadow-lg: 0 -8px 32px oklch(20% 0.01 255 / 0.18), 0 -2px 8px oklch(20% 0.01 255 / 0.08);
@@ -54,6 +54,22 @@
     --novi-color-warning-fg: oklch(98.5% 0.004 62);
     --novi-color-danger: oklch(50% 0.16 27);
     --novi-color-danger-fg: oklch(98.5% 0.004 27);
+    --novi-swatch-indigo: oklch(50% 0.08 255);
+    --novi-swatch-indigo-fg: oklch(98.5% 0.004 255);
+    --novi-swatch-peacock: oklch(50% 0.08 200);
+    --novi-swatch-peacock-fg: oklch(98.5% 0.004 200);
+    --novi-swatch-sage: oklch(50% 0.08 148);
+    --novi-swatch-sage-fg: oklch(98.5% 0.004 148);
+    --novi-swatch-saffron: oklch(50% 0.08 78);
+    --novi-swatch-saffron-fg: oklch(98.5% 0.004 78);
+    --novi-swatch-madder: oklch(50% 0.08 28);
+    --novi-swatch-madder-fg: oklch(98.5% 0.004 28);
+    --novi-swatch-cochineal: oklch(50% 0.08 5);
+    --novi-swatch-cochineal-fg: oklch(98.5% 0.004 5);
+    --novi-swatch-mauve: oklch(50% 0.08 315);
+    --novi-swatch-mauve-fg: oklch(98.5% 0.004 315);
+    --novi-swatch-greige: oklch(50% 0.022 80);
+    --novi-swatch-greige-fg: oklch(98.5% 0.004 80);
   }
 
   [data-novi-theme='tactile'][data-novi-scheme='dark'] {
@@ -77,6 +93,22 @@
     --novi-color-warning-fg: oklch(18% 0.02 65);
     --novi-color-danger: oklch(74% 0.14 27);
     --novi-color-danger-fg: oklch(18% 0.02 27);
+    --novi-swatch-indigo: oklch(76% 0.075 255);
+    --novi-swatch-indigo-fg: oklch(18% 0.02 255);
+    --novi-swatch-peacock: oklch(76% 0.075 200);
+    --novi-swatch-peacock-fg: oklch(18% 0.02 200);
+    --novi-swatch-sage: oklch(76% 0.075 148);
+    --novi-swatch-sage-fg: oklch(18% 0.02 148);
+    --novi-swatch-saffron: oklch(76% 0.075 78);
+    --novi-swatch-saffron-fg: oklch(18% 0.02 78);
+    --novi-swatch-madder: oklch(76% 0.075 28);
+    --novi-swatch-madder-fg: oklch(18% 0.02 28);
+    --novi-swatch-cochineal: oklch(76% 0.075 5);
+    --novi-swatch-cochineal-fg: oklch(18% 0.02 5);
+    --novi-swatch-mauve: oklch(76% 0.075 315);
+    --novi-swatch-mauve-fg: oklch(18% 0.02 315);
+    --novi-swatch-greige: oklch(76% 0.018 80);
+    --novi-swatch-greige-fg: oklch(18% 0.02 80);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -101,6 +133,22 @@
       --novi-color-warning-fg: oklch(18% 0.02 65);
       --novi-color-danger: oklch(74% 0.14 27);
       --novi-color-danger-fg: oklch(18% 0.02 27);
+      --novi-swatch-indigo: oklch(76% 0.075 255);
+      --novi-swatch-indigo-fg: oklch(18% 0.02 255);
+      --novi-swatch-peacock: oklch(76% 0.075 200);
+      --novi-swatch-peacock-fg: oklch(18% 0.02 200);
+      --novi-swatch-sage: oklch(76% 0.075 148);
+      --novi-swatch-sage-fg: oklch(18% 0.02 148);
+      --novi-swatch-saffron: oklch(76% 0.075 78);
+      --novi-swatch-saffron-fg: oklch(18% 0.02 78);
+      --novi-swatch-madder: oklch(76% 0.075 28);
+      --novi-swatch-madder-fg: oklch(18% 0.02 28);
+      --novi-swatch-cochineal: oklch(76% 0.075 5);
+      --novi-swatch-cochineal-fg: oklch(18% 0.02 5);
+      --novi-swatch-mauve: oklch(76% 0.075 315);
+      --novi-swatch-mauve-fg: oklch(18% 0.02 315);
+      --novi-swatch-greige: oklch(76% 0.018 80);
+      --novi-swatch-greige-fg: oklch(18% 0.02 80);
     }
   }
 

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

@@ -20,7 +20,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     textarea: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     inputWrapper: string;
   }>;
 }, {
@@ -38,7 +38,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     textarea: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     inputWrapper: string;
   }>;
 }, {
@@ -56,7 +56,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     textarea: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     inputWrapper: string;
   }>;
 }, {

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

@@ -10,7 +10,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
   color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {
@@ -26,7 +26,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
   color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {
@@ -42,7 +42,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
   color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
     root: string;
   }>;
-  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
     root: string;
   }>;
 }, {

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

@@ -1 +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"}
+{"version":3,"file":"toast.styles.d.mts","names":[],"sources":["../../src/toast/toast.styles.ts"],"mappings":";;;;;;;;cAmEa,yCAAW;;IAvBmB;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;;IATF;;;IASE;;;;;;;;;;;;KAoBjC,kBAAkB,kBAAkB"}

package/dist/toast/toast.styles.mjs

@@ -2,7 +2,12 @@ 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(" "),
+	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)]",
+		"pl-[calc(env(safe-area-inset-left,0px)+0.75rem)]",
+		"pr-[calc(env(safe-area-inset-right,0px)+0.75rem)]"
+	].join(" "),
 	root: [
 		"text-[var(--novi-color-fg)]",
 		"flex items-start gap-3 px-4 py-3 outline-none",

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

@@ -1 +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"}
+{"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    // 横向きではノッチが左右に来る。上端だけ避けても通知はノッチに隠れる（FR-13）\n    'pl-[calc(env(safe-area-inset-left,0px)+0.75rem)]',\n    'pr-[calc(env(safe-area-inset-right,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;EACN;EACA;EAEA;EACA;CACF,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/dist/tokens/color-set.mjs

@@ -0,0 +1,111 @@
+//#region src/tokens/color-set.ts
+/**
+* Textile Dyes のトーン。
+*
+* light の L50 は掃引で決めた値。**律速は常に Peacock を `subtle` 面に置いたとき**で、
+* L52 では余裕が 0.1 を切り、L54 以上はどの C でも 4.5:1 に届かない。
+* L50 なら 4.93 で、丸めや将来の微調整に耐える余裕が残る。
+* Raster（L44）との差は 6 ポイントで、トーンはモデルの識別子として機能する。
+*/
+const TACTILE_TONE = {
+	light: {
+		l: 50,
+		c: .08
+	},
+	dark: {
+		l: 76,
+		c: .075
+	}
+};
+/**
+* 8色。全色が布を染めてきた染料の実名を持つ。
+* 紫・青緑・ピンクは Raster に無く、ここにある。入れる色と入れない色でモデルの性格を作る。
+*/
+const COLOR_DEFS = [
+	{
+		id: "indigo",
+		name: "Indigo",
+		hue: 255,
+		pair: "saffron",
+		description: "藍。デニムを染めた染料。既定色"
+	},
+	{
+		id: "peacock",
+		name: "Peacock",
+		hue: 200,
+		pair: "madder",
+		description: "孔雀の青緑。羽の見る角度の色"
+	},
+	{
+		id: "sage",
+		name: "Sage",
+		hue: 148,
+		pair: "cochineal",
+		description: "セージの葉。くすみグリーンの定番"
+	},
+	{
+		id: "saffron",
+		name: "Saffron",
+		hue: 78,
+		pair: "indigo",
+		description: "サフラン。染料にも香辛料にもなる黄"
+	},
+	{
+		id: "madder",
+		name: "Madder",
+		hue: 28,
+		pair: "peacock",
+		description: "茜。人類最古級の赤い染料"
+	},
+	{
+		id: "cochineal",
+		name: "Cochineal",
+		hue: 5,
+		pair: "sage",
+		description: "コチニール。紅を生む染料"
+	},
+	{
+		id: "mauve",
+		name: "Mauve",
+		hue: 315,
+		pair: "sage",
+		description: "モーブ。1856年、史上初の合成染料"
+	},
+	{
+		id: "greige",
+		name: "Greige",
+		hue: 80,
+		pair: "indigo",
+		description: "生機。染める前の布の色。無彩枠",
+		fixedC: .022,
+		fixedCDark: .018
+	}
+];
+/** `data-novi-color` 未指定・未知の名前のときに効く色（FR-05） */
+const DEFAULT_COLOR_ID = "indigo";
+const oklch = (l, c, hue) => `oklch(${l}% ${c} ${hue})`;
+/** primary の面に乗る文字。染料の hue をわずかに含ませて、地と同じ空気にする。 */
+const primaryFgFor = (hue, scheme) => scheme === "light" ? oklch(98.5, .004, hue) : oklch(18, .02, hue);
+/**
+* 定義とトーンから実際の CSS 値を組み立てる。
+* テストが不正な色を作って検査を確かめるのにも使う（AC-03-4 相当）。
+*/
+function buildColorEntry(def, tone = TACTILE_TONE) {
+	return {
+		...def,
+		light: {
+			primary: oklch(tone.light.l, def.fixedC ?? tone.light.c, def.hue),
+			primaryFg: primaryFgFor(def.hue, "light")
+		},
+		dark: {
+			primary: oklch(tone.dark.l, def.fixedCDark ?? tone.dark.c, def.hue),
+			primaryFg: primaryFgFor(def.hue, "dark")
+		}
+	};
+}
+/** Textile Dyes の全8色（事前計算済み） */
+const TACTILE_COLOR_SET = COLOR_DEFS.map((def) => buildColorEntry(def));
+//#endregion
+export { DEFAULT_COLOR_ID, TACTILE_COLOR_SET, TACTILE_TONE, buildColorEntry };
+
+//# sourceMappingURL=color-set.mjs.map

package/dist/tokens/color-set.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-set.mjs","names":[],"sources":["../../src/tokens/color-set.ts"],"sourcesContent":["/**\n * Tactile のカラーセット「Textile Dyes」とトーン。\n *\n * **specs/06-tones-and-colors が唯一の真実**で、ここはその写し。\n * 構造は Raster の `color-set.ts` と同じだが、値は独立している（ADR-C01）:\n * トーンは明るく淡く（L54/C0.080）、色は染料の名を持ち、hue は Raster と1つも重ならない。\n *\n * Raster との最大の違いは **`neutralsFollowHue`**。Tactile は染まる生地なので、\n * 中立色まで選んだ染料の hue を帯びる（FR-06）。Raster は染まらない紙で chroma 0 のまま。\n */\n\nexport interface TactileTone {\n  /** OKLCH の L（% 単位の数値。54 = 54%） */\n  l: number\n  /** OKLCH の C */\n  c: number\n}\n\n/**\n * Textile Dyes のトーン。\n *\n * light の L50 は掃引で決めた値。**律速は常に Peacock を `subtle` 面に置いたとき**で、\n * L52 では余裕が 0.1 を切り、L54 以上はどの C でも 4.5:1 に届かない。\n * L50 なら 4.93 で、丸めや将来の微調整に耐える余裕が残る。\n * Raster（L44）との差は 6 ポイントで、トーンはモデルの識別子として機能する。\n */\nexport const TACTILE_TONE: { light: TactileTone; dark: TactileTone } = {\n  light: { l: 50, c: 0.08 },\n  dark: { l: 76, c: 0.075 },\n}\n\nexport interface TactileColorDef {\n  /** `data-novi-color` に指定する名前（kebab-case） */\n  id: string\n  /** 表示名 */\n  name: string\n  /** OKLCH の hue（度） */\n  hue: number\n  /** バイカラーの相方。`--novi-color-secondary` にこの色の値が入る */\n  pair: string\n  /** 1行の出自。docs / llms / MCP が使う */\n  description: string\n  /** 無彩枠だけが持つ C の例外値（light） */\n  fixedC?: number\n  /** 同・dark */\n  fixedCDark?: number\n}\n\n/**\n * 8色。全色が布を染めてきた染料の実名を持つ。\n * 紫・青緑・ピンクは Raster に無く、ここにある。入れる色と入れない色でモデルの性格を作る。\n */\nconst COLOR_DEFS: readonly TactileColorDef[] = [\n  {\n    id: 'indigo',\n    name: 'Indigo',\n    hue: 255,\n    pair: 'saffron',\n    description: '藍。デニムを染めた染料。既定色',\n  },\n  {\n    id: 'peacock',\n    name: 'Peacock',\n    hue: 200,\n    pair: 'madder',\n    description: '孔雀の青緑。羽の見る角度の色',\n  },\n  {\n    id: 'sage',\n    name: 'Sage',\n    hue: 148,\n    pair: 'cochineal',\n    description: 'セージの葉。くすみグリーンの定番',\n  },\n  {\n    id: 'saffron',\n    name: 'Saffron',\n    hue: 78,\n    pair: 'indigo',\n    description: 'サフラン。染料にも香辛料にもなる黄',\n  },\n  {\n    id: 'madder',\n    name: 'Madder',\n    hue: 28,\n    pair: 'peacock',\n    description: '茜。人類最古級の赤い染料',\n  },\n  {\n    id: 'cochineal',\n    name: 'Cochineal',\n    hue: 5,\n    pair: 'sage',\n    description: 'コチニール。紅を生む染料',\n  },\n  {\n    id: 'mauve',\n    name: 'Mauve',\n    hue: 315,\n    pair: 'sage',\n    description: 'モーブ。1856年、史上初の合成染料',\n  },\n  {\n    id: 'greige',\n    name: 'Greige',\n    hue: 80,\n    pair: 'indigo',\n    description: '生機。染める前の布の色。無彩枠',\n    fixedC: 0.022,\n    fixedCDark: 0.018,\n  },\n]\n\n/** `data-novi-color` 未指定・未知の名前のときに効く色（FR-05） */\nexport const DEFAULT_COLOR_ID = 'indigo'\n\n/**\n * OKLCH → 線形 sRGB。\n * 生成器（Node 実行）からも呼ぶため、依存なしで持つ（Raster と同じ理由）。\n */\nfunction toLinearSrgb(l: number, c: number, hue: number): [number, number, number] {\n  const rad = (hue * Math.PI) / 180\n  const a = c * Math.cos(rad)\n  const b = c * Math.sin(rad)\n\n  const lc = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3\n  const mc = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3\n  const sc = (l - 0.0894841775 * a - 1.291485548 * b) ** 3\n\n  return [\n    4.0767416621 * lc - 3.3077115913 * mc + 0.2309699292 * sc,\n    -1.2684380046 * lc + 2.6097574011 * mc - 0.3413193965 * sc,\n    -0.0041960863 * lc - 0.7034186147 * mc + 1.707614701 * sc,\n  ]\n}\n\n/** その OKLCH が sRGB で再現できるか。トーンの天井はコントラストではなくこれが決める。 */\nexport function inSrgbGamut(l: number, c: number, hue: number): boolean {\n  const tolerance = 0.0005\n  return toLinearSrgb(l, c, hue).every((v) => v >= -tolerance && v <= 1 + tolerance)\n}\n\n/**\n * 染まる中立色の配合（FR-06）。\n *\n * L は固定で、chroma と hue だけが染料に従う。`--novi-color-*` の全中立トークンを\n * この表から生成するため、色を選ぶと地の色ごと変わる。\n * chroma は 0.004〜0.02 の帯域に収める（ADR-T6）。\n */\nconst NEUTRAL_RECIPE = {\n  light: {\n    bg: { l: 97.6, c: 0.006 },\n    subtle: { l: 94.5, c: 0.009 },\n    fg: { l: 22, c: 0.015 },\n    muted: { l: 47, c: 0.012 },\n    border: { l: 90, c: 0.011 },\n    'border-strong': { l: 63, c: 0.013 },\n    default: { l: 94.5, c: 0.009 },\n    'default-fg': { l: 22, c: 0.015 },\n  },\n  // dark は「持ち上がるほど明るい」。bg < subtle < surface の順を崩さないこと\n  dark: {\n    bg: { l: 14, c: 0.012 },\n    subtle: { l: 20, c: 0.014 },\n    fg: { l: 94, c: 0.008 },\n    muted: { l: 70, c: 0.012 },\n    border: { l: 30, c: 0.015 },\n    'border-strong': { l: 55, c: 0.014 },\n    default: { l: 20, c: 0.014 },\n    'default-fg': { l: 94, c: 0.008 },\n  },\n} as const\n\n/** 浮く面（シート・メニュー）の色。地より明るくして「持ち上がり」を作る（AC-06-3）。 */\nconst SURFACE_RECIPE = {\n  light: { l: 99.3, c: 0.004 },\n  // dark で 24% なのは bg(14%) との背景色差 1.2:1 を満たす下限。\n  // 暗所では影がほとんど見えないため、浮きは明度差で伝えるしかない（AC-06-3）\n  dark: { l: 24, c: 0.014 },\n} as const\n\nexport type Scheme = 'light' | 'dark'\n\nconst oklch = (l: number, c: number, hue: number) => `oklch(${l}% ${c} ${hue})`\n\n/** その染料で染めた中立色一式を作る。 */\nexport function neutralsFor(hue: number, scheme: Scheme): Record<string, string> {\n  const recipe = NEUTRAL_RECIPE[scheme]\n  const out: Record<string, string> = {}\n  for (const [name, { l, c }] of Object.entries(recipe)) {\n    out[name] = oklch(l, c, hue)\n  }\n  // overlay は背景を覆う暗幕。alpha を持つため個別に組む\n  out.overlay = scheme === 'light' ? `oklch(20% 0.01 ${hue} / 0.45)` : `oklch(8% 0.01 ${hue} / 0.6)`\n  return out\n}\n\n/** 浮く面の色。`--novi-color-surface` として出力する。 */\nexport function surfaceFor(hue: number, scheme: Scheme): string {\n  const { l, c } = SURFACE_RECIPE[scheme]\n  return oklch(l, c, hue)\n}\n\nexport interface TactileColorSchemeValues {\n  primary: string\n  primaryFg: string\n}\n\nexport interface TactileColorEntry extends TactileColorDef {\n  light: TactileColorSchemeValues\n  dark: TactileColorSchemeValues\n}\n\n/** primary の面に乗る文字。染料の hue をわずかに含ませて、地と同じ空気にする。 */\nconst primaryFgFor = (hue: number, scheme: Scheme) =>\n  scheme === 'light' ? oklch(98.5, 0.004, hue) : oklch(18, 0.02, hue)\n\n/**\n * 定義とトーンから実際の CSS 値を組み立てる。\n * テストが不正な色を作って検査を確かめるのにも使う（AC-03-4 相当）。\n */\nexport function buildColorEntry(\n  def: TactileColorDef,\n  tone: { light: TactileTone; dark: TactileTone } = TACTILE_TONE,\n): TactileColorEntry {\n  return {\n    ...def,\n    light: {\n      primary: oklch(tone.light.l, def.fixedC ?? tone.light.c, def.hue),\n      primaryFg: primaryFgFor(def.hue, 'light'),\n    },\n    dark: {\n      primary: oklch(tone.dark.l, def.fixedCDark ?? tone.dark.c, def.hue),\n      primaryFg: primaryFgFor(def.hue, 'dark'),\n    },\n  }\n}\n\n/** Textile Dyes の全8色（事前計算済み） */\nexport const TACTILE_COLOR_SET: readonly TactileColorEntry[] = COLOR_DEFS.map((def) =>\n  buildColorEntry(def),\n)\n\n/** @throws セットに無い id（相方の参照ミスは実行時ではなくここで死ぬべき） */\nexport function colorById(id: string): TactileColorEntry {\n  const entry = TACTILE_COLOR_SET.find((c) => c.id === id)\n  if (entry === undefined) throw new Error(`Textile Dyes に無い色です: ${id}`)\n  return entry\n}\n"],"mappings":";;;;;;;;;AA0BA,MAAa,eAA0D;CACrE,OAAO;EAAE,GAAG;EAAI,GAAG;CAAK;CACxB,MAAM;EAAE,GAAG;EAAI,GAAG;CAAM;AAC1B;;;;;AAuBA,MAAM,aAAyC;CAC7C;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;EACb,QAAQ;EACR,YAAY;CACd;AACF;;AAGA,MAAa,mBAAmB;AAqEhC,MAAM,SAAS,GAAW,GAAW,QAAgB,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI;;AA+B7E,MAAM,gBAAgB,KAAa,WACjC,WAAW,UAAU,MAAM,MAAM,MAAO,GAAG,IAAI,MAAM,IAAI,KAAM,GAAG;;;;;AAMpE,SAAgB,gBACd,KACA,OAAkD,cAC/B;CACnB,OAAO;EACL,GAAG;EACH,OAAO;GACL,SAAS,MAAM,KAAK,MAAM,GAAG,IAAI,UAAU,KAAK,MAAM,GAAG,IAAI,GAAG;GAChE,WAAW,aAAa,IAAI,KAAK,OAAO;EAC1C;EACA,MAAM;GACJ,SAAS,MAAM,KAAK,KAAK,GAAG,IAAI,cAAc,KAAK,KAAK,GAAG,IAAI,GAAG;GAClE,WAAW,aAAa,IAAI,KAAK,MAAM;EACzC;CACF;AACF;;AAGA,MAAa,oBAAkD,WAAW,KAAK,QAC7E,gBAAgB,GAAG,CACrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novi-ui/tactile",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Novi UI theme 2 — touch-first. Bottom sheets, generous tap targets, soft elevation.",
   "license": "MIT",
   "repository": {
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "tailwind-variants": "^3.3.1",
-    "@novi-ui/core": "0.1.1"
+    "@novi-ui/core": "0.2.0"
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "^13.0.3",
@@ -52,7 +52,7 @@
     "tsdown": "0.22.14",
     "typescript": "6.0.3",
     "vitest": "4.1.11",
-    "@novi-ui/raster": "0.3.0"
+    "@novi-ui/raster": "0.4.0"
   },
   "scripts": {
     "build": "tsdown && node scripts/generate-theme-css.mjs",