sparkle-design 0.9.0

package/README.md

@@ -0,0 +1,328 @@
+<p align="center">
+  <a href="https://sparkle-design.goodpatch.com/">
+    <img src="https://raw.githubusercontent.com/goodpatch/sparkle-design/main/public/thumbnail.png" alt="Sparkle Design" width="1200">
+  </a>
+</p>
+
+# Sparkle Design for React
+
+**[English](./README.en.md)** | 日本語
+
+[![npm version](https://img.shields.io/npm/v/sparkle-design)](https://www.npmjs.com/package/sparkle-design)
+[![Sparkle Design](https://img.shields.io/badge/made%20with-Sparkle%20Design-0969DA)](https://sparkle-design.goodpatch.com/)
+[![ci](https://github.com/goodpatch/sparkle-design/actions/workflows/ci.yml/badge.svg)](https://github.com/goodpatch/sparkle-design/actions/workflows/ci.yml)
+[![License: Apache-2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+
+
+React.js + TypeScript を用いたコンポーネントライブラリです。<br />
+shadcn/ui をベースに、[グッドパッチ](https://goodpatch.com/)のデザインシステム「Sparkle Design」を実装しています。
+
+## 特徴
+
+- 🔧 **柔軟性** ... shadcn/ui をベースに shadcn/ui registry に対応しているため、1コンポーネントから導入が可能です。npm パッケージとしても公開しているため、プロジェクトごとに適した方法で導入していただくことが出来ます。
+- ♿️ **アクセシビリティ** ... Sparkle Design はアクセシビリティを重視して設計されています。
+- 🎨 **カスタマイズ性** ... 専用CLIツールを利用し、Figmaファイルと同等のカスタマイズを適用することが出来ます。これによりSparkle Designをベースとしたデザインシステムのコードを素早く用意することが出来ます。
+- 🤖 **AI フレンドリー** ... Claude Code / Cursor / Codex 向けのスキルとガード設定を同梱。AI コーディングでもデザインシステムの品質を維持できます。
+
+## 使用方法
+
+### パッケージのインストール
+
+npm パッケージとして公開済みです。以下の手順でインストールできます。
+
+```bash
+npm install sparkle-design
+# または
+pnpm add sparkle-design
+# または
+yarn add sparkle-design
+```
+
+> このパッケージには CSS は同梱されません。利用側で `sparkle-design-cli generate` を実行し、生成された `sparkle-design.css` / `SparkleHead.tsx` を自分のアプリに配置して利用してください。Tailwind エントリポイント CSS（`globals.css` 等）には `@source` ディレクティブが自動挿入されます。
+
+> **Server Component で使う場合**: `"use client"` を含むコンポーネントは個別 import を推奨します。各コンポーネントの [README](src/components/ui/) に Server Component / Client Component の情報が記載されています。
+>
+> ```tsx
+> import { Button } from "sparkle-design/button";
+> ```
+
+### 個別コンポーネントの導入
+
+Sparkle Design は shadcn/ui registry に対応しています。レジストリの URL は Storybook からコピーすることができます。<br />
+shadcn/ui registry の詳細な情報は [公式ドキュメント](https://ui.shadcn.com/docs/registry/getting-started) を参照してください。
+
+```bash
+pnpm dlx shadcn@latest add [registry URL]
+```
+
+また[Namespaces](https://ui.shadcn.com/docs/registry/namespace)を`components.json`に指定することで、コンポーネント名でのインストールも可能になります。
+
+```json
+{
+  "registries": {
+    "@sparkle-design": "https://sparkle-design.goodpatch.com/r/{name}.json"
+  }
+}
+```
+
+```bash
+pnpm dlx shadcn@latest add @sparkle-design/button
+```
+
+### 基本的な使用例
+
+```tsx
+import React from "react";
+import { Button, Badge, Card } from "sparkle-design";
+
+function App() {
+  return (
+    <div>
+      <Card>
+        <h1>Sparkle Design を使った例</h1>
+        <Badge variant="primary">新機能</Badge>
+        <Button variant="primary" size="md">
+          ボタンをクリック
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### スタイルファイルについて
+
+- **Tailwind エントリポイント CSS**（`globals.css` / `index.css` 等）: 基本的な Tailwind CSS とリセットスタイル
+- **`sparkle-design.css`**: Sparkle Design のデザイントークン（カラー、フォント、角丸、シャドウなど）
+- **`SparkleHead.tsx`**: フォント読み込み用 React コンポーネント
+
+これらのファイルをインポートすることで、Sparkle Design の全機能を利用できます。
+
+#### npm パッケージとして利用する場合
+
+`sparkle-design` を npm パッケージとしてインストールして利用する場合、TailwindCSS v4 がパッケージ内のユーティリティクラスを検出できるよう `@source` ディレクティブが必要です。
+
+`sparkle-design-cli generate` を実行すると、`@import "tailwindcss"` を含む CSS ファイルを自動検出し、`@source` ディレクティブを挿入します。`globals.css` 以外のファイル名（Vite の `index.css` 等）にも対応しています。自動検出がうまく動かない場合は `sparkle.config.json` の `extend.globals-path` か CLI の `--globals-path` オプションで明示的に指定できます。
+
+手動で設定する場合は、Tailwind エントリポイント CSS に以下を追加してください:
+
+```css
+@import "tailwindcss";
+/* sparkle-design のクラスをスキャン対象にする */
+/* パスは CSS ファイルの配置に応じて調整（src/app/globals.css なら ../../node_modules/...） */
+@source "../../node_modules/sparkle-design/dist";
+/* Sparkle Design のカスタム定義（Tailwindの後にインポート） */
+@import "./sparkle-design.css";
+```
+
+> **注意**: `@source` の相対パスは CSS ファイルの配置場所に依存します。上記は `src/app/globals.css` の場合の例です。
+
+#### Sparkle Design CSS と SparkleHead の生成
+
+`sparkle.config.json` の設定に基づいて、デザインシステムに準拠した CSS とフォント読み込み用コンポーネントを生成します。
+
+```bash
+npx sparkle-design-cli generate
+```
+
+このコマンドは以下のファイルを生成します:
+- `sparkle-design.css` — デザイントークン CSS
+- `SparkleHead.tsx` — フォント読み込み用 React コンポーネント
+
+`SparkleHead` はルートレイアウトの `<head>` 内に配置してください:
+
+```tsx
+import { SparkleHead } from "./SparkleHead";
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <head>
+        <SparkleHead />
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+> **Next.js App Router で `@next/next/no-head-element` が出る場合**: `next/core-web-vitals` を使用しているプロジェクトでは、`layout.tsx` に `<head>` を直接書くと lint エラーになることがあります。その場合は `eslint-disable` で該当行を除外するか、`next/font` による代替方法を検討してください。
+
+> `SparkleHead` は `<link rel="preconnect">` と `<link rel="stylesheet">` でフォントを読み込みます。CSS の `@import` に比べてフォントの発見が早く、特にモバイル環境でのアイコン表示が改善されます。
+
+設定ファイル (`sparkle.config.json`) の基本設定：
+
+- `primary`: プライマリカラー（blue, red, orange, green, purple, pink, yellow）
+- `font-pro`: プロポーショナルフォント（[Google Fonts](https://fonts.google.com/) の名前）
+- `font-mono`: モノスペースフォント（[Google Fonts](https://fonts.google.com/) の名前）
+- `radius`: 角丸設定（none, sm, md, lg, xl, full）
+
+設定ファイルは [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364/sparkle-design-theme-settings) Figma プラグインから書き出すことができます。
+
+フォントウェイトのカスタマイズ、フォールバックチェーン、カスタムトークン CSS などの拡張設定は `sparkle.config.json` の `extend` セクションで指定できます。詳細は `sparkle-design-cli generate --help` を参照してください。
+
+```bash
+# CSS を生成
+npx sparkle-design-cli generate
+
+# アンチパターンを検査
+npx sparkle-design-cli check src --strict
+
+# AI アシスタント向けの guard 設定を導入先プロジェクトに差し込む
+npx sparkle-design-cli setup --assistant claude
+```
+
+`setup` は導入先の `package.json` に `lint:sparkle` スクリプトを追加し、AI アシスタント向けの指示ファイル（`CLAUDE.md` / `AGENTS.md` / `.cursor/rules/` 等）に Sparkle Design の品質チェックガイドを差し込みます。詳細は `sparkle-design-cli setup --help` を参照してください。
+
+## 開発ガイド
+
+### 開発環境
+
+- Node.js 22.14.0 以上
+- pnpm 10 以上
+
+### ディレクトリ構成
+
+```text
+├─ src/
+│  ├─ app/            # Sparkle Designのページとスタイルファイル
+│  ├─ components/     # React コンポーネント
+│  └─ lib/            # 共有ユーティリティ
+├─ scripts/           # 各種スクリプト
+├─ docs/
+│  └─ ai-instructions/ # 開発・テスト・AI向けガイドライン（ソース）
+└─ .github/           # GitHub関連の設定ファイル
+```
+
+### Package のビルド
+
+```bash
+pnpm build:package
+```
+
+### Storybook の起動
+
+```bash
+pnpm storybook
+```
+
+### テストの実行
+
+```bash
+pnpm test
+```
+
+テストガイドラインについては `docs/ai-instructions/testing.md` を参照してください。
+
+### コードフォーマット
+
+```bash
+# フォーマットチェック
+pnpm format:check
+
+# 自動フォーマット
+pnpm format
+
+# ESLint チェック (Next.js 経由)
+pnpm lint:check
+# または
+pnpm lint
+
+# ESLint 自動修正 (Next.js 経由)
+pnpm lint:fix
+
+# 型チェック
+pnpm type-check
+```
+
+**注意**: ESLintは`next lint`コマンドを使用しており、Next.jsプロジェクトに最適化された設定とルールが適用されます。
+
+### Makefile について
+
+Makefile では次のターゲットが定義されています。
+
+- `registry` ... レジストリの生成と公開ファイルへのコピー
+- `new-component` ... 対話形式で新規コンポーネントを作成
+
+`make help` で詳細は確認してください。
+
+### Sparkle Design バッジ
+
+Sparkle Design のバッジは、コンポーネントが Sparkle Design を使用していることを示します。README に次のように追加してください。
+
+```markdown
+[![Sparkle Design](https://img.shields.io/badge/made%20with-Sparkle%20Design-0969DA)](https://sparkle-design.goodpatch.com/)
+```
+
+### その他
+
+- コメントの書き方は `docs/ai-instructions/comment-style.md` を参照してください。
+- コミットメッセージの形式は `.github/copilot-commit-message-instructions.md` のルールに従います。
+- 変更履歴は `CHANGELOG.md` を参照してください。
+- 公開用ドメインを切り替える場合は `pnpm update:public-domain -- --to https://new-domain.example.com --dry-run` で影響範囲を確認し、その後 `--dry-run` を外して一括更新できます。
+- その他開発・テスト・AI関連のガイドラインは `docs/ai-instructions/` ディレクトリを参照してください。
+
+## コンポーネント公開状況
+
+現在公開されているコンポーネントの一覧です。
+✅ 公開中
+❌ 非公開・開発前
+
+| コンポーネント      | 実装  | Storybook | レジストリ   | Figma Code Connect | A11y チェック |
+| ----------------- | ---- | --------- | ---------- | ------------------ | ------------- |
+| Avatar            | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Badge             | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Breadcrumb        | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Button            | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Calendar          | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Card              | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Checkbox          | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Dialog            | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Divider           | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Filter Chip       | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Form              | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Icon              | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Icon Button       | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Image             | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Inline Message    | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Input             | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Input Chip        | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Input Date        | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Input File        | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Input Number      | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Input Password    | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Input Search      | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Input Time        | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Link              | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| List              | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Menu              | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Modal             | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Overlay           | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Pagination        | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Popover           | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Radio             | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Segmented Control | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Select            | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Side Navigation   | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Skeleton          | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Slider            | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Slot              | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Spinner           | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Stack             | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Stepper           | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Switch            | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Table             | ❌   | ❌        | ❌         | ❌                 | ❌            |
+| Tabs              | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Tag               | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Textarea          | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Toast             | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Tooltip           | ✅   | ✅        | ✅         | ✅                 | ✅            |
+| Vertical Tabs     | ❌   | ❌        | ❌         | ❌                 | ❌            |
+
+## ライセンス
+
+[Apache License 2.0](LICENSE)
+
+Copyright 2026 [Goodpatch Inc.](https://goodpatch.com/)

package/dist/components/ui/badge/index.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "normal" | "emphasis" | null | undefined;
+    isNumberVisible?: boolean | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    isGapped?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * バッジのサイズ
+     * en: Size of the badge
+     */
+    size?: BadgeVariants["size"];
+    /**
+     * バッジのバリエーション
+     * en: Variation of the badge
+     */
+    variant?: BadgeVariants["variant"];
+    /**
+     * 数字表示するかどうか
+     * en: Whether to display numbers
+     */
+    isNumberVisible?: boolean;
+    /**
+     * 隙間を設けるかどうか
+     * en: Whether to add gaps
+     */
+    isGapped?: boolean;
+}
+/**
+ * **概要 / Overview**
+ *
+ * - バッジは特定の要素に対して通知の数やタスクの数などの数値情報を付与するために使用するコンポーネントです。
+ * - en: The Badge component is used to attach numerical information such as notification counts or task counts to specific elements.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - ステータス表示や分類ラベルには `Badge` を使わず、`Tag` を使ってください。
+ *   en: Do not use `Badge` for status display or category labels. Use `Tag` instead.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <>
+ *   <Badge>3</Badge>
+ *   <Tag status="warning" variant="outline">未紐付け</Tag>
+ * </>
+ *
+ * // ❌ Wrong - ステータスラベルに Badge を使わない
+ * <Badge>未紐付け</Badge>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Badge size="md" variant="normal">5</Badge>
+ * ```
+ *
+ * @param {BadgeProps} props
+ */
+declare function Badge({ className, isNumberVisible, size, variant, isGapped, children, role, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/badge/index.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/badge/index.figma.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Badge } from "./index.js";
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+figma.connect(Badge, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=1274%3A1622", {
+    props: {
+        // These props were automatically mapped based on your linked code:
+        size: figma.enum("size", {
+            xs: "xs",
+            sm: "sm",
+            md: "md",
+            lg: "lg",
+        }),
+        variant: figma.enum("variant", {
+            normal: "normal",
+            emphasis: "emphasis",
+        }),
+        isGapped: figma.boolean("isGapped"),
+        // No matching props could be found for these Figma properties:
+        number: figma.string("number"),
+    },
+    example: props => (_jsx(Badge, { size: props.size, variant: props.variant, isGapped: props.isGapped, children: props.number })),
+});

package/dist/components/ui/badge/index.js

@@ -0,0 +1,129 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../../lib/utils.js";
+const badgeVariants = cva("inline-flex items-center text-white text-center justify-center rounded-full transition-colors focus:outline-hidden focus:ring-2 focus:ring-[var(--color-ring-normal)] focus:ring-offset-2", {
+    variants: {
+        variant: {
+            normal: "bg-info-500",
+            emphasis: "bg-negative-500",
+        },
+        isNumberVisible: {
+            true: "",
+            false: "",
+        },
+        size: {
+            xs: "w-2 h-2 min-w-2",
+            sm: "w-4 h-4 min-w-4",
+            md: "min-w-6 py-0.5 px-1.5 character-1-bold-mono",
+            lg: "min-w-8 py-1 px-1.5 character-3-bold-mono",
+        },
+        isGapped: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // isGappedのボーダー設定
+        {
+            isGapped: true,
+            size: "xs",
+            class: "outline-white outline-2",
+        },
+        {
+            isGapped: true,
+            size: "sm",
+            class: "outline-white outline-4",
+        },
+        {
+            isGapped: true,
+            size: "md",
+            class: "outline-white outline-4",
+        },
+        {
+            isGapped: true,
+            size: "lg",
+            class: "outline-white outline-4",
+        },
+        // 数字がない場合はheightを指定
+        {
+            isNumberVisible: false,
+            size: "md",
+            class: "h-6",
+        },
+        {
+            isNumberVisible: false,
+            size: "lg",
+            class: "h-8",
+        },
+    ],
+    defaultVariants: {
+        isNumberVisible: true,
+        size: "md",
+        variant: "normal",
+        isGapped: false,
+    },
+});
+/**
+ * **概要 / Overview**
+ *
+ * - バッジは特定の要素に対して通知の数やタスクの数などの数値情報を付与するために使用するコンポーネントです。
+ * - en: The Badge component is used to attach numerical information such as notification counts or task counts to specific elements.
+ *
+ * **アンチパターン / Anti-patterns**
+ *
+ * - ステータス表示や分類ラベルには `Badge` を使わず、`Tag` を使ってください。
+ *   en: Do not use `Badge` for status display or category labels. Use `Tag` instead.
+ *
+ * ```tsx
+ * // ✅ Correct
+ * <>
+ *   <Badge>3</Badge>
+ *   <Tag status="warning" variant="outline">未紐付け</Tag>
+ * </>
+ *
+ * // ❌ Wrong - ステータスラベルに Badge を使わない
+ * <Badge>未紐付け</Badge>
+ * ```
+
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Badge size="md" variant="normal">5</Badge>
+ * ```
+ *
+ * @param {BadgeProps} props
+ */
+function Badge(_a) {
+    var { className, isNumberVisible = true, size, variant = "normal", isGapped = false, children, role = "status" } = _a, props = __rest(_a, ["className", "isNumberVisible", "size", "variant", "isGapped", "children", "role"]);
+    // sm以下のサイズの場合は、文字を非表示にする
+    // en: Hide text for sizes sm and below
+    if (size === "sm" || size === "xs") {
+        isNumberVisible = false;
+    }
+    // childrenがない場合はisNumberVisibleがfalseの扱いにする
+    // en: Treat as isNumberVisible=false when children is absent
+    if (!children) {
+        isNumberVisible = false;
+    }
+    // 視覚的テキストが非表示の場合、aria-label が必要（WCAG 1.1.1）
+    // en: When visible text is hidden, aria-label is required (WCAG 1.1.1)
+    if (process.env.NODE_ENV !== "production") {
+        if (!isNumberVisible && !props["aria-label"] && !props["aria-labelledby"]) {
+            console.warn("[Badge] 視覚的テキストが非表示の場合は aria-label を指定してください（WCAG 1.1.1）。" +
+                " / When visible text is hidden, please provide aria-label (WCAG 1.1.1).");
+        }
+    }
+    return (_jsx("div", Object.assign({ role: role, className: cn(badgeVariants({ isNumberVisible, size, variant, isGapped }), className) }, props, { children: isNumberVisible && children })));
+}
+export { Badge, badgeVariants };

package/dist/components/ui/breadcrumb/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright 2026 Goodpatch Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import * as React from "react";
+import { Link } from "@/components/ui/link";
+/**
+ * **概要 / Overview**
+ *
+ * - パンくずはユーザーが現在のページ階層を理解し、親の階層へ戻るためのナビゲーションとして機能するコンポーネントです。
+ * - en: The Breadcrumb component helps users understand the current page hierarchy and navigate back to parent levels.
+ *
+ * **使用例 / Usage Example**
+ *
+ * ```tsx
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Link</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @param {BreadcrumbProps} props
+ */
+export declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+/**
+ * パンくずリスト（ol）
+ * en: Breadcrumb list (ol)
+ *
+ * @param {React.ComponentProps<"ol">} props
+ */
+export declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+/**
+ * パンくずアイテム（li）
+ * en: Breadcrumb item (li)
+ *
+ * @param {React.ComponentProps<"li">} props
+ */
+export declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+/**
+ * パンくずリンク
+ * en: Breadcrumb link
+ *
+ * @param {React.ComponentProps<typeof Link>} props
+ */
+export declare function BreadcrumbLink({ className, ...props }: React.ComponentProps<typeof Link>): import("react/jsx-runtime").JSX.Element;
+/**
+ * パンくずの区切り（/など）
+ * en: Breadcrumb separator (e.g. /)
+ *
+ * @param {React.ComponentProps<"span">} props
+ */
+export declare function BreadcrumbSeparator({ className, children, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+/**
+ * 現在ページ表示用
+ * en: Current page label (not a link)
+ *
+ * @param {React.ComponentProps<"span">} props
+ */
+export declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/breadcrumb/index.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/breadcrumb/index.figma.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import figma from "@figma/code-connect";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "./index.js";
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+figma.connect(Breadcrumb, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=2755%3A25149", {
+    props: {},
+    example: props => (_jsx(Breadcrumb, { children: _jsxs(BreadcrumbList, { children: [_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbLink, { href: "/", children: "Home" }) }), _jsx(BreadcrumbSeparator, { children: "/" }), _jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Current Page" }) })] }) })),
+});
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+figma.connect(BreadcrumbItem, "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=252%3A8944", {
+    props: {
+    // No matching props could be found for these Figma properties:
+    // "isCurrent": figma.boolean('isCurrent')
+    },
+    example: props => (_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { children: "Current Page" }) })),
+});