@novi-ui/raster 0.1.0

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
+/**
+* 短いラベルで状態や分類を示す。
+*
+* 色だけで意味を伝えないこと。`success` と `danger` は色相が違うが、
+* 色覚特性によっては区別できない。必ず文言を伴わせる（WCAG 1.4.1）。
+*
+* @example
+* <Badge color="success" variant="soft">公開中</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 * 短いラベルで状態や分類を示す。\n *\n * 色だけで意味を伝えないこと。`success` と `danger` は色相が違うが、\n * 色覚特性によっては区別できない。必ず文言を伴わせる（WCAG 1.4.1）。\n *\n * @example\n * <Badge color=\"success\" variant=\"soft\">公開中</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":";;;;;;;;cAsGa,yCAAW;;IA/EmB;;;IA2DF;IAAa;;;IAMT;;;IAdE;;;;;;;;IAnDJ;;;IA2DF;IAAa;;;IAMT;;;IAdE;;;;;;;;IAnDJ;;;IA2DF;IAAa;;;IAMT;;;IAdE;;;;;;;KAoCnC,kBAAkB,kBAAkB"}

package/dist/badge/badge.styles.mjs

@@ -0,0 +1,99 @@
+import { tv } from "tailwind-variants";
+//#region src/badge/badge.styles.ts
+const slots = {
+	root: [
+		"inline-flex items-center gap-1.5",
+		"font-medium whitespace-nowrap",
+		"border border-transparent"
+	].join(" "),
+	dot: "shrink-0 rounded-[var(--novi-radius-none)] bg-current",
+	label: "truncate"
+};
+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-5 px-1.5 text-[length:var(--novi-text-xs)]",
+				dot: "size-1.5"
+			},
+			md: {
+				root: "h-6 px-2 text-[length:var(--novi-text-xs)]",
+				dot: "size-2"
+			},
+			lg: {
+				root: "h-7 px-2.5 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)]" },
+			outline: { root: "border-[var(--c-line)] text-[var(--c-text)]" },
+			soft: { root: "bg-[var(--novi-color-subtle)] text-[var(--c-text)]" },
+			ghost: { root: "text-[var(--c-text)]" },
+			plain: { root: "text-[var(--c-text)] px-0" }
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		variant: "soft",
+		size: "md",
+		radius: "none"
+	}
+});
+//#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'\n\nconst slots = {\n  root: [\n    'inline-flex items-center gap-1.5',\n    'font-medium whitespace-nowrap',\n    'border border-transparent',\n  ].join(' '),\n  // 円ではなく正方形。Raster では点も角を立てる\n  dot: 'shrink-0 rounded-[var(--novi-radius-none)] bg-current',\n  label: 'truncate',\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)]' },\n  outline: { root: 'border-[var(--c-line)] text-[var(--c-text)]' },\n  soft: { root: 'bg-[var(--novi-color-subtle)] text-[var(--c-text)]' },\n  ghost: { root: 'text-[var(--c-text)]' },\n  plain: { root: 'text-[var(--c-text)] px-0' },\n}\n\nconst size: VariantMap<NoviSize, { root: string; dot: string }> = {\n  sm: { root: 'h-5 px-1.5 text-[length:var(--novi-text-xs)]', dot: 'size-1.5' },\n  md: { root: 'h-6 px-2 text-[length:var(--novi-text-xs)]', dot: 'size-2' },\n  lg: { root: 'h-7 px-2.5 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 を最後に宣言する。tv は宣言順に適用するため、\n  // 先に書くと `plain` の px-0 が size の px-2 に負けて ghost と同じ見た目になる。\n  variants: { color, size, radius, variant },\n  defaultVariants: { color: 'default', variant: 'soft', size: 'md', radius: 'none' },\n})\n\nexport type BadgeStyleProps = Parameters<typeof badgeStyles>[0]\n"],"mappings":";;AAYA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,KAAK;CACL,OAAO;AACT;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;;;;;;;AA8BA,MAAa,cAAc,GAAG;CAC5B;CAGA,UAAU;EAAE;EAAO;GAvBnB,IAAI;IAAE,MAAM;IAAgD,KAAK;GAAW;GAC5E,IAAI;IAAE,MAAM;IAA8C,KAAK;GAAS;GACxE,IAAI;IAAE,MAAM;IAAgD,KAAK;GAAS;EAqBvD;EAAM;GAjBzB,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAazB;EAAQ;GA/BjC,OAAO,EAAE,MAAM,mCAAmC;GAClD,SAAS,EAAE,MAAM,8CAA8C;GAC/D,MAAM,EAAE,MAAM,qDAAqD;GACnE,OAAO,EAAE,MAAM,uBAAuB;GACtC,OAAO,EAAE,MAAM,4BAA4B;EA2BV;CAAQ;CACzC,iBAAiB;EAAE,OAAO;EAAW,SAAS;EAAQ,MAAM;EAAM,QAAQ;CAAO;AACnF,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,33 @@
+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;
+/**
+ * 階層の中で現在どこにいるかを示す。
+ *
+ * 区切り文字は装飾なので支援技術には読ませない。
+ * `href` を省いた項目が現在地になり、リンクにならない。
+ *
+ * @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;;;;;;;;;;;;;;iBAsCzD,cACd,MACA,WACA,YACA,UACA,WACA,YACA,MACC,mCAAgB,IAAA"}

package/dist/breadcrumbs/breadcrumbs.mjs

@@ -0,0 +1,79 @@
+"use client";
+import { breadcrumbsStyles } from "./breadcrumbs.styles.mjs";
+import { Breadcrumb, Breadcrumbs, Link } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/breadcrumbs/breadcrumbs.tsx
+/**
+* 区切り文字を子へ渡す。
+*
+* 各項目が自分の前に区切りを描画し、先頭だけ CSS で隠す。
+* 親側で children を加工して区切りを差し込むと、
+* RAC が期待する `<ol> > <li>` の構造が壊れる。
+*/
+const SeparatorContext = createContext("/");
+/**
+* 階層の1段。`href` を省略した項目が現在地になる。
+*
+* @example
+* <Breadcrumb href="/docs">ドキュメント</Breadcrumb>
+*/
+function Breadcrumb$1({ href, children, className }) {
+	const s = breadcrumbsStyles();
+	const separator = useContext(SeparatorContext);
+	return /* @__PURE__ */ jsxs(Breadcrumb, {
+		"data-slot": "item",
+		className: s.item({ class: className }),
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "separator",
+			className: s.separator(),
+			"aria-hidden": "true",
+			children: separator
+		}), href === void 0 ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "current",
+			"aria-current": "page",
+			className: s.current(),
+			children
+		}) : /* @__PURE__ */ jsx(Link, {
+			href,
+			"data-slot": "link",
+			className: s.link(),
+			children
+		})]
+	});
+}
+/**
+* 階層の中で現在どこにいるかを示す。
+*
+* 区切り文字は装飾なので支援技術には読ませない。
+* `href` を省いた項目が現在地になり、リンクにならない。
+*
+* @example
+* <Breadcrumbs>
+*   <Breadcrumb href="/">ホーム</Breadcrumb>
+*   <Breadcrumb href="/docs">ドキュメント</Breadcrumb>
+*   <Breadcrumb>Button</Breadcrumb>
+* </Breadcrumbs>
+*/
+function Breadcrumbs$1({ size, separator = "/", isDisabled, children, className, classNames, id }) {
+	const s = breadcrumbsStyles({ size });
+	return /* @__PURE__ */ jsx(SeparatorContext.Provider, {
+		value: separator,
+		children: /* @__PURE__ */ jsx("nav", {
+			id,
+			"aria-label": "パンくずリスト",
+			"data-slot": "root",
+			className: s.root({ class: [className, classNames?.root] }),
+			children: /* @__PURE__ */ jsx(Breadcrumbs, {
+				isDisabled,
+				"data-slot": "list",
+				className: s.list({ class: classNames?.list }),
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { Breadcrumb$1 as Breadcrumb, Breadcrumbs$1 as Breadcrumbs };
+
+//# sourceMappingURL=breadcrumbs.mjs.map

package/dist/breadcrumbs/breadcrumbs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.mjs","names":["Breadcrumb","RACBreadcrumb","Breadcrumbs","RACBreadcrumbs"],"sources":["../../src/breadcrumbs/breadcrumbs.tsx"],"sourcesContent":["'use client'\n\nimport type { BreadcrumbsProps } from '@novi-ui/core'\nimport { createContext, type ReactNode, useContext } from 'react'\nimport {\n  Link,\n  Breadcrumb as RACBreadcrumb,\n  Breadcrumbs as RACBreadcrumbs,\n} from 'react-aria-components'\nimport { breadcrumbsStyles } from './breadcrumbs.styles'\n\n/**\n * 区切り文字を子へ渡す。\n *\n * 各項目が自分の前に区切りを描画し、先頭だけ CSS で隠す。\n * 親側で children を加工して区切りを差し込むと、\n * RAC が期待する `<ol> > <li>` の構造が壊れる。\n */\nconst SeparatorContext = createContext<ReactNode>('/')\n\nexport interface BreadcrumbProps {\n  /** 省略すると現在地として扱い、リンクにしない */\n  href?: string\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * 階層の1段。`href` を省略した項目が現在地になる。\n *\n * @example\n * <Breadcrumb href=\"/docs\">ドキュメント</Breadcrumb>\n */\nexport function Breadcrumb({ href, children, className }: BreadcrumbProps) {\n  const s = breadcrumbsStyles()\n  const separator = useContext(SeparatorContext)\n\n  return (\n    <RACBreadcrumb data-slot=\"item\" className={s.item({ class: className })}>\n      <span data-slot=\"separator\" className={s.separator()} aria-hidden=\"true\">\n        {separator}\n      </span>\n\n      {href === undefined ? (\n        // 現在地はリンクにしない。RAC は Link にしか aria-current を付けないので、\n        // ここでは自分で付ける必要がある\n        <span data-slot=\"current\" aria-current=\"page\" className={s.current()}>\n          {children}\n        </span>\n      ) : (\n        <Link href={href} data-slot=\"link\" className={s.link()}>\n          {children}\n        </Link>\n      )}\n    </RACBreadcrumb>\n  )\n}\n\n/**\n * 階層の中で現在どこにいるかを示す。\n *\n * 区切り文字は装飾なので支援技術には読ませない。\n * `href` を省いた項目が現在地になり、リンクにならない。\n *\n * @example\n * <Breadcrumbs>\n *   <Breadcrumb href=\"/\">ホーム</Breadcrumb>\n *   <Breadcrumb href=\"/docs\">ドキュメント</Breadcrumb>\n *   <Breadcrumb>Button</Breadcrumb>\n * </Breadcrumbs>\n */\nexport function Breadcrumbs({\n  size,\n  separator = '/',\n  isDisabled,\n  children,\n  className,\n  classNames,\n  id,\n}: BreadcrumbsProps) {\n  const s = breadcrumbsStyles({ size })\n\n  return (\n    <SeparatorContext.Provider value={separator}>\n      {/* nav でラップして現在地の階層であることを伝える */}\n      <nav\n        id={id}\n        aria-label=\"パンくずリスト\"\n        data-slot=\"root\"\n        className={s.root({ class: [className, classNames?.root] })}\n      >\n        <RACBreadcrumbs\n          isDisabled={isDisabled}\n          data-slot=\"list\"\n          className={s.list({ class: classNames?.list })}\n        >\n          {children}\n        </RACBreadcrumbs>\n      </nav>\n    </SeparatorContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,mBAAmB,cAAyB,GAAG;;;;;;;AAerD,SAAgBA,aAAW,EAAE,MAAM,UAAU,aAA8B;CACzE,MAAM,IAAI,kBAAkB;CAC5B,MAAM,YAAY,WAAW,gBAAgB;CAE7C,OACE,qBAACC,YAAD;EAAe,aAAU;EAAO,WAAW,EAAE,KAAK,EAAE,OAAO,UAAU,CAAC;EAAtE,UAAA,CACE,oBAAC,QAAD;GAAM,aAAU;GAAY,WAAW,EAAE,UAAU;GAAG,eAAY;GAC/D,UAAA;EACG,CAAA,GAEL,SAAS,KAAA,IAGR,oBAAC,QAAD;GAAM,aAAU;GAAU,gBAAa;GAAO,WAAW,EAAE,QAAQ;GAChE;EACG,CAAA,IAEN,oBAAC,MAAD;GAAY;GAAM,aAAU;GAAO,WAAW,EAAE,KAAK;GAClD;EACG,CAAA,CAEK;;AAEnB;;;;;;;;;;;;;;AAeA,SAAgBC,cAAY,EAC1B,MACA,YAAY,KACZ,YACA,UACA,WACA,YACA,MACmB;CACnB,MAAM,IAAI,kBAAkB,EAAE,KAAK,CAAC;CAEpC,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO;EAEhC,UAAA,oBAAC,OAAD;GACM;GACJ,cAAW;GACX,aAAU;GACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;GAE1D,UAAA,oBAACC,aAAD;IACc;IACZ,aAAU;IACV,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;IAE5C;GACa,CAAA;EACb,CAAA;CACoB,CAAA;AAE/B"}

package/dist/breadcrumbs/breadcrumbs.styles.d.mts

@@ -0,0 +1,46 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/breadcrumbs/breadcrumbs.styles.d.ts
+/**
+ * Breadcrumbs のスタイル定義。
+ *
+ * @example
+ * const myCrumbs = tv({ extend: breadcrumbsStyles, slots: { separator: 'mx-2' } })
+ */
+declare const breadcrumbsStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    list: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  item: string;
+  link: string;
+  separator: string;
+  current: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    list: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  item: string;
+  link: string;
+  separator: string;
+  current: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    list: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  item: string;
+  link: string;
+  separator: string;
+  current: string;
+}>>;
+type BreadcrumbsStyleProps = Parameters<typeof breadcrumbsStyles>[0];
+//#endregion
+export { BreadcrumbsStyleProps, breadcrumbsStyles };
+//# sourceMappingURL=breadcrumbs.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.styles.d.mts","names":[],"sources":["../../src/breadcrumbs/breadcrumbs.styles.ts"],"mappings":";;;;;;;;cA2Ca,+CAAiB;;IAZW;;;;;;;;;;;IAAA;;;;;;;;;;;IAAA;;;;;;;;;;KAkB7B,wBAAwB,kBAAkB"}

package/dist/breadcrumbs/breadcrumbs.styles.mjs

@@ -0,0 +1,35 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/breadcrumbs/breadcrumbs.styles.ts
+const slots = {
+	root: "flex",
+	list: ["flex flex-wrap items-center gap-1.5", "[&>li:first-child>[data-slot=separator]]:hidden"].join(" "),
+	item: "flex items-center gap-1.5",
+	link: [
+		"text-[var(--novi-color-muted)] underline-offset-4",
+		"transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"hover:text-[var(--novi-color-fg)] hover:underline",
+		focusRing
+	].join(" "),
+	separator: "text-[var(--novi-color-border-strong)] select-none",
+	current: "text-[var(--novi-color-fg)] font-medium"
+};
+/**
+* Breadcrumbs のスタイル定義。
+*
+* @example
+* const myCrumbs = tv({ extend: breadcrumbsStyles, slots: { separator: 'mx-2' } })
+*/
+const breadcrumbsStyles = tv({
+	slots,
+	variants: { size: {
+		sm: { list: "text-[length:var(--novi-text-xs)]" },
+		md: { list: "text-[length:var(--novi-text-sm)]" },
+		lg: { list: "text-[length:var(--novi-text-base)]" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { breadcrumbsStyles };
+
+//# sourceMappingURL=breadcrumbs.styles.mjs.map

package/dist/breadcrumbs/breadcrumbs.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.styles.mjs","names":[],"sources":["../../src/breadcrumbs/breadcrumbs.styles.ts"],"sourcesContent":["import type {\n  breadcrumbsRequiredSlots,\n  breadcrumbsSlots,\n  NoviSize,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\n\nconst slots = {\n  // root は <nav>、list は RAC が描画する <ol>。nav > ol が意味的に正しい構造\n  root: 'flex',\n  list: [\n    'flex flex-wrap items-center gap-1.5',\n    // 先頭の項目だけ区切り文字を隠す。各項目が自分の前に区切りを持つ構造\n    '[&>li:first-child>[data-slot=separator]]:hidden',\n  ].join(' '),\n  item: 'flex items-center gap-1.5',\n  link: [\n    'text-[var(--novi-color-muted)] underline-offset-4',\n    'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'hover:text-[var(--novi-color-fg)] hover:underline',\n    focusRing,\n  ].join(' '),\n  // 装飾なので支援技術には読ませない\n  separator: 'text-[var(--novi-color-border-strong)] select-none',\n  // 現在地はリンクにしない。色ではなく太さで示す\n  current: 'text-[var(--novi-color-fg)] font-medium',\n} satisfies SlotMap<typeof breadcrumbsSlots, (typeof breadcrumbsRequiredSlots)[number]>\n\nconst size: VariantMap<NoviSize, { list: string }> = {\n  sm: { list: 'text-[length:var(--novi-text-xs)]' },\n  md: { list: 'text-[length:var(--novi-text-sm)]' },\n  lg: { list: 'text-[length:var(--novi-text-base)]' },\n}\n\n/**\n * Breadcrumbs のスタイル定義。\n *\n * @example\n * const myCrumbs = tv({ extend: breadcrumbsStyles, slots: { separator: 'mx-2' } })\n */\nexport const breadcrumbsStyles = tv({\n  slots,\n  variants: { size },\n  defaultVariants: { size: 'md' },\n})\n\nexport type BreadcrumbsStyleProps = Parameters<typeof breadcrumbsStyles>[0]\n"],"mappings":";;;AAUA,MAAM,QAAQ;CAEZ,MAAM;CACN,MAAM,CACJ,uCAEA,iDACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW;CAEX,SAAS;AACX;;;;;;;AAcA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU,EAAE;EAbZ,IAAI,EAAE,MAAM,oCAAoC;EAChD,IAAI,EAAE,MAAM,oCAAoC;EAChD,IAAI,EAAE,MAAM,sCAAsC;CAWtC,EAAK;CACjB,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC"}

package/dist/breadcrumbs/index.d.mts

@@ -0,0 +1,3 @@
+import { Breadcrumb, BreadcrumbProps, Breadcrumbs } from "./breadcrumbs.mjs";
+import { BreadcrumbsStyleProps, breadcrumbsStyles } from "./breadcrumbs.styles.mjs";
+export { Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, breadcrumbsStyles };

package/dist/button/button.d.mts

@@ -0,0 +1,14 @@
+import { ButtonProps } from "@novi-ui/core";
+//#region src/button/button.d.ts
+/**
+ * ボタン。
+ *
+ * @example
+ * <Button variant="solid" color="primary" onPress={() => save()}>
+ *   保存
+ * </Button>
+ */
+declare function Button({ variant, size, color, radius, isDisabled, isLoading, type, onPress, startContent, endContent, children, className, classNames, id }: ButtonProps): import("react").JSX.Element;
+//#endregion
+export { Button };
+//# sourceMappingURL=button.d.mts.map

package/dist/button/button.d.mts.map

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

package/dist/button/button.mjs

@@ -0,0 +1,75 @@
+"use client";
+import { buttonStyles } from "./button.styles.mjs";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/button/button.tsx
+/**
+* ボタン。
+*
+* @example
+* <Button variant="solid" color="primary" onPress={() => save()}>
+*   保存
+* </Button>
+*/
+function Button$1({ variant, size, color, radius, isDisabled, isLoading, type = "button", onPress, startContent, endContent, children, className, classNames, id }) {
+	const s = buttonStyles({
+		variant,
+		size,
+		color,
+		radius
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		id,
+		type,
+		isDisabled: isDisabled === true || isLoading === true,
+		onPress,
+		"data-slot": "root",
+		"data-loading": isLoading === true ? true : void 0,
+		className: s.root({ class: [className, classNames?.root] }),
+		children: [
+			isLoading === true && /* @__PURE__ */ jsx("span", {
+				"data-slot": "spinner",
+				className: s.spinner({ class: classNames?.spinner }),
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsxs("svg", {
+					viewBox: "0 0 16 16",
+					width: "1em",
+					height: "1em",
+					fill: "none",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx("circle", {
+						cx: "8",
+						cy: "8",
+						r: "6",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						opacity: "0.25"
+					}), /* @__PURE__ */ jsx("path", {
+						d: "M14 8a6 6 0 0 0-6-6",
+						stroke: "currentColor",
+						strokeWidth: "2"
+					})]
+				})
+			}),
+			startContent !== void 0 && /* @__PURE__ */ jsx("span", {
+				"data-slot": "startContent",
+				className: s.startContent({ class: classNames?.startContent }),
+				children: startContent
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "label",
+				className: s.label({ class: classNames?.label }),
+				children
+			}),
+			endContent !== void 0 && /* @__PURE__ */ jsx("span", {
+				"data-slot": "endContent",
+				className: s.endContent({ class: classNames?.endContent }),
+				children: endContent
+			})
+		]
+	});
+}
+//#endregion
+export { Button$1 as Button };
+
+//# sourceMappingURL=button.mjs.map

package/dist/button/button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.mjs","names":["Button","RACButton"],"sources":["../../src/button/button.tsx"],"sourcesContent":["'use client'\n\nimport type { ButtonProps } from '@novi-ui/core'\nimport { Button as RACButton } from 'react-aria-components'\nimport { buttonStyles } from './button.styles'\n\n/**\n * ボタン。\n *\n * @example\n * <Button variant=\"solid\" color=\"primary\" onPress={() => save()}>\n *   保存\n * </Button>\n */\nexport function Button({\n  variant,\n  size,\n  color,\n  radius,\n  isDisabled,\n  isLoading,\n  type = 'button',\n  onPress,\n  startContent,\n  endContent,\n  children,\n  className,\n  classNames,\n  id,\n}: ButtonProps) {\n  const s = buttonStyles({ variant, size, color, radius })\n\n  return (\n    <RACButton\n      id={id}\n      type={type}\n      // 読み込み中は押せないようにする。見た目だけ変えて押せる状態にしない\n      isDisabled={isDisabled === true || isLoading === true}\n      onPress={onPress}\n      data-slot=\"root\"\n      data-loading={isLoading === true ? true : undefined}\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      {isLoading === true && (\n        <span\n          data-slot=\"spinner\"\n          className={s.spinner({ class: classNames?.spinner })}\n          aria-hidden=\"true\"\n        >\n          <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" strokeWidth=\"2\" opacity=\"0.25\" />\n            <path d=\"M14 8a6 6 0 0 0-6-6\" stroke=\"currentColor\" strokeWidth=\"2\" />\n          </svg>\n        </span>\n      )}\n\n      {startContent !== undefined && (\n        <span\n          data-slot=\"startContent\"\n          className={s.startContent({ class: classNames?.startContent })}\n        >\n          {startContent}\n        </span>\n      )}\n\n      <span data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n        {children}\n      </span>\n\n      {endContent !== undefined && (\n        <span data-slot=\"endContent\" className={s.endContent({ class: classNames?.endContent })}>\n          {endContent}\n        </span>\n      )}\n    </RACButton>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgBA,SAAO,EACrB,SACA,MACA,OACA,QACA,YACA,WACA,OAAO,UACP,SACA,cACA,YACA,UACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAS;EAAM;EAAO;CAAO,CAAC;CAEvD,OACE,qBAACC,QAAD;EACM;EACE;EAEN,YAAY,eAAe,QAAQ,cAAc;EACxC;EACT,aAAU;EACV,gBAAc,cAAc,OAAO,OAAO,KAAA;EAC1C,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAR5D,UAAA;GAUG,cAAc,QACb,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IACnD,eAAY;IAEZ,UAAA,qBAAC,OAAD;KAAK,SAAQ;KAAY,OAAM;KAAM,QAAO;KAAM,MAAK;KAAO,eAAY;KAA1E,UAAA,CACE,oBAAC,UAAD;MAAQ,IAAG;MAAI,IAAG;MAAI,GAAE;MAAI,QAAO;MAAe,aAAY;MAAI,SAAQ;KAAQ,CAAA,GAClF,oBAAC,QAAD;MAAM,GAAE;MAAsB,QAAO;MAAe,aAAY;KAAK,CAAA,CAClE;;GACD,CAAA;GAGP,iBAAiB,KAAA,KAChB,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACG,CAAA;GAGR,oBAAC,QAAD;IAAM,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACpE;GACG,CAAA;GAEL,eAAe,KAAA,KACd,oBAAC,QAAD;IAAM,aAAU;IAAa,WAAW,EAAE,WAAW,EAAE,OAAO,YAAY,WAAW,CAAC;IACnF,UAAA;GACG,CAAA;EAEC;;AAEf"}

package/dist/button/button.styles.d.mts

@@ -0,0 +1,82 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/button/button.styles.d.ts
+/**
+ * Button のスタイル定義。
+ *
+ * `tv({ extend: buttonStyles })` で拡張できるよう named export する。
+ * npm 配布の「コードを所有できない」という不満への回答（FR-04）。
+ *
+ * slot ベースの定義なので、拡張は `base` ではなく `slots` で行う。
+ * `base` は黙って無視される。
+ *
+ * @example
+ * import { buttonStyles } from '@novi-ui/raster'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myButton = tv({
+ *   extend: buttonStyles,
+ *   slots: { root: 'uppercase tracking-widest' },
+ * })
+ */
+declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  startContent: string;
+  endContent: string;
+  spinner: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  startContent: string;
+  endContent: string;
+  spinner: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  startContent: string;
+  endContent: string;
+  spinner: string;
+}>>;
+type ButtonStyleProps = Parameters<typeof buttonStyles>[0];
+//#endregion
+export { ButtonStyleProps, buttonStyles };
+//# sourceMappingURL=button.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.mts","names":[],"sources":["../../src/button/button.styles.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;cA0Ia,0CAAY;;IAhGkB;;;IAoDI;;;IAWN;;;IAOI;;;;;;;;;;IAtEF;;;IAoDI;;;IAWN;;;IAOI;;;;;;;;;;IAtEF;;;IAoDI;;;IAWN;;;IAOI;;;;;;;;;KAgCjC,mBAAmB,kBAAkB"}