@novi-ui/flatlay 0.1.0

package/dist/select/select.d.mts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { SelectProps } from "@novi-ui/core";
+//#region src/select/select.d.ts
+interface SelectItemProps {
+  /** 選択値。`onSelectionChange` に渡る */
+  id: string;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * Select の選択肢。`Select` の子として置く。
+ *
+ * 選択済みの印は行頭の `▸`（両テーマはチェックマーク）。押下の反転と衝突しないよう、
+ * 状態は記号で、押した瞬間は面の反転で示すという役割分担にしている。
+ *
+ * @example
+ * <SelectItem id="tokyo">東京都</SelectItem>
+ */
+declare function SelectItem({ id, isDisabled, children, className }: SelectItemProps): import("react").JSX.Element;
+/**
+ * 一覧から1つ選ぶ。**選択肢はトリガーの直後、フローの中に展開される**
+ * （Raster は隣に浮き、Tactile は画面下端のシート）。
+ *
+ * 開くと後続が押し下げられるので、何かが隠れることが無い。
+ * 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。
+ *
+ * トリガーは `<button>` で編集可能要素ではないため IME の変換は発生しない。
+ * テキスト入力を伴う選択が必要な場合は ComboBox を使う（MVP の対象外）。
+ *
+ * @example
+ * <Select label="都道府県" selectedKey={pref} onSelectionChange={setPref}>
+ *   <SelectItem id="tokyo">東京都</SelectItem>
+ *   <SelectItem id="osaka">大阪府</SelectItem>
+ * </Select>
+ */
+declare function Select({ variant, size, radius, label, placeholder, description, errorMessage, name, selectedKey, defaultSelectedKey, onSelectionChange, isOpen, defaultOpen, onOpenChange, isDisabled, isRequired, isInvalid, children, className, classNames, id }: SelectProps): import("react").JSX.Element;
+//#endregion
+export { Select, SelectItem, SelectItemProps };
+//# sourceMappingURL=select.d.mts.map

package/dist/select/select.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.mts","names":[],"sources":["../../src/select/select.tsx"],"mappings":";;;UAiBiB;;EAEf;EACA;EACA,WAAW;EACX;;;;;;;;;;;iBAYc,aAAa,IAAI,YAAY,UAAU,aAAa,kCAAe,IAAA;;;;;;;;;;;;;;;;;iBAqCnE,SACd,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,aACA,oBACA,mBACA,QACA,aACA,cACA,YACA,YACA,WACA,UACA,WACA,YACA,MACC,8BAAW,IAAA"}

package/dist/select/select.mjs

@@ -0,0 +1,121 @@
+"use client";
+import { InflowPopover } from "../styles/inflow.mjs";
+import { optionMarkerClass, selectStyles } from "./select.styles.mjs";
+import { Button, FieldError, Label, ListBox, ListBoxItem, Select, SelectValue, Text } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/select/select.tsx
+/**
+* Select の選択肢。`Select` の子として置く。
+*
+* 選択済みの印は行頭の `▸`（両テーマはチェックマーク）。押下の反転と衝突しないよう、
+* 状態は記号で、押した瞬間は面の反転で示すという役割分担にしている。
+*
+* @example
+* <SelectItem id="tokyo">東京都</SelectItem>
+*/
+function SelectItem({ id, isDisabled, children, className }) {
+	return /* @__PURE__ */ jsx(ListBoxItem, {
+		id,
+		isDisabled,
+		textValue: typeof children === "string" ? children : void 0,
+		"data-slot": "option",
+		className: className ?? selectStyles().option(),
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: optionMarkerClass,
+			children: isSelected ? "▸" : ""
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		})] })
+	});
+}
+/**
+* 一覧から1つ選ぶ。**選択肢はトリガーの直後、フローの中に展開される**
+* （Raster は隣に浮き、Tactile は画面下端のシート）。
+*
+* 開くと後続が押し下げられるので、何かが隠れることが無い。
+* 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。
+*
+* トリガーは `<button>` で編集可能要素ではないため IME の変換は発生しない。
+* テキスト入力を伴う選択が必要な場合は ComboBox を使う（MVP の対象外）。
+*
+* @example
+* <Select label="都道府県" selectedKey={pref} onSelectionChange={setPref}>
+*   <SelectItem id="tokyo">東京都</SelectItem>
+*   <SelectItem id="osaka">大阪府</SelectItem>
+* </Select>
+*/
+function Select$1({ variant, size, radius, label, placeholder = "選択してください", description, errorMessage, name, selectedKey, defaultSelectedKey, onSelectionChange, isOpen, defaultOpen, onOpenChange, isDisabled, isRequired, isInvalid, children, className, classNames, id }) {
+	const s = selectStyles({
+		variant,
+		size,
+		radius
+	});
+	return /* @__PURE__ */ jsxs(Select, {
+		id,
+		name,
+		selectedKey,
+		defaultSelectedKey,
+		onSelectionChange: (key) => onSelectionChange?.(key === null ? null : String(key)),
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		isDisabled,
+		isRequired,
+		isInvalid,
+		placeholder,
+		"data-slot": "root",
+		className: `group ${s.root({ class: [className, classNames?.root] })}`,
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsx(Label, {
+				"data-slot": "label",
+				className: s.label({ class: classNames?.label }),
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				"data-slot": "trigger",
+				className: s.trigger({ class: classNames?.trigger }),
+				children: [/* @__PURE__ */ jsx(SelectValue, {
+					"data-slot": "value",
+					className: s.value({ class: classNames?.value })
+				}), /* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					"data-slot": "icon",
+					className: s.icon({ class: classNames?.icon }),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "group-data-[open]:hidden",
+						children: "▾"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "hidden group-data-[open]:inline",
+						children: "▴"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(InflowPopover, {
+				dataSlot: "popover",
+				className: s.popover({ class: classNames?.popover }),
+				children: /* @__PURE__ */ jsx(ListBox, {
+					"data-slot": "listbox",
+					className: s.listbox({ class: classNames?.listbox }),
+					children
+				})
+			}),
+			description !== void 0 && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				"data-slot": "description",
+				className: s.description({ class: classNames?.description }),
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				"data-slot": "errorMessage",
+				className: s.errorMessage({ class: classNames?.errorMessage }),
+				children: errorMessage
+			})
+		]
+	});
+}
+//#endregion
+export { Select$1 as Select, SelectItem };
+
+//# sourceMappingURL=select.mjs.map

package/dist/select/select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.mjs","names":["Select","RACSelect"],"sources":["../../src/select/select.tsx"],"sourcesContent":["'use client'\n\nimport type { SelectProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport {\n  Button,\n  FieldError,\n  Label,\n  ListBox,\n  ListBoxItem,\n  Select as RACSelect,\n  SelectValue,\n  Text,\n} from 'react-aria-components'\nimport { InflowPopover } from '../styles/inflow'\nimport { optionMarkerClass, selectStyles } from './select.styles'\n\nexport interface SelectItemProps {\n  /** 選択値。`onSelectionChange` に渡る */\n  id: string\n  isDisabled?: boolean\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * Select の選択肢。`Select` の子として置く。\n *\n * 選択済みの印は行頭の `▸`（両テーマはチェックマーク）。押下の反転と衝突しないよう、\n * 状態は記号で、押した瞬間は面の反転で示すという役割分担にしている。\n *\n * @example\n * <SelectItem id=\"tokyo\">東京都</SelectItem>\n */\nexport function SelectItem({ id, isDisabled, children, className }: SelectItemProps) {\n  return (\n    <ListBoxItem\n      id={id}\n      isDisabled={isDisabled}\n      textValue={typeof children === 'string' ? children : undefined}\n      data-slot=\"option\"\n      className={className ?? selectStyles().option()}\n    >\n      {({ isSelected }) => (\n        <>\n          <span aria-hidden=\"true\" className={optionMarkerClass}>\n            {isSelected ? '▸' : ''}\n          </span>\n          <span className=\"truncate\">{children}</span>\n        </>\n      )}\n    </ListBoxItem>\n  )\n}\n\n/**\n * 一覧から1つ選ぶ。**選択肢はトリガーの直後、フローの中に展開される**\n * （Raster は隣に浮き、Tactile は画面下端のシート）。\n *\n * 開くと後続が押し下げられるので、何かが隠れることが無い。\n * 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。\n *\n * トリガーは `<button>` で編集可能要素ではないため IME の変換は発生しない。\n * テキスト入力を伴う選択が必要な場合は ComboBox を使う（MVP の対象外）。\n *\n * @example\n * <Select label=\"都道府県\" selectedKey={pref} onSelectionChange={setPref}>\n *   <SelectItem id=\"tokyo\">東京都</SelectItem>\n *   <SelectItem id=\"osaka\">大阪府</SelectItem>\n * </Select>\n */\nexport function Select({\n  variant,\n  size,\n  radius,\n  label,\n  placeholder = '選択してください',\n  description,\n  errorMessage,\n  name,\n  selectedKey,\n  defaultSelectedKey,\n  onSelectionChange,\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  isDisabled,\n  isRequired,\n  isInvalid,\n  children,\n  className,\n  classNames,\n  id,\n}: SelectProps) {\n  const s = selectStyles({ variant, size, radius })\n\n  return (\n    <RACSelect\n      id={id}\n      name={name}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={(key) => onSelectionChange?.(key === null ? null : String(key))}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      isDisabled={isDisabled}\n      isRequired={isRequired}\n      isInvalid={isInvalid}\n      placeholder={placeholder}\n      data-slot=\"root\"\n      // trigger 側から invalid / open を参照するために group を付ける\n      className={`group ${s.root({ class: [className, classNames?.root] })}`}\n    >\n      {label !== undefined && (\n        <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n          {label}\n        </Label>\n      )}\n\n      <Button data-slot=\"trigger\" className={s.trigger({ class: classNames?.trigger })}>\n        <SelectValue data-slot=\"value\" className={s.value({ class: classNames?.value })} />\n        <span aria-hidden=\"true\" data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n          {/* 回さずに差し替える。開いている間だけ字が反転する */}\n          <span className=\"group-data-[open]:hidden\">▾</span>\n          <span className=\"hidden group-data-[open]:inline\">▴</span>\n        </span>\n      </Button>\n\n      {/* 展開部はトリガーの直後。ここに面が生えることで、description 以降が押し下がる */}\n      <InflowPopover dataSlot=\"popover\" className={s.popover({ class: classNames?.popover })}>\n        <ListBox data-slot=\"listbox\" className={s.listbox({ class: classNames?.listbox })}>\n          {children}\n        </ListBox>\n      </InflowPopover>\n\n      {description !== undefined && (\n        <Text\n          slot=\"description\"\n          data-slot=\"description\"\n          className={s.description({ class: classNames?.description })}\n        >\n          {description}\n        </Text>\n      )}\n\n      <FieldError\n        data-slot=\"errorMessage\"\n        className={s.errorMessage({ class: classNames?.errorMessage })}\n      >\n        {errorMessage}\n      </FieldError>\n    </RACSelect>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAgB,WAAW,EAAE,IAAI,YAAY,UAAU,aAA8B;CACnF,OACE,oBAAC,aAAD;EACM;EACQ;EACZ,WAAW,OAAO,aAAa,WAAW,WAAW,KAAA;EACrD,aAAU;EACV,WAAW,aAAa,aAAa,CAAC,CAAC,OAAO;EAE5C,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAW;GACjC,UAAA,aAAa,MAAM;EAChB,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,CAC3C,EAAA,CAAA;CAEO,CAAA;AAEjB;;;;;;;;;;;;;;;;;AAkBA,SAAgBA,SAAO,EACrB,SACA,MACA,QACA,OACA,cAAc,YACd,aACA,cACA,MACA,aACA,oBACA,mBACA,QACA,aACA,cACA,YACA,YACA,WACA,UACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAS;EAAM;CAAO,CAAC;CAEhD,OACE,qBAACC,QAAD;EACM;EACE;EACO;EACO;EACpB,oBAAoB,QAAQ,oBAAoB,QAAQ,OAAO,OAAO,OAAO,GAAG,CAAC;EACzE;EACK;EACC;EACF;EACA;EACD;EACE;EACb,aAAU;EAEV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAfrE,UAAA;GAiBG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,qBAAC,QAAD;IAAQ,aAAU;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAA/E,UAAA,CACE,oBAAC,aAAD;KAAa,aAAU;KAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IAAI,CAAA,GAClF,qBAAC,QAAD;KAAM,eAAY;KAAO,aAAU;KAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAAvF,UAAA,CAEE,oBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA;KAAO,CAAA,GAClD,oBAAC,QAAD;MAAM,WAAU;MAAkC,UAAA;KAAO,CAAA,CACrD;IACA,CAAA,CAAA;;GAGR,oBAAC,eAAD;IAAe,UAAS;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IACnF,UAAA,oBAAC,SAAD;KAAS,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E;IACM,CAAA;GACI,CAAA;GAEd,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAGR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EACH;;AAEf"}

package/dist/select/select.styles.d.mts

@@ -0,0 +1,85 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/select/select.styles.d.ts
+/**
+ * Select のスタイル定義。
+ *
+ * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、
+ * ここで `position` 系を書いても効かない（書く必要も無い）。
+ *
+ * @example
+ * import { selectStyles } from '@novi-ui/flatlay'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const mySelect = tv({ extend: selectStyles, slots: { option: 'px-4' } })
+ */
+declare const selectStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    trigger: string;
+    option: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    trigger: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    trigger: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  trigger: string;
+  value: string;
+  icon: string;
+  popover: string;
+  listbox: string;
+  option: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    trigger: string;
+    option: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    trigger: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    trigger: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  trigger: string;
+  value: string;
+  icon: string;
+  popover: string;
+  listbox: string;
+  option: string;
+  description: string;
+  errorMessage: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    trigger: string;
+    option: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    trigger: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    trigger: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  trigger: string;
+  value: string;
+  icon: string;
+  popover: string;
+  listbox: string;
+  option: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type SelectStyleProps = Parameters<typeof selectStyles>[0];
+//#endregion
+export { SelectStyleProps, selectStyles };
+//# sourceMappingURL=select.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.d.mts","names":[],"sources":["../../src/select/select.styles.ts"],"mappings":";;;;;;;;;;;;;;cA+Ha,0CAAY;;IAnDmB;IAAgB;;;IAeZ;;;IAYE;;;;;;;;;;;;;;;IA3BN;IAAgB;;;IAeZ;;;IAYE;;;;;;;;;;;;;;;IA3BN;IAAgB;;;IAeZ;;;IAYE;;;;;;;;;;;;;;KA+BtC,mBAAmB,kBAAkB"}

package/dist/select/select.styles.mjs

@@ -0,0 +1,111 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/select/select.styles.ts
+/**
+* Flatlay の Select は **インフロー押し下げ**（design.md 着手条件2）。
+*
+* Raster はトリガーの隣に浮き、Tactile は画面下端のシートで出る。Flatlay には
+* 浮かせる先が無いので、**展開部はフローの中に生えて後続を押し下げる**。
+* 配置そのものは `styles/inflow.tsx` が担い、ここは面の見た目だけを決める。
+*
+* 影が使えない以上、展開面が「面である」ことを示せるのは罫線だけ。
+* 全 slot が幅のある線を持ち、行の切れ目も線で示す。
+*/
+const slots = {
+	root: ["flex flex-col gap-1.5", "[&>[data-novi-inflow]:empty]:hidden"].join(" "),
+	label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
+	trigger: [
+		"flex items-center justify-between gap-2 w-full text-left",
+		"text-[var(--novi-color-fg)]",
+		"border",
+		"rounded-[var(--novi-radius-sm)]",
+		"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
+		"group-data-[invalid]:border-[var(--novi-color-danger)]",
+		"transition-[background-color,border-color,color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		focusRing,
+		disabledState
+	].join(" "),
+	value: "truncate data-[placeholder]:text-[var(--novi-color-muted)]",
+	icon: `shrink-0 leading-none text-[var(--novi-color-muted)] ${mono}`,
+	popover: [
+		"border border-[var(--novi-color-border-strong)]",
+		"bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]",
+		"rounded-[var(--novi-radius-sm)]",
+		"overflow-hidden"
+	].join(" "),
+	listbox: "outline-none flex flex-col divide-y divide-[var(--novi-color-border)]",
+	option: [
+		"flex items-center gap-2 px-2 cursor-pointer outline-none",
+		"text-[var(--novi-color-fg)]",
+		"data-[focused]:bg-[var(--novi-color-subtle)]",
+		"data-[selected]:font-medium",
+		"transition-[background-color,color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		disabledState
+	].join(" "),
+	description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]"
+};
+/**
+* Select のスタイル定義。
+*
+* 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、
+* ここで `position` 系を書いても効かない（書く必要も無い）。
+*
+* @example
+* import { selectStyles } from '@novi-ui/flatlay'
+* import { tv } from 'tailwind-variants'
+*
+* const mySelect = tv({ extend: selectStyles, slots: { option: 'px-4' } })
+*/
+const selectStyles = tv({
+	slots,
+	variants: {
+		size: {
+			sm: {
+				trigger: "h-7 px-2.5 text-[length:var(--novi-text-sm)]",
+				option: "h-6 text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				trigger: "h-8 px-3 text-[length:var(--novi-text-base)]",
+				option: "h-7 text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				trigger: "h-10 px-4 text-[length:var(--novi-text-base)]",
+				option: "h-8 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)]" }
+		},
+		variant: {
+			solid: { trigger: "bg-[var(--novi-color-surface)] border-[var(--novi-color-border-strong)]" },
+			outline: { trigger: "bg-transparent border-[var(--novi-color-border-strong)]" },
+			soft: { trigger: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]" },
+			ghost: { trigger: "bg-transparent border-transparent hover:bg-[var(--novi-color-subtle)]" },
+			plain: { trigger: "bg-transparent border-transparent px-0 underline underline-offset-4" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		radius: "sm",
+		variant: "solid"
+	}
+});
+/**
+* 選択済みの印が立つ場所。**幅を常に確保する**ので、選ぶ前後で行がずれない。
+*
+* チェックマーク（両テーマ）ではなく帳票のインデックス記号にしているのは、
+* 記号そのものが等幅の列として読めるから。`1ch` は mono の 1 文字ぶん。
+*/
+const optionMarkerClass = `w-[1ch] shrink-0 text-[var(--novi-color-primary)] ${mono}`;
+//#endregion
+export { optionMarkerClass, 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'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Select は **インフロー押し下げ**（design.md 着手条件2）。\n *\n * Raster はトリガーの隣に浮き、Tactile は画面下端のシートで出る。Flatlay には\n * 浮かせる先が無いので、**展開部はフローの中に生えて後続を押し下げる**。\n * 配置そのものは `styles/inflow.tsx` が担い、ここは面の見た目だけを決める。\n *\n * 影が使えない以上、展開面が「面である」ことを示せるのは罫線だけ。\n * 全 slot が幅のある線を持ち、行の切れ目も線で示す。\n */\nconst slots = {\n  root: [\n    'flex flex-col gap-1.5',\n    // 展開部の置き場所（`data-novi-inflow`）は閉じている間も残る。flex の gap は\n    // 空の子にも掛かるので、畳まないと閉じたまま余白が 1 つ増える\n    '[&>[data-novi-inflow]:empty]:hidden',\n  ].join(' '),\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n  trigger: [\n    'flex items-center justify-between gap-2 w-full text-left',\n    'text-[var(--novi-color-fg)]',\n    // 罫線の幅は全 variant が持つ。色は variant が決める（Button と同じ型）\n    'border',\n    'rounded-[var(--novi-radius-sm)]',\n    // 押下は反転。開閉という状態は矢印が持ち、押した瞬間だけを面が返す（ADR-F3）\n    'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n    'group-data-[invalid]:border-[var(--novi-color-danger)]',\n    'transition-[background-color,border-color,color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  value: 'truncate data-[placeholder]:text-[var(--novi-color-muted)]',\n  // 開閉の向きは記号で示す。回すのは z 軸の語彙なので、字を差し替える（FR-11）\n  icon: `shrink-0 leading-none text-[var(--novi-color-muted)] ${mono}`,\n  popover: [\n    // ここが構造差そのもの。浮かないので、面の存在は罫線が引き受ける\n    'border border-[var(--novi-color-border-strong)]',\n    'bg-[var(--novi-color-bg)] text-[var(--novi-color-fg)]',\n    'rounded-[var(--novi-radius-sm)]',\n    'overflow-hidden',\n  ].join(' '),\n  // 行の切れ目も線。押し下げた面の中で、どこまでが 1 行かを示せるのはこれだけ\n  listbox: 'outline-none flex flex-col divide-y divide-[var(--novi-color-border)]',\n  option: [\n    'flex items-center gap-2 px-2 cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'data-[focused]:bg-[var(--novi-color-subtle)]',\n    'data-[selected]:font-medium',\n    'transition-[background-color,color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    disabledState,\n  ].join(' '),\n  description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n  errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof selectSlots, (typeof selectRequiredSlots)[number]>\n\n/**\n * `size` はトリガーの寸法と行の密度。**どちらも帳票の行**（Tactile は指の下限 48px）。\n *\n * 展開しても 1 行が 28px 前後に収まるので、押し下げ量が読める範囲に留まる。\n * 行を大きくすると、開いた瞬間にページが視界の外まで伸びる。\n */\nconst size: VariantMap<NoviSize, { trigger: string; option: string }> = {\n  sm: {\n    trigger: 'h-7 px-2.5 text-[length:var(--novi-text-sm)]',\n    option: 'h-6 text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    trigger: 'h-8 px-3 text-[length:var(--novi-text-base)]',\n    option: 'h-7 text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    trigger: 'h-10 px-4 text-[length:var(--novi-text-base)]',\n    option: 'h-8 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 は `color` を受け取らないので、\n * Button のようなローカル変数は要らず、中立トークンだけで書ける。\n */\nconst variant: VariantMap<NoviVariant, { trigger: string }> = {\n  solid: { trigger: 'bg-[var(--novi-color-surface)] border-[var(--novi-color-border-strong)]' },\n  outline: { trigger: 'bg-transparent border-[var(--novi-color-border-strong)]' },\n  soft: { trigger: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n  ghost: {\n    trigger: 'bg-transparent border-transparent hover:bg-[var(--novi-color-subtle)]',\n  },\n  plain: {\n    trigger: 'bg-transparent border-transparent px-0 underline underline-offset-4',\n  },\n}\n\n/**\n * Select のスタイル定義。\n *\n * 展開部の位置は `InflowPopover` が `!` 付きのリセットで固定するので、\n * ここで `position` 系を書いても効かない（書く必要も無い）。\n *\n * @example\n * import { selectStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const mySelect = tv({ extend: selectStyles, slots: { option: 'px-4' } })\n */\nexport const selectStyles = tv({\n  slots,\n  // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n  variants: { size, radius, variant },\n  defaultVariants: { size: 'md', radius: 'sm', variant: 'solid' },\n})\n\nexport type SelectStyleProps = Parameters<typeof selectStyles>[0]\n\n/**\n * 選択済みの印が立つ場所。**幅を常に確保する**ので、選ぶ前後で行がずれない。\n *\n * チェックマーク（両テーマ）ではなく帳票のインデックス記号にしているのは、\n * 記号そのものが等幅の列として読めるから。`1ch` は mono の 1 文字ぶん。\n */\nexport const optionMarkerClass = `w-[1ch] shrink-0 text-[var(--novi-color-primary)] ${mono}`\n"],"mappings":";;;;;;;;;;;;;;AAuBA,MAAM,QAAQ;CACZ,MAAM,CACJ,yBAGA,qCACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,SAAS;EACP;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CAEP,MAAM,wDAAwD;CAC9D,SAAS;EAEP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,SAAS;CACT,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;;;;AA2DA,MAAa,eAAe,GAAG;CAC7B;CAEA,UAAU;EAAE;GArDZ,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;GACA,IAAI;IACF,SAAS;IACT,QAAQ;GACV;EA0CY;EAAM;GAtClB,MAAM,EAAE,SAAS,oCAAoC;GACrD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,IAAI,EAAE,SAAS,kCAAkC;GACjD,MAAM,EAAE,SAAS,oCAAoC;EAkCnC;EAAQ;GA1B1B,OAAO,EAAE,SAAS,0EAA0E;GAC5F,SAAS,EAAE,SAAS,0DAA0D;GAC9E,MAAM,EAAE,SAAS,kEAAkE;GACnF,OAAO,EACL,SAAS,wEACX;GACA,OAAO,EACL,SAAS,sEACX;EAkB0B;CAAQ;CAClC,iBAAiB;EAAE,MAAM;EAAM,QAAQ;EAAM,SAAS;CAAQ;AAChE,CAAC;;;;;;;AAUD,MAAa,oBAAoB,qDAAqD"}

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,47 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/skeleton/skeleton.styles.d.ts
+/**
+ * Skeleton のスタイル定義。
+ *
+ * 既定は `none`。場所取りは記入前の空欄そのもので、両テーマのように
+ * 中身の角丸を先取りしない（Flatlay の `sm` は 2px なので差は僅かだが、
+ * 空欄が角を持たないことは書類の見た目として意味がある）。
+ *
+ * @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;
+  }>;
+}, {
+  /**
+   * 濃さのパルスだけ。シマー（グラデーションを translate させる光沢）は
+   * 光源を前提にした表現で、影を持たない Flatlay では成立しない（FR-11）。
+   */
+  root: string;
+}, undefined, {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  /**
+   * 濃さのパルスだけ。シマー（グラデーションを translate させる光沢）は
+   * 光源を前提にした表現で、影を持たない Flatlay では成立しない（FR-11）。
+   */
+  root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  /**
+   * 濃さのパルスだけ。シマー（グラデーションを translate させる光沢）は
+   * 光源を前提にした表現で、影を持たない Flatlay では成立しない（FR-11）。
+   */
+  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":";;;;;;;;;;;;cAmCa,4CAAc;;IAlBkB;;;;;;;;;;IAAA;;;;;;;;;;IAAA;;;;;;;;;KAwBjC,qBAAqB,kBAAkB"}

package/dist/skeleton/skeleton.styles.mjs

@@ -0,0 +1,31 @@
+import { tv } from "tailwind-variants";
+/**
+* Skeleton のスタイル定義。
+*
+* 既定は `none`。場所取りは記入前の空欄そのもので、両テーマのように
+* 中身の角丸を先取りしない（Flatlay の `sm` は 2px なので差は僅かだが、
+* 空欄が角を持たないことは書類の見た目として意味がある）。
+*
+* @example
+* const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
+*/
+const skeletonStyles = tv({
+	slots: { 
+	/**
+	* 濃さのパルスだけ。シマー（グラデーションを translate させる光沢）は
+	* 光源を前提にした表現で、影を持たない Flatlay では成立しない（FR-11）。
+	*/
+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  /**\n   * 濃さのパルスだけ。シマー（グラデーションを translate させる光沢）は\n   * 光源を前提にした表現で、影を持たない Flatlay では成立しない（FR-11）。\n   */\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 * 既定は `none`。場所取りは記入前の空欄そのもので、両テーマのように\n * 中身の角丸を先取りしない（Flatlay の `sm` は 2px なので差は僅かだが、\n * 空欄が角を持たないことは書類の見た目として意味がある）。\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":";;;;;;;;;;;AAmCA,MAAa,iBAAiB,GAAG;CAC/B;;;;;AAtBA,MAAM,gEAsBN;CACA,UAAU,EAAE;EAnBZ,MAAM,EAAE,MAAM,oCAAoC;EAClD,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,IAAI,EAAE,MAAM,kCAAkC;EAC9C,MAAM,EAAE,MAAM,oCAAoC;CAetC,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      {/* 線端は切り落とし（既定の butt）。丸めると製図の線ではなくなる */}\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,CAOE,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"}