@novi-ui/raster 0.1.0

package/dist/select/select.styles.mjs

@@ -0,0 +1,93 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/select/select.styles.ts
+const slots = {
+	root: "flex flex-col gap-1.5",
+	label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
+	trigger: [
+		"text-[var(--novi-color-fg)]",
+		"flex items-center justify-between gap-2 w-full",
+		"text-left",
+		"bg-[var(--novi-color-bg)]",
+		"border border-[var(--novi-color-border-strong)]",
+		"transition-[border-color,opacity]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"group-data-[invalid]:border-[var(--novi-color-danger)]",
+		focusRing,
+		disabledState
+	].join(" "),
+	value: ["truncate text-[var(--novi-color-fg)]", "data-[placeholder]:text-[var(--novi-color-muted)]"].join(" "),
+	icon: "shrink-0 text-[var(--novi-color-muted)]",
+	popover: [
+		"bg-[var(--novi-color-bg)]",
+		"text-[var(--novi-color-fg)]",
+		"border border-[var(--novi-color-border)]",
+		"rounded-[var(--novi-radius-none)]",
+		"shadow-none",
+		"w-[var(--trigger-width)]",
+		"overflow-auto max-h-64"
+	].join(" "),
+	listbox: "outline-none p-1 flex flex-col",
+	option: [
+		"flex items-center justify-between gap-2",
+		"px-2 py-1.5 cursor-pointer outline-none",
+		"text-[var(--novi-color-fg)]",
+		"rounded-[var(--novi-radius-none)]",
+		"data-[focused]:bg-[var(--novi-color-subtle)]",
+		"data-[selected]:font-medium",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default"
+	].join(" "),
+	description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
+};
+/**
+* Select のスタイル定義。
+*
+* @example
+* import { selectStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const mySelect = tv({ extend: selectStyles, slots: { popover: 'max-h-96' } })
+*/
+const selectStyles = tv({
+	slots,
+	variants: {
+		variant: {
+			solid: { trigger: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]" },
+			outline: { trigger: "bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]" },
+			soft: { trigger: "bg-[var(--novi-color-subtle)] border-transparent" },
+			ghost: { trigger: "bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]" },
+			plain: { trigger: "bg-transparent border-transparent" }
+		},
+		size: {
+			sm: {
+				trigger: "h-8 px-2.5 text-[length:var(--novi-text-sm)]",
+				option: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				trigger: "h-10 px-3 text-[length:var(--novi-text-base)]",
+				option: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				trigger: "h-12 px-3.5 text-[length:var(--novi-text-base)]",
+				option: "text-[length:var(--novi-text-base)]"
+			}
+		},
+		radius: {
+			none: { trigger: "rounded-[var(--novi-radius-none)]" },
+			sm: { trigger: "rounded-[var(--novi-radius-sm)]" },
+			md: { trigger: "rounded-[var(--novi-radius-md)]" },
+			lg: { trigger: "rounded-[var(--novi-radius-lg)]" },
+			full: { trigger: "rounded-[var(--novi-radius-full)]" }
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		size: "md",
+		radius: "none"
+	}
+});
+//#endregion
+export { selectStyles };
+
+//# sourceMappingURL=select.styles.mjs.map

package/dist/select/select.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.mjs","names":[],"sources":["../../src/select/select.styles.ts"],"sourcesContent":["import type {\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  selectRequiredSlots,\n  selectSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\nconst slots = {\n  root: 'flex flex-col gap-1.5',\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n  trigger: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-center justify-between gap-2 w-full',\n    'text-left',\n    'bg-[var(--novi-color-bg)]',\n    'border border-[var(--novi-color-border-strong)]',\n    'transition-[border-color,opacity]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'group-data-[invalid]:border-[var(--novi-color-danger)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  value: [\n    'truncate text-[var(--novi-color-fg)]',\n    // 未選択時のプレースホルダは補助色にする\n    'data-[placeholder]:text-[var(--novi-color-muted)]',\n  ].join(' '),\n  icon: 'shrink-0 text-[var(--novi-color-muted)]',\n  // 影を使わず、1px の境界線と背景の差だけで浮かせる\n  popover: [\n    'bg-[var(--novi-color-bg)]',\n    'text-[var(--novi-color-fg)]',\n    'border border-[var(--novi-color-border)]',\n    'rounded-[var(--novi-radius-none)]',\n    'shadow-none',\n    // トリガーと同じ幅に揃える\n    'w-[var(--trigger-width)]',\n    'overflow-auto max-h-64',\n  ].join(' '),\n  listbox: 'outline-none p-1 flex flex-col',\n  option: [\n    'flex items-center justify-between gap-2',\n    'px-2 py-1.5 cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'rounded-[var(--novi-radius-none)]',\n    // 選択中は面ではなく文字の強さで示す。面を増やさない\n    'data-[focused]:bg-[var(--novi-color-subtle)]',\n    'data-[selected]:font-medium',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n  ].join(' '),\n  description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n  errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof selectSlots, (typeof selectRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { trigger: string }> = {\n  solid: { trigger: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]' },\n  outline: { trigger: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n  soft: { trigger: 'bg-[var(--novi-color-subtle)] border-transparent' },\n  ghost: {\n    trigger: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n  },\n  plain: { trigger: 'bg-transparent border-transparent' },\n}\n\n/** 高さは Button / Input と揃える。32 / 40 / 48px。 */\nconst size: VariantMap<NoviSize, { trigger: string; option: string }> = {\n  sm: {\n    trigger: 'h-8 px-2.5 text-[length:var(--novi-text-sm)]',\n    option: 'text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    trigger: 'h-10 px-3 text-[length:var(--novi-text-base)]',\n    option: 'text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    trigger: 'h-12 px-3.5 text-[length:var(--novi-text-base)]',\n    option: 'text-[length:var(--novi-text-base)]',\n  },\n}\n\nconst radius: VariantMap<NoviRadius, { trigger: string }> = {\n  none: { trigger: 'rounded-[var(--novi-radius-none)]' },\n  sm: { trigger: 'rounded-[var(--novi-radius-sm)]' },\n  md: { trigger: 'rounded-[var(--novi-radius-md)]' },\n  lg: { trigger: 'rounded-[var(--novi-radius-lg)]' },\n  full: { trigger: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Select のスタイル定義。\n *\n * @example\n * import { selectStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const mySelect = tv({ extend: selectStyles, slots: { popover: 'max-h-96' } })\n */\nexport const selectStyles = tv({\n  slots,\n  variants: { variant, size, radius },\n  defaultVariants: { variant: 'outline', size: 'md', radius: 'none' },\n})\n\nexport type SelectStyleProps = Parameters<typeof selectStyles>[0]\n"],"mappings":";;;AAYA,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CACP,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO,CACL,wCAEA,mDACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CAEN,SAAS;EACP;EACA;EACA;EACA;EACA;EAEA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;CACT,QAAQ;EACN;EACA;EACA;EACA;EAEA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;AA6CA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GA5CZ,OAAO,EAAE,SAAS,yEAAyE;GAC3F,SAAS,EAAE,SAAS,qEAAqE;GACzF,MAAM,EAAE,SAAS,mDAAmD;GACpE,OAAO,EACL,SAAS,+EACX;GACA,OAAO,EAAE,SAAS,oCAAoC;EAsC1C;EAAS;GAjCrB,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;EAsBqB;EAAM;GAlB3B,MAAM,EAAE,SAAS,oCAAoC;GACrD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,MAAM,EAAE,SAAS,oCAAoC;EAc1B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAO;AACpE,CAAC"}

package/dist/skeleton/index.d.mts

@@ -0,0 +1,3 @@
+import { Skeleton } from "./skeleton.mjs";
+import { SkeletonStyleProps, skeletonStyles } from "./skeleton.styles.mjs";
+export { Skeleton, type SkeletonStyleProps, skeletonStyles };

package/dist/skeleton/skeleton.d.mts

@@ -0,0 +1,15 @@
+import { SkeletonProps } from "@novi-ui/core";
+//#region src/skeleton/skeleton.d.ts
+/**
+ * 読み込み中の場所取り。
+ *
+ * 支援技術には読ませない。読み込み状態は Spinner か live region で伝えること。
+ * 大きさは `className` で指定する。
+ *
+ * @example
+ * <Skeleton className="h-4 w-40" />
+ */
+declare function Skeleton({ radius, className, classNames, id }: SkeletonProps): import("react").JSX.Element;
+//#endregion
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.mts.map

package/dist/skeleton/skeleton.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.mts","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"mappings":";;;;;;;;;;;iBAcgB,WAAW,QAAQ,WAAW,YAAY,MAAM,gCAAa,IAAA"}

package/dist/skeleton/skeleton.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { skeletonStyles } from "./skeleton.styles.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/skeleton/skeleton.tsx
+/**
+* 読み込み中の場所取り。
+*
+* 支援技術には読ませない。読み込み状態は Spinner か live region で伝えること。
+* 大きさは `className` で指定する。
+*
+* @example
+* <Skeleton className="h-4 w-40" />
+*/
+function Skeleton({ radius, className, classNames, id }) {
+	const s = skeletonStyles({ radius });
+	return /* @__PURE__ */ jsx("span", {
+		id,
+		"aria-hidden": "true",
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] })
+	});
+}
+//#endregion
+export { Skeleton };
+
+//# sourceMappingURL=skeleton.mjs.map

package/dist/skeleton/skeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.mjs","names":[],"sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["'use client'\n\nimport type { SkeletonProps } from '@novi-ui/core'\nimport { skeletonStyles } from './skeleton.styles'\n\n/**\n * 読み込み中の場所取り。\n *\n * 支援技術には読ませない。読み込み状態は Spinner か live region で伝えること。\n * 大きさは `className` で指定する。\n *\n * @example\n * <Skeleton className=\"h-4 w-40\" />\n */\nexport function Skeleton({ radius, className, classNames, id }: SkeletonProps) {\n  const s = skeletonStyles({ radius })\n\n  return (\n    <span\n      id={id}\n      aria-hidden=\"true\"\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,SAAS,EAAE,QAAQ,WAAW,YAAY,MAAqB;CAC7E,MAAM,IAAI,eAAe,EAAE,OAAO,CAAC;CAEnC,OACE,oBAAC,QAAD;EACM;EACJ,eAAY;EACZ,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;CAC3D,CAAA;AAEL"}

package/dist/skeleton/skeleton.styles.d.mts

@@ -0,0 +1,31 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/skeleton/skeleton.styles.d.ts
+/**
+ * Skeleton のスタイル定義。
+ *
+ * @example
+ * const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
+ */
+declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+}, undefined, {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+}>>;
+type SkeletonStyleProps = Parameters<typeof skeletonStyles>[0];
+//#endregion
+export { SkeletonStyleProps, skeletonStyles };
+//# sourceMappingURL=skeleton.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styles.d.mts","names":[],"sources":["../../src/skeleton/skeleton.styles.ts"],"mappings":";;;;;;;;cA6Ba,4CAAc;;IAdkB;;;;;;IAAA;;;;;;IAAA;;;;;KAoBjC,qBAAqB,kBAAkB"}

package/dist/skeleton/skeleton.styles.mjs

@@ -0,0 +1,22 @@
+import { tv } from "tailwind-variants";
+/**
+* Skeleton のスタイル定義。
+*
+* @example
+* const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
+*/
+const skeletonStyles = tv({
+	slots: { root: "block bg-[var(--novi-color-subtle)] motion-safe:animate-pulse" },
+	variants: { radius: {
+		none: { root: "rounded-[var(--novi-radius-none)]" },
+		sm: { root: "rounded-[var(--novi-radius-sm)]" },
+		md: { root: "rounded-[var(--novi-radius-md)]" },
+		lg: { root: "rounded-[var(--novi-radius-lg)]" },
+		full: { root: "rounded-[var(--novi-radius-full)]" }
+	} },
+	defaultVariants: { radius: "none" }
+});
+//#endregion
+export { skeletonStyles };
+
+//# sourceMappingURL=skeleton.styles.mjs.map

package/dist/skeleton/skeleton.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.styles.mjs","names":[],"sources":["../../src/skeleton/skeleton.styles.ts"],"sourcesContent":["import type {\n  NoviRadius,\n  SlotMap,\n  skeletonRequiredSlots,\n  skeletonSlots,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\n\nconst slots = {\n  // opacity のパルスのみ。シマー（translate するグラデーション）は使わない。\n  // 動きで飾らないという Raster の原則に反するため。\n  root: 'block bg-[var(--novi-color-subtle)] motion-safe:animate-pulse',\n} satisfies SlotMap<typeof skeletonSlots, (typeof skeletonRequiredSlots)[number]>\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n  none: { root: 'rounded-[var(--novi-radius-none)]' },\n  sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n  md: { root: 'rounded-[var(--novi-radius-md)]' },\n  lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n  full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Skeleton のスタイル定義。\n *\n * @example\n * const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })\n */\nexport const skeletonStyles = tv({\n  slots,\n  variants: { radius },\n  defaultVariants: { radius: 'none' },\n})\n\nexport type SkeletonStyleProps = Parameters<typeof skeletonStyles>[0]\n"],"mappings":";;;;;;;AA6BA,MAAa,iBAAiB,GAAG;CAC/B,SAlBA,MAAM,gEAkBN;CACA,UAAU,EAAE;EAfZ,MAAM,EAAE,MAAM,oCAAoC;EAClD,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,MAAM,EAAE,MAAM,oCAAoC;CAWtC,EAAO;CACnB,iBAAiB,EAAE,QAAQ,OAAO;AACpC,CAAC"}

package/dist/spinner/index.d.mts

@@ -0,0 +1,3 @@
+import { Spinner } from "./spinner.mjs";
+import { SpinnerStyleProps, spinnerStyles } from "./spinner.styles.mjs";
+export { Spinner, type SpinnerStyleProps, spinnerStyles };

package/dist/spinner/spinner.d.mts

@@ -0,0 +1,15 @@
+import { SpinnerProps } from "@novi-ui/core";
+//#region src/spinner/spinner.d.ts
+/**
+ * 処理中であることを示す回転表示。
+ *
+ * `label` を渡すと画面にも表示される。渡さない場合も支援技術には
+ * 「読み込み中」と伝わるようにしてある。
+ *
+ * @example
+ * <Spinner label="読み込み中" />
+ */
+declare function Spinner({ size, color, label, className, classNames, id }: SpinnerProps): import("react").JSX.Element;
+//#endregion
+export { Spinner };
+//# sourceMappingURL=spinner.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.mts","names":[],"sources":["../../src/spinner/spinner.tsx"],"mappings":";;;;;;;;;;;iBAcgB,UAAU,MAAM,OAAO,OAAO,WAAW,YAAY,MAAM,+BAAY,IAAA"}

package/dist/spinner/spinner.mjs

@@ -0,0 +1,55 @@
+"use client";
+import { spinnerStyles } from "./spinner.styles.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/spinner/spinner.tsx
+/**
+* 処理中であることを示す回転表示。
+*
+* `label` を渡すと画面にも表示される。渡さない場合も支援技術には
+* 「読み込み中」と伝わるようにしてある。
+*
+* @example
+* <Spinner label="読み込み中" />
+*/
+function Spinner({ size, color, label, className, classNames, id }) {
+	const s = spinnerStyles({
+		size,
+		color
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		role: "status",
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children: [/* @__PURE__ */ jsxs("svg", {
+			"data-slot": "circle",
+			className: s.circle({ class: classNames?.circle }),
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				opacity: "0.2"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M21 12a9 9 0 0 0-9-9",
+				stroke: "currentColor",
+				strokeWidth: "2"
+			})]
+		}), label !== void 0 ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "label",
+			className: s.label({ class: classNames?.label }),
+			children: label
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "読み込み中"
+		})]
+	});
+}
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=spinner.mjs.map

package/dist/spinner/spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.mjs","names":[],"sources":["../../src/spinner/spinner.tsx"],"sourcesContent":["'use client'\n\nimport type { SpinnerProps } from '@novi-ui/core'\nimport { spinnerStyles } from './spinner.styles'\n\n/**\n * 処理中であることを示す回転表示。\n *\n * `label` を渡すと画面にも表示される。渡さない場合も支援技術には\n * 「読み込み中」と伝わるようにしてある。\n *\n * @example\n * <Spinner label=\"読み込み中\" />\n */\nexport function Spinner({ size, color, label, className, classNames, id }: SpinnerProps) {\n  const s = spinnerStyles({ size, color })\n\n  return (\n    <span\n      id={id}\n      role=\"status\"\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      <svg\n        data-slot=\"circle\"\n        className={s.circle({ class: classNames?.circle })}\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2\" opacity=\"0.2\" />\n        <path d=\"M21 12a9 9 0 0 0-9-9\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      </svg>\n\n      {label !== undefined ? (\n        <span data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n          {label}\n        </span>\n      ) : (\n        <span className=\"sr-only\">読み込み中</span>\n      )}\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,QAAQ,EAAE,MAAM,OAAO,OAAO,WAAW,YAAY,MAAoB;CACvF,MAAM,IAAI,cAAc;EAAE;EAAM;CAAM,CAAC;CAEvC,OACE,qBAAC,QAAD;EACM;EACJ,MAAK;EACL,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAJ5D,UAAA,CAME,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,EAAE,OAAO,EAAE,OAAO,YAAY,OAAO,CAAC;GACjD,SAAQ;GACR,MAAK;GACL,eAAY;GALd,UAAA,CAOE,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAI,QAAO;IAAe,aAAY;IAAI,SAAQ;GAAO,CAAA,GACnF,oBAAC,QAAD;IAAM,GAAE;IAAuB,QAAO;IAAe,aAAY;GAAK,CAAA,CACnE;EAEJ,CAAA,GAAA,UAAU,KAAA,IACT,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACpE,UAAA;EACG,CAAA,IAEN,oBAAC,QAAD;GAAM,WAAU;GAAU,UAAA;EAAW,CAAA,CAEnC;;AAEV"}

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: 'font-medium' } })
+ */
+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":";;;;;;;;cA4Ca,2CAAa;;IArBiB;;;IASA;;;;;;;;IATA;;;IASA;;;;;;;;IATA;;;IASA;;;;;;;KAkB/B,oBAAoB,kBAAkB"}

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-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'\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-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: '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/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":";;;;;;;;cA2Ea,0CAAY;;IAjCkB;;;IASD;IAAe;IAAe;;;;;;;;;;IAT7B;;;IASD;IAAe;IAAe;;;;;;;;;;IAT7B;;;IASD;IAAe;IAAe;;;;;;;;;KA8B5D,mBAAmB,kBAAkB"}