lism-css 0.9.2 → 0.9.4

package/dist/lib/getLismProps.js

@@ -1,50 +1,47 @@
-var V = Object.defineProperty;
-var _ = (l, s, t) => s in l ? V(l, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[s] = t;
-var a = (l, s, t) => _(l, typeof s != "symbol" ? s + "" : s, t);
-import { STATES as C, PROPS as $ } from "../config/index.js";
-import A from "./getLayoutProps.js";
-import U from "./isPresetValue.js";
-import x from "./isTokenValue.js";
-import O from "./getUtilKey.js";
-import g from "./getMaybeCssVar.js";
-import z from "./getBpData.js";
-import w from "./helper/atts.js";
-import L from "./helper/isEmptyObj.js";
-import j from "./helper/filterEmptyObj.js";
-import k from "./helper/splitWithComma.js";
-const T = (l) => {
-  const s = $[l];
-  return s && (s == null ? void 0 : s.token) || "";
+import { STATES as b, PROPS as g } from "../config/index.js";
+import E from "./getLayoutProps.js";
+import C from "./isPresetValue.js";
+import V from "./isTokenValue.js";
+import U from "./getUtilKey.js";
+import S from "./getMaybeCssVar.js";
+import _ from "./getBpData.js";
+import A from "./helper/atts.js";
+import x from "./helper/isEmptyObj.js";
+import O from "./helper/filterEmptyObj.js";
+import j from "./helper/splitWithComma.js";
+const z = (a) => {
+  const s = g[a];
+  return s && s?.token || "";
 };
-class H {
+class w {
+  // propList = {};
+  className = "";
+  uClasses = [];
+  lismState = [];
+  styles = {};
+  attrs = {};
+  _propConfig;
   constructor(s) {
-    // propList = {};
-    a(this, "className", "");
-    a(this, "uClasses", []);
-    a(this, "lismState", []);
-    a(this, "styles", {});
-    a(this, "attrs", {});
-    a(this, "_propConfig");
-    const { forwardedRef: t, class: i, className: e, lismClass: n, variant: r, style: f = {}, _propConfig: h = {}, ...y } = s;
-    this.styles = { ...f }, this._propConfig = { ...h };
-    let c = n || "";
-    if (r && n) {
-      const m = n.split(" "), o = m[0], S = `${o}--${r}`;
-      c = [o, S, ...m.slice(1)].join(" ");
+    const { forwardedRef: t, class: i, className: e, lismClass: l, variant: r, style: f = {}, _propConfig: o = {}, ...u } = s;
+    this.styles = { ...f }, this._propConfig = { ...o };
+    let h = l || "";
+    if (r && l) {
+      const y = l.split(" "), n = y[0], m = `${n}--${r}`;
+      h = [n, m, ...y.slice(1)].join(" ");
     }
-    L(y) || (this.attrs = { ...y }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = w(e || i, c, this.lismState, this.uClasses);
+    x(u) || (this.attrs = { ...u }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = A(e || i, h, this.lismState, this.uClasses);
   }
   analyzeState(s, t) {
-    const { className: i, preset: e, presetClass: n, customVar: r, tokenKey: f, setStyles: h } = s;
-    t === !0 ? this.lismState.push(i) : e && U(e, t) ? this.lismState.push(`${i} ${n}:${String(t)}`) : t && (this.lismState.push(i), f && r ? this.addStyle(r, g(t, f)) : h && typeof t == "string" && this.addStyles(h(t)));
+    const { className: i, preset: e, presetClass: l, customVar: r, tokenKey: f, setStyles: o } = s;
+    t === !0 ? this.lismState.push(i) : e && C(e, t) ? this.lismState.push(`${i} ${l}:${String(t)}`) : t && (this.lismState.push(i), f && r ? this.addStyle(r, S(t, f)) : o && typeof t == "string" && this.addStyles(o(t)));
   }
   // prop解析
   analyzeProps() {
     Object.keys(this.attrs).forEach((s) => {
-      if (Object.hasOwn(C, s)) {
-        const t = this.extractProp(s), i = C[s];
+      if (Object.hasOwn(b, s)) {
+        const t = this.extractProp(s), i = b[s];
         typeof i == "string" ? t && this.lismState.push(i) : this.analyzeState(i, t);
-      } else if (Object.hasOwn($, s)) {
+      } else if (Object.hasOwn(g, s)) {
         const t = this.attrs[s];
         delete this.attrs[s], this.analyzeLismProp(s, t);
       } else if (s === "hov") {
@@ -58,14 +55,13 @@ class H {
   }
   // Lism Prop 解析
   analyzeLismProp(s, t) {
-    var r;
     if (t == null) return;
-    let i = $[s] || null;
+    let i = g[s] || null;
     if (i === null) return;
-    (r = this._propConfig) != null && r[s] && (i = Object.assign({}, i, this._propConfig[s]));
-    const { base: e, ...n } = z(t);
-    this.setAttrs(s, e, i), Object.keys(n).forEach((f) => {
-      i && this.setAttrs(s, n[f], i, f);
+    this._propConfig?.[s] && (i = Object.assign({}, i, this._propConfig[s]));
+    const { base: e, ...l } = _(t);
+    this.setAttrs(s, e, i), Object.keys(l).forEach((r) => {
+      i && this.setAttrs(s, l[r], i, r);
     });
   }
   addUtil(s) {
@@ -100,26 +96,26 @@ class H {
   // 値が null, undefined, '', false の時はスキップ
   setAttrs(s, t, i = {}, e = "") {
     if (t == null || t === "" || t === !1) return;
-    let n = `--${s}`, r = `-${String(i.utilKey || s)}`;
-    if (e && (n = `--${s}_${e}`, r += `_${e}`), typeof t == "string" && t.startsWith(":")) {
+    let l = `--${s}`, r = `-${String(i.utilKey || s)}`;
+    if (e && (l = `--${s}_${e}`, r += `_${e}`), typeof t == "string" && t.startsWith(":")) {
       this.addUtil(`${r}:${t.replace(":", "")}`);
       return;
     }
     if (!e) {
-      const { presets: S, tokenClass: E, utils: P, shorthands: b } = i;
-      if (S && U(S, t)) {
-        const u = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        u && this.addUtil(`${r}:${u}`);
+      const { presets: m, tokenClass: k, utils: $, shorthands: P } = i;
+      if (m && C(m, t)) {
+        const d = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        d && this.addUtil(`${r}:${d}`);
         return;
       }
-      if (E && i.token && x(i.token, t)) {
-        const u = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        u && this.addUtil(`${r}:${u}`);
+      if (k && i.token && V(i.token, t)) {
+        const d = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        d && this.addUtil(`${r}:${d}`);
         return;
       }
-      let d = "";
-      if (P && typeof t == "string" && (d = O(P, t)), !d && b && typeof t == "string" && (d = O(b, t, !0)), d) {
-        this.addUtil(`${r}:${d}`);
+      let c = "";
+      if ($ && typeof t == "string" && (c = U($, t)), !c && P && typeof t == "string" && (c = U(P, t, !0)), c) {
+        this.addUtil(`${r}:${c}`);
         return;
       }
     }
@@ -127,18 +123,18 @@ class H {
       this.addUtil(r);
       return;
     }
-    const { prop: f, isVar: h, alwaysVar: y, token: c, bp: m } = i;
-    let o;
-    if (c && (typeof t == "string" || typeof t == "number") ? o = g(t, c) : typeof t == "string" || typeof t == "number" ? o = t : o = JSON.stringify(t), !e) {
-      if (h) {
-        this.addStyle(`--${s}`, o);
+    const { prop: f, isVar: o, alwaysVar: u, token: h, bp: y } = i;
+    let n;
+    if (h && (typeof t == "string" || typeof t == "number") ? n = S(t, h) : typeof t == "string" || typeof t == "number" ? n = t : n = JSON.stringify(t), !e) {
+      if (o) {
+        this.addStyle(`--${s}`, n);
         return;
-      } else if (!m && !y) {
-        this.addStyle(f, o);
+      } else if (!y && !u) {
+        this.addStyle(f, n);
         return;
       }
     }
-    this.addUtil(r), this.addStyle(n, o);
+    this.addUtil(r), this.addStyle(l, n);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -154,7 +150,7 @@ class H {
   // 	});
   // }
   setHovProps(s) {
-    s && (s === "-" || s === !0 ? this.addUtil("-hov") : typeof s == "string" ? k(s).forEach((t) => {
+    s && (s === "-" || s === !0 ? this.addUtil("-hov") : typeof s == "string" ? j(s).forEach((t) => {
       this.addUtil(`-hov:${t}`);
     }) : typeof s == "object" && Object.keys(s).forEach((t) => {
       const i = s[t];
@@ -162,31 +158,31 @@ class H {
         if (i === "-" || i === !0)
           this.addUtil(`-hov:${t}`);
         else if (t === "class")
-          k(i).forEach((e) => {
+          j(i).forEach((e) => {
             this.addUtil(`-hov:${e}`);
           });
         else if (typeof i == "string" || typeof i == "number") {
-          const e = g(i, T(t));
+          const e = S(i, z(t));
           this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, e);
         }
       }
     }));
   }
 }
-function Y(l) {
-  if (Object.keys(l).length === 0)
+function G(a) {
+  if (Object.keys(a).length === 0)
     return {};
-  const { layout: s, ...t } = l, i = new H(A(s, t));
+  const { layout: s, ...t } = a, i = new w(E(s, t));
   return {
-    ...j({
+    ...O({
       className: i.className,
-      style: j(i.styles)
+      style: O(i.styles)
     }),
     ...i.attrs
     // data-* などHTMLの標準属性はそのまま渡す
   };
 }
 export {
-  H as LismPropsData,
-  Y as default
+  w as LismPropsData,
+  G as default
 };

package/dist/lib/getMaybeTokenValue.d.ts

@@ -1,9 +1,9 @@
 type TokenValue = string | number;
 type TokenConfigValues = Set<string> | string[] | readonly string[];
-type TokenConfigValuesObj = {
+interface TokenConfigValuesObj {
     pre?: string;
     values?: TokenConfigValues;
-};
+}
 type TokenConfigProp = TokenConfigValues | TokenConfigValuesObj;
 type TokensConfig = Record<string, TokenConfigProp>;
 /**

package/dist/lib/types/LayoutProps.d.ts

@@ -1,48 +1,48 @@
 export type CssValue = string | number;
-export type NoLayoutProps = {
+export interface NoLayoutProps {
     layout?: undefined;
-};
-export type BoxProps = {
+}
+export interface BoxProps {
     layout: 'box';
-};
-export type CenterProps = {
+}
+export interface CenterProps {
     layout: 'center';
-};
-export type ClusterProps = {
+}
+export interface ClusterProps {
     layout: 'cluster';
-};
-export type FlexProps = {
+}
+export interface FlexProps {
     layout: 'flex';
-};
-export type FrameProps = {
+}
+export interface FrameProps {
     layout: 'frame';
-};
-export type GridLayoutProps = {
+}
+export interface GridLayoutProps {
     layout: 'grid';
-};
-export type StackProps = {
+}
+export interface StackProps {
     layout: 'stack';
-};
-export type ColumnsProps = {
+}
+export interface ColumnsProps {
     layout: 'columns';
-};
-export type FlowLayoutProps = {
+}
+export interface FlowLayoutProps {
     layout: 'flow';
     flow?: CssValue;
-};
-export type FluidColsProps = {
+}
+export interface FluidColsProps {
     layout: 'fluidCols';
     autoFill?: boolean;
-};
-export type SideMainProps = {
+}
+export interface SideMainProps {
     layout: 'sideMain';
     sideW?: CssValue;
     mainW?: CssValue;
-};
-export type SwitchColsProps = {
+}
+export interface SwitchColsProps {
     layout: 'switchCols';
     breakSize?: CssValue;
-};
+}
 export type LayoutSpecificProps = NoLayoutProps | BoxProps | CenterProps | ClusterProps | ColumnsProps | FlexProps | FlowLayoutProps | FluidColsProps | FrameProps | GridLayoutProps | StackProps | SideMainProps | SwitchColsProps;
 export type LayoutType = Exclude<LayoutSpecificProps, NoLayoutProps>['layout'];
 export interface LayoutProps {

package/dist/lib/types/ResponsiveProps.d.ts

@@ -5,7 +5,7 @@ type BreakpointKey = (typeof BREAK_POINTS_ALL)[number];
 /** ブレイクポイント数（5: base, sm, md, lg, xl） */
 type BreakpointCount = (typeof BREAK_POINTS_ALL)['length'];
 /** ブレイクポイント数を上限とする配列型（1〜5要素） */
-type ResponsiveArray<T> = LimitedArray<T, BreakpointCount>;
+type ResponsiveArray<T> = LimitedArray<T | null, BreakpointCount>;
 /**
  * プロパティ値をレスポンシブ対応の型に変換するユーティリティ型
  *

package/dist/lib/types.d.ts

@@ -1,2 +1,2 @@
-import { CSSProperties } from 'react';
-export type StyleWithCustomProps = CSSProperties & Record<`--${string}`, string | number | undefined>;
+import type * as CSS from 'csstype';
+export type StyleWithCustomProps = CSS.Properties<string | number> & CSS.PropertiesHyphen<string | number> & Record<`--${string}`, string | number | undefined>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lism-css",
-  "version": "0.9.2",
-  "description": "A layout-first CSS framework for websites.",
+  "version": "0.9.4",
+  "description": "Lism CSS is a layout-first CSS framework for websites.",
   "author": {
     "name": "ddryo",
     "url": "https://github.com/ddryo"
@@ -54,8 +54,7 @@
     },
     "./next-js/*": "./packages/next-js/*",
     "./astro": {
-      "import": "./packages/astro/index.js",
-      "types": "./packages/types/index.d.ts"
+      "import": "./packages/astro/index.ts"
     },
     "./astro/*": "./packages/astro/*",
     "./scss/*": "./src/scss/*",
@@ -75,20 +74,27 @@
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@rollup/plugin-babel": "^6.1.0",
-    "@storybook/react-vite": "^10.2.19",
+    "@storybook/react-vite": "^10.3.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^25.5.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
+    "astro": "^6.1.1",
+    "eslint": "^9.39.4",
     "glob": "^13.0.6",
     "jsdom": "^27.4.0",
+    "lucide-react": "^0.577.0",
     "rollup": "^4.59.0",
+    "stylelint": "^17.4.0",
     "tsx": "^4.21.0",
-    "typescript": "~5.8.3",
+    "typescript": "^5.8.3",
     "unplugin-dts": "1.0.0-beta.6",
-    "vite": "^6.4.1",
+    "vite": "^7.3.1",
     "vitest": "^4.1.0"
   },
+  "dependencies": {
+    "csstype": "^3.2.3"
+  },
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
@@ -98,14 +104,14 @@
   "sideEffects": false,
   "scripts": {
     "dev": "vite",
-    "test": "pnpm typecheck && pnpm vitest",
+    "test": "pnpm vitest",
     "vitest": "vitest run",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && astro check --tsconfig packages/astro/tsconfig.json",
     "build": "pnpm build:js && pnpm build:css",
     "build:js": "vite build && pnpm exec tsc -p config/tsconfig.json",
     "build:css": "tsx bin/script-build-css.js",
     "lint": "pnpm lint:eslint && pnpm lint:style",
-    "lint:eslint": "eslint '**/*.{js,mjs,ts,tsx}'",
+    "lint:eslint": "eslint '**/*.{js,mjs,ts,tsx,astro}'",
     "lint:style": "stylelint '**/*.{css,scss}'",
     "preview": "vite preview"
   }

package/packages/astro/Box/Box.astro

@@ -1,9 +1,8 @@
 ---
-import type { LismProps } from '../../types';
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
 
-// Propsの定義
-interface Props extends LismProps {}
+type Props = AstroLismProps;
 const props = Astro.props || {};
 ---
 

package/packages/astro/Center/Center.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='center' {...Astro.props}><slot /></Lism>

package/packages/astro/Cluster/Cluster.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='cluster' {...Astro.props}><slot /></Lism>

package/packages/astro/Columns/Columns.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='columns' {...Astro.props}><slot /></Lism>

package/packages/astro/Container/Container.astro

@@ -1,8 +1,10 @@
 ---
-import type { LismProps } from '../../types';
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
 
-interface Props extends LismProps {}
+type Props = AstroLismProps & {
+	size?: string;
+};
 
 const { size, ...props } = Astro.props || {};
 ---

package/packages/astro/Decorator/Decorator.astro

@@ -1,10 +1,9 @@
 ---
-import type { LismProps } from '../../types';
+import type { DecoratorProps } from 'lism-css/react/atomic/Decorator/getProps';
 import { Lism } from '../Lism';
-import getProps from '../../../dist/components/atomic/Decorator/getProps';
+import getProps from 'lism-css/react/atomic/Decorator/getProps';
 
-// Propsの定義
-interface Props extends LismProps {}
+type Props = DecoratorProps;
 const props = Astro.props || {};
 ---
 

package/packages/astro/Divider/Divider.astro

@@ -1,10 +1,9 @@
 ---
-import type { LismProps } from '../../types';
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
-import { getDividerProps } from '../../../dist/components/atomic/Divider/getProps';
+import { getDividerProps } from 'lism-css/react/atomic/Divider/getProps';
 
-// Propsの定義
-interface Props extends LismProps {}
+type Props = AstroLismProps;
 
 const props = Astro.props || {};
 ---

package/packages/astro/Dummy/Dummy.astro

@@ -1,10 +1,14 @@
 ---
-import type { LismProps } from '../../types';
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
-import getContent from '../../../dist/components/Dummy/getContent';
+import getContent from 'lism-css/react/Dummy/getContent';
 
-// Propsの定義
-interface Props extends LismProps {}
+type Props = AstroLismProps & {
+	pre?: string;
+	length?: string;
+	lang?: 'ja' | 'en' | 'ar';
+	offset?: number;
+};
 const { as: tagName = 'p', pre = '', length = 'm', lang = 'en', offset = 0, ...props } = Astro.props || {};
 const content = getContent({ tag: tagName, pre, lang, length, offset });
 ---

package/packages/astro/Flex/Flex.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='flex' {...Astro.props}><slot /></Lism>

package/packages/astro/Flow/Flow.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='flow' {...Astro.props}><slot /></Lism>

package/packages/astro/FluidCols/FluidCols.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='fluidCols' {...Astro.props}><slot /></Lism>

package/packages/astro/Frame/Frame.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='frame' {...Astro.props}><slot /></Lism>

package/packages/astro/Grid/Grid.astro

@@ -1,5 +1,8 @@
 ---
+import type { AstroLismProps } from '../types';
 import { Lism } from '../Lism';
+
+type Props = AstroLismProps;
 ---
 
 <Lism layout='grid' {...Astro.props}><slot /></Lism>

package/packages/astro/HTML/a.astro

@@ -1,5 +1,9 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
+const props = Astro.props || {};
 ---
 
-<Lism as='a' {...Astro.props}><slot /></Lism>
+<Lism as='a' {...props}><slot /></Lism>

package/packages/astro/HTML/button.astro

@@ -1,5 +1,9 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
+const props = Astro.props || {};
 ---
 
-<Lism as='button' {...Astro.props}><slot /></Lism>
+<Lism as='button' {...props}><slot /></Lism>

package/packages/astro/HTML/div.astro

@@ -1,5 +1,9 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
+const props = Astro.props || {};
 ---
 
-<Lism as='div' {...Astro.props}><slot /></Lism>
+<Lism as='div' {...props}><slot /></Lism>

package/packages/astro/HTML/h.astro

@@ -1,5 +1,11 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps & {
+	lv?: '1' | '2' | '3' | '4' | '5' | '6';
+};
+
 const { lv = '1', ...props } = Astro.props;
 ---
 

package/packages/astro/HTML/img.astro

@@ -1,5 +1,9 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
+const props = Astro.props || {};
 ---
 
-<Lism as='img' {...Astro.props}><slot /></Lism>
+<Lism as='img' {...props}><slot /></Lism>

package/packages/astro/HTML/li.astro

@@ -1,5 +1,9 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
+const props = Astro.props || {};
 ---
 
-<Lism as='li' {...Astro.props}><slot /></Lism>
+<Lism as='li' {...props}><slot /></Lism>

package/packages/astro/HTML/ol.astro

@@ -1,5 +1,9 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
+const props = Astro.props || {};
 ---
 
-<Lism as='ol' {...Astro.props}><slot /></Lism>
+<Lism as='ol' {...props}><slot /></Lism>

package/packages/astro/HTML/p.astro

@@ -1,5 +1,9 @@
 ---
+import type { AstroLismProps } from '../types';
 import Lism from '../Lism/Lism.astro';
+
+type Props = AstroLismProps;
+const props = Astro.props || {};
 ---
 
-<Lism as='p' {...Astro.props}><slot /></Lism>
+<Lism as='p' {...props}><slot /></Lism>