lism-css 0.8.3 → 0.9.0

package/dist/components/atomic/Decorator/Decorator.d.ts

@@ -1 +1,2 @@
-export default function Decorator(props: any): import("react").JSX.Element;
+import { DecoratorProps } from './getProps';
+export default function Decorator(props: DecoratorProps): import("react").JSX.Element;

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

@@ -1,13 +1,11 @@
-export default function _default({ lismClass, size, clipPath, boxSizing, style, ...props }: {
-    [x: string]: any;
-    lismClass: any;
-    size: any;
-    clipPath: any;
-    boxSizing: any;
-    style?: {} | undefined;
-}): {
-    lismClass: string;
-    'aria-hidden': string;
-} & {
-    [x: string]: any;
+import { FilterProps } from '../../getFilterProps';
+import { TransformStyleProps } from '../../setMaybeTransformStyles';
+import { LismComponentProps } from '../../Lism/Lism';
+type DecoratorOwnProps = {
+    size?: string;
+    clipPath?: string;
+    boxSizing?: string;
 };
+export type DecoratorProps = LismComponentProps & TransformStyleProps & FilterProps & DecoratorOwnProps;
+export default function getDecoratorProps({ lismClass, size, clipPath, boxSizing, style: outerStyle, ...rest }: DecoratorProps): LismComponentProps;
+export {};

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

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

package/dist/components/atomic/Divider/Divider.d.ts

@@ -1 +1,2 @@
-export default function Divider(props: any): import("react").JSX.Element;
+import { LismComponentProps } from '../../Lism/Lism';
+export default function Divider(props: LismComponentProps): import("react").JSX.Element;

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

@@ -1,7 +1,2 @@
-export function getDividerProps({ lismClass, ...props }: {
-    [x: string]: any;
-    lismClass: any;
-}): {
-    lismClass: string;
-    'aria-hidden': string;
-};
+import { LismComponentProps } from '../../Lism/Lism';
+export declare function getDividerProps({ lismClass, ...props }: LismComponentProps): LismComponentProps;

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

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

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

@@ -1,4 +1,5 @@
-export default function Icon({ children, ...props }: {
-    [x: string]: any;
-    children: any;
+import { IconProps } from './getProps';
+import { ReactNode } from 'react';
+export default function Icon({ children, ...props }: IconProps & {
+    children?: ReactNode;
 }): import("react").JSX.Element;

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

@@ -1,9 +1,8 @@
-export default function SVG({ size, fill, viewBox, path, children, __html, ...props }: {
-    [x: string]: any;
-    size?: string | undefined;
-    fill?: string | undefined;
-    viewBox?: string | undefined;
-    path: any;
-    children: any;
-    __html: any;
-}): import("react").JSX.Element;
+import { SVGProps } from 'react';
+type SVGComponentProps = SVGProps<SVGSVGElement> & {
+    size?: string;
+    path?: string;
+    __html?: string;
+};
+export default function SVG({ size, fill, viewBox, path, children, __html, ...props }: SVGComponentProps): import("react").JSX.Element;
+export {};

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

@@ -1,14 +1,23 @@
-export default function getProps({ lismClass, as, tag, icon, label, exProps, ..._props }: {
-    [x: string]: any;
-    lismClass: any;
-    as: any;
-    tag: any;
-    icon: any;
-    label: any;
-    exProps?: {} | undefined;
-}): {
-    Component: any;
-    lismProps: any;
-    exProps: {};
+import { LismComponentProps } from '../../Lism/Lism';
+import { TransformStyleProps } from '../../setMaybeTransformStyles';
+import { ElementType } from 'react';
+type IconObject = {
+    as: ElementType;
+    [key: string]: unknown;
+};
+type IconProp = ElementType | IconObject;
+type IconOwnProps = {
+    icon?: IconProp;
+    label?: string;
+    exProps?: Record<string, unknown>;
+};
+export type IconProps = LismComponentProps & TransformStyleProps & IconOwnProps;
+export default function getProps({ lismClass, as, tag, icon, label, exProps, ..._props }: IconProps): {
+    Component: ElementType | "_SVG_";
+    lismProps: {
+        [key: string]: unknown;
+    };
+    exProps: Record<string, unknown>;
     content: string;
 };
+export {};

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

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

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

@@ -1,11 +1,12 @@
-import { jsx as i } from "react/jsx-runtime";
-import f from "../../../lib/getLismProps.js";
-import n from "./getProps.js";
-import s from "./SVG.js";
-function u({ children: m, ...p }) {
-  let { Component: o, lismProps: e, exProps: r = {}, content: t } = n(p);
-  return o === "_SVG_" && (o = s, t && (r.__html = t)), /* @__PURE__ */ i(o, { ...f(e), ...r, children: m });
+import { jsx as s } from "react/jsx-runtime";
+import i from "../../../lib/getLismProps.js";
+import f from "./getProps.js";
+import l from "./SVG.js";
+function x({ children: m, ...n }) {
+  const { Component: t, lismProps: p, exProps: r = {}, content: e } = f(n);
+  let o;
+  return t === "_SVG_" ? (o = l, e && (r.__html = e)) : o = t, /* @__PURE__ */ s(o, { ...i(p), ...r, children: m });
 }
 export {
-  u as default
+  x as default
 };

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

@@ -1,4 +1,4 @@
-export const phIcons: {
+export declare const phIcons: {
     folder: {
         viewBox: string;
         path: string;
@@ -180,7 +180,7 @@ export const phIcons: {
         path: string;
     };
 };
-export const logoIcons: {
+export declare const logoIcons: {
     'logo-facebook': {
         viewBox: string;
         path: string;

package/dist/components/atomic/Media/Media.d.ts

@@ -1 +1,2 @@
-export default function Media(props: any): import("react").JSX.Element;
+import { MediaProps } from './getProps';
+export default function Media(props: MediaProps): import("react").JSX.Element;

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

@@ -1 +1,9 @@
-export default function getMediaProps(props: any): any;
+import { LismComponentProps } from '../../Lism/Lism';
+import { CSSProperties } from 'react';
+type MediaOwnProps = {
+    objectPosition?: CSSProperties['objectPosition'];
+    objectFit?: CSSProperties['objectFit'];
+};
+export type MediaProps = LismComponentProps & MediaOwnProps;
+export default function getMediaProps({ objectPosition, objectFit, lismClass, style, ...rest }: MediaProps): LismComponentProps;
+export {};

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

@@ -1,9 +1,8 @@
-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);
+import e from "../../../lib/helper/atts.js";
+import f from "../../getFilterProps.js";
+function s({ objectPosition: i, objectFit: t, lismClass: o, style: r = {}, ...a }) {
+  return i && (r.objectPosition = i), t && (r.objectFit = t), f({ ...a, lismClass: e(o, "a--media"), style: r });
 }
 export {
-  f as default
+  s as default
 };

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

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

package/dist/components/atomic/Spacer/Spacer.d.ts

@@ -1 +1,2 @@
-export default function Spacer(props: any): import("react").JSX.Element;
+import { LismComponentProps } from '../../Lism/Lism';
+export default function Spacer(props: LismComponentProps): import("react").JSX.Element;

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

@@ -1,7 +1,2 @@
-export default function getSpacerProps({ lismClass, ...props }: {
-    [x: string]: any;
-    lismClass: any;
-}): {
-    lismClass: string;
-    'aria-hidden': string;
-};
+import { LismComponentProps } from '../../Lism/Lism';
+export default function getSpacerProps({ lismClass, ...props }: LismComponentProps): LismComponentProps;

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

@@ -8,11 +8,17 @@ function h({ lismClass: l, ...e }) {
   };
   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;
+    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;
+    t = Object.entries(t).reduce(
+      (r, [a, i]) => (r[a] = c(i, "space"), r),
+      {}
+    ), e.w = t;
   }
   return { ...n, ...e };
 }

package/dist/components/getFilterProps.d.ts

@@ -1 +1,10 @@
-export default function getFilterProps(props: any, filterType?: string): any;
+import { LismProps } from '../lib/getLismProps';
+import { StyleWithCustomProps } from '../lib/types';
+type FilterName = 'blur' | 'contrast' | 'brightness' | 'dropShadow' | 'grayscale' | 'hueRotate' | 'invert' | 'saturate' | 'sepia';
+export type FilterProps = {
+    [K in FilterName]?: string | number;
+};
+export default function getFilterProps(props: LismProps & FilterProps, filterType?: string): LismProps & {
+    style: StyleWithCustomProps;
+};
+export {};

package/dist/components/getFilterProps.js

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

package/dist/components/getFilterProps.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/index.js

@@ -1,54 +1,50 @@
 import { default as o } from "./HTML/index.js";
-import { default as t } from "./Lism/index.js";
-import { default as l } from "./Lism/Text.js";
-import { default as m } from "./Lism/Link.js";
-import { default as u } from "./Dummy/index.js";
-import { default as p } from "./Container/index.js";
-import { default as n } from "./Wrapper/index.js";
-import { default as c } from "./Layer/index.js";
-import { default as F } from "./LinkBox/index.js";
-import { default as k } from "./Box/index.js";
-import { default as M } from "./Flow/index.js";
-import { default as y } from "./Flex/index.js";
-import { default as T } from "./Cluster/index.js";
-import { default as v } from "./Stack/index.js";
-import { default as H } from "./Grid/index.js";
-import { default as W } from "./FluidCols/index.js";
-import { default as g } from "./SwitchCols/index.js";
-import { default as q } from "./SideMain/index.js";
-import { default as A } from "./Center/index.js";
-import { default as J } from "./Columns/index.js";
-import { default as N } from "./Frame/index.js";
-import { default as P } from "./atomic/Decorator/index.js";
-import { default as R } from "./atomic/Divider/index.js";
-import { default as V } from "./atomic/Icon/index.js";
-import { default as Y } from "./atomic/Media/index.js";
-import { default as _ } from "./atomic/Spacer/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 "./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 {
-  k as Box,
-  A as Center,
-  T as Cluster,
-  J as Columns,
-  p as Container,
-  P as Decorator,
-  R as Divider,
-  u as Dummy,
-  y as Flex,
-  M as Flow,
-  W as FluidCols,
-  N as Frame,
-  H as Grid,
+  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,
+  k as Flow,
+  y as FluidCols,
+  h as Frame,
+  G as Grid,
   o as HTML,
-  V as Icon,
-  c as Layer,
-  m as Link,
-  F as LinkBox,
-  t as Lism,
-  Y as Media,
-  q as SideMain,
-  _ as Spacer,
-  v as Stack,
-  g as SwitchCols,
-  l as Text,
-  n 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/components/setMaybeTransformStyles.d.ts

@@ -1 +1,12 @@
-export default function setMaybeTransformStyles(props: any): any;
+import { StyleWithCustomProps } from '../lib/types';
+export type TransformStyleProps = {
+    translate?: string;
+    rotate?: string;
+    scale?: string;
+    transform?: string;
+};
+type TransformKeys = keyof TransformStyleProps;
+export default function setMaybeTransformStyles<P extends object>(props: P): Omit<P, TransformKeys> & {
+    style: StyleWithCustomProps;
+};
+export {};

package/dist/components/setMaybeTransformStyles.js

@@ -1,7 +1,7 @@
-function l(n) {
-  const { style: t = {}, translate: e, rotate: a, scale: r, transform: s, ...f } = n;
-  return e && (t.translate = e), a && (t.rotate = a), r && (t.scale = r), s && (t.transform = s), f.style = t, f;
+function o(n) {
+  const { translate: e, rotate: s, scale: a, transform: r, style: f, ...l } = n, t = f ?? {};
+  return e && (t.translate = e), s && (t.rotate = s), a && (t.scale = a), r && (t.transform = r), { ...l, style: t };
 }
 export {
-  l as default
+  o as default
 };

package/dist/components/setMaybeTransformStyles.test.d.ts

@@ -0,0 +1 @@
+export {};