@skel-ui/react 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/index.js +17 -12
  2. package/dist/esm/index.js +17 -12
  3. package/dist/styles.css +26 -5
  4. package/package.json +20 -19
package/dist/cjs/index.js CHANGED
@@ -32,29 +32,34 @@ __export(src_exports, {
32
32
  generatePlaceholder: () => generatePlaceholder
33
33
  });
34
34
  module.exports = __toCommonJS(src_exports);
35
+ var import_jsx_runtime = require("react/jsx-runtime");
35
36
  var import_react = __toESM(require("react"));
36
37
  const IsLoadingContext = import_react.default.createContext(false);
37
38
  function Root({ as, isLoading = true, children, ...rest }) {
38
39
  const Component = as || "div";
39
- return <IsLoadingContext.Provider value={isLoading}><Component {...rest} data-loading={isLoading}>{children}</Component></IsLoadingContext.Provider>;
40
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IsLoadingContext.Provider, { value: isLoading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...rest, "data-loading": isLoading, children }) });
40
41
  }
41
42
  function Item({ as, color, radius, children, ...rest }) {
42
43
  const isLoading = import_react.default.useContext(IsLoadingContext);
43
44
  const component = as || "p";
44
45
  const Component = typeof component === "string" ? component : isLoading ? "div" : component;
45
- return <Component
46
- {...rest}
47
- style={{
48
- // @ts-ignore
49
- ...rest.style,
50
- "--skel-ui-color": color,
51
- "--skel-ui-radius": radius
52
- }}
53
- data-loading={isLoading}
54
- >{isLoading ? "\u200C" : typeof children === "function" ? children() : children}</Component>;
46
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
47
+ Component,
48
+ {
49
+ ...rest,
50
+ style: {
51
+ ...rest.style,
52
+ "--skel-ui-color": color,
53
+ "--skel-ui-radius": radius
54
+ },
55
+ "data-loading": isLoading,
56
+ "data-skel-item": true,
57
+ children: isLoading ? " \u200C " : typeof children === "function" ? children() : children
58
+ }
59
+ );
55
60
  }
56
61
  function generatePlaceholder(length, primary) {
57
- return Array(length).fill(null).map((_, index) => ({ [primary]: `id-${index}` }));
62
+ return Array(length).fill(null).map((_, index) => ({ [primary]: `skel-ui-id-${index}` }));
58
63
  }
59
64
  const Skel = { Root, Item };
60
65
  var src_default = Skel;
package/dist/esm/index.js CHANGED
@@ -1,26 +1,31 @@
1
+ import { jsx } from "react/jsx-runtime";
1
2
  import React from "react";
2
3
  const IsLoadingContext = React.createContext(false);
3
4
  function Root({ as, isLoading = true, children, ...rest }) {
4
5
  const Component = as || "div";
5
- return <IsLoadingContext.Provider value={isLoading}><Component {...rest} data-loading={isLoading}>{children}</Component></IsLoadingContext.Provider>;
6
+ return /* @__PURE__ */ jsx(IsLoadingContext.Provider, { value: isLoading, children: /* @__PURE__ */ jsx(Component, { ...rest, "data-loading": isLoading, children }) });
6
7
  }
7
8
  function Item({ as, color, radius, children, ...rest }) {
8
9
  const isLoading = React.useContext(IsLoadingContext);
9
10
  const component = as || "p";
10
11
  const Component = typeof component === "string" ? component : isLoading ? "div" : component;
11
- return <Component
12
- {...rest}
13
- style={{
14
- // @ts-ignore
15
- ...rest.style,
16
- "--skel-ui-color": color,
17
- "--skel-ui-radius": radius
18
- }}
19
- data-loading={isLoading}
20
- >{isLoading ? "\u200C" : typeof children === "function" ? children() : children}</Component>;
12
+ return /* @__PURE__ */ jsx(
13
+ Component,
14
+ {
15
+ ...rest,
16
+ style: {
17
+ ...rest.style,
18
+ "--skel-ui-color": color,
19
+ "--skel-ui-radius": radius
20
+ },
21
+ "data-loading": isLoading,
22
+ "data-skel-item": true,
23
+ children: isLoading ? " \u200C " : typeof children === "function" ? children() : children
24
+ }
25
+ );
21
26
  }
22
27
  function generatePlaceholder(length, primary) {
23
- return Array(length).fill(null).map((_, index) => ({ [primary]: `id-${index}` }));
28
+ return Array(length).fill(null).map((_, index) => ({ [primary]: `skel-ui-id-${index}` }));
24
29
  }
25
30
  const Skel = { Root, Item };
26
31
  var src_default = Skel;
package/dist/styles.css CHANGED
@@ -1,21 +1,42 @@
1
1
  :root {
2
2
  --skel-ui-color: #cbd5e1;
3
+ --skel-ui-shimmer: #f1f0f0;
3
4
  --skel-ui-radius: 0.25rem;
4
5
  }
5
- [data-loading=true] {
6
+ [data-skel-item][data-loading=true] {
7
+ animation: skel-ui-shimmer 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
8
+ background:
9
+ linear-gradient(
10
+ to right,
11
+ var(--skel-ui-color) 33%,
12
+ var(--skel-ui-shimmer),
13
+ var(--skel-ui-color) 66%);
14
+ background-size: 300%;
6
15
  border-radius: var(--skel-ui-radius);
7
- background-color: var(--skel-ui-color) !important;
8
- color: transparent !important;
9
16
  cursor: default !important;
10
17
  user-select: none !important;
11
18
  pointer-events: none !important;
12
- animation: skel-ui-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate-reverse !important;
19
+ }
20
+ .skel-ui-pluse [data-skel-item][data-loading=true] {
21
+ animation: skel-ui-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
22
+ background-color: var(--skel-ui-color) !important;
13
23
  }
14
24
  @keyframes skel-ui-pulse {
15
25
  0% {
16
26
  opacity: 1;
17
27
  }
18
- 100% {
28
+ 50% {
19
29
  opacity: 0.5;
20
30
  }
31
+ 100% {
32
+ opacity: 1;
33
+ }
34
+ }
35
+ @keyframes skel-ui-shimmer {
36
+ 0% {
37
+ background-position: 100%;
38
+ }
39
+ 100% {
40
+ background-position: 0%;
41
+ }
21
42
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@skel-ui/react",
3
3
  "author": "https://github.com/sudoaugustin",
4
- "version": "0.1.1",
4
+ "version": "0.2.0",
5
5
  "license": "MIT",
6
6
  "description": "Next era of skeleton loading for React",
7
7
  "files": [
@@ -39,23 +39,24 @@
39
39
  },
40
40
  "devDependencies": {
41
41
  "@chromatic-com/storybook": "^1.9.0",
42
- "@storybook/addon-essentials": "^8.3.3",
43
- "@storybook/addon-interactions": "^8.3.3",
44
- "@storybook/addon-links": "^8.3.3",
45
- "@storybook/addon-onboarding": "^8.3.3",
46
- "@storybook/blocks": "^8.3.3",
47
- "@storybook/react": "^8.3.3",
48
- "@storybook/react-vite": "^8.3.3",
49
- "@storybook/test": "^8.3.3",
50
- "@types/react": "^18.3.9",
51
- "@types/react-dom": "^18.0.10",
52
- "esbuild": "^0.17.5",
53
- "react": "^17.0.0",
54
- "react-dom": "^17.0.0",
55
- "storybook": "^8.3.3",
56
- "swr": "^2.2.5",
42
+ "@heroicons/react": "^2.1.5",
43
+ "@storybook/addon-essentials": "^8.3.4",
44
+ "@storybook/addon-interactions": "^8.3.4",
45
+ "@storybook/addon-links": "^8.3.4",
46
+ "@storybook/addon-onboarding": "^8.3.4",
47
+ "@storybook/blocks": "^8.3.4",
48
+ "@storybook/react": "^8.3.4",
49
+ "@storybook/react-vite": "^8.3.4",
50
+ "@storybook/test": "^8.3.4",
51
+ "@types/react": "^18.2.0",
52
+ "@types/react-dom": "^18.2.0",
53
+ "esbuild": "^0.24.0",
54
+ "react": "^18.3.1",
55
+ "react-dom": "^18.3.1",
56
+ "storybook": "^8.3.4",
57
57
  "tailwindcss": "^3.4.13",
58
- "typescript": "^5.6.2"
58
+ "typescript": "^5.6.2",
59
+ "hooks": "0.0.1"
59
60
  },
60
61
  "peerDependencies": {
61
62
  "react": "^17.0 || ^18.0",
@@ -66,7 +67,7 @@
66
67
  "build": "rm -rf dist && pnpm build:dts && pnpm build:css && pnpm build:esm && pnpm build:cjs",
67
68
  "build:dts": "tsc -p tsconfig.build.json --outDir dist",
68
69
  "build:css": "esbuild src/styles.css --outdir=dist",
69
- "build:esm": "esbuild src/*.ts* --format=esm --outdir=dist/esm",
70
- "build:cjs": "esbuild src/*.ts* --format=cjs --outdir=dist/cjs"
70
+ "build:esm": "esbuild src/*.ts* --jsx=automatic --format=esm --outdir=dist/esm",
71
+ "build:cjs": "esbuild src/*.ts* --jsx=automatic --format=cjs --outdir=dist/cjs"
71
72
  }
72
73
  }