lism-css 0.3.5 → 0.5.0

package/dist/components/Tabs/getProps.js

@@ -1,12 +1,5 @@
 import a from "../../lib/helper/atts.js";
-function o({
-  lismClass: t,
-  // variant = 'default',
-  // isHorizontal,
-  // keepHeight,
-  // listProps = {},
-  ...s
-}) {
+function o({ lismClass: t, ...s }) {
   return {
     lismClass: a(t, "d--tabs"),
     ...s

package/dist/components/Tabs/index2.js

@@ -5,16 +5,16 @@ import v from "./TabItem.js";
 import P from "./TabList.js";
 import l from "./TabPanel.js";
 import g from "./getProps.js";
-import k from "../Grid/index.js";
-function q({ tabId: d = "", defaultIndex: x = 1, listProps: I = {}, children: n, ...u }) {
-  const [a, T] = e.useState(x), p = d || e.useId(), o = [], m = [];
+import k from "../Lism/index.js";
+function w({ tabId: x = "", defaultIndex: I = 1, listProps: d = {}, children: n, ...u }) {
+  const [a, T] = e.useState(I), p = x || e.useId(), r = [], m = [];
   return e.Children.forEach(n, (s, h) => {
     const t = h + 1;
-    e.isValidElement(s) && s.type === v && e.Children.forEach(s.props.children, (r) => {
-      if (e.isValidElement(r)) {
-        if (r.type === b) {
-          const i = r.props;
-          o.push(
+    e.isValidElement(s) && s.type === v && e.Children.forEach(s.props.children, (o) => {
+      if (e.isValidElement(o)) {
+        if (o.type === b) {
+          const i = o.props;
+          r.push(
             /* @__PURE__ */ f(
               b,
               {
@@ -27,31 +27,22 @@ function q({ tabId: d = "", defaultIndex: x = 1, listProps: I = {}, children: n,
               }
             )
           );
-        } else if (r.type === l) {
-          const i = r.props;
+        } else if (o.type === l) {
+          const i = o.props;
           m.push(
-            /* @__PURE__ */ f(
-              l,
-              {
-                ...i,
-                tabId: p,
-                index: t,
-                key: t,
-                isActive: t === a
-              }
-            )
+            /* @__PURE__ */ f(l, { ...i, tabId: p, index: t, key: t, isActive: t === a })
           );
         }
       }
     });
-  }), /* @__PURE__ */ c(k, { ...g(u), children: o.length === 0 ? (
+  }), /* @__PURE__ */ c(k, { ...g(u), children: r.length === 0 ? (
     // TabItemを使わず直接TabListなどを子要素に配置する場合
     n
   ) : /* @__PURE__ */ y(E, { children: [
-    /* @__PURE__ */ c(P, { ...I, children: o }),
+    /* @__PURE__ */ c(P, { ...d, children: r }),
     m
   ] }) });
 }
 export {
-  q as default
+  w as default
 };

package/dist/components/WithSide/index.js

@@ -1,9 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
-import { getWithSideProps as i } from "./getProps.js";
+import { jsx as i } from "react/jsx-runtime";
 import o from "../Lism/index.js";
-function p(r) {
-  return /* @__PURE__ */ t(o, { ...i(r) });
+function m(t) {
+  return /* @__PURE__ */ i(o, { layout: "withSide", ...t });
 }
 export {
-  p as default
+  m as default
 };

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

@@ -0,0 +1,13 @@
+import n from "../../../lib/helper/atts.js";
+import d from "../../getFilterProps.js";
+function c({ lismClass: f, size: r, clipPath: i, boxSizing: e, style: a = {}, ...t }) {
+  t = d(t), i && (a.clipPath = i), e && (a.boxSizing = e), r && (t.ar = "1/1", t.w = r), t.style = a;
+  const o = {
+    lismClass: n(f, "a--decorator"),
+    "aria-hidden": "true"
+  };
+  return Object.assign(o, t);
+}
+export {
+  c as default
+};

package/dist/components/{Decorator → atomic/Decorator}/index.js

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

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

@@ -0,0 +1,10 @@
+import e from "../../../lib/helper/atts.js";
+function s({ lismClass: r, ...t }) {
+  return { ...{
+    lismClass: e(r, "a--divider"),
+    "aria-hidden": "true"
+  }, ...t };
+}
+export {
+  s as getDividerProps
+};

package/dist/components/atomic/Divider/index.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+import { getDividerProps as o } from "./getProps.js";
+import t from "../../Lism/index.js";
+function p(r) {
+  return /* @__PURE__ */ i(t, { ...o(r) });
+}
+export {
+  p as default
+};

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

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

package/dist/components/{Icon → atomic/Icon}/index.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import f from "../../lib/getLismProps.js";
+import f from "../../../lib/getLismProps.js";
 import n from "./getProps.js";
 import s from "./SVG.js";
 function u({ children: m, ...p }) {

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

@@ -0,0 +1,9 @@
+import a from "../../../lib/helper/atts.js";
+import l from "../../getFilterProps.js";
+function f(e) {
+  const { objectPosition: i, objectFit: s, lismClass: r = "", style: t = {}, ...o } = e;
+  return i && (t.objectPosition = i), s && (t.objectFit = s), o.lismClass = a(r, "a--media"), o.style = t, l(o);
+}
+export {
+  f as default
+};

package/dist/components/atomic/Media/index.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "./getProps.js";
+import i from "../../Lism/index.js";
+function f(r) {
+  return /* @__PURE__ */ o(i, { tag: "img", ...t(r) });
+}
+export {
+  f as default
+};

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

@@ -0,0 +1,21 @@
+import s from "../../../lib/helper/atts.js";
+import u from "../../../lib/getBpData.js";
+import c from "../../../lib/getMaybeCssVar.js";
+function h({ lismClass: l, ...e }) {
+  const n = {
+    lismClass: s(l, "a--spacer"),
+    "aria-hidden": "true"
+  };
+  if (e.h != null) {
+    let t = u(e.h);
+    t = Object.entries(t).reduce((r, [a, i]) => (r[a] = c(i, "space"), r), {}), e.h = t;
+  }
+  if (e.w != null) {
+    let t = u(e.w);
+    t = Object.entries(t).reduce((r, [a, i]) => (r[a] = c(i, "space"), r), {}), e.w = t;
+  }
+  return { ...n, ...e };
+}
+export {
+  h as default
+};

package/dist/components/atomic/Spacer/index.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "./getProps.js";
+import m from "../../Lism/index.js";
+function i(r) {
+  return /* @__PURE__ */ o(m, { ...t(r) });
+}
+export {
+  i as default
+};

package/dist/components/getFilterProps.js

@@ -1,23 +1,13 @@
-const o = [
-  "blur",
-  "contrast",
-  "brightness",
-  "dropShadow",
-  "grayscale",
-  "hueRotate",
-  "invert",
-  "saturate",
-  "sepia"
-];
-function u({ css: a = {}, ...t }, r = "fltr") {
-  const n = [];
-  return a[r] == null && (o.forEach((e) => {
+const l = ["blur", "contrast", "brightness", "dropShadow", "grayscale", "hueRotate", "invert", "saturate", "sepia"];
+function c(o, a = "filter") {
+  const s = [], { style: r = {}, ...t } = o;
+  return l.forEach((e) => {
     if (t[e]) {
-      const l = e.replace(/([A-Z])/g, "-$1").toLowerCase();
-      n.push(`${l}(${t[e]})`), delete t[e];
+      const n = e.replace(/([A-Z])/g, "-$1").toLowerCase();
+      s.push(`${n}(${t[e]})`), delete t[e];
     }
-  }), n.length > 0 && (a[r] = n.join(" "))), t.css = a, t;
+  }), s.length > 0 && (r[a] = s.join(" ")), t.style = r, t;
 }
 export {
-  u as default
+  c as default
 };

package/dist/components/getLayoutProps.js

@@ -0,0 +1,27 @@
+import n from "../lib/helper/atts.js";
+import f from "../lib/isTokenValue.js";
+import s from "../lib/getMaybeCssVar.js";
+function d(e, i) {
+  if (!e || typeof e != "string") return i;
+  const {
+    lismClass: r,
+    //[layout]: variant,
+    ...t
+  } = i;
+  return t.lismClass = n(r, `l--${e}`), e === "flow" ? a(t) : e === "grid" ? u(t) : e === "withSide" ? l(t) : e === "columns" ? m(t) : t;
+}
+function u({ _propConfig: e = {}, ...i }) {
+  return e.gta = { isVar: 1 }, e.gtc = { isVar: 1 }, e.gtr = { isVar: 1 }, i._propConfig = e, i;
+}
+function l({ sideW: e, mainW: i, style: r = {}, ...t }) {
+  return e != null && (r["--sideW"] = s("sz", e)), i != null && (r["--mainW"] = s("sz", i)), t.style = r, t;
+}
+function m({ colSize: e, autoType: i, style: r = {}, ...t }) {
+  return e && (r["--colSize"] = e), i && (r["--autoType"] = i), t.style = r, t;
+}
+function a({ flow: e, style: i = {}, ...r }) {
+  return f("flow", e) ? r.lismClass = n(r.lismClass, `-flow:${e}`) : e && (i["--flow"] = s("space", e)), r.style = i, r;
+}
+export {
+  d as default
+};

package/dist/config/default-config.js

@@ -0,0 +1,11 @@
+import o from "./defaults/tokens.js";
+import t from "./defaults/props.js";
+import r from "./defaults/states.js";
+const s = {
+  tokens: o,
+  props: t,
+  states: r
+};
+export {
+  s as default
+};