@skel-ui/react 0.3.0 → 0.3.1

package/README.md

@@ -24,7 +24,7 @@ Now you are ready to develop your UI.
 
 ```jsx
 import Skel from "@skel-ui/react";
-import Image from "next/Image";
+import Image from "next/image";
 
 function Profile() {
   const { user, isLoading } = useProfile();

package/dist/cjs/index.js

@@ -39,15 +39,7 @@ function Root({ as, isLoading = true, children, ...rest }) {
   const Component = as || "div";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IsLoadingContext.Provider, { value: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...rest, "data-loading": isLoading, children }) });
 }
-function Item({
-  as,
-  color,
-  width,
-  height,
-  radius,
-  children,
-  ...rest
-}) {
+function Item({ as, sw, sh, color, radius, children, ...rest }) {
   const isLoading = import_react.default.useContext(IsLoadingContext);
   const component = as || "p";
   const Component = typeof component === "string" ? component : isLoading ? "div" : component;
@@ -57,8 +49,8 @@ function Item({
       ...rest,
       style: {
         ...rest.style,
-        "--skel-ui-width": width,
-        "--skel-ui-height": height,
+        "--skel-ui-width": sw,
+        "--skel-ui-height": sh,
         "--skel-ui-radius": radius
       },
       "data-loading": isLoading,

package/dist/esm/index.js

@@ -5,15 +5,7 @@ function Root({ as, isLoading = true, children, ...rest }) {
   const Component = as || "div";
   return /* @__PURE__ */ jsx(IsLoadingContext.Provider, { value: isLoading, children: /* @__PURE__ */ jsx(Component, { ...rest, "data-loading": isLoading, children }) });
 }
-function Item({
-  as,
-  color,
-  width,
-  height,
-  radius,
-  children,
-  ...rest
-}) {
+function Item({ as, sw, sh, color, radius, children, ...rest }) {
   const isLoading = React.useContext(IsLoadingContext);
   const component = as || "p";
   const Component = typeof component === "string" ? component : isLoading ? "div" : component;
@@ -23,8 +15,8 @@ function Item({
       ...rest,
       style: {
         ...rest.style,
-        "--skel-ui-width": width,
-        "--skel-ui-height": height,
+        "--skel-ui-width": sw,
+        "--skel-ui-height": sh,
         "--skel-ui-radius": radius
       },
       "data-loading": isLoading,

package/dist/index.d.ts

@@ -7,13 +7,13 @@ type RootProps<T extends React.ElementType = "div"> = {
 } & HTMLProps<T>;
 type ItemProps<T extends React.ElementType = "p"> = {
     as?: T;
-    width?: string;
-    height?: string;
+    sw?: string;
+    sh?: string;
     radius?: string;
     children?: React.ReactNode | (() => React.ReactNode);
 } & HTMLProps<T>;
 declare function Root<T extends React.ElementType = "div">({ as, isLoading, children, ...rest }: RootProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function Item<T extends React.ElementType = "p">({ as, color, width, height, radius, children, ...rest }: ItemProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Item<T extends React.ElementType = "p">({ as, sw, sh, color, radius, children, ...rest }: ItemProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function generatePlaceholder<T = {
     [k: string]: unknown;
 }>(length: number, primary: string): T[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@skel-ui/react",
   "author": "https://github.com/sudoaugustin",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "license": "MIT",
   "description": "Next era of skeleton loading for React",
   "files": [