@novi-ui/flatlay 0.1.0

package/dist/progress/progress.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { progressStyles } from "./progress.styles.mjs";
+import { Label, ProgressBar } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/progress/progress.tsx
+/**
+* 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。
+*
+* Flatlay の進捗は**引かれていく罫線**で、面が伸びるのではなく線が引かれる。
+* `prefers-reduced-motion` が有効なときは不確定表示の点滅を止める。
+*
+* @example
+* <Progress label="アップロード中" value={62} showValueLabel />
+*/
+function Progress({ size, color, label, value, minValue = 0, maxValue = 100, showValueLabel, className, classNames, id }) {
+	const isIndeterminate = value === void 0;
+	const s = progressStyles({
+		size,
+		color,
+		isIndeterminate
+	});
+	return /* @__PURE__ */ jsx(ProgressBar, {
+		id,
+		value,
+		minValue,
+		maxValue,
+		isIndeterminate,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [(label !== void 0 || showValueLabel === true) && /* @__PURE__ */ jsxs("span", {
+			className: "flex items-baseline justify-between gap-2",
+			children: [label !== void 0 && /* @__PURE__ */ jsx(Label, {
+				"data-slot": "label",
+				className: s.label({ class: classNames?.label }),
+				children: label
+			}), showValueLabel === true && !isIndeterminate && /* @__PURE__ */ jsx("span", {
+				"data-slot": "valueLabel",
+				className: s.valueLabel({ class: classNames?.valueLabel }),
+				children: valueText
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "track",
+			className: s.track({ class: classNames?.track }),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "indicator",
+				className: s.indicator({ class: classNames?.indicator }),
+				style: isIndeterminate ? void 0 : { width: `${percentage ?? 0}%` }
+			})
+		})] })
+	});
+}
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=progress.mjs.map

package/dist/progress/progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["'use client'\n\nimport type { ProgressProps } from '@novi-ui/core'\nimport { Label, ProgressBar } from 'react-aria-components'\nimport { progressStyles } from './progress.styles'\n\n/**\n * 進捗の表示。`value` を省略すると不確定（indeterminate）表示になる。\n *\n * Flatlay の進捗は**引かれていく罫線**で、面が伸びるのではなく線が引かれる。\n * `prefers-reduced-motion` が有効なときは不確定表示の点滅を止める。\n *\n * @example\n * <Progress label=\"アップロード中\" value={62} showValueLabel />\n */\nexport function Progress({\n  size,\n  color,\n  label,\n  value,\n  minValue = 0,\n  maxValue = 100,\n  showValueLabel,\n  className,\n  classNames,\n  id,\n}: ProgressProps) {\n  const isIndeterminate = value === undefined\n  const s = progressStyles({ size, color, isIndeterminate })\n\n  return (\n    <ProgressBar\n      id={id}\n      value={value}\n      minValue={minValue}\n      maxValue={maxValue}\n      isIndeterminate={isIndeterminate}\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      {({ percentage, valueText }) => (\n        <>\n          {(label !== undefined || showValueLabel === true) && (\n            <span className=\"flex items-baseline justify-between gap-2\">\n              {label !== undefined && (\n                <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n                  {label}\n                </Label>\n              )}\n              {showValueLabel === true && !isIndeterminate && (\n                <span\n                  data-slot=\"valueLabel\"\n                  className={s.valueLabel({ class: classNames?.valueLabel })}\n                >\n                  {valueText}\n                </span>\n              )}\n            </span>\n          )}\n\n          <span data-slot=\"track\" className={s.track({ class: classNames?.track })}>\n            <span\n              data-slot=\"indicator\"\n              className={s.indicator({ class: classNames?.indicator })}\n              style={isIndeterminate ? undefined : { width: `${percentage ?? 0}%` }}\n            />\n          </span>\n        </>\n      )}\n    </ProgressBar>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,SAAS,EACvB,MACA,OACA,OACA,OACA,WAAW,GACX,WAAW,KACX,gBACA,WACA,YACA,MACgB;CAChB,MAAM,kBAAkB,UAAU,KAAA;CAClC,MAAM,IAAI,eAAe;EAAE;EAAM;EAAO;CAAgB,CAAC;CAEzD,OACE,oBAAC,aAAD;EACM;EACG;EACG;EACA;EACO;EACjB,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAExD,WAAA,EAAE,YAAY,gBACd,qBAAA,UAAA,EAAA,UAAA,EACI,UAAU,KAAA,KAAa,mBAAmB,SAC1C,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA,GAER,mBAAmB,QAAQ,CAAC,mBAC3B,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;IAExD,UAAA;GACG,CAAA,CAEJ;EAGR,CAAA,GAAA,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACrE,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;IACvD,OAAO,kBAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,cAAc,EAAE,GAAG;GACrE,CAAA;EACG,CAAA,CACN,EAAA,CAAA;CAEO,CAAA;AAEjB"}

package/dist/progress/progress.styles.d.mts

@@ -0,0 +1,100 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/progress/progress.styles.d.ts
+/**
+ * Progress のスタイル定義。
+ *
+ * @example
+ * const myProgress = tv({ extend: progressStyles, slots: { track: 'h-1' } })
+ */
+declare const progressStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    track: string;
+  }>;
+  /**
+   * 不確定表示。両テーマは細い帯を translate で往復させるが、Flatlay は
+   * transform を持たない（FR-11）。線を全幅で引いたまま濃さを脈打たせる。
+   * 「進んでいるが量は分からない」を、動かさずに示す唯一の手段。
+   */
+  isIndeterminate: {
+    true: {
+      indicator: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  label: string;
+  /**
+   * 引かれた罫線そのもの。地に `subtle` を使わないのは、2px の帯では L の差が
+   * 見えず線が消えるため。罫線の色を使うことで「まだ引かれていない部分」も
+   * 罫線として読める。
+   */
+  track: string;
+  indicator: string;
+  valueLabel: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    track: string;
+  }>;
+  /**
+   * 不確定表示。両テーマは細い帯を translate で往復させるが、Flatlay は
+   * transform を持たない（FR-11）。線を全幅で引いたまま濃さを脈打たせる。
+   * 「進んでいるが量は分からない」を、動かさずに示す唯一の手段。
+   */
+  isIndeterminate: {
+    true: {
+      indicator: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  label: string;
+  /**
+   * 引かれた罫線そのもの。地に `subtle` を使わないのは、2px の帯では L の差が
+   * 見えず線が消えるため。罫線の色を使うことで「まだ引かれていない部分」も
+   * 罫線として読める。
+   */
+  track: string;
+  indicator: string;
+  valueLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    track: string;
+  }>;
+  /**
+   * 不確定表示。両テーマは細い帯を translate で往復させるが、Flatlay は
+   * transform を持たない（FR-11）。線を全幅で引いたまま濃さを脈打たせる。
+   * 「進んでいるが量は分からない」を、動かさずに示す唯一の手段。
+   */
+  isIndeterminate: {
+    true: {
+      indicator: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  label: string;
+  /**
+   * 引かれた罫線そのもの。地に `subtle` を使わないのは、2px の帯では L の差が
+   * 見えず線が消えるため。罫線の色を使うことで「まだ引かれていない部分」も
+   * 罫線として読める。
+   */
+  track: string;
+  indicator: string;
+  valueLabel: string;
+}>>;
+type ProgressStyleProps = Parameters<typeof progressStyles>[0];
+//#endregion
+export { ProgressStyleProps, progressStyles };
+//# sourceMappingURL=progress.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.styles.d.mts","names":[],"sources":["../../src/progress/progress.styles.ts"],"mappings":";;;;;;;;cAuDa,4CAAc;;IAtBgB;;;IAUD;;;;;;;;;;;;;;;;;;;;;;;;;;IAVC;;;IAUD;;;;;;;;;;;;;;;;;;;;;;;;;;IAVC;;;IAUD;;;;;;;;;;;;;;;;;;;;;;;;;KA8B9B,qBAAqB,kBAAkB"}

package/dist/progress/progress.styles.mjs

@@ -0,0 +1,65 @@
+import { mono, monoNumeric } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/progress/progress.styles.ts
+const slots = {
+	root: "flex flex-col gap-1.5 w-full",
+	label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
+	/**
+	* 引かれた罫線そのもの。地に `subtle` を使わないのは、2px の帯では L の差が
+	* 見えず線が消えるため。罫線の色を使うことで「まだ引かれていない部分」も
+	* 罫線として読める。
+	*/
+	track: [
+		"w-full overflow-hidden",
+		"bg-[var(--novi-color-border)]",
+		"rounded-[var(--novi-radius-none)]"
+	].join(" "),
+	indicator: [
+		"h-full bg-[var(--c)]",
+		"transition-[width]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
+	].join(" "),
+	valueLabel: `text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] ${monoNumeric}`
+};
+/**
+* Progress のスタイル定義。
+*
+* @example
+* const myProgress = tv({ extend: progressStyles, slots: { track: 'h-1' } })
+*/
+const progressStyles = tv({
+	slots,
+	variants: {
+		color: {
+			default: { root: "[--c:var(--novi-color-fg)]" },
+			primary: { root: "[--c:var(--novi-color-primary)]" },
+			secondary: { root: "[--c:var(--novi-color-secondary)]" },
+			success: { root: "[--c:var(--novi-color-success)]" },
+			warning: { root: "[--c:var(--novi-color-warning)]" },
+			danger: { root: "[--c:var(--novi-color-danger)]" }
+		},
+		size: {
+			sm: { track: "h-px" },
+			md: { track: "h-0.5" },
+			lg: { track: "h-1" }
+		},
+		/**
+		* 不確定表示。両テーマは細い帯を translate で往復させるが、Flatlay は
+		* transform を持たない（FR-11）。線を全幅で引いたまま濃さを脈打たせる。
+		* 「進んでいるが量は分からない」を、動かさずに示す唯一の手段。
+		*/
+		isIndeterminate: {
+			true: { indicator: "w-full motion-safe:animate-pulse" },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		size: "md",
+		isIndeterminate: false
+	}
+});
+//#endregion
+export { progressStyles };
+
+//# sourceMappingURL=progress.styles.mjs.map

package/dist/progress/progress.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.styles.mjs","names":[],"sources":["../../src/progress/progress.styles.ts"],"sourcesContent":["import type {\n  NoviColor,\n  NoviSize,\n  progressRequiredSlots,\n  progressSlots,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono, monoNumeric } from '../styles/mono'\n\nconst slots = {\n  root: 'flex flex-col gap-1.5 w-full',\n  label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n  /**\n   * 引かれた罫線そのもの。地に `subtle` を使わないのは、2px の帯では L の差が\n   * 見えず線が消えるため。罫線の色を使うことで「まだ引かれていない部分」も\n   * 罫線として読める。\n   */\n  track: [\n    'w-full overflow-hidden',\n    'bg-[var(--novi-color-border)]',\n    'rounded-[var(--novi-radius-none)]',\n  ].join(' '),\n  // 伸びるのは幅だけ。transform は持たない（FR-11）\n  indicator: [\n    'h-full bg-[var(--c)]',\n    'transition-[width]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n  ].join(' '),\n  valueLabel: `text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)] ${monoNumeric}`,\n} satisfies SlotMap<typeof progressSlots, (typeof progressRequiredSlots)[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)]' },\n  warning: { root: '[--c:var(--novi-color-warning)]' },\n  danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\n/** 罫線の太さ。面ではなく線なので、両テーマ（2/4/6px）より1段細い。 */\nconst size: VariantMap<NoviSize, { track: string }> = {\n  sm: { track: 'h-px' },\n  md: { track: 'h-0.5' },\n  lg: { track: 'h-1' },\n}\n\n/**\n * Progress のスタイル定義。\n *\n * @example\n * const myProgress = tv({ extend: progressStyles, slots: { track: 'h-1' } })\n */\nexport const progressStyles = tv({\n  slots,\n  variants: {\n    color,\n    size,\n    /**\n     * 不確定表示。両テーマは細い帯を translate で往復させるが、Flatlay は\n     * transform を持たない（FR-11）。線を全幅で引いたまま濃さを脈打たせる。\n     * 「進んでいるが量は分からない」を、動かさずに示す唯一の手段。\n     */\n    isIndeterminate: {\n      true: { indicator: 'w-full motion-safe:animate-pulse' },\n      false: {},\n    },\n  },\n  defaultVariants: { color: 'default', size: 'md', isIndeterminate: false },\n})\n\nexport type ProgressStyleProps = Parameters<typeof progressStyles>[0]\n"],"mappings":";;;AAWA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO,iEAAiE;;;;;;CAMxE,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;EACT;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,YAAY,oEAAoE;AAClF;;;;;;;AAwBA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EACR;GAxBF,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAmB/C;EACA;GAfF,IAAI,EAAE,OAAO,OAAO;GACpB,IAAI,EAAE,OAAO,QAAQ;GACrB,IAAI,EAAE,OAAO,MAAM;EAajB;;;;;;EAMA,iBAAiB;GACf,MAAM,EAAE,WAAW,mCAAmC;GACtD,OAAO,CAAC;EACV;CACF;CACA,iBAAiB;EAAE,OAAO;EAAW,MAAM;EAAM,iBAAiB;CAAM;AAC1E,CAAC"}

package/dist/radio/index.d.mts

@@ -0,0 +1,3 @@
+import { Radio, RadioGroup } from "./radio.mjs";
+import { RadioGroupStyleProps, RadioStyleProps, radioGroupStyles, radioStyles } from "./radio.styles.mjs";
+export { Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, radioGroupStyles, radioStyles };

package/dist/radio/radio.d.mts

@@ -0,0 +1,25 @@
+import { RadioGroupProps, RadioProps } from "@novi-ui/core";
+//#region src/radio/radio.d.ts
+/**
+ * ラジオボタン。単体では使わず、必ず RadioGroup の中に置く。
+ *
+ * Flatlay では**円**で描く。Checkbox の 2px 角と形が違うことが
+ * 「1つだけ」と「複数」の唯一の手がかりになる。
+ *
+ * @example
+ * <Radio value="express">速達</Radio>
+ */
+declare function Radio({ value, size, color, isDisabled, description, children, className, classNames, id }: RadioProps): import("react").JSX.Element;
+/**
+ * ラジオボタンのグループ。矢印キーで項目間を移動できる。
+ *
+ * @example
+ * <RadioGroup label="配送方法" value={method} onChange={setMethod}>
+ *   <Radio value="standard">通常</Radio>
+ *   <Radio value="express">速達</Radio>
+ * </RadioGroup>
+ */
+declare function RadioGroup({ label, description, errorMessage, name, value, defaultValue, onChange, orientation, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }: RadioGroupProps): import("react").JSX.Element;
+//#endregion
+export { Radio, RadioGroup };
+//# sourceMappingURL=radio.d.mts.map

package/dist/radio/radio.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.mts","names":[],"sources":["../../src/radio/radio.tsx"],"mappings":";;;;;;;;;;;iBAqBgB,QACd,OACA,MACA,OACA,YACA,aACA,UACA,WACA,YACA,MACC,6BAAU,IAAA;;;;;;;;;;iBAuDG,aACd,OACA,aACA,cACA,MACA,OACA,cACA,UACA,aACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACC,kCAAe,IAAA"}

package/dist/radio/radio.mjs

@@ -0,0 +1,99 @@
+"use client";
+import { radioGroupStyles, radioStyles } from "./radio.styles.mjs";
+import { FieldError, Label, Radio, RadioGroup, Text } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/radio/radio.tsx
+/**
+* ラジオボタン。単体では使わず、必ず RadioGroup の中に置く。
+*
+* Flatlay では**円**で描く。Checkbox の 2px 角と形が違うことが
+* 「1つだけ」と「複数」の唯一の手がかりになる。
+*
+* @example
+* <Radio value="express">速達</Radio>
+*/
+function Radio$1({ value, size, color, isDisabled, description, children, className, classNames, id }) {
+	const s = radioStyles({
+		size,
+		color
+	});
+	return /* @__PURE__ */ jsx(Radio, {
+		id,
+		value,
+		isDisabled,
+		"data-slot": "root",
+		className: `group ${s.root({ class: [className, classNames?.root] })}`,
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "control",
+			className: s.control({ class: classNames?.control }),
+			children: isSelected && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "indicator",
+				className: s.indicator({ class: classNames?.indicator })
+			})
+		}), children !== void 0 && /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "label",
+				className: s.label({ class: classNames?.label }),
+				children
+			}), description !== void 0 && /* @__PURE__ */ jsx("span", {
+				"data-slot": "description",
+				className: s.description({ class: classNames?.description }),
+				children: description
+			})]
+		})] })
+	});
+}
+/**
+* ラジオボタンのグループ。矢印キーで項目間を移動できる。
+*
+* @example
+* <RadioGroup label="配送方法" value={method} onChange={setMethod}>
+*   <Radio value="standard">通常</Radio>
+*   <Radio value="express">速達</Radio>
+* </RadioGroup>
+*/
+function RadioGroup$1({ label, description, errorMessage, name, value, defaultValue, onChange, orientation, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }) {
+	const s = radioGroupStyles({ orientation });
+	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
+			}),
+			description !== void 0 && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				"data-slot": "description",
+				className: s.description({ class: classNames?.description }),
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				"data-slot": "errorMessage",
+				className: s.errorMessage({ class: classNames?.errorMessage }),
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup };
+
+//# sourceMappingURL=radio.mjs.map

package/dist/radio/radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.mjs","names":["Radio","RACRadio","RadioGroup","RACRadioGroup"],"sources":["../../src/radio/radio.tsx"],"sourcesContent":["'use client'\n\nimport type { RadioGroupProps, RadioProps } 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 { radioGroupStyles, radioStyles } from './radio.styles'\n\n/**\n * ラジオボタン。単体では使わず、必ず RadioGroup の中に置く。\n *\n * Flatlay では**円**で描く。Checkbox の 2px 角と形が違うことが\n * 「1つだけ」と「複数」の唯一の手がかりになる。\n *\n * @example\n * <Radio value=\"express\">速達</Radio>\n */\nexport function Radio({\n  value,\n  size,\n  color,\n  isDisabled,\n  description,\n  children,\n  className,\n  classNames,\n  id,\n}: RadioProps) {\n  const s = radioStyles({ size, color })\n\n  return (\n    <RACRadio\n      id={id}\n      value={value}\n      isDisabled={isDisabled}\n      data-slot=\"root\"\n      // control 側から選択状態を参照するために group を付ける\n      className={`group ${s.root({ class: [className, classNames?.root] })}`}\n    >\n      {({ isSelected }) => (\n        <>\n          <span data-slot=\"control\" className={s.control({ class: classNames?.control })}>\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          {children !== undefined && (\n            <span className=\"flex flex-col gap-0.5\">\n              <span data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n                {children}\n              </span>\n              {description !== undefined && (\n                <span\n                  data-slot=\"description\"\n                  className={s.description({ class: classNames?.description })}\n                >\n                  {description}\n                </span>\n              )}\n            </span>\n          )}\n        </>\n      )}\n    </RACRadio>\n  )\n}\n\n/**\n * ラジオボタンのグループ。矢印キーで項目間を移動できる。\n *\n * @example\n * <RadioGroup label=\"配送方法\" value={method} onChange={setMethod}>\n *   <Radio value=\"standard\">通常</Radio>\n *   <Radio value=\"express\">速達</Radio>\n * </RadioGroup>\n */\nexport function RadioGroup({\n  label,\n  description,\n  errorMessage,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  orientation,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  children,\n  className,\n  classNames,\n  id,\n}: RadioGroupProps) {\n  const s = radioGroupStyles({ orientation })\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        {children}\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      <FieldError\n        data-slot=\"errorMessage\"\n        className={s.errorMessage({ class: classNames?.errorMessage })}\n      >\n        {errorMessage}\n      </FieldError>\n    </RACRadioGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAqBA,SAAgBA,QAAM,EACpB,OACA,MACA,OACA,YACA,aACA,UACA,WACA,YACA,MACa;CACb,MAAM,IAAI,YAAY;EAAE;EAAM;CAAM,CAAC;CAErC,OACE,oBAACC,OAAD;EACM;EACG;EACK;EACZ,aAAU;EAEV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAEjE,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,aAAU;GAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;GAE1E,UAAA,cACC,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;GACxD,CAAA;EAEC,CAAA,GAEL,aAAa,KAAA,KACZ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACpE;GACG,CAAA,GACL,gBAAgB,KAAA,KACf,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA,CAEJ;EAER,CAAA,CAAA,EAAA,CAAA;CAEI,CAAA;AAEd;;;;;;;;;;AAWA,SAAgBC,aAAW,EACzB,OACA,aACA,cACA,MACA,OACA,cACA,UACA,aACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACkB;CAClB,MAAM,IAAI,iBAAiB,EAAE,YAAY,CAAC;CAE1C,OACE,qBAACC,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;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;GAGR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EACC;;AAEnB"}

package/dist/radio/radio.styles.d.mts

@@ -0,0 +1,114 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/radio/radio.styles.d.ts
+/**
+ * Radio のスタイル定義。
+ *
+ * @example
+ * import { radioStyles } from '@novi-ui/flatlay'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myRadio = tv({ extend: radioStyles, slots: { label: 'font-medium' } })
+ */
+declare const radioStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    indicator: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    indicator: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    indicator: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}>>;
+/**
+ * RadioGroup のスタイル定義。
+ *
+ * @example
+ * const myGroup = tv({ extend: radioGroupStyles, slots: { list: 'gap-4' } })
+ */
+declare const radioGroupStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type RadioStyleProps = Parameters<typeof radioStyles>[0];
+type RadioGroupStyleProps = Parameters<typeof radioGroupStyles>[0];
+//#endregion
+export { RadioGroupStyleProps, RadioStyleProps, radioGroupStyles, radioStyles };
+//# sourceMappingURL=radio.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.d.mts","names":[],"sources":["../../src/radio/radio.styles.ts"],"mappings":";;;;;;;;;;;cAoEa,yCAAW;;IAzBmB;;;IAUC;IAAmB;IAAe;;;;;;;;;;IAVnC;;;IAUC;IAAmB;IAAe;;;;;;;;;;IAVnC;;;IAUC;IAAmB;IAAe;;;;;;;;;;;;;;;cAoCjE,8CAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWjB,kBAAkB,kBAAkB;KACpC,uBAAuB,kBAAkB"}

package/dist/radio/radio.styles.mjs

@@ -0,0 +1,103 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/radio/radio.styles.ts
+/**
+* Flatlay の Radio は**円**。書類の直角（radius 0/2/2/4）に対する数少ない例外。
+*
+* ここで角を守ると Checkbox と同じ形になり、「複数選べる」のか
+* 「1つだけ」なのかが形から読めなくなる。角丸の規律より**形の弁別**が優先する。
+* Avatar と並ぶ `radius-full` の例外で、どちらも意味を形が担っている。
+*
+* 印が Checkbox のような文字ではなく塗りの点なのは、円の中に字を置くと
+* 小さすぎて読めないため。ここだけは記号ではなく面が状態を持つ。
+*/
+const slots = {
+	root: [
+		"inline-flex items-start gap-2",
+		"cursor-pointer",
+		disabledState
+	].join(" "),
+	control: [
+		"shrink-0 inline-grid place-items-center",
+		"border border-[var(--novi-color-border-strong)]",
+		"rounded-[var(--novi-radius-full)]",
+		"bg-[var(--novi-color-bg)]",
+		"group-data-[selected]:border-[var(--c)]",
+		"group-data-[invalid]:border-[var(--novi-color-danger)]",
+		"transition-[border-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		focusRing
+	].join(" "),
+	indicator: "rounded-[var(--novi-radius-full)] bg-[var(--c)]",
+	label: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]",
+	description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`
+};
+/**
+* Radio のスタイル定義。
+*
+* @example
+* import { radioStyles } from '@novi-ui/flatlay'
+* import { tv } from 'tailwind-variants'
+*
+* const myRadio = tv({ extend: radioStyles, slots: { label: 'font-medium' } })
+*/
+const radioStyles = tv({
+	slots,
+	variants: {
+		color: {
+			default: { root: "[--c:var(--novi-color-fg)]" },
+			primary: { root: "[--c:var(--novi-color-primary)]" },
+			secondary: { root: "[--c:var(--novi-color-secondary)]" },
+			success: { root: "[--c:var(--novi-color-success)]" },
+			warning: { root: "[--c:var(--novi-color-warning)]" },
+			danger: { root: "[--c:var(--novi-color-danger)]" }
+		},
+		size: {
+			sm: {
+				control: "size-3.5",
+				indicator: "size-1.5",
+				label: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				control: "size-4",
+				indicator: "size-2",
+				label: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				control: "size-5",
+				indicator: "size-2.5",
+				label: "text-[length:var(--novi-text-base)]"
+			}
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		size: "md"
+	}
+});
+const groupSlots = {
+	root: "flex flex-col gap-2",
+	label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
+	list: "flex flex-col gap-2",
+	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}`
+};
+/**
+* RadioGroup のスタイル定義。
+*
+* @example
+* const myGroup = tv({ extend: radioGroupStyles, slots: { list: 'gap-4' } })
+*/
+const radioGroupStyles = tv({
+	slots: groupSlots,
+	variants: { orientation: {
+		vertical: { list: "flex-col gap-2" },
+		horizontal: { list: "flex-row gap-4 flex-wrap" }
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+export { radioGroupStyles, radioStyles };
+
+//# sourceMappingURL=radio.styles.mjs.map

package/dist/radio/radio.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.mjs","names":[],"sources":["../../src/radio/radio.styles.ts"],"sourcesContent":["import type {\n  NoviColor,\n  NoviSize,\n  radioGroupRequiredSlots,\n  radioGroupSlots,\n  radioRequiredSlots,\n  radioSlots,\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 の Radio は**円**。書類の直角（radius 0/2/2/4）に対する数少ない例外。\n *\n * ここで角を守ると Checkbox と同じ形になり、「複数選べる」のか\n * 「1つだけ」なのかが形から読めなくなる。角丸の規律より**形の弁別**が優先する。\n * Avatar と並ぶ `radius-full` の例外で、どちらも意味を形が担っている。\n *\n * 印が Checkbox のような文字ではなく塗りの点なのは、円の中に字を置くと\n * 小さすぎて読めないため。ここだけは記号ではなく面が状態を持つ。\n */\nconst slots = {\n  root: ['inline-flex items-start gap-2', 'cursor-pointer', disabledState].join(' '),\n  control: [\n    'shrink-0 inline-grid place-items-center',\n    'border border-[var(--novi-color-border-strong)]',\n    'rounded-[var(--novi-radius-full)]',\n    'bg-[var(--novi-color-bg)]',\n    'group-data-[selected]:border-[var(--c)]',\n    'group-data-[invalid]:border-[var(--novi-color-danger)]',\n    'transition-[border-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    focusRing,\n  ].join(' '),\n  // 内側の点で示す。枠ごと塗り潰すと Checkbox の選択と同じ見え方になる\n  indicator: 'rounded-[var(--novi-radius-full)] bg-[var(--c)]',\n  label: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n  description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n} satisfies SlotMap<typeof radioSlots, (typeof radioRequiredSlots)[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)]' },\n  warning: { root: '[--c:var(--novi-color-warning)]' },\n  danger: { root: '[--c:var(--novi-color-danger)]' },\n}\n\n/** Checkbox と同じ 14 / 16 / 20px。並べたときに列が揃わないと帳票として読めない。 */\nconst size: VariantMap<NoviSize, { control: string; indicator: string; label: string }> = {\n  sm: { control: 'size-3.5', indicator: 'size-1.5', label: 'text-[length:var(--novi-text-sm)]' },\n  md: { control: 'size-4', indicator: 'size-2', label: 'text-[length:var(--novi-text-base)]' },\n  lg: { control: 'size-5', indicator: 'size-2.5', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Radio のスタイル定義。\n *\n * @example\n * import { radioStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myRadio = tv({ extend: radioStyles, slots: { label: 'font-medium' } })\n */\nexport const radioStyles = tv({\n  slots,\n  variants: { color, size },\n  defaultVariants: { color: 'default', size: 'md' },\n})\n\nconst groupSlots = {\n  root: 'flex flex-col gap-2',\n  // 項目名は等幅（Input / CheckboxGroup と同じ扱い・ADR-F7）\n  label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n  list: 'flex flex-col gap-2',\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} satisfies SlotMap<typeof radioGroupSlots, (typeof radioGroupRequiredSlots)[number]>\n\n/**\n * RadioGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: radioGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const radioGroupStyles = tv({\n  slots: groupSlots,\n  variants: {\n    orientation: {\n      vertical: { list: 'flex-col gap-2' },\n      horizontal: { list: 'flex-row gap-4 flex-wrap' },\n    },\n  },\n  defaultVariants: { orientation: 'vertical' },\n})\n\nexport type RadioStyleProps = Parameters<typeof radioStyles>[0]\nexport type RadioGroupStyleProps = Parameters<typeof radioGroupStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;AAwBA,MAAM,QAAQ;CACZ,MAAM;EAAC;EAAiC;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CACjF,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CACX,OAAO;CACP,aAAa,oEAAoE;AACnF;;;;;;;;;;AA2BA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU;EAAE;GA1BZ,SAAS,EAAE,MAAM,6BAA6B;GAC9C,SAAS,EAAE,MAAM,kCAAkC;GACnD,WAAW,EAAE,MAAM,oCAAoC;GACvD,SAAS,EAAE,MAAM,kCAAkC;GACnD,SAAS,EAAE,MAAM,kCAAkC;GACnD,QAAQ,EAAE,MAAM,iCAAiC;EAqBrC;EAAO;GAhBnB,IAAI;IAAE,SAAS;IAAY,WAAW;IAAY,OAAO;GAAoC;GAC7F,IAAI;IAAE,SAAS;IAAU,WAAW;IAAU,OAAO;GAAsC;GAC3F,IAAI;IAAE,SAAS;IAAU,WAAW;IAAY,OAAO;GAAsC;EAc1E;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC;AAED,MAAM,aAAa;CACjB,MAAM;CAEN,OAAO,iEAAiE;CACxE,MAAM;CACN,aAAa,oEAAoE;CACjF,cAAc,qEAAqE;AACrF;;;;;;;AAQA,MAAa,mBAAmB,GAAG;CACjC,OAAO;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,iBAAiB;EACnC,YAAY,EAAE,MAAM,2BAA2B;CACjD,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}

package/dist/select/index.d.mts

@@ -0,0 +1,3 @@
+import { Select, SelectItem, SelectItemProps } from "./select.mjs";
+import { SelectStyleProps, selectStyles } from "./select.styles.mjs";
+export { Select, SelectItem, type SelectItemProps, type SelectStyleProps, selectStyles };