kaze-design-system 0.3.3 → 0.4.1

package/README.md

@@ -1,55 +1,78 @@
-# @kaze-ds/react
+# kaze-design-system
 
+[![npm version](https://img.shields.io/npm/v/kaze-design-system)](https://www.npmjs.com/package/kaze-design-system)
 [![GitHub](https://img.shields.io/github/license/yuki930/kaze-design-system)](https://github.com/yuki930/kaze-design-system/blob/main/LICENSE)
 
-Zinc ベースのミニマルデザインシステム。日本語組版に最適化。
+**Kaze (風)** は、管理画面・ダッシュボード・金融系アプリのための React デザインシステムです。**白と温かみのあるグレーを基調にした静かな配色**と、日本語組版への丁寧な最適化（PALT・和欧混植・読みやすい行間）、そしてコピペで完結する 63 のコンポーネントを 1 パッケージにまとめています。派手な色や装飾ではなく「読みやすさ」「情報密度」「長時間見続けても疲れないこと」を設計の中心に置いています。
 
-**GitHub**: https://github.com/yuki930/kaze-design-system
+- 🎨 **63 コンポーネント** — フォーム、テーブル、チャート、ダッシュボード UI、ランディングページ、マーケティングパーツまで
+- 🌏 **日本語組版に最適化** — PALT グローバル適用、和欧混植、括弧ツメ、適切な line-height
+- 🌓 **ライト / ダーク両対応** — `data-theme` 属性で切替、`prefers-color-scheme` 連動
+- 🎯 **素の CSS + カスケードレイヤー** — `@layer tokens, reset, components, utilities` でカスケード管理、Tailwind/CSS-in-JS 不要
+- 📦 **ESM only + Tree-shakeable** — React 19 + TypeScript、peer deps は `react`, `react-dom`, `lucide-react` のみ
+- 🤖 **AI フレンドリー** — [`/llms.txt`](https://kaze-design-system.vercel.app/llms.txt) で全コンポーネント API を 1 ファイル配信
+
+## 🚀 Links
+
+| | |
+|---|---|
+| **ライブプレビュー (ショーケース)** | https://kaze-design-system.vercel.app |
+| **コンポーネントドキュメント** | https://kaze-design-system.vercel.app/docs/components |
+| **サンプルページギャラリー** | https://kaze-design-system.vercel.app/gallery |
+| **npm パッケージ** | https://www.npmjs.com/package/kaze-design-system |
+| **GitHub** | https://github.com/yuki930/kaze-design-system |
+
+## 🖼 Live Examples
+
+実際のアプリケーション/ページ単位のサンプル実装。Vercel にデプロイされています:
+
+### ダッシュボード / 管理画面
+- [**分析ダッシュボード**](https://kaze-design-system.vercel.app/dashboard) — メトリック、チャート、テーブル組み合わせ
+- [**Analytics**](https://kaze-design-system.vercel.app/analytics) — KPI 一覧、BarList、Tracker
+- [**SaaS Stats**](https://kaze-design-system.vercel.app/saas-stats) — SaaS 系ダッシュボード
+- [**EC ダッシュボード**](https://kaze-design-system.vercel.app/ec-dashboard) — EC 管理画面
+- [**設定画面**](https://kaze-design-system.vercel.app/settings) — フォーム・FormField 活用例
+
+### ランディング・マーケティング
+- [**LP (SaaS)**](https://kaze-design-system.vercel.app/lp) — Hero, Features, Pricing, Testimonial, FAQ, CTA
+- [**LP 2**](https://kaze-design-system.vercel.app/lp2) — 異なる雰囲気の LP
+- [**Pricing**](https://kaze-design-system.vercel.app/pricing) — 料金プラン
+- [**Blog**](https://kaze-design-system.vercel.app/blog) — 記事一覧・記事詳細
+- [**Jobs**](https://kaze-design-system.vercel.app/jobs) — 求人ページ
+
+### アプリケーション
+- [**Login**](https://kaze-design-system.vercel.app/login) — 認証画面
+- [**Todo**](https://kaze-design-system.vercel.app/todo) — シンプルな Todo アプリ
+- [**Shopping**](https://kaze-design-system.vercel.app/shopping) — EC 商品一覧
+- [**Article**](https://kaze-design-system.vercel.app/article) — 記事ページ
+- [**Help**](https://kaze-design-system.vercel.app/help) — ヘルプセンター
 
 > **ESM only** — このパッケージは ES Modules のみを提供します。
 > `"type": "module"` が設定された環境、または ESM 対応バンドラー（Vite, Next.js, webpack 5+）で使用してください。
 
-## インストール
-
-```bash
-npm install @kaze-ds/react
-```
+## For AI assistants (Claude / Cursor / ChatGPT)
 
-### ローカル開発（npm link）
+AI コーディングアシスタントは以下のファイルからライブラリの全コンポーネント API を 1 リクエストで取得できます:
 
-公開前のライブラリをローカルの別プロジェクトで使う場合：
+- **Short index**: https://kaze-design-system.vercel.app/llms.txt
+- **Full API reference**: https://kaze-design-system.vercel.app/llms-full.txt
 
-```bash
-# 1. ライブラリをビルド & リンク
-cd kaze-design-system
-npm run build:lib
-npm link
-
-# 2. 利用側プロジェクトでリンク
-cd ../my-app
-npm link @kaze-ds/react
-```
+`llms-full.txt` には 62 コンポーネントの `Props` / `Usage` / カテゴリが機械可読形式で含まれており、Storybook を参照しなくても正確なコード提案が可能です。[llmstxt.org](https://llmstxt.org) 準拠。
 
-### ローカル開発（npm pack）
+## インストール
 
 ```bash
-# 1. ライブラリをビルド & パック
-cd kaze-design-system
-npm run build:lib
-npm pack
-# → kaze-ds-react-0.1.0.tgz が生成される
-
-# 2. 利用側プロジェクトでインストール
-cd ../my-app
-npm install ../kaze-design-system/kaze-ds-react-0.1.0.tgz
+npm install kaze-design-system
 ```
 
+Peer dependencies: `react@^19`, `react-dom@^19`, `lucide-react`
+
 ## CSS の読み込み
 
 ### まとめて読み込む（推奨）
 
 ```ts
-import "@kaze-ds/react/css/all";
+import "kaze-design-system/css/all";
 ```
 
 `css/all` は tokens / reset / components / utilities を `@layer` 付きでまとめたエントリポイントです。
@@ -58,10 +81,10 @@ CSS カスケードレイヤーにより詳細度が管理されるため、上
 ### 個別読み込み
 
 ```ts
-import "@kaze-ds/react/css/tokens";
-import "@kaze-ds/react/css/reset";
-import "@kaze-ds/react/css/components";
-import "@kaze-ds/react/css/utilities";
+import "kaze-design-system/css/tokens";
+import "kaze-design-system/css/reset";
+import "kaze-design-system/css/components";
+import "kaze-design-system/css/utilities";
 ```
 
 ### Next.js App Router
@@ -70,14 +93,13 @@ import "@kaze-ds/react/css/utilities";
 
 ```tsx
 // app/layout.tsx
-import "@kaze-ds/react/css/all";
+import "kaze-design-system/css/all";
 ```
 
 ## 基本的な使い方
 
 ```tsx
-import { Button, Card, CardHeader, CardTitle, CardBody } from "@kaze-ds/react";
-import { ThemeProvider } from "@kaze-ds/react/hooks";
+import { Button, Card, CardHeader, CardTitle, CardBody, ThemeProvider } from "kaze-design-system";
 
 function App() {
   return (
@@ -95,23 +117,36 @@ function App() {
 }
 ```
 
-## コンポーネント一覧（59 コンポーネント）
+## コンポーネント一覧（63 コンポーネント）
 
 | カテゴリ | コンポーネント |
 |---|---|
-| **フォーム** | Button, FAB, Input, NumberField, Select, Checkbox, Radio, Textarea, Switch, FormField |
-| **データ表示** | Card, Badge, Table, Metric, Avatar, BarList, Tracker, Watermark |
+| **フォーム** | Button, FAB, Input, NumberField, Select, Checkbox, Radio, Textarea, Switch, FormField, FilterPill |
+| **データ表示** | Card, Badge, StatusBadge, Table, Metric, Avatar, BarList, Tracker, Watermark |
 | **チャート** | BarChart, DonutChart, Sparkline |
 | **フィードバック** | Alert, Progress, Meter, Skeleton, EmptyState, Toast |
-| **ナビゲーション** | Tabs, Sidebar, TopBar, Breadcrumb, Pagination, Stepper |
-| **オーバーレイ** | Dialog, Tooltip, Dropdown, CommandPalette |
+| **ナビゲーション** | Tabs, Sidebar, TopBar, Breadcrumb, Pagination, Stepper, Disclosure |
+| **オーバーレイ** | Dialog, Tooltip, HelpButton, Dropdown, CommandPalette |
 | **レイアウト** | AppLayout, Divider, Grid, Search, Logo, Icon, Heading, Text |
 | **リスト** | List, DescriptionList, Timeline |
 | **マーケティング** | Navbar, Hero, Section, SplitSection, FeatureGrid, Stats, Pricing, Testimonial, FAQ, CTABanner, LPFooter |
 
+詳細は [kaze-design-system.vercel.app/docs/components](https://kaze-design-system.vercel.app/docs/components) を参照してください。
+
+## Hooks
+
+```tsx
+import { ThemeProvider, useTheme, useFocusTrap } from "kaze-design-system";
+import { useLegendToggle } from "kaze-design-system/hooks";
+```
+
+- `useTheme` — ライト/ダークの切り替え
+- `useFocusTrap` — モーダル向けフォーカストラップ
+- `useLegendToggle` — Recharts の凡例クリックで系列 show/hide を切り替え
+
 ## デザイントークン
 
-CSS カスタムプロパティベース：
+CSS カスタムプロパティベース:
 
 - カラー: `--color-*`（warm zinc パレット）
 - スペーシング: `--space-*`
@@ -130,10 +165,15 @@ CSS カスタムプロパティベース：
 npm run dev           # Next.js 開発サーバー（サンプル集 & ドキュメント）
 npm run build         # Next.js 本番ビルド
 npm run build:lib     # ライブラリビルド（dist/ に出力）
+npm run docs:llms     # llms.txt / llms-full.txt を再生成
 npm run storybook     # Storybook 起動
 npm run typecheck     # TypeScript 型チェック
 ```
 
+### リリース
+
+main への push 時に GitHub Actions が自動で `npm version patch` → build → `npm publish` を実行します。ライブラリ本体（`src/components/**`, `src/hooks/**`, CSS ファイル等）への変更がある場合のみトリガーされます。
+
 ## コントリビュート
 
 バグ報告・機能リクエストは [Issues](https://github.com/yuki930/kaze-design-system/issues) へお願いします。

package/components.css

@@ -4068,3 +4068,129 @@
 .help-popover__body p:last-child {
   margin-bottom: 0;
 }
+
+/* ================================================================
+   Disclosure
+   ================================================================ */
+
+.disclosure {
+  display: block;
+  width: 100%;
+}
+
+.disclosure--bordered {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface, var(--color-bg));
+}
+
+.disclosure__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg);
+  transition: background-color var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out);
+}
+
+.disclosure--sm .disclosure__trigger {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--font-size-sm);
+}
+
+.disclosure--lg .disclosure__trigger {
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--font-size-lg);
+}
+
+.disclosure--bordered .disclosure__trigger {
+  border-radius: 0;
+}
+
+.disclosure__trigger:hover:not(:disabled) {
+  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.04));
+}
+
+.disclosure__trigger:focus-visible {
+  outline: 2px solid var(--color-focus, var(--color-primary));
+  outline-offset: -2px;
+}
+
+.disclosure__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.disclosure--ghost .disclosure__trigger {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.disclosure--ghost .disclosure__trigger:hover:not(:disabled) {
+  background: transparent;
+  color: var(--color-fg-secondary);
+}
+
+.disclosure__title {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.disclosure__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  color: var(--color-fg-tertiary);
+}
+
+.disclosure__icon--end {
+  margin-left: auto;
+}
+
+.disclosure__icon--rotate .disclosure__icon-svg {
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+
+.disclosure--open .disclosure__icon--rotate .disclosure__icon-svg {
+  transform: rotate(90deg);
+}
+
+.disclosure__content {
+  padding: 0 var(--space-3) var(--space-3) var(--space-3);
+  color: var(--color-fg-secondary);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+}
+
+.disclosure--sm .disclosure__content {
+  padding: 0 var(--space-2) var(--space-2) var(--space-2);
+}
+
+.disclosure--lg .disclosure__content {
+  padding: 0 var(--space-4) var(--space-4) var(--space-4);
+}
+
+.disclosure--ghost .disclosure__content {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.disclosure--bordered .disclosure__content {
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--space-3);
+}
+
+.disclosure__content-inner {
+  color: inherit;
+}

package/dist/components/Disclosure/Disclosure.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useId, useMemo } from "react";
+import { ChevronRight, Plus } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+function renderIcon(icon) {
+  if (icon === "chevron" || icon == null) {
+    return /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "disclosure__icon-svg" });
+  }
+  if (icon === "plus") {
+    return /* @__PURE__ */ jsx(Plus, { size: 16, className: "disclosure__icon-svg" });
+  }
+  return icon;
+}
+const Disclosure = forwardRef(
+  ({
+    title,
+    children,
+    defaultOpen = false,
+    open: controlledOpen,
+    onOpenChange,
+    icon = "chevron",
+    iconPosition = "left",
+    size = "md",
+    variant = "default",
+    className,
+    triggerClassName,
+    contentClassName,
+    disabled = false
+  }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = controlledOpen !== void 0;
+    const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+    const setOpen = useCallback(
+      (next) => {
+        if (!isControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange]
+    );
+    const toggle = useCallback(() => {
+      if (disabled) return;
+      setOpen(!isOpen);
+    }, [disabled, isOpen, setOpen]);
+    const onKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Escape" && isOpen) {
+          e.preventDefault();
+          setOpen(false);
+        }
+      },
+      [isOpen, setOpen]
+    );
+    const contentId = useId();
+    const isBuiltInIcon = icon === "chevron" || icon === "plus";
+    const markerNode = useMemo(() => renderIcon(icon), [icon]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "disclosure",
+          `disclosure--${size}`,
+          `disclosure--${variant}`,
+          isOpen && "disclosure--open",
+          disabled && "disclosure--disabled",
+          className
+        ),
+        "data-state": isOpen ? "open" : "closed",
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "disclosure__trigger",
+                `disclosure__trigger--icon-${iconPosition}`,
+                triggerClassName
+              ),
+              "aria-expanded": isOpen,
+              "aria-controls": contentId,
+              disabled,
+              onClick: toggle,
+              onKeyDown,
+              children: [
+                iconPosition === "left" && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "disclosure__icon",
+                      isBuiltInIcon && "disclosure__icon--rotate"
+                    ),
+                    "aria-hidden": "true",
+                    children: markerNode
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "disclosure__title", children: title }),
+                iconPosition === "right" && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "disclosure__icon",
+                      "disclosure__icon--end",
+                      isBuiltInIcon && "disclosure__icon--rotate"
+                    ),
+                    "aria-hidden": "true",
+                    children: markerNode
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: contentId,
+              role: "region",
+              className: cn("disclosure__content", contentClassName),
+              hidden: !isOpen,
+              children: /* @__PURE__ */ jsx("div", { className: "disclosure__content-inner", children })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Disclosure.displayName = "Disclosure";
+export {
+  Disclosure
+};

package/dist/hooks/useLegendToggle.js

@@ -23,16 +23,18 @@ function useLegendToggle() {
         cursor: "pointer"
       },
       onClick: (e) => {
-        if (e?.dataKey != null) toggle(String(e.dataKey));
+        const dataKey = e?.dataKey;
+        if (dataKey != null) toggle(String(dataKey));
       },
       formatter: (value, entry) => {
-        const key = entry?.dataKey != null ? String(entry.dataKey) : "";
+        const e = entry;
+        const key = e?.dataKey != null ? String(e.dataKey) : "";
         const hidden = hiddenSeries.has(key);
         return /* @__PURE__ */ jsx(
           "span",
           {
             style: {
-              color: hidden ? "var(--color-fg-tertiary, #a1a1aa)" : entry?.color,
+              color: hidden ? "var(--color-fg-tertiary, #a1a1aa)" : e?.color,
               transition: "color 0.15s ease"
             },
             children: value

package/dist/index.js

@@ -14,6 +14,7 @@ import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { CommandPalette } from "./components/CommandPalette/CommandPalette.js";
 import { DescriptionItem, DescriptionList } from "./components/DescriptionList/DescriptionList.js";
 import { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTitle } from "./components/Dialog/Dialog.js";
+import { Disclosure } from "./components/Disclosure/Disclosure.js";
 import { Divider } from "./components/Divider/Divider.js";
 import { DonutChart } from "./components/DonutChart/DonutChart.js";
 import { Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger } from "./components/Dropdown/Dropdown.js";
@@ -87,6 +88,7 @@ export {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  Disclosure,
   Divider,
   DonutChart,
   Dropdown,

package/dist/types/components/Disclosure/Disclosure.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from "react";
+export type DisclosureIcon = "chevron" | "plus" | ReactNode;
+export type DisclosureIconPosition = "left" | "right";
+export type DisclosureSize = "sm" | "md" | "lg";
+export type DisclosureVariant = "default" | "ghost" | "bordered";
+export interface DisclosureProps {
+    /** Always-visible label on the trigger row */
+    title: ReactNode;
+    /** Content shown when the disclosure is expanded */
+    children: ReactNode;
+    /** Initial expanded state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Controlled expanded state */
+    open?: boolean;
+    /** Called when the expanded state changes */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Marker icon. Use `"chevron"` (default) or `"plus"` for the built-in
+     * icons, or pass any ReactNode for a custom marker. Custom markers are
+     * not auto-rotated.
+     */
+    icon?: DisclosureIcon;
+    /** Which side the marker appears on */
+    iconPosition?: DisclosureIconPosition;
+    /** Trigger row density */
+    size?: DisclosureSize;
+    /** Visual treatment */
+    variant?: DisclosureVariant;
+    /** Additional class on the root wrapper */
+    className?: string;
+    /** Additional class on the trigger button */
+    triggerClassName?: string;
+    /** Additional class on the content region */
+    contentClassName?: string;
+    /** Disables the trigger */
+    disabled?: boolean;
+}
+export declare const Disclosure: import("react").ForwardRefExoticComponent<DisclosureProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Disclosure/index.d.ts

@@ -0,0 +1,2 @@
+export { Disclosure } from "./Disclosure";
+export type { DisclosureProps, DisclosureIcon, DisclosureIconPosition, DisclosureSize, DisclosureVariant, } from "./Disclosure";

package/dist/types/components/index.d.ts

@@ -10,6 +10,8 @@ export { StatusBadge } from "./StatusBadge";
 export type { StatusBadgeProps, StatusBadgeStatus } from "./StatusBadge";
 export { HelpButton } from "./HelpButton";
 export type { HelpButtonProps, HelpButtonPosition, HelpButtonSize, } from "./HelpButton";
+export { Disclosure } from "./Disclosure";
+export type { DisclosureProps, DisclosureIcon, DisclosureIconPosition, DisclosureSize, DisclosureVariant, } from "./Disclosure";
 export { FilterPill } from "./FilterPill";
 export type { FilterPillProps } from "./FilterPill";
 export { Input } from "./Input";

package/dist/types/hooks/useLegendToggle.d.ts

@@ -1,10 +1,15 @@
 import { type CSSProperties } from "react";
-interface RechartsLegendClickEvent {
-    dataKey?: string | number;
-    value?: string;
-    color?: string;
-    [key: string]: unknown;
-}
+/**
+ * Public shape of `legendProps`. The `onClick` and `formatter` signatures
+ * intentionally use `unknown` (rather than a hand-rolled Recharts shim)
+ * so the object is structurally assignable to Recharts' own
+ * `<Legend>` props without needing a peer-dep on `recharts`.
+ *
+ * See kaze-design-system#27 — earlier versions used a narrow custom
+ * `RechartsLegendClickEvent` type which failed to unify with Recharts'
+ * `LegendProps['onClick']`, forcing downstream users to wrap with
+ * `as any`.
+ */
 export interface UseLegendToggleResult {
     /** Whether a given dataKey is currently hidden */
     isHidden: (dataKey: string) => boolean;
@@ -15,11 +20,8 @@ export interface UseLegendToggleResult {
     /** Props to spread onto a Recharts `<Legend />` */
     legendProps: {
         wrapperStyle: CSSProperties;
-        onClick: (e: RechartsLegendClickEvent) => void;
-        formatter: (value: string, entry: {
-            dataKey?: string | number;
-            color?: string;
-        }) => React.ReactNode;
+        onClick: (e: unknown) => void;
+        formatter: (value: string, entry: unknown) => React.ReactNode;
     };
 }
 /**
@@ -35,4 +37,3 @@ export interface UseLegendToggleResult {
  * );
  */
 export declare function useLegendToggle(): UseLegendToggleResult;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaze-design-system",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -12,7 +12,7 @@
   "bugs": {
     "url": "https://github.com/yuki930/kaze-design-system/issues"
   },
-  "description": "Zinc-based minimal design system optimized for Japanese typography and financial UI",
+  "description": "Minimal React design system for dashboards and Japanese UI — quiet neutral grays, 63 components, light/dark themes, typography tuned for CJK text",
   "keywords": [
     "design-system",
     "react",