@novi-ui/flatlay 0.1.0

package/dist/accordion/accordion.styles.mjs

@@ -0,0 +1,91 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/accordion/accordion.styles.ts
+/**
+* Accordion は Flatlay の**主役**。
+*
+* 他のすべては「浮くものをフローに直した」形だが、Accordion だけは
+* もともとインフロー展開で、直す必要が無かった。z 軸を持たないモデルが
+* 無理なく成立する唯一の既存パターンで、他の展開系はここに寄せてある。
+*
+* 開閉の印は `▸` / `▾` の差し替え。シェブロンの回転（Tactile）は使わない。
+* 回転は「同じものが向きを変えた」という 3 次元の言葉で、字を替えるのは
+* 「状態が別の記号になった」という帳票の言葉になる（FR-11 / ADR-F7）。
+*
+* 印が**行頭**にあるのは、Select の選択済み `▸` と同じ列の作り方。
+* 右端（両テーマ）に置くと見出しの長さで位置が変わり、縦に読めなくなる。
+*/
+const slots = {
+	root: "flex flex-col border-t border-[var(--novi-color-border-strong)]",
+	item: "border-b border-[var(--novi-color-border-strong)]",
+	heading: "m-0",
+	trigger: [
+		"flex items-center gap-2 w-full text-left",
+		"cursor-pointer outline-none",
+		"text-[var(--novi-color-fg)]",
+		"hover:bg-[var(--novi-color-subtle)]",
+		"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
+		"transition-[background-color,color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
+		focusRing
+	].join(" "),
+	indicator: `w-[1ch] shrink-0 leading-none text-[var(--novi-color-muted)] ${mono}`,
+	panel: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]"
+};
+/**
+* Accordion のスタイル定義。
+*
+* @example
+* const myAccordion = tv({ extend: accordionStyles, slots: { panel: 'pt-2' } })
+*/
+const accordionStyles = tv({
+	slots,
+	variants: {
+		size: {
+			sm: {
+				trigger: "px-2 py-1.5 text-[length:var(--novi-text-sm)]",
+				panel: "pl-6 pr-2 pb-1.5"
+			},
+			md: {
+				trigger: "px-3 py-2 text-[length:var(--novi-text-base)]",
+				panel: "pl-8 pr-3 pb-2"
+			},
+			lg: {
+				trigger: "px-4 py-3 text-[length:var(--novi-text-base)]",
+				panel: "pl-10 pr-4 pb-3"
+			}
+		},
+		variant: {
+			solid: {
+				root: "border-t-0",
+				item: "bg-[var(--novi-color-subtle)] border-b"
+			},
+			outline: {
+				root: "border-t",
+				item: "border-b"
+			},
+			soft: {
+				root: "border-t-0",
+				item: "bg-[var(--novi-color-subtle)] border-b"
+			},
+			ghost: {
+				root: "border-t-0",
+				item: "border-b border-[var(--novi-color-border)]"
+			},
+			plain: {
+				root: "border-t-0",
+				item: "border-b-0"
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		size: "md"
+	}
+});
+//#endregion
+export { accordionStyles };
+
+//# sourceMappingURL=accordion.styles.mjs.map

package/dist/accordion/accordion.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.styles.mjs","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"sourcesContent":["import type {\n  accordionRequiredSlots,\n  accordionSlots,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Accordion は Flatlay の**主役**。\n *\n * 他のすべては「浮くものをフローに直した」形だが、Accordion だけは\n * もともとインフロー展開で、直す必要が無かった。z 軸を持たないモデルが\n * 無理なく成立する唯一の既存パターンで、他の展開系はここに寄せてある。\n *\n * 開閉の印は `▸` / `▾` の差し替え。シェブロンの回転（Tactile）は使わない。\n * 回転は「同じものが向きを変えた」という 3 次元の言葉で、字を替えるのは\n * 「状態が別の記号になった」という帳票の言葉になる（FR-11 / ADR-F7）。\n *\n * 印が**行頭**にあるのは、Select の選択済み `▸` と同じ列の作り方。\n * 右端（両テーマ）に置くと見出しの長さで位置が変わり、縦に読めなくなる。\n */\nconst slots = {\n  root: 'flex flex-col border-t border-[var(--novi-color-border-strong)]',\n  item: 'border-b border-[var(--novi-color-border-strong)]',\n  // 見出し要素とその中のボタンを分ける。支援技術のために必要\n  heading: 'm-0',\n  trigger: [\n    'flex items-center gap-2 w-full text-left',\n    'cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'hover:bg-[var(--novi-color-subtle)]',\n    // 押した瞬間だけ反転する。開いているという状態は記号が持つ（ADR-F3）\n    'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n    'transition-[background-color,color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n    focusRing,\n  ].join(' '),\n  // 幅を 1 文字ぶんに固定する。`▸` と `▾` で見出しの開始位置がずれない\n  indicator: `w-[1ch] shrink-0 leading-none text-[var(--novi-color-muted)] ${mono}`,\n  panel: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n} satisfies SlotMap<typeof accordionSlots, (typeof accordionRequiredSlots)[number]>\n\n/**\n * 罫線の引き方だけが変わる。地で段差を作れないので、\n * `solid` と `soft` は「地を一段落とした行」として同じ見え方になる。\n */\nconst variant: VariantMap<NoviVariant, { root: string; item: string }> = {\n  solid: { root: 'border-t-0', item: 'bg-[var(--novi-color-subtle)] border-b' },\n  outline: { root: 'border-t', item: 'border-b' },\n  soft: { root: 'border-t-0', item: 'bg-[var(--novi-color-subtle)] border-b' },\n  ghost: { root: 'border-t-0', item: 'border-b border-[var(--novi-color-border)]' },\n  plain: { root: 'border-t-0', item: 'border-b-0' },\n}\n\n/** 行の高さは Select / Menu と同じ帳票の刻み。パネルは見出しの字下げに揃える。 */\nconst size: VariantMap<NoviSize, { trigger: string; panel: string }> = {\n  sm: { trigger: 'px-2 py-1.5 text-[length:var(--novi-text-sm)]', panel: 'pl-6 pr-2 pb-1.5' },\n  md: { trigger: 'px-3 py-2 text-[length:var(--novi-text-base)]', panel: 'pl-8 pr-3 pb-2' },\n  lg: { trigger: 'px-4 py-3 text-[length:var(--novi-text-base)]', panel: 'pl-10 pr-4 pb-3' },\n}\n\n/**\n * Accordion のスタイル定義。\n *\n * @example\n * const myAccordion = tv({ extend: accordionStyles, slots: { panel: 'pt-2' } })\n */\nexport const accordionStyles = tv({\n  slots,\n  // `variant` は最後に宣言する。先に書くと size のクラスに負ける（申し送り6）\n  variants: { size, variant },\n  defaultVariants: { variant: 'outline', size: 'md' },\n})\n\nexport type AccordionStyleProps = Parameters<typeof accordionStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;;;;;AA0BA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CAEN,SAAS;CACT,SAAS;EACP;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW,gEAAgE;CAC3E,OAAO;AACT;;;;;;;AA2BA,MAAa,kBAAkB,GAAG;CAChC;CAEA,UAAU;EAAE;GAdZ,IAAI;IAAE,SAAS;IAAiD,OAAO;GAAmB;GAC1F,IAAI;IAAE,SAAS;IAAiD,OAAO;GAAiB;GACxF,IAAI;IAAE,SAAS;IAAiD,OAAO;GAAkB;EAY7E;EAAM;GAvBlB,OAAO;IAAE,MAAM;IAAc,MAAM;GAAyC;GAC5E,SAAS;IAAE,MAAM;IAAY,MAAM;GAAW;GAC9C,MAAM;IAAE,MAAM;IAAc,MAAM;GAAyC;GAC3E,OAAO;IAAE,MAAM;IAAc,MAAM;GAA6C;GAChF,OAAO;IAAE,MAAM;IAAc,MAAM;GAAa;EAmB9B;CAAQ;CAC1B,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAK;AACpD,CAAC"}

package/dist/accordion/index.d.mts

@@ -0,0 +1,3 @@
+import { Accordion, AccordionItem, AccordionItemProps } from "./accordion.mjs";
+import { AccordionStyleProps, accordionStyles } from "./accordion.styles.mjs";
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, accordionStyles };

package/dist/avatar/avatar.d.mts

@@ -0,0 +1,22 @@
+import { AvatarProps } from "@novi-ui/core";
+//#region src/avatar/avatar.d.ts
+/**
+ * 表示名からイニシャルを作る。
+ *
+ * 日本語の氏名は空白で区切られないことが多いので、
+ * 空白があれば各語の先頭、なければ先頭1文字を使う。
+ */
+declare function initialsOf(name: string): string;
+/**
+ * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。
+ *
+ * Flatlay では枠だけが丸くなる（Radio と並ぶ `radius-full` の例外）。
+ * `badge` は枠の外に浮かず、**内側の下端**に収まる。
+ *
+ * @example
+ * <Avatar src="/me.jpg" name="山本 太郎" />
+ */
+declare function Avatar({ size, radius, src, name, fallback, badge, className, classNames, id }: AvatarProps): import("react").JSX.Element;
+//#endregion
+export { Avatar, initialsOf };
+//# sourceMappingURL=avatar.d.mts.map

package/dist/avatar/avatar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.mts","names":[],"sources":["../../src/avatar/avatar.tsx"],"mappings":";;;;;;;;iBAYgB,WAAW;;;;;;;;;;iBAmBX,SACd,MACA,QACA,KACA,MACA,UACA,OACA,WACA,YACA,MACC,8BAAW,IAAA"}

package/dist/avatar/avatar.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { avatarStyles } from "./avatar.styles.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/avatar/avatar.tsx
+/**
+* 表示名からイニシャルを作る。
+*
+* 日本語の氏名は空白で区切られないことが多いので、
+* 空白があれば各語の先頭、なければ先頭1文字を使う。
+*/
+function initialsOf(name) {
+	const parts = name.trim().split(/\s+/).filter(Boolean);
+	if (parts.length === 0) return "";
+	if (parts.length === 1) return [...parts[0]][0] ?? "";
+	return parts.slice(0, 2).map((part) => [...part][0] ?? "").join("");
+}
+/**
+* 人や組織を表す画像。読み込みに失敗したら fallback を表示する。
+*
+* Flatlay では枠だけが丸くなる（Radio と並ぶ `radius-full` の例外）。
+* `badge` は枠の外に浮かず、**内側の下端**に収まる。
+*
+* @example
+* <Avatar src="/me.jpg" name="山本 太郎" />
+*/
+function Avatar({ size, radius, src, name, fallback, badge, className, classNames, id }) {
+	const s = avatarStyles({
+		size,
+		radius
+	});
+	const [failed, setFailed] = useState(false);
+	const showImage = src !== void 0 && src !== "" && !failed;
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children: [showImage ? /* @__PURE__ */ jsx("img", {
+			"data-slot": "image",
+			className: s.image({ class: classNames?.image }),
+			src,
+			alt: name ?? "",
+			onError: () => setFailed(true)
+		}) : /* @__PURE__ */ jsx("span", {
+			"data-slot": "fallback",
+			className: s.fallback({ class: classNames?.fallback }),
+			role: "img",
+			"aria-label": name,
+			children: fallback ?? (name !== void 0 ? initialsOf(name) : null)
+		}), badge !== void 0 && /* @__PURE__ */ jsx("span", {
+			"data-slot": "badge",
+			className: s.badge({ class: classNames?.badge }),
+			children: badge
+		})]
+	});
+}
+//#endregion
+export { Avatar, initialsOf };
+
+//# sourceMappingURL=avatar.mjs.map

package/dist/avatar/avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.mjs","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["'use client'\n\nimport type { AvatarProps } from '@novi-ui/core'\nimport { useState } from 'react'\nimport { avatarStyles } from './avatar.styles'\n\n/**\n * 表示名からイニシャルを作る。\n *\n * 日本語の氏名は空白で区切られないことが多いので、\n * 空白があれば各語の先頭、なければ先頭1文字を使う。\n */\nexport function initialsOf(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean)\n  if (parts.length === 0) return ''\n  if (parts.length === 1) return [...(parts[0] as string)][0] ?? ''\n  return parts\n    .slice(0, 2)\n    .map((part) => [...part][0] ?? '')\n    .join('')\n}\n\n/**\n * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。\n *\n * Flatlay では枠だけが丸くなる（Radio と並ぶ `radius-full` の例外）。\n * `badge` は枠の外に浮かず、**内側の下端**に収まる。\n *\n * @example\n * <Avatar src=\"/me.jpg\" name=\"山本 太郎\" />\n */\nexport function Avatar({\n  size,\n  radius,\n  src,\n  name,\n  fallback,\n  badge,\n  className,\n  classNames,\n  id,\n}: AvatarProps) {\n  const s = avatarStyles({ size, radius })\n  const [failed, setFailed] = useState(false)\n  const showImage = src !== undefined && src !== '' && !failed\n\n  return (\n    <span id={id} data-slot=\"root\" className={s.root({ class: [className, classNames?.root] })}>\n      {showImage ? (\n        <img\n          data-slot=\"image\"\n          className={s.image({ class: classNames?.image })}\n          src={src}\n          alt={name ?? ''}\n          onError={() => setFailed(true)}\n        />\n      ) : (\n        // 画像の代わりなので role=\"img\" を与える。\n        // これがないと aria-label が効かず、読み上げが「山太」のような\n        // イニシャルだけになって氏名が伝わらない\n        <span\n          data-slot=\"fallback\"\n          className={s.fallback({ class: classNames?.fallback })}\n          role=\"img\"\n          aria-label={name}\n        >\n          {fallback ?? (name !== undefined ? initialsOf(name) : null)}\n        </span>\n      )}\n\n      {/* 画像と同じ升に重ねる。最後に置くことで上に描かれる（z-index は使わない） */}\n      {badge !== undefined && (\n        <span data-slot=\"badge\" className={s.badge({ class: classNames?.badge })}>\n          {badge}\n        </span>\n      )}\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,WAAW,MAAsB;CAC/C,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;CACrD,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,WAAW,GAAG,OAAO,CAAC,GAAI,MAAM,EAAa,CAAC,CAAC,MAAM;CAC/D,OAAO,MACJ,MAAM,GAAG,CAAC,CAAC,CACX,KAAK,SAAS,CAAC,GAAG,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,CACjC,KAAK,EAAE;AACZ;;;;;;;;;;AAWA,SAAgB,OAAO,EACrB,MACA,QACA,KACA,MACA,UACA,OACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAM;CAAO,CAAC;CACvC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,YAAY,QAAQ,KAAA,KAAa,QAAQ,MAAM,CAAC;CAEtD,OACE,qBAAC,QAAD;EAAU;EAAI,aAAU;EAAO,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAAzF,UAAA,CACG,YACC,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GAC1C;GACL,KAAK,QAAQ;GACb,eAAe,UAAU,IAAI;EAC9B,CAAA,IAKD,oBAAC,QAAD;GACE,aAAU;GACV,WAAW,EAAE,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC;GACrD,MAAK;GACL,cAAY;GAEX,UAAA,aAAa,SAAS,KAAA,IAAY,WAAW,IAAI,IAAI;EAClD,CAAA,GAIP,UAAU,KAAA,KACT,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACpE,UAAA;EACG,CAAA,CAEJ;;AAEV"}

package/dist/avatar/avatar.styles.d.mts

@@ -0,0 +1,49 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/avatar/avatar.styles.d.ts
+/**
+ * Avatar のスタイル定義。
+ *
+ * @example
+ * const myAvatar = tv({ extend: avatarStyles, slots: { root: 'border-2' } })
+ */
+declare const avatarStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+  badge: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+  badge: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  image: string;
+  fallback: string;
+  badge: string;
+}>>;
+type AvatarStyleProps = Parameters<typeof avatarStyles>[0];
+//#endregion
+export { AvatarStyleProps, avatarStyles };
+//# sourceMappingURL=avatar.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.styles.d.mts","names":[],"sources":["../../src/avatar/avatar.styles.ts"],"mappings":";;;;;;;;cAwDa,0CAAY;;IApBgB;;;IAMI;;;;;;;;;IANJ;;;IAMI;;;;;;;;;IANJ;;;IAMI;;;;;;;;KAoBjC,mBAAmB,kBAAkB"}

package/dist/avatar/avatar.styles.mjs

@@ -0,0 +1,55 @@
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/avatar/avatar.styles.ts
+/**
+* Flatlay の Avatar は Radio と並ぶ **`radius-full` の例外**。
+* 人を丸で示す慣習は書類の直角より強い（顔写真の枠だけは角を落とす）。
+*
+* **badge は浮かない。** 両テーマは `absolute` で枠の外に出すが、Flatlay の
+* `position` 例外は Modal と Tooltip の2つで凍結してある（NG1）。
+* 代わりに画像と同じグリッドの升に重ね、枠の**内側**の下端に収める。
+* 重なりの順序は z-index ではなく DOM 順が決める（FR-02）。
+*/
+const slots = {
+	root: [
+		"inline-grid shrink-0",
+		"bg-[var(--novi-color-subtle)]",
+		"border border-[var(--novi-color-border-strong)]",
+		"overflow-hidden select-none",
+		"text-[var(--novi-color-muted)]"
+	].join(" "),
+	image: "size-full object-cover [grid-area:1/1]",
+	fallback: `[grid-area:1/1] place-self-center uppercase tracking-wide ${mono}`,
+	badge: "[grid-area:1/1] self-end justify-self-center pb-0.5"
+};
+/**
+* Avatar のスタイル定義。
+*
+* @example
+* const myAvatar = tv({ extend: avatarStyles, slots: { root: 'border-2' } })
+*/
+const avatarStyles = tv({
+	slots,
+	variants: {
+		size: {
+			sm: { root: "size-7 text-[length:var(--novi-text-xs)]" },
+			md: { root: "size-8 text-[length:var(--novi-text-sm)]" },
+			lg: { root: "size-10 text-[length:var(--novi-text-base)]" }
+		},
+		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: {
+		size: "md",
+		radius: "full"
+	}
+});
+//#endregion
+export { avatarStyles };
+
+//# sourceMappingURL=avatar.styles.mjs.map

package/dist/avatar/avatar.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.styles.mjs","names":[],"sources":["../../src/avatar/avatar.styles.ts"],"sourcesContent":["import type {\n  avatarRequiredSlots,\n  avatarSlots,\n  NoviRadius,\n  NoviSize,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Avatar は Radio と並ぶ **`radius-full` の例外**。\n * 人を丸で示す慣習は書類の直角より強い（顔写真の枠だけは角を落とす）。\n *\n * **badge は浮かない。** 両テーマは `absolute` で枠の外に出すが、Flatlay の\n * `position` 例外は Modal と Tooltip の2つで凍結してある（NG1）。\n * 代わりに画像と同じグリッドの升に重ね、枠の**内側**の下端に収める。\n * 重なりの順序は z-index ではなく DOM 順が決める（FR-02）。\n */\nconst slots = {\n  root: [\n    'inline-grid shrink-0',\n    'bg-[var(--novi-color-subtle)]',\n    'border border-[var(--novi-color-border-strong)]',\n    'overflow-hidden select-none',\n    'text-[var(--novi-color-muted)]',\n  ].join(' '),\n  image: 'size-full object-cover [grid-area:1/1]',\n  // イニシャルは名前の略号なので等幅（ADR-F7）\n  fallback: `[grid-area:1/1] place-self-center uppercase tracking-wide ${mono}`,\n  // 同じ升に重ね、枠の内側の下端に収める。外へはみ出させない\n  badge: '[grid-area:1/1] self-end justify-self-center pb-0.5',\n} satisfies SlotMap<typeof avatarSlots, (typeof avatarRequiredSlots)[number]>\n\n/** 28 / 32 / 40px。Button の高さと同じ寸法で、行に混ぜても列が揃う。 */\nconst size: VariantMap<NoviSize, { root: string }> = {\n  sm: { root: 'size-7 text-[length:var(--novi-text-xs)]' },\n  md: { root: 'size-8 text-[length:var(--novi-text-sm)]' },\n  lg: { root: 'size-10 text-[length:var(--novi-text-base)]' },\n}\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 * Avatar のスタイル定義。\n *\n * @example\n * const myAvatar = tv({ extend: avatarStyles, slots: { root: 'border-2' } })\n */\nexport const avatarStyles = tv({\n  slots,\n  variants: { size, radius },\n  defaultVariants: { size: 'md', radius: 'full' },\n})\n\nexport type AvatarStyleProps = Parameters<typeof avatarStyles>[0]\n"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CAEP,UAAU,6DAA6D;CAEvE,OAAO;AACT;;;;;;;AAuBA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GArBZ,IAAI,EAAE,MAAM,2CAA2C;GACvD,IAAI,EAAE,MAAM,2CAA2C;GACvD,IAAI,EAAE,MAAM,8CAA8C;EAmB9C;EAAM;GAflB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAWhC;CAAO;CACzB,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAO;AAChD,CAAC"}

package/dist/avatar/index.d.mts

@@ -0,0 +1,3 @@
+import { Avatar, initialsOf } from "./avatar.mjs";
+import { AvatarStyleProps, avatarStyles } from "./avatar.styles.mjs";
+export { Avatar, type AvatarStyleProps, avatarStyles, initialsOf };

package/dist/badge/badge.d.mts

@@ -0,0 +1,15 @@
+import { BadgeProps } from "@novi-ui/core";
+//#region src/badge/badge.d.ts
+/**
+ * 短いラベルで状態や分類を示す。Flatlay では**書類に押した区分印**として並ぶ。
+ *
+ * 色だけで意味を伝えないこと。`success` と `danger` は色相が違うが、
+ * 色覚特性によっては区別できない。必ず文言を伴わせる（WCAG 1.4.1）。
+ *
+ * @example
+ * <Badge color="success" variant="outline">公開中</Badge>
+ */
+declare function Badge({ variant, size, color, radius, withDot, children, className, classNames, id }: BadgeProps): import("react").JSX.Element;
+//#endregion
+export { Badge };
+//# sourceMappingURL=badge.d.mts.map

package/dist/badge/badge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.mts","names":[],"sources":["../../src/badge/badge.tsx"],"mappings":";;;;;;;;;;;iBAcgB,QACd,SACA,MACA,OACA,QACA,SACA,UACA,WACA,YACA,MACC,6BAAU,IAAA"}

package/dist/badge/badge.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { badgeStyles } from "./badge.styles.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/badge/badge.tsx
+/**
+* 短いラベルで状態や分類を示す。Flatlay では**書類に押した区分印**として並ぶ。
+*
+* 色だけで意味を伝えないこと。`success` と `danger` は色相が違うが、
+* 色覚特性によっては区別できない。必ず文言を伴わせる（WCAG 1.4.1）。
+*
+* @example
+* <Badge color="success" variant="outline">公開中</Badge>
+*/
+function Badge({ variant, size, color, radius, withDot, children, className, classNames, id }) {
+	const s = badgeStyles({
+		variant,
+		size,
+		color,
+		radius
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children: [withDot === true && /* @__PURE__ */ jsx("span", {
+			"data-slot": "dot",
+			className: s.dot({ class: classNames?.dot }),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "label",
+			className: s.label({ class: classNames?.label }),
+			children
+		})]
+	});
+}
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=badge.mjs.map

package/dist/badge/badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.mjs","names":[],"sources":["../../src/badge/badge.tsx"],"sourcesContent":["'use client'\n\nimport type { BadgeProps } from '@novi-ui/core'\nimport { badgeStyles } from './badge.styles'\n\n/**\n * 短いラベルで状態や分類を示す。Flatlay では**書類に押した区分印**として並ぶ。\n *\n * 色だけで意味を伝えないこと。`success` と `danger` は色相が違うが、\n * 色覚特性によっては区別できない。必ず文言を伴わせる（WCAG 1.4.1）。\n *\n * @example\n * <Badge color=\"success\" variant=\"outline\">公開中</Badge>\n */\nexport function Badge({\n  variant,\n  size,\n  color,\n  radius,\n  withDot,\n  children,\n  className,\n  classNames,\n  id,\n}: BadgeProps) {\n  const s = badgeStyles({ variant, size, color, radius })\n\n  return (\n    <span id={id} data-slot=\"root\" className={s.root({ class: [className, classNames?.root] })}>\n      {withDot === true && (\n        <span data-slot=\"dot\" className={s.dot({ class: classNames?.dot })} aria-hidden=\"true\" />\n      )}\n      <span data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n        {children}\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,MAAM,EACpB,SACA,MACA,OACA,QACA,SACA,UACA,WACA,YACA,MACa;CACb,MAAM,IAAI,YAAY;EAAE;EAAS;EAAM;EAAO;CAAO,CAAC;CAEtD,OACE,qBAAC,QAAD;EAAU;EAAI,aAAU;EAAO,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAAzF,UAAA,CACG,YAAY,QACX,oBAAC,QAAD;GAAM,aAAU;GAAM,WAAW,EAAE,IAAI,EAAE,OAAO,YAAY,IAAI,CAAC;GAAG,eAAY;EAAQ,CAAA,GAE1F,oBAAC,QAAD;GAAM,aAAU;GAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;GACpE;EACG,CAAA,CACF;;AAEV"}

package/dist/badge/badge.styles.d.mts

@@ -0,0 +1,67 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/badge/badge.styles.d.ts
+/**
+ * Badge のスタイル定義。
+ *
+ * @example
+ * const myBadge = tv({ extend: badgeStyles, slots: { label: 'uppercase' } })
+ */
+declare const badgeStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+    dot: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  dot: string;
+  label: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+    dot: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  dot: string;
+  label: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+    dot: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  dot: string;
+  label: string;
+}>>;
+type BadgeStyleProps = Parameters<typeof badgeStyles>[0];
+//#endregion
+export { BadgeStyleProps, badgeStyles };
+//# sourceMappingURL=badge.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styles.d.mts","names":[],"sources":["../../src/badge/badge.styles.ts"],"mappings":";;;;;;;;cAmHa,yCAAW;;IAlFmB;;;IA8DF;IAAa;;;IAMT;;;IAjBE;;;;;;;;IAnDJ;;;IA8DF;IAAa;;;IAMT;;;IAjBE;;;;;;;;IAnDJ;;;IA8DF;IAAa;;;IAMT;;;IAjBE;;;;;;;KAsCnC,kBAAkB,kBAAkB"}

package/dist/badge/badge.styles.mjs

@@ -0,0 +1,110 @@
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/badge/badge.styles.ts
+/**
+* Flatlay の Badge は**書類に押した区分印**。
+*
+* ラベルが等幅なのは、状態や分類の語が帳票では「読ませる文」ではなく
+* 「読み取らせる記号」だから（ADR-F7）。列に並べたとき幅が揃う効果も兼ねる。
+*
+* 点も正方形。円は Radio と Avatar の2つに予約してあり、
+* ここで丸を使うと「1つ選ぶ」の形と紛れる。
+*/
+const slots = {
+	root: [
+		"inline-flex items-center gap-1.5",
+		"whitespace-nowrap",
+		"border border-transparent",
+		"rounded-[var(--novi-radius-sm)]"
+	].join(" "),
+	dot: "shrink-0 rounded-[var(--novi-radius-none)] bg-current",
+	label: `truncate ${mono}`
+};
+const color = {
+	default: { root: [
+		"[--c:var(--novi-color-default)]",
+		"[--c-fg:var(--novi-color-default-fg)]",
+		"[--c-text:var(--novi-color-fg)]",
+		"[--c-line:var(--novi-color-border-strong)]"
+	].join(" ") },
+	primary: { root: [
+		"[--c:var(--novi-color-primary)]",
+		"[--c-fg:var(--novi-color-primary-fg)]",
+		"[--c-text:var(--novi-color-primary)]",
+		"[--c-line:var(--novi-color-primary)]"
+	].join(" ") },
+	secondary: { root: [
+		"[--c:var(--novi-color-secondary)]",
+		"[--c-fg:var(--novi-color-secondary-fg)]",
+		"[--c-text:var(--novi-color-secondary)]",
+		"[--c-line:var(--novi-color-secondary)]"
+	].join(" ") },
+	success: { root: [
+		"[--c:var(--novi-color-success)]",
+		"[--c-fg:var(--novi-color-success-fg)]",
+		"[--c-text:var(--novi-color-success)]",
+		"[--c-line:var(--novi-color-success)]"
+	].join(" ") },
+	warning: { root: [
+		"[--c:var(--novi-color-warning)]",
+		"[--c-fg:var(--novi-color-warning-fg)]",
+		"[--c-text:var(--novi-color-warning)]",
+		"[--c-line:var(--novi-color-warning)]"
+	].join(" ") },
+	danger: { root: [
+		"[--c:var(--novi-color-danger)]",
+		"[--c-fg:var(--novi-color-danger-fg)]",
+		"[--c-text:var(--novi-color-danger)]",
+		"[--c-line:var(--novi-color-danger)]"
+	].join(" ") }
+};
+/**
+* Badge のスタイル定義。
+*
+* @example
+* const myBadge = tv({ extend: badgeStyles, slots: { label: 'uppercase' } })
+*/
+const badgeStyles = tv({
+	slots,
+	variants: {
+		color,
+		size: {
+			sm: {
+				root: "h-4 px-1 text-[length:var(--novi-text-xs)]",
+				dot: "size-1.5"
+			},
+			md: {
+				root: "h-5 px-1.5 text-[length:var(--novi-text-xs)]",
+				dot: "size-1.5"
+			},
+			lg: {
+				root: "h-6 px-2 text-[length:var(--novi-text-sm)]",
+				dot: "size-2"
+			}
+		},
+		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)]" }
+		},
+		variant: {
+			solid: { root: "bg-[var(--c)] text-[var(--c-fg)] border-[var(--c)]" },
+			outline: { root: "border-[var(--c-line)] text-[var(--c-text)]" },
+			soft: { root: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)] text-[var(--c-text)]" },
+			ghost: { root: "text-[var(--c-text)]" },
+			plain: { root: "text-[var(--c-text)] px-0" }
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		variant: "outline",
+		size: "md",
+		radius: "sm"
+	}
+});
+//#endregion
+export { badgeStyles };
+
+//# sourceMappingURL=badge.styles.mjs.map

package/dist/badge/badge.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.styles.mjs","names":[],"sources":["../../src/badge/badge.styles.ts"],"sourcesContent":["import type {\n  badgeRequiredSlots,\n  badgeSlots,\n  NoviColor,\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Badge は**書類に押した区分印**。\n *\n * ラベルが等幅なのは、状態や分類の語が帳票では「読ませる文」ではなく\n * 「読み取らせる記号」だから（ADR-F7）。列に並べたとき幅が揃う効果も兼ねる。\n *\n * 点も正方形。円は Radio と Avatar の2つに予約してあり、\n * ここで丸を使うと「1つ選ぶ」の形と紛れる。\n */\nconst slots = {\n  root: [\n    'inline-flex items-center gap-1.5',\n    'whitespace-nowrap',\n    'border border-transparent',\n    'rounded-[var(--novi-radius-sm)]',\n  ].join(' '),\n  dot: 'shrink-0 rounded-[var(--novi-radius-none)] bg-current',\n  label: `truncate ${mono}`,\n} satisfies SlotMap<typeof badgeSlots, (typeof badgeRequiredSlots)[number]>\n\nconst color: VariantMap<NoviColor, { root: string }> = {\n  default: {\n    root: [\n      '[--c:var(--novi-color-default)]',\n      '[--c-fg:var(--novi-color-default-fg)]',\n      '[--c-text:var(--novi-color-fg)]',\n      '[--c-line:var(--novi-color-border-strong)]',\n    ].join(' '),\n  },\n  primary: {\n    root: [\n      '[--c:var(--novi-color-primary)]',\n      '[--c-fg:var(--novi-color-primary-fg)]',\n      '[--c-text:var(--novi-color-primary)]',\n      '[--c-line:var(--novi-color-primary)]',\n    ].join(' '),\n  },\n  secondary: {\n    root: [\n      '[--c:var(--novi-color-secondary)]',\n      '[--c-fg:var(--novi-color-secondary-fg)]',\n      '[--c-text:var(--novi-color-secondary)]',\n      '[--c-line:var(--novi-color-secondary)]',\n    ].join(' '),\n  },\n  success: {\n    root: [\n      '[--c:var(--novi-color-success)]',\n      '[--c-fg:var(--novi-color-success-fg)]',\n      '[--c-text:var(--novi-color-success)]',\n      '[--c-line:var(--novi-color-success)]',\n    ].join(' '),\n  },\n  warning: {\n    root: [\n      '[--c:var(--novi-color-warning)]',\n      '[--c-fg:var(--novi-color-warning-fg)]',\n      '[--c-text:var(--novi-color-warning)]',\n      '[--c-line:var(--novi-color-warning)]',\n    ].join(' '),\n  },\n  danger: {\n    root: [\n      '[--c:var(--novi-color-danger)]',\n      '[--c-fg:var(--novi-color-danger-fg)]',\n      '[--c-text:var(--novi-color-danger)]',\n      '[--c-line:var(--novi-color-danger)]',\n    ].join(' '),\n  },\n}\n\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n  solid: { root: 'bg-[var(--c)] text-[var(--c-fg)] border-[var(--c)]' },\n  outline: { root: 'border-[var(--c-line)] text-[var(--c-text)]' },\n  soft: {\n    root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)] text-[var(--c-text)]',\n  },\n  ghost: { root: 'text-[var(--c-text)]' },\n  plain: { root: 'text-[var(--c-text)] px-0' },\n}\n\n/** 16 / 20 / 24px。行の中に置いても行が膨らまない高さ（Raster は 20/24/28）。 */\nconst size: VariantMap<NoviSize, { root: string; dot: string }> = {\n  sm: { root: 'h-4 px-1 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n  md: { root: 'h-5 px-1.5 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n  lg: { root: 'h-6 px-2 text-[length:var(--novi-text-sm)]', dot: 'size-2' },\n}\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 * Badge のスタイル定義。\n *\n * @example\n * const myBadge = tv({ extend: badgeStyles, slots: { label: 'uppercase' } })\n */\nexport const badgeStyles = tv({\n  slots,\n  // `variant` は最後に宣言する。先に書くと `plain` の px-0 が size の px に負ける（申し送り6）\n  variants: { color, size, radius, variant },\n  defaultVariants: { color: 'default', variant: 'outline', size: 'md', radius: 'sm' },\n})\n\nexport type BadgeStyleProps = Parameters<typeof badgeStyles>[0]\n"],"mappings":";;;;;;;;;;;;AAsBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,KAAK;CACL,OAAO,YAAY;AACrB;AAEA,MAAM,QAAiD;CACrD,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,WAAW,EACT,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,SAAS,EACP,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;CACA,QAAQ,EACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG,EACZ;AACF;;;;;;;AAiCA,MAAa,cAAc,GAAG;CAC5B;CAEA,UAAU;EAAE;EAAO;GAtBnB,IAAI;IAAE,MAAM;IAA8C,KAAK;GAAW;GAC1E,IAAI;IAAE,MAAM;IAAgD,KAAK;GAAW;GAC5E,IAAI;IAAE,MAAM;IAA8C,KAAK;GAAS;EAoBrD;EAAM;GAhBzB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAYzB;EAAQ;GAjCjC,OAAO,EAAE,MAAM,qDAAqD;GACpE,SAAS,EAAE,MAAM,8CAA8C;GAC/D,MAAM,EACJ,MAAM,uFACR;GACA,OAAO,EAAE,MAAM,uBAAuB;GACtC,OAAO,EAAE,MAAM,4BAA4B;EA2BV;CAAQ;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AACpF,CAAC"}

package/dist/badge/index.d.mts

@@ -0,0 +1,3 @@
+import { Badge } from "./badge.mjs";
+import { BadgeStyleProps, badgeStyles } from "./badge.styles.mjs";
+export { Badge, type BadgeStyleProps, badgeStyles };

package/dist/breadcrumbs/breadcrumbs.d.mts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { BreadcrumbsProps } from "@novi-ui/core";
+//#region src/breadcrumbs/breadcrumbs.d.ts
+interface BreadcrumbProps {
+  /** 省略すると現在地として扱い、リンクにしない */
+  href?: string;
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * 階層の1段。`href` を省略した項目が現在地になる。
+ *
+ * @example
+ * <Breadcrumb href="/docs">ドキュメント</Breadcrumb>
+ */
+declare function Breadcrumb({ href, children, className }: BreadcrumbProps): import("react").JSX.Element;
+/**
+ * 階層の中で現在どこにいるかを示す。
+ *
+ * 区切りの `/` は等幅で出ます。階層の列を「文」ではなく「番地」として
+ * 読ませるためで、段の深さが目で数えられます。
+ *
+ * リンクは既定で下線を持ちます。色だけで押せることを示さないためです。
+ * 現在地はリンクにならず、太さだけで示します。
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <Breadcrumb href="/">ホーム</Breadcrumb>
+ *   <Breadcrumb href="/docs">ドキュメント</Breadcrumb>
+ *   <Breadcrumb>Button</Breadcrumb>
+ * </Breadcrumbs>
+ */
+declare function Breadcrumbs({ size, separator, isDisabled, children, className, classNames, id }: BreadcrumbsProps): import("react").JSX.Element;
+//#endregion
+export { Breadcrumb, BreadcrumbProps, Breadcrumbs };
+//# sourceMappingURL=breadcrumbs.d.mts.map

package/dist/breadcrumbs/breadcrumbs.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.mts","names":[],"sources":["../../src/breadcrumbs/breadcrumbs.tsx"],"mappings":";;;UAoBiB;;EAEf;EACA,WAAW;EACX;;;;;;;;iBASc,aAAa,MAAM,UAAU,aAAa,kCAAe,IAAA;;;;;;;;;;;;;;;;;iBAyCzD,cACd,MACA,WACA,YACA,UACA,WACA,YACA,MACC,mCAAgB,IAAA"}