@uspk-ui/skeleton - npm Package Compare versions

Comparing version 2.1.4 to 2.2.0

dist/index.cjs.js

@@ -39,4 +39,2 @@ "use strict";
 // src/skeleton.tsx
-var import_media_query = require("@uspk-ui/media-query");
-var import_system = require("@uspk-ui/system");
 var import_react_use_previous = require("@uspk-ui/react-use-previous");
@@ -48,3 +46,15 @@
 // src/skeleton.tsx
+var import_system = require("@uspk-ui/system");
+
+// src/use-is-first-render.ts
 var import_react2 = require("react");
+function useIsFirstRender() {
+  const isFirstRender = (0, import_react2.useRef)(true);
+  (0, import_react2.useEffect)(() => {
+    isFirstRender.current = false;
+  }, []);
+  return isFirstRender.current;
+}
+
+// src/skeleton.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -64,9 +74,4 @@ var StyledSkeleton = (0, import_system.uspk)("div", {
 });
-var useIsFirstRender = () => {
-  const isFirstRender = (0, import_react2.useRef)(true);
-  (0, import_react2.useEffect)(() => {
-    isFirstRender.current = false;
-  }, []);
-  return isFirstRender.current;
-};
+var $startColor = (0, import_system.cssVar)("skeleton-start-color");
+var $endColor = (0, import_system.cssVar)("skeleton-end-color");
 var fade = (0, import_system.keyframes)({
@@ -76,7 +81,11 @@ from: { opacity: 0 },
 });
-var startColor = "var(--skeleton-start-color)";
-var endColor = "var(--skeleton-end-color)";
 var bgFade = (0, import_system.keyframes)({
-  from: { borderColor: startColor, background: startColor },
-  to: { borderColor: endColor, background: endColor }
+  from: {
+    borderColor: $startColor.reference,
+    background: $startColor.reference
+  },
+  to: {
+    borderColor: $endColor.reference,
+    background: $endColor.reference
+  }
 });
@@ -87,4 +96,4 @@ var Skeleton = (0, import_system.forwardRef)((props, ref) => {
   const {
-    startColor: startColor2,
-    endColor: endColor2,
+    startColor = "",
+    endColor = "",
     isLoaded,
@@ -96,4 +105,12 @@ fadeDuration,
   } = (0, import_system.omitThemingProps)(props);
+  const [startColorVar, endColorVar] = (0, import_system.useToken)("colors", [
+    startColor,
+    endColor
+  ]);
   const wasPreviouslyLoaded = (0, import_react_use_previous.usePrevious)(isLoaded);
   const _className = cx("uspk-skeleton", className);
+  const cssVarStyles = {
+    ...startColorVar && { [$startColor.variable]: startColorVar },
+    ...endColorVar && { [$endColor.variable]: endColorVar }
+  };
   if (isLoaded) {
@@ -114,2 +131,4 @@ const animation = isFirstRender || wasPreviouslyLoaded ? "none" : `${fade} ${fadeDuration}s`;
       ...styles,
+      ...cssVarStyles,
+      _dark: { ...cssVarStyles },
       animation: `${speed}s linear infinite alternate ${bgFade}`
@@ -124,2 +143,7 @@ }
 Skeleton.displayName = "Skeleton";
+
+// src/skeleton-text.tsx
+var import_media_query = require("@uspk-ui/media-query");
+var import_system2 = require("@uspk-ui/system");
+var import_jsx_runtime = require("react/jsx-runtime");
 function range(count) {
@@ -135,4 +159,4 @@ return Array(count).fill(1).map((_, index) => index + 1);
     className,
-    startColor: startColor2,
-    endColor: endColor2,
+    startColor,
+    endColor,
     isLoaded,
@@ -155,3 +179,3 @@ fadeDuration,
   const _className = cx("uspk-skeleton__group", className);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system.uspk.div, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_system2.uspk.div, {
     className: _className,
@@ -169,4 +193,4 @@ ...rest,
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, {
-        startColor: startColor2,
-        endColor: endColor2,
+        startColor,
+        endColor,
         isLoaded,
@@ -182,2 +206,5 @@ fadeDuration,
 SkeletonText.displayName = "SkeletonText";
+
+// src/skeleton-circle.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var SkeletonCircle = ({
@@ -184,0 +211,0 @@ size = "2rem",

dist/index.d.ts

@@ -37,5 +37,5 @@ import * as _uspk_ui_system from '@uspk-ui/system';
  *
- * @see Docs https://uspk-ui.com/docs/components/skeleton
  */
 declare const Skeleton: _uspk_ui_system.ComponentWithAs<"div", SkeletonProps>;
+
 interface SkeletonTextProps extends SkeletonProps {
@@ -51,9 +51,8 @@ spacing?: SkeletonProps["margin"];
  *
- * @see Docs https://uspk-ui.com/docs/components/skeleton
  */
 declare const SkeletonText: React.FC<SkeletonTextProps>;
+
 /**
  * `SkeletonCircle` is used to display the loading state in the form of a circular avatar.
  *
- * @see Docs https://uspk-ui.com/docs/components/skeleton
  */
@@ -60,0 +59,0 @@ declare const SkeletonCircle: React.FC<SkeletonProps>;

dist/index.esm.js

@@ -5,17 +5,29 @@ // ../../../react-shim.js
 // src/skeleton.tsx
-import { useBreakpointValue } from "@uspk-ui/media-query";
+import { usePrevious } from "@uspk-ui/react-use-previous";
+
+// ../../utilities/shared-utils/src/index.ts
+var cx = (...classNames) => classNames.filter(Boolean).join(" ");
+
+// src/skeleton.tsx
 import {
   uspk,
+  cssVar,
   forwardRef,
   keyframes,
   omitThemingProps,
-  useStyleConfig
+  useStyleConfig,
+  useToken
 } from "@uspk-ui/system";
-import { usePrevious } from "@uspk-ui/react-use-previous";
 
-// ../../utilities/shared-utils/src/index.ts
-var cx = (...classNames) => classNames.filter(Boolean).join(" ");
+// src/use-is-first-render.ts
+import { useEffect, useRef } from "react";
+function useIsFirstRender() {
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    isFirstRender.current = false;
+  }, []);
+  return isFirstRender.current;
+}
 
 // src/skeleton.tsx
-import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -35,9 +47,4 @@ var StyledSkeleton = uspk("div", {
 });
-var useIsFirstRender = () => {
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    isFirstRender.current = false;
-  }, []);
-  return isFirstRender.current;
-};
+var $startColor = cssVar("skeleton-start-color");
+var $endColor = cssVar("skeleton-end-color");
 var fade = keyframes({
@@ -47,7 +54,11 @@ from: { opacity: 0 },
 });
-var startColor = "var(--skeleton-start-color)";
-var endColor = "var(--skeleton-end-color)";
 var bgFade = keyframes({
-  from: { borderColor: startColor, background: startColor },
-  to: { borderColor: endColor, background: endColor }
+  from: {
+    borderColor: $startColor.reference,
+    background: $startColor.reference
+  },
+  to: {
+    borderColor: $endColor.reference,
+    background: $endColor.reference
+  }
 });
@@ -58,4 +69,4 @@ var Skeleton = forwardRef((props, ref) => {
   const {
-    startColor: startColor2,
-    endColor: endColor2,
+    startColor = "",
+    endColor = "",
     isLoaded,
@@ -67,4 +78,12 @@ fadeDuration,
   } = omitThemingProps(props);
+  const [startColorVar, endColorVar] = useToken("colors", [
+    startColor,
+    endColor
+  ]);
   const wasPreviouslyLoaded = usePrevious(isLoaded);
   const _className = cx("uspk-skeleton", className);
+  const cssVarStyles = {
+    ...startColorVar && { [$startColor.variable]: startColorVar },
+    ...endColorVar && { [$endColor.variable]: endColorVar }
+  };
   if (isLoaded) {
@@ -85,2 +104,4 @@ const animation = isFirstRender || wasPreviouslyLoaded ? "none" : `${fade} ${fadeDuration}s`;
       ...styles,
+      ...cssVarStyles,
+      _dark: { ...cssVarStyles },
       animation: `${speed}s linear infinite alternate ${bgFade}`
@@ -95,2 +116,7 @@ }
 Skeleton.displayName = "Skeleton";
+
+// src/skeleton-text.tsx
+import { useBreakpointValue } from "@uspk-ui/media-query";
+import { uspk as uspk2 } from "@uspk-ui/system";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function range(count) {
@@ -106,4 +132,4 @@ return Array(count).fill(1).map((_, index) => index + 1);
     className,
-    startColor: startColor2,
-    endColor: endColor2,
+    startColor,
+    endColor,
     isLoaded,
@@ -126,3 +152,3 @@ fadeDuration,
   const _className = cx("uspk-skeleton__group", className);
-  return /* @__PURE__ */ jsx(uspk.div, {
+  return /* @__PURE__ */ jsx2(uspk2.div, {
     className: _className,
@@ -139,5 +165,5 @@ ...rest,
       };
-      return /* @__PURE__ */ jsx(Skeleton, {
-        startColor: startColor2,
-        endColor: endColor2,
+      return /* @__PURE__ */ jsx2(Skeleton, {
+        startColor,
+        endColor,
         isLoaded,
@@ -153,6 +179,9 @@ fadeDuration,
 SkeletonText.displayName = "SkeletonText";
+
+// src/skeleton-circle.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 var SkeletonCircle = ({
   size = "2rem",
   ...rest
-}) => /* @__PURE__ */ jsx(Skeleton, {
+}) => /* @__PURE__ */ jsx3(Skeleton, {
   borderRadius: "full",
@@ -159,0 +188,0 @@ boxSize: size,

package.json

 {
   "name": "@uspk-ui/skeleton",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "React component to render a placeholders while you wait for content to load",
@@ -34,6 +34,6 @@ "keywords": [
     "@uspk-ui/shared-utils": "1.0.1",
-    "@uspk-ui/system": "1.0.2",
+    "@uspk-ui/system": "1.0.3",
     "@uspk-ui/layout": "2.1.4",
-    "@uspk-ui/theme": "2.1.3",
-    "@uspk-ui/provider": "2.1.3",
+    "@uspk-ui/theme": "2.2.0",
+    "@uspk-ui/provider": "2.1.4",
     "jest-matchmedia-mock": "1.1.0",
@@ -40,0 +40,0 @@ "react": "^18.0.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14666

increased by7.76%

Lines of code

436

increased by11.51%

No dependency changes