lism-css 0.11.0 → 0.12.0

package/dist/components/{SwitchCols → layout/SwitchCols}/index.js

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

package/dist/components/layout/TileGrid/TileGrid.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { LayoutComponentProps } from '../../Lism';
+import { TileGridProps } from '../../../lib/types/LayoutProps';
+export default function TileGrid<T extends ElementType = 'div'>(props: LayoutComponentProps<T, TileGridProps>): import("react").JSX.Element;

package/dist/components/layout/TileGrid/index.d.ts

@@ -0,0 +1 @@
+export { default as TileGrid } from './TileGrid';

package/dist/components/layout/TileGrid/index.js

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

package/dist/components/{Container → state/Container}/Container.d.ts

@@ -1,4 +1,4 @@
-import { LismComponentProps } from '../Lism';
+import { LismComponentProps } from '../../Lism';
 type ContainerProps = LismComponentProps & {
     size?: LismComponentProps['isWrapper'];
 };

package/dist/components/{Container → state/Container}/index.js

@@ -1,5 +1,5 @@
 import { jsx as i } from "react/jsx-runtime";
-import o from "../Lism/index.js";
+import o from "../../Lism/index.js";
 function a({ size: r, ...t }) {
   return /* @__PURE__ */ i(o, { isContainer: !0, isWrapper: r, ...t });
 }

package/dist/components/{Layer → state/Layer}/Layer.d.ts

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import { LismComponentProps } from '../Lism';
+import { LismComponentProps } from '../../Lism';
 type LayerProps<T extends ElementType = 'div'> = LismComponentProps<T>;
 export default function Layer<T extends ElementType = 'div'>(props: LayerProps<T>): import("react").JSX.Element;
 export {};

package/dist/components/{Layer → state/Layer}/index.js

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

package/dist/components/{LinkBox → state/LinkBox}/LinkBox.d.ts

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import { LismComponentProps } from '../Lism';
+import { LismComponentProps } from '../../Lism';
 type LinkBoxProps<T extends ElementType = 'a'> = LismComponentProps<T>;
 export default function LinkBox<T extends ElementType = 'a'>({ as, children, ...props }: LinkBoxProps<T>): import("react").JSX.Element;
 export {};

package/dist/components/{LinkBox → state/LinkBox}/index.js

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

package/dist/components/{Wrapper → state/Wrapper}/Wrapper.d.ts

@@ -1,4 +1,4 @@
-import { LismComponentProps } from '../Lism';
+import { LismComponentProps } from '../../Lism';
 type WrapperProps = LismComponentProps & {
     contentSize?: LismComponentProps['isWrapper'];
 };

package/dist/components/{Wrapper → state/Wrapper}/index.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import e from "../Lism/index.js";
+import e from "../../Lism/index.js";
 function m({ contentSize: r, ...p }) {
   return /* @__PURE__ */ t(e, { isWrapper: r || !0, ...p });
 }

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

@@ -95,10 +95,7 @@ declare const _default: {
         };
         readonly d: {
             readonly prop: "display";
-            readonly presets: readonly ["none", "block"];
-            readonly utils: {
-                readonly 'in-flex': "inline-flex";
-            };
+            readonly presets: readonly ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"];
             readonly bp: 1;
         };
         readonly o: {
@@ -259,7 +256,7 @@ declare const _default: {
             readonly isVar: 1;
             readonly presets: readonly ["brand", "accent", "divider", "inherit", "transparent"];
             readonly utils: {
-                readonly cc: "currentColor";
+                readonly current: "currentColor";
             };
             readonly token: "color";
         };
@@ -350,11 +347,7 @@ declare const _default: {
         };
         readonly pos: {
             readonly prop: "position";
-            readonly presets: readonly ["static", "fixed", "sticky"];
-            readonly utils: {
-                readonly rel: "relative";
-                readonly abs: "absolute";
-            };
+            readonly presets: readonly ["static", "fixed", "sticky", "relative", "absolute"];
         };
         readonly z: {
             readonly prop: "zIndex";
@@ -572,12 +565,12 @@ declare const _default: {
             readonly overwriteBaseVar: 1;
             readonly bp: 1;
         };
-        readonly 'g-x': {
+        readonly cg: {
             readonly prop: "columnGap";
             readonly token: "space";
             readonly bp: 1;
         };
-        readonly 'g-y': {
+        readonly rg: {
             readonly prop: "rowGap";
             readonly token: "space";
             readonly bp: 1;
@@ -600,11 +593,7 @@ declare const _default: {
         };
         readonly fxd: {
             readonly prop: "flexDirection";
-            readonly utils: {
-                readonly col: "column";
-                readonly 'col-r': "column-reverse";
-                readonly 'row-r': "row-reverse";
-            };
+            readonly presets: readonly ["column", "column-reverse", "row-reverse"];
             readonly bp: 1;
         };
         readonly fx: {
@@ -626,12 +615,6 @@ declare const _default: {
         };
         readonly gt: {
             readonly prop: "gridTemplate";
-            readonly presets: readonly ["repeat"];
-            readonly exUtility: {
-                readonly repeat: {
-                    readonly 'grid-template': "repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)";
-                };
-            };
             readonly bp: 1;
         };
         readonly gta: {
@@ -650,10 +633,7 @@ declare const _default: {
         };
         readonly gaf: {
             readonly prop: "gridAutoFlow";
-            readonly utils: {
-                readonly row: "row";
-                readonly col: "column";
-            };
+            readonly presets: readonly ["row", "column"];
             readonly bp: 1;
         };
         readonly gac: {
@@ -697,67 +677,55 @@ declare const _default: {
         };
         readonly ai: {
             readonly prop: "alignItems";
-            readonly presets: readonly ["start", "center", "end", "stretch"];
-            readonly utils: {
-                readonly 'flex-s': "flex-start";
-                readonly 'flex-e': "flex-end";
-            };
+            readonly presets: readonly ["start", "center", "end", "stretch", "flex-start", "flex-end"];
             readonly shorthands: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
             readonly bp: 1;
         };
         readonly ac: {
             readonly prop: "alignContent";
-            readonly presets: readonly ["start", "center", "end"];
+            readonly presets: readonly ["start", "center", "end", "flex-start", "flex-end"];
             readonly utils: {
                 readonly between: "space-between";
-                readonly 'flex-s': "flex-start";
-                readonly 'flex-e': "flex-end";
             };
             readonly shorthands: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
             readonly bp: 1;
         };
         readonly ji: {
             readonly prop: "justifyItems";
-            readonly presets: readonly ["start", "center", "end", "stretch"];
-            readonly utils: {
-                readonly 'flex-s': "flex-start";
-                readonly 'flex-e': "flex-end";
-            };
+            readonly presets: readonly ["start", "center", "end", "stretch", "flex-start", "flex-end"];
             readonly shorthands: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
             readonly bp: 1;
         };
         readonly jc: {
             readonly prop: "justifyContent";
-            readonly presets: readonly ["start", "center", "end"];
+            readonly presets: readonly ["start", "center", "end", "flex-start", "flex-end"];
             readonly utils: {
                 readonly between: "space-between";
-                readonly 'flex-s': "flex-start";
-                readonly 'flex-e': "flex-end";
             };
             readonly shorthands: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
             readonly bp: 1;
         };
@@ -776,8 +744,8 @@ declare const _default: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
         };
         readonly jslf: {
@@ -787,8 +755,8 @@ declare const _default: {
                 readonly s: "start";
                 readonly e: "end";
                 readonly c: "center";
-                readonly fs: "flex-s";
-                readonly fe: "flex-e";
+                readonly fs: "flex-start";
+                readonly fe: "flex-end";
             };
         };
         readonly pslf: {
@@ -801,9 +769,7 @@ declare const _default: {
         };
         readonly ovwrap: {
             readonly prop: "overflowWrap";
-            readonly utils: {
-                readonly any: "anywhere";
-            };
+            readonly presets: readonly ["anywhere"];
         };
         readonly whspace: {
             readonly prop: "whiteSpace";
@@ -836,19 +802,6 @@ declare const _default: {
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
         readonly isVertical: "is--vertical";
-        readonly setGutter: "set--gutter";
-        readonly setShadow: "set--shadow";
-        readonly setHov: "set--hov";
-        readonly setTransition: "set--transition";
-        readonly setMask: {
-            readonly className: "set--mask";
-            readonly setStyles: (propVal: string) => {
-                '--maskImg': string;
-            };
-        };
-        readonly setPlain: "set--plain";
-        readonly setInnerRs: "set--innerRs";
-        readonly setBp: "set--bp";
     };
 };
 export default _default;

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

@@ -83,10 +83,7 @@ declare const _default: {
     };
     readonly d: {
         readonly prop: "display";
-        readonly presets: readonly ["none", "block"];
-        readonly utils: {
-            readonly 'in-flex': "inline-flex";
-        };
+        readonly presets: readonly ["none", "block", "flex", "inline-flex", "grid", "inline-grid", "inline", "inline-block"];
         readonly bp: 1;
     };
     readonly o: {
@@ -247,7 +244,7 @@ declare const _default: {
         readonly isVar: 1;
         readonly presets: readonly ["brand", "accent", "divider", "inherit", "transparent"];
         readonly utils: {
-            readonly cc: "currentColor";
+            readonly current: "currentColor";
         };
         readonly token: "color";
     };
@@ -338,11 +335,7 @@ declare const _default: {
     };
     readonly pos: {
         readonly prop: "position";
-        readonly presets: readonly ["static", "fixed", "sticky"];
-        readonly utils: {
-            readonly rel: "relative";
-            readonly abs: "absolute";
-        };
+        readonly presets: readonly ["static", "fixed", "sticky", "relative", "absolute"];
     };
     readonly z: {
         readonly prop: "zIndex";
@@ -560,12 +553,12 @@ declare const _default: {
         readonly overwriteBaseVar: 1;
         readonly bp: 1;
     };
-    readonly 'g-x': {
+    readonly cg: {
         readonly prop: "columnGap";
         readonly token: "space";
         readonly bp: 1;
     };
-    readonly 'g-y': {
+    readonly rg: {
         readonly prop: "rowGap";
         readonly token: "space";
         readonly bp: 1;
@@ -588,11 +581,7 @@ declare const _default: {
     };
     readonly fxd: {
         readonly prop: "flexDirection";
-        readonly utils: {
-            readonly col: "column";
-            readonly 'col-r': "column-reverse";
-            readonly 'row-r': "row-reverse";
-        };
+        readonly presets: readonly ["column", "column-reverse", "row-reverse"];
         readonly bp: 1;
     };
     readonly fx: {
@@ -614,12 +603,6 @@ declare const _default: {
     };
     readonly gt: {
         readonly prop: "gridTemplate";
-        readonly presets: readonly ["repeat"];
-        readonly exUtility: {
-            readonly repeat: {
-                readonly 'grid-template': "repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)";
-            };
-        };
         readonly bp: 1;
     };
     readonly gta: {
@@ -638,10 +621,7 @@ declare const _default: {
     };
     readonly gaf: {
         readonly prop: "gridAutoFlow";
-        readonly utils: {
-            readonly row: "row";
-            readonly col: "column";
-        };
+        readonly presets: readonly ["row", "column"];
         readonly bp: 1;
     };
     readonly gac: {
@@ -685,67 +665,55 @@ declare const _default: {
     };
     readonly ai: {
         readonly prop: "alignItems";
-        readonly presets: readonly ["start", "center", "end", "stretch"];
-        readonly utils: {
-            readonly 'flex-s': "flex-start";
-            readonly 'flex-e': "flex-end";
-        };
+        readonly presets: readonly ["start", "center", "end", "stretch", "flex-start", "flex-end"];
         readonly shorthands: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
         readonly bp: 1;
     };
     readonly ac: {
         readonly prop: "alignContent";
-        readonly presets: readonly ["start", "center", "end"];
+        readonly presets: readonly ["start", "center", "end", "flex-start", "flex-end"];
         readonly utils: {
             readonly between: "space-between";
-            readonly 'flex-s': "flex-start";
-            readonly 'flex-e': "flex-end";
         };
         readonly shorthands: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
         readonly bp: 1;
     };
     readonly ji: {
         readonly prop: "justifyItems";
-        readonly presets: readonly ["start", "center", "end", "stretch"];
-        readonly utils: {
-            readonly 'flex-s': "flex-start";
-            readonly 'flex-e': "flex-end";
-        };
+        readonly presets: readonly ["start", "center", "end", "stretch", "flex-start", "flex-end"];
         readonly shorthands: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
         readonly bp: 1;
     };
     readonly jc: {
         readonly prop: "justifyContent";
-        readonly presets: readonly ["start", "center", "end"];
+        readonly presets: readonly ["start", "center", "end", "flex-start", "flex-end"];
         readonly utils: {
             readonly between: "space-between";
-            readonly 'flex-s': "flex-start";
-            readonly 'flex-e': "flex-end";
         };
         readonly shorthands: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
         readonly bp: 1;
     };
@@ -764,8 +732,8 @@ declare const _default: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
     };
     readonly jslf: {
@@ -775,8 +743,8 @@ declare const _default: {
             readonly s: "start";
             readonly e: "end";
             readonly c: "center";
-            readonly fs: "flex-s";
-            readonly fe: "flex-e";
+            readonly fs: "flex-start";
+            readonly fe: "flex-end";
         };
     };
     readonly pslf: {
@@ -789,9 +757,7 @@ declare const _default: {
     };
     readonly ovwrap: {
         readonly prop: "overflowWrap";
-        readonly utils: {
-            readonly any: "anywhere";
-        };
+        readonly presets: readonly ["anywhere"];
     };
     readonly whspace: {
         readonly prop: "whiteSpace";

package/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/config/defaults/states.d.ts

@@ -12,18 +12,5 @@ declare const _default: {
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
     readonly isVertical: "is--vertical";
-    readonly setGutter: "set--gutter";
-    readonly setShadow: "set--shadow";
-    readonly setHov: "set--hov";
-    readonly setTransition: "set--transition";
-    readonly setMask: {
-        readonly className: "set--mask";
-        readonly setStyles: (propVal: string) => {
-            '--maskImg': string;
-        };
-    };
-    readonly setPlain: "set--plain";
-    readonly setInnerRs: "set--innerRs";
-    readonly setBp: "set--bp";
 };
 export default _default;