@skel-ui/react 0.4.0 → 1.0.0-alpha.01475df

package/README.md

@@ -1,42 +1,39 @@
-# Getting Started
+Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.
 
-Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using react-context. Learn more [here](https://skel-ui.augustin.zip).
+See the comparision [here](https://skel-ui.augustin.zip/#comparision).
 
-## Installation
+## Get Started
 
-Install the package into your project via command line.
-
-```bash
-npm install @skel-ui/react
-```
-
-## Importing CSS
+### Import CSS
 
 Import the CSS file into the root of your application.
 
-```js
+```ts
 import "@skel-ui/react/styles.css";
 ```
 
-## Start crafting UI
+### Implement Skel UI
 
-Now you are ready to develop your UI.
+Now it's time for you to craft your user interface to life!
 
-```jsx
-import Skel from "@skel-ui/react";
-import Image from "next/image";
+```tsx
+import * as Skel from "@skel-ui/react";
+import Image from "@ui/image";
 
-function Profile() {
-  const { user, isLoading } = useProfile();
+export default function PostCard() {
+  const { post, isLoading } = usePost();
 
   return (
     <Skel.Root isLoading={isLoading}>
-      <Skel.Item className="user-avatar">
-        <Image src={user.profile} />
-      </Skel.Item>
-      <Skel.Item as="h1" className="user-email">
-        {user.email}
-      </Skel.Item>
+      <div className="group w-full max-w-80 p-2.5 bg-white border border-slate-200 rounded-lg overflow-hidden duration-300">
+        <Skel.Item
+          as={Image}
+          src={post?.image}
+          className="rounded aspect-[800/530] duration-150 loaded:group-hover:scale-110"
+        />
+        <Skel.h1 className="text-xl font-bold mt-4 loading:max-w-48">{post?.title}</Skel.h1>
+        <Skel.p className="text-sm my-2 loading:h-[3.75rem]">{post?.description}</Skel.p>
+      </div>
     </Skel.Root>
   );
 }
@@ -44,27 +41,6 @@ function Profile() {
 
 Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .
 
-## Customization
 
-Customize the default color and border-radius of skeleton using css variables.
-
-```css title="global.css"
-:root {
-  --skel-ui-color1: #cbd5e1;
-  --skel-ui-radius: 0.5rem;
-}
-```
 
-Each `Skel.Item` will have a `data-loading` attribute that is set to `"true"` when the item is in a loading state, and `"false"` otherwise. You can use this attribute in your CSS to create styles based on the loading state.
-
-```css
-/* This style will be applied during loading. */
-.user-email[data-loading="true"] {
-  width: 5rem;
-}
-
-/* This style will be applied after loading is done. */
-.user-email[data-loading="false"]:hover {
-  background: #f97316;
-}
-```
+For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)

package/dist/cjs/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,42 +27,240 @@ 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, {
-  default: () => src_default,
-  generatePlaceholder: () => generatePlaceholder
+var index_exports = {};
+__export(index_exports, {
+  Item: () => Item,
+  Root: () => Root,
+  a: () => a,
+  address: () => address,
+  article: () => article,
+  aside: () => aside,
+  b: () => b,
+  bdi: () => bdi,
+  bdo: () => bdo,
+  blockquote: () => blockquote,
+  br: () => br,
+  button: () => button,
+  canvas: () => canvas,
+  caption: () => caption,
+  cite: () => cite,
+  code: () => code,
+  col: () => col,
+  colgroup: () => colgroup,
+  data: () => data,
+  datalist: () => datalist,
+  dd: () => dd,
+  del: () => del,
+  details: () => details,
+  dfn: () => dfn,
+  dialog: () => dialog,
+  div: () => div,
+  dl: () => dl,
+  dt: () => dt,
+  em: () => em,
+  embed: () => embed,
+  fieldset: () => fieldset,
+  figcaption: () => figcaption,
+  figure: () => figure,
+  footer: () => footer,
+  form: () => form,
+  h1: () => h1,
+  h2: () => h2,
+  h3: () => h3,
+  h4: () => h4,
+  h5: () => h5,
+  h6: () => h6,
+  header: () => header,
+  hgroup: () => hgroup,
+  hr: () => hr,
+  i: () => i,
+  iframe: () => iframe,
+  img: () => img,
+  input: () => input,
+  ins: () => ins,
+  kbd: () => kbd,
+  label: () => label,
+  legend: () => legend,
+  li: () => li,
+  main: () => main,
+  map: () => map,
+  mark: () => mark,
+  menu: () => menu,
+  menuitem: () => menuitem,
+  meter: () => meter,
+  nav: () => nav,
+  object: () => object,
+  ol: () => ol,
+  optgroup: () => optgroup,
+  option: () => option,
+  output: () => output,
+  p: () => p,
+  param: () => param,
+  picture: () => picture,
+  pre: () => pre,
+  progress: () => progress,
+  q: () => q,
+  rp: () => rp,
+  rt: () => rt,
+  ruby: () => ruby,
+  s: () => s,
+  samp: () => samp,
+  section: () => section,
+  select: () => select,
+  small: () => small,
+  source: () => source,
+  span: () => span,
+  strong: () => strong,
+  sub: () => sub,
+  summary: () => summary,
+  sup: () => sup,
+  table: () => table,
+  tbody: () => tbody,
+  td: () => td,
+  textarea: () => textarea,
+  tfoot: () => tfoot,
+  th: () => th,
+  thead: () => thead,
+  time: () => time,
+  tr: () => tr,
+  track: () => track,
+  u: () => u,
+  ul: () => ul,
+  video: () => video,
+  wbr: () => wbr,
+  webview: () => webview
 });
-module.exports = __toCommonJS(src_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
+module.exports = __toCommonJS(index_exports);
+var import_core = require("@skel-ui/core");
 var import_react = __toESM(require("react"));
-const IsLoadingContext = import_react.default.createContext(false);
-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, "aria-hidden": isLoading, "data-loading": isLoading, children }) });
-}
-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;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Component,
-    {
-      ...rest,
-      style: {
-        ...rest.style,
-        "--skel-ui-width": sw,
-        "--skel-ui-height": sh,
-        "--skel-ui-radius": radius
+function createSkelComponent(type, isVoidTag = false) {
+  return ({ sw, sh, sr, style, children, ...props }) => {
+    const isLoading = import_react.default.useContext(import_core.IsLoadingContext);
+    const loadingStyle = isLoading ? {
+      width: sw,
+      height: sh,
+      borderRadius: sr,
+      color: "transparent",
+      cursor: "default",
+      userSelect: "none",
+      pointerEvents: "none"
+    } : {};
+    return import_react.default.createElement(
+      type,
+      {
+        ...props,
+        style: { ...style, ...loadingStyle },
+        "aria-hidden": isLoading,
+        "data-loading": isLoading,
+        // 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=="
+        } : {}
       },
-      "aria-hidden": isLoading,
-      "data-loading": isLoading,
-      "data-skel-item": true,
-      children: isLoading ? " \u200C " : typeof children === "function" ? children() : children
-    }
-  );
+      isVoidTag ? void 0 : isLoading && typeof type === "string" ? " \u200C " : children
+    );
+  };
 }
-function generatePlaceholder(length, primary) {
-  return Array(length).fill(null).map((_, index) => ({ [primary]: `skel-ui-id-${index}` }));
+function SkelItem({ as, ...rest }) {
+  return createSkelComponent(as)(rest);
 }
-const Skel = { Root, Item };
-var src_default = Skel;
+const Root = import_core.SkelRoot;
+const Item = SkelItem;
+const a = createSkelComponent("a");
+const address = createSkelComponent("address");
+const article = createSkelComponent("article");
+const aside = createSkelComponent("aside");
+const b = createSkelComponent("b");
+const br = createSkelComponent("br", true);
+const bdi = createSkelComponent("bdi");
+const bdo = createSkelComponent("bdo");
+const blockquote = createSkelComponent("blockquote");
+const button = createSkelComponent("button");
+const canvas = createSkelComponent("canvas");
+const caption = createSkelComponent("caption");
+const cite = createSkelComponent("cite");
+const code = createSkelComponent("code");
+const col = createSkelComponent("col");
+const colgroup = createSkelComponent("colgroup");
+const data = createSkelComponent("data");
+const datalist = createSkelComponent("datalist");
+const dd = createSkelComponent("dd");
+const del = createSkelComponent("del");
+const details = createSkelComponent("details");
+const dfn = createSkelComponent("dfn");
+const dialog = createSkelComponent("dialog");
+const div = createSkelComponent("div");
+const dl = createSkelComponent("dl");
+const dt = createSkelComponent("dt");
+const em = createSkelComponent("em");
+const embed = createSkelComponent("embed", true);
+const fieldset = createSkelComponent("fieldset");
+const figcaption = createSkelComponent("figcaption");
+const figure = createSkelComponent("figure");
+const footer = createSkelComponent("footer");
+const form = createSkelComponent("form");
+const h1 = createSkelComponent("h1");
+const h2 = createSkelComponent("h2");
+const h3 = createSkelComponent("h3");
+const h4 = createSkelComponent("h4");
+const h5 = createSkelComponent("h5");
+const h6 = createSkelComponent("h6");
+const header = createSkelComponent("header");
+const hgroup = createSkelComponent("hgroup");
+const hr = createSkelComponent("hr", true);
+const i = createSkelComponent("i");
+const iframe = createSkelComponent("iframe");
+const img = createSkelComponent("img", true);
+const input = createSkelComponent("input", true);
+const ins = createSkelComponent("ins");
+const kbd = createSkelComponent("kbd");
+const label = createSkelComponent("label");
+const legend = createSkelComponent("legend");
+const li = createSkelComponent("li");
+const main = createSkelComponent("main");
+const map = createSkelComponent("map");
+const mark = createSkelComponent("mark");
+const menu = createSkelComponent("menu");
+const menuitem = createSkelComponent("menuitem");
+const meter = createSkelComponent("meter");
+const nav = createSkelComponent("nav");
+const object = createSkelComponent("object");
+const ol = createSkelComponent("ol");
+const optgroup = createSkelComponent("optgroup");
+const option = createSkelComponent("option");
+const output = createSkelComponent("output");
+const p = createSkelComponent("p");
+const param = createSkelComponent("param");
+const picture = createSkelComponent("picture");
+const pre = createSkelComponent("pre");
+const progress = createSkelComponent("progress");
+const q = createSkelComponent("q");
+const rp = createSkelComponent("rp");
+const rt = createSkelComponent("rt");
+const ruby = createSkelComponent("ruby");
+const s = createSkelComponent("s");
+const samp = createSkelComponent("samp");
+const section = createSkelComponent("section");
+const select = createSkelComponent("select");
+const small = createSkelComponent("small");
+const source = createSkelComponent("source");
+const span = createSkelComponent("span");
+const strong = createSkelComponent("strong");
+const sub = createSkelComponent("sub");
+const summary = createSkelComponent("summary");
+const sup = createSkelComponent("sup");
+const table = createSkelComponent("table");
+const tbody = createSkelComponent("tbody");
+const td = createSkelComponent("td");
+const textarea = createSkelComponent("textarea");
+const tfoot = createSkelComponent("tfoot");
+const th = createSkelComponent("th");
+const thead = createSkelComponent("thead");
+const time = createSkelComponent("time");
+const tr = createSkelComponent("tr");
+const track = createSkelComponent("track");
+const u = createSkelComponent("u");
+const ul = createSkelComponent("ul");
+const video = createSkelComponent("video");
+const wbr = createSkelComponent("wbr", true);
+const webview = createSkelComponent("webview");

package/dist/cjs/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  generatePlaceholder: () => import_core.generatePlaceholder
+});
+module.exports = __toCommonJS(utils_exports);
+var import_core = require("@skel-ui/core");

package/dist/esm/index.js

@@ -1,37 +1,236 @@
-import { jsx } from "react/jsx-runtime";
+"use client";
+import { IsLoadingContext, SkelRoot } from "@skel-ui/core";
 import React from "react";
-const IsLoadingContext = React.createContext(false);
-function Root({ as, isLoading = true, children, ...rest }) {
-  const Component = as || "div";
-  return /* @__PURE__ */ jsx(IsLoadingContext.Provider, { value: isLoading, children: /* @__PURE__ */ jsx(Component, { ...rest, "aria-hidden": isLoading, "data-loading": isLoading, children }) });
-}
-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;
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      ...rest,
-      style: {
-        ...rest.style,
-        "--skel-ui-width": sw,
-        "--skel-ui-height": sh,
-        "--skel-ui-radius": radius
+function createSkelComponent(type, isVoidTag = false) {
+  return ({ sw, sh, sr, style, children, ...props }) => {
+    const isLoading = React.useContext(IsLoadingContext);
+    const loadingStyle = isLoading ? {
+      width: sw,
+      height: sh,
+      borderRadius: sr,
+      color: "transparent",
+      cursor: "default",
+      userSelect: "none",
+      pointerEvents: "none"
+    } : {};
+    return React.createElement(
+      type,
+      {
+        ...props,
+        style: { ...style, ...loadingStyle },
+        "aria-hidden": isLoading,
+        "data-loading": isLoading,
+        // 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=="
+        } : {}
       },
-      "aria-hidden": isLoading,
-      "data-loading": isLoading,
-      "data-skel-item": true,
-      children: isLoading ? " \u200C " : typeof children === "function" ? children() : children
-    }
-  );
+      isVoidTag ? void 0 : isLoading && typeof type === "string" ? " \u200C " : children
+    );
+  };
 }
-function generatePlaceholder(length, primary) {
-  return Array(length).fill(null).map((_, index) => ({ [primary]: `skel-ui-id-${index}` }));
+function SkelItem({ as, ...rest }) {
+  return createSkelComponent(as)(rest);
 }
-const Skel = { Root, Item };
-var src_default = Skel;
+const Root = SkelRoot;
+const Item = SkelItem;
+const a = createSkelComponent("a");
+const address = createSkelComponent("address");
+const article = createSkelComponent("article");
+const aside = createSkelComponent("aside");
+const b = createSkelComponent("b");
+const br = createSkelComponent("br", true);
+const bdi = createSkelComponent("bdi");
+const bdo = createSkelComponent("bdo");
+const blockquote = createSkelComponent("blockquote");
+const button = createSkelComponent("button");
+const canvas = createSkelComponent("canvas");
+const caption = createSkelComponent("caption");
+const cite = createSkelComponent("cite");
+const code = createSkelComponent("code");
+const col = createSkelComponent("col");
+const colgroup = createSkelComponent("colgroup");
+const data = createSkelComponent("data");
+const datalist = createSkelComponent("datalist");
+const dd = createSkelComponent("dd");
+const del = createSkelComponent("del");
+const details = createSkelComponent("details");
+const dfn = createSkelComponent("dfn");
+const dialog = createSkelComponent("dialog");
+const div = createSkelComponent("div");
+const dl = createSkelComponent("dl");
+const dt = createSkelComponent("dt");
+const em = createSkelComponent("em");
+const embed = createSkelComponent("embed", true);
+const fieldset = createSkelComponent("fieldset");
+const figcaption = createSkelComponent("figcaption");
+const figure = createSkelComponent("figure");
+const footer = createSkelComponent("footer");
+const form = createSkelComponent("form");
+const h1 = createSkelComponent("h1");
+const h2 = createSkelComponent("h2");
+const h3 = createSkelComponent("h3");
+const h4 = createSkelComponent("h4");
+const h5 = createSkelComponent("h5");
+const h6 = createSkelComponent("h6");
+const header = createSkelComponent("header");
+const hgroup = createSkelComponent("hgroup");
+const hr = createSkelComponent("hr", true);
+const i = createSkelComponent("i");
+const iframe = createSkelComponent("iframe");
+const img = createSkelComponent("img", true);
+const input = createSkelComponent("input", true);
+const ins = createSkelComponent("ins");
+const kbd = createSkelComponent("kbd");
+const label = createSkelComponent("label");
+const legend = createSkelComponent("legend");
+const li = createSkelComponent("li");
+const main = createSkelComponent("main");
+const map = createSkelComponent("map");
+const mark = createSkelComponent("mark");
+const menu = createSkelComponent("menu");
+const menuitem = createSkelComponent("menuitem");
+const meter = createSkelComponent("meter");
+const nav = createSkelComponent("nav");
+const object = createSkelComponent("object");
+const ol = createSkelComponent("ol");
+const optgroup = createSkelComponent("optgroup");
+const option = createSkelComponent("option");
+const output = createSkelComponent("output");
+const p = createSkelComponent("p");
+const param = createSkelComponent("param");
+const picture = createSkelComponent("picture");
+const pre = createSkelComponent("pre");
+const progress = createSkelComponent("progress");
+const q = createSkelComponent("q");
+const rp = createSkelComponent("rp");
+const rt = createSkelComponent("rt");
+const ruby = createSkelComponent("ruby");
+const s = createSkelComponent("s");
+const samp = createSkelComponent("samp");
+const section = createSkelComponent("section");
+const select = createSkelComponent("select");
+const small = createSkelComponent("small");
+const source = createSkelComponent("source");
+const span = createSkelComponent("span");
+const strong = createSkelComponent("strong");
+const sub = createSkelComponent("sub");
+const summary = createSkelComponent("summary");
+const sup = createSkelComponent("sup");
+const table = createSkelComponent("table");
+const tbody = createSkelComponent("tbody");
+const td = createSkelComponent("td");
+const textarea = createSkelComponent("textarea");
+const tfoot = createSkelComponent("tfoot");
+const th = createSkelComponent("th");
+const thead = createSkelComponent("thead");
+const time = createSkelComponent("time");
+const tr = createSkelComponent("tr");
+const track = createSkelComponent("track");
+const u = createSkelComponent("u");
+const ul = createSkelComponent("ul");
+const video = createSkelComponent("video");
+const wbr = createSkelComponent("wbr", true);
+const webview = createSkelComponent("webview");
 export {
-  src_default as default,
-  generatePlaceholder
+  Item,
+  Root,
+  a,
+  address,
+  article,
+  aside,
+  b,
+  bdi,
+  bdo,
+  blockquote,
+  br,
+  button,
+  canvas,
+  caption,
+  cite,
+  code,
+  col,
+  colgroup,
+  data,
+  datalist,
+  dd,
+  del,
+  details,
+  dfn,
+  dialog,
+  div,
+  dl,
+  dt,
+  em,
+  embed,
+  fieldset,
+  figcaption,
+  figure,
+  footer,
+  form,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  header,
+  hgroup,
+  hr,
+  i,
+  iframe,
+  img,
+  input,
+  ins,
+  kbd,
+  label,
+  legend,
+  li,
+  main,
+  map,
+  mark,
+  menu,
+  menuitem,
+  meter,
+  nav,
+  object,
+  ol,
+  optgroup,
+  option,
+  output,
+  p,
+  param,
+  picture,
+  pre,
+  progress,
+  q,
+  rp,
+  rt,
+  ruby,
+  s,
+  samp,
+  section,
+  select,
+  small,
+  source,
+  span,
+  strong,
+  sub,
+  summary,
+  sup,
+  table,
+  tbody,
+  td,
+  textarea,
+  tfoot,
+  th,
+  thead,
+  time,
+  tr,
+  track,
+  u,
+  ul,
+  video,
+  wbr,
+  webview
 };

package/dist/esm/utils.js

@@ -0,0 +1,4 @@
+import { generatePlaceholder } from "@skel-ui/core";
+export {
+  generatePlaceholder
+};

package/dist/index.d.ts

@@ -1,24 +1,108 @@
+import { SkelComponentProps, SkelRoot } from "@skel-ui/core";
+import type { ComponentProps, ComponentType } from "react";
 import React from "react";
-type HTMLProps<T extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<T>, "children">;
-type RootProps<T extends React.ElementType = "div"> = {
-    as?: T;
-    children: React.ReactNode;
-    isLoading: boolean;
-} & HTMLProps<T>;
-type ItemProps<T extends React.ElementType = "p"> = {
-    as?: T;
-    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, 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[];
-declare const Skel: {
-    Root: typeof Root;
-    Item: typeof Item;
-};
-export default Skel;
+type SkelItemProps<T extends ComponentType<ComponentProps<T>>> = {
+    as: T;
+} & ComponentProps<T> & Pick<SkelComponentProps<T>, "sw" | "sh" | "sr">;
+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 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>>;
+export declare const aside: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"aside">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const b: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"b">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const br: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"br">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const bdi: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"bdi">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const bdo: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"bdo">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const blockquote: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"blockquote">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const button: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"button">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const canvas: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"canvas">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const caption: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"caption">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const cite: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"cite">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const code: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"code">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const col: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"col">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const colgroup: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"colgroup">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const data: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"data">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const datalist: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"datalist">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const dd: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"dd">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const del: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"del">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const details: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"details">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const dfn: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"dfn">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const dialog: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"dialog">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const div: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"div">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const dl: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"dl">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const dt: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"dt">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const em: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"em">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const embed: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"embed">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const fieldset: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"fieldset">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const figcaption: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"figcaption">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const figure: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"figure">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const footer: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"footer">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const form: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"form">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const h1: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"h1">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const h2: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"h2">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const h3: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"h3">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const h4: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"h4">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const h5: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"h5">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const h6: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"h6">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const header: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"header">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const hgroup: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"hgroup">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const hr: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"hr">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const i: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"i">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const iframe: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"iframe">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const img: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"img">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const input: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"input">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const ins: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"ins">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const kbd: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"kbd">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const label: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"label">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const legend: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"legend">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const li: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"li">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const main: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"main">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const map: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"map">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const mark: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"mark">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const menu: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"menu">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const menuitem: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"menuitem">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const meter: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"meter">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const nav: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"nav">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const object: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"object">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const ol: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"ol">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const optgroup: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"optgroup">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const option: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"option">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const output: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"output">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const p: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"p">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const param: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"param">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const picture: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"picture">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const pre: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"pre">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const progress: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"progress">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const q: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"q">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const rp: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"rp">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const rt: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"rt">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const ruby: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"ruby">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const s: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"s">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const samp: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"samp">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const section: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"section">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const select: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"select">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const small: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"small">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const source: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"source">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const span: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"span">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const strong: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"strong">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const sub: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"sub">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const summary: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"summary">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const sup: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"sup">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const table: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"table">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const tbody: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"tbody">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const td: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"td">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const textarea: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"textarea">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const tfoot: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"tfoot">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const th: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"th">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const thead: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"thead">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const time: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"time">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const tr: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"tr">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const track: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"track">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const u: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"u">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const ul: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"ul">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const video: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"video">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const wbr: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"wbr">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export declare const webview: ({ sw, sh, sr, style, children, ...props }: SkelComponentProps<"webview">) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/styles.css

@@ -1,37 +1,32 @@
 :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);
 }
-[data-skel-item][data-loading=true] {
-  animation: skel-ui-shimmer 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
-  background:
+[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%;
-  width: var(--skel-ui-width);
-  height: var(--skel-ui-height);
-  border-radius: var(--skel-ui-radius);
-  cursor: default !important;
-  user-select: none !important;
-  pointer-events: none !important;
 }
-.skel-ui-pulse [data-skel-item][data-loading=true] {
-  animation: skel-ui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
-  background-color: var(--skel-ui-color1) !important;
+.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% {
     opacity: 1;
   }
-  50% {
-    opacity: 0.25;
-  }
   100% {
-    opacity: 1;
+    opacity: 0.35;
   }
 }
 @keyframes skel-ui-shimmer {

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { generatePlaceholder } from "@skel-ui/core";
+export { generatePlaceholder };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@skel-ui/react",
   "author": "https://github.com/sudoaugustin",
-  "version": "0.4.0",
+  "version": "1.0.0-alpha.01475df",
   "license": "MIT",
-  "description": "Next era of skeleton loading for React",
+  "description": "Lightweight and powerful skeleton loading library for React.",
   "files": [
     "dist"
   ],
@@ -22,6 +22,11 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/esm/utils.js",
+      "require": "./dist/cjs/utils.js"
+    },
     "./tailwind": {
       "types": "./dist/tailwind.d.ts",
       "import": "./dist/esm/tailwind.js",
@@ -30,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"
   },
@@ -38,9 +53,11 @@
     "type": "git",
     "url": "git+https://github.com/sudoaugustin/skel-ui"
   },
+  "dependencies": {
+    "@skel-ui/core": "1.0.0"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
-    "@heroicons/react": "^2.1.5",
     "@storybook/addon-essentials": "^8.3.4",
     "@storybook/addon-interactions": "^8.3.4",
     "@storybook/addon-links": "^8.3.4",
@@ -49,14 +66,17 @@
     "@storybook/react": "^8.3.4",
     "@storybook/react-vite": "^8.3.4",
     "@storybook/test": "^8.3.4",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "esbuild": "^0.24.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^8.3.4",
     "tailwindcss": "^3.4.13",
-    "typescript": "^5.6.2"
+    "typescript": "^5.7.2",
+    "@skel-ui/core": "1.0.0",
+    "commons-tsconfig": "0.0.1",
+    "commons-utils": "0.0.1"
   },
   "peerDependencies": {
     "react": "^17.0 || ^18.0",
@@ -67,7 +87,7 @@
     "build": "rm -rf dist && pnpm build:dts && pnpm build:css && pnpm build:esm && pnpm build:cjs",
     "build:dts": "tsc -p tsconfig.build.json --outDir dist",
     "build:css": "esbuild src/styles.css --outdir=dist",
-    "build:esm": "esbuild src/*.ts* --jsx=automatic --format=esm --outdir=dist/esm",
-    "build:cjs": "esbuild src/*.ts* --jsx=automatic --format=cjs --outdir=dist/cjs"
+    "build:esm": "esbuild src/*.ts* --format=esm --outdir=dist/esm",
+    "build:cjs": "esbuild src/*.ts* --format=cjs --outdir=dist/cjs"
   }
 }