@skel-ui/react 1.0.0-alpha.d89053b → 1.0.0-alpha.fa3737d

package/README.md

@@ -1,25 +1,71 @@
-# 🚧 This package is highly under development. 🛠️
+# Getting Started
 
-```JSX
-const { user, isLoading } = useProfile();
+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.
 
-// Legacy Way
-if(isLoading){
-  return <ProfileSkeleton/>
+## Installation
+
+Install the package into your project via command line.
+
+```bash
+npm install @skel-ui/react
+```
+
+## Importing CSS
+
+Import the CSS file into the root of your application.
+
+```js
+import "@skel-ui/react/styles.css";
+```
+
+## Start crafting UI
+
+Now it's time for you to craft your user interface to life!
+
+```jsx
+import * as Skel from "@skel-ui/react";
+import Image from "next/image";
+
+function Profile() {
+  const { user, isLoading } = useProfile();
+
+  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>
+    </Skel.Root>
+  );
+}
+```
+
+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: #a1a1aa;
+    --skel-ui-color2: #e4e4e7;
+    --skel-ui-radius: 0.25rem;
 }
+```
 
-// Current Way
-{isLoading ? (
-  <Skeleton circle />
-) : (
-  <Avatar src={user.image} name={user.name} />
-)}
-<h1>{user.name || <Skeleton />}</h1>
+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;
+}
 
-// Skel's Way ✨
-<Skel.Root isLoading={isLoading}>
-  <Skel.Item as={Avatar} src={user.image} />
-  <Skel.Item as="h1">{user.name}</Skel.Item>
-</Skel.Root>
+/* This style will be applied after loading is done. */
+.user-email[data-loading="false"]:hover {
+  background: #f97316;
+}
 ```

package/dist/cjs/index.js

@@ -0,0 +1,266 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  Custom: () => Custom,
+  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_core = require("@skel-ui/core");
+var import_react = __toESM(require("react"));
+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 || "var(--skel-ui-radius)",
+      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. This doesn't trigger error on other media tags.
+        ...isLoading && "src" in props && props.src === void 0 ? {
+          src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEB/6mZBQAAAABJRU5ErkJggg=="
+        } : {}
+      },
+      isVoidTag ? void 0 : isLoading && typeof type === "string" ? " \u200C " : children
+    );
+  };
+}
+function SkelCustom({ as, ...rest }) {
+  return createSkelComponent(as)(rest);
+}
+const Root = import_core.SkelRoot;
+const Custom = SkelCustom;
+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

@@ -0,0 +1,236 @@
+"use client";
+import { IsLoadingContext, SkelRoot } from "@skel-ui/core";
+import React from "react";
+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 || "var(--skel-ui-radius)",
+      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. This doesn't trigger error on other media tags.
+        ...isLoading && "src" in props && props.src === void 0 ? {
+          src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgEB/6mZBQAAAABJRU5ErkJggg=="
+        } : {}
+      },
+      isVoidTag ? void 0 : isLoading && typeof type === "string" ? " \u200C " : children
+    );
+  };
+}
+function SkelCustom({ as, ...rest }) {
+  return createSkelComponent(as)(rest);
+}
+const Root = SkelRoot;
+const Custom = SkelCustom;
+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 {
+  Custom,
+  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/src/index.d.ts

@@ -0,0 +1,108 @@
+import { SkelComponentProps, SkelRoot } from "@skel-ui/core";
+import type { ComponentProps, ComponentType } from "react";
+import React from "react";
+type SkelCustomProps<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>>;
+export declare const Root: typeof SkelRoot;
+export declare const Custom: typeof SkelCustom;
+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/src/utils.d.ts

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

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

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

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

@@ -0,0 +1,4 @@
+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

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

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

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,8 @@
+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 };

package/dist/styles.css

@@ -0,0 +1,36 @@
+:root {
+  --skel-ui-color1: #cbd5e1;
+  --skel-ui-color2: #f1f0f0;
+  --skel-ui-radius: 0.25rem;
+  --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;
+  background-image:
+    linear-gradient(
+      to right,
+      var(--skel-ui-color1) 33%,
+      var(--skel-ui-color2),
+      var(--skel-ui-color1) 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);
+}
+@keyframes skel-ui-pulse {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.35;
+  }
+}
+@keyframes skel-ui-shimmer {
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: 0%;
+  }
+}

package/package.json

@@ -1,62 +1,81 @@
 {
   "name": "@skel-ui/react",
   "author": "https://github.com/sudoaugustin",
-  "version": "1.0.0-alpha.d89053b",
+  "version": "1.0.0-alpha.fa3737d",
   "license": "MIT",
-  "description": "Next era of skeleton loading for react",
-  "main": "cjs/index.js",
-  "types": "dts/index.d.ts",
-  "module": "esm/index.js",
-  "sideEffects": false,
+  "description": "Next era of skeleton loading for React",
   "files": [
-    "cjs",
-    "esm",
-    "dts",
-    "types"
+    "dist"
   ],
+  "main": "dist/cjs/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
   "keywords": [
     "react",
     "skeleton",
     "loading",
     "placeholder"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "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",
+      "require": "./dist/cjs/tailwind.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./$components": "./stories/components/index.tsx"
+  },
   "bugs": {
-    "url": "https://github.com/sudoaugustin/react-sleleto/issues"
+    "url": "https://github.com/sudoaugustin/skel-ui/issues"
   },
-  "homepage": "https://github.com/sudoaugustin/react-sleleto#readme",
+  "homepage": "https://skel-ui.augustin.zip",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sudoaugustin/react-sleleto"
+    "url": "git+https://github.com/sudoaugustin/skel-ui"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.9.0",
-    "@storybook/addon-essentials": "^8.3.3",
-    "@storybook/addon-interactions": "^8.3.3",
-    "@storybook/addon-links": "^8.3.3",
-    "@storybook/addon-onboarding": "^8.3.3",
-    "@storybook/blocks": "^8.3.3",
-    "@storybook/react": "^8.3.3",
-    "@storybook/react-vite": "^8.3.3",
-    "@storybook/test": "^8.3.3",
-    "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.0.10",
-    "esbuild": "^0.17.5",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^8.3.3",
-    "swr": "^2.2.5",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-interactions": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
+    "@storybook/addon-onboarding": "^8.3.4",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/react": "^8.3.4",
+    "@storybook/react-vite": "^8.3.4",
+    "@storybook/test": "^8.3.4",
+    "@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": "^16.0.0  || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.0.0  || ^17.0.0 || ^18.0.0"
+    "react": "^17.0 || ^18.0",
+    "react-dom": "^17.0 || ^18.0",
+    "@skel-ui/core": "1.0.0"
   },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
-    "build": "rm -rf cjs esm dts && pnpm build:dts && pnpm build:esm && pnpm build:cjs",
-    "build:dts": "tsc -p tsconfig.build.json --outDir ./dts",
-    "build:esm": "esbuild ./src/* --format=esm --outdir=./esm",
-    "build:cjs": "esbuild ./src/* --format=cjs --outdir=./cjs"
+    "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: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/cjs/index.css

@@ -1,21 +0,0 @@
-:root {
-  --skel-ui-color: #f0f0f0;
-  --skel-ui-radius: 0.25rem;
-}
-[data-loading=true] {
-  animation: skel-ui-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate-reverse;
-  border-radius: var(--skel-ui-radius);
-  background-color: var(--skel-ui-color);
-  color: transparent !important;
-  cursor: default !important;
-  user-select: none !important;
-  pointer-events: none !important;
-}
-@keyframes skel-ui-pulse {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}

package/cjs/index.js

@@ -1,53 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
-  default: () => src_default
-});
-module.exports = __toCommonJS(src_exports);
-var import_react = __toESM(require("react"));
-const IsLoadingContext = import_react.default.createContext(false);
-function Root({ isLoading = true, children }) {
-  return <IsLoadingContext.Provider value={isLoading}>{children}</IsLoadingContext.Provider>;
-}
-function Item({ as, color, radius, children, ...props }) {
-  const isLoading = import_react.default.useContext(IsLoadingContext);
-  const Component = as || "p";
-  return <Component
-    {...props}
-    style={{
-      // @ts-ignore
-      ...props.style,
-      "--skel-ui-color": color,
-      "--skel-ui-radius": radius
-    }}
-    data-loading={isLoading}
-  >{isLoading ? null : typeof children === "function" ? children() : children}</Component>;
-}
-var src_default = { Root, Item };

package/dts/index.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-type As<T> = React.ElementType | React.JSXElementConstructor<T>;
-type RootProps = {
-    children: React.ReactNode;
-    isLoading: boolean;
-};
-type ItemProps<T extends As<T>> = {
-    as?: T;
-    children?: React.ReactNode | (() => React.ReactNode);
-    color?: string;
-    radius?: string;
-} & (T extends React.ElementType ? Omit<React.ComponentPropsWithoutRef<T>, "children"> : {});
-declare function Root({ isLoading, children }: RootProps): React.JSX.Element;
-declare function Item<T extends As<T>>({ as, color, radius, children, ...props }: ItemProps<T>): React.JSX.Element;
-declare const _default: {
-    Root: typeof Root;
-    Item: typeof Item;
-};
-export default _default;

package/esm/index.css

@@ -1,21 +0,0 @@
-:root {
-  --skel-ui-color: #f0f0f0;
-  --skel-ui-radius: 0.25rem;
-}
-[data-loading=true] {
-  animation: skel-ui-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate-reverse;
-  border-radius: var(--skel-ui-radius);
-  background-color: var(--skel-ui-color);
-  color: transparent !important;
-  cursor: default !important;
-  user-select: none !important;
-  pointer-events: none !important;
-}
-@keyframes skel-ui-pulse {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}

package/esm/index.js

@@ -1,23 +0,0 @@
-import React from "react";
-const IsLoadingContext = React.createContext(false);
-function Root({ isLoading = true, children }) {
-  return <IsLoadingContext.Provider value={isLoading}>{children}</IsLoadingContext.Provider>;
-}
-function Item({ as, color, radius, children, ...props }) {
-  const isLoading = React.useContext(IsLoadingContext);
-  const Component = as || "p";
-  return <Component
-    {...props}
-    style={{
-      // @ts-ignore
-      ...props.style,
-      "--skel-ui-color": color,
-      "--skel-ui-radius": radius
-    }}
-    data-loading={isLoading}
-  >{isLoading ? null : typeof children === "function" ? children() : children}</Component>;
-}
-var src_default = { Root, Item };
-export {
-  src_default as default
-};