deepsea-components 3.1.0 → 3.1.1

package/dist/cjs/components/HlsPlayer.d.ts

@@ -2,5 +2,4 @@ import { MediaHTMLAttributes } from "react";
 export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
     src: string;
 }
-declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
-export default HlsPlayer;
+export declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/cjs/components/HlsPlayer.js

@@ -30,7 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/HlsPlayer.tsx
 var HlsPlayer_exports = {};
 __export(HlsPlayer_exports, {
-  default: () => HlsPlayer_default
+  HlsPlayer: () => HlsPlayer
 });
 module.exports = __toCommonJS(HlsPlayer_exports);
 var import_hls = __toESM(require("hls.js"));
@@ -58,5 +58,8 @@ var HlsPlayer = (0, import_react.forwardRef)((props, ref) => {
   }, [src]);
   return /* @__PURE__ */ React.createElement("video", { ref: video, ...rest });
 });
-var HlsPlayer_default = HlsPlayer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HlsPlayer
+});
 //# sourceMappingURL=HlsPlayer.js.map

package/dist/cjs/components/HlsPlayer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/HlsPlayer.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAgB;AAChB,mBAAwF;AAMxF,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAC3E,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;AAED,IAAO,oBAAQ;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAgB;AAChB,mBAAwF;AAMjF,IAAM,gBAAY,yBAA6C,CAAC,OAAO,QAAQ;AAClF,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,CAAC;AAEjD,8BAAU,MAAM;AACZ,UAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,QAAI,CAAC,UAAU,CAAC;AAAK;AACrB,QAAI,OAAO,YAAY,+BAA+B,GAAG;AACrD,aAAO,MAAM;AACb;AAAA,IACJ;AACA,QAAI,WAAAA,QAAI,YAAY,GAAG;AACnB,YAAM,MAAM,IAAI,WAAAA,QAAI;AACpB,UAAI,WAAW,GAAG;AAClB,UAAI,YAAY,MAAM;AACtB,aAAO,MAAM;AACT,YAAI,QAAQ;AAAA,MAChB;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,oCAAC,WAAM,KAAK,OAAQ,GAAG,MAAM;AACxC,CAAC;",
   "names": ["Hls"]
 }

package/dist/cjs/components/Skeleton.d.ts

@@ -1,3 +1,5 @@
 import { HTMLAttributes } from "react";
-declare const Skeleton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export default Skeleton;
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    loading?: boolean;
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/Skeleton.js

@@ -20,14 +20,15 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/Skeleton.tsx
 var Skeleton_exports = {};
 __export(Skeleton_exports, {
-  default: () => Skeleton_default
+  Skeleton: () => Skeleton
 });
 module.exports = __toCommonJS(Skeleton_exports);
 var import_css = require("@emotion/css");
 var import_deepsea_tools = require("deepsea-tools");
 var import_react = require("react");
 var Skeleton = (0, import_react.forwardRef)((props, ref) => {
-  const { className, ...rest } = props;
+  let { className, loading, children, ...rest } = props;
+  loading ??= children === void 0 || children === null;
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -42,20 +43,25 @@ var Skeleton = (0, import_react.forwardRef)((props, ref) => {
                             background-position: 400px 0px;
                         }
                     }
-
-                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
-                    animation-duration: 1s;
-                    animation-fill-mode: forwards;
-                    animation-iteration-count: infinite;
-                    animation-name: shimmer;
-                    animation-timing-function: linear;
-                    background-size: 800px 104px;
                 `,
+        loading && import_css.css`
+                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `,
         className
       ),
       ...rest
-    }
+    },
+    children
   );
 });
-var Skeleton_default = Skeleton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton
+});
 //# sourceMappingURL=Skeleton.js.map

package/dist/cjs/components/Skeleton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Skeleton.tsx"],
-  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAE3C,IAAM,eAAW,yBAA2D,CAAC,OAAO,QAAQ;AACxF,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAE/B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;AAED,IAAO,mBAAQ;",
+  "sourcesContent": ["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\r\n    loading?: boolean\r\n}\r\n\r\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\r\n    let { className, loading, children, ...rest } = props\r\n\r\n    loading ??= children === undefined || children === null\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n                `,\r\n                loading &&\r\n                    css`\r\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                        animation-duration: 1s;\r\n                        animation-fill-mode: forwards;\r\n                        animation-iteration-count: infinite;\r\n                        animation-name: shimmer;\r\n                        animation-timing-function: linear;\r\n                        background-size: 800px 104px;\r\n                    `,\r\n                className\r\n            )}\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAMpC,IAAM,eAAW,yBAA0C,CAAC,OAAO,QAAQ;AAC9E,MAAI,EAAE,WAAW,SAAS,UAAU,GAAG,KAAK,IAAI;AAEhD,cAAY,aAAa,UAAa,aAAa;AAEnD,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASJ;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IACH;AAAA,EACL;AAER,CAAC;",
   "names": []
 }

package/dist/esm/components/HlsPlayer.d.ts

@@ -2,5 +2,4 @@ import { MediaHTMLAttributes } from "react";
 export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, "src"> {
     src: string;
 }
-declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;
-export default HlsPlayer;
+export declare const HlsPlayer: import("react").ForwardRefExoticComponent<HlsPlayerProps & import("react").RefAttributes<HTMLVideoElement>>;

package/dist/esm/components/HlsPlayer.js

@@ -3,7 +3,7 @@
 import Hls from "hls.js";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
+export const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     src,
     ...rest
@@ -33,5 +33,4 @@ const HlsPlayer = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   });
 });
-export default HlsPlayer;
 //# sourceMappingURL=HlsPlayer.js.map

package/dist/esm/components/HlsPlayer.js.map

@@ -1 +1 @@
-{"version":3,"names":["Hls","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nconst HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n\r\nexport default HlsPlayer\r\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,GAAG,MAAM,QAAQ;AACxB,SAA8BC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM/F,MAAMC,SAAS,gBAAGN,UAAU,CAAmC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACM,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDX,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEW,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChB;IACJ;IACA,IAAIV,GAAG,CAACgB,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIjB,GAAG,CAAC,CAAC;MACrBiB,GAAG,CAACC,UAAU,CAACR,GAAG,CAAC;MACnBO,GAAG,CAACE,WAAW,CAACL,MAAM,CAAC;MACvB,OAAO,MAAM;QACTG,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACV,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAeJ,SAAS"}
+{"version":3,"names":["Hls","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","HlsPlayer","props","ref","src","rest","video","current","player","canPlayType","isSupported","hls","loadSource","attachMedia","destroy"],"sources":["../../../src/components/HlsPlayer.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport Hls from \"hls.js\"\r\nimport { MediaHTMLAttributes, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\r\n\r\nexport interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElement>, \"src\"> {\r\n    src: string\r\n}\r\n\r\nexport const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {\r\n    const { src, ...rest } = props\r\n    const video = useRef<HTMLVideoElement>(null)\r\n\r\n    useImperativeHandle(ref, () => video.current!, [])\r\n\r\n    useEffect(() => {\r\n        const { current: player } = video\r\n        if (!player || !src) return\r\n        if (player.canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            player.src = src\r\n            return\r\n        }\r\n        if (Hls.isSupported()) {\r\n            const hls = new Hls()\r\n            hls.loadSource(src)\r\n            hls.attachMedia(player)\r\n            return () => {\r\n                hls.destroy()\r\n            }\r\n        }\r\n    }, [src])\r\n\r\n    return <video ref={video} {...rest} />\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,OAAOA,GAAG,MAAM,QAAQ;AACxB,SAA8BC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAM/F,OAAO,MAAMC,SAAS,gBAAGN,UAAU,CAAmC,CAACO,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;IAAEC,GAAG;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAC9B,MAAMI,KAAK,GAAGR,MAAM,CAAmB,IAAI,CAAC;EAE5CD,mBAAmB,CAACM,GAAG,EAAE,MAAMG,KAAK,CAACC,OAAQ,EAAE,EAAE,CAAC;EAElDX,SAAS,CAAC,MAAM;IACZ,MAAM;MAAEW,OAAO,EAAEC;IAAO,CAAC,GAAGF,KAAK;IACjC,IAAI,CAACE,MAAM,IAAI,CAACJ,GAAG,EAAE;IACrB,IAAII,MAAM,CAACC,WAAW,CAAC,+BAA+B,CAAC,EAAE;MACrDD,MAAM,CAACJ,GAAG,GAAGA,GAAG;MAChB;IACJ;IACA,IAAIV,GAAG,CAACgB,WAAW,CAAC,CAAC,EAAE;MACnB,MAAMC,GAAG,GAAG,IAAIjB,GAAG,CAAC,CAAC;MACrBiB,GAAG,CAACC,UAAU,CAACR,GAAG,CAAC;MACnBO,GAAG,CAACE,WAAW,CAACL,MAAM,CAAC;MACvB,OAAO,MAAM;QACTG,GAAG,CAACG,OAAO,CAAC,CAAC;MACjB,CAAC;IACL;EACJ,CAAC,EAAE,CAACV,GAAG,CAAC,CAAC;EAET,oBAAOJ,IAAA;IAAOG,GAAG,EAAEG,KAAM;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC1C,CAAC,CAAC"}

package/dist/esm/components/Skeleton.d.ts

@@ -1,3 +1,5 @@
 import { HTMLAttributes } from "react";
-declare const Skeleton: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
-export default Skeleton;
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    loading?: boolean;
+}
+export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/Skeleton.js

@@ -4,11 +4,14 @@ import { css } from "@emotion/css";
 import { clsx } from "deepsea-tools";
 import { forwardRef } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
+export const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
     className,
+    loading,
+    children,
     ...rest
   } = props;
+  loading ??= children === undefined || children === null;
   return /*#__PURE__*/_jsx("div", {
     ref: ref,
     className: clsx(css`
@@ -20,17 +23,17 @@ const Skeleton = /*#__PURE__*/forwardRef((props, ref) => {
                             background-position: 400px 0px;
                         }
                     }
-
-                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
-                    animation-duration: 1s;
-                    animation-fill-mode: forwards;
-                    animation-iteration-count: infinite;
-                    animation-name: shimmer;
-                    animation-timing-function: linear;
-                    background-size: 800px 104px;
-                `, className),
-    ...rest
+                `, loading && css`
+                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `, className),
+    ...rest,
+    children: children
   });
 });
-export default Skeleton;
 //# sourceMappingURL=Skeleton.js.map

package/dist/esm/components/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","ref","className","rest"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nconst Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {\r\n    const { className, ...rest } = props\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n\r\n                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                    animation-duration: 1s;\r\n                    animation-fill-mode: forwards;\r\n                    animation-iteration-count: infinite;\r\n                    animation-name: shimmer;\r\n                    animation-timing-function: linear;\r\n                    background-size: 800px 104px;\r\n                `,\r\n                className\r\n            )}\r\n            {...rest}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Skeleton\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAElD,MAAMC,QAAQ,gBAAGH,UAAU,CAAiD,CAACI,KAAK,EAAEC,GAAG,KAAK;EACxF,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAEpC,oBACIF,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEP,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDQ,SACJ,CAAE;IAAA,GACEC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC;AAEF,eAAeJ,QAAQ"}
+{"version":3,"names":["css","clsx","forwardRef","jsx","_jsx","Skeleton","props","ref","className","loading","children","rest","undefined"],"sources":["../../../src/components/Skeleton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { css } from \"@emotion/css\"\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { forwardRef, HTMLAttributes } from \"react\"\r\n\r\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\r\n    loading?: boolean\r\n}\r\n\r\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\r\n    let { className, loading, children, ...rest } = props\r\n\r\n    loading ??= children === undefined || children === null\r\n\r\n    return (\r\n        <div\r\n            ref={ref}\r\n            className={clsx(\r\n                css`\r\n                    @keyframes shimmer {\r\n                        0% {\r\n                            background-position: -400px 0px;\r\n                        }\r\n                        100% {\r\n                            background-position: 400px 0px;\r\n                        }\r\n                    }\r\n                `,\r\n                loading &&\r\n                    css`\r\n                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\r\n                        animation-duration: 1s;\r\n                        animation-fill-mode: forwards;\r\n                        animation-iteration-count: infinite;\r\n                        animation-name: shimmer;\r\n                        animation-timing-function: linear;\r\n                        background-size: 800px 104px;\r\n                    `,\r\n                className\r\n            )}\r\n            {...rest}>\r\n            {children}\r\n        </div>\r\n    )\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMlD,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAAgC,CAACI,KAAK,EAAEC,GAAG,KAAK;EAC9E,IAAI;IAAEC,SAAS;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAErDG,OAAO,KAAKC,QAAQ,KAAKE,SAAS,IAAIF,QAAQ,KAAK,IAAI;EAEvD,oBACIN,IAAA;IACIG,GAAG,EAAEA,GAAI;IACTC,SAAS,EAAEP,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,EACDS,OAAO,IACHT,GAAI;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,EACLQ,SACJ,CAAE;IAAA,GACEG,IAAI;IAAAD,QAAA,EACPA;EAAQ,CACR,CAAC;AAEd,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "deepsea-components",
-    "version": "3.1.0",
+    "version": "3.1.1",
     "description": "格数科技自用组件库",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",

package/src/components/HlsPlayer.tsx

@@ -7,7 +7,7 @@ export interface HlsPlayerProps extends Omit<MediaHTMLAttributes<HTMLVideoElemen
     src: string
 }
 
-const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
+export const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
     const { src, ...rest } = props
     const video = useRef<HTMLVideoElement>(null)
 
@@ -32,5 +32,3 @@ const HlsPlayer = forwardRef<HTMLVideoElement, HlsPlayerProps>((props, ref) => {
 
     return <video ref={video} {...rest} />
 })
-
-export default HlsPlayer

package/src/components/Skeleton.tsx

@@ -4,8 +4,14 @@ import { css } from "@emotion/css"
 import { clsx } from "deepsea-tools"
 import { forwardRef, HTMLAttributes } from "react"
 
-const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
-    const { className, ...rest } = props
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    loading?: boolean
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {
+    let { className, loading, children, ...rest } = props
+
+    loading ??= children === undefined || children === null
 
     return (
         <div
@@ -20,20 +26,21 @@ const Skeleton = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((pro
                             background-position: 400px 0px;
                         }
                     }
-
-                    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
-                    animation-duration: 1s;
-                    animation-fill-mode: forwards;
-                    animation-iteration-count: infinite;
-                    animation-name: shimmer;
-                    animation-timing-function: linear;
-                    background-size: 800px 104px;
                 `,
+                loading &&
+                    css`
+                        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);
+                        animation-duration: 1s;
+                        animation-fill-mode: forwards;
+                        animation-iteration-count: infinite;
+                        animation-name: shimmer;
+                        animation-timing-function: linear;
+                        background-size: 800px 104px;
+                    `,
                 className
             )}
-            {...rest}
-        />
+            {...rest}>
+            {children}
+        </div>
     )
 })
-
-export default Skeleton