lism-css 0.8.4 → 0.9.1

package/config/__prop_list.js

@@ -1,4 +1,4 @@
-const PROPS = {
+const _PROPS = {
 	// size
 	// mask
 	// mski: { style: 'maskImage' },

package/config/defaults/__props-memo.js

@@ -1,12 +1,12 @@
 /**
-	--size-　→ --szー
+	--size- → --szー
 	トークンはハイフン二つ
 
-	globalトークン、　--target--　→ --target-　かな
-	→　--(\w)+?-- で検索。
+	globalトークン、 --target-- → --target- かな
+	→ --(\w)+?-- で検索。
 
 
-・flow, container →　l--、　frame→is--では？
+・flow, container → l--、 frame→is--では？
 ・普通のクラス設計、BEMにもどす
 
  */

package/config/defaults/props.ts

@@ -91,10 +91,10 @@ export default {
 
 	// bg
 	bg: { prop: 'background', bp: 1 },
-	// bgi: { prop: 'backgroundImage' },
-	// bgr: { prop: 'backgroundRepeat', utils: { no: 'no-repeat' } },
-	// bgp: { prop: 'backgroundPosition', presets: ['center'] },
-	// bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
+	bgi: { prop: 'backgroundImage' },
+	bgr: { prop: 'backgroundRepeat', presets: ['no-repeat'] },
+	bgp: { prop: 'backgroundPosition', presets: ['center'] },
+	bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
 	// bga: { prop: 'backgroundAttachment' }, // fixed
 	// bgo: { prop: 'backgroundOrigin' }, // border, padding, content
 	// bgblend: { prop: 'backgroundBlendMode' },

package/config/defaults/states.ts

@@ -6,7 +6,7 @@ export default {
 	isWrapper: {
 		className: 'is--wrapper',
 		preset: ['s', 'l'],
-		presetClass: '-content',
+		presetClass: '-contentSize',
 		customVar: '--contentSize',
 		tokenKey: 'sz',
 	},
@@ -15,16 +15,15 @@ export default {
 	isSide: 'is--side',
 	isSkipFlow: 'is--skipFlow',
 	isVertical: 'is--vertical',
-	hasGutter: 'has--gutter',
+	setGutter: 'set--gutter',
 
 	// set class
-	setShadow: 'set-shadow',
-	setHov: 'set-hov',
-	setTransition: 'set-transition',
-	setSnap: 'set-snap',
+	setShadow: 'set--shadow',
+	setHov: 'set--hov',
+	setTransition: 'set--transition',
 	setMask: {
-		// 'set-mask',
-		className: 'set-mask',
+		// 'set--mask',
+		className: 'set--mask',
 		setStyles: (propVal: string) => {
 			// minify化
 			// propVal = minifyHtml(propVal);
@@ -37,7 +36,9 @@ export default {
 			};
 		},
 	},
-	setPlain: 'set-plain',
-	// setRevert: 'set-revert',
-	setInnerRs: 'set-innerRs',
+	setPlain: 'set--plain',
+	// setRevert: 'set--revert',
+	setInnerRs: 'set--innerRs',
+	setBp: 'set--bp',
+	setCqUnit: 'set--cqUnit',
 } as const;

package/dist/components/Dummy/index.js

@@ -1,12 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
-import s from "./getContent.js";
+import g from "./getContent.js";
 import e from "../Lism/index.js";
-function d({ pre: i = "", length: a = "m", lang: o = "en", offset: r = 0, ...t }) {
-  const m = t.as || t.tag || "p";
+function d({ pre: i = "", length: o = "m", lang: r = "en", offset: s = 0, ...t }) {
+  const m = t.as || "p";
   if (m === "img")
     return /* @__PURE__ */ n(e, { as: "img", src: "https://cdn.lism-css.com/dummy-image.jpg", width: 600, height: 400, alt: "", ...t });
-  const g = s({ tag: m, pre: i, lang: o, length: a, offset: r });
-  return /* @__PURE__ */ n(e, { ...t, dangerouslySetInnerHTML: { __html: g } });
+  const a = g({ tag: m, pre: i, lang: r, length: o, offset: s });
+  return /* @__PURE__ */ n(e, { ...t, dangerouslySetInnerHTML: { __html: a } });
 }
 export {
   d as default

package/dist/components/LinkBox/index.js

@@ -1,9 +1,9 @@
 import { jsx as i } from "react/jsx-runtime";
-import e from "../Lism/index.js";
-function a({ children: t, ...r }) {
+import s from "../Lism/index.js";
+function n({ children: t, ...r }) {
   const o = !!r.href ? "a" : "div";
-  return /* @__PURE__ */ i(e, { isLinkBox: !0, tag: o, ...r, children: t });
+  return /* @__PURE__ */ i(s, { isLinkBox: !0, as: o, ...r, children: t });
 }
 export {
-  a as default
+  n as default
 };

package/dist/components/LinkBox/script.d.ts

@@ -1 +1,4 @@
+/**
+ * altKey押下時の処理 テスト用
+ */
 export default function enableSelectTextWithAltKeyAtLinkBox(): void;

package/dist/components/Lism/Lism.d.ts

@@ -1,12 +1,10 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode, JSX } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import { LismProps } from '../../lib/getLismProps';
 import { LayoutSpecificProps } from '../../lib/types/LayoutProps';
 /** HTML 要素 Props と共通オプションの基底型 */
 type LismBaseProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, keyof LismProps> & {
     /** レンダリングするコンポーネントまたは要素 */
     as?: T;
-    /** レンダリングするHTML要素のタグ名（文字列のみ）*/
-    tag?: keyof JSX.IntrinsicElements;
     /** 子要素 */
     children?: ReactNode;
     /** getLismProps を経由せずに直接渡す追加の props */
@@ -27,5 +25,5 @@ export type LayoutComponentProps<T extends ElementType = 'div', L = object> = Om
 /**
  * Lism Propsを処理できるだけのコンポーネント
  */
-export default function Lism<T extends ElementType = 'div'>({ children, as, tag, exProps, ...props }: LismComponentProps<T>): JSX.Element;
+export default function Lism<T extends ElementType = 'div'>({ children, as, exProps, ...props }: LismComponentProps<T>): import("react").JSX.Element;
 export {};

package/dist/components/Lism/Lism.stories.d.ts

@@ -629,7 +629,7 @@ declare const meta: {
                 category: string;
             };
         };
-        hasGutter: {
+        setGutter: {
             control: "boolean";
             table: {
                 category: string;

package/dist/components/Lism/index.js

@@ -1,8 +1,8 @@
-import { jsx as e } from "react/jsx-runtime";
-import i from "../../lib/getLismProps.js";
-function u({ children: o, as: t, tag: m, exProps: n, ...r }) {
-  return /* @__PURE__ */ e(t || m || "div", { ...i(r), ...n, children: o });
+import { jsx as r } from "react/jsx-runtime";
+import e from "../../lib/getLismProps.js";
+function f({ children: o, as: t, exProps: m, ...n }) {
+  return /* @__PURE__ */ r(t || "div", { ...e(n), ...m, children: o });
 }
 export {
-  u as default
+  f as default
 };

package/dist/components/atomic/Icon/getProps.d.ts

@@ -12,7 +12,7 @@ type IconOwnProps = {
     exProps?: Record<string, unknown>;
 };
 export type IconProps = LismComponentProps & TransformStyleProps & IconOwnProps;
-export default function getProps({ lismClass, as, tag, icon, label, exProps, ..._props }: IconProps): {
+export default function getProps({ lismClass, as, icon, label, exProps, ..._props }: IconProps): {
     Component: ElementType | "_SVG_";
     lismProps: {
         [key: string]: unknown;

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

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

package/dist/components/index.js

@@ -1,50 +1,50 @@
 import { default as o } from "./HTML/index.js";
-import { default as t } from "./Lism/index.js";
-import { default as l } from "./Dummy/index.js";
-import { default as m } from "./Container/index.js";
-import { default as u } from "./Wrapper/index.js";
-import { default as x } from "./Layer/index.js";
-import { default as n } from "./LinkBox/index.js";
-import { default as c } from "./Box/index.js";
-import { default as L } from "./Flow/index.js";
+import { default as t } from "./Box/index.js";
+import { default as l } from "./Center/index.js";
+import { default as m } from "./Cluster/index.js";
+import { default as u } from "./Columns/index.js";
+import { default as x } from "./Container/index.js";
+import { default as n } from "./atomic/Decorator/index.js";
+import { default as c } from "./atomic/Divider/index.js";
+import { default as L } from "./Dummy/index.js";
 import { default as D } from "./Flex/index.js";
-import { default as k } from "./Cluster/index.js";
-import { default as y } from "./Stack/index.js";
-import { default as h } from "./Grid/index.js";
-import { default as G } from "./FluidCols/index.js";
-import { default as I } from "./SwitchCols/index.js";
-import { default as W } from "./SideMain/index.js";
-import { default as g } from "./Center/index.js";
-import { default as q } from "./Columns/index.js";
-import { default as A } from "./Frame/index.js";
-import { default as J } from "./atomic/Decorator/index.js";
-import { default as N } from "./atomic/Divider/index.js";
-import { default as P } from "./atomic/Icon/index.js";
-import { default as R } from "./atomic/Media/index.js";
-import { default as V } from "./atomic/Spacer/index.js";
+import { default as k } from "./Flow/index.js";
+import { default as y } from "./FluidCols/index.js";
+import { default as h } from "./Frame/index.js";
+import { default as G } from "./Grid/index.js";
+import { default as I } from "./atomic/Icon/index.js";
+import { default as W } from "./Layer/index.js";
+import { default as g } from "./LinkBox/index.js";
+import { default as q } from "./Lism/index.js";
+import { default as A } from "./atomic/Media/index.js";
+import { default as J } from "./SideMain/index.js";
+import { default as N } from "./atomic/Spacer/index.js";
+import { default as P } from "./Stack/index.js";
+import { default as R } from "./SwitchCols/index.js";
+import { default as V } from "./Wrapper/index.js";
 export {
-  c as Box,
-  g as Center,
-  k as Cluster,
-  q as Columns,
-  m as Container,
-  J as Decorator,
-  N as Divider,
-  l as Dummy,
+  t as Box,
+  l as Center,
+  m as Cluster,
+  u as Columns,
+  x as Container,
+  n as Decorator,
+  c as Divider,
+  L as Dummy,
   D as Flex,
-  L as Flow,
-  G as FluidCols,
-  A as Frame,
-  h as Grid,
+  k as Flow,
+  y as FluidCols,
+  h as Frame,
+  G as Grid,
   o as HTML,
-  P as Icon,
-  x as Layer,
-  n as LinkBox,
-  t as Lism,
-  R as Media,
-  W as SideMain,
-  V as Spacer,
-  y as Stack,
-  I as SwitchCols,
-  u as Wrapper
+  I as Icon,
+  W as Layer,
+  g as LinkBox,
+  q as Lism,
+  A as Media,
+  J as SideMain,
+  N as Spacer,
+  P as Stack,
+  R as SwitchCols,
+  V as Wrapper
 };

package/dist/config/default-config.d.ts

@@ -205,6 +205,21 @@ declare const _default: {
             readonly prop: "background";
             readonly bp: 1;
         };
+        readonly bgi: {
+            readonly prop: "backgroundImage";
+        };
+        readonly bgr: {
+            readonly prop: "backgroundRepeat";
+            readonly presets: readonly ["no-repeat"];
+        };
+        readonly bgp: {
+            readonly prop: "backgroundPosition";
+            readonly presets: readonly ["center"];
+        };
+        readonly bgsz: {
+            readonly prop: "backgroundSize";
+            readonly presets: readonly ["cover", "contain"];
+        };
         readonly bgc: {
             readonly prop: "backgroundColor";
             readonly presets: readonly ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"];
@@ -811,7 +826,7 @@ declare const _default: {
         readonly isWrapper: {
             readonly className: "is--wrapper";
             readonly preset: readonly ["s", "l"];
-            readonly presetClass: "-content";
+            readonly presetClass: "-contentSize";
             readonly customVar: "--contentSize";
             readonly tokenKey: "sz";
         };
@@ -820,19 +835,20 @@ declare const _default: {
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
         readonly isVertical: "is--vertical";
-        readonly hasGutter: "has--gutter";
-        readonly setShadow: "set-shadow";
-        readonly setHov: "set-hov";
-        readonly setTransition: "set-transition";
-        readonly setSnap: "set-snap";
+        readonly setGutter: "set--gutter";
+        readonly setShadow: "set--shadow";
+        readonly setHov: "set--hov";
+        readonly setTransition: "set--transition";
         readonly setMask: {
-            readonly className: "set-mask";
+            readonly className: "set--mask";
             readonly setStyles: (propVal: string) => {
                 '--maskImg': string;
             };
         };
-        readonly setPlain: "set-plain";
-        readonly setInnerRs: "set-innerRs";
+        readonly setPlain: "set--plain";
+        readonly setInnerRs: "set--innerRs";
+        readonly setBp: "set--bp";
+        readonly setCqUnit: "set--cqUnit";
     };
 };
 export default _default;

package/dist/config/defaults/props.d.ts

@@ -193,6 +193,21 @@ declare const _default: {
         readonly prop: "background";
         readonly bp: 1;
     };
+    readonly bgi: {
+        readonly prop: "backgroundImage";
+    };
+    readonly bgr: {
+        readonly prop: "backgroundRepeat";
+        readonly presets: readonly ["no-repeat"];
+    };
+    readonly bgp: {
+        readonly prop: "backgroundPosition";
+        readonly presets: readonly ["center"];
+    };
+    readonly bgsz: {
+        readonly prop: "backgroundSize";
+        readonly presets: readonly ["cover", "contain"];
+    };
     readonly bgc: {
         readonly prop: "backgroundColor";
         readonly presets: readonly ["base", "base-2", "text", "brand", "accent", "inherit", "transparent"];

package/dist/config/defaults/props.js

@@ -67,10 +67,10 @@ const e = ["start", "center", "end"], r = { "flex-s": "flex-start", "flex-e": "f
   "max-ysz": { prop: "maxBlockSize", token: "sz" },
   // bg
   bg: { prop: "background", bp: 1 },
-  // bgi: { prop: 'backgroundImage' },
-  // bgr: { prop: 'backgroundRepeat', utils: { no: 'no-repeat' } },
-  // bgp: { prop: 'backgroundPosition', presets: ['center'] },
-  // bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
+  bgi: { prop: "backgroundImage" },
+  bgr: { prop: "backgroundRepeat", presets: ["no-repeat"] },
+  bgp: { prop: "backgroundPosition", presets: ["center"] },
+  bgsz: { prop: "backgroundSize", presets: ["cover", "contain"] },
   // bga: { prop: 'backgroundAttachment' }, // fixed
   // bgo: { prop: 'backgroundOrigin' }, // border, padding, content
   // bgblend: { prop: 'backgroundBlendMode' },

package/dist/config/defaults/states.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
     readonly isWrapper: {
         readonly className: "is--wrapper";
         readonly preset: readonly ["s", "l"];
-        readonly presetClass: "-content";
+        readonly presetClass: "-contentSize";
         readonly customVar: "--contentSize";
         readonly tokenKey: "sz";
     };
@@ -12,18 +12,19 @@ declare const _default: {
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
     readonly isVertical: "is--vertical";
-    readonly hasGutter: "has--gutter";
-    readonly setShadow: "set-shadow";
-    readonly setHov: "set-hov";
-    readonly setTransition: "set-transition";
-    readonly setSnap: "set-snap";
+    readonly setGutter: "set--gutter";
+    readonly setShadow: "set--shadow";
+    readonly setHov: "set--hov";
+    readonly setTransition: "set--transition";
     readonly setMask: {
-        readonly className: "set-mask";
+        readonly className: "set--mask";
         readonly setStyles: (propVal: string) => {
             '--maskImg': string;
         };
     };
-    readonly setPlain: "set-plain";
-    readonly setInnerRs: "set-innerRs";
+    readonly setPlain: "set--plain";
+    readonly setInnerRs: "set--innerRs";
+    readonly setBp: "set--bp";
+    readonly setCqUnit: "set--cqUnit";
 };
 export default _default;

package/dist/config/defaults/states.js

@@ -4,7 +4,7 @@ const a = {
   isWrapper: {
     className: "is--wrapper",
     preset: ["s", "l"],
-    presetClass: "-content",
+    presetClass: "-contentSize",
     customVar: "--contentSize",
     tokenKey: "sz"
   },
@@ -13,15 +13,14 @@ const a = {
   isSide: "is--side",
   isSkipFlow: "is--skipFlow",
   isVertical: "is--vertical",
-  hasGutter: "has--gutter",
+  setGutter: "set--gutter",
   // set class
-  setShadow: "set-shadow",
-  setHov: "set-hov",
-  setTransition: "set-transition",
-  setSnap: "set-snap",
+  setShadow: "set--shadow",
+  setHov: "set--hov",
+  setTransition: "set--transition",
   setMask: {
-    // 'set-mask',
-    className: "set-mask",
+    // 'set--mask',
+    className: "set--mask",
     setStyles: (e) => {
       let s = e;
       return s.startsWith("<svg") && (s = t(e, "base64")), {
@@ -29,9 +28,11 @@ const a = {
       };
     }
   },
-  setPlain: "set-plain",
-  // setRevert: 'set-revert',
-  setInnerRs: "set-innerRs"
+  setPlain: "set--plain",
+  // setRevert: 'set--revert',
+  setInnerRs: "set--innerRs",
+  setBp: "set--bp",
+  setCqUnit: "set--cqUnit"
 };
 export {
   a as default