@novi-ui/tactile 0.1.0

package/dist/spinner/spinner.styles.mjs

@@ -0,0 +1,37 @@
+import { tv } from "tailwind-variants";
+/**
+* Spinner のスタイル定義。
+*
+* @example
+* const mySpinner = tv({ extend: spinnerStyles, slots: { label: 'font-medium' } })
+*/
+const spinnerStyles = tv({
+	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)]"
+	},
+	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-5" },
+			md: { circle: "size-6" },
+			lg: { circle: "size-7" }
+		}
+	},
+	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'\n\n/**\n * Spinner は `rotate` を使う**唯一の例外**（ADR-R2）。\n *\n * 代替のローディング表現（点滅・バーの往復）は視認性か情報量で劣るため、\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)]',\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-5' },\n  md: { circle: 'size-6' },\n  lg: { circle: 'size-7' },\n}\n\n/**\n * Spinner のスタイル定義。\n *\n * @example\n * const mySpinner = tv({ extend: spinnerStyles, slots: { label: 'font-medium' } })\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":";;;;;;;AA4CA,MAAa,gBAAgB,GAAG;CAC9B;EA3BA,MAAM;EACN,QAAQ;EACR,OAAO;CAyBP;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,23 @@
+//#region src/styles/focus-ring.ts
+/**
+* 全コンポーネント共通のフォーカスリング。
+*
+* 個別に書くと必ずどこかで揺れる。1箇所に定義して全コンポーネントが import する。
+*
+* 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(" ");
+/** 無効状態の共通表現。色は変えず、透明度と操作不能だけで示す（色数を増やさない）。 */
+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 * 個別に書くと必ずどこかで揺れる。1箇所に定義して全コンポーネントが import する。\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/** 無効状態の共通表現。色は変えず、透明度と操作不能だけで示す（色数を増やさない）。 */\nexport const disabledState = 'data-[disabled]:opacity-40 data-[disabled]:pointer-events-none'\n"],"mappings":";;;;;;;;;;AASA,MAAa,YAAY;CACvB;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,MAAa,gBAAgB"}

package/dist/styles/tap-target.mjs

@@ -0,0 +1,25 @@
+//#region src/styles/tap-target.ts
+/**
+* 実効タップ領域を 44×44px 以上にする共通断片（G5 / AC-01-5）。
+*
+* **視覚寸法とタップ寸法を分離する。** Checkbox の箱（24px）や Breadcrumbs のリンクは
+* 小さく見えてよいが、指が当たる範囲まで小さいと押し直しが起きる。
+* 擬似要素で当たり判定だけを広げると、見た目を変えずに下限を満たせる。
+*
+* `before:` を使うのは、内容（label・アイコン）と重ならない層を1つ増やせるため。
+* `-z-10` は置かない — 重なると擬似要素がクリックを受けなくなる環境がある。
+*/
+const tapTarget = [
+	"relative",
+	"before:absolute before:left-1/2 before:top-1/2",
+	"before:-translate-x-1/2 before:-translate-y-1/2",
+	"before:size-[max(100%,44px)] before:content-[\"\"]"
+].join(" ");
+/**
+* 高さが既に 44px 以上ある要素（md / lg のボタン等）にも付けてよい。
+* `max(100%,44px)` なので、大きい方が採られて当たり判定は広がらない。
+*/
+//#endregion
+export { tapTarget };
+
+//# sourceMappingURL=tap-target.mjs.map

package/dist/styles/tap-target.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tap-target.mjs","names":[],"sources":["../../src/styles/tap-target.ts"],"sourcesContent":["/**\n * 実効タップ領域を 44×44px 以上にする共通断片（G5 / AC-01-5）。\n *\n * **視覚寸法とタップ寸法を分離する。** Checkbox の箱（24px）や Breadcrumbs のリンクは\n * 小さく見えてよいが、指が当たる範囲まで小さいと押し直しが起きる。\n * 擬似要素で当たり判定だけを広げると、見た目を変えずに下限を満たせる。\n *\n * `before:` を使うのは、内容（label・アイコン）と重ならない層を1つ増やせるため。\n * `-z-10` は置かない — 重なると擬似要素がクリックを受けなくなる環境がある。\n */\nexport const tapTarget = [\n  'relative',\n  // 当たり判定のみ。背景を持たないので視覚には現れない\n  'before:absolute before:left-1/2 before:top-1/2',\n  'before:-translate-x-1/2 before:-translate-y-1/2',\n  'before:size-[max(100%,44px)] before:content-[\"\"]',\n].join(' ')\n\n/**\n * 高さが既に 44px 以上ある要素（md / lg のボタン等）にも付けてよい。\n * `max(100%,44px)` なので、大きい方が採られて当たり判定は広がらない。\n */\n"],"mappings":";;;;;;;;;;;AAUA,MAAa,YAAY;CACvB;CAEA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG"}

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,17 @@
+import { SwitchProps } from "@novi-ui/core";
+//#region src/switch/switch.d.ts
+/**
+ * オン / オフの切り替え。
+ *
+ * Raster では**矩形**で表示する（ADR-R3）。形が見慣れないぶん状態が読み取りにくいため、
+ * ラベルの併記を強く推奨する。
+ *
+ * @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":";;;;;;;;;;;;;iBAiBgB,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,57 @@
+"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
+/**
+* オン / オフの切り替え。
+*
+* Raster では**矩形**で表示する（ADR-R3）。形が見慣れないぶん状態が読み取りにくいため、
+* ラベルの併記を強く推奨する。
+*
+* @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 * Raster では**矩形**で表示する（ADR-R3）。形が見慣れないぶん状態が読み取りにくいため、\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      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":";;;;;;;;;;;;;;;;AAiBA,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;EACV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAVrE,UAAA,CAYE,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":";;;;;;;;cA8Ea,0CAAY;;IAlCkB;;;IAUD;IAAe;IAAe;;;;;;;;;;IAV7B;;;IAUD;IAAe;IAAe;;;;;;;;;;IAV7B;;;IAUD;IAAe;IAAe;;;;;;;;;KA8B5D,mBAAmB,kBAAkB"}

package/dist/switch/switch.styles.mjs

@@ -0,0 +1,79 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/switch/switch.styles.ts
+/**
+* Tactile の Switch は **iOS 相当の 51×31px**。パーツ自体がタップ下限を満たす。
+*
+* 押下フィードバックは `scale` ではなく**サムの横伸長**で出す。
+* トグルは「掴んで動かす」ものなので、沈むより伸びる方が動作の予告になる。
+*/
+const slots = {
+	root: [
+		"inline-flex items-center gap-3 min-h-11",
+		"cursor-pointer",
+		disabledState
+	].join(" "),
+	track: [
+		"shrink-0 inline-flex items-center",
+		"rounded-[var(--novi-radius-full)]",
+		"bg-[var(--novi-color-subtle)]",
+		"ring-1 ring-[var(--novi-color-border)]",
+		"transition-[background-color,box-shadow]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"group-data-[selected]:bg-[var(--c)] group-data-[selected]:ring-[var(--c)]",
+		focusRing
+	].join(" "),
+	thumb: [
+		"rounded-[var(--novi-radius-full)]",
+		"bg-[var(--novi-color-surface)]",
+		"shadow-[var(--novi-shadow-sm)]",
+		"transition-[transform,width]",
+		"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)]" },
+			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-7 w-12 p-0.5",
+				thumb: "size-6 group-data-[selected]:translate-x-5",
+				label: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				track: "h-[31px] w-[51px] p-0.5",
+				thumb: "size-[27px] group-data-[selected]:translate-x-5",
+				label: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				track: "h-9 w-[60px] p-0.5",
+				thumb: "size-8 group-data-[selected]:translate-x-6",
+				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 * Tactile の Switch は **iOS 相当の 51×31px**。パーツ自体がタップ下限を満たす。\n *\n * 押下フィードバックは `scale` ではなく**サムの横伸長**で出す。\n * トグルは「掴んで動かす」ものなので、沈むより伸びる方が動作の予告になる。\n */\nconst slots = {\n  // 行全体が押せる。トラック（31px）だけでは指のタップ下限を割るため、\n  // ラベルを含む行に 44px の下限を持たせる（e2e の実測で判明）\n  root: ['inline-flex items-center gap-3 min-h-11', 'cursor-pointer', disabledState].join(' '),\n  track: [\n    'shrink-0 inline-flex items-center',\n    'rounded-[var(--novi-radius-full)]',\n    'bg-[var(--novi-color-subtle)]',\n    'ring-1 ring-[var(--novi-color-border)]',\n    'transition-[background-color,box-shadow]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'group-data-[selected]:bg-[var(--c)] group-data-[selected]:ring-[var(--c)]',\n    focusRing,\n  ].join(' '),\n  // 押下でサムが横に伸びる。scale を使わないのは、掴んでいる感触は\n  // 「縮む」より「引き伸ばされる」方が近いため（ADR-T5 の scale はボタン用）\n  thumb: [\n    'rounded-[var(--novi-radius-full)]',\n    'bg-[var(--novi-color-surface)]',\n    'shadow-[var(--novi-shadow-sm)]',\n    'transition-[transform,width]',\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)]' },\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/** md の 51×31px は iOS のスイッチ寸法。パーツ自体が 44px 相当のタップ域を持つ。 */\nconst size: VariantMap<NoviSize, { track: string; thumb: string; label: string }> = {\n  sm: {\n    track: 'h-7 w-12 p-0.5',\n    thumb: 'size-6 group-data-[selected]:translate-x-5',\n    label: 'text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    track: 'h-[31px] w-[51px] p-0.5',\n    thumb: 'size-[27px] group-data-[selected]:translate-x-5',\n    label: 'text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    track: 'h-9 w-[60px] p-0.5',\n    thumb: 'size-8 group-data-[selected]:translate-x-6',\n    label: 'text-[length:var(--novi-text-base)]',\n  },\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":";;;;;;;;;AAiBA,MAAM,QAAQ;CAGZ,MAAM;EAAC;EAA2C;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CAC3F,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAGV,OAAO;EACL;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,aAAa;AACf;;;;;;;AAoCA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GAnCZ,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;EA8BrC;EAAO;GAzBnB,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;GACA,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;GACA,IAAI;IACF,OAAO;IACP,OAAO;IACP,OAAO;GACT;EAWmB;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 };

package/dist/tabs/tabs.d.mts

@@ -0,0 +1,57 @@
+import { ReactNode } from "react";
+import { TabsProps } from "@novi-ui/core";
+//#region src/tabs/tabs.d.ts
+/**
+ * Tabs の見出し列。塗られたトラックになる。
+ *
+ * @example
+ * <TabItems>
+ *   <TabItem id="profile">プロフィール</TabItem>
+ * </TabItems>
+ */
+declare function TabItems({ children, className }: {
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * Tabs の見出し1つ。
+ *
+ * @example
+ * <TabItem id="profile">プロフィール</TabItem>
+ */
+declare function TabItem({ id, isDisabled, children, className }: {
+  id: string;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * Tabs の中身1つ。`id` を見出しと合わせる。
+ *
+ * @example
+ * <TabContent id="profile">…</TabContent>
+ */
+declare function TabContent({ id, children, className }: {
+  id: string;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/**
+ * 同じ階層の内容を切り替える。矢印キーでタブ間を移動できる。
+ *
+ * Tactile では**セグメンテッドコントロール**にする。塗られたトラックの内側で、
+ * 選択中の区画だけが1段持ち上がる。指で切り替える前提では、どこまでが
+ * 自分の押せる範囲かを面で示す必要があるため（Raster は下線1本・ADR-R4）。
+ *
+ * @example
+ * <Tabs selectedKey={tab} onSelectionChange={setTab}>
+ *   <TabItems>
+ *     <TabItem id="profile">プロフィール</TabItem>
+ *   </TabItems>
+ *   <TabContent id="profile">…</TabContent>
+ * </Tabs>
+ */
+declare function Tabs({ variant, size, orientation, selectedKey, defaultSelectedKey, onSelectionChange, isDisabled, disabledKeys, children, className, classNames, id }: TabsProps): import("react").JSX.Element;
+//#endregion
+export { TabContent, TabItem, TabItems, Tabs };
+//# sourceMappingURL=tabs.d.mts.map

package/dist/tabs/tabs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.mts","names":[],"sources":["../../src/tabs/tabs.tsx"],"mappings":";;;;;;;;;;;iBAegB,WAAW,UAAU;EAAe,WAAW;EAAW;oBAAoB,IAAA;;;;;;;iBAc9E,UACd,IACA,YACA,UACA;EAEA;EACA;EACA,WAAW;EACX;oBACD,IAAA;;;;;;;iBAwBe,aACd,IACA,UACA;EAEA;EACA,WAAW;EACX;oBACD,IAAA;;;;;;;;;;;;;;;;iBAuBe,OACd,SACA,MACA,aACA,aACA,oBACA,mBACA,YACA,cACA,UACA,WACA,YACA,MACC,4BAAS,IAAA"}

package/dist/tabs/tabs.mjs

@@ -0,0 +1,91 @@
+"use client";
+import { tabsStyles } from "./tabs.styles.mjs";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/tabs/tabs.tsx
+/**
+* Tabs の見出し列。塗られたトラックになる。
+*
+* @example
+* <TabItems>
+*   <TabItem id="profile">プロフィール</TabItem>
+* </TabItems>
+*/
+function TabItems({ children, className }) {
+	return /* @__PURE__ */ jsx(TabList, {
+		"data-slot": "list",
+		className: tabsStyles().list({ class: className }),
+		children
+	});
+}
+/**
+* Tabs の見出し1つ。
+*
+* @example
+* <TabItem id="profile">プロフィール</TabItem>
+*/
+function TabItem({ id, isDisabled, children, className }) {
+	const s = tabsStyles();
+	return /* @__PURE__ */ jsx(Tab, {
+		id,
+		isDisabled,
+		"data-slot": "tab",
+		className: s.tab({ class: className }),
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [isSelected && /* @__PURE__ */ jsx("span", {
+			"data-slot": "indicator",
+			"aria-hidden": "true",
+			className: s.indicator()
+		}), children] })
+	});
+}
+/**
+* Tabs の中身1つ。`id` を見出しと合わせる。
+*
+* @example
+* <TabContent id="profile">…</TabContent>
+*/
+function TabContent({ id, children, className }) {
+	return /* @__PURE__ */ jsx(TabPanel, {
+		id,
+		"data-slot": "panel",
+		className: tabsStyles().panel({ class: className }),
+		children
+	});
+}
+/**
+* 同じ階層の内容を切り替える。矢印キーでタブ間を移動できる。
+*
+* Tactile では**セグメンテッドコントロール**にする。塗られたトラックの内側で、
+* 選択中の区画だけが1段持ち上がる。指で切り替える前提では、どこまでが
+* 自分の押せる範囲かを面で示す必要があるため（Raster は下線1本・ADR-R4）。
+*
+* @example
+* <Tabs selectedKey={tab} onSelectionChange={setTab}>
+*   <TabItems>
+*     <TabItem id="profile">プロフィール</TabItem>
+*   </TabItems>
+*   <TabContent id="profile">…</TabContent>
+* </Tabs>
+*/
+function Tabs$1({ variant, size, orientation, selectedKey, defaultSelectedKey, onSelectionChange, isDisabled, disabledKeys, children, className, classNames, id }) {
+	const s = tabsStyles({
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsx(Tabs, {
+		id,
+		orientation,
+		selectedKey,
+		defaultSelectedKey,
+		onSelectionChange: (key) => onSelectionChange?.(String(key)),
+		isDisabled,
+		disabledKeys,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children
+	});
+}
+//#endregion
+export { TabContent, TabItem, TabItems, Tabs$1 as Tabs };
+
+//# sourceMappingURL=tabs.mjs.map

package/dist/tabs/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","names":["Tabs","RACTabs"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["'use client'\n\nimport type { TabsProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport { Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components'\nimport { tabsStyles } from './tabs.styles'\n\n/**\n * Tabs の見出し列。塗られたトラックになる。\n *\n * @example\n * <TabItems>\n *   <TabItem id=\"profile\">プロフィール</TabItem>\n * </TabItems>\n */\nexport function TabItems({ children, className }: { children?: ReactNode; className?: string }) {\n  return (\n    <TabList data-slot=\"list\" className={tabsStyles().list({ class: className })}>\n      {children}\n    </TabList>\n  )\n}\n\n/**\n * Tabs の見出し1つ。\n *\n * @example\n * <TabItem id=\"profile\">プロフィール</TabItem>\n */\nexport function TabItem({\n  id,\n  isDisabled,\n  children,\n  className,\n}: {\n  id: string\n  isDisabled?: boolean\n  children?: ReactNode\n  className?: string\n}) {\n  const s = tabsStyles()\n  return (\n    <Tab id={id} isDisabled={isDisabled} data-slot=\"tab\" className={s.tab({ class: className })}>\n      {({ isSelected }) => (\n        <>\n          {/* 選択中の区画に敷く面。トラックから1段持ち上がって見える。\n              先に置いて後続の文字が上に乗るようにする */}\n          {isSelected && (\n            <span data-slot=\"indicator\" aria-hidden=\"true\" className={s.indicator()} />\n          )}\n          {children}\n        </>\n      )}\n    </Tab>\n  )\n}\n\n/**\n * Tabs の中身1つ。`id` を見出しと合わせる。\n *\n * @example\n * <TabContent id=\"profile\">…</TabContent>\n */\nexport function TabContent({\n  id,\n  children,\n  className,\n}: {\n  id: string\n  children?: ReactNode\n  className?: string\n}) {\n  return (\n    <TabPanel id={id} data-slot=\"panel\" className={tabsStyles().panel({ class: className })}>\n      {children}\n    </TabPanel>\n  )\n}\n\n/**\n * 同じ階層の内容を切り替える。矢印キーでタブ間を移動できる。\n *\n * Tactile では**セグメンテッドコントロール**にする。塗られたトラックの内側で、\n * 選択中の区画だけが1段持ち上がる。指で切り替える前提では、どこまでが\n * 自分の押せる範囲かを面で示す必要があるため（Raster は下線1本・ADR-R4）。\n *\n * @example\n * <Tabs selectedKey={tab} onSelectionChange={setTab}>\n *   <TabItems>\n *     <TabItem id=\"profile\">プロフィール</TabItem>\n *   </TabItems>\n *   <TabContent id=\"profile\">…</TabContent>\n * </Tabs>\n */\nexport function Tabs({\n  variant,\n  size,\n  orientation,\n  selectedKey,\n  defaultSelectedKey,\n  onSelectionChange,\n  isDisabled,\n  disabledKeys,\n  children,\n  className,\n  classNames,\n  id,\n}: TabsProps) {\n  const s = tabsStyles({ variant, size })\n\n  return (\n    <RACTabs\n      id={id}\n      orientation={orientation}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={(key) => onSelectionChange?.(String(key))}\n      isDisabled={isDisabled}\n      disabledKeys={disabledKeys}\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      {children}\n    </RACTabs>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,SAAS,EAAE,UAAU,aAA2D;CAC9F,OACE,oBAAC,SAAD;EAAS,aAAU;EAAO,WAAW,WAAW,CAAC,CAAC,KAAK,EAAE,OAAO,UAAU,CAAC;EACxE;CACM,CAAA;AAEb;;;;;;;AAQA,SAAgB,QAAQ,EACtB,IACA,YACA,UACA,aAMC;CACD,MAAM,IAAI,WAAW;CACrB,OACE,oBAAC,KAAD;EAAS;EAAgB;EAAY,aAAU;EAAM,WAAW,EAAE,IAAI,EAAE,OAAO,UAAU,CAAC;EACtF,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CAGG,cACC,oBAAC,QAAD;GAAM,aAAU;GAAY,eAAY;GAAO,WAAW,EAAE,UAAU;EAAI,CAAA,GAE3E,QACD,EAAA,CAAA;CAED,CAAA;AAET;;;;;;;AAQA,SAAgB,WAAW,EACzB,IACA,UACA,aAKC;CACD,OACE,oBAAC,UAAD;EAAc;EAAI,aAAU;EAAQ,WAAW,WAAW,CAAC,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;EACnF;CACO,CAAA;AAEd;;;;;;;;;;;;;;;;AAiBA,SAAgBA,OAAK,EACnB,SACA,MACA,aACA,aACA,oBACA,mBACA,YACA,cACA,UACA,WACA,YACA,MACY;CACZ,MAAM,IAAI,WAAW;EAAE;EAAS;CAAK,CAAC;CAEtC,OACE,oBAACC,MAAD;EACM;EACS;EACA;EACO;EACpB,oBAAoB,QAAQ,oBAAoB,OAAO,GAAG,CAAC;EAC/C;EACE;EACd,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAEzD;CACM,CAAA;AAEb"}

package/dist/tabs/tabs.styles.d.mts

@@ -0,0 +1,58 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/tabs/tabs.styles.d.ts
+/**
+ * Tabs のスタイル定義。
+ *
+ * @example
+ * import { tabsStyles } from '@novi-ui/tactile'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myTabs = tv({ extend: tabsStyles, slots: { list: 'w-full' } })
+ */
+declare const tabsStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    tab: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    list: string;
+    indicator: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  tab: string;
+  indicator: string;
+  panel: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    tab: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    list: string;
+    indicator: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  tab: string;
+  indicator: string;
+  panel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    tab: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    list: string;
+    indicator: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  tab: string;
+  indicator: string;
+  panel: string;
+}>>;
+type TabsStyleProps = Parameters<typeof tabsStyles>[0];
+//#endregion
+export { TabsStyleProps, tabsStyles };
+//# sourceMappingURL=tabs.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.d.mts","names":[],"sources":["../../src/tabs/tabs.styles.ts"],"mappings":";;;;;;;;;;;cAuFa,wCAAU;;IAfiB;;;IAlBO;IAAmB;;;;;;;;;;IAkB1B;;;IAlBO;IAAmB;;;;;;;;;;IAkB1B;;;IAlBO;IAAmB;;;;;;;;;KAuCtD,iBAAiB,kBAAkB"}