lism-css 0.3.5 → 0.5.0

package/dist/lib/getLismProps.js

@@ -1,103 +1,68 @@
-var _ = Object.defineProperty;
-var w = (o, t, s) => t in o ? _(o, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : o[t] = s;
-var y = (o, t, s) => w(o, typeof t != "symbol" ? t + "" : t, s);
-import C, { CONTEXT_PROPS as E } from "../config/prop_list.js";
-import z from "./isPresetValue.js";
-import g from "./isTokenValue.js";
-import x from "./getMaybeUtilValue.js";
-import u from "./getMaybeCssVar.js";
-import k from "./getBpData.js";
-import U from "./helper/atts.js";
-import A from "./helper/isEmptyObj.js";
-import O from "./helper/filterEmptyObj.js";
-import S from "./helper/splitWithComma.js";
-const j = (o) => {
-  const t = C[o];
-  if (!t) return null;
-  const { converter: s } = t;
-  return s || null;
-}, V = Object.keys(C), B = Object.keys(E);
-class K {
+var E = Object.defineProperty;
+var A = (r, t, s) => t in r ? E(r, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[t] = s;
+var d = (r, t, s) => A(r, typeof t != "symbol" ? t + "" : t, s);
+import { STATES as U, PROPS as P } from "../config/index.js";
+import g from "./isPresetValue.js";
+import V from "./isTokenValue.js";
+import O from "./getUtilKey.js";
+import S from "./getMaybeCssVar.js";
+import _ from "./getBpData.js";
+import b from "./helper/atts.js";
+import x from "./helper/isEmptyObj.js";
+import j from "./helper/filterEmptyObj.js";
+import k from "./helper/splitWithComma.js";
+const z = (r) => {
+  const t = P[r];
+  return t && (t == null ? void 0 : t.token) || "";
+};
+class w {
   constructor(t) {
     // propList = {};
-    y(this, "className", "");
-    y(this, "uClasses", []);
-    // props解析処理で追加される
-    y(this, "attrs", {});
-    y(this, "styles", {});
-    const {
-      forwardedRef: s,
-      class: i,
-      className: e,
-      lismClass: l,
-      lismState: r = [],
-      variant: f,
-      passVars: c,
-      // lismVar,
-      style: n = {},
-      _propConfig: h = {},
-      // hasBd,
-      ...d
-    } = t;
-    this.lismClass = l || "", this.lismState = structuredClone(r), this.styles = structuredClone(n), this._propConfig = structuredClone(h);
-    let a = this.getStateProps(d);
-    if (f && l) {
-      const $ = l.split(" "), b = $[0], m = f.split(",").map((P) => P.trim()).filter(Boolean).map((P) => `${b}-${P}`);
-      this.lismClass = [b, ...m, ...$.slice(1)].join(" ");
+    d(this, "className", "");
+    d(this, "uClasses", []);
+    d(this, "lismState", []);
+    d(this, "styles", {});
+    d(this, "attrs", {});
+    const { forwardedRef: s, class: i, className: l, lismClass: a, layout: e, variant: h, style: f = {}, _propConfig: m = {}, ...o } = t;
+    this.styles = { ...f }, this._propConfig = { ...m };
+    let n = a || "";
+    if (h && a) {
+      const u = a.split(" "), y = u[0], $ = `${y}--${h}`;
+      n = [y, $, ...u.slice(1)].join(" ");
     }
-    this.className = U(this.lismClass, this.lismState, i, e), A(a) || (this.attrs = a, this.analyzeProps(a)), s && (this.attrs.ref = s), c != null && typeof c == "object" && this.setPassProps(c);
+    typeof e == "string" && e && (n = b(n, `l--${e}`)), x(o) || (this.attrs = { ...o }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = b(l || i, n, this.lismState, this.uClasses);
   }
-  // 特定の条件下で受け取るpropの処理
-  setContextProps(t, s) {
-    const i = E[t];
-    i && Object.keys(s).forEach((e) => {
-      const l = i[e];
-      if (l) {
-        const r = s[e];
-        this.analyzeProp(e, r, l);
-      } else t === "css" && this.addStyle(e, s[e]);
-    });
+  analyzeState(t, s) {
+    const { className: i, preset: l, presetClass: a, customVar: e, tokenKey: h, setStyles: f } = t;
+    s === !0 ? this.lismState.push(i) : l && g(l, s) ? this.lismState.push(`${i} ${a}:${s}`) : s && (this.lismState.push(i), h ? this.addStyle(e, S(s, h)) : f && this.addStyles(f(s)));
   }
   // prop解析
-  analyzeProps(t) {
-    Object.keys(t).forEach((i) => {
-      if (i === "hov") {
-        const r = this.extractProp(i);
-        this.setHoverProps(r);
-        return;
-      }
-      if (i === "bd") {
-        const r = this.extractProp(i);
-        this.setBdProps(r);
-        return;
-      }
-      if (V.includes(i)) {
-        const r = this.attrs[i];
-        delete this.attrs[i], this.analyzeProp(i, r);
-        return;
-      }
-      if (B.includes(i)) {
-        const r = this.attrs[i];
-        delete this.attrs[i], this.setContextProps(i, r);
-        return;
+  analyzeProps() {
+    Object.keys(this.attrs).forEach((t) => {
+      if (Object.hasOwn(U, t)) {
+        const s = this.extractProp(t), i = U[t];
+        typeof i == "string" ? s && this.lismState.push(i) : this.analyzeState(i, s);
+      } else if (Object.hasOwn(P, t)) {
+        const s = this.attrs[t];
+        delete this.attrs[t], this.analyzeLismProp(t, s);
+      } else if (t === "hov") {
+        const s = this.extractProp(t);
+        this.setHovProps(s);
+      } else if (t === "css") {
+        const s = this.extractProp("css");
+        this.addStyles(s);
       }
     });
   }
-  // prop解析
-  analyzeProp(t, s, i) {
-    if (s == null || (i = i || C[t] || null, i === null)) return;
+  // Lism Prop 解析
+  analyzeLismProp(t, s) {
+    if (s == null) return;
+    let i = P[t] || null;
+    if (i === null) return;
     this._propConfig[t] && (i = Object.assign({}, i, this._propConfig[t]));
-    const { name: e, objProcessor: l, ...r } = i, { base: f, ...c } = k(s);
-    if (s = f, s != null && typeof s == "object") {
-      if (!l) return;
-      Object.keys(s).forEach((n) => {
-        const { prop: h, context: d } = l(n);
-        d ? this.setContextProps(t, { [h]: s[n] }) : this.analyzeProp(h, s[n]);
-      });
-    } else
-      this.setAttrs(e || t, s, r);
-    Object.keys(c).forEach((n) => {
-      this.setAttrs(e || t, c[n], r, n);
+    const { base: l, ...a } = _(s);
+    this.setAttrs(t, l, i), Object.keys(a).forEach((e) => {
+      this.setAttrs(t, a[e], i, e);
     });
   }
   addUtil(t) {
@@ -130,114 +95,81 @@ class K {
   }
   // utilクラスを追加するか、styleにセットするかの分岐処理 @base
   // 値が null, undefined, '', false の時はスキップ
-  setAttrs(t, s, i = {}, e) {
+  setAttrs(t, s, i = {}, l = "") {
     if (s == null || s === "" || s === !1) return;
-    let l = `--${t}`, r = `-${i.utilKey || t}`;
-    if (e && (l = `--${t}_${e}`, r += `_${e}`), typeof s == "string" && s.startsWith("u:")) {
-      this.addUtil(`${r}:${s.replace("u:", "")}`);
+    let a = `--${t}`, e = `-${i.utilKey || t}`;
+    if (l && (a = `--${t}_${l}`, e += `_${l}`), typeof s == "string" && s.startsWith(":")) {
+      this.addUtil(`${e}:${s.replace(":", "")}`);
       return;
     }
-    if (!e) {
-      let { presets: h, utils: d } = i;
-      if (h && (h === 1 && (h = t), z(h, s))) {
-        this.addUtil(`${r}:${s}`);
+    if (!l) {
+      const { presets: u, tokenClass: y, utils: $, shorthands: C } = i;
+      if (u && g(u, s)) {
+        this.addUtil(`${e}:${s}`);
+        return;
+      }
+      if (y && V(i.token, s)) {
+        this.addUtil(`${e}:${s}`);
         return;
       }
-      if (d) {
-        d === 1 && (d = t);
-        const a = x(d, s);
-        if (a) {
-          this.addUtil(`${r}:${a}`);
-          return;
-        }
+      let c = "";
+      if ($ && (c = O($, s)), !c && C && (c = O(C, s, !0)), c) {
+        this.addUtil(`${e}:${c}`);
+        return;
       }
     }
-    let { style: f, isVar: c, converter: n } = i;
     if (s === !0 || s === "-") {
-      this.addUtil(r);
-      return;
-    }
-    if ((t === "bgc" || t === "c" || t === "bdc") && typeof s == "string" && s.endsWith("%")) {
-      this.setMixColor(t, s);
-      return;
-    }
-    if (n && (s = u(s, n, t)), c && (f = `--${t}`), !e && f) {
-      this.addStyle(f, s);
+      this.addUtil(e);
       return;
     }
-    this.addUtil(r), this.addStyle(l, s);
-  }
-  setMixColor(t, s) {
-    const i = s.split(":");
-    if (i.length === 3) {
-      const [e, l, r] = i;
-      this.addStyle(`--_${t}1`, u(e, "color", t)), this.addStyle(`--_${t}2`, u(l, "color", t)), this.addStyle(`--_mixpct-${t}`, r);
-    } else if (i.length === 2) {
-      const [e, l] = i;
-      this.addStyle(`--_${t}1`, u(e, "color", t)), this.addStyle(`--_mixpct-${t}`, l);
+    let { prop: h, isVar: f, alwaysVar: m, token: o, bp: n } = i;
+    if (o && (s = S(s, o)), !l) {
+      if (f) {
+        this.addStyle(`--${t}`, s);
+        return;
+      } else if (!n && !m) {
+        this.addStyle(h, s);
+        return;
+      }
     }
-    this.addUtil(`-${t}:mix`);
-  }
-  setPassProps(t) {
-    Object.keys(t).forEach((s) => {
-      let i = t[s];
-      if (i === null) return;
-      const e = j(s);
-      e && (i = u(i, e, s)), this.addStyle(`--pass_${s}`, i);
-    });
-  }
-  setHoverProps(t) {
-    t && (t === "-" || t === !0 ? this.addUtil("-hov") : typeof t == "string" ? S(t).forEach((s) => {
+    this.addUtil(e), this.addStyle(a, s);
+  }
+  // setPassProps(passVars) {
+  // 	let dataList = [];
+  // 	Object.keys(passVars).forEach((propName) => {
+  // 		// プロバイダーリストに追加
+  // 		dataList.push(propName);
+  // 		// 渡す値
+  // 		let value = passVars[propName];
+  // 		if (null === value) return;
+  // 		// トークン値であれば変換
+  // 		value = getMaybeCssVar(value, getTokenKey(propName));
+  // 		this.addStyle(`--pass_${propName}`, value);
+  // 	});
+  // }
+  setHovProps(t) {
+    t && (t === "-" || t === !0 ? this.addUtil("-hov") : typeof t == "string" ? k(t).forEach((s) => {
       this.addUtil(`-hov:${s}`);
     }) : typeof t == "object" && Object.keys(t).forEach((s) => {
       let i = t[s];
-      if (!(i == null || i === "" || i === !1))
-        if (i === "-" || i === !0)
-          this.addUtil(`-hov:${s}`);
-        else if (s === "class")
-          S(i).forEach((e) => {
-            this.addUtil(`-hov:${e}`);
-          });
-        else {
-          const e = j(s);
-          e && (i = u(i, e, s)), this.addUtil(`-hov:${s}`), this.addStyle(`--hov-${s}`, i);
-        }
+      i == null || i === "" || i === !1 || (i === "-" || i === !0 ? this.addUtil(`-hov:${s}`) : s === "class" ? k(i).forEach((l) => {
+        this.addUtil(`-hov:${l}`);
+      }) : (i = S(i, z(s)), this.addUtil(`-hov:${s}`), this.addStyle(`--hov-${s}`, i)));
     }));
   }
-  setBdProps(t) {
-    if (t) {
-      if (typeof t == "string" && t.includes(",") && !t.includes("(")) {
-        S(t).forEach((s) => {
-          const i = x("bd", s) || s;
-          i && this.addUtil(`-bd:${i}`);
-        });
-        return;
-      }
-      this.analyzeProp("bd", t);
-    }
-  }
-  getStateProps({ skipState: t, isOverwide: s, isFullwide: i, isWide: e, isFlow: l, isContainer: r, hasGutter: f, isLayer: c, isLinkBox: n, ...h }) {
-    return t || (r && this.setContainerData(r), l && this.setFlowData(l), s && this.lismState.push("is--overwide"), i && this.lismState.push("is--fullwide"), e && this.lismState.push("is--wide"), f && this.lismState.push("has--gutter")), c && this.lismState.push("is--layer"), n && this.lismState.push("is--linkBox"), h;
-  }
-  setContainerData(t) {
-    t === !0 ? this.lismState.push("is--container") : t && (g("contentSize", t) ? this.lismState.push(`is--container -container:${t}`) : (this.lismState.push("is--container"), this.addStyle("--contentSize", u(t, "size"))));
-  }
-  setFlowData(t) {
-    t === !0 ? this.lismState.push("is--flow") : t && (g("flow", t) ? this.lismState.push(`is--flow -flow:${t}`) : (this.lismState.push("is--flow"), this.addStyle("--flowM", u(t, "space"))));
-  }
 }
-function I(o, t = {}) {
-  if (o = Object.assign(t, o), o.length === 0)
+function J(r) {
+  if (r.length === 0)
     return {};
-  const s = new K(o);
-  return O({
-    className: U(s.className, s.uClasses),
-    style: O(s.styles),
+  const t = new w(r);
+  return j({
+    className: t.className,
+    style: j(t.styles),
     //filterEmptyObj(styles), // filterEmptyObj は最後にかける
-    ...s.attrs
+    ...t.attrs
     // 処理されずに残っているprops
   });
 }
 export {
-  I as default
+  J as default
 };

package/dist/lib/getMaybeCssVar.js

@@ -1,61 +1,37 @@
-import o from "./helper/isNumStr.js";
-import n from "./isTokenValue.js";
-function m(r, t, i = "") {
-  if (typeof t == "function")
-    return t(r);
-  if (typeof t == "string")
-    switch (t) {
-      case "space":
-        return e(r);
-      case "color":
-        return f(r);
-      case "size":
-        return c(r);
-      case "bdrs":
-        return p(r);
-      case "bxsh":
-        return b(r);
-      // case 'opacity':
-      // 	return getMaybeOpacityVar(value);
-      case "fz":
-        return y(r);
-      // case 'filter':
-      // 	return getMaybeFilterVar(value);
-      default:
-        return r;
-    }
-  else if (t === 1 && n(i, r))
-    return `var(--${i}--${r})`;
-  return r;
-}
-function e(r, t) {
-  return r === 0 || r === "0" ? "0" : typeof r == "number" || o(r) ? `var(--s${r})` : typeof r == "string" && r.includes(" ") && !r.includes("calc(") && !r.includes("var(") && !r.includes(",") ? r.split(" ").map((s) => e(s)).join(" ") : r;
-}
-function f(r, t) {
-  if (typeof r == "string" && r.endsWith("%")) {
-    const [i, s] = r.split(":");
-    return `color-mix(in srgb, ${f(i)} ${s}, transparent)`;
+import { TOKENS as t } from "../config/index.js";
+import f from "./helper/isNumStr.js";
+import n from "./getMaybeTokenValue.js";
+function b(r, o) {
+  if (!o) return r;
+  switch (o) {
+    case "space":
+      return s(r);
+    case "color":
+      return p(r);
+    case "bxsh":
+      return r === "0" || r === 0 ? "none" : n(o, r, t);
+    default:
+      return n(o, r, t);
   }
-  return n("color", r) ? `var(--c-${r})` : n("palette", r) ? `var(--${r})` : r;
 }
-function c(r) {
-  return n("contentSize", r) ? `var(--size-${r})` : r;
+function s(r) {
+  return r === 0 || r === "0" ? "0" : typeof r == "number" || f(r) ? `var(--s${r})` : typeof r == "string" && r.includes(" ") && !r.includes("calc(") && !r.includes("var(") && !r.includes(",") ? r.split(" ").map((i) => s(i)).join(" ") : r;
 }
 function p(r) {
-  return n("bdrs", r) ? "var(--bdrs-" + r + ")" : r;
-}
-function b(r) {
-  return n("bxsh", r) ? (r = r + "", r = r.replace("-", "i"), r === "0" ? "none" : "var(--bxsh-" + r + ")") : r;
-}
-function y(r) {
-  return n("fz", r) ? "var(--fz-" + r + ")" : r;
+  if (typeof r == "string" && r.endsWith("%")) {
+    const o = r.split(":");
+    if (o.length === 3) {
+      const [i, c, e] = o;
+      return `color-mix(in srgb, ${n("color", i, t)} ${e}, ${n("color", c, t)})`;
+    } else if (o.length === 2) {
+      const [i, c] = o;
+      return `color-mix(in srgb, ${n("color", i, t)} ${c}, transparent)`;
+    }
+  }
+  return n("color", r, t);
 }
 export {
-  m as default,
-  f as getMaybeColorVar,
-  y as getMaybeFzVar,
-  p as getMaybeRadiusVar,
-  b as getMaybeShadowVar,
-  c as getMaybeSizeVar,
-  e as getMaybeSpaceVar
+  b as default,
+  p as getMaybeColorVar,
+  s as getMaybeSpaceVar
 };

package/dist/lib/getMaybeTokenValue.js

@@ -0,0 +1,26 @@
+function c(t, r, n) {
+  if (typeof t != "string") return r;
+  if (t === "color") {
+    let s = c("c", r, n);
+    return s === r && (s = c("palette", r, n)), s;
+  }
+  const i = n[t];
+  if (!i) return r;
+  if (typeof r == "number" && (r = `${r}`), i instanceof Set) {
+    if (i.has(r))
+      return r.startsWith("-") && (r = `n${r.slice(1)}`), `var(--${t}--${r})`;
+  } else if (Array.isArray(i)) {
+    if (i.includes(r))
+      return r.startsWith("-") && (r = `n${r.slice(1)}`), `var(--${t}--${r})`;
+  } else if (typeof i == "object") {
+    const { pre: s = "", values: f = [] } = i || {};
+    if ((t === "palette" || t === "c") && console.log(":::color:::::", r, f), f instanceof Set && f.has(r))
+      return `var(${s}${r})`;
+    if (Array.isArray(f) && f.includes(r))
+      return `var(${s}${r})`;
+  }
+  return r;
+}
+export {
+  c as default
+};

package/dist/lib/getUtilKey.js

@@ -0,0 +1,13 @@
+function o(e, r, f = !1) {
+  if (e == null || typeof e != "object") return "";
+  if (r in e)
+    return f ? e[r] : r;
+  if (f) return "";
+  for (const [n, t] of Object.entries(e))
+    if (t === r)
+      return n;
+  return "";
+}
+export {
+  o as default
+};

package/dist/lib/isPresetValue.js

@@ -1,6 +1,6 @@
-function e(r, n) {
-  return Array.isArray(r) ? typeof n == "number" ? r.includes(`${n}`) : r.includes(n) : !1;
+function f(n, r) {
+  return typeof r == "number" && (r = `${r}`), n instanceof Set ? n.has(r) : Array.isArray(n) ? n.includes(r) : !1;
 }
 export {
-  e as default
+  f as default
 };

package/dist/lib/isTokenValue.js

@@ -1,8 +1,9 @@
-import t from "../config/tokens.js";
-function i(n, r) {
-  if (typeof n != "string") return !1;
-  const e = t[n];
-  return Array.isArray(e) ? typeof r == "number" ? e.includes(`${r}`) : e.includes(r) : !1;
+import { TOKENS as s } from "../config/index.js";
+function i(t, e) {
+  if (typeof t != "string") return !1;
+  typeof e == "number" && (e = `${e}`);
+  const r = s[t];
+  return r instanceof Set ? r.has(e) : Array.isArray(r) ? r.includes(e) : typeof r == "object" ? (r.values || /* @__PURE__ */ new Set()).has(e) : !1;
 }
 export {
   i as default

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lism-css",
-	"version": "0.3.5",
+	"version": "0.5.0",
 	"description": "A layout-first CSS framework for websites.",
 	"author": {
 		"name": "ddryo",
@@ -16,13 +16,20 @@
 		"dev": "vite",
 		"build": "vite build && pnpm build:css",
 		"build:vite": "vite build",
-		"build:css": "node scss-builder.cjs",
+		"build:css": "node bin/script-build-css.js",
 		"lint": "pnpm lint:style",
 		"lint:style": "stylelint '**/*.{css,scss}'",
 		"preview": "vite preview"
 	},
+	"bin": {
+		"lism-css": "./bin/cli.mjs"
+	},
 	"files": [
 		"dist",
+		"config",
+		"config.js",
+		"vite-plugin.js",
+		"bin",
 		"packages",
 		"src/scss"
 	],
@@ -31,7 +38,12 @@
 	"types": "./packages/types/index.d.ts",
 	"exports": {
 		".": "./dist/index.js",
-		"./*": "./dist/*",
+		"./config.js": "./config.js",
+		"./config": "./config/index.js",
+		"./default-config": "./config/default-config.js",
+		"./vite-plugin": "./vite-plugin.mjs",
+		"./lib/*": "./dist/lib/*",
+		"./components/*": "./dist/components/*",
 		"./react": {
 			"import": "./dist/index.js",
 			"types": "./packages/types/index.d.ts"
@@ -43,6 +55,7 @@
 			"types": "./packages/types/index.d.ts"
 		},
 		"./astro/*": "./packages/astro/*",
+		"./types": "./packages/types/index.d.ts",
 		"./scss/*": "./src/scss/*",
 		"./*.css": "./dist/css/*.css"
 	},

package/packages/astro/Accordion/AccBody.astro

@@ -1,15 +1,14 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
-import { Grid } from '../Grid';
 import { defaultProps } from '../../../dist/components/Accordion/getProps';
 
 interface Props extends LismProps {}
-const { isFlow, innerProps, ...props } = Astro.props || {};
+const { flow, innerProps, ...props } = Astro.props || {};
 ---
 
-<Grid {...defaultProps.body} {...props}>
-	<Lism isFlow={isFlow} {...defaultProps.inner} {...innerProps}>
+<Lism {...defaultProps.body} {...props}>
+	<Lism layout='flow' flow={flow} {...defaultProps.inner} {...innerProps}>
 		<slot />
 	</Lism>
-</Grid>
+</Lism>

package/packages/astro/Accordion/AccHeader.astro

@@ -1,6 +1,6 @@
 ---
-import type { LismProps } from '../types';
-import { Flex } from '../Flex';
+import type { LismProps } from '../../types';
+import { Lism } from '../Lism';
 import { defaultProps } from '../../../dist/components/Accordion/getProps';
 
 interface Props extends LismProps {}
@@ -8,6 +8,6 @@ interface Props extends LismProps {}
 const props = Astro.props || {};
 ---
 
-<Flex tag='summary' {...defaultProps.header} {...props}>
+<Lism tag='summary' {...defaultProps.header} {...props}>
 	<slot />
-</Flex>
+</Lism>

package/packages/astro/Accordion/AccHeaderLabel.astro

@@ -0,0 +1,12 @@
+---
+import AccHeader from './AccHeader.astro';
+import AccLabel from './AccLabel.astro';
+import AccIcon from './AccIcon.astro';
+---
+
+<AccHeader {...Astro.props || {}}>
+	<AccLabel>
+		<slot />
+	</AccLabel>
+	<AccIcon />
+</AccHeader>

package/packages/astro/Accordion/AccIcon.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 import { Icon } from '../Icon';
 import { getAccIconProps } from '../../../dist/components/Accordion/getProps';

package/packages/astro/Accordion/AccLabel.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
 import { defaultProps } from '../../../dist/components/Accordion/getProps';
 

package/packages/astro/Accordion/Accordion.astro

@@ -1,5 +1,5 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import getLismProps from '../../../dist/lib/getLismProps';
 import { getAccProps } from '../../../dist/components/Accordion/getProps';
 

package/packages/astro/Accordion/index.js

@@ -3,5 +3,6 @@ import Header from './AccHeader.astro';
 import Label from './AccLabel.astro';
 import Icon from './AccIcon.astro';
 import Body from './AccBody.astro';
+import HeaderLabel from './AccHeaderLabel.astro';
 
-export default { Root, Header, Body, Icon, Label };
+export default { Root, Header, HeaderLabel, Body, Icon, Label };

package/packages/astro/Box/Box.astro

@@ -1,11 +1,10 @@
 ---
-import type { LismProps } from '../types';
+import type { LismProps } from '../../types';
 import { Lism } from '../Lism';
-import getProps from '../../../dist/components/Box/getProps';
 
 // Propsの定義
 interface Props extends LismProps {}
 const props = Astro.props || {};
 ---
 
-<Lism {...getProps(props)}><slot /></Lism>
+<Lism layout='box' {...props}><slot /></Lism>