@skel-ui/react 1.0.0-alpha.9f753ec → 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) {
@@ -139,7 +139,7 @@ function createSkelComponent(type, isVoidTag = false) {
     const loadingStyle = isLoading ? {
       width: sw,
       height: sh,
-      borderRadius: sr || "var(--skel-ui-radius)",
+      borderRadius: sr,
       color: "transparent",
       cursor: "default",
       userSelect: "none",
@@ -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

@@ -7,7 +7,7 @@ function createSkelComponent(type, isVoidTag = false) {
     const loadingStyle = isLoading ? {
       width: sw,
       height: sh,
-      borderRadius: sr || "var(--skel-ui-radius)",
+      borderRadius: sr,
       color: "transparent",
       cursor: "default",
       userSelect: "none",
@@ -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/{src/index.d.ts → 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,22 +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] {
-  animation: skel-ui-shimmer var(--skel-ui-animation-duration, 2s) var(--skel-ui-animation-easing) infinite !important;
+[data-loading=true] {
+  border-radius: var(--skel-ui-radius);
+}
+[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.9f753ec",
+  "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"
   ],
@@ -35,6 +35,16 @@
     "./styles.css": "./dist/styles.css",
     "./$components": "./stories/components/index.tsx"
   },
+  "typesVersions": {
+    "*": {
+      "utils": [
+        "./dist/utils.d.ts"
+      ],
+      "tailwind": [
+        "./dist/tailwind.d.ts"
+      ]
+    }
+  },
   "bugs": {
     "url": "https://github.com/sudoaugustin/skel-ui/issues"
   },
@@ -64,9 +74,9 @@
     "storybook": "^8.3.4",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.7.2",
-    "commons-tsconfig": "0.0.1",
+    "@skel-ui/core": "1.0.0",
     "commons-utils": "0.0.1",
-    "@skel-ui/core": "1.0.0"
+    "commons-tsconfig": "0.0.1"
   },
   "peerDependencies": {
     "react": "^17.0 || ^18.0",
@@ -75,7 +85,7 @@
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
     "build": "rm -rf dist && pnpm build:dts && pnpm build:css && pnpm build:esm && pnpm build:cjs",
-    "build:dts": "tsc -p tsconfig.json --outDir dist --emitDeclarationOnly",
+    "build:dts": "tsc -p tsconfig.build.json --outDir dist",
     "build:css": "esbuild src/styles.css --outdir=dist",
     "build:esm": "esbuild src/*.ts* --format=esm --outdir=dist/esm",
     "build:cjs": "esbuild src/*.ts* --format=cjs --outdir=dist/cjs"

package/dist/stories/components/Animations.d.ts

@@ -1 +0,0 @@
-export default function Animations(): import("react/jsx-runtime").JSX.Element;

package/dist/stories/components/Image.d.ts

@@ -1,4 +0,0 @@
-import { ImgHTMLAttributes } from "react";
-type Props = ImgHTMLAttributes<HTMLImageElement>;
-export default function Image({ ...rest }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/stories/components/PostCard.d.ts

@@ -1,5 +0,0 @@
-type Props = {
-    isLoading?: boolean;
-};
-export default function PostCard(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/stories/components/PostCardList.d.ts

@@ -1 +0,0 @@
-export default function PostCardList(): import("react/jsx-runtime").JSX.Element;

package/dist/stories/components/index.d.ts

@@ -1,5 +0,0 @@
-import Animations from "./Animations";
-import Image from "./Image";
-import PostCard from "./PostCard";
-import PostCardList from "./PostCardList";
-export { Animations, Image, PostCard, PostCardList };

package/dist/stories/index.stories.d.ts

@@ -1,8 +0,0 @@
-import "../src/styles.css";
-import { Animations, PostCard, PostCardList } from "./components";
-declare const _default: {
-    title: string;
-    component: typeof import("@skel-ui/core").SkelRoot;
-};
-export default _default;
-export { Animations, PostCard, PostCardList };