lism-css 0.9.0 → 0.9.2

package/README.md

@@ -1,8 +1,11 @@
-## Installation
+# lism-css
+
+A lightweight, layout-first CSS framework for websites.
+Provides CSS utilities, design tokens, and React / Astro layout components.
 
-For details, see [Docs](https://lism-css.com/)
+For details, see [Documentation](https://lism-css.com/).
 
-### 1. Installation
+## Installation
 
 ```bash
 npm i lism-css
@@ -14,39 +17,58 @@ or
 pnpm add lism-css
 ```
 
-### 2. Loading CSS
+## Setup
 
-Please import CSS as a global style.
+Import CSS as a global style.
 
 ```js
 import 'lism-css/main.css';
 ```
 
-(For example, if it is Next.js, load it with `_app.js` or `layout.js`.)
+For Next.js, load it in `layout.js` (App Router) or `_app.js` (Pages Router).
 
-For HTML sites, you can also load CSS via CDN.
+For HTML sites, you can load CSS via CDN:
 
 ```html
 <link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/main.css" rel="stylesheet" />
 ```
 
-### 3. Using Components
+## Usage
+
+### React
 
 ```jsx
-import { Box, HTML, ... } from 'lism-css/react';
+import { Box, Flex, Stack, HTML } from 'lism-css/react';
 
-// ...
-<Box p='15' bgc="base-2">
-	<HTML.p fz="l">Lorem ipsum text...</HTML.p>
-</Box>
-// ...
+<Stack g="20">
+  <Box p="20" bgc="base-2">
+    <HTML.p fz="l">Lorem ipsum text...</HTML.p>
+  </Box>
+</Stack>
 ```
 
+### Astro
+
+```astro
+---
+import { Box, Flex, Stack, HTML } from 'lism-css/astro';
 ---
 
-## include package
+<Stack g="20">
+  <Box p="20" bgc="base-2">
+    <HTML.p fz="l">Lorem ipsum text...</HTML.p>
+  </Box>
+</Stack>
+```
+
+## UI Components
+
+For interactive UI components (Accordion, Modal, Tabs, etc.), see [@lism-css/ui](https://www.npmjs.com/package/@lism-css/ui).
+
+## Credits
+
+- [Phosphor Icons](https://phosphoricons.com/) — MIT License ([source](https://github.com/phosphor-icons))
+
+## License
 
-© Phosphor Icons
-Website: https://phosphoricons.com/
-Source: https://github.com/phosphor-icons
-License: MIT License, https://opensource.org/licenses/MIT
+MIT

package/dist/components/Dummy/index.js

@@ -1,12 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
-import s from "./getContent.js";
+import g from "./getContent.js";
 import e from "../Lism/index.js";
-function d({ pre: i = "", length: a = "m", lang: o = "en", offset: r = 0, ...t }) {
-  const m = t.as || t.tag || "p";
+function d({ pre: i = "", length: o = "m", lang: r = "en", offset: s = 0, ...t }) {
+  const m = t.as || "p";
   if (m === "img")
     return /* @__PURE__ */ n(e, { as: "img", src: "https://cdn.lism-css.com/dummy-image.jpg", width: 600, height: 400, alt: "", ...t });
-  const g = s({ tag: m, pre: i, lang: o, length: a, offset: r });
-  return /* @__PURE__ */ n(e, { ...t, dangerouslySetInnerHTML: { __html: g } });
+  const a = g({ tag: m, pre: i, lang: r, length: o, offset: s });
+  return /* @__PURE__ */ n(e, { ...t, dangerouslySetInnerHTML: { __html: a } });
 }
 export {
   d as default

package/dist/components/LinkBox/index.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
-import e from "../Lism/index.js";
-function a({ children: t, ...r }) {
+import s from "../Lism/index.js";
+function n({ children: t, ...r }) {
   const o = !!r.href ? "a" : "div";
-  return /* @__PURE__ */ i(e, { isLinkBox: !0, tag: o, ...r, children: t });
+  return /* @__PURE__ */ i(s, { isLinkBox: !0, as: o, ...r, children: t });
 }
 export {
-  a as default
+  n as default
 };

package/dist/components/Lism/Lism.d.ts

@@ -1,12 +1,10 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode, JSX } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import { LismProps } from '../../lib/getLismProps';
 import { LayoutSpecificProps } from '../../lib/types/LayoutProps';
 /** HTML 要素 Props と共通オプションの基底型 */
 type LismBaseProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, keyof LismProps> & {
     /** レンダリングするコンポーネントまたは要素 */
     as?: T;
-    /** レンダリングするHTML要素のタグ名（文字列のみ）*/
-    tag?: keyof JSX.IntrinsicElements;
     /** 子要素 */
     children?: ReactNode;
     /** getLismProps を経由せずに直接渡す追加の props */
@@ -27,5 +25,5 @@ export type LayoutComponentProps<T extends ElementType = 'div', L = object> = Om
 /**
  * Lism Propsを処理できるだけのコンポーネント
  */
-export default function Lism<T extends ElementType = 'div'>({ children, as, tag, exProps, ...props }: LismComponentProps<T>): JSX.Element;
+export default function Lism<T extends ElementType = 'div'>({ children, as, exProps, ...props }: LismComponentProps<T>): import("react").JSX.Element;
 export {};

package/dist/components/Lism/index.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import i from "../../lib/getLismProps.js";
-function u({ children: o, as: t, tag: m, exProps: n, ...r }) {
-  return /* @__PURE__ */ e(t || m || "div", { ...i(r), ...n, children: o });
+import { jsx as r } from "react/jsx-runtime";
+import e from "../../lib/getLismProps.js";
+function f({ children: o, as: t, exProps: m, ...n }) {
+  return /* @__PURE__ */ r(t || "div", { ...e(n), ...m, children: o });
 }
 export {
-  u as default
+  f as default
 };

package/dist/components/atomic/Icon/getProps.d.ts

@@ -12,7 +12,7 @@ type IconOwnProps = {
     exProps?: Record<string, unknown>;
 };
 export type IconProps = LismComponentProps & TransformStyleProps & IconOwnProps;
-export default function getProps({ lismClass, as, tag, icon, label, exProps, ..._props }: IconProps): {
+export default function getProps({ lismClass, as, icon, label, exProps, ..._props }: IconProps): {
     Component: ElementType | "_SVG_";
     lismProps: {
         [key: string]: unknown;

package/dist/components/atomic/Icon/getProps.js

@@ -1,56 +1,55 @@
-import C from "./presets.js";
-import y from "../../../lib/helper/atts.js";
-import b from "../../setMaybeTransformStyles.js";
-function d(u) {
-  const a = {}, o = u.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
-  if (o) {
-    const [, e, m] = o, t = /([\w-]+)=["']([^"']*)["']/g;
-    let c;
-    for (; (c = t.exec(e)) !== null; ) {
-      const [, s, n] = c;
-      if (s === "style") {
-        const g = {};
-        n.split(";").forEach((v) => {
-          const [l, i] = v.split(":").map((f) => f.trim());
-          l && i && (g[l] = i);
-        }), a[s] = g;
+import S from "./presets.js";
+import h from "../../../lib/helper/atts.js";
+import C from "../../setMaybeTransformStyles.js";
+function b(g) {
+  const f = {}, s = g.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
+  if (s) {
+    const [, o, t] = s, u = /([\w-]+)=["']([^"']*)["']/g;
+    let e;
+    for (; (e = u.exec(o)) !== null; ) {
+      const [, r, m] = e;
+      if (r === "style") {
+        const c = {};
+        m.split(";").forEach((l) => {
+          const [i, n] = l.split(":").map((a) => a.trim());
+          i && n && (c[i] = n);
+        }), f[r] = c;
       } else
-        a[s] = n;
+        f[r] = m;
     }
-    return { svgProps: a, svgContent: m };
+    return { svgProps: f, svgContent: t };
   }
   return {};
 }
-function j({ lismClass: u, as: a, tag: o, icon: e, label: m, exProps: t = {}, ...c }) {
-  let s = o || "span", n = "";
+function V({ lismClass: g, as: f, icon: s, label: o, exProps: t = {}, ...u }) {
+  let e = f || "span", r = "";
   const {
-    style: g = {},
-    className: v = "",
+    style: m = {},
+    className: c = "",
     ...l
-  } = b(c);
-  let i = g, f = v;
+  } = C(u);
+  let i = m, n = c;
   if (l.viewBox)
-    s = "svg", l.width || (t.width = "1em"), l.height || (t.height = "1em");
+    e = "svg", l.width || (t.width = "1em"), l.height || (t.height = "1em");
   else if (l.src)
-    s = "img";
-  else if (e)
-    if (typeof e == "string")
-      if (e.startsWith("<svg")) {
-        s = "_SVG_";
-        const { svgProps: r = {}, svgContent: h = "" } = d(e), { class: p, style: _, ...S } = r;
-        f = y(f, p), i = { ...i, ..._ }, t = { ...t, ...S, fill: "currentColor" }, n = h;
+    e = "img";
+  else if (s)
+    if (typeof s == "string")
+      if (s.startsWith("<svg")) {
+        e = "_SVG_";
+        const { svgProps: a = {}, svgContent: v = "" } = b(s), { class: y, style: p, ..._ } = a;
+        n = h(n, y), i = { ...i, ...p }, t = { ...t, ..._, fill: "currentColor" }, r = v;
       } else {
-        const r = C[e] || null;
-        r != null && (s = "_SVG_", t = { ...t, ...r });
+        const a = S[s] || null;
+        a != null && (e = "_SVG_", t = { ...t, ...a });
       }
-    else if (typeof e == "object" && e.as) {
-      const { as: r, ...h } = e;
-      s = r, t = { ...t, ...h };
+    else if (typeof s == "object" && s.as) {
+      const { as: a, ...v } = s;
+      e = a, t = { ...t, ...v };
     } else
-      s = e;
-  else a && (s = a);
-  return m ? (t["aria-label"] = m, t.role = "img") : t["aria-hidden"] = "true", l.lismClass = y(u, "a--icon", f), l.style = { ...i }, { Component: s, lismProps: l, exProps: t, content: n };
+      e = s;
+  return o ? (t["aria-label"] = o, t.role = "img") : t["aria-hidden"] = "true", l.lismClass = h(g, "a--icon", n), l.style = { ...i }, { Component: e, lismProps: l, exProps: t, content: r };
 }
 export {
-  j as default
+  V as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lism-css",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "A layout-first CSS framework for websites.",
   "author": {
     "name": "ddryo",

package/packages/astro/Dummy/Dummy.astro

@@ -5,9 +5,9 @@ import getContent from '../../../dist/components/Dummy/getContent';
 
 // Propsの定義
 interface Props extends LismProps {}
-const { tag = 'p', pre = '', length = 'm', lang = 'en', offset = 0, ...props } = Astro.props || {};
-const content = getContent({ tag, pre, lang, length, offset });
+const { as: tagName = 'p', pre = '', length = 'm', lang = 'en', offset = 0, ...props } = Astro.props || {};
+const content = getContent({ tag: tagName, pre, lang, length, offset });
 ---
 
-{tag === 'img' && <Lism tag='img' src='https://cdn.lism-css.com/dummy-image.jpg' width='600' height='400' alt='' {...props} />}
-{tag !== 'img' && <Lism tag={tag} {...props} set:html={content} />}
+{tagName === 'img' && <Lism as='img' src='https://cdn.lism-css.com/dummy-image.jpg' width='600' height='400' alt='' {...props} />}
+{tagName !== 'img' && <Lism as={tagName} {...props} set:html={content} />}

package/packages/astro/HTML/_index_memo.js

@@ -3,17 +3,17 @@
 import { createComponent, renderComponent } from 'astro/runtime/server/index.js';
 import Lism from '../Lism/Lism.astro';
 
-// <Lism tag="*"> の薄いラッパーを動的に生成するユーティリティ
+// <Lism as="*"> の薄いラッパーを動的に生成するユーティリティ
 const createHTMLComponent = (tag, baseProps = {}) =>
 	createComponent((result, props = {}, slots = {}) => {
-		return renderComponent(result, 'Lism', Lism, { tag, ...baseProps, ...props }, slots);
+		return renderComponent(result, 'Lism', Lism, { as: tag, ...baseProps, ...props }, slots);
 	});
 
 // 見出しだけ lv でタグ名を変える
 const createHeadingComponent = () =>
 	createComponent((result, props = {}, slots = {}) => {
 		const { lv = '1', ...rest } = props;
-		return renderComponent(result, 'Lism', Lism, { tag: `h${lv}`, ...rest }, slots);
+		return renderComponent(result, 'Lism', Lism, { as: `h${lv}`, ...rest }, slots);
 	});
 
 // よく使うタグをまとめてラップ

package/packages/astro/HTML/a.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='a' {...Astro.props}><slot /></Lism>
+<Lism as='a' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/button.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='button' {...Astro.props}><slot /></Lism>
+<Lism as='button' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/div.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='div' {...Astro.props}><slot /></Lism>
+<Lism as='div' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/h.astro

@@ -3,4 +3,4 @@ import Lism from '../Lism/Lism.astro';
 const { lv = '1', ...props } = Astro.props;
 ---
 
-<Lism tag={`h${lv}`} {...props}><slot /></Lism>
+<Lism as={`h${lv}`} {...props}><slot /></Lism>

package/packages/astro/HTML/img.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='img' {...Astro.props}><slot /></Lism>
+<Lism as='img' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/li.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='li' {...Astro.props}><slot /></Lism>
+<Lism as='li' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/ol.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='ol' {...Astro.props}><slot /></Lism>
+<Lism as='ol' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/p.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='p' {...Astro.props}><slot /></Lism>
+<Lism as='p' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/span.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='span' {...Astro.props}><slot /></Lism>
+<Lism as='span' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/ul.astro

@@ -2,4 +2,4 @@
 import Lism from '../Lism/Lism.astro';
 ---
 
-<Lism tag='ul' {...Astro.props}><slot /></Lism>
+<Lism as='ul' {...Astro.props}><slot /></Lism>

package/packages/astro/LinkBox/LinkBox.astro

@@ -10,6 +10,6 @@ const hasHref = !!props.href;
 const tag = hasHref ? 'a' : 'div';
 ---
 
-<Lism isLinkBox tag={tag} {...props}>
+<Lism isLinkBox as={tag} {...props}>
 	<slot />
 </Lism>

package/packages/astro/Lism/Lism.astro

@@ -5,8 +5,8 @@ import getLismProps from '../../../dist/lib/getLismProps';
 // Propsの定義
 interface Props extends LismProps {}
 
-const { as, tag, exProps, ...props } = Astro.props || {};
-const JSX = as || tag || 'div';
+const { as, exProps, ...props } = Astro.props || {};
+const JSX = as || 'div';
 ---
 
 <JSX {...getLismProps(props)} {...exProps}>

package/packages/astro/Media/Media.astro

@@ -3,9 +3,9 @@ import getLismProps from '../../../dist/lib/getLismProps';
 import getMediaProps from '../../../dist/components/atomic/Media/getProps';
 import { Image } from 'astro:assets';
 
-const { as, exProps, tag, ...props } = Astro.props || {};
+const { as, exProps, ...props } = Astro.props || {};
 
-let JSX = as || tag || 'img';
+let JSX = as || 'img';
 if (JSX === 'AstroImage') {
 	JSX = Image;
 }