@novi-ui/raster 0.1.0

package/README.md

@@ -0,0 +1,129 @@
+# @novi-ui/raster
+
+Novi UI のテーマ1。**ミニマル / スイス系。**
+
+角を立て、影を使わず、線は 1px だけ。余白と整列で階層を作る。
+ごまかしが効かないぶん、実装の精度がそのまま出る。
+
+```bash
+pnpm add @novi-ui/raster @novi-ui/core react-aria-components
+```
+
+```tsx
+import '@novi-ui/core/base.css'
+import '@novi-ui/raster/raster.css'
+import { Button, Input } from '@novi-ui/raster'
+
+export function Example() {
+  return (
+    <form>
+      <Input label="メールアドレス" type="email" isRequired />
+      <Button type="submit" color="primary">送信</Button>
+    </form>
+  )
+}
+```
+
+Provider は要りません。テーマは CSS 変数だけで効きます。
+
+## デザイン言語（数値定義）
+
+「ミニマル」を主観で運用すると必ずブレるので、すべて数値で固定しています。
+違反は CI（`scripts/check-design-rules.mjs`）が検出します。
+
+| 項目 | 規則 |
+|---|---|
+| ベースグリッド | 垂直リズムは 4px、ブロック間余白は 8px の倍数 |
+| コンポーネント高さ | `sm` 32px / `md` 40px / `lg` 48px |
+| タイポスケール | 比率 1.2。12 / 14 / 16 / 20 / 24 / 30 / 36px |
+| 境界線 | **1px のみ。** 2px 以上は使わない |
+| 影 | **使わない。** 階層は境界線と背景色の差で表す |
+| 角丸 | 既定 0。**最大でも 2px** |
+| 彩度 | 中立色は chroma 0。意味を持つ色のみ有彩（上限 0.19） |
+| モーション | `--novi-duration-fast`(120ms) のみ。`opacity` と `translate` だけ |
+
+## 知っておくべき仕様
+
+### `radius` は効きません（意図的）
+
+API としては `radius="lg"` を受け付けますが、Raster では **`md` も `lg` も 2px に潰れます**。
+角を立てるのが Raster の思想だからです。不具合ではありません。
+
+語彙は core が共通で固定し、解釈はテーマの自由、という設計です。
+おかげでドキュメントのコード例がテーマを跨いでそのまま動きます。
+
+### Switch は矩形です
+
+一般的なピル型トグルは「角を立てる」原則と衝突するため、
+トラックもサムも角丸 0 の矩形にしています。
+形が見慣れないぶん状態が読み取りにくいので、**ラベルの併記を強く推奨**します。
+
+```tsx
+<Switch isSelected={enabled} onChange={setEnabled}>
+  メール通知を受け取る
+</Switch>
+```
+
+### Tabs は背景を変えません
+
+選択中は**下線 1px と文字色**だけで示します。背景の塗り分けは面を増やすため使いません。
+
+### Spinner だけ回転します
+
+「動きで飾らない」原則の唯一の例外です。
+代替のローディング表現（点滅・バーの往復）は視認性か情報量で劣るため、ここだけ許可しています。
+`prefers-reduced-motion` が有効なときは止まります。
+
+## スタイルの拡張
+
+全コンポーネントの `tv()` 定義を named export しています。
+
+```ts
+import { buttonStyles } from '@novi-ui/raster'
+import { tv } from 'tailwind-variants'
+
+// slot ベースの定義なので `slots` で足す。`base` は効かない
+const myButton = tv({
+  extend: buttonStyles,
+  slots: { root: 'uppercase tracking-widest' },
+})
+```
+
+**variant のクラスを上書きしたい場合は `classNames` を使います。**
+`extend` の `slots` は base に足されるため、後から適用される variant に負けます。
+
+```tsx
+// ✗ size variant の w-9 に負ける
+tv({ extend: switchStyles, slots: { track: 'w-14' } })
+
+// ✓ 呼び出し時に渡せば勝つ
+<Switch classNames={{ track: 'w-14' }} />
+```
+
+ブランド色を変えるだけなら CSS 変数の上書きで足ります。
+
+```css
+:root {
+  --novi-color-primary: oklch(50% 0.18 20);
+}
+```
+
+## slot
+
+全コンポーネントは構成部位に `data-slot="<名前>"` を出力します。
+テスト・CSS の上書き・視覚回帰がすべてこれに乗ります。
+
+```css
+[data-slot='panel'] { max-width: 40rem; }
+```
+
+slot 名の一覧は `@novi-ui/core` の `NOVI_CONTRACTS` から取得できます。
+
+## 日本語入力
+
+`Input` と `TextArea` の `onKeyDown` は、**IME 変換中のキーを受け取りません**。
+変換確定の Enter でフォーム送信が暴発する事故を、利用側が意識せずに防げます。
+
+## ライセンス
+
+MIT

package/dist/accordion/accordion.d.mts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { AccordionProps } from "@novi-ui/core";
+//#region src/accordion/accordion.d.ts
+interface AccordionItemProps {
+  id: string;
+  title: ReactNode;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * Accordion の項目。
+ *
+ * @example
+ * <AccordionItem id="shipping" title="配送について">…</AccordionItem>
+ */
+declare function AccordionItem({ id, title, isDisabled, children, className }: AccordionItemProps): import("react").JSX.Element;
+/**
+ * 折りたたみできる項目の集合。
+ *
+ * 開閉の記号は `+` / `−` の線で示す。三角矢印の回転は使わない。
+ *
+ * @example
+ * <Accordion allowsMultipleExpanded>
+ *   <AccordionItem id="shipping" title="配送について">…</AccordionItem>
+ * </Accordion>
+ */
+declare function Accordion({ variant, size, allowsMultipleExpanded, expandedKeys, defaultExpandedKeys, onExpandedChange, isDisabled, children, className, classNames, id }: AccordionProps): import("react").JSX.Element;
+//#endregion
+export { Accordion, AccordionItem, AccordionItemProps };
+//# sourceMappingURL=accordion.d.mts.map

package/dist/accordion/accordion.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.mts","names":[],"sources":["../../src/accordion/accordion.tsx"],"mappings":";;;UAuBiB;EACf;EACA,OAAO;EACP;EACA,WAAW;EACX;;;;;;;;iBASc,gBAAgB,IAAI,OAAO,YAAY,UAAU,aAAa,qCAAkB,IAAA;;;;;;;;;;;iBAuChF,YACd,SACA,MACA,wBACA,cACA,qBACA,kBACA,YACA,UACA,WACA,YACA,MACC,iCAAc,IAAA"}

package/dist/accordion/accordion.mjs

@@ -0,0 +1,88 @@
+"use client";
+import { accordionStyles } from "./accordion.styles.mjs";
+import { Button, Disclosure, DisclosureGroup, DisclosurePanel, Heading } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/accordion/accordion.tsx
+/** 開閉を示す記号。回転させず `+` と `−` の線で描く。 */
+function Indicator({ isExpanded }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		width: "0.875em",
+		height: "0.875em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M3 8h10",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), !isExpanded && /* @__PURE__ */ jsx("path", {
+			d: "M8 3v10",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		})]
+	});
+}
+/**
+* Accordion の項目。
+*
+* @example
+* <AccordionItem id="shipping" title="配送について">…</AccordionItem>
+*/
+function AccordionItem({ id, title, isDisabled, children, className }) {
+	const s = accordionStyles();
+	return /* @__PURE__ */ jsx(Disclosure, {
+		id,
+		isDisabled,
+		"data-slot": "item",
+		className: s.item({ class: className }),
+		children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, {
+			"data-slot": "heading",
+			className: s.heading(),
+			children: /* @__PURE__ */ jsxs(Button, {
+				slot: "trigger",
+				"data-slot": "trigger",
+				className: s.trigger(),
+				children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx("span", {
+					"data-slot": "indicator",
+					className: s.indicator(),
+					children: /* @__PURE__ */ jsx(Indicator, { isExpanded })
+				})]
+			})
+		}), /* @__PURE__ */ jsx(DisclosurePanel, {
+			"data-slot": "panel",
+			className: s.panel(),
+			children
+		})] })
+	});
+}
+/**
+* 折りたたみできる項目の集合。
+*
+* 開閉の記号は `+` / `−` の線で示す。三角矢印の回転は使わない。
+*
+* @example
+* <Accordion allowsMultipleExpanded>
+*   <AccordionItem id="shipping" title="配送について">…</AccordionItem>
+* </Accordion>
+*/
+function Accordion({ variant, size, allowsMultipleExpanded, expandedKeys, defaultExpandedKeys, onExpandedChange, isDisabled, children, className, classNames, id }) {
+	const s = accordionStyles({
+		variant,
+		size
+	});
+	return /* @__PURE__ */ jsx(DisclosureGroup, {
+		id,
+		allowsMultipleExpanded,
+		expandedKeys,
+		defaultExpandedKeys,
+		onExpandedChange: (keys) => onExpandedChange?.([...keys].map(String)),
+		isDisabled,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children
+	});
+}
+//#endregion
+export { Accordion, AccordionItem };
+
+//# sourceMappingURL=accordion.mjs.map

package/dist/accordion/accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.mjs","names":[],"sources":["../../src/accordion/accordion.tsx"],"sourcesContent":["'use client'\n\nimport type { AccordionProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport {\n  Button,\n  Disclosure,\n  DisclosureGroup,\n  DisclosurePanel,\n  Heading,\n} from 'react-aria-components'\nimport { accordionStyles } from './accordion.styles'\n\n/** 開閉を示す記号。回転させず `+` と `−` の線で描く。 */\nfunction Indicator({ isExpanded }: { isExpanded: boolean }) {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"0.875em\" height=\"0.875em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3 8h10\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      {!isExpanded && <path d=\"M8 3v10\" stroke=\"currentColor\" strokeWidth=\"1.5\" />}\n    </svg>\n  )\n}\n\nexport interface AccordionItemProps {\n  id: string\n  title: ReactNode\n  isDisabled?: boolean\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * Accordion の項目。\n *\n * @example\n * <AccordionItem id=\"shipping\" title=\"配送について\">…</AccordionItem>\n */\nexport function AccordionItem({ id, title, isDisabled, children, className }: AccordionItemProps) {\n  const s = accordionStyles()\n\n  return (\n    <Disclosure\n      id={id}\n      isDisabled={isDisabled}\n      data-slot=\"item\"\n      className={s.item({ class: className })}\n    >\n      {({ isExpanded }) => (\n        <>\n          <Heading data-slot=\"heading\" className={s.heading()}>\n            <Button slot=\"trigger\" data-slot=\"trigger\" className={s.trigger()}>\n              <span>{title}</span>\n              <span data-slot=\"indicator\" className={s.indicator()}>\n                <Indicator isExpanded={isExpanded} />\n              </span>\n            </Button>\n          </Heading>\n          <DisclosurePanel data-slot=\"panel\" className={s.panel()}>\n            {children}\n          </DisclosurePanel>\n        </>\n      )}\n    </Disclosure>\n  )\n}\n\n/**\n * 折りたたみできる項目の集合。\n *\n * 開閉の記号は `+` / `−` の線で示す。三角矢印の回転は使わない。\n *\n * @example\n * <Accordion allowsMultipleExpanded>\n *   <AccordionItem id=\"shipping\" title=\"配送について\">…</AccordionItem>\n * </Accordion>\n */\nexport function Accordion({\n  variant,\n  size,\n  allowsMultipleExpanded,\n  expandedKeys,\n  defaultExpandedKeys,\n  onExpandedChange,\n  isDisabled,\n  children,\n  className,\n  classNames,\n  id,\n}: AccordionProps) {\n  const s = accordionStyles({ variant, size })\n\n  return (\n    <DisclosureGroup\n      id={id}\n      allowsMultipleExpanded={allowsMultipleExpanded}\n      expandedKeys={expandedKeys}\n      defaultExpandedKeys={defaultExpandedKeys}\n      onExpandedChange={(keys) => onExpandedChange?.([...keys].map(String))}\n      isDisabled={isDisabled}\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      {children}\n    </DisclosureGroup>\n  )\n}\n"],"mappings":";;;;;;AAcA,SAAS,UAAU,EAAE,cAAuC;CAC1D,OACE,qBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAU,QAAO;EAAU,MAAK;EAAO,eAAY;EAAlF,UAAA,CACE,oBAAC,QAAD;GAAM,GAAE;GAAU,QAAO;GAAe,aAAY;EAAO,CAAA,GAC1D,CAAC,cAAc,oBAAC,QAAD;GAAM,GAAE;GAAU,QAAO;GAAe,aAAY;EAAO,CAAA,CACxE;;AAET;;;;;;;AAgBA,SAAgB,cAAc,EAAE,IAAI,OAAO,YAAY,UAAU,aAAiC;CAChG,MAAM,IAAI,gBAAgB;CAE1B,OACE,oBAAC,YAAD;EACM;EACQ;EACZ,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,UAAU,CAAC;EAEpC,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;GAAS,aAAU;GAAU,WAAW,EAAE,QAAQ;GAChD,UAAA,qBAAC,QAAD;IAAQ,MAAK;IAAU,aAAU;IAAU,WAAW,EAAE,QAAQ;IAAhE,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GACnB,oBAAC,QAAD;KAAM,aAAU;KAAY,WAAW,EAAE,UAAU;KACjD,UAAA,oBAAC,WAAD,EAAuB,WAAa,CAAA;IAChC,CAAA,CACA;;EACD,CAAA,GACT,oBAAC,iBAAD;GAAiB,aAAU;GAAQ,WAAW,EAAE,MAAM;GACnD;EACc,CAAA,CACjB,EAAA,CAAA;CAEM,CAAA;AAEhB;;;;;;;;;;;AAYA,SAAgB,UAAU,EACxB,SACA,MACA,wBACA,cACA,qBACA,kBACA,YACA,UACA,WACA,YACA,MACiB;CACjB,MAAM,IAAI,gBAAgB;EAAE;EAAS;CAAK,CAAC;CAE3C,OACE,oBAAC,iBAAD;EACM;EACoB;EACV;EACO;EACrB,mBAAmB,SAAS,mBAAmB,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,MAAM,CAAC;EACxD;EACZ,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAEzD;CACc,CAAA;AAErB"}

package/dist/accordion/accordion.styles.d.mts

@@ -0,0 +1,61 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/accordion/accordion.styles.d.ts
+/**
+ * Accordion のスタイル定義。
+ *
+ * @example
+ * const myAccordion = tv({ extend: accordionStyles, slots: { panel: 'pt-2' } })
+ */
+declare const accordionStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    trigger: string;
+    panel: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+    item: string;
+  }>;
+}, {
+  root: string;
+  item: string;
+  heading: string;
+  trigger: string;
+  indicator: string;
+  panel: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    trigger: string;
+    panel: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+    item: string;
+  }>;
+}, {
+  root: string;
+  item: string;
+  heading: string;
+  trigger: string;
+  indicator: string;
+  panel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    trigger: string;
+    panel: string;
+  }>;
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+    item: string;
+  }>;
+}, {
+  root: string;
+  item: string;
+  heading: string;
+  trigger: string;
+  indicator: string;
+  panel: string;
+}>>;
+type AccordionStyleProps = Parameters<typeof accordionStyles>[0];
+//#endregion
+export { AccordionStyleProps, accordionStyles };
+//# sourceMappingURL=accordion.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.styles.d.mts","names":[],"sources":["../../src/accordion/accordion.styles.ts"],"mappings":";;;;;;;;cAqDa,6CAAe;;IAZgB;IAAe;;;IARZ;IAAc;;;;;;;;;;;IAQjB;IAAe;;;IARZ;IAAc;;;;;;;;;;;IAQjB;IAAe;;;IARZ;IAAc;;;;;;;;;;KA0BjD,sBAAsB,kBAAkB"}

package/dist/accordion/accordion.styles.mjs

@@ -0,0 +1,78 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/accordion/accordion.styles.ts
+/**
+* インジケータは `+` と `−` の線で示す。
+* 三角矢印を回転させる表現は Raster の「動きで飾らない」原則に反するため使わない。
+*/
+const slots = {
+	root: "flex flex-col border-t border-[var(--novi-color-border)]",
+	item: "border-b border-[var(--novi-color-border)]",
+	heading: "m-0",
+	trigger: [
+		"flex items-center justify-between gap-4 w-full text-left",
+		"cursor-pointer outline-none",
+		"text-[var(--novi-color-fg)]",
+		"transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"hover:bg-[var(--novi-color-subtle)]",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
+		focusRing
+	].join(" "),
+	indicator: "shrink-0 text-[var(--novi-color-muted)]",
+	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-3 py-2.5 text-[length:var(--novi-text-sm)]",
+				panel: "px-3 pb-2.5"
+			},
+			md: {
+				trigger: "px-4 py-3 text-[length:var(--novi-text-base)]",
+				panel: "px-4 pb-3"
+			},
+			lg: {
+				trigger: "px-5 py-4 text-[length:var(--novi-text-base)]",
+				panel: "px-5 pb-4"
+			}
+		},
+		variant: {
+			solid: {
+				root: "border-t-0 gap-1",
+				item: "bg-[var(--novi-color-subtle)] border-b-0"
+			},
+			outline: {
+				root: "border-t border-[var(--novi-color-border)]",
+				item: "border-b"
+			},
+			soft: {
+				root: "border-t-0 gap-1",
+				item: "bg-[var(--novi-color-subtle)] border-b-0"
+			},
+			ghost: {
+				root: "border-t-0",
+				item: "border-b border-[var(--novi-color-border)]"
+			},
+			plain: {
+				root: "border-t-0 gap-2",
+				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'\n\n/**\n * インジケータは `+` と `−` の線で示す。\n * 三角矢印を回転させる表現は Raster の「動きで飾らない」原則に反するため使わない。\n */\nconst slots = {\n  root: 'flex flex-col border-t border-[var(--novi-color-border)]',\n  item: 'border-b border-[var(--novi-color-border)]',\n  // 見出し要素とその中のボタンを分ける。支援技術のために必要\n  heading: 'm-0',\n  trigger: [\n    'flex items-center justify-between gap-4 w-full text-left',\n    'cursor-pointer outline-none',\n    'text-[var(--novi-color-fg)]',\n    'transition-colors duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'hover:bg-[var(--novi-color-subtle)]',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n    focusRing,\n  ].join(' '),\n  indicator: 'shrink-0 text-[var(--novi-color-muted)]',\n  panel: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n} satisfies SlotMap<typeof accordionSlots, (typeof accordionRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { root: string; item: string }> = {\n  solid: { root: 'border-t-0 gap-1', item: 'bg-[var(--novi-color-subtle)] border-b-0' },\n  outline: { root: 'border-t border-[var(--novi-color-border)]', item: 'border-b' },\n  soft: { root: 'border-t-0 gap-1', item: 'bg-[var(--novi-color-subtle)] border-b-0' },\n  ghost: { root: 'border-t-0', item: 'border-b border-[var(--novi-color-border)]' },\n  plain: { root: 'border-t-0 gap-2', item: 'border-b-0' },\n}\n\nconst size: VariantMap<NoviSize, { trigger: string; panel: string }> = {\n  sm: { trigger: 'px-3 py-2.5 text-[length:var(--novi-text-sm)]', panel: 'px-3 pb-2.5' },\n  md: { trigger: 'px-4 py-3 text-[length:var(--novi-text-base)]', panel: 'px-4 pb-3' },\n  lg: { trigger: 'px-5 py-4 text-[length:var(--novi-text-base)]', panel: 'px-5 pb-4' },\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  variants: { size, variant },\n  defaultVariants: { variant: 'outline', size: 'md' },\n})\n\nexport type AccordionStyleProps = Parameters<typeof accordionStyles>[0]\n"],"mappings":";;;;;;;AAeA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CAEN,SAAS;CACT,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,OAAO;AACT;;;;;;;AAsBA,MAAa,kBAAkB,GAAG;CAChC;CACA,UAAU;EAAE;GAbZ,IAAI;IAAE,SAAS;IAAiD,OAAO;GAAc;GACrF,IAAI;IAAE,SAAS;IAAiD,OAAO;GAAY;GACnF,IAAI;IAAE,SAAS;IAAiD,OAAO;GAAY;EAWvE;EAAM;GArBlB,OAAO;IAAE,MAAM;IAAoB,MAAM;GAA2C;GACpF,SAAS;IAAE,MAAM;IAA8C,MAAM;GAAW;GAChF,MAAM;IAAE,MAAM;IAAoB,MAAM;GAA2C;GACnF,OAAO;IAAE,MAAM;IAAc,MAAM;GAA6C;GAChF,OAAO;IAAE,MAAM;IAAoB,MAAM;GAAa;EAiBpC;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,19 @@
+import { AvatarProps } from "@novi-ui/core";
+//#region src/avatar/avatar.d.ts
+/**
+ * 表示名からイニシャルを作る。
+ *
+ * 日本語の氏名は空白で区切られないことが多いので、
+ * 空白があれば各語の先頭、なければ先頭1文字を使う。
+ */
+declare function initialsOf(name: string): string;
+/**
+ * 人や組織を表す画像。読み込みに失敗したら fallback を表示する。
+ *
+ * @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;;;;;;;iBAgBX,SACd,MACA,QACA,KACA,MACA,UACA,OACA,WACA,YACA,MACC,8BAAW,IAAA"}

package/dist/avatar/avatar.mjs

@@ -0,0 +1,57 @@
+"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 を表示する。
+*
+* @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 * @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      {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;;;;;;;AAQA,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,GAGP,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":";;;;;;;;cA6Ca,0CAAY;;IArBgB;;;IAOI;;;;;;;;;IAPJ;;;IAOI;;;;;;;;;IAPJ;;;IAOI;;;;;;;;KAoBjC,mBAAmB,kBAAkB"}

package/dist/avatar/avatar.styles.mjs

@@ -0,0 +1,45 @@
+import { tv } from "tailwind-variants";
+//#region src/avatar/avatar.styles.ts
+const slots = {
+	root: [
+		"relative inline-grid place-items-center shrink-0",
+		"bg-[var(--novi-color-subtle)]",
+		"border border-[var(--novi-color-border)]",
+		"overflow-hidden select-none",
+		"text-[var(--novi-color-muted)] font-medium"
+	].join(" "),
+	image: "size-full object-cover",
+	fallback: "uppercase tracking-wide",
+	badge: "absolute -bottom-0.5 -right-0.5 ring-2 ring-[var(--novi-color-bg)]"
+};
+/**
+* Avatar のスタイル定義。
+*
+* @example
+* const myAvatar = tv({ extend: avatarStyles, slots: { root: 'border-2' } })
+*/
+const avatarStyles = tv({
+	slots,
+	variants: {
+		size: {
+			sm: { root: "size-8 text-[length:var(--novi-text-xs)]" },
+			md: { root: "size-10 text-[length:var(--novi-text-sm)]" },
+			lg: { root: "size-12 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'\n\nconst slots = {\n  root: [\n    'relative inline-grid place-items-center shrink-0',\n    'bg-[var(--novi-color-subtle)]',\n    'border border-[var(--novi-color-border)]',\n    'overflow-hidden select-none',\n    'text-[var(--novi-color-muted)] font-medium',\n  ].join(' '),\n  image: 'size-full object-cover',\n  fallback: 'uppercase tracking-wide',\n  // 右下に重ねる。地色で縁取りして境目を作る（影を使わない）\n  badge: 'absolute -bottom-0.5 -right-0.5 ring-2 ring-[var(--novi-color-bg)]',\n} satisfies SlotMap<typeof avatarSlots, (typeof avatarRequiredSlots)[number]>\n\nconst size: VariantMap<NoviSize, { root: string }> = {\n  sm: { root: 'size-8 text-[length:var(--novi-text-xs)]' },\n  md: { root: 'size-10 text-[length:var(--novi-text-sm)]' },\n  lg: { root: 'size-12 text-[length:var(--novi-text-base)]' },\n}\n\n/** Avatar は `full` を既定にする唯一のコンポーネント。人を表すものは丸で示す慣習に従う。 */\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":";;AAUA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;CACP,UAAU;CAEV,OAAO;AACT;;;;;;;AAuBA,MAAa,eAAe,GAAG;CAC7B;CACA,UAAU;EAAE;GAtBZ,IAAI,EAAE,MAAM,2CAA2C;GACvD,IAAI,EAAE,MAAM,4CAA4C;GACxD,IAAI,EAAE,MAAM,8CAA8C;EAoB9C;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
+/**
+ * 短いラベルで状態や分類を示す。
+ *
+ * 色だけで意味を伝えないこと。`success` と `danger` は色相が違うが、
+ * 色覚特性によっては区別できない。必ず文言を伴わせる（WCAG 1.4.1）。
+ *
+ * @example
+ * <Badge color="success" variant="soft">公開中</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"}