@novi-ui/flatlay 0.1.0

package/dist/spinner/spinner.styles.d.mts

@@ -0,0 +1,46 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/spinner/spinner.styles.d.ts
+/**
+ * Spinner のスタイル定義。
+ *
+ * @example
+ * const mySpinner = tv({ extend: spinnerStyles, slots: { label: 'text-[var(--novi-color-fg)]' } })
+ */
+declare const spinnerStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    circle: string;
+  }>;
+}, {
+  root: string;
+  circle: string;
+  label: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    circle: string;
+  }>;
+}, {
+  root: string;
+  circle: string;
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    circle: string;
+  }>;
+}, {
+  root: string;
+  circle: string;
+  label: string;
+}>>;
+type SpinnerStyleProps = Parameters<typeof spinnerStyles>[0];
+//#endregion
+export { SpinnerStyleProps, spinnerStyles };
+//# sourceMappingURL=spinner.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.styles.d.mts","names":[],"sources":["../../src/spinner/spinner.styles.ts"],"mappings":";;;;;;;;cAgDa,2CAAa;;IArBiB;;;IASA;;;;;;;;IATA;;;IASA;;;;;;;;IATA;;;IASA;;;;;;;KAkB/B,oBAAoB,kBAAkB"}

package/dist/spinner/spinner.styles.mjs

@@ -0,0 +1,50 @@
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/spinner/spinner.styles.ts
+/**
+* Spinner は `transform`（`animate-spin`）を使う**唯一の例外**。
+*
+* Flatlay は動きで飾らないテーマだが、ここだけは規律の外に置いている。
+* 代替（点滅・バーの往復）は「処理中」であることの視認性か情報量で必ず劣り、
+* 待たされている人にとっては世界観よりも「動いていると分かること」が先だから。
+* 例外は `design-rules.data.mjs` にも登録済みで、両テーマと同じ判断。
+*
+* `prefers-reduced-motion` のときは回転を止める。
+*/
+const slots = {
+	root: "inline-flex items-center gap-2",
+	circle: "shrink-0 motion-safe:animate-spin text-[var(--c)]",
+	label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`
+};
+/**
+* Spinner のスタイル定義。
+*
+* @example
+* const mySpinner = tv({ extend: spinnerStyles, slots: { label: 'text-[var(--novi-color-fg)]' } })
+*/
+const spinnerStyles = 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: { circle: "size-4" },
+			md: { circle: "size-5" },
+			lg: { circle: "size-6" }
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		size: "md"
+	}
+});
+//#endregion
+export { spinnerStyles };
+
+//# sourceMappingURL=spinner.styles.mjs.map

package/dist/spinner/spinner.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.styles.mjs","names":[],"sources":["../../src/spinner/spinner.styles.ts"],"sourcesContent":["import type {\n  NoviColor,\n  NoviSize,\n  SlotMap,\n  spinnerRequiredSlots,\n  spinnerSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Spinner は `transform`（`animate-spin`）を使う**唯一の例外**。\n *\n * Flatlay は動きで飾らないテーマだが、ここだけは規律の外に置いている。\n * 代替（点滅・バーの往復）は「処理中」であることの視認性か情報量で必ず劣り、\n * 待たされている人にとっては世界観よりも「動いていると分かること」が先だから。\n * 例外は `design-rules.data.mjs` にも登録済みで、両テーマと同じ判断。\n *\n * `prefers-reduced-motion` のときは回転を止める。\n */\nconst slots = {\n  root: 'inline-flex items-center gap-2',\n  circle: 'shrink-0 motion-safe:animate-spin text-[var(--c)]',\n  label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n} satisfies SlotMap<typeof spinnerSlots, (typeof spinnerRequiredSlots)[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\nconst size: VariantMap<NoviSize, { circle: string }> = {\n  sm: { circle: 'size-4' },\n  md: { circle: 'size-5' },\n  lg: { circle: 'size-6' },\n}\n\n/**\n * Spinner のスタイル定義。\n *\n * @example\n * const mySpinner = tv({ extend: spinnerStyles, slots: { label: 'text-[var(--novi-color-fg)]' } })\n */\nexport const spinnerStyles = tv({\n  slots,\n  variants: { color, size },\n  defaultVariants: { color: 'default', size: 'md' },\n})\n\nexport type SpinnerStyleProps = Parameters<typeof spinnerStyles>[0]\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;CACN,QAAQ;CACR,OAAO,oEAAoE;AAC7E;;;;;;;AAuBA,MAAa,gBAAgB,GAAG;CAC9B;CACA,UAAU;EAAE;GAtBZ,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;EAiBrC;EAAO;GAbnB,IAAI,EAAE,QAAQ,SAAS;GACvB,IAAI,EAAE,QAAQ,SAAS;GACvB,IAAI,EAAE,QAAQ,SAAS;EAWJ;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}

package/dist/styles/focus-ring.mjs

@@ -0,0 +1,30 @@
+//#region src/styles/focus-ring.ts
+/**
+* 全コンポーネント共通のフォーカスリング。
+*
+* 両テーマと**同じ書き方をそのまま採る**。ここで独自色を出さないのは意図で、
+* フォーカスの見え方はテーマの表現ではなく操作の保証だから。3本のモデルで
+* 挙動が揺れると、テーマを差し替えた瞬間にキーボード操作の手応えが変わる。
+*
+* React Aria Components はキーボード操作時にのみ `data-focus-visible` を立てるため、
+* `:focus-visible` 擬似クラスではなくその属性を使う。
+* ポインタで押しただけでリングが出る誤動作を避けられる。
+*/
+const focusRing = [
+	"outline-none",
+	"data-[focus-visible]:outline",
+	"data-[focus-visible]:outline-[length:var(--novi-focus-ring-width)]",
+	"data-[focus-visible]:outline-[var(--novi-focus-ring-color)]",
+	"data-[focus-visible]:outline-offset-[var(--novi-focus-ring-offset)]"
+].join(" ");
+/**
+* 無効状態の共通表現。色は変えず、透明度と操作不能だけで示す。
+*
+* Flatlay では特に効く。罫線しか階層の手がかりが無いので、無効色を別に持つと
+* 「染まる罫線」と紛れる。薄くするだけなら罫線の意味を壊さない。
+*/
+const disabledState = "data-[disabled]:opacity-40 data-[disabled]:pointer-events-none";
+//#endregion
+export { disabledState, focusRing };
+
+//# sourceMappingURL=focus-ring.mjs.map

package/dist/styles/focus-ring.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-ring.mjs","names":[],"sources":["../../src/styles/focus-ring.ts"],"sourcesContent":["/**\n * 全コンポーネント共通のフォーカスリング。\n *\n * 両テーマと**同じ書き方をそのまま採る**。ここで独自色を出さないのは意図で、\n * フォーカスの見え方はテーマの表現ではなく操作の保証だから。3本のモデルで\n * 挙動が揺れると、テーマを差し替えた瞬間にキーボード操作の手応えが変わる。\n *\n * React Aria Components はキーボード操作時にのみ `data-focus-visible` を立てるため、\n * `:focus-visible` 擬似クラスではなくその属性を使う。\n * ポインタで押しただけでリングが出る誤動作を避けられる。\n */\nexport const focusRing = [\n  'outline-none',\n  'data-[focus-visible]:outline',\n  'data-[focus-visible]:outline-[length:var(--novi-focus-ring-width)]',\n  'data-[focus-visible]:outline-[var(--novi-focus-ring-color)]',\n  'data-[focus-visible]:outline-offset-[var(--novi-focus-ring-offset)]',\n].join(' ')\n\n/**\n * 無効状態の共通表現。色は変えず、透明度と操作不能だけで示す。\n *\n * Flatlay では特に効く。罫線しか階層の手がかりが無いので、無効色を別に持つと\n * 「染まる罫線」と紛れる。薄くするだけなら罫線の意味を壊さない。\n */\nexport const disabledState = 'data-[disabled]:opacity-40 data-[disabled]:pointer-events-none'\n"],"mappings":";;;;;;;;;;;;AAWA,MAAa,YAAY;CACvB;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;;;;;AAQV,MAAa,gBAAgB"}

package/dist/styles/inflow.mjs

@@ -0,0 +1,156 @@
+"use client";
+import { OverlayTriggerStateContext, Popover } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { inflowPortalProps } from "@novi-ui/core/client";
+//#region src/styles/inflow.tsx
+/**
+* オーバーレイをドキュメントフローの中に展開する（FR-05 / FR-09）。
+*
+* Flatlay は z 軸を持たない。**開く = 場所を取る**。Select も Menu も Popover も、
+* 開いたら後続を押し下げる。浮いてこないので「どこかが隠れている」が起きない。
+*
+* 実装は **Popover を捨てず、置き場所だけ変える**。理由はスパイクで2案を潰したから:
+* - 開いた時だけ中身をマウントする → Select のコレクションが空になり、そもそも開かない
+* - 常時マウントして hidden で隠す → 閉じている間 option が描画されず、
+*   開いた瞬間のフォーカス初期化とトリガの keydown 分岐が Popover 前提で壊れる
+*
+* `INFLOW_PORTAL_PROP`（core が封じ込めた上流の不安定 prop）でトリガ直後の
+* フロー内コンテナへポータルし、`useOverlayPosition` が書き込むインラインの
+* `position: absolute / top / left` を `static!` で無効化する。
+* FocusScope・キーボード操作・コレクション・Escape・フォーカス復帰は
+* すべて RAC 本来の経路のまま生き、**描画位置だけがフローに落ちる**。
+*/
+/**
+* 上流が書き込むインラインスタイルを打ち消す。**`!` はここでの必需品。**
+*
+* `useOverlayPosition` は `style` 属性に直接書き込むため、クラスの詳細度では勝てない。
+* - `static!`        浮かせない。フローに戻す（これが原理そのもの）
+* - `z-auto!`        上流は `z-index: 100000` を書く。層を持たないので剥がす
+* - `max-h-none!`    上流は viewport 収まりで高さを刻むが、フローなら刻む理由がない
+* - `w-auto!`        トリガ幅の計算値を捨て、中身とレイアウトに任せる
+* - `transform-none!` 出現時の変形も打ち消す。動きで飾らない（FR-11）
+*/
+const INFLOW_POPOVER_RESET = "static! z-auto! max-h-none! w-auto! transform-none!";
+/**
+* 開いた瞬間に画面外へはみ出していれば最小限だけスクロールし、
+* **そのスクロールで自分が閉じないようにする。**
+*
+* インフロー展開は下方向に伸びるので、ページ末尾のトリガでは中身が折り返しの外に出る。
+* `block: 'nearest'` なのは意図で、`'center'` や `'start'` はトリガまで動かしてしまい、
+* 「押し下げた」という因果が見えなくなる。**見えるところまでしか動かさない。**
+*
+* 見張りを先に張るのは、上流（`useCloseOnScroll`）が非モーダル Popover を
+* スクロールで閉じるから。アンカー型なら正しい判断だが、インフロー展開は
+* 文書と一緒に動くのでずれようがない。自前のスクロールで即座に閉じてしまうし、
+* 長い一覧を読むために送っただけで畳まれるのはモデルの否定になる。
+*
+* 捕捉リスナは上流より先に登録される（子の effect が先に走る）ので、
+* 上流が `close` を呼ぶ時点では必ず旗が立っている。
+*
+* 押している最中は動かさず、離すまで待つ。Select は押し下げたまま項目へ滑らせて
+* 離す操作を受けるので、指の下でページが動くとそのまま誤選択になる。
+*
+* Popover は閉じている間アンマウントされるので、この効果は開閉ごとに1度だけ走る。
+*/
+function InflowScroll({ target, scrolling, pressed }) {
+	useEffect(() => {
+		const raise = () => {
+			scrolling.current = true;
+			setTimeout(() => {
+				scrolling.current = false;
+			}, 0);
+		};
+		const scroll = () => target.scrollIntoView({ block: "nearest" });
+		window.addEventListener("scroll", raise, true);
+		if (pressed.current) window.addEventListener("pointerup", scroll, {
+			once: true,
+			capture: true
+		});
+		else scroll();
+		return () => {
+			window.removeEventListener("scroll", raise, true);
+			window.removeEventListener("pointerup", scroll, true);
+		};
+	}, [
+		target,
+		scrolling,
+		pressed
+	]);
+	return null;
+}
+/**
+* ポインタが押されている間だけ立つ旗。
+*
+* 展開は pointerdown で始まるので、押されたことを知るには**開く前から**張っておく
+* 必要がある。`InflowPopover` 自体は閉じている間も生きているのでここに置ける。
+*/
+function usePressed() {
+	const pressed = useRef(false);
+	useEffect(() => {
+		const down = () => {
+			pressed.current = true;
+		};
+		const up = () => {
+			pressed.current = false;
+		};
+		window.addEventListener("pointerdown", down, true);
+		window.addEventListener("pointerup", up, true);
+		window.addEventListener("pointercancel", up, true);
+		return () => {
+			window.removeEventListener("pointerdown", down, true);
+			window.removeEventListener("pointerup", up, true);
+			window.removeEventListener("pointercancel", up, true);
+		};
+	}, []);
+	return pressed;
+}
+/**
+* スクロール中に来た `close` だけを捨てる状態を作る。
+*
+* 上流には close-on-scroll を切る口が無い（`isNonModal` と抱き合わせ）。
+* Escape・外側クリック・選択による `close` はそのまま通す。
+*/
+function useScrollGuardedState(scrolling) {
+	const state = useContext(OverlayTriggerStateContext);
+	return useMemo(() => state === null ? null : {
+		...state,
+		close: () => {
+			if (!scrolling.current) state.close();
+		}
+	}, [state, scrolling]);
+}
+/**
+* Select / Menu / Popover の展開部をフローに置くための包み。
+*
+* `isNonModal` は必須。モーダルにすると背後が inert になり、
+* 「押し下げられた後続」を読むことも触ることもできなくなって、
+* インフローにした意味が消える。
+*/
+function InflowPopover({ children, className, dataSlot }) {
+	const [container, setContainer] = useState(null);
+	const scrolling = useRef(false);
+	const pressed = usePressed();
+	const state = useScrollGuardedState(scrolling);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		ref: setContainer,
+		"data-novi-inflow": ""
+	}), container !== null && /* @__PURE__ */ jsx(OverlayTriggerStateContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsxs(Popover, {
+			isNonModal: true,
+			...inflowPortalProps(container),
+			"data-slot": dataSlot,
+			className: className === void 0 ? INFLOW_POPOVER_RESET : `${INFLOW_POPOVER_RESET} ${className}`,
+			children: [/* @__PURE__ */ jsx(InflowScroll, {
+				target: container,
+				scrolling,
+				pressed
+			}), children]
+		})
+	})] });
+}
+//#endregion
+export { InflowPopover };
+
+//# sourceMappingURL=inflow.mjs.map

package/dist/styles/inflow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"inflow.mjs","names":[],"sources":["../../src/styles/inflow.tsx"],"sourcesContent":["'use client'\n\nimport { inflowPortalProps } from '@novi-ui/core/client'\nimport {\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { OverlayTriggerStateContext, Popover } from 'react-aria-components'\n\n/**\n * オーバーレイをドキュメントフローの中に展開する（FR-05 / FR-09）。\n *\n * Flatlay は z 軸を持たない。**開く = 場所を取る**。Select も Menu も Popover も、\n * 開いたら後続を押し下げる。浮いてこないので「どこかが隠れている」が起きない。\n *\n * 実装は **Popover を捨てず、置き場所だけ変える**。理由はスパイクで2案を潰したから:\n * - 開いた時だけ中身をマウントする → Select のコレクションが空になり、そもそも開かない\n * - 常時マウントして hidden で隠す → 閉じている間 option が描画されず、\n *   開いた瞬間のフォーカス初期化とトリガの keydown 分岐が Popover 前提で壊れる\n *\n * `INFLOW_PORTAL_PROP`（core が封じ込めた上流の不安定 prop）でトリガ直後の\n * フロー内コンテナへポータルし、`useOverlayPosition` が書き込むインラインの\n * `position: absolute / top / left` を `static!` で無効化する。\n * FocusScope・キーボード操作・コレクション・Escape・フォーカス復帰は\n * すべて RAC 本来の経路のまま生き、**描画位置だけがフローに落ちる**。\n */\n\n/**\n * 上流が書き込むインラインスタイルを打ち消す。**`!` はここでの必需品。**\n *\n * `useOverlayPosition` は `style` 属性に直接書き込むため、クラスの詳細度では勝てない。\n * - `static!`        浮かせない。フローに戻す（これが原理そのもの）\n * - `z-auto!`        上流は `z-index: 100000` を書く。層を持たないので剥がす\n * - `max-h-none!`    上流は viewport 収まりで高さを刻むが、フローなら刻む理由がない\n * - `w-auto!`        トリガ幅の計算値を捨て、中身とレイアウトに任せる\n * - `transform-none!` 出現時の変形も打ち消す。動きで飾らない（FR-11）\n */\nconst INFLOW_POPOVER_RESET = 'static! z-auto! max-h-none! w-auto! transform-none!'\n\n/**\n * 開いた瞬間に画面外へはみ出していれば最小限だけスクロールし、\n * **そのスクロールで自分が閉じないようにする。**\n *\n * インフロー展開は下方向に伸びるので、ページ末尾のトリガでは中身が折り返しの外に出る。\n * `block: 'nearest'` なのは意図で、`'center'` や `'start'` はトリガまで動かしてしまい、\n * 「押し下げた」という因果が見えなくなる。**見えるところまでしか動かさない。**\n *\n * 見張りを先に張るのは、上流（`useCloseOnScroll`）が非モーダル Popover を\n * スクロールで閉じるから。アンカー型なら正しい判断だが、インフロー展開は\n * 文書と一緒に動くのでずれようがない。自前のスクロールで即座に閉じてしまうし、\n * 長い一覧を読むために送っただけで畳まれるのはモデルの否定になる。\n *\n * 捕捉リスナは上流より先に登録される（子の effect が先に走る）ので、\n * 上流が `close` を呼ぶ時点では必ず旗が立っている。\n *\n * 押している最中は動かさず、離すまで待つ。Select は押し下げたまま項目へ滑らせて\n * 離す操作を受けるので、指の下でページが動くとそのまま誤選択になる。\n *\n * Popover は閉じている間アンマウントされるので、この効果は開閉ごとに1度だけ走る。\n */\nfunction InflowScroll({\n  target,\n  scrolling,\n  pressed,\n}: {\n  target: HTMLElement\n  scrolling: RefObject<boolean>\n  pressed: RefObject<boolean>\n}): null {\n  useEffect(() => {\n    const raise = () => {\n      scrolling.current = true\n      // 上流のリスナは同じイベントの中で走る。タスクを跨いだ時点で降ろす\n      setTimeout(() => {\n        scrolling.current = false\n      }, 0)\n    }\n    const scroll = () => target.scrollIntoView({ block: 'nearest' })\n\n    window.addEventListener('scroll', raise, true)\n    if (pressed.current) window.addEventListener('pointerup', scroll, { once: true, capture: true })\n    else scroll()\n\n    return () => {\n      window.removeEventListener('scroll', raise, true)\n      window.removeEventListener('pointerup', scroll, true)\n    }\n  }, [target, scrolling, pressed])\n  return null\n}\n\n/**\n * ポインタが押されている間だけ立つ旗。\n *\n * 展開は pointerdown で始まるので、押されたことを知るには**開く前から**張っておく\n * 必要がある。`InflowPopover` 自体は閉じている間も生きているのでここに置ける。\n */\nfunction usePressed(): RefObject<boolean> {\n  const pressed = useRef(false)\n\n  useEffect(() => {\n    const down = () => {\n      pressed.current = true\n    }\n    const up = () => {\n      pressed.current = false\n    }\n    window.addEventListener('pointerdown', down, true)\n    window.addEventListener('pointerup', up, true)\n    window.addEventListener('pointercancel', up, true)\n    return () => {\n      window.removeEventListener('pointerdown', down, true)\n      window.removeEventListener('pointerup', up, true)\n      window.removeEventListener('pointercancel', up, true)\n    }\n  }, [])\n\n  return pressed\n}\n\n/**\n * スクロール中に来た `close` だけを捨てる状態を作る。\n *\n * 上流には close-on-scroll を切る口が無い（`isNonModal` と抱き合わせ）。\n * Escape・外側クリック・選択による `close` はそのまま通す。\n */\nfunction useScrollGuardedState(scrolling: RefObject<boolean>) {\n  const state = useContext(OverlayTriggerStateContext)\n\n  return useMemo(\n    () =>\n      state === null\n        ? null\n        : {\n            ...state,\n            close: () => {\n              if (!scrolling.current) state.close()\n            },\n          },\n    [state, scrolling],\n  )\n}\n\nexport interface InflowPopoverProps {\n  children: ReactNode\n  /** 展開部そのものに乗せるクラス。枠線や余白はテーマ側の styles が渡す。 */\n  className?: string\n  /**\n   * 展開面に出す `data-slot`。押し下げ面は slot 契約上の `popover` そのものなので、\n   * 名前は呼び出し側（各コンポーネント）が決める。\n   */\n  dataSlot?: string\n}\n\n/**\n * Select / Menu / Popover の展開部をフローに置くための包み。\n *\n * `isNonModal` は必須。モーダルにすると背後が inert になり、\n * 「押し下げられた後続」を読むことも触ることもできなくなって、\n * インフローにした意味が消える。\n */\nexport function InflowPopover({ children, className, dataSlot }: InflowPopoverProps) {\n  const [container, setContainer] = useState<HTMLElement | null>(null)\n  const scrolling = useRef(false)\n  const pressed = usePressed()\n  const state = useScrollGuardedState(scrolling)\n\n  return (\n    <>\n      {/* 展開部の置き場所。閉じている間は高さ 0 で、押し下げは起きない */}\n      <div ref={setContainer} data-novi-inflow=\"\" />\n      {container !== null && (\n        <OverlayTriggerStateContext.Provider value={state}>\n          <Popover\n            isNonModal\n            {...inflowPortalProps(container)}\n            data-slot={dataSlot}\n            className={\n              className === undefined\n                ? INFLOW_POPOVER_RESET\n                : `${INFLOW_POPOVER_RESET} ${className}`\n            }\n          >\n            <InflowScroll target={container} scrolling={scrolling} pressed={pressed} />\n            {children}\n          </Popover>\n        </OverlayTriggerStateContext.Provider>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;AAuB7B,SAAS,aAAa,EACpB,QACA,WACA,WAKO;CACP,gBAAgB;EACd,MAAM,cAAc;GAClB,UAAU,UAAU;GAEpB,iBAAiB;IACf,UAAU,UAAU;GACtB,GAAG,CAAC;EACN;EACA,MAAM,eAAe,OAAO,eAAe,EAAE,OAAO,UAAU,CAAC;EAE/D,OAAO,iBAAiB,UAAU,OAAO,IAAI;EAC7C,IAAI,QAAQ,SAAS,OAAO,iBAAiB,aAAa,QAAQ;GAAE,MAAM;GAAM,SAAS;EAAK,CAAC;OAC1F,OAAO;EAEZ,aAAa;GACX,OAAO,oBAAoB,UAAU,OAAO,IAAI;GAChD,OAAO,oBAAoB,aAAa,QAAQ,IAAI;EACtD;CACF,GAAG;EAAC;EAAQ;EAAW;CAAO,CAAC;CAC/B,OAAO;AACT;;;;;;;AAQA,SAAS,aAAiC;CACxC,MAAM,UAAU,OAAO,KAAK;CAE5B,gBAAgB;EACd,MAAM,aAAa;GACjB,QAAQ,UAAU;EACpB;EACA,MAAM,WAAW;GACf,QAAQ,UAAU;EACpB;EACA,OAAO,iBAAiB,eAAe,MAAM,IAAI;EACjD,OAAO,iBAAiB,aAAa,IAAI,IAAI;EAC7C,OAAO,iBAAiB,iBAAiB,IAAI,IAAI;EACjD,aAAa;GACX,OAAO,oBAAoB,eAAe,MAAM,IAAI;GACpD,OAAO,oBAAoB,aAAa,IAAI,IAAI;GAChD,OAAO,oBAAoB,iBAAiB,IAAI,IAAI;EACtD;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;AACT;;;;;;;AAQA,SAAS,sBAAsB,WAA+B;CAC5D,MAAM,QAAQ,WAAW,0BAA0B;CAEnD,OAAO,cAEH,UAAU,OACN,OACA;EACE,GAAG;EACH,aAAa;GACX,IAAI,CAAC,UAAU,SAAS,MAAM,MAAM;EACtC;CACF,GACN,CAAC,OAAO,SAAS,CACnB;AACF;;;;;;;;AAoBA,SAAgB,cAAc,EAAE,UAAU,WAAW,YAAgC;CACnF,MAAM,CAAC,WAAW,gBAAgB,SAA6B,IAAI;CACnE,MAAM,YAAY,OAAO,KAAK;CAC9B,MAAM,UAAU,WAAW;CAC3B,MAAM,QAAQ,sBAAsB,SAAS;CAE7C,OACE,qBAAA,UAAA,EAAA,UAAA,CAEE,oBAAC,OAAD;EAAK,KAAK;EAAc,oBAAiB;CAAI,CAAA,GAC5C,cAAc,QACb,oBAAC,2BAA2B,UAA5B;EAAqC,OAAO;EAC1C,UAAA,qBAAC,SAAD;GACE,YAAA;GACA,GAAI,kBAAkB,SAAS;GAC/B,aAAW;GACX,WACE,cAAc,KAAA,IACV,uBACA,GAAG,qBAAqB,GAAG;GAPnC,UAAA,CAUE,oBAAC,cAAD;IAAc,QAAQ;IAAsB;IAAoB;GAAU,CAAA,GACzE,QACM;;CAC0B,CAAA,CAEvC,EAAA,CAAA;AAEN"}

package/dist/styles/mono.mjs

@@ -0,0 +1,24 @@
+//#region src/styles/mono.ts
+/**
+* 等幅の断片（ADR-F7）。**Flatlay のタイポの声はここに集約する。**
+*
+* 影も奥行きも持たないテーマで、階層の次に効く区別が書体の切り替えになる。
+* 帳票や伝票がそうであるように、「読ませる文」と「読み取らせる値」は別の顔を持つ。
+*
+* Web フォントは同梱しない（依存ゼロ原則）。`--novi-font-mono` に精度の高い
+* システムスタックを積み、各 slot はこの断片経由でのみそれを消費する。
+* 個別に `font-mono` と書くと Tailwind 既定のスタックに落ち、トークンを外れる。
+*/
+/** 等幅の地。コード・ショートカット・記号インジケータなど、値ではない等幅に使う。 */
+const mono = "font-(family-name:--novi-font-mono)";
+/**
+* 数値用。**桁が縦に揃うことが情報になる**列（金額・件数・進捗）に使う。
+*
+* `tabular-nums` を等幅と併せるのは、等幅フォントでも比例数字を持つ環境があるため。
+* 揃わない数字は、書類として読むときに一覧性を丸ごと失う。
+*/
+const monoNumeric = `${mono} tabular-nums`;
+//#endregion
+export { mono, monoNumeric };
+
+//# sourceMappingURL=mono.mjs.map

package/dist/styles/mono.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mono.mjs","names":[],"sources":["../../src/styles/mono.ts"],"sourcesContent":["/**\n * 等幅の断片（ADR-F7）。**Flatlay のタイポの声はここに集約する。**\n *\n * 影も奥行きも持たないテーマで、階層の次に効く区別が書体の切り替えになる。\n * 帳票や伝票がそうであるように、「読ませる文」と「読み取らせる値」は別の顔を持つ。\n *\n * Web フォントは同梱しない（依存ゼロ原則）。`--novi-font-mono` に精度の高い\n * システムスタックを積み、各 slot はこの断片経由でのみそれを消費する。\n * 個別に `font-mono` と書くと Tailwind 既定のスタックに落ち、トークンを外れる。\n */\n\n/** 等幅の地。コード・ショートカット・記号インジケータなど、値ではない等幅に使う。 */\nexport const mono = 'font-(family-name:--novi-font-mono)'\n\n/**\n * 数値用。**桁が縦に揃うことが情報になる**列（金額・件数・進捗）に使う。\n *\n * `tabular-nums` を等幅と併せるのは、等幅フォントでも比例数字を持つ環境があるため。\n * 揃わない数字は、書類として読むときに一覧性を丸ごと失う。\n */\nexport const monoNumeric = `${mono} tabular-nums`\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,OAAO;;;;;;;AAQpB,MAAa,cAAc,GAAG,KAAK"}

package/dist/switch/index.d.mts

@@ -0,0 +1,3 @@
+import { Switch } from "./switch.mjs";
+import { SwitchStyleProps, switchStyles } from "./switch.styles.mjs";
+export { Switch, type SwitchStyleProps, switchStyles };

package/dist/switch/switch.d.mts

@@ -0,0 +1,18 @@
+import { SwitchProps } from "@novi-ui/core";
+//#region src/switch/switch.d.ts
+/**
+ * オン / オフの切り替え。
+ *
+ * Flatlay では**矩形のトラックに矩形のつまみ**で表示する。つまみは滑らず、
+ * 左端と右端を即座に行き来する（FR-11）。形が見慣れないぶん状態が
+ * 読み取りにくいため、ラベルの併記を強く推奨する。
+ *
+ * @example
+ * <Switch isSelected={enabled} onChange={setEnabled}>
+ *   メール通知を受け取る
+ * </Switch>
+ */
+declare function Switch({ size, color, name, value, isSelected, defaultSelected, onChange, isDisabled, isReadOnly, description, children, className, classNames, id }: SwitchProps): import("react").JSX.Element;
+//#endregion
+export { Switch };
+//# sourceMappingURL=switch.d.mts.map

package/dist/switch/switch.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.mts","names":[],"sources":["../../src/switch/switch.tsx"],"mappings":";;;;;;;;;;;;;;iBAkBgB,SACd,MACA,OACA,MACA,OACA,YACA,iBACA,UACA,YACA,YACA,aACA,UACA,WACA,YACA,MACC,8BAAW,IAAA"}

package/dist/switch/switch.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { switchStyles } from "./switch.styles.mjs";
+import { Switch } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/switch/switch.tsx
+/**
+* オン / オフの切り替え。
+*
+* Flatlay では**矩形のトラックに矩形のつまみ**で表示する。つまみは滑らず、
+* 左端と右端を即座に行き来する（FR-11）。形が見慣れないぶん状態が
+* 読み取りにくいため、ラベルの併記を強く推奨する。
+*
+* @example
+* <Switch isSelected={enabled} onChange={setEnabled}>
+*   メール通知を受け取る
+* </Switch>
+*/
+function Switch$1({ size, color, name, value, isSelected, defaultSelected, onChange, isDisabled, isReadOnly, description, children, className, classNames, id }) {
+	const s = switchStyles({
+		size,
+		color
+	});
+	return /* @__PURE__ */ jsxs(Switch, {
+		id,
+		name,
+		value,
+		isSelected,
+		defaultSelected,
+		onChange,
+		isDisabled,
+		isReadOnly,
+		"data-slot": "root",
+		className: `group ${s.root({ class: [className, classNames?.root] })}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "track",
+			className: s.track({ class: classNames?.track }),
+			children: /* @__PURE__ */ jsx("span", {
+				"data-slot": "thumb",
+				className: s.thumb({ class: classNames?.thumb })
+			})
+		}), 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
+			})]
+		})]
+	});
+}
+//#endregion
+export { Switch$1 as Switch };
+
+//# sourceMappingURL=switch.mjs.map

package/dist/switch/switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.mjs","names":["Switch","RACSwitch"],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["'use client'\n\nimport type { SwitchProps } from '@novi-ui/core'\nimport { Switch as RACSwitch } from 'react-aria-components'\nimport { switchStyles } from './switch.styles'\n\n/**\n * オン / オフの切り替え。\n *\n * Flatlay では**矩形のトラックに矩形のつまみ**で表示する。つまみは滑らず、\n * 左端と右端を即座に行き来する（FR-11）。形が見慣れないぶん状態が\n * 読み取りにくいため、ラベルの併記を強く推奨する。\n *\n * @example\n * <Switch isSelected={enabled} onChange={setEnabled}>\n *   メール通知を受け取る\n * </Switch>\n */\nexport function Switch({\n  size,\n  color,\n  name,\n  value,\n  isSelected,\n  defaultSelected,\n  onChange,\n  isDisabled,\n  isReadOnly,\n  description,\n  children,\n  className,\n  classNames,\n  id,\n}: SwitchProps) {\n  const s = switchStyles({ size, color })\n\n  return (\n    <RACSwitch\n      id={id}\n      name={name}\n      value={value}\n      isSelected={isSelected}\n      defaultSelected={defaultSelected}\n      onChange={onChange}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      data-slot=\"root\"\n      // track / thumb 側から選択状態と押下を参照するために group を付ける\n      className={`group ${s.root({ class: [className, classNames?.root] })}`}\n    >\n      <span data-slot=\"track\" className={s.track({ class: classNames?.track })}>\n        <span data-slot=\"thumb\" className={s.thumb({ class: classNames?.thumb })} />\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    </RACSwitch>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgBA,SAAO,EACrB,MACA,OACA,MACA,OACA,YACA,iBACA,UACA,YACA,YACA,aACA,UACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAM;CAAM,CAAC;CAEtC,OACE,qBAACC,QAAD;EACM;EACE;EACC;EACK;EACK;EACP;EACE;EACA;EACZ,aAAU;EAEV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAXrE,UAAA,CAaE,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACrE,UAAA,oBAAC,QAAD;IAAM,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GAAI,CAAA;EACvE,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;EAEC,CAAA,CAAA;;AAEf"}

package/dist/switch/switch.styles.d.mts

@@ -0,0 +1,58 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/switch/switch.styles.d.ts
+/**
+ * Switch のスタイル定義。
+ *
+ * @example
+ * const mySwitch = tv({ extend: switchStyles, slots: { track: 'w-12' } })
+ */
+declare const switchStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    track: string;
+    thumb: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  track: string;
+  thumb: string;
+  label: string;
+  description: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    track: string;
+    thumb: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  track: string;
+  thumb: string;
+  label: string;
+  description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    track: string;
+    thumb: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  track: string;
+  thumb: string;
+  label: string;
+  description: string;
+}>>;
+type SwitchStyleProps = Parameters<typeof switchStyles>[0];
+//#endregion
+export { SwitchStyleProps, switchStyles };
+//# sourceMappingURL=switch.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.d.mts","names":[],"sources":["../../src/switch/switch.styles.ts"],"mappings":";;;;;;;;cA2Ea,0CAAY;;IAzBkB;;;IAaD;IAAe;IAAe;;;;;;;;;;IAb7B;;;IAaD;IAAe;IAAe;;;;;;;;;;IAb7B;;;IAaD;IAAe;IAAe;;;;;;;;;KAkB5D,mBAAmB,kBAAkB"}

package/dist/switch/switch.styles.mjs

@@ -0,0 +1,86 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/switch/switch.styles.ts
+/**
+* Flatlay の Switch は**矩形のトラックに矩形のつまみ**。両テーマがピル型なのに対して
+* ここだけ角が立つ。Radio の円が例外だったのと逆に、Switch には円を許す理由が無い。
+*
+* つまみは `translate` で滑らない（FR-11 で transform 全面禁止）。左右の寄せを
+* 入れ替えるだけで、位置は**即座に**切り替わる。滑走はレールの上をモノが動く表現＝
+* 奥行きの語彙で、押し下げに transition を付けないのと同じ理由でここでも使わない。
+*
+* 形が見慣れないぶん ON/OFF が読み取りにくいので、**ラベルの併記を強く推奨**する。
+*/
+const slots = {
+	root: [
+		"inline-flex items-center gap-2",
+		"cursor-pointer",
+		disabledState
+	].join(" "),
+	track: [
+		"shrink-0 inline-flex items-center",
+		"justify-start group-data-[selected]:justify-end",
+		"rounded-[var(--novi-radius-sm)]",
+		"border border-[var(--novi-color-border-strong)]",
+		"bg-[var(--novi-color-bg)]",
+		"group-data-[selected]:bg-[var(--c)] group-data-[selected]:border-[var(--c)]",
+		"group-data-[pressed]:bg-[var(--c-fg)] group-data-[pressed]:border-[var(--c)]",
+		"transition-[background-color,border-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		focusRing
+	].join(" "),
+	thumb: [
+		"rounded-[var(--novi-radius-none)]",
+		"bg-[var(--novi-color-border-strong)]",
+		"group-data-[selected]:bg-[var(--novi-color-bg)]",
+		"group-data-[pressed]:bg-[var(--c)]",
+		"transition-[background-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
+	].join(" "),
+	label: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]",
+	description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]"
+};
+/**
+* Switch のスタイル定義。
+*
+* @example
+* const mySwitch = tv({ extend: switchStyles, slots: { track: 'w-12' } })
+*/
+const switchStyles = tv({
+	slots,
+	variants: {
+		color: {
+			default: { root: "[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]" },
+			primary: { root: "[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]" },
+			secondary: { root: "[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]" },
+			success: { root: "[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]" },
+			warning: { root: "[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]" },
+			danger: { root: "[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]" }
+		},
+		size: {
+			sm: {
+				track: "h-3 w-6 p-px",
+				thumb: "size-2",
+				label: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				track: "h-3.5 w-7 p-px",
+				thumb: "size-2.5",
+				label: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				track: "h-4.5 w-9 p-px",
+				thumb: "size-3.5",
+				label: "text-[length:var(--novi-text-base)]"
+			}
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		size: "md"
+	}
+});
+//#endregion
+export { switchStyles };
+
+//# sourceMappingURL=switch.styles.mjs.map

package/dist/switch/switch.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.mjs","names":[],"sources":["../../src/switch/switch.styles.ts"],"sourcesContent":["import type {\n  NoviColor,\n  NoviSize,\n  SlotMap,\n  switchRequiredSlots,\n  switchSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * Flatlay の Switch は**矩形のトラックに矩形のつまみ**。両テーマがピル型なのに対して\n * ここだけ角が立つ。Radio の円が例外だったのと逆に、Switch には円を許す理由が無い。\n *\n * つまみは `translate` で滑らない（FR-11 で transform 全面禁止）。左右の寄せを\n * 入れ替えるだけで、位置は**即座に**切り替わる。滑走はレールの上をモノが動く表現＝\n * 奥行きの語彙で、押し下げに transition を付けないのと同じ理由でここでも使わない。\n *\n * 形が見慣れないぶん ON/OFF が読み取りにくいので、**ラベルの併記を強く推奨**する。\n */\nconst slots = {\n  root: ['inline-flex items-center gap-2', 'cursor-pointer', disabledState].join(' '),\n  track: [\n    'shrink-0 inline-flex items-center',\n    // つまみは寄せで動かす。OFF は左端、ON は右端に即座に立つ\n    'justify-start group-data-[selected]:justify-end',\n    'rounded-[var(--novi-radius-sm)]',\n    'border border-[var(--novi-color-border-strong)]',\n    'bg-[var(--novi-color-bg)]',\n    'group-data-[selected]:bg-[var(--c)] group-data-[selected]:border-[var(--c)]',\n    // 押下は反転（ADR-F3）。地とつまみが入れ替わる\n    'group-data-[pressed]:bg-[var(--c-fg)] group-data-[pressed]:border-[var(--c)]',\n    'transition-[background-color,border-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    focusRing,\n  ].join(' '),\n  // つまみも矩形。ON では地色で抜き、OFF では罫線と同じ色の塊にする\n  thumb: [\n    'rounded-[var(--novi-radius-none)]',\n    'bg-[var(--novi-color-border-strong)]',\n    'group-data-[selected]:bg-[var(--novi-color-bg)]',\n    'group-data-[pressed]:bg-[var(--c)]',\n    'transition-[background-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n  ].join(' '),\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)]',\n} satisfies SlotMap<typeof switchSlots, (typeof switchRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n  default: { root: '[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]' },\n  primary: { root: '[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]' },\n  secondary: { root: '[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]' },\n  success: { root: '[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]' },\n  warning: { root: '[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]' },\n  danger: { root: '[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]' },\n}\n\n/**\n * md が 28×14px。Button の高さ 28px を**横に倒した**寸法で、\n * 帳票の1行の中に置いても行が膨らまない。sm 24×12 / lg 36×18。\n */\nconst size: VariantMap<NoviSize, { track: string; thumb: string; label: string }> = {\n  sm: { track: 'h-3 w-6 p-px', thumb: 'size-2', label: 'text-[length:var(--novi-text-sm)]' },\n  md: { track: 'h-3.5 w-7 p-px', thumb: 'size-2.5', label: 'text-[length:var(--novi-text-base)]' },\n  lg: { track: 'h-4.5 w-9 p-px', thumb: 'size-3.5', label: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Switch のスタイル定義。\n *\n * @example\n * const mySwitch = tv({ extend: switchStyles, slots: { track: 'w-12' } })\n */\nexport const switchStyles = tv({\n  slots,\n  variants: { color, size },\n  defaultVariants: { color: 'default', size: 'md' },\n})\n\nexport type SwitchStyleProps = Parameters<typeof switchStyles>[0]\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,QAAQ;CACZ,MAAM;EAAC;EAAkC;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CAClF,OAAO;EACL;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,aAAa;AACf;;;;;;;AA2BA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GA1BZ,SAAS,EAAE,MAAM,2DAA2D;GAC5E,SAAS,EAAE,MAAM,wEAAwE;GACzF,WAAW,EAAE,MAAM,4EAA4E;GAC/F,SAAS,EAAE,MAAM,wEAAwE;GACzF,SAAS,EAAE,MAAM,wEAAwE;GACzF,QAAQ,EAAE,MAAM,sEAAsE;EAqB1E;EAAO;GAbnB,IAAI;IAAE,OAAO;IAAgB,OAAO;IAAU,OAAO;GAAoC;GACzF,IAAI;IAAE,OAAO;IAAkB,OAAO;IAAY,OAAO;GAAsC;GAC/F,IAAI;IAAE,OAAO;IAAkB,OAAO;IAAY,OAAO;GAAsC;EAW5E;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC"}

package/dist/tabs/index.d.mts

@@ -0,0 +1,3 @@
+import { TabContent, TabItem, TabItems, Tabs } from "./tabs.mjs";
+import { TabsStyleProps, tabsStyles } from "./tabs.styles.mjs";
+export { TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, tabsStyles };