@lism-css/ui 0.9.3 → 0.11.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/Callout/getProps.d.ts

@@ -18,5 +18,4 @@ export default function getCalloutProps({ type, keycolor, icon, title, flow, ...
     'bd-x-s': string;
     bdw: string;
     bxsh: string;
-    bdrs: string;
 };

package/dist/components/Callout/getProps.js

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

package/dist/components/Chat/getProps.js

@@ -31,12 +31,7 @@ const l = {
     lh: "s"
   }
 };
-function e({
-  variant: s = "speak",
-  direction: a = "start",
-  keycolor: t = "gray",
-  ...c
-}) {
+function e({ variant: s = "speak", direction: a = "start", keycolor: t = "gray", ...c }) {
   return {
     lismClass: "c--chat",
     variant: s,

package/dist/components/DummyImage/astro/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DummyImage.astro';

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

@@ -0,0 +1,2 @@
+import { LismComponentProps } from 'lism-css/react';
+export default function DummyImage(props: LismComponentProps<'img'>): import("react").JSX.Element;

package/dist/components/DummyImage/react/DummyImage.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import i from "../../../lism-css/dist/components/Lism/index.js";
+function o(m) {
+  return /* @__PURE__ */ t(i, { as: "img", src: "https://cdn.lism-css.com/dummy-image.jpg", width: 600, height: 400, alt: "", ...m });
+}
+export {
+  o as default
+};

package/dist/components/DummyImage/react/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DummyImage';

package/dist/components/DummyText/astro/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DummyText.astro';

package/dist/components/DummyText/getContent.d.ts

@@ -0,0 +1,11 @@
+import { default as TEXTS } from './texts';
+type Lang = keyof typeof TEXTS;
+type Length = string;
+interface GetContentOptions {
+    pre?: string;
+    length?: Length;
+    lang?: Lang;
+    offset?: number;
+}
+export default function getContent({ pre, length, lang, offset }: GetContentOptions): string;
+export {};

package/dist/components/DummyText/getContent.js

@@ -0,0 +1,9 @@
+import s from "./texts.js";
+const l = (r) => r.split(/([,.、。])/).filter((e) => e !== "").reduce((e, i, n, o) => (n % 2 === 0 && e.push(i + (o[n + 1] || "")), e), []);
+function c({ pre: r = "", length: e = "m", lang: i = "en", offset: n = 0 }) {
+  let t = s[i]?.[e] || "";
+  return n && (t = l(t).slice(n).join("").trim(), t = t.charAt(0).toUpperCase() + t.slice(1)), r && (t = r + t), t;
+}
+export {
+  c as default
+};

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

@@ -0,0 +1,10 @@
+import { ElementType } from 'react';
+import { LismComponentProps } from 'lism-css/react';
+type DummyTextProps<T extends ElementType = 'p'> = LismComponentProps<T> & {
+    pre?: string;
+    length?: string;
+    lang?: 'ja' | 'en' | 'ar';
+    offset?: number;
+};
+export default function DummyText<T extends ElementType = 'p'>({ pre, length, lang, offset, ...props }: DummyTextProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/DummyText/react/DummyText.js

@@ -0,0 +1,10 @@
+import { jsx as f } from "react/jsx-runtime";
+import u from "../../../lism-css/dist/components/Lism/index.js";
+import i from "../getContent.js";
+function c({ pre: t = "", length: n = "m", lang: o = "en", offset: e = 0, ...r }) {
+  const m = i({ pre: t, lang: o, length: n, offset: e });
+  return /* @__PURE__ */ f(u, { ...r, dangerouslySetInnerHTML: { __html: m } });
+}
+export {
+  c as default
+};

package/dist/components/DummyText/react/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DummyText';

package/dist/components/DummyText/texts.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    ja: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        codes: string;
+    };
+    en: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        codes: string;
+    };
+    ar: {
+        s: string;
+    };
+};
+export default _default;

package/dist/components/DummyText/texts.js

@@ -0,0 +1,39 @@
+const e = {
+  ja: [
+    "ロレム・イプサムの座り雨。",
+    "目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。",
+    "Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。",
+    "作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。",
+    "内容の違いを比べるためのドラーとして、静かにそこにあります。選ばれた事実や、意味を限定しない言葉の並びは、全体の雰囲気を整える役割を果たします。時間の流れの中で、そうした文章は自然に形を変え、使う人の意図に委ねられていきます。"
+  ],
+  en: [
+    "Lorem ipsum dolor sit amet.",
+    "Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.",
+    "Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.",
+    "Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.",
+    "Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam."
+  ]
+}, i = {
+  ja: {
+    xs: e.ja[0],
+    s: e.ja[0] + e.ja[1],
+    m: e.ja[0] + e.ja[1] + e.ja[2],
+    l: e.ja[0] + e.ja[1] + e.ja[2] + e.ja[3],
+    xl: e.ja[0] + e.ja[1] + e.ja[2] + e.ja[3] + e.ja[4],
+    codes: "ロレム・イプサムの<i>座り雨</i>、それは<a href='###'>静かに歩く仮の言葉</a>です。長いあいだ積み重ねられてきた<code>Liberroy</code>と<code>Foog</code>の取り組み」は、私たちに<b>一定の示唆</b>を与えてくれます。"
+  },
+  en: {
+    xs: e.en[0],
+    s: e.en[0] + " " + e.en[1],
+    m: e.en[0] + " " + e.en[1] + " " + e.en[2],
+    l: e.en[0] + " " + e.en[1] + " " + e.en[2] + " " + e.en[3],
+    xl: e.en[0] + " " + e.en[1] + " " + e.en[2] + " " + e.en[3] + " " + e.en[4],
+    codes: "Lorem ipsum dolor <i>sit amet</i>. consectetur <a href='###'>adipisicing elit</a>, sed do eiusmod tempor. Non facere <code>Laudantium</code> ex eos <b>doloribus aut dolore</b> nisi provident."
+  },
+  ar: {
+    s: "هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين.هذا نص وهمي أنا أكتب جمل ليس لها معنى معين."
+  }
+};
+export {
+  i as default
+};

package/dist/components/NavMenu/getProps.js

@@ -1,5 +1,5 @@
 import o from "../../lism-css/dist/lib/getMaybeCssVar.js";
-function a({ hovC: s, hovBgc: n, itemP: t, style: i = {}, ...r }) {
+function l({ hovC: s, hovBgc: n, itemP: t, style: i = {}, ...r }) {
   const e = { ...i };
   return n && (e["--hov-bgc"] = o(n, "color")), s && (e["--hov-c"] = o(s, "color")), t && (e["--_item-p"] = o(t, "space")), {
     lismClass: "c--navMenu",
@@ -36,5 +36,5 @@ export {
   u as getItemProps,
   p as getLinkProps,
   c as getNestProps,
-  a as getRootProps
+  l as getRootProps
 };

package/dist/components/Tabs/react/Tab.js

@@ -2,18 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import l from "../../../lism-css/dist/components/Lism/index.js";
 function i({ tabId: t = "tab", index: a = 0, isActive: r = !1, ...o }) {
   const s = `${t}-${a}`;
-  return /* @__PURE__ */ e(
-    l,
-    {
-      as: "button",
-      lismClass: "c--tabs_tab",
-      setPlain: !0,
-      role: "tab",
-      "aria-controls": s,
-      "aria-selected": r ? "true" : "false",
-      ...o
-    }
-  );
+  return /* @__PURE__ */ e(l, { as: "button", lismClass: "c--tabs_tab", setPlain: !0, role: "tab", "aria-controls": s, "aria-selected": r ? "true" : "false", ...o });
 }
 export {
   i as default

package/dist/components/Tabs/react/Tabs.js

@@ -31,9 +31,7 @@ function H({ tabId: I = "", defaultIndex: u = 1, listProps: T = {}, children: p,
           );
         } else if (o.type === x) {
           const s = o.props;
-          a.push(
-            /* @__PURE__ */ b(x, { ...s, tabId: n, index: t, key: t, isActive: t === i })
-          );
+          a.push(/* @__PURE__ */ b(x, { ...s, tabId: n, index: t, key: t, isActive: t === i }));
         }
       }
     });

package/dist/components/astro.d.ts

@@ -10,3 +10,5 @@ export { default as Modal } from './Modal/astro';
 export { default as NavMenu } from './NavMenu/astro';
 export { default as ShapeDivider } from './ShapeDivider/astro';
 export { default as Tabs } from './Tabs/astro';
+export { default as DummyText } from './DummyText/astro';
+export { default as DummyImage } from './DummyImage/astro';

package/dist/components/react.d.ts

@@ -10,3 +10,5 @@ export { default as Modal } from './Modal/react';
 export { default as NavMenu } from './NavMenu/react';
 export { default as ShapeDivider } from './ShapeDivider/react';
 export { default as Tabs } from './Tabs/react';
+export { default as DummyText } from './DummyText/react';
+export { default as DummyImage } from './DummyImage/react';

package/dist/components/react.js

@@ -1,26 +1,30 @@
-import { default as e } from "./Accordion/react/index.js";
+import { default as t } from "./Accordion/react/index.js";
 import { default as r } from "./Details/react/index.js";
 import { default as l } from "./Modal/react/index.js";
 import { default as u } from "./NavMenu/react/index.js";
-import { default as p } from "./Tabs/react/index.js";
+import { default as s } from "./Tabs/react/index.js";
 import { default as x } from "./Alert/react/Alert.js";
-import { default as n } from "./Avatar/react/Avatar.js";
-import { default as A } from "./Badge/react/Badge.js";
-import { default as h } from "./Button/react/Button.js";
-import { default as C } from "./Callout/react/Callout.js";
-import { default as M } from "./Chat/react/Chat.js";
-import { default as g } from "./ShapeDivider/react/ShapeDivider.js";
+import { default as D } from "./Avatar/react/Avatar.js";
+import { default as v } from "./Badge/react/Badge.js";
+import { default as c } from "./Button/react/Button.js";
+import { default as h } from "./Callout/react/Callout.js";
+import { default as B } from "./Chat/react/Chat.js";
+import { default as M } from "./DummyImage/react/DummyImage.js";
+import { default as b } from "./DummyText/react/DummyText.js";
+import { default as N } from "./ShapeDivider/react/ShapeDivider.js";
 export {
-  e as Accordion,
+  t as Accordion,
   x as Alert,
-  n as Avatar,
-  A as Badge,
-  h as Button,
-  C as Callout,
-  M as Chat,
+  D as Avatar,
+  v as Badge,
+  c as Button,
+  h as Callout,
+  B as Chat,
   r as Details,
+  M as DummyImage,
+  b as DummyText,
   l as Modal,
   u as NavMenu,
-  g as ShapeDivider,
-  p as Tabs
+  N as ShapeDivider,
+  s as Tabs
 };

package/dist/lism-css/dist/components/atomic/Decorator/getProps.js

@@ -1,15 +1,15 @@
-import m from "../../../lib/helper/atts.js";
-import c from "../../getFilterProps.js";
-import p from "../../setMaybeTransformStyles.js";
-function b({ lismClass: a, size: r, clipPath: o, boxSizing: s, style: l, ...e }) {
-  const i = l ?? {}, t = c(p(e));
-  o && (i.clipPath = o), s && (i.boxSizing = s), r && (t.ar = "1/1", t.w = r), t.style = i;
-  const n = {
-    lismClass: m(a, "a--decorator"),
+import c from "../../../lib/helper/atts.js";
+function d({ lismClass: e, size: s, clipPath: a, boxSizing: r, style: l, ...n }) {
+  const i = l ?? {};
+  a && (i.clipPath = a), r && (i.boxSizing = r);
+  const t = { ...n };
+  s && (t.ar = "1/1", t.w = s), t.style = i;
+  const o = {
+    lismClass: c(e, "a--decorator"),
     "aria-hidden": "true"
   };
-  return Object.assign(n, t);
+  return Object.assign(o, t);
 }
 export {
-  b as default
+  d as default
 };