@lism-css/ui 0.9.1 → 0.9.3

package/dist/lism-css/dist/lib/getLismProps.js

@@ -0,0 +1,188 @@
+import { STATES as P, PROPS as S } from "../config/index.js";
+import j from "./getLayoutProps.js";
+import U from "./isPresetValue.js";
+import w from "./isTokenValue.js";
+import v from "./getUtilKey.js";
+import m from "./getMaybeCssVar.js";
+import z from "./getBpData.js";
+import E from "./helper/atts.js";
+import N from "./helper/isEmptyObj.js";
+import C from "./helper/filterEmptyObj.js";
+import k from "./helper/splitWithComma.js";
+const _ = (h) => {
+  const s = S[h];
+  return s && s?.token || "";
+};
+class x {
+  // propList = {};
+  className = "";
+  uClasses = [];
+  lismState = [];
+  styles = {};
+  attrs = {};
+  _propConfig;
+  constructor(s) {
+    const { forwardedRef: t, class: e, className: i, lismClass: o, variant: r, style: l = {}, _propConfig: n = {}, ...c } = s;
+    this.styles = { ...l }, this._propConfig = { ...n };
+    let f = o || "";
+    if (r && o) {
+      const y = o.split(" "), a = y[0], u = `${a}--${r}`;
+      f = [a, u, ...y.slice(1)].join(" ");
+    }
+    N(c) || (this.attrs = { ...c }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = E(i || e, f, this.lismState, this.uClasses);
+  }
+  analyzeState(s, t) {
+    const { className: e, preset: i, presetClass: o, customVar: r, tokenKey: l, setStyles: n } = s;
+    t === !0 ? this.lismState.push(e) : i && U(i, t) ? this.lismState.push(`${e} ${o}:${String(t)}`) : t && (this.lismState.push(e), l && r ? this.addStyle(r, m(t, l)) : n && typeof t == "string" && this.addStyles(n(t)));
+  }
+  // prop解析
+  analyzeProps() {
+    Object.keys(this.attrs).forEach((s) => {
+      if (Object.hasOwn(P, s)) {
+        const t = this.extractProp(s), e = P[s];
+        typeof e == "string" ? t && this.lismState.push(e) : this.analyzeState(e, t);
+      } else if (Object.hasOwn(S, s)) {
+        const t = this.attrs[s];
+        delete this.attrs[s], this.analyzeLismProp(s, t);
+      } else if (s === "hov") {
+        const t = this.extractProp(s);
+        this.setHovProps(t);
+      } else if (s === "css") {
+        const t = this.extractProp("css");
+        this.addStyles(t);
+      }
+    });
+  }
+  // Lism Prop 解析
+  analyzeLismProp(s, t) {
+    if (t == null) return;
+    let e = S[s] || null;
+    if (e === null) return;
+    this._propConfig?.[s] && (e = Object.assign({}, e, this._propConfig[s]));
+    const { base: i, ...o } = z(t);
+    this.setAttrs(s, i, e), Object.keys(o).forEach((r) => {
+      e && this.setAttrs(s, o[r], e, r);
+    });
+  }
+  addUtil(s) {
+    this.uClasses.push(s);
+  }
+  addUtils(s) {
+    this.uClasses.push(...s);
+  }
+  // addState(state) {
+  // 	this.stateClasses.push(state);
+  // }
+  addStyle(s, t) {
+    this.styles[s] = t;
+  }
+  addStyles(s) {
+    this.styles = { ...this.styles, ...s };
+  }
+  addAttrs(s) {
+    this.addStyles(s.styles || {}), this.addUtils(s.utils || []);
+  }
+  extractProp(s) {
+    const t = this.attrs[s];
+    return this.attrs[s] === void 0 ? null : (delete this.attrs[s], t);
+  }
+  extractProps(s) {
+    const t = {};
+    return s.forEach((e) => {
+      this.attrs[e] !== void 0 && (t[e] = this.attrs[e], delete this.attrs[e]);
+    }), t;
+  }
+  // utilクラスを追加するか、styleにセットするかの分岐処理 @base
+  // 値が null, undefined, '', false の時はスキップ
+  setAttrs(s, t, e = {}, i = "") {
+    if (t == null || t === "" || t === !1) return;
+    let o = `--${s}`, r = `-${String(e.utilKey || s)}`;
+    if (i && (o = `--${s}_${i}`, r += `_${i}`), typeof t == "string" && t.startsWith(":")) {
+      this.addUtil(`${r}:${t.replace(":", "")}`);
+      return;
+    }
+    if (!i) {
+      const { presets: u, tokenClass: O, utils: g, shorthands: b } = e;
+      if (u && U(u, t)) {
+        const d = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        d && this.addUtil(`${r}:${d}`);
+        return;
+      }
+      if (O && e.token && w(e.token, t)) {
+        const d = typeof t == "string" || typeof t == "number" ? String(t) : "";
+        d && this.addUtil(`${r}:${d}`);
+        return;
+      }
+      let p = "";
+      if (g && typeof t == "string" && (p = v(g, t)), !p && b && typeof t == "string" && (p = v(b, t, !0)), p) {
+        this.addUtil(`${r}:${p}`);
+        return;
+      }
+    }
+    if (t === !0 || t === "-") {
+      this.addUtil(r);
+      return;
+    }
+    const { prop: l, isVar: n, alwaysVar: c, token: f, bp: y } = e;
+    let a;
+    if (f && (typeof t == "string" || typeof t == "number") ? a = m(t, f) : typeof t == "string" || typeof t == "number" ? a = t : a = JSON.stringify(t), !i) {
+      if (n) {
+        this.addStyle(`--${s}`, a);
+        return;
+      } else if (!y && !c) {
+        this.addStyle(l, a);
+        return;
+      }
+    }
+    this.addUtil(r), this.addStyle(o, a);
+  }
+  // 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(s) {
+    s && (s === "-" || s === !0 ? this.addUtil("-hov") : typeof s == "string" ? k(s).forEach((t) => {
+      this.addUtil(`-hov:${t}`);
+    }) : typeof s == "object" && Object.keys(s).forEach((t) => {
+      const e = s[t];
+      if (!(e == null || e === "" || e === !1)) {
+        if (e === "-" || e === !0)
+          this.addUtil(`-hov:${t}`);
+        else if (t === "class")
+          k(e).forEach((i) => {
+            this.addUtil(`-hov:${i}`);
+          });
+        else if (typeof e == "string" || typeof e == "number") {
+          const i = m(e, _(t));
+          this.addUtil(`-hov:${t}`), this.addStyle(`--hov-${t}`, i);
+        }
+      }
+    }));
+  }
+}
+function q(h) {
+  if (Object.keys(h).length === 0)
+    return {};
+  const { layout: s, ...t } = h, e = new x(j(s, t));
+  return {
+    ...C({
+      className: e.className,
+      style: C(e.styles)
+    }),
+    ...e.attrs
+    // data-* などHTMLの標準属性はそのまま渡す
+  };
+}
+export {
+  x as LismPropsData,
+  q as default
+};

package/dist/lism-css/dist/lib/getMaybeCssVar.js

@@ -0,0 +1,37 @@
+import { TOKENS as t } from "../config/index.js";
+import a from "./helper/isNumStr.js";
+import o from "./getMaybeTokenValue.js";
+function m(e, n) {
+  if (!n) return String(e);
+  switch (n) {
+    case "space":
+      return c(e);
+    case "color":
+      return l(e);
+    case "bxsh":
+      return e === "0" || e === 0 ? "none" : o(n, e, t);
+    default:
+      return o(n, e, t);
+  }
+}
+function c(e) {
+  return e === 0 || e === "0" ? "0" : typeof e == "number" || a(e) ? `var(--s${e})` : typeof e == "string" && e.includes(" ") && !e.includes("calc(") && !e.includes("var(") && !e.includes(",") ? e.split(" ").map((n) => c(n)).join(" ") : String(e);
+}
+function l(e) {
+  if (typeof e == "string" && e.endsWith("%")) {
+    const n = e.split(":");
+    if (n.length === 3) {
+      const [i, s, r] = n;
+      return `color-mix(in srgb, ${o("color", i, t)} ${r}, ${o("color", s, t)})`;
+    } else if (n.length === 2) {
+      const [i, s] = n;
+      return `color-mix(in srgb, ${o("color", i, t)} ${s}, transparent)`;
+    }
+  }
+  return o("color", e, t);
+}
+export {
+  m as default,
+  l as getMaybeColorVar,
+  c as getMaybeSpaceVar
+};

package/dist/lism-css/dist/lib/getMaybeTokenValue.js

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

package/dist/lism-css/dist/lib/getUtilKey.js

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

package/dist/lism-css/dist/lib/helper/atts.js

@@ -0,0 +1,11 @@
+function i(...s) {
+  let e = [];
+  for (let r = 0; r < s.length; r++) {
+    const t = s[r];
+    t && (typeof t == "string" ? e.push(...t.trim().split(" ")) : typeof t == "number" ? e.push(t) : Array.isArray(t) ? e.push(...t.filter((n) => n != null)) : t instanceof Set ? e.push(...t) : typeof t == "object" && e.push(...Object.keys(t).filter((n) => !!t[n])));
+  }
+  return e = [...new Set(e)], e.join(" ").trim();
+}
+export {
+  i as default
+};

package/dist/lism-css/dist/lib/helper/filterEmptyObj.js

@@ -0,0 +1,10 @@
+import r from "./isEmptyObj.js";
+function c(o) {
+  const e = {};
+  for (const n in o)
+    o[n] === "" || o[n] === null || o[n] === void 0 || typeof o[n] == "object" && r(o[n]) || (e[n] = o[n]);
+  return e;
+}
+export {
+  c as default
+};

package/dist/lism-css/dist/lib/helper/hasSomeKeys.js

@@ -0,0 +1,6 @@
+function l(t, e) {
+  return t == null ? !1 : e.some((a) => Object.prototype.hasOwnProperty.call(t, a));
+}
+export {
+  l as default
+};

package/dist/lism-css/dist/lib/helper/isEmptyObj.js

@@ -0,0 +1,6 @@
+function t(e) {
+  return Object.keys(e).length < 1;
+}
+export {
+  t as default
+};

package/dist/lism-css/dist/lib/helper/isNumStr.js

@@ -0,0 +1,6 @@
+function e(t) {
+  return typeof t != "string" ? !1 : !isNaN(Number(t));
+}
+export {
+  e as default
+};

package/dist/lism-css/dist/lib/helper/splitWithComma.js

@@ -0,0 +1,6 @@
+function a(t) {
+  return Array.isArray(t) ? t : typeof t != "string" ? [] : t.split(",").map((r) => r.trim());
+}
+export {
+  a as default
+};

package/dist/lism-css/dist/lib/isPresetValue.js

@@ -0,0 +1,13 @@
+function s(e, t) {
+  let n;
+  if (typeof t == "number")
+    n = `${t}`;
+  else if (typeof t == "string")
+    n = t;
+  else
+    return !1;
+  return e instanceof Set ? e.has(n) : Array.isArray(e) ? e.includes(n) : !1;
+}
+export {
+  s as default
+};

package/dist/lism-css/dist/lib/isTokenValue.js

@@ -0,0 +1,27 @@
+import { TOKENS as f } from "../config/index.js";
+function s(i, n) {
+  let e;
+  if (typeof n == "number")
+    e = `${n}`;
+  else if (typeof n == "string")
+    e = n;
+  else
+    return !1;
+  if (!(i in f)) return !1;
+  const r = f[i];
+  if (r instanceof Set)
+    return r.has(e);
+  if (Array.isArray(r))
+    return r.includes(e);
+  if ("values" in r) {
+    const t = r.values;
+    if (t instanceof Set)
+      return t.has(e);
+    if (Array.isArray(t))
+      return t.includes(e);
+  }
+  return !1;
+}
+export {
+  s as default
+};

package/dist/ui.css

@@ -0,0 +1 @@
+@layer lism.modules{.c--accordion{--duration: var(--acc-duration, .25s)}.c--accordion_item{--_panel-h: 0px;--_icon-transform: rotate(0deg)}.c--accordion_item[data-opened]{--_icon-transform: rotate(90deg);--_panel-h: auto}.c--accordion_panel{height:var(--_panel-h);transition:height var(--duration)}[hidden]>.c--accordion_content{position:absolute}.c--accordion_icon{display:grid;width:1em;height:1em}.c--accordion_icon:before,.c--accordion_icon:after{content:"";display:block;grid-area:1 / 1;background-color:currentColor}.c--accordion_icon:before{width:.1em;height:100%;transition:transform var(--duration);transform:var(--_icon-transform)}.c--accordion_icon:after{height:.1em;width:100%}.c--accordion_button:focus-visible{outline:solid 2px currentColor;outline-color:revert;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.c--accordion_item{--duration: 0s}}@media(scripting:none){.c--accordion_panel{height:auto!important;content-visibility:visible!important}.c--accordion_content{position:static!important}}}@layer lism.modules{.c--details{--duration: var(--acc-duration, .25s);--_icon-scale: 1.1;--_icon-transform: rotate(0deg);--_content-gtr: 0fr}.c--details[open]{--_icon-transform: scaleY(-1);--_content-gtr: 1fr}.c--details_summary::-webkit-details-marker{display:none}.c--details_icon{--svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');display:inline-grid;background-color:currentColor;-webkit-mask:var(--svg) no-repeat center center / contain;mask:var(--svg) no-repeat center center / contain;scale:var(--_icon-scale);transition:transform var(--duration);transform:var(--_icon-transform)}.c--details::details-content{display:grid;grid-template-rows:var(--_content-gtr);transition-duration:var(--duration);transition-property:content-visibility,grid-template;transition-behavior:allow-discrete}.c--details_body{overflow:hidden}}@layer lism.modules{.c--modal{--flow: 0;--duration: var(--modal-duration, .4s);width:100%;height:100%;max-width:100%;max-height:100%;overflow:unset;background:var(--backdrop-bg, rgb(0 0 0 / .6));transition-duration:var(--duration);transition-property:opacity}.c--modal::backdrop{background:none}.c--modal[open]{display:flex;flex-direction:column;justify-content:center}.c--modal_inner{--offset: 0 0;background-color:var(--base);transition:translate var(--duration);max-height:100%}.c--modal:not([data-is-open]){opacity:0}.c--modal:not([data-is-open])>.c--modal_inner{translate:var(--offset)}}@layer lism.modules{.c--navMenu{--link-td: none;--hl: var(--hl--s);--_item-p: var(--s20);--focus-offset: -1px}.c--navMenu_nest{--_item-p: inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_nest,.c--navMenu_item{--bdc: inherit}}@layer lism.modules{.c--tabs{display:grid;grid:"list" "panel" / 100%}.c--tabs_list{grid-area:list;display:flex;overflow-x:auto}.c--tabs_tab[aria-selected=true]{--_notSelected: }.c--tabs_tab[aria-selected=false]{--_isSelected: }:where(.c--tabs_tab){color:var(--_notSelected, var(--text-2))}.c--tabs_panel{grid-area:panel;width:100%}.c--tabs_panel:where([aria-hidden=true]){display:none}}@layer lism.modules{.c--badge{--c: var(--base);--bgc: var(--text);--bdc: transparent;color:var(--c);background-color:var(--bgc);border:solid 1px var(--bdc)}.c--badge--outline{--c: var(--text);--bgc: transparent;--bdc: currentColor}}@layer lism.modules{.c--button{--c: var(--base);--bgc: var(--text);--bdc: var(--bgc);color:var(--c);background-color:var(--bgc);border:solid 1px var(--bdc);gap:var(--s10);text-decoration:none;place-content:center;place-items:center}.c--button--outline{--c: var(--text);--bgc: transparent;--bdc: var(--c)}:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}@layer lism.modules{.c--chat{--cbox-bgPct: 8%;--gta: "avatar name" "avatar body";--gtc: auto 1fr;--gtr: minmax(1.5rem, auto) auto;--_avator-size: clamp(48px, 32px + 5cqw, 64px);--_deco-size: calc(min(var(--_avator-size), 80px)/4 + .25rem) ;--_deco-mask: none;--_deco-t: 0;--_deco-scale: 1;--_deco-inset-x: 0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{top:var(--_deco-t);inset-inline:var(--_deco-inset-x);width:var(--_deco-size);height:var(--_deco-size);scale:var(--_deco-scale);-webkit-mask:var(--_deco-mask) center / contain no-repeat;mask:var(--_deco-mask) center / contain no-repeat}.c--chat--speak{--_deco-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x: auto calc(100% - 1px) }[data-chat-dir=end]{--_deco-scale: -1 1;--_deco-inset-x: calc(100% - 1px) auto;--gta: "name avatar" "body avatar";--gtc: 1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism.modules{.c--shapeDivider{--level: 0;--_inner-offset: 0px;--_inner-stretch: 1;--_flipX: 1;--_flipY: 1;height:clamp(calc(5px * var(--level)),calc(1cqw * var(--level)),calc(12px * var(--level)));overflow:visible}.c--shapeDivider:where([data-flip^=X]){--_flipX: -1}.c--shapeDivider:where([data-flip$=Y]){--_flipY: -1}.c--shapeDivider_inner{--offsetY: .5px;--offsetX: -.5px;height:100%;width:calc(100% + 1px);scale:calc(var(--_flipX) * var(--_inner-stretch)) var(--_flipY);translate:calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY) * var(--_flipY))}.c--shapeDivider_svg{display:block}:where([data-has-animation=true]) .c--shapeDivider_svg{transform-origin:100% 0;animation:lism--slideShape 12s infinite alternate linear}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translate(75%)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",
@@ -20,7 +20,7 @@
   "main": "./dist/index.js",
   "exports": {
     "./react": {
-      "import": "./src/components/react.js",
+      "import": "./dist/components/react.js",
       "types": "./dist/components/index.d.ts"
     },
     "./astro": {
@@ -39,7 +39,7 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.9.1"
+    "lism-css": "0.9.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.6",
@@ -51,9 +51,10 @@
     "@vitejs/plugin-react-swc": "^3.11.0",
     "glob": "^13.0.6",
     "rollup": "^4.59.0",
-    "typescript": "~5.8.3",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "typescript": "^5.8.3",
     "unplugin-dts": "1.0.0-beta.6",
-    "vite": "^6.4.1"
+    "vite": "^7.3.1"
   },
   "peerDependencies": {
     "@types/react": "*",

package/src/components/Accordion/react/Accordion.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+'use client';
+import { createContext, useRef, useId, useEffect, useContext } from 'react';
 import getLismProps from 'lism-css/lib/getLismProps';
 import { Lism, Stack } from 'lism-css/react';
 import { getRootProps, getItemProps, getHeadingProps, getPanelProps, defaultProps } from '../getProps';
@@ -9,7 +10,7 @@ import '../_style.css';
 
 // Context: 純粋なReact環境で AccordionItem → Button / Panel へ accID を共有
 // Astro 環境では Context が使えないため null がフォールバック
-const AccordionContext = React.createContext(null);
+const AccordionContext = createContext(null);
 
 /**
  * 複数の AccordionItem をラップするルート要素
@@ -23,13 +24,13 @@ export function AccordionRoot({ children, ...props }) {
  * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
  */
 export function AccordionItem({ children, ...props }) {
-	const ref = React.useRef(null);
+	const ref = useRef(null);
 
 	// コンポーネント単位でユニークIDを生成
-	const accID = React.useId();
+	const accID = useId();
 
 	// マウント時に開閉イベントを登録（アンマウント時にクリーンアップ）
-	React.useEffect(() => {
+	useEffect(() => {
 		if (!ref.current) return;
 		return setEvent(ref.current);
 	}, []);
@@ -58,7 +59,7 @@ export function Heading({ children, ...props }) {
  * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
  */
 export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }) {
-	const ctx = React.useContext(AccordionContext);
+	const ctx = useContext(AccordionContext);
 	const accID = ctx?.accID || _accID;
 
 	return (
@@ -73,7 +74,7 @@ export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }
  * パネル
  */
 export function Panel({ children, ...props }) {
-	const ctx = React.useContext(AccordionContext);
+	const ctx = useContext(AccordionContext);
 	const { panelProps, contentProps } = getPanelProps({ _contextID: ctx?.accID, ...props });
 
 	return (

package/src/components/Modal/react/Modal.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+'use client';
+import { useRef, useEffect } from 'react';
 import { Lism } from 'lism-css/react';
 import { setEvent } from '../setModal';
 import { getProps } from '../getProps';
@@ -7,8 +8,8 @@ import '../_style.css';
 
 // duration: [s]
 const Modal = ({ children, ...props }) => {
-	const ref = React.useRef(null);
-	React.useEffect(() => {
+	const ref = useRef(null);
+	useEffect(() => {
 		if (!ref?.current) return;
 		return setEvent(ref?.current);
 	}, [ref]);

package/src/components/Tabs/react/Tabs.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+'use client';
+import { useState, useId, Children, isValidElement } from 'react';
 import { Lism } from 'lism-css/react';
 import Tab from './Tab';
 import TabItem from './TabItem';
@@ -10,19 +11,19 @@ import getTabsProps from '../getProps';
 import '../_style.css';
 
 export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }) {
-	const [activeIndex, setActiveIndex] = React.useState(defaultIndex);
-	const theTabId = tabId || React.useId();
+	const [activeIndex, setActiveIndex] = useState(defaultIndex);
+	const theTabId = tabId || useId();
 	const btns = [];
 	const panels = [];
 
 	// Tabs.Item の処理
-	React.Children.forEach(children, (child, index) => {
+	Children.forEach(children, (child, index) => {
 		const tabIndex = index + 1; // 1 はじまり
-		// console.log('child.type', React.isValidElement(child), child.type);
+		// console.log('child.type', isValidElement(child), child.type);
 
-		if (React.isValidElement(child) && child.type === TabItem) {
-			React.Children.forEach(child.props.children, (nestedChild) => {
-				if (React.isValidElement(nestedChild)) {
+		if (isValidElement(child) && child.type === TabItem) {
+			Children.forEach(child.props.children, (nestedChild) => {
+				if (isValidElement(nestedChild)) {
 					if (nestedChild.type === Tab) {
 						const tabProps = nestedChild.props;
 						btns.push(