@rolster/react-components 18.22.4 → 18.22.5

package/dist/esm/components/atoms/Image/Image.css

@@ -1,8 +1,24 @@
 .rls-image {
-  content-visibility: auto;
-  background-color: var(--rls-theme-color-600);
-  opacity: 0;
+  --pvt-background: transparent;
+  --pvt-width: var(--rlc-image-width, 100%);
+  --pvt-height: var(--rlc-image-height, 100%);
+  --pvt-img-display: none;
+  --rlc-skeleton-width: var(--pvt-width);
+  --rlc-skeleton-height: var(--pvt-height);
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  overflow: hidden;
 }
 .rls-image--complet {
-  opacity: 1;
+  --pvt-img-display: block;
+  background: var(--pvt-background);
+}
+.rls-image[rls-theme] {
+  --pvt-background: var(--rls-theme-color-600);
+}
+.rls-image > img {
+  display: var(--pvt-img-display);
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  content-visibility: auto;
 } /*# sourceMappingURL=Image.css.map */

package/dist/esm/components/atoms/Image/Image.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Image/Image.scss"],"names":[],"mappings":"AAOA,WACE,wBACA,4CACA,UAEA,oBACE","file":"Image.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Image/Image.scss"],"names":[],"mappings":"AAOA,WACE,8BACA,0CACA,4CACA,wBAEA,uCACA,yCAEA,uBACA,yBACA,gBAEA,oBACE,yBAEA,iCAGF,sBACE,6CAGF,eACE,+BACA,uBACA,yBACA","file":"Image.css"}

package/dist/esm/components/atoms/Image/Image.d.ts

@@ -1,6 +1,7 @@
+import { RlsComponent } from '../../definitions';
 import './Image.css';
-interface ImageProps {
+interface ImageProps extends RlsComponent {
     src: Undefined<string>;
 }
-export declare function RlsImage({ src }: ImageProps): import("react/jsx-runtime").JSX.Element;
+export declare function RlsImage({ src, rlsTheme }: ImageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/atoms/Image/Image.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { renderClassStatus } from '../../../helpers';
+import { RlsSkeleton } from '../Skeleton/Skeleton';
 import './Image.css';
-export function RlsImage({ src }) {
+export function RlsImage({ src, rlsTheme }) {
     const [isComplet, setIsComplet] = useState(false);
     const refSrc = useRef(src);
     const className = useMemo(() => {
@@ -17,6 +18,6 @@ export function RlsImage({ src }) {
     const onLoad = useCallback(() => {
         setIsComplet(true);
     }, []);
-    return _jsx("img", { className: className, src: src, onLoad: onLoad });
+    return (_jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!isComplet && _jsx(RlsSkeleton, { rlsTheme: rlsTheme }), _jsx("img", { src: src, onLoad: onLoad })] }));
 }
 //# sourceMappingURL=Image.js.map

package/dist/esm/components/atoms/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Image/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,aAAa,CAAC;AAMrB,MAAM,UAAU,QAAQ,CAAC,EAAE,GAAG,EAAc;IAC1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,iBAAiB,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,OAAO,KAAK,GAAG,EAAE,CAAC;YAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,cAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACjE,CAAC"}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Image/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,aAAa,CAAC;AAMrB,MAAM,UAAU,QAAQ,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAc;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAE3B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,iBAAiB,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,OAAO,KAAK,GAAG,EAAE,CAAC;YAC3B,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,MAAM,CAAC,OAAO,GAAG,GAAG,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,eAAa,QAAQ,aAC3C,CAAC,SAAS,IAAI,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,GAAI,EAClD,cAAK,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,GAAI,IAC7B,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/Skeleton/Skeleton.css

@@ -2,36 +2,34 @@
   --pvt-height: var(--rlc-skeleton-height, inherit);
   --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
   --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
+  --pvt-color-primary: var(--rls-app-color-100);
+  --pvt-color-secondary: var(--rls-app-color-200);
   position: relative;
   width: 100%;
+  height: var(--pvt-height);
   max-height: var(--pvt-max-height);
   min-height: var(--pvt-min-height);
-  height: var(--pvt-height);
   line-height: var(--pvt-height);
-  letter-spacing: inherit;
-  overflow: hidden;
-  background: var(--rls-theme-color-100);
-  border-radius: var(--rls-sizing-x2);
-}
-.rls-skeleton::after {
-  position: absolute;
-  content: '';
-  top: 0rem;
-  right: 0rem;
-  bottom: 0rem;
-  left: 0rem;
-  transform: translateX(-100%);
-  background-image: linear-gradient(
+  background: linear-gradient(
     90deg,
-    var(--rls-theme-skeleton-200) 0%,
-    var(--rls-theme-skeleton-200) 20%,
-    var(--rls-theme-skeleton-300) 60%,
-    var(--rls-theme-skeleton-200)
+    var(--pvt-color-primary) 25%,
+    var(--pvt-color-secondary) 50%,
+    var(--pvt-color-primary) 75%
   );
+  overflow: hidden;
+  background-size: 200% 100%;
   animation: skeleton-animation 1600ms infinite;
+  border-radius: var(--rls-sizing-x2);
+}
+.rls-skeleton[rls-theme] {
+  --pvt-color-primary: var(--rls-theme-color-100);
+  --pvt-color-secondary: var(--rls-theme-color-200);
 }
 @keyframes skeleton-animation {
+  0% {
+    background-position: 200% 0;
+  }
   100% {
-    transform: translateX(100%);
+    background-position: -200% 0;
   }
 } /*# sourceMappingURL=Skeleton.css.map */

package/dist/esm/components/atoms/Skeleton/Skeleton.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Skeleton/Skeleton.scss"],"names":[],"mappings":"AAOA,cACE,kDACA,0DACA,0DAEA,kBACA,WACA,iCACA,iCACA,yBACA,8BACA,uBACA,gBACA,sCACA,mCAEA,qBACE,kBACA,WACA,SACA,WACA,YACA,UACA,4BACA,+KAOA,6CAIJ,8BACE,KACE","file":"Skeleton.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Skeleton/Skeleton.scss"],"names":[],"mappings":"AAOA,cACE,kDACA,0DACA,0DACA,8CACA,gDAEA,kBACA,WACA,yBACA,iCACA,iCACA,8BACA,8HAMA,gBACA,0BACA,6CACA,mCAEA,yBACE,gDACA,kDAIJ,8BACE,GACE,2BAGF,KACE","file":"Skeleton.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/react-components",
-  "version": "18.22.4",
+  "version": "18.22.5",
   "type": "module",
   "description": "Package containing UI components for React Project.",
   "module": "dist/esm/index.js",
@@ -49,7 +49,7 @@
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.3",
     "@rolster/rollup": "^1.0.6",
-    "@rolster/styles-foundations": "^2.5.27",
+    "@rolster/styles-foundations": "^2.5.29",
     "@rolster/types": "^1.1.0",
     "@types/node-sass": "^4.11.4",
     "@types/react": "^18.0.28",