kaze-design-system 0.3.3 → 0.4.0

package/README.md

@@ -1,55 +1,40 @@
-# @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 ベースのミニマルデザインシステム。日本語組版に最適化。
+Zinc ベースのミニマルデザインシステム。日本語組版に最適化。React 19 + TypeScript、62 コンポーネント、ライト/ダーク両対応。
 
-**GitHub**: https://github.com/yuki930/kaze-design-system
+- **Docs**: https://kaze-design-system.vercel.app/docs/components
+- **npm**: https://www.npmjs.com/package/kaze-design-system
+- **GitHub**: https://github.com/yuki930/kaze-design-system
 
 > **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 +43,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 +55,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 +79,34 @@ function App() {
 }
 ```
 
-## コンポーネント一覧（59 コンポーネント）
+## コンポーネント一覧（62 コンポーネント）
 
 | カテゴリ | コンポーネント |
 |---|---|
-| **フォーム** | 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 |
+| **オーバーレイ** | 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 |
 
+## 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 +125,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.0",
   "private": false,
   "type": "module",
   "license": "MIT",