@lism-css/ui 0.10.0 → 0.12.0

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

@@ -1,48 +1,62 @@
 "use client";
 import { jsx as m, jsxs as v, Fragment as E } from "react/jsx-runtime";
-import { useState as P, useId as g, Children as c, isValidElement as f, createElement as b } from "react";
-import k from "../../../lism-css/dist/components/Lism/index.js";
+import { useState as k, useId as A, Children as c, isValidElement as f, createElement as b } from "react";
+import j from "../../../lism-css/dist/components/Lism/index.js";
 import l from "./Tab.js";
-import A from "./TabItem.js";
-import j from "./TabList.js";
-import x from "./TabPanel.js";
-import F from "../getProps.js";
+import F from "./TabItem.js";
+import L from "./TabList.js";
+import I from "./TabPanel.js";
+import S from "../getProps.js";
 /* empty css            */
-function H({ tabId: I = "", defaultIndex: u = 1, listProps: T = {}, children: p, ...d }) {
-  const [i, y] = P(u), n = I || g(), r = [], a = [];
-  return c.forEach(p, (e, h) => {
-    const t = h + 1;
-    f(e) && e.type === A && c.forEach(e.props.children, (o) => {
-      if (f(o)) {
-        if (o.type === l) {
-          const s = o.props;
-          r.push(
-            /* @__PURE__ */ b(
-              l,
-              {
-                ...s,
-                tabId: n,
-                index: t,
-                key: t,
-                isActive: t === i,
-                onClick: () => y(t)
-              }
-            )
-          );
-        } else if (o.type === x) {
-          const s = o.props;
-          a.push(/* @__PURE__ */ b(x, { ...s, tabId: n, index: t, key: t, isActive: t === i }));
+function K({ tabId: d = "", defaultIndex: x = 1, listProps: u = {}, children: n, ...T }) {
+  const [p, h] = k(x), y = A(), i = d || y, e = [], a = [];
+  return c.forEach(n, (r, P) => {
+    const t = P + 1;
+    if (f(r) && r.type === F) {
+      const g = r.props;
+      c.forEach(g.children, (o) => {
+        if (f(o)) {
+          if (o.type === l) {
+            const s = o.props;
+            e.push(
+              /* @__PURE__ */ b(
+                l,
+                {
+                  ...s,
+                  tabId: i,
+                  index: t,
+                  key: t,
+                  isActive: t === p,
+                  onClick: () => h(t)
+                }
+              )
+            );
+          } else if (o.type === I) {
+            const s = o.props;
+            a.push(
+              /* @__PURE__ */ b(
+                I,
+                {
+                  ...s,
+                  tabId: i,
+                  index: t,
+                  key: t,
+                  isActive: t === p
+                }
+              )
+            );
+          }
         }
-      }
-    });
-  }), /* @__PURE__ */ m(k, { ...F(d), children: r.length === 0 ? (
+      });
+    }
+  }), /* @__PURE__ */ m(j, { ...S(T), children: e.length === 0 ? (
     // TabItemを使わず直接TabListなどを子要素に配置する場合
-    p
+    n
   ) : /* @__PURE__ */ v(E, { children: [
-    /* @__PURE__ */ m(j, { ...T, children: r }),
+    /* @__PURE__ */ m(L, { ...u, children: e }),
     a
   ] }) });
 }
 export {
-  H as default
+  K as default
 };

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

@@ -1,13 +1,13 @@
 import { default as Root } from './Tabs';
+import { default as Item } from './TabItem';
 import { default as List } from './TabList';
 import { default as Panel } from './TabPanel';
-import { default as Item } from './TabItem';
 import { default as Tab } from './Tab';
-declare namespace _default {
-    export { Root };
-    export { List };
-    export { Panel };
-    export { Item };
-    export { Tab };
-}
+declare const _default: {
+    Root: typeof Root;
+    List: typeof List;
+    Panel: typeof Panel;
+    Item: typeof Item;
+    Tab: typeof Tab;
+};
 export default _default;

package/dist/components/Tabs/setTabs.d.ts

@@ -1,2 +1,2 @@
+declare function setTabs(tabs: HTMLElement): void;
 export default setTabs;
-declare function setTabs(tabs: any): void;

package/dist/components/Tabs/setTabs.js

@@ -1,28 +1,38 @@
-function u(t) {
+function d(t) {
   t.preventDefault();
-  const r = t.currentTarget;
-  i(r);
+  const s = t.currentTarget;
+  u(s);
 }
-const i = (t) => {
+const u = (t) => {
   if (t.getAttribute("aria-selected") === "true") return;
-  const e = t.getAttribute("aria-controls"), n = document.getElementById(e);
-  if (n === null) return;
-  const s = t.parentNode.parentNode.querySelector('[aria-selected="true"]'), o = s.getAttribute("aria-controls"), a = document.getElementById(o);
-  t.setAttribute("aria-selected", "true"), s.setAttribute("aria-selected", "false"), a.setAttribute("aria-hidden", "true"), n.setAttribute("aria-hidden", "false");
+  const e = t.getAttribute("aria-controls");
+  if (!e) return;
+  const i = document.getElementById(e);
+  if (i === null) return;
+  const o = t.parentNode?.parentNode;
+  if (!o) return;
+  const a = o.querySelector('[aria-selected="true"]');
+  if (!a) return;
+  const r = a.getAttribute("aria-controls");
+  if (!r) return;
+  const n = document.getElementById(r);
+  t.setAttribute("aria-selected", "true"), a.setAttribute("aria-selected", "false"), n?.setAttribute("aria-hidden", "true"), i.setAttribute("aria-hidden", "false");
 };
-function b(t) {
-  t.querySelectorAll('button[role="tab"]').forEach((l) => {
-    l.addEventListener("click", function(d) {
-      u(d);
+function f(t) {
+  t.querySelectorAll('button[role="tab"]').forEach((c) => {
+    c.addEventListener("click", function(l) {
+      d(l);
     });
   });
   const e = window?.location?.href;
   if (!e || !(e.indexOf("?lism-tab=") !== -1)) return;
-  const o = new URL(e).searchParams.get("lism-tab"), a = t.querySelector(`[aria-controls="${o}"]`);
-  a && (t.dataset.hasTabLink = "1", i(a), setTimeout(() => {
+  const r = new URL(e).searchParams.get("lism-tab");
+  if (!r) return;
+  const n = t.querySelector(`[aria-controls="${r}"]`);
+  n && (t.dataset.hasTabLink = "1", u(n), setTimeout(() => {
     delete t.dataset.hasTabLink;
   }, 10));
 }
 export {
-  b as default
+  f as default
 };

package/dist/lism-css/dist/components/{Center → layout/Center}/index.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import o from "../Lism/index.js";
+import o from "../../Lism/index.js";
 function n(r) {
   return /* @__PURE__ */ t(o, { layout: "center", ...r });
 }

package/dist/lism-css/dist/components/{Flex → layout/Flex}/index.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function e(o) {
   return /* @__PURE__ */ r(t, { layout: "flex", ...o });
 }

package/dist/lism-css/dist/components/{Flow → layout/Flow}/index.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function m(o) {
   return /* @__PURE__ */ r(t, { layout: "flow", ...o });
 }

package/dist/lism-css/dist/components/{Frame → layout/Frame}/index.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function m(r) {
   return /* @__PURE__ */ o(t, { layout: "frame", ...r });
 }

package/dist/lism-css/dist/components/{Grid → layout/Grid}/index.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "../Lism/index.js";
+import t from "../../Lism/index.js";
 function m(r) {
   return /* @__PURE__ */ o(t, { layout: "grid", ...r });
 }

package/dist/lism-css/dist/components/{Stack → layout/Stack}/index.js

@@ -1,5 +1,5 @@
 import { jsx as o } from "react/jsx-runtime";
-import r from "../Lism/index.js";
+import r from "../../Lism/index.js";
 function m(t) {
   return /* @__PURE__ */ o(r, { layout: "stack", ...t });
 }

package/dist/lism-css/dist/config/defaults/props.js

@@ -1,4 +1,4 @@
-const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "flex-end" }, p = { s: "start", e: "end", c: "center", fs: "flex-s", fe: "flex-e" }, t = {
+const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "start", e: "end", c: "center", fs: "flex-start", fe: "flex-end" }, o = {
   f: { prop: "font", presets: ["inherit"] },
   fz: { prop: "fontSize", token: "fz", tokenClass: 1, bp: 1, alwaysVar: 1 },
   fw: {
@@ -30,8 +30,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // tsh: { prop: 'textShadow' },
   d: {
     prop: "display",
-    presets: ["none", "block"],
-    utils: { "in-flex": "inline-flex" },
+    presets: ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"],
     bp: 1
   },
   o: { prop: "opacity", presets: ["0"], token: "o", tokenClass: 1 },
@@ -108,7 +107,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   bdc: {
     isVar: 1,
     presets: ["brand", "accent", "divider", "inherit", "transparent"],
-    utils: { cc: "currentColor" },
+    utils: { current: "currentColor" },
     token: "color"
   },
   bdw: { isVar: 1, bp: 1 },
@@ -144,8 +143,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // position
   pos: {
     prop: "position",
-    presets: ["static", "fixed", "sticky"],
-    utils: { rel: "relative", abs: "absolute" }
+    presets: ["static", "fixed", "sticky", "relative", "absolute"]
   },
   z: { prop: "zIndex", presets: ["-1", "0", "1", "99"] },
   t: { prop: "top", utils: { 0: "0%" }, presets: ["50%", "100%"], token: "space" },
@@ -208,14 +206,14 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
     overwriteBaseVar: 1,
     bp: 1
   },
-  "g-x": { prop: "columnGap", token: "space", bp: 1 },
-  "g-y": { prop: "rowGap", token: "space", bp: 1 },
+  cg: { prop: "columnGap", token: "space", bp: 1 },
+  rg: { prop: "rowGap", token: "space", bp: 1 },
   cols: { isVar: 1, bp: 1 },
   rows: { isVar: 1, bp: 1 },
   // flex
   fxf: { prop: "flexFlow" },
   fxw: { prop: "flexWrap", presets: ["wrap"], bp: 1 },
-  fxd: { prop: "flexDirection", utils: { col: "column", "col-r": "column-reverse", "row-r": "row-reverse" }, bp: 1 },
+  fxd: { prop: "flexDirection", presets: ["column", "column-reverse", "row-reverse"], bp: 1 },
   fx: { prop: "flex", presets: ["1"], bp: 1 },
   fxg: { prop: "flexGrow", presets: ["1"] },
   fxsh: { prop: "flexShrink", presets: ["0"] },
@@ -224,12 +222,6 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // gd: { prop: 'grid' },
   gt: {
     prop: "gridTemplate",
-    presets: ["repeat"],
-    exUtility: {
-      repeat: {
-        "grid-template": "repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)"
-      }
-    },
     bp: 1
   },
   gta: { prop: "gridTemplateAreas", bp: 1 },
@@ -244,7 +236,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
     // exUtility: { repeat: { '--rows': '1', '--gtr': 'repeat(var(--rows), 1fr)' } },
     bp: 1
   },
-  gaf: { prop: "gridAutoFlow", utils: { row: "row", col: "column" }, bp: 1 },
+  gaf: { prop: "gridAutoFlow", presets: ["row", "column"], bp: 1 },
   //dense
   gac: { prop: "gridAutoColumns" },
   gar: { prop: "gridAutoRows" },
@@ -260,29 +252,27 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // -(ai|ac|ji|jc|aslf|jslf):   /    -$1:
   ai: {
     prop: "alignItems",
-    presets: [...e, "stretch"],
-    utils: r,
+    presets: [...e, "stretch", ...r],
     shorthands: p,
     bp: 1
   },
   ac: {
     prop: "alignContent",
-    presets: e,
-    utils: { ...r, between: "space-between" },
+    presets: [...e, ...r],
+    utils: { between: "space-between" },
     shorthands: p,
     bp: 1
   },
   ji: {
     prop: "justifyItems",
-    presets: [...e, "stretch"],
-    utils: r,
+    presets: [...e, "stretch", ...r],
     shorthands: p,
     bp: 1
   },
   jc: {
     prop: "justifyContent",
-    presets: e,
-    utils: { ...r, between: "space-between" },
+    presets: [...e, ...r],
+    utils: { between: "space-between" },
     shorthands: p,
     bp: 1
   },
@@ -328,7 +318,7 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   // 	},
   // },
   // others
-  ovwrap: { prop: "overflowWrap", utils: { any: "anywhere" } },
+  ovwrap: { prop: "overflowWrap", presets: ["anywhere"] },
   whspace: { prop: "whiteSpace", presets: ["nowrap"] },
   // wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
   float: { prop: "float", presets: ["left", "right"] },
@@ -336,5 +326,5 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   isolation: { prop: "isolation", presets: ["isolate"] }
 };
 export {
-  t as default
+  o as default
 };

package/dist/lism-css/dist/config/defaults/states.js

@@ -1,5 +1,4 @@
-import t from "../helper/getSvgUrl.js";
-const a = {
+const s = {
   isContainer: "is--container",
   isWrapper: {
     className: "is--wrapper",
@@ -12,28 +11,8 @@ const a = {
   isLinkBox: "is--linkBox",
   isSide: "is--side",
   isSkipFlow: "is--skipFlow",
-  isVertical: "is--vertical",
-  setGutter: "set--gutter",
-  // set class
-  setShadow: "set--shadow",
-  setHov: "set--hov",
-  setTransition: "set--transition",
-  setMask: {
-    // 'set--mask',
-    className: "set--mask",
-    setStyles: (e) => {
-      let s = e;
-      return s.startsWith("<svg") && (s = t(e, "base64")), {
-        "--maskImg": s
-      };
-    }
-  },
-  setPlain: "set--plain",
-  // setRevert: 'set--revert',
-  setInnerRs: "set--innerRs",
-  setBp: "set--bp",
-  setCqUnit: "set--cqUnit"
+  isVertical: "is--vertical"
 };
 export {
-  a as default
+  s as default
 };

package/dist/lism-css/dist/config/defaults/tokens.js

@@ -6,8 +6,8 @@ const e = {
   ff: ["base", "accent", "mono"],
   fw: ["light", "normal", "bold"],
   o: ["-10", "-20", "-30"],
-  bdrs: ["5", "10", "20", "30", "40", "50", "99", "inner"],
-  bxsh: ["5", "10", "20", "30", "40", "50"],
+  bdrs: ["10", "20", "30", "40", "99", "inner"],
+  bxsh: ["10", "20", "30", "40"],
   sz: ["xs", "s", "m", "l", "xl", "min", "full", "container"],
   ar: ["og"],
   space: {

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

@@ -7,22 +7,19 @@ function w(l, t) {
     ...t,
     lismClass: i(t.lismClass, `l--${l}`)
   };
-  return l === "flow" ? e(s) : l === "grid" ? f(s) : l === "sideMain" ? u(s) : l === "fluidCols" ? m(s) : l === "switchCols" ? c(s) : s;
+  return l === "flow" ? e(s) : l === "sideMain" ? u(s) : l === "fluidCols" ? f(s) : l === "switchCols" ? m(s) : s;
 }
-function f({ _propConfig: l = {}, ...t }) {
-  return l.gta = { isVar: 1 }, l.gtc = { isVar: 1 }, l.gtr = { isVar: 1 }, { ...t, _propConfig: l };
+function u({ sideW: l, mainW: t, style: s, ...r }) {
+  const n = { ...s };
+  return l != null && (n["--sideW"] = o(l, "sz")), t != null && (n["--mainW"] = o(t, "sz")), { ...r, style: n };
 }
-function u({ sideW: l, mainW: t, style: s, ...n }) {
-  const r = { ...s };
-  return l != null && (r["--sideW"] = o(l, "sz")), t != null && (r["--mainW"] = o(t, "sz")), { ...n, style: r };
-}
-function m({ autoFill: l, style: t, ...s }) {
+function f({ autoFill: l, style: t, ...s }) {
   return l ? { ...s, style: { ...t, "--autoMode": "auto-fill" } } : { ...s, style: t };
 }
 function e({ flow: l, style: t, ...s }) {
   return a("flow", l) ? s.lismClass = i(s.lismClass, `-flow:${l}`) : l && (s.lismClass = i(s.lismClass, "-flow:"), t = { ...t, "--flow": o(l, "space") }), { ...s, style: t };
 }
-function c({ breakSize: l, style: t, ...s }) {
+function m({ breakSize: l, style: t, ...s }) {
   return l ? { ...s, style: { ...t, "--breakSize": o(l, "sz") } } : { ...s, style: t };
 }
 export {