@skel-ui/react 1.0.0-alpha.87a0363 → 1.0.0-alpha.a8d28e6

package/dist/cjs/index.js

@@ -27,9 +27,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
-  Custom: () => Custom,
+var index_exports = {};
+__export(index_exports, {
+  Item: () => Item,
   Root: () => Root,
   a: () => a,
   address: () => address,
@@ -130,7 +130,7 @@ __export(src_exports, {
   wbr: () => wbr,
   webview: () => webview
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_core = require("@skel-ui/core");
 var import_react = __toESM(require("react"));
 function createSkelComponent(type, isVoidTag = false) {
@@ -152,8 +152,8 @@ function createSkelComponent(type, isVoidTag = false) {
         style: { ...style, ...loadingStyle },
         "aria-hidden": isLoading,
         "data-loading": isLoading,
-        // Use base64 transparent image while loading to avoid broken image ui. This doesn't trigger error on other media tags.
-        ...isLoading && "src" in props && props.src === void 0 ? {
+        // Use base64 transparent image while loading to avoid broken image ui for falsy src. This doesn't trigger error on other media tags.
+        ...isLoading && "src" in props ? {
           src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEB/6mZBQAAAABJRU5ErkJggg=="
         } : {}
       },
@@ -161,11 +161,11 @@ function createSkelComponent(type, isVoidTag = false) {
     );
   };
 }
-function SkelCustom({ as, ...rest }) {
+function SkelItem({ as, ...rest }) {
   return createSkelComponent(as)(rest);
 }
 const Root = import_core.SkelRoot;
-const Custom = SkelCustom;
+const Item = SkelItem;
 const a = createSkelComponent("a");
 const address = createSkelComponent("address");
 const article = createSkelComponent("article");

package/dist/esm/index.js

@@ -20,8 +20,8 @@ function createSkelComponent(type, isVoidTag = false) {
         style: { ...style, ...loadingStyle },
         "aria-hidden": isLoading,
         "data-loading": isLoading,
-        // Use base64 transparent image while loading to avoid broken image ui. This doesn't trigger error on other media tags.
-        ...isLoading && "src" in props && props.src === void 0 ? {
+        // Use base64 transparent image while loading to avoid broken image ui for falsy src. This doesn't trigger error on other media tags.
+        ...isLoading && "src" in props ? {
           src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEB/6mZBQAAAABJRU5ErkJggg=="
         } : {}
       },
@@ -29,11 +29,11 @@ function createSkelComponent(type, isVoidTag = false) {
     );
   };
 }
-function SkelCustom({ as, ...rest }) {
+function SkelItem({ as, ...rest }) {
   return createSkelComponent(as)(rest);
 }
 const Root = SkelRoot;
-const Custom = SkelCustom;
+const Item = SkelItem;
 const a = createSkelComponent("a");
 const address = createSkelComponent("address");
 const article = createSkelComponent("article");
@@ -133,7 +133,7 @@ const video = createSkelComponent("video");
 const wbr = createSkelComponent("wbr", true);
 const webview = createSkelComponent("webview");
 export {
-  Custom,
+  Item,
   Root,
   a,
   address,

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import { SkelComponentProps, SkelRoot } from "@skel-ui/core";
 import type { ComponentProps, ComponentType } from "react";
 import React from "react";
-type SkelCustomProps<T extends ComponentType<ComponentProps<T>>> = {
+type SkelItemProps<T extends ComponentType<ComponentProps<T>>> = {
     as: T;
 } & ComponentProps<T> & Pick<SkelComponentProps<T>, "sw" | "sh" | "sr">;
-declare function SkelCustom<T extends ComponentType<ComponentProps<T>>>({ as, ...rest }: SkelCustomProps<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function SkelItem<T extends ComponentType<ComponentProps<T>>>({ as, ...rest }: SkelItemProps<T>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare const Root: typeof SkelRoot;
-export declare const Custom: typeof SkelCustom;
+export declare const Item: typeof SkelItem;
 export declare const a: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"a">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare const address: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"address">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export declare const article: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"article">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/dist/styles.css

@@ -1,23 +1,25 @@
 :root {
-  --skel-ui-color1: #cbd5e1;
-  --skel-ui-color2: #f1f0f0;
+  --skel-ui-color: #cbd5e1;
   --skel-ui-radius: 0.25rem;
+  --skel-ui-animation-delay: 0s;
   --skel-ui-animation-easing: cubic-bezier(0.4, 0, 0.6, 1);
 }
-[aria-hidden=true][data-loading=true] {
+[data-loading=true] {
   border-radius: var(--skel-ui-radius);
-  animation: skel-ui-shimmer var(--skel-ui-animation-duration, 2s) var(--skel-ui-animation-easing) infinite !important;
+}
+[data-loading=true] {
+  animation: skel-ui-shimmer var(--skel-ui-animation-duration, 2s) var(--skel-ui-animation-easing) var(--skel-ui-animation-delay) infinite !important;
   background-image:
     linear-gradient(
       to right,
-      var(--skel-ui-color1) 33%,
-      var(--skel-ui-color2),
-      var(--skel-ui-color1) 66%);
+      var(--skel-ui-color) 33%,
+      var(--skel-ui-shimmer-color, #f1f0f0),
+      var(--skel-ui-color) 66%);
   background-size: 300%;
 }
-.skel-ui-pulse [aria-hidden=true][data-loading=true] {
-  animation: skel-ui-pulse var(--skel-ui-animation-duration, 1s) var(--skel-ui-animation-easing) infinite alternate-reverse !important;
-  background-color: var(--skel-ui-color1);
+.skel-ui-pulse [data-loading=true] {
+  animation: skel-ui-pulse var(--skel-ui-animation-duration, 1s) var(--skel-ui-animation-easing) var(--skel-ui-animation-delay) infinite alternate-reverse !important;
+  background-color: var(--skel-ui-color);
 }
 @keyframes skel-ui-pulse {
   0% {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@skel-ui/react",
   "author": "https://github.com/sudoaugustin",
-  "version": "1.0.0-alpha.87a0363",
+  "version": "1.0.0-alpha.a8d28e6",
   "license": "MIT",
-  "description": "Next era of skeleton loading for React",
+  "description": "Small but mighty skeleton loading for React",
   "files": [
     "dist"
   ],
@@ -75,8 +75,8 @@
     "tailwindcss": "^3.4.13",
     "typescript": "^5.7.2",
     "@skel-ui/core": "1.0.0",
-    "commons-tsconfig": "0.0.1",
-    "commons-utils": "0.0.1"
+    "commons-utils": "0.0.1",
+    "commons-tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^17.0 || ^18.0",