@novi-ui/raster 0.3.0 → 0.4.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/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
+/**
+ * Raster のカラーセット（Print Inks）。**利用側が色値を書かなくてよい**ように既定で並ぶ。
+ *
+ * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも
+ * Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。
+ */
+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 { RASTER_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
+/**
+* Raster のカラーセット（Print Inks）。**利用側が色値を書かなくてよい**ように既定で並ぶ。
+*
+* ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも
+* Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。
+*/
+const COLOR_OPTIONS = RASTER_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 = "ink", 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, RASTER_COLOR_SET } from '../tokens/color-set'\nimport { colorPickerStyles } from './color-picker.styles'\n\n/**\n * Raster のカラーセット（Print Inks）。**利用側が色値を書かなくてよい**ように既定で並ぶ。\n *\n * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも\n * Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。\n */\nexport const COLOR_OPTIONS: readonly NoviColorOption[] = RASTER_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,iBAAiB,KACvE,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,eAAA,OACA,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/raster'
+ * 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":";;;;;;;;;;;cAgEa,+CAAiB;;IAfa;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;;IAAA;;;;;;;;;;;;;;;;;;;KAqB/B,wBAAwB,kBAAkB"}

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

@@ -0,0 +1,60 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/color-picker/color-picker.styles.ts
+/**
+* Raster のカラー選択は**見本帳**。インクの試し刷りを方眼に並べた形にする。
+*
+* スウォッチが角丸の小さい矩形なのは Raster の語彙そのもので、
+* 円にすると Radio と見分けがつかなくなる（あちらは「1つ選ぶ」の形）。
+*/
+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-xs)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]",
+	list: "flex flex-wrap items-start gap-2",
+	item: [
+		"inline-flex flex-col items-center gap-1",
+		"cursor-pointer",
+		"data-[disabled]:cursor-default"
+	].join(" "),
+	/**
+	* 色そのものを見せる面。
+	*
+	* **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
+	* カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
+	*/
+	swatch: [
+		"inline-grid place-items-center",
+		"border border-[var(--novi-color-border-strong)]",
+		"rounded-[var(--novi-radius-sm)]",
+		"transition-[border-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"group-data-[selected]:border-[var(--novi-color-fg)]",
+		focusRing
+	].join(" "),
+	indicator: "leading-none",
+	itemLabel: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]"
+};
+/**
+* ColorPicker のスタイル定義。
+*
+* @example
+* import { colorPickerStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'gap-4' } })
+*/
+const colorPickerStyles = tv({
+	slots,
+	variants: { size: {
+		sm: { swatch: "size-6" },
+		md: { swatch: "size-8" },
+		lg: { swatch: "size-10" }
+	} },
+	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'\n\n/**\n * Raster のカラー選択は**見本帳**。インクの試し刷りを方眼に並べた形にする。\n *\n * スウォッチが角丸の小さい矩形なのは Raster の語彙そのもので、\n * 円にすると Radio と見分けがつかなくなる（あちらは「1つ選ぶ」の形）。\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-xs)] text-[var(--novi-color-muted)]',\n  errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n  // 見本帳なので折り返して並べる。縦1列にすると色同士を比べられない\n  list: 'flex flex-wrap items-start gap-2',\n  item: [\n    'inline-flex flex-col items-center gap-1',\n    'cursor-pointer',\n    'data-[disabled]:cursor-default',\n  ].join(' '),\n  /**\n   * 色そのものを見せる面。\n   *\n   * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、\n   * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。\n   */\n  swatch: [\n    'inline-grid place-items-center',\n    'border border-[var(--novi-color-border-strong)]',\n    'rounded-[var(--novi-radius-sm)]',\n    'transition-[border-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    // 選択は枠でも示す。色面だけだと「どれが選択中か」が色の違いに埋もれる\n    'group-data-[selected]:border-[var(--novi-color-fg)]',\n    focusRing,\n  ].join(' '),\n  // 色だけに頼らず印でも示す（WCAG 1.4.1）\n  indicator: 'leading-none',\n  itemLabel: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n} satisfies SlotMap<typeof colorPickerSlots, (typeof colorPickerRequiredSlots)[number]>\n\nconst size: VariantMap<NoviSize, { swatch: string }> = {\n  sm: { swatch: 'size-6' },\n  md: { swatch: 'size-8' },\n  lg: { swatch: 'size-10' },\n}\n\n/**\n * ColorPicker のスタイル定義。\n *\n * @example\n * import { colorPickerStyles } from '@novi-ui/raster'\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":";;;;;;;;;AAgBA,MAAM,QAAQ;CACZ,MAAM,CAAC,uBAAuB,aAAa,CAAC,CAAC,KAAK,GAAG;CACrD,OAAO;CACP,aAAa;CACb,cAAc;CAEd,MAAM;CACN,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;;;;;;;CAOV,QAAQ;EACN;EACA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,WAAW;AACb;;;;;;;;;;AAiBA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU,EAAE;EAhBZ,IAAI,EAAE,QAAQ,SAAS;EACvB,IAAI,EAAE,QAAQ,SAAS;EACvB,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/menu/menu.styles.d.mts

@@ -11,9 +11,9 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
       item?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
       popover?: import("tailwind-variants").ClassValue;
-      itemLabel?: import("tailwind-variants").ClassValue;
       itemDescription?: import("tailwind-variants").ClassValue;
       itemShortcut?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;
@@ -26,9 +26,9 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
       item?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
       popover?: import("tailwind-variants").ClassValue;
-      itemLabel?: import("tailwind-variants").ClassValue;
       itemDescription?: import("tailwind-variants").ClassValue;
       itemShortcut?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;
@@ -52,9 +52,9 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
       item?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
+      itemLabel?: import("tailwind-variants").ClassValue;
       separator?: import("tailwind-variants").ClassValue;
       popover?: import("tailwind-variants").ClassValue;
-      itemLabel?: import("tailwind-variants").ClassValue;
       itemDescription?: import("tailwind-variants").ClassValue;
       itemShortcut?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;

package/dist/raster.css

@@ -43,6 +43,22 @@
     --novi-color-warning-fg: oklch(99% 0 0);
     --novi-color-danger: oklch(50% 0.19 27);
     --novi-color-danger-fg: oklch(99% 0 0);
+    --novi-swatch-ink: oklch(44% 0.09 268);
+    --novi-swatch-ink-fg: oklch(99% 0 0);
+    --novi-swatch-prussian: oklch(44% 0.09 235);
+    --novi-swatch-prussian-fg: oklch(99% 0 0);
+    --novi-swatch-forest: oklch(44% 0.09 160);
+    --novi-swatch-forest-fg: oklch(99% 0 0);
+    --novi-swatch-olive: oklch(44% 0.09 125);
+    --novi-swatch-olive-fg: oklch(99% 0 0);
+    --novi-swatch-ochre: oklch(44% 0.09 70);
+    --novi-swatch-ochre-fg: oklch(99% 0 0);
+    --novi-swatch-brick: oklch(44% 0.09 35);
+    --novi-swatch-brick-fg: oklch(99% 0 0);
+    --novi-swatch-bordeaux: oklch(44% 0.09 12);
+    --novi-swatch-bordeaux-fg: oklch(99% 0 0);
+    --novi-swatch-graphite: oklch(44% 0.02 270);
+    --novi-swatch-graphite-fg: oklch(99% 0 0);
   }
 
   [data-novi-scheme='dark'] {
@@ -65,6 +81,22 @@
     --novi-color-warning-fg: oklch(16% 0 0);
     --novi-color-danger: oklch(73% 0.16 27);
     --novi-color-danger-fg: oklch(16% 0 0);
+    --novi-swatch-ink: oklch(74% 0.09 268);
+    --novi-swatch-ink-fg: oklch(16% 0 0);
+    --novi-swatch-prussian: oklch(74% 0.09 235);
+    --novi-swatch-prussian-fg: oklch(16% 0 0);
+    --novi-swatch-forest: oklch(74% 0.09 160);
+    --novi-swatch-forest-fg: oklch(16% 0 0);
+    --novi-swatch-olive: oklch(74% 0.09 125);
+    --novi-swatch-olive-fg: oklch(16% 0 0);
+    --novi-swatch-ochre: oklch(74% 0.09 70);
+    --novi-swatch-ochre-fg: oklch(16% 0 0);
+    --novi-swatch-brick: oklch(74% 0.09 35);
+    --novi-swatch-brick-fg: oklch(16% 0 0);
+    --novi-swatch-bordeaux: oklch(74% 0.09 12);
+    --novi-swatch-bordeaux-fg: oklch(16% 0 0);
+    --novi-swatch-graphite: oklch(74% 0.017 270);
+    --novi-swatch-graphite-fg: oklch(16% 0 0);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -88,6 +120,22 @@
       --novi-color-warning-fg: oklch(16% 0 0);
       --novi-color-danger: oklch(73% 0.16 27);
       --novi-color-danger-fg: oklch(16% 0 0);
+      --novi-swatch-ink: oklch(74% 0.09 268);
+      --novi-swatch-ink-fg: oklch(16% 0 0);
+      --novi-swatch-prussian: oklch(74% 0.09 235);
+      --novi-swatch-prussian-fg: oklch(16% 0 0);
+      --novi-swatch-forest: oklch(74% 0.09 160);
+      --novi-swatch-forest-fg: oklch(16% 0 0);
+      --novi-swatch-olive: oklch(74% 0.09 125);
+      --novi-swatch-olive-fg: oklch(16% 0 0);
+      --novi-swatch-ochre: oklch(74% 0.09 70);
+      --novi-swatch-ochre-fg: oklch(16% 0 0);
+      --novi-swatch-brick: oklch(74% 0.09 35);
+      --novi-swatch-brick-fg: oklch(16% 0 0);
+      --novi-swatch-bordeaux: oklch(74% 0.09 12);
+      --novi-swatch-bordeaux-fg: oklch(16% 0 0);
+      --novi-swatch-graphite: oklch(74% 0.017 270);
+      --novi-swatch-graphite-fg: oklch(16% 0 0);
     }
   }
 

package/dist/raster.scoped.css

@@ -43,6 +43,22 @@
     --novi-color-warning-fg: oklch(99% 0 0);
     --novi-color-danger: oklch(50% 0.19 27);
     --novi-color-danger-fg: oklch(99% 0 0);
+    --novi-swatch-ink: oklch(44% 0.09 268);
+    --novi-swatch-ink-fg: oklch(99% 0 0);
+    --novi-swatch-prussian: oklch(44% 0.09 235);
+    --novi-swatch-prussian-fg: oklch(99% 0 0);
+    --novi-swatch-forest: oklch(44% 0.09 160);
+    --novi-swatch-forest-fg: oklch(99% 0 0);
+    --novi-swatch-olive: oklch(44% 0.09 125);
+    --novi-swatch-olive-fg: oklch(99% 0 0);
+    --novi-swatch-ochre: oklch(44% 0.09 70);
+    --novi-swatch-ochre-fg: oklch(99% 0 0);
+    --novi-swatch-brick: oklch(44% 0.09 35);
+    --novi-swatch-brick-fg: oklch(99% 0 0);
+    --novi-swatch-bordeaux: oklch(44% 0.09 12);
+    --novi-swatch-bordeaux-fg: oklch(99% 0 0);
+    --novi-swatch-graphite: oklch(44% 0.02 270);
+    --novi-swatch-graphite-fg: oklch(99% 0 0);
   }
 
   [data-novi-theme='raster'][data-novi-scheme='dark'] {
@@ -65,6 +81,22 @@
     --novi-color-warning-fg: oklch(16% 0 0);
     --novi-color-danger: oklch(73% 0.16 27);
     --novi-color-danger-fg: oklch(16% 0 0);
+    --novi-swatch-ink: oklch(74% 0.09 268);
+    --novi-swatch-ink-fg: oklch(16% 0 0);
+    --novi-swatch-prussian: oklch(74% 0.09 235);
+    --novi-swatch-prussian-fg: oklch(16% 0 0);
+    --novi-swatch-forest: oklch(74% 0.09 160);
+    --novi-swatch-forest-fg: oklch(16% 0 0);
+    --novi-swatch-olive: oklch(74% 0.09 125);
+    --novi-swatch-olive-fg: oklch(16% 0 0);
+    --novi-swatch-ochre: oklch(74% 0.09 70);
+    --novi-swatch-ochre-fg: oklch(16% 0 0);
+    --novi-swatch-brick: oklch(74% 0.09 35);
+    --novi-swatch-brick-fg: oklch(16% 0 0);
+    --novi-swatch-bordeaux: oklch(74% 0.09 12);
+    --novi-swatch-bordeaux-fg: oklch(16% 0 0);
+    --novi-swatch-graphite: oklch(74% 0.017 270);
+    --novi-swatch-graphite-fg: oklch(16% 0 0);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -88,6 +120,22 @@
       --novi-color-warning-fg: oklch(16% 0 0);
       --novi-color-danger: oklch(73% 0.16 27);
       --novi-color-danger-fg: oklch(16% 0 0);
+      --novi-swatch-ink: oklch(74% 0.09 268);
+      --novi-swatch-ink-fg: oklch(16% 0 0);
+      --novi-swatch-prussian: oklch(74% 0.09 235);
+      --novi-swatch-prussian-fg: oklch(16% 0 0);
+      --novi-swatch-forest: oklch(74% 0.09 160);
+      --novi-swatch-forest-fg: oklch(16% 0 0);
+      --novi-swatch-olive: oklch(74% 0.09 125);
+      --novi-swatch-olive-fg: oklch(16% 0 0);
+      --novi-swatch-ochre: oklch(74% 0.09 70);
+      --novi-swatch-ochre-fg: oklch(16% 0 0);
+      --novi-swatch-brick: oklch(74% 0.09 35);
+      --novi-swatch-brick-fg: oklch(16% 0 0);
+      --novi-swatch-bordeaux: oklch(74% 0.09 12);
+      --novi-swatch-bordeaux-fg: oklch(16% 0 0);
+      --novi-swatch-graphite: oklch(74% 0.017 270);
+      --novi-swatch-graphite-fg: oklch(16% 0 0);
     }
   }
 

package/dist/tokens/color-set.mjs

@@ -0,0 +1,106 @@
+//#region src/tokens/color-set.ts
+/**
+* Print Inks のトーン。
+* light の C 0.090 は、このセットでの色域上限 0.095（律速 Ochre）の 0.005 内側。
+*/
+const RASTER_TONE = {
+	light: {
+		l: 44,
+		c: .09
+	},
+	dark: {
+		l: 74,
+		c: .09
+	}
+};
+/**
+* 8色。全色が顔料・インクの実名を持つ。
+* 紫・青緑・ピンクは意図的に入れていない（Tactile のセット候補。入れない色で性格を作る）。
+*/
+const COLOR_DEFS = [
+	{
+		id: "ink",
+		name: "Ink",
+		hue: 268,
+		pair: "brick",
+		description: "万年筆の藍黒。書き物の色。既定色"
+	},
+	{
+		id: "prussian",
+		name: "Prussian",
+		hue: 235,
+		pair: "ochre",
+		description: "紺青。18世紀からある合成顔料の名"
+	},
+	{
+		id: "forest",
+		name: "Forest",
+		hue: 160,
+		pair: "ochre",
+		description: "深い常緑。製図インクの緑"
+	},
+	{
+		id: "olive",
+		name: "Olive",
+		hue: 125,
+		pair: "ink",
+		description: "オリーブドラブ。土に近い緑"
+	},
+	{
+		id: "ochre",
+		name: "Ochre",
+		hue: 70,
+		pair: "prussian",
+		description: "黄土。最古の顔料のひとつ"
+	},
+	{
+		id: "brick",
+		name: "Brick",
+		hue: 35,
+		pair: "ink",
+		description: "煉瓦の朱。スイスポスターの赤の末裔"
+	},
+	{
+		id: "bordeaux",
+		name: "Bordeaux",
+		hue: 12,
+		pair: "ochre",
+		description: "ワインの澱の赤"
+	},
+	{
+		id: "graphite",
+		name: "Graphite",
+		hue: 270,
+		pair: "brick",
+		description: "黒鉛。色を消すという選択肢",
+		fixedC: .02,
+		fixedCDark: .017
+	}
+];
+/** 文字色は地色と同じ値（bg light / bg dark）。面の上に地の色で書く、が Raster の約束。 */
+const PRIMARY_FG_LIGHT = "oklch(99% 0 0)";
+const PRIMARY_FG_DARK = "oklch(16% 0 0)";
+const oklch = (l, c, hue) => `oklch(${l}% ${c} ${hue})`;
+/**
+* 定義（hue と例外 C）とトーンから、実際の CSS 値を組み立てる。
+* テストが不正な色（域外の hue × C）を作って検査を確かめるのにも使う（AC-03-4）。
+*/
+function buildColorEntry(def, tone = RASTER_TONE) {
+	return {
+		...def,
+		light: {
+			primary: oklch(tone.light.l, def.fixedC ?? tone.light.c, def.hue),
+			primaryFg: PRIMARY_FG_LIGHT
+		},
+		dark: {
+			primary: oklch(tone.dark.l, def.fixedCDark ?? tone.dark.c, def.hue),
+			primaryFg: PRIMARY_FG_DARK
+		}
+	};
+}
+/** Print Inks の全8色（事前計算済み） */
+const RASTER_COLOR_SET = COLOR_DEFS.map((def) => buildColorEntry(def));
+//#endregion
+export { RASTER_COLOR_SET, RASTER_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 * Raster のカラーセット「Print Inks」とトーン。\n *\n * **specs/06-tones-and-colors が唯一の真実**で、ここはその写し。\n * 値を変えるときは spec を先に変える（Ask first — 全組み合わせの検査対象が変わるため）。\n *\n * トーン（L / C）はモデルが所有し、色は hue と名前だけを持つ（ADR-C01）。\n * 差し色は新しい色を作らず、同じセット内の別のインクを組む「2色刷り」（ADR-C03）。\n * 全値はここで事前計算し、生成器・テスト・IR が同じ計算結果を読む（ADR-C02）。\n */\n\nexport interface RasterTone {\n  /** OKLCH の L（% 単位の数値。44 = 44%） */\n  l: number\n  /** OKLCH の C */\n  c: number\n}\n\n/**\n * Print Inks のトーン。\n * light の C 0.090 は、このセットでの色域上限 0.095（律速 Ochre）の 0.005 内側。\n */\nexport const RASTER_TONE: { light: RasterTone; dark: RasterTone } = {\n  light: { l: 44, c: 0.09 },\n  dark: { l: 74, c: 0.09 },\n}\n\nexport interface RasterColorDef {\n  /** `data-novi-color` に指定する名前（kebab-case） */\n  id: string\n  /** 表示名 */\n  name: string\n  /** OKLCH の hue（度） */\n  hue: number\n  /** 2色刷りの相方。`--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 * 紫・青緑・ピンクは意図的に入れていない（Tactile のセット候補。入れない色で性格を作る）。\n */\nconst COLOR_DEFS: readonly RasterColorDef[] = [\n  {\n    id: 'ink',\n    name: 'Ink',\n    hue: 268,\n    pair: 'brick',\n    description: '万年筆の藍黒。書き物の色。既定色',\n  },\n  {\n    id: 'prussian',\n    name: 'Prussian',\n    hue: 235,\n    pair: 'ochre',\n    description: '紺青。18世紀からある合成顔料の名',\n  },\n  {\n    id: 'forest',\n    name: 'Forest',\n    hue: 160,\n    pair: 'ochre',\n    description: '深い常緑。製図インクの緑',\n  },\n  { id: 'olive', name: 'Olive', hue: 125, pair: 'ink', description: 'オリーブドラブ。土に近い緑' },\n  {\n    id: 'ochre',\n    name: 'Ochre',\n    hue: 70,\n    pair: 'prussian',\n    description: '黄土。最古の顔料のひとつ',\n  },\n  {\n    id: 'brick',\n    name: 'Brick',\n    hue: 35,\n    pair: 'ink',\n    description: '煉瓦の朱。スイスポスターの赤の末裔',\n  },\n  { id: 'bordeaux', name: 'Bordeaux', hue: 12, pair: 'ochre', description: 'ワインの澱の赤' },\n  {\n    id: 'graphite',\n    name: 'Graphite',\n    hue: 270,\n    pair: 'brick',\n    description: '黒鉛。色を消すという選択肢',\n    fixedC: 0.02,\n    fixedCDark: 0.017,\n  },\n]\n\n/** `data-novi-color` 未指定・未知の名前のときに効く色（FR-05） */\nexport const DEFAULT_COLOR_ID = 'ink'\n\n/**\n * OKLCH → 線形 sRGB。\n * core の testing にも同じ変換があるが、あちらは文字列 API でテスト専用。\n * ここは生成器（Node 実行）からも呼ぶため、依存なしで持つ。\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/**\n * その OKLCH が sRGB で再現できるか。\n *\n * トーンの天井はコントラストではなくこれが決める（暗く鮮やかな黄・青緑は sRGB に無い）。\n * 「表示はされるが実際は別の色に丸められている」を仕様上の合格にしないための検査。\n *\n * @param l 0〜1 の L（`parseOklch` の返り値と同じ単位）\n */\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\nexport interface RasterColorSchemeValues {\n  primary: string\n  primaryFg: string\n}\n\nexport interface RasterColorEntry extends RasterColorDef {\n  light: RasterColorSchemeValues\n  dark: RasterColorSchemeValues\n}\n\n/** 文字色は地色と同じ値（bg light / bg dark）。面の上に地の色で書く、が Raster の約束。 */\nconst PRIMARY_FG_LIGHT = 'oklch(99% 0 0)'\nconst PRIMARY_FG_DARK = 'oklch(16% 0 0)'\n\nconst oklch = (l: number, c: number, hue: number) => `oklch(${l}% ${c} ${hue})`\n\n/**\n * 定義（hue と例外 C）とトーンから、実際の CSS 値を組み立てる。\n * テストが不正な色（域外の hue × C）を作って検査を確かめるのにも使う（AC-03-4）。\n */\nexport function buildColorEntry(\n  def: RasterColorDef,\n  tone: { light: RasterTone; dark: RasterTone } = RASTER_TONE,\n): RasterColorEntry {\n  return {\n    ...def,\n    light: {\n      primary: oklch(tone.light.l, def.fixedC ?? tone.light.c, def.hue),\n      primaryFg: PRIMARY_FG_LIGHT,\n    },\n    dark: {\n      primary: oklch(tone.dark.l, def.fixedCDark ?? tone.dark.c, def.hue),\n      primaryFg: PRIMARY_FG_DARK,\n    },\n  }\n}\n\n/** Print Inks の全8色（事前計算済み） */\nexport const RASTER_COLOR_SET: readonly RasterColorEntry[] = COLOR_DEFS.map((def) =>\n  buildColorEntry(def),\n)\n\n/** @throws セットに無い id（相方の参照ミスは実行時ではなくここで死ぬべき） */\nexport function colorById(id: string): RasterColorEntry {\n  const entry = RASTER_COLOR_SET.find((c) => c.id === id)\n  if (entry === undefined) throw new Error(`Print Inks に無い色です: ${id}`)\n  return entry\n}\n"],"mappings":";;;;;AAsBA,MAAa,cAAuD;CAClE,OAAO;EAAE,GAAG;EAAI,GAAG;CAAK;CACxB,MAAM;EAAE,GAAG;EAAI,GAAG;CAAK;AACzB;;;;;AAuBA,MAAM,aAAwC;CAC5C;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;EAAE,IAAI;EAAS,MAAM;EAAS,KAAK;EAAK,MAAM;EAAO,aAAa;CAAgB;CAClF;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;CACf;CACA;EAAE,IAAI;EAAY,MAAM;EAAY,KAAK;EAAI,MAAM;EAAS,aAAa;CAAU;CACnF;EACE,IAAI;EACJ,MAAM;EACN,KAAK;EACL,MAAM;EACN,aAAa;EACb,QAAQ;EACR,YAAY;CACd;AACF;;AAkDA,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AAExB,MAAM,SAAS,GAAW,GAAW,QAAgB,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI;;;;;AAM7E,SAAgB,gBACd,KACA,OAAgD,aAC9B;CAClB,OAAO;EACL,GAAG;EACH,OAAO;GACL,SAAS,MAAM,KAAK,MAAM,GAAG,IAAI,UAAU,KAAK,MAAM,GAAG,IAAI,GAAG;GAChE,WAAW;EACb;EACA,MAAM;GACJ,SAAS,MAAM,KAAK,KAAK,GAAG,IAAI,cAAc,KAAK,KAAK,GAAG,IAAI,GAAG;GAClE,WAAW;EACb;CACF;AACF;;AAGA,MAAa,mBAAgD,WAAW,KAAK,QAC3E,gBAAgB,GAAG,CACrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novi-ui/raster",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Novi UI theme 1 — minimal / Swiss. Sharp corners, no shadows, hairline rules, restrained motion.",
   "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",
@@ -43,6 +43,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.2.4",
     "@vitest/coverage-v8": "^4.1.11",
+    "esbuild": "^0.25.0",
     "jsdom": "^30.0.1",
     "react": "^19.0.0",
     "react-aria-components": "^1.20.0",