@lism-css/ui 0.9.2 → 0.10.0

package/README.ja.md

@@ -0,0 +1,137 @@
+# @lism-css/ui
+
+[English](./README.md) | [日本語](./README.ja.md)
+
+[![npm version](https://img.shields.io/npm/v/@lism-css/ui.svg)](https://www.npmjs.com/package/@lism-css/ui)
+[![License: MIT](https://img.shields.io/npm/l/@lism-css/ui.svg)](https://github.com/lism-css/lism-css/blob/main/LICENSE)
+
+## @lism-css/ui とは？
+
+`@lism-css/ui` は、[lism-css](https://www.npmjs.com/package/lism-css) の上に構築されたインタラクティブな UI コンポーネントライブラリです。アコーディオン、モーダル、タブなど、よく使う UI パターンの React / Astro コンポーネントを提供します。
+
+すべてのコンポーネントは Lism CSS のレイアウトシステムとデザイントークンを前提としています。
+
+## 利用可能なコンポーネント
+
+| コンポーネント | 説明 |
+|---------------|------|
+| **Accordion** | ネイティブ `<details>` 要素を使った展開可能なコンテンツセクション |
+| **Alert** | アイコンとカラーバリエーション付きのコンテキストフィードバックメッセージ |
+| **Avatar** | ユーザープロフィール用の円形画像表示 |
+| **Badge** | 小さなステータスラベルやカウンター |
+| **Button** | バリエーションとサイズ付きのスタイル付きボタン |
+| **Callout** | ヒント、警告、注意書き用のハイライトコンテンツブロック |
+| **Chat** | 会話形式のレイアウト用チャットバブル UI |
+| **Details** | スタイル付きネイティブ `<details>` / `<summary>` 要素 |
+| **Modal** | バックドロップ付きダイアログオーバーレイ |
+| **NavMenu** | ネストアイテム対応のナビゲーションメニュー |
+| **ShapeDivider** | SVG シェイプによる装飾的なセクションディバイダー |
+| **Tabs** | タブ付きコンテンツパネル |
+| **DummyText** | プロトタイピング用のプレースホルダーテキスト |
+| **DummyImage** | プロトタイピング用のプレースホルダー画像 |
+
+## インストール
+
+```bash
+npm i @lism-css/ui lism-css
+```
+
+または
+
+```bash
+pnpm add @lism-css/ui lism-css
+```
+
+> `lism-css` は必須のピア依存関係です。
+
+## セットアップ
+
+グローバルスタイルとして CSS をインポートします:
+
+```js
+import 'lism-css/main.css';
+import '@lism-css/ui/style.css';
+```
+
+**Astro** の場合は、`astro.config.js` に以下も追加します:
+
+```js
+export default defineConfig({
+  vite: {
+    ssr: {
+      noExternal: ['lism-css', '@lism-css/ui'],
+    },
+  },
+});
+```
+
+## 使い方
+
+### React
+
+```jsx
+import { Accordion, Modal, Tabs, Button } from '@lism-css/ui/react';
+import { Stack, Text } from 'lism-css/react';
+
+<Stack g="20">
+  <Accordion>
+    <Accordion.Header>FAQ の質問</Accordion.Header>
+    <Accordion.Body>
+      <Text>回答の内容がここに入ります。</Text>
+    </Accordion.Body>
+  </Accordion>
+
+  <Button href="/about" variant="outline">
+    詳しく見る
+  </Button>
+</Stack>
+```
+
+### Astro
+
+```astro
+---
+import { Accordion, Modal, Tabs, Button } from '@lism-css/ui/astro';
+import { Stack, Text } from 'lism-css/astro';
+---
+
+<Stack g="20">
+  <Accordion>
+    <Accordion.Header>FAQ の質問</Accordion.Header>
+    <Accordion.Body>
+      <Text>回答の内容がここに入ります。</Text>
+    </Accordion.Body>
+  </Accordion>
+
+  <Button href="/about" variant="outline">
+    詳しく見る
+  </Button>
+</Stack>
+```
+
+## lism-css との関係
+
+Lism CSS は2つのパッケージで構成されています:
+
+- **[lism-css](https://www.npmjs.com/package/lism-css)** — レイアウトコンポーネント（Box、Flex、Stack、Grid など）、デザイントークン、プロップクラス、レスポンシブシステムを提供するコア CSS フレームワーク。
+- **@lism-css/ui**（このパッケージ）— コアのレイアウトシステムを拡張し、すぐに使えるインターフェースパターン（Accordion、Modal、Tabs など）を提供するインタラクティブ UI コンポーネント。
+
+`@lism-css/ui` を使用するには `lism-css` のインストールが必要です。
+
+## AI ツール連携
+
+AI コーディングツールが Lism CSS のドキュメントを参照するための MCP サーバーが利用可能です:
+
+```bash
+claude mcp add lism-css -- npx -y @lism-css/mcp
+```
+
+その他のセットアップ方法については、[lism-css README](https://www.npmjs.com/package/lism-css#ai-tool-integration) を参照してください。
+
+## ドキュメント
+
+詳細なドキュメントは [lism-css.com](https://lism-css.com) をご覧ください。
+
+## ライセンス
+
+MIT

package/README.md

@@ -1,9 +1,34 @@
 # @lism-css/ui
 
-Interactive UI components built on top of [lism-css](https://www.npmjs.com/package/lism-css).
-Provides both **React** and **Astro** components.
+[English](./README.md) | [日本語](./README.ja.md)
 
-For details, see [Documentation](https://lism-css.com/).
+[![npm version](https://img.shields.io/npm/v/@lism-css/ui.svg)](https://www.npmjs.com/package/@lism-css/ui)
+[![License: MIT](https://img.shields.io/npm/l/@lism-css/ui.svg)](https://github.com/lism-css/lism-css/blob/main/LICENSE)
+
+## What is @lism-css/ui?
+
+`@lism-css/ui` is an interactive UI component library built on top of [lism-css](https://www.npmjs.com/package/lism-css). It provides React and Astro components for frequently used UI patterns such as accordions, modals, and tabs.
+
+All components are based on the layout system and design tokens of Lism CSS.
+
+## Available Components
+
+| Component | Description |
+|-----------|-------------|
+| **Accordion** | Expandable content sections using native `<details>` element |
+| **Alert** | Contextual feedback messages with icon and color variants |
+| **Avatar** | Circular image display for user profiles |
+| **Badge** | Small status labels and counters |
+| **Button** | Styled button with variants and sizes |
+| **Callout** | Highlighted content blocks for tips, warnings, and notes |
+| **Chat** | Chat bubble UI for conversational layouts |
+| **Details** | Styled native `<details>` / `<summary>` element |
+| **Modal** | Dialog overlay with backdrop |
+| **NavMenu** | Navigation menu with nested item support |
+| **ShapeDivider** | Decorative section dividers with SVG shapes |
+| **Tabs** | Tabbed content panels |
+| **DummyText** | Placeholder text for prototyping |
+| **DummyImage** | Placeholder image for prototyping |
 
 ## Installation
 
@@ -28,22 +53,85 @@ import 'lism-css/main.css';
 import '@lism-css/ui/style.css';
 ```
 
+For **Astro**, also add the following to `astro.config.js`:
+
+```js
+export default defineConfig({
+  vite: {
+    ssr: {
+      noExternal: ['lism-css', '@lism-css/ui'],
+    },
+  },
+});
+```
+
 ## Usage
 
 ### React
 
 ```jsx
-import { Accordion, Modal } from '@lism-css/ui/react';
+import { Accordion, Modal, Tabs, Button } from '@lism-css/ui/react';
+import { Stack, Text } from 'lism-css/react';
+
+<Stack g="20">
+  <Accordion>
+    <Accordion.Header>FAQ Question</Accordion.Header>
+    <Accordion.Body>
+      <Text>Answer content goes here.</Text>
+    </Accordion.Body>
+  </Accordion>
+
+  <Button href="/about" variant="outline">
+    Learn More
+  </Button>
+</Stack>
 ```
 
 ### Astro
 
 ```astro
 ---
-import { Accordion, Modal } from '@lism-css/ui/astro';
+import { Accordion, Modal, Tabs, Button } from '@lism-css/ui/astro';
+import { Stack, Text } from 'lism-css/astro';
 ---
+
+<Stack g="20">
+  <Accordion>
+    <Accordion.Header>FAQ Question</Accordion.Header>
+    <Accordion.Body>
+      <Text>Answer content goes here.</Text>
+    </Accordion.Body>
+  </Accordion>
+
+  <Button href="/about" variant="outline">
+    Learn More
+  </Button>
+</Stack>
+```
+
+## Relationship to lism-css
+
+Lism CSS is organized into two packages:
+
+- **[lism-css](https://www.npmjs.com/package/lism-css)** — Core CSS framework providing layout components (Box, Flex, Stack, Grid, etc.), design tokens, prop classes, and the responsive system.
+- **@lism-css/ui** (this package) — Interactive UI components (Accordion, Modal, Tabs, etc.) that extend the core layout system with ready-to-use interface patterns.
+
+You need `lism-css` installed to use `@lism-css/ui`.
+
+## AI Tool Integration
+
+An MCP server is available for AI coding tools to reference Lism CSS documentation:
+
+```bash
+claude mcp add lism-css -- npx -y @lism-css/mcp
 ```
 
+For more setup options, see the [lism-css README](https://www.npmjs.com/package/lism-css#ai-tool-integration).
+
+## Documentation
+
+For full documentation, visit [lism-css.com](https://lism-css.com).
+
 ## License
 
 MIT

package/dist/components/Accordion/getProps.js

@@ -0,0 +1,53 @@
+import e from "../../lism-css/dist/lib/helper/atts.js";
+function r({ lismClass: o, allowMultiple: t, ...n }) {
+  return n.lismClass = e(o, "c--accordion"), t && (n["data-allow-multiple"] = ""), n;
+}
+function d({ lismClass: o, ...t }) {
+  return t.lismClass = e(o, "c--accordion_item"), t;
+}
+function u(o) {
+  const n = { ...{
+    lismClass: "c--accordion_heading",
+    as: "div",
+    setPlain: 1
+  }, ...o };
+  return n.as === "div" && (n.role = "heading"), n;
+}
+function f({ lismClass: o, _contextID: t, accID: n = "__LISM_ACC_ID__", isOpen: i = !1, ...s }) {
+  const a = {
+    lismClass: e(o, "c--accordion_panel"),
+    id: t || n,
+    hidden: i ? void 0 : "until-found",
+    pos: "relative",
+    ov: "hidden"
+  }, c = { lismClass: "c--accordion_content", layout: "flow", ...s };
+  return { panelProps: a, contentProps: c };
+}
+const P = {
+  // header: { lismClass: 'c--accordion_header' },
+  button: {
+    lismClass: "c--accordion_button",
+    as: "button",
+    layout: "flex",
+    setPlain: 1,
+    g: "10",
+    w: "100%",
+    ai: "center",
+    jc: "between"
+  },
+  icon: {
+    lismClass: "c--accordion_icon a--icon",
+    as: "span",
+    // d: 'grid',
+    pi: "center",
+    fxsh: "0",
+    "aria-hidden": "true"
+  }
+};
+export {
+  P as defaultProps,
+  u as getHeadingProps,
+  d as getItemProps,
+  f as getPanelProps,
+  r as getRootProps
+};

package/dist/components/Accordion/react/AccIcon.js

@@ -0,0 +1,9 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "../../../lism-css/dist/components/Lism/index.js";
+import { defaultProps as f } from "../getProps.js";
+function n(o) {
+  return /* @__PURE__ */ r(t, { ...f.icon, ...o });
+}
+export {
+  n as default
+};

package/dist/components/Accordion/react/Accordion.d.ts

@@ -1,18 +1,17 @@
-import { default as React } from 'react';
 /**
  * 複数の AccordionItem をラップするルート要素
  */
 export function AccordionRoot({ children, ...props }: {
     [x: string]: any;
     children: any;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
  */
 export function AccordionItem({ children, ...props }: {
     [x: string]: any;
     children: any;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * 見出しエリアのラッパー（デフォルトは <div role="heading">）
  * as に h2〜h6 を指定すると role は付与されない
@@ -20,7 +19,7 @@ export function AccordionItem({ children, ...props }: {
 export function Heading({ children, ...props }: {
     [x: string]: any;
     children: any;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * 開閉トリガーボタン
  * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
@@ -29,11 +28,11 @@ export function Button({ children, accID: _accID, ...props }: {
     [x: string]: any;
     children: any;
     accID?: string | undefined;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 /**
  * パネル
  */
 export function Panel({ children, ...props }: {
     [x: string]: any;
     children: any;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/Accordion/react/Accordion.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { useContext as u, useRef as p, useId as m, useEffect as a, createContext as l } from "react";
+import d from "../../../lism-css/dist/lib/getLismProps.js";
+import s from "../../../lism-css/dist/components/Lism/index.js";
+import I from "../../../lism-css/dist/components/Stack/index.js";
+import { defaultProps as P, getPanelProps as x, getHeadingProps as D, getItemProps as _, getRootProps as g } from "../getProps.js";
+import { setEvent as A } from "../setAccordion.js";
+import C from "./AccIcon.js";
+/* empty css            */
+const i = l(null);
+function L({ children: t, ...o }) {
+  const r = g(o);
+  return /* @__PURE__ */ n(I, { ...r, children: t });
+}
+function M({ children: t, ...o }) {
+  const r = p(null), e = m();
+  a(() => {
+    if (r.current)
+      return A(r.current);
+  }, []);
+  const c = d(_(o));
+  return /* @__PURE__ */ n(i.Provider, { value: { accID: e }, children: /* @__PURE__ */ n("div", { ref: r, ...c, children: t }) });
+}
+function S({ children: t, ...o }) {
+  return /* @__PURE__ */ n(s, { ...D(o), children: t });
+}
+function $({ children: t, accID: o = "__LISM_ACC_ID__", ...r }) {
+  const c = u(i)?.accID || o;
+  return /* @__PURE__ */ f(s, { ...P.button, ...r, "aria-controls": c, "aria-expanded": "false", children: [
+    t,
+    /* @__PURE__ */ n(C, {})
+  ] });
+}
+function k({ children: t, ...o }) {
+  const r = u(i), { panelProps: e, contentProps: c } = x({ _contextID: r?.accID, ...o });
+  return /* @__PURE__ */ n(s, { ...e, children: /* @__PURE__ */ n(s, { ...c, children: t }) });
+}
+export {
+  M as AccordionItem,
+  L as AccordionRoot,
+  $ as Button,
+  S as Heading,
+  k as Panel
+};

package/dist/components/Accordion/react/index.js

@@ -0,0 +1,6 @@
+import { Button as t, Panel as c, Heading as o, AccordionItem as n, AccordionRoot as e } from "./Accordion.js";
+import r from "./AccIcon.js";
+const d = o, a = { Root: e, Item: n, Header: d, Heading: o, Panel: c, Icon: r, Button: t };
+export {
+  a as default
+};

package/dist/components/Alert/getProps.js

@@ -0,0 +1,20 @@
+import i from "./presets.js";
+function f({ type: o = "alert", keycolor: t, layout: c = "flex", icon: e, flow: l = "s", ...n }) {
+  const r = o ? i[o] : null, s = e || r?.icon || "info", a = t || r?.color || "currentColor";
+  return {
+    icon: s,
+    layout: c,
+    flow: l,
+    lismClass: "c--alert u--cbox",
+    keycolor: a,
+    ai: "center",
+    p: "15",
+    g: "15",
+    bd: !0,
+    bdrs: "10",
+    ...n
+  };
+}
+export {
+  f as default
+};

package/dist/components/Alert/presets.js

@@ -0,0 +1,29 @@
+const o = {
+  alert: {
+    icon: "alert",
+    color: "red"
+  },
+  point: {
+    icon: "lightbulb",
+    color: "orange"
+  },
+  warning: {
+    icon: "warning",
+    color: "yellow"
+  },
+  check: {
+    icon: "check-circle",
+    color: "green"
+  },
+  help: {
+    icon: "question",
+    color: "purple"
+  },
+  info: {
+    icon: "info",
+    color: "blue"
+  }
+};
+export {
+  o as default
+};

package/dist/components/Alert/react/Alert.js

@@ -0,0 +1,16 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import s from "../../../lism-css/dist/components/Center/index.js";
+import n from "../../../lism-css/dist/components/Flow/index.js";
+import p from "../../../lism-css/dist/components/atomic/Icon/index.js";
+import c from "../../../lism-css/dist/components/Lism/index.js";
+import x from "../getProps.js";
+function A({ children: t, ...i }) {
+  const { icon: e, layout: o, flow: f, ...m } = x(i);
+  return /* @__PURE__ */ l(c, { layout: o, ...m, children: [
+    /* @__PURE__ */ r(s, { isSide: o === "sideMain", c: "keycolor", fz: "xl", fxsh: "0", children: /* @__PURE__ */ r(p, { icon: e }) }),
+    /* @__PURE__ */ r(n, { flow: f, children: t })
+  ] });
+}
+export {
+  A as default
+};

package/dist/components/Avatar/react/Avatar.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import m from "../../../lism-css/dist/components/Frame/index.js";
+function d({ size: a = "1.5em", src: t = "", alt: i = "", ...e }) {
+  return /* @__PURE__ */ r(m, { lismClass: "c--avatar", ar: "1/1", w: a, bdrs: "99", ...e, children: /* @__PURE__ */ r("img", { src: t, alt: i, width: "100%", height: "100%", decoding: "async" }) });
+}
+export {
+  d as default
+};

package/dist/components/Badge/react/Badge.js

@@ -0,0 +1,12 @@
+import { jsx as s } from "react/jsx-runtime";
+import o from "../../../lism-css/dist/components/Lism/index.js";
+/* empty css            */
+function n(r) {
+  return /* @__PURE__ */ s(o, { lismClass: "c--badge", as: "span", d: "inline-flex", fz: "xs", lh: "xs", py: "5", px: "10", bdrs: "10", _propConfig: {
+    c: { isVar: 1 },
+    bgc: { isVar: 1 }
+  }, ...r });
+}
+export {
+  n as default
+};

package/dist/components/Button/react/Button.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "../../../lism-css/dist/components/Flex/index.js";
+/* empty css            */
+function a(o) {
+  return /* @__PURE__ */ r(t, { lismClass: "c--button", as: "a", lh: "s", py: "10", px: "20", hov: "o", _propConfig: {
+    c: { isVar: 1 },
+    bgc: { isVar: 1 }
+  }, ...o });
+}
+export {
+  a as default
+};

package/dist/components/Callout/getProps.js

@@ -0,0 +1,22 @@
+import a from "./presets.js";
+function i({ type: o = "note", keycolor: l, icon: t, title: n, flow: s = "s", ...r }) {
+  const c = o ? a[o] : null, e = t || c?.icon || "note", u = l || c?.color || null;
+  return {
+    icon: e,
+    title: n,
+    flow: s,
+    lismClass: "c--callout u--cbox",
+    keycolor: u,
+    p: "20",
+    g: "10",
+    bdc: "keycolor",
+    "bd-x-s": "-",
+    bdw: "4px",
+    bxsh: "10",
+    bdrs: "5",
+    ...r
+  };
+}
+export {
+  i as default
+};

package/dist/components/Callout/presets.js

@@ -0,0 +1,29 @@
+const o = {
+  alert: {
+    icon: "alert",
+    color: "red"
+  },
+  point: {
+    icon: "lightbulb",
+    color: "orange"
+  },
+  warning: {
+    icon: "warning",
+    color: "yellow"
+  },
+  check: {
+    icon: "check-circle",
+    color: "green"
+  },
+  help: {
+    icon: "question",
+    color: "purple"
+  },
+  note: {
+    icon: "note",
+    color: "blue"
+  }
+};
+export {
+  o as default
+};

package/dist/components/Callout/react/Callout.js

@@ -0,0 +1,20 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import i from "../../../lism-css/dist/components/Center/index.js";
+import s from "../../../lism-css/dist/components/Flex/index.js";
+import f from "../../../lism-css/dist/components/Flow/index.js";
+import n from "../../../lism-css/dist/components/atomic/Icon/index.js";
+import p from "../../../lism-css/dist/components/Stack/index.js";
+import u from "../getProps.js";
+function j({ children: t, ...c }) {
+  const { icon: a, title: l, flow: m, ...e } = u(c);
+  return /* @__PURE__ */ r(p, { ...e, children: [
+    l && /* @__PURE__ */ r(s, { className: "c--callout_head", c: "keycolor", fw: "bold", ai: "center", g: "10", children: [
+      /* @__PURE__ */ o(i, { className: "c--callout_icon", fz: "xl", children: /* @__PURE__ */ o(n, { icon: a }) }),
+      /* @__PURE__ */ o("span", { className: "c--callout_title", children: l })
+    ] }),
+    /* @__PURE__ */ o(f, { className: "c--callout_body", flow: m, children: t })
+  ] });
+}
+export {
+  j as default
+};

package/dist/components/Chat/getProps.js

@@ -0,0 +1,47 @@
+const l = {
+  avatar: {
+    lismClass: "c--chat_avatar",
+    bgc: "base",
+    ar: "1/1",
+    bdrs: "99",
+    "aria-hidden": "true"
+  },
+  name: {
+    lismClass: "c--chat_name",
+    c: "text-2",
+    fs: "italic",
+    fz: "2xs",
+    lh: "1",
+    py: "5",
+    px: "10",
+    aslf: "end"
+  },
+  body: {
+    lismClass: "c--chat_body",
+    pos: "rel"
+  },
+  deco: {
+    lismClass: "c--chat_deco",
+    pos: "abs"
+  },
+  content: {
+    lismClass: "c--chat_content",
+    bdrs: "30",
+    p: "20",
+    lh: "s"
+  }
+};
+function e({ variant: s = "speak", direction: a = "start", keycolor: t = "gray", ...c }) {
+  return {
+    lismClass: "c--chat",
+    variant: s,
+    keycolor: t,
+    "data-chat-dir": a,
+    ji: a,
+    ...c
+  };
+}
+export {
+  e as default,
+  l as defaultProps
+};

package/dist/components/Chat/react/Chat.js

@@ -0,0 +1,22 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import f from "../../../lism-css/dist/components/atomic/Decorator/index.js";
+import n from "../../../lism-css/dist/components/Flow/index.js";
+import h from "../../../lism-css/dist/components/Frame/index.js";
+import l from "../../../lism-css/dist/components/Grid/index.js";
+import m from "../../../lism-css/dist/components/Lism/index.js";
+import u, { defaultProps as r } from "../getProps.js";
+/* empty css            */
+function N({ name: i, avatar: t, flow: e = "s", children: a, ...d }) {
+  const { "data-chat-dir": c, ...p } = u(d);
+  return /* @__PURE__ */ s(l, { "data-chat-dir": c, ...p, children: [
+    t && /* @__PURE__ */ o(h, { ...r.avatar, src: t, alt: "", children: /* @__PURE__ */ o("img", { src: t, alt: "", width: "60", height: "60", decoding: "async" }) }),
+    i && /* @__PURE__ */ o(m, { ...r.name, children: i }),
+    /* @__PURE__ */ s(m, { ...r.body, children: [
+      /* @__PURE__ */ o(f, { ...r.deco, className: "u--cbox is--skipFlow" }),
+      /* @__PURE__ */ o(n, { ...r.content, className: "u--cbox", flow: e, jslf: c, children: a })
+    ] })
+  ] });
+}
+export {
+  N as default
+};