@novi-ui/flatlay 0.1.0

package/dist/checkbox/index.d.mts

@@ -0,0 +1,3 @@
+import { Checkbox, CheckboxGroup } from "./checkbox.mjs";
+import { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles } from "./checkbox.styles.mjs";
+export { Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, checkboxGroupStyles, checkboxStyles };

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

@@ -0,0 +1,30 @@
+import { ColorPickerProps, NoviColorOption } from "@novi-ui/core";
+//#region src/color-picker/color-picker.d.ts
+/**
+ * Flatlay のカラーセット（Stationery）。**利用側が色値を書かなくてよい**ように既定で並ぶ。
+ *
+ * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも
+ * Raster では Print Inks、Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。
+ *
+ * **赤が無いのは欠落ではなく決定**。校正の朱書きはエラーの道具なので danger に予約している。
+ */
+declare const COLOR_OPTIONS: readonly NoviColorOption[];
+/**
+ * テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。
+ *
+ * Flatlay では**方眼に貼った色見本**として並ぶ。升目の罫線が見本の枠を兼ね、
+ * 選ぶと升目の地が紙からインクに反転する。
+ *
+ * @example
+ * // 色 id を書かない。未指定ならテーマの既定色（Fieldbook）から始まる
+ * 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":";;;;;;;;;;cAqBa,wBAAwB;;;;;;;;;;;;;;;;iBAmBrB,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,100 @@
+"use client";
+import { DEFAULT_COLOR_ID, FLATLAY_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
+/**
+* Flatlay のカラーセット（Stationery）。**利用側が色値を書かなくてよい**ように既定で並ぶ。
+*
+* ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも
+* Raster では Print Inks、Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。
+*
+* **赤が無いのは欠落ではなく決定**。校正の朱書きはエラーの道具なので danger に予約している。
+*/
+const COLOR_OPTIONS = FLATLAY_COLOR_SET.map(({ id, name, description }) => ({
+	id,
+	name,
+	description
+}));
+/**
+* テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。
+*
+* Flatlay では**方眼に貼った色見本**として並ぶ。升目の罫線が見本の枠を兼ね、
+* 選ぶと升目の地が紙からインクに反転する。
+*
+* @example
+* // 色 id を書かない。未指定ならテーマの既定色（Fieldbook）から始まる
+* 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", {
+							"aria-hidden": "true",
+							"data-slot": "indicator",
+							className: s.indicator({ class: classNames?.indicator }),
+							children: "✓"
+						})
+					}), 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, FLATLAY_COLOR_SET } from '../tokens/color-set'\nimport { colorPickerStyles } from './color-picker.styles'\n\n/**\n * Flatlay のカラーセット（Stationery）。**利用側が色値を書かなくてよい**ように既定で並ぶ。\n *\n * ここが `colors` prop の既定値になる。同じ `<ColorPicker />` でも\n * Raster では Print Inks、Tactile では Textile Dyes が出る。色はモデルの持ち物で、共通ではない。\n *\n * **赤が無いのは欠落ではなく決定**。校正の朱書きはエラーの道具なので danger に予約している。\n */\nexport const COLOR_OPTIONS: readonly NoviColorOption[] = FLATLAY_COLOR_SET.map(\n  ({ id, name, description }) => ({ id, name, description }),\n)\n\n/**\n * テーマのカラーセットから1色を選ぶ。選んだ値を `data-novi-color` に渡すと配色が変わる。\n *\n * Flatlay では**方眼に貼った色見本**として並ぶ。升目の罫線が見本の枠を兼ね、\n * 選ぶと升目の地が紙からインクに反転する。\n *\n * @example\n * // 色 id を書かない。未指定ならテーマの既定色（Fieldbook）から始まる\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                      aria-hidden=\"true\"\n                      data-slot=\"indicator\"\n                      className={s.indicator({ class: classNames?.indicator })}\n                    >\n                      ✓\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":";;;;;;;;;;;;;;AAqBA,MAAa,gBAA4C,kBAAkB,KACxE,EAAE,IAAI,MAAM,mBAAmB;CAAE;CAAI;CAAM;AAAY,EAC1D;;;;;;;;;;;;;;;;AAiBA,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,eAAY;OACZ,aAAU;OACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;OACxD,UAAA;MAEK,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,GA3CH,MAAM,EA2CH,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,91 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/color-picker/color-picker.styles.d.ts
+/**
+ * ColorPicker のスタイル定義。
+ *
+ * @example
+ * import { colorPickerStyles } from '@novi-ui/flatlay'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'grid-cols-2' } })
+ */
+declare const colorPickerStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    swatch: string;
+    indicator: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  description: string;
+  errorMessage: string;
+  /**
+   * 方眼。上辺と左辺だけを持ち、右辺と下辺は各升目が引く。
+   * こうすると隣り合う升で線が二重にならず、1px の格子になる。
+   */
+  list: string;
+  item: string;
+  /**
+   * 色そのものを見せる面。
+   *
+   * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
+   * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
+   */
+  swatch: string;
+  indicator: string;
+  itemLabel: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    swatch: string;
+    indicator: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  description: string;
+  errorMessage: string;
+  /**
+   * 方眼。上辺と左辺だけを持ち、右辺と下辺は各升目が引く。
+   * こうすると隣り合う升で線が二重にならず、1px の格子になる。
+   */
+  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;
+    indicator: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  description: string;
+  errorMessage: string;
+  /**
+   * 方眼。上辺と左辺だけを持ち、右辺と下辺は各升目が引く。
+   * こうすると隣り合う升で線が二重にならず、1px の格子になる。
+   */
+  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":";;;;;;;;;;;cA8Ea,+CAAiB;;IAfa;IAAmB;;;;;;;;;;;;;;;;;;;;;;;;IAAnB;IAAmB;;;;;;;;;;;;;;;;;;;;;;;;IAAnB;IAAmB;;;;;;;;;;;;;;;;;;;;;;;KAqBlD,wBAAwB,kBAAkB"}

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

@@ -0,0 +1,79 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/color-picker/color-picker.styles.ts
+/**
+* Flatlay のカラー選択は**方眼に貼った色見本**。
+*
+* 両テーマは色面を隙間を空けて並べるが、ここは隙間を持たない。列は罫線で仕切られ、
+* 見本は升目の中に収まる。方眼紙に絵の具を試し塗りした形で、
+* 「階層は罫線でしか作れない」という原理がそのまま見本帳の形になる。
+*
+* **升目の罫線が見本の枠を兼ねる**ので、スウォッチ自身は枠を持たない。
+* 二重に線を引くと升目が太って方眼に見えなくなる。
+*/
+const slots = {
+	root: ["flex flex-col gap-2", disabledState].join(" "),
+	label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
+	description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,
+	errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`,
+	/**
+	* 方眼。上辺と左辺だけを持ち、右辺と下辺は各升目が引く。
+	* こうすると隣り合う升で線が二重にならず、1px の格子になる。
+	*/
+	list: ["grid grid-cols-4 w-fit", "border-t border-l border-[var(--novi-color-border-strong)]"].join(" "),
+	item: [
+		"inline-flex flex-col items-center gap-1",
+		"p-1.5",
+		"border-r border-b border-[var(--novi-color-border-strong)]",
+		"cursor-pointer data-[disabled]:cursor-default",
+		"bg-[var(--novi-color-bg)] data-[selected]:bg-[var(--novi-color-fg)]",
+		"transition-[background-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		focusRing
+	].join(" "),
+	/**
+	* 色そのものを見せる面。
+	*
+	* **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、
+	* カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。
+	*/
+	swatch: "inline-grid place-items-center rounded-[var(--novi-radius-none)]",
+	indicator: `leading-none ${mono}`,
+	itemLabel: [
+		"text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
+		"group-data-[selected]:text-[var(--novi-color-bg)]",
+		mono
+	].join(" ")
+};
+/**
+* ColorPicker のスタイル定義。
+*
+* @example
+* import { colorPickerStyles } from '@novi-ui/flatlay'
+* import { tv } from 'tailwind-variants'
+*
+* const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'grid-cols-2' } })
+*/
+const colorPickerStyles = tv({
+	slots,
+	variants: { size: {
+		sm: {
+			swatch: "size-6",
+			indicator: "text-[length:var(--novi-text-xs)]"
+		},
+		md: {
+			swatch: "size-7",
+			indicator: "text-[length:var(--novi-text-sm)]"
+		},
+		lg: {
+			swatch: "size-9",
+			indicator: "text-[length:var(--novi-text-base)]"
+		}
+	} },
+	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 { mono } from '../styles/mono'\n\n/**\n * Flatlay のカラー選択は**方眼に貼った色見本**。\n *\n * 両テーマは色面を隙間を空けて並べるが、ここは隙間を持たない。列は罫線で仕切られ、\n * 見本は升目の中に収まる。方眼紙に絵の具を試し塗りした形で、\n * 「階層は罫線でしか作れない」という原理がそのまま見本帳の形になる。\n *\n * **升目の罫線が見本の枠を兼ねる**ので、スウォッチ自身は枠を持たない。\n * 二重に線を引くと升目が太って方眼に見えなくなる。\n */\nconst slots = {\n  root: ['flex flex-col gap-2', disabledState].join(' '),\n  // 項目名は等幅（Input / CheckboxGroup と同じ扱い・ADR-F7）\n  label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n  description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n  errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`,\n  /**\n   * 方眼。上辺と左辺だけを持ち、右辺と下辺は各升目が引く。\n   * こうすると隣り合う升で線が二重にならず、1px の格子になる。\n   */\n  list: [\n    'grid grid-cols-4 w-fit',\n    'border-t border-l border-[var(--novi-color-border-strong)]',\n  ].join(' '),\n  item: [\n    'inline-flex flex-col items-center gap-1',\n    'p-1.5',\n    'border-r border-b border-[var(--novi-color-border-strong)]',\n    'cursor-pointer data-[disabled]:cursor-default',\n    // 選択は**枠の反転**。升目の地が紙からインクに入れ替わり、見本が台紙に載る\n    'bg-[var(--novi-color-bg)] data-[selected]:bg-[var(--novi-color-fg)]',\n    'transition-[background-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    focusRing,\n  ].join(' '),\n  /**\n   * 色そのものを見せる面。\n   *\n   * **色は生成 CSS の `--novi-swatch-*` が解決する。** 実装が色値を持たないので、\n   * カラーセットが増えてもここは変わらず、light / dark の追従も生成 CSS 任せになる。\n   */\n  swatch: 'inline-grid place-items-center rounded-[var(--novi-radius-none)]',\n  // 色だけに頼らず印でも示す（WCAG 1.4.1）。印は Checkbox と同じ等幅の文字\n  indicator: `leading-none ${mono}`,\n  itemLabel: [\n    'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n    'group-data-[selected]:text-[var(--novi-color-bg)]',\n    mono,\n  ].join(' '),\n} satisfies SlotMap<typeof colorPickerSlots, (typeof colorPickerRequiredSlots)[number]>\n\n/** md の見本は 28px 角。Button の高さ・Switch のトラック幅と同じ寸法で揃える。 */\nconst size: VariantMap<NoviSize, { swatch: string; indicator: string }> = {\n  sm: { swatch: 'size-6', indicator: 'text-[length:var(--novi-text-xs)]' },\n  md: { swatch: 'size-7', indicator: 'text-[length:var(--novi-text-sm)]' },\n  lg: { swatch: 'size-9', indicator: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * ColorPicker のスタイル定義。\n *\n * @example\n * import { colorPickerStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myPicker = tv({ extend: colorPickerStyles, slots: { list: 'grid-cols-2' } })\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":";;;;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM,CAAC,uBAAuB,aAAa,CAAC,CAAC,KAAK,GAAG;CAErD,OAAO,iEAAiE;CACxE,aAAa,oEAAoE;CACjF,cAAc,qEAAqE;;;;;CAKnF,MAAM,CACJ,0BACA,4DACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;EACJ;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;;;;;;;CAOV,QAAQ;CAER,WAAW,gBAAgB;CAC3B,WAAW;EACT;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AAkBA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU,EAAE;EAhBZ,IAAI;GAAE,QAAQ;GAAU,WAAW;EAAoC;EACvE,IAAI;GAAE,QAAQ;GAAU,WAAW;EAAoC;EACvE,IAAI;GAAE,QAAQ;GAAU,WAAW;EAAsC;CAc7D,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 };