@lobehub/ui 3.4.2 → 3.4.3

package/es/Video/index.mjs

@@ -0,0 +1,107 @@
+'use client';
+
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
+import { useStyles } from "./style.mjs";
+import { Skeleton } from "antd";
+import { memo, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { PlayIcon } from "lucide-react";
+
+//#region src/Video/index.tsx
+const Video = memo(({ ref, preload = "auto", src, style, classNames, className, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, onEnded, onPause, onPlay, onPlaying, width, height, onMouseEnter, styles: customStyles, onMouseLeave, preview = true, isLoading, variant = "filled", autoPlay, ...rest }) => {
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [showControls, setShowControls] = useState(false);
+	const { cx, styles, theme } = useStyles({
+		maxHeight,
+		maxWidth,
+		minHeight,
+		minWidth
+	});
+	const variants = useMemo(() => cva(styles.root, {
+		defaultVariants: { variant: "filled" },
+		variants: { variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		} }
+	}), [styles]);
+	if (isLoading) return /* @__PURE__ */ jsx(Skeleton.Avatar, {
+		active: true,
+		style: {
+			borderRadius: theme.borderRadius,
+			height,
+			maxHeight,
+			maxWidth,
+			minHeight,
+			minWidth,
+			width
+		}
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		className: cx(variants({ variant }), className, classNames?.wrapper),
+		height,
+		ref,
+		style: {
+			...style,
+			...customStyles?.wrapper
+		},
+		width,
+		children: [preview && !isPlaying && /* @__PURE__ */ jsx(FlexBasic_default, {
+			align: "center",
+			className: cx(styles.mask, classNames?.mask),
+			justify: "center",
+			style: customStyles?.mask,
+			children: /* @__PURE__ */ jsx(ActionIcon_default, {
+				color: "#fff",
+				icon: PlayIcon,
+				variant: "filled"
+			})
+		}), /* @__PURE__ */ jsx("video", {
+			autoPlay,
+			className: cx(styles.video, classNames?.video),
+			controls: showControls,
+			height,
+			onEnded: (e) => {
+				setIsPlaying(false);
+				onEnded?.(e);
+			},
+			onMouseEnter: (e) => {
+				setShowControls(true);
+				onMouseEnter?.(e);
+			},
+			onMouseLeave: (e) => {
+				setShowControls(false);
+				onMouseLeave?.(e);
+			},
+			onPause: (e) => {
+				setIsPlaying(false);
+				onPause?.(e);
+			},
+			onPlay: (e) => {
+				setIsPlaying(true);
+				onPlay?.(e);
+			},
+			onPlaying: (e) => {
+				setIsPlaying(true);
+				onPlaying?.(e);
+			},
+			preload,
+			style: {
+				height: "auto",
+				maxWidth: "100%",
+				...customStyles?.video
+			},
+			width,
+			...rest,
+			children: /* @__PURE__ */ jsx("source", { src })
+		})]
+	});
+});
+Video.displayName = "Video";
+var Video_default = Video;
+
+//#endregion
+export { Video_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/Video/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Flexbox","ActionIcon"],"sources":["../../src/Video/index.tsx"],"sourcesContent":["'use client';\n\nimport { Skeleton } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { PlayIcon } from 'lucide-react';\nimport { type CSSProperties, type Ref, memo, useMemo, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox, FlexboxProps } from '@/Flex';\nimport type { VideoProps as VProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport interface VideoProps extends VProps, Pick<FlexboxProps, 'width' | 'height'> {\n  autoPlay?: boolean;\n  classNames?: {\n    mask?: string;\n    video?: string;\n    wrapper?: string;\n  };\n  isLoading?: boolean;\n  loop?: boolean;\n  maxHeight?: number | string;\n  maxWidth?: number | string;\n  minHeight?: number | string;\n  minWidth?: number | string;\n  muted?: HTMLVideoElement['muted'];\n  onEnded?: VProps['onEnded'];\n  onMouseEnter?: VProps['onMouseEnter'];\n  onMouseLeave?: VProps['onMouseLeave'];\n  onPause?: VProps['onPause'];\n  onPlay?: VProps['onPlay'];\n  onPlaying?: VProps['onPlaying'];\n  onProgress?: VProps['onProgress'];\n  poster?: string;\n  preload?: HTMLVideoElement['preload'];\n  preview?: boolean;\n  ref?: Ref<HTMLDivElement>;\n  size?: number | string;\n  src: string;\n  styles?: {\n    mask?: CSSProperties;\n    video?: CSSProperties;\n    wrapper?: CSSProperties;\n  };\n  variant?: 'borderless' | 'filled' | 'outlined';\n}\n\nconst Video = memo<VideoProps>(\n  ({\n    ref,\n    preload = 'auto',\n    src,\n    style,\n    classNames,\n    className,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    onEnded,\n    onPause,\n    onPlay,\n    onPlaying,\n    width,\n    height,\n    onMouseEnter,\n    styles: customStyles,\n    onMouseLeave,\n    preview = true,\n    isLoading,\n    variant = 'filled',\n    autoPlay,\n    ...rest\n  }) => {\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [showControls, setShowControls] = useState(false);\n    const { cx, styles, theme } = useStyles({\n      maxHeight,\n      maxWidth,\n      minHeight,\n      minWidth,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    if (isLoading)\n      return (\n        <Skeleton.Avatar\n          active\n          style={{\n            borderRadius: theme.borderRadius,\n            height,\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            width,\n          }}\n        />\n      );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className, classNames?.wrapper)}\n        height={height}\n        ref={ref}\n        style={{\n          ...style,\n          ...customStyles?.wrapper,\n        }}\n        width={width}\n      >\n        {preview && !isPlaying && (\n          <Flexbox\n            align={'center'}\n            className={cx(styles.mask, classNames?.mask)}\n            justify={'center'}\n            style={customStyles?.mask}\n          >\n            <ActionIcon color={'#fff'} icon={PlayIcon} variant={'filled'} />\n          </Flexbox>\n        )}\n        <video\n          autoPlay={autoPlay}\n          className={cx(styles.video, classNames?.video)}\n          controls={showControls}\n          height={height}\n          onEnded={(e) => {\n            setIsPlaying(false);\n            onEnded?.(e);\n          }}\n          onMouseEnter={(e) => {\n            setShowControls(true);\n            onMouseEnter?.(e);\n          }}\n          onMouseLeave={(e) => {\n            setShowControls(false);\n            onMouseLeave?.(e);\n          }}\n          onPause={(e) => {\n            setIsPlaying(false);\n            onPause?.(e);\n          }}\n          onPlay={(e) => {\n            setIsPlaying(true);\n            onPlay?.(e);\n          }}\n          onPlaying={(e) => {\n            setIsPlaying(true);\n            onPlaying?.(e);\n          }}\n          preload={preload}\n          style={{\n            height: 'auto',\n            maxWidth: '100%',\n            ...customStyles?.video,\n          }}\n          width={width}\n          {...rest}\n        >\n          <source src={src} />\n        </video>\n      </Flexbox>\n    );\n  },\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;AAgDA,MAAM,QAAQ,MACX,EACC,KACA,UAAU,QACV,KACA,OACA,YACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,SACA,QACA,WACA,OACA,QACA,cACA,QAAQ,cACR,cACA,UAAU,MACV,WACA,UAAU,UACV,UACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,EAAE,IAAI,QAAQ,UAAU,UAAU;EACtC;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EACf,SAAS,UACV;EAED,UAAU,EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;AAED,KAAI,UACF,QACE,oBAAC,SAAS;EACR;EACA,OAAO;GACL,cAAc,MAAM;GACpB;GACA;GACA;GACA;GACA;GACA;GACD;GACD;AAGN,QACE,qBAACA;EACC,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,WAAW,YAAY,QAAQ;EAC5D;EACH;EACL,OAAO;GACL,GAAG;GACH,GAAG,cAAc;GAClB;EACM;aAEN,WAAW,CAAC,aACX,oBAACA;GACC,OAAO;GACP,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAC5C,SAAS;GACT,OAAO,cAAc;aAErB,oBAACC;IAAW,OAAO;IAAQ,MAAM;IAAU,SAAS;KAAY;IACxD,EAEZ,oBAAC;GACW;GACV,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,UAAU;GACF;GACR,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,eAAe,MAAM;AACnB,oBAAgB,KAAK;AACrB,mBAAe,EAAE;;GAEnB,eAAe,MAAM;AACnB,oBAAgB,MAAM;AACtB,mBAAe,EAAE;;GAEnB,UAAU,MAAM;AACd,iBAAa,MAAM;AACnB,cAAU,EAAE;;GAEd,SAAS,MAAM;AACb,iBAAa,KAAK;AAClB,aAAS,EAAE;;GAEb,YAAY,MAAM;AAChB,iBAAa,KAAK;AAClB,gBAAY,EAAE;;GAEP;GACT,OAAO;IACL,QAAQ;IACR,UAAU;IACV,GAAG,cAAc;IAClB;GACM;GACP,GAAI;aAEJ,oBAAC,YAAY,MAAO;IACd;GACA;EAGf;AAED,MAAM,cAAc;AAEpB,oBAAe"}

package/es/Video/style.mjs

@@ -0,0 +1,60 @@
+import { createStyles } from "antd-style";
+
+//#region src/Video/style.ts
+const useStyles = createStyles(({ css: css$1, token, cx: cx$1, stylish }, { maxHeight, maxWidth, minWidth, minHeight } = {}) => {
+	const MAX_HEIGHT = typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
+	const MAX_WIDTH = typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth;
+	const MIN_HEIGHT = typeof minHeight === "number" ? `${minHeight}px` : minHeight;
+	const MIN_WIDTH = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
+	const mask = cx$1(css$1`
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+
+      width: 100%;
+      height: 100%;
+
+      opacity: 0;
+      background: ${token.colorBgMask};
+
+      transition: opacity 0.3s;
+    `);
+	return {
+		borderless: stylish.variantBorderlessWithoutHover,
+		filled: cx$1(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),
+		mask,
+		outlined: stylish.variantOutlinedWithoutHover,
+		root: css$1`
+        position: relative;
+
+        overflow: hidden;
+
+        width: 100%;
+        min-width: ${MIN_WIDTH};
+        max-width: ${MAX_WIDTH};
+        height: auto;
+        min-height: ${MIN_HEIGHT};
+        max-height: ${MAX_HEIGHT};
+        margin-block: 0 1em;
+
+        background: ${token.colorFillTertiary};
+        border-radius: ${token.borderRadius}px;
+
+        &:hover {
+          .${mask} {
+            opacity: 1;
+          }
+        }
+      `,
+		video: css$1`
+        cursor: pointer;
+        width: 100%;
+      `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Video/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../src/Video/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(\n  (\n    { css, token, cx, stylish },\n    {\n      maxHeight,\n      maxWidth,\n      minWidth,\n      minHeight,\n    }: {\n      maxHeight?: number | string;\n      maxWidth?: number | string;\n      minHeight?: number | string;\n      minWidth?: number | string;\n    } = {},\n  ) => {\n    const MAX_HEIGHT = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n    const MAX_WIDTH = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;\n    const MIN_HEIGHT = typeof minHeight === 'number' ? `${minHeight}px` : minHeight;\n    const MIN_WIDTH = typeof minWidth === 'number' ? `${minWidth}px` : minWidth;\n\n    const mask = cx(css`\n      pointer-events: none;\n\n      position: absolute;\n      z-index: 1;\n      inset: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n      background: ${token.colorBgMask};\n\n      transition: opacity 0.3s;\n    `);\n\n    return {\n      borderless: stylish.variantBorderlessWithoutHover,\n      filled: cx(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),\n      mask,\n      outlined: stylish.variantOutlinedWithoutHover,\n      root: css`\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        min-width: ${MIN_WIDTH};\n        max-width: ${MAX_WIDTH};\n        height: auto;\n        min-height: ${MIN_HEIGHT};\n        max-height: ${MAX_HEIGHT};\n        margin-block: 0 1em;\n\n        background: ${token.colorFillTertiary};\n        border-radius: ${token.borderRadius}px;\n\n        &:hover {\n          .${mask} {\n            opacity: 1;\n          }\n        }\n      `,\n      video: css`\n        cursor: pointer;\n        width: 100%;\n      `,\n    };\n  },\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cAErB,EAAE,YAAK,OAAO,UAAI,WAClB,EACE,WACA,UACA,UACA,cAME,EAAE,KACH;CACH,MAAM,aAAa,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;CACtE,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CACnE,MAAM,aAAa,OAAO,cAAc,WAAW,GAAG,UAAU,MAAM;CACtE,MAAM,YAAY,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAEnE,MAAM,OAAOA,KAAG,KAAG;;;;;;;;;;;oBAWH,MAAM,YAAY;;;MAGhC;AAEF,QAAO;EACL,YAAY,QAAQ;EACpB,QAAQA,KAAG,QAAQ,6BAA6B,QAAQ,0BAA0B;EAClF;EACA,UAAU,QAAQ;EAClB,MAAM,KAAG;;;;;;qBAMM,UAAU;qBACV,UAAU;;sBAET,WAAW;sBACX,WAAW;;;sBAGX,MAAM,kBAAkB;yBACrB,MAAM,aAAa;;;aAG/B,KAAK;;;;;EAKZ,OAAO,KAAG;;;;EAIX;EAEJ"}

package/es/awesome/AuroraBackground/AuroraBackground.d.mts

@@ -0,0 +1,8 @@
+import { AuroraBackgroundProps } from "./type.mjs";
+import * as react105 from "react";
+
+//#region src/awesome/AuroraBackground/AuroraBackground.d.ts
+declare const AuroraBackground: react105.NamedExoticComponent<AuroraBackgroundProps>;
+//#endregion
+export { AuroraBackground };
+//# sourceMappingURL=AuroraBackground.d.mts.map

package/es/awesome/AuroraBackground/AuroraBackground.mjs

@@ -0,0 +1,35 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/awesome/AuroraBackground/AuroraBackground.tsx
+const AuroraBackground = memo(({ ref, classNames, styles: customStyles, children, ...rest }) => {
+	const { cx, styles } = useStyles();
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		ref,
+		...rest,
+		children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+			className: cx(styles.wrapper, classNames?.wrapper),
+			style: customStyles?.wrapper,
+			children: /* @__PURE__ */ jsx("div", { className: styles.bg })
+		}), /* @__PURE__ */ jsx(FlexBasic_default, {
+			className: classNames?.content,
+			flex: 1,
+			style: {
+				zIndex: 1,
+				...customStyles?.content
+			},
+			width: "100%",
+			children
+		})]
+	});
+});
+AuroraBackground.displayName = "AuroraBackground";
+var AuroraBackground_default = AuroraBackground;
+
+//#endregion
+export { AuroraBackground_default as default };
+//# sourceMappingURL=AuroraBackground.mjs.map

package/es/awesome/AuroraBackground/AuroraBackground.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuroraBackground.mjs","names":["Flexbox"],"sources":["../../../src/awesome/AuroraBackground/AuroraBackground.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from './style';\nimport type { AuroraBackgroundProps } from './type';\n\nconst AuroraBackground = memo<AuroraBackgroundProps>(\n  ({ ref, classNames, styles: customStyles, children, ...rest }) => {\n    const { cx, styles } = useStyles();\n    return (\n      <Flexbox ref={ref} {...rest}>\n        <Flexbox className={cx(styles.wrapper, classNames?.wrapper)} style={customStyles?.wrapper}>\n          <div className={styles.bg} />\n        </Flexbox>\n        <Flexbox\n          className={classNames?.content}\n          flex={1}\n          style={{ zIndex: 1, ...customStyles?.content }}\n          width={'100%'}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nAuroraBackground.displayName = 'AuroraBackground';\n\nexport default AuroraBackground;\n"],"mappings":";;;;;;;;AASA,MAAM,mBAAmB,MACtB,EAAE,KAAK,YAAY,QAAQ,cAAc,UAAU,GAAG,WAAW;CAChE,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,qBAACA;EAAa;EAAK,GAAI;aACrB,oBAACA;GAAQ,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAAE,OAAO,cAAc;aAChF,oBAAC,SAAI,WAAW,OAAO,KAAM;IACrB,EACV,oBAACA;GACC,WAAW,YAAY;GACvB,MAAM;GACN,OAAO;IAAE,QAAQ;IAAG,GAAG,cAAc;IAAS;GAC9C,OAAO;GAEN;IACO;GACF;EAGf;AAED,iBAAiB,cAAc;AAE/B,+BAAe"}

package/es/awesome/AuroraBackground/index.d.mts

@@ -0,0 +1,2 @@
+import { AuroraBackgroundProps } from "./type.mjs";
+import { AuroraBackground } from "./AuroraBackground.mjs";

package/es/awesome/AuroraBackground/style.mjs

@@ -0,0 +1,104 @@
+import { createStyles, keyframes } from "antd-style";
+
+//#region src/awesome/AuroraBackground/style.ts
+const useStyles = createStyles(({ cx: cx$1, isDarkMode, css: css$1, responsive }) => {
+	const aurora = keyframes`
+  0% {
+    background-position: 50% 50%, 50% 50%;
+  }
+  100% {
+    background-position: 350% 50%, 350% 50%;
+  }
+`;
+	const dark = css$1`
+    background-image:
+      repeating-linear-gradient(
+        100deg,
+        rgb(0, 0, 0) 0%,
+        rgb(0, 0, 0) 7%,
+        rgba(0, 0, 0, 0%) 10%,
+        rgba(0, 0, 0, 0%) 12%,
+        rgb(0, 0, 0) 16%
+      ),
+      repeating-linear-gradient(
+        100deg,
+        rgb(59, 130, 246) 10%,
+        rgb(165, 180, 252) 15%,
+        rgb(147, 197, 253) 20%,
+        rgb(221, 214, 254) 25%,
+        rgb(96, 165, 250) 30%
+      );
+  `;
+	const light = css$1`
+    background-image:
+      repeating-linear-gradient(
+        100deg,
+        rgb(255, 255, 255) 0%,
+        rgb(255, 255, 255) 7%,
+        rgba(0, 0, 0, 0%) 10%,
+        rgba(0, 0, 0, 0%) 12%,
+        rgb(255, 255, 255) 16%
+      ),
+      repeating-linear-gradient(
+        100deg,
+        rgb(59, 130, 246) 10%,
+        rgb(165, 180, 252) 15%,
+        rgb(147, 197, 253) 20%,
+        rgb(221, 214, 254) 25%,
+        rgb(96, 165, 250) 30%
+      );
+  `;
+	const background = isDarkMode ? dark : light;
+	return {
+		bg: cx$1(background, css$1`
+        pointer-events: none;
+        will-change: transform;
+
+        position: absolute;
+        inset: -10px;
+
+        max-height: 100vh;
+
+        opacity: ${isDarkMode ? .3 : .6};
+        background-position:
+          50% 50%,
+          50% 50%;
+        background-size: 300%, 200%;
+        filter: blur(10px) invert(${isDarkMode ? 0 : 1});
+
+        animation: ${aurora} 100s linear infinite;
+
+        mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);
+
+        &::after {
+          ${background};
+          position: absolute;
+
+          content: '';
+
+          inset: 0;
+
+          animation: ${aurora} 100s linear infinite;
+
+          mix-blend-mode: difference;
+          background-attachment: fixed;
+          background-size: 200%, 100%;
+        }
+
+        ${responsive.mobile} {
+          transform: scale(2);
+          max-height: 25vh;
+        }
+      `),
+		wrapper: css$1`
+      position: absolute;
+      z-index: 0;
+      inset: 0;
+      overflow: hidden;
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/awesome/AuroraBackground/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/awesome/AuroraBackground/style.ts"],"sourcesContent":["import { createStyles, keyframes } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, isDarkMode, css, responsive }) => {\n  const aurora = keyframes`\n  0% {\n    background-position: 50% 50%, 50% 50%;\n  }\n  100% {\n    background-position: 350% 50%, 350% 50%;\n  }\n`;\n\n  const dark = css`\n    background-image:\n      repeating-linear-gradient(\n        100deg,\n        rgb(0, 0, 0) 0%,\n        rgb(0, 0, 0) 7%,\n        rgba(0, 0, 0, 0%) 10%,\n        rgba(0, 0, 0, 0%) 12%,\n        rgb(0, 0, 0) 16%\n      ),\n      repeating-linear-gradient(\n        100deg,\n        rgb(59, 130, 246) 10%,\n        rgb(165, 180, 252) 15%,\n        rgb(147, 197, 253) 20%,\n        rgb(221, 214, 254) 25%,\n        rgb(96, 165, 250) 30%\n      );\n  `;\n\n  const light = css`\n    background-image:\n      repeating-linear-gradient(\n        100deg,\n        rgb(255, 255, 255) 0%,\n        rgb(255, 255, 255) 7%,\n        rgba(0, 0, 0, 0%) 10%,\n        rgba(0, 0, 0, 0%) 12%,\n        rgb(255, 255, 255) 16%\n      ),\n      repeating-linear-gradient(\n        100deg,\n        rgb(59, 130, 246) 10%,\n        rgb(165, 180, 252) 15%,\n        rgb(147, 197, 253) 20%,\n        rgb(221, 214, 254) 25%,\n        rgb(96, 165, 250) 30%\n      );\n  `;\n\n  const background = isDarkMode ? dark : light;\n\n  return {\n    bg: cx(\n      background,\n      css`\n        pointer-events: none;\n        will-change: transform;\n\n        position: absolute;\n        inset: -10px;\n\n        max-height: 100vh;\n\n        opacity: ${isDarkMode ? 0.3 : 0.6};\n        background-position:\n          50% 50%,\n          50% 50%;\n        background-size: 300%, 200%;\n        filter: blur(10px) invert(${isDarkMode ? 0 : 1});\n\n        animation: ${aurora} 100s linear infinite;\n\n        mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n        &::after {\n          ${background};\n          position: absolute;\n\n          content: '';\n\n          inset: 0;\n\n          animation: ${aurora} 100s linear infinite;\n\n          mix-blend-mode: difference;\n          background-attachment: fixed;\n          background-size: 200%, 100%;\n        }\n\n        ${responsive.mobile} {\n          transform: scale(2);\n          max-height: 25vh;\n        }\n      `,\n    ),\n    wrapper: css`\n      position: absolute;\n      z-index: 0;\n      inset: 0;\n      overflow: hidden;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,YAAY,YAAK,iBAAiB;CAC7E,MAAM,SAAS,SAAS;;;;;;;;CASxB,MAAM,OAAO,KAAG;;;;;;;;;;;;;;;;;;;CAoBhB,MAAM,QAAQ,KAAG;;;;;;;;;;;;;;;;;;;CAoBjB,MAAM,aAAa,aAAa,OAAO;AAEvC,QAAO;EACL,IAAIA,KACF,YACA,KAAG;;;;;;;;;mBASU,aAAa,KAAM,GAAI;;;;;oCAKN,aAAa,IAAI,EAAE;;qBAElC,OAAO;;;;;YAKhB,WAAW;;;;;;;uBAOA,OAAO;;;;;;;UAOpB,WAAW,OAAO;;;;QAKvB;EACD,SAAS,KAAG;;;;;;EAMb;EACD"}

package/es/awesome/AuroraBackground/type.d.mts

@@ -0,0 +1,19 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { CSSProperties, Ref } from "react";
+
+//#region src/awesome/AuroraBackground/type.d.ts
+interface AuroraBackgroundProps extends FlexboxProps {
+  classNames?: {
+    content?: string;
+    wrapper?: string;
+  };
+  ref?: Ref<HTMLDivElement>;
+  styles?: {
+    content?: CSSProperties;
+    wrapper?: CSSProperties;
+  };
+}
+//#endregion
+export { AuroraBackgroundProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/BottomGradientButton/BottomGradientButton.d.mts

@@ -0,0 +1,9 @@
+import { ButtonProps } from "../../Button/type.mjs";
+import "../../Button/index.mjs";
+import * as react106 from "react";
+
+//#region src/awesome/BottomGradientButton/BottomGradientButton.d.ts
+declare const BottomGradientButton: react106.NamedExoticComponent<ButtonProps>;
+//#endregion
+export { BottomGradientButton };
+//# sourceMappingURL=BottomGradientButton.d.mts.map

package/es/awesome/BottomGradientButton/BottomGradientButton.mjs

@@ -0,0 +1,30 @@
+'use client';
+
+import Button_default from "../../Button/Button.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/awesome/BottomGradientButton/BottomGradientButton.tsx
+const BottomGradientButton = memo(({ className, children, style, ref, ...rest }) => {
+	const { cx, styles } = useStyles();
+	return /* @__PURE__ */ jsx(Button_default, {
+		className: cx(styles, className),
+		ref,
+		shape: "round",
+		style: {
+			paddingInline: 16,
+			width: "unset",
+			...style
+		},
+		variant: "filled",
+		...rest,
+		children
+	});
+});
+BottomGradientButton.displayName = "BottomGradientButton";
+var BottomGradientButton_default = BottomGradientButton;
+
+//#endregion
+export { BottomGradientButton_default as default };
+//# sourceMappingURL=BottomGradientButton.mjs.map

package/es/awesome/BottomGradientButton/BottomGradientButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomGradientButton.mjs","names":["Button"],"sources":["../../../src/awesome/BottomGradientButton/BottomGradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport Button from '@/Button';\n\nimport { useStyles } from './style';\nimport type { BottomGradientButtonProps } from './type';\n\nconst BottomGradientButton = memo<BottomGradientButtonProps>(\n  ({ className, children, style, ref, ...rest }) => {\n    const { cx, styles } = useStyles();\n\n    return (\n      <Button\n        className={cx(styles, className)}\n        ref={ref}\n        shape={'round'}\n        style={{\n          paddingInline: 16,\n          width: 'unset',\n          ...style,\n        }}\n        variant={'filled'}\n        {...rest}\n      >\n        {children}\n      </Button>\n    );\n  },\n);\n\nBottomGradientButton.displayName = 'BottomGradientButton';\n\nexport default BottomGradientButton;\n"],"mappings":";;;;;;;;AASA,MAAM,uBAAuB,MAC1B,EAAE,WAAW,UAAU,OAAO,KAAK,GAAG,WAAW;CAChD,MAAM,EAAE,IAAI,WAAW,WAAW;AAElC,QACE,oBAACA;EACC,WAAW,GAAG,QAAQ,UAAU;EAC3B;EACL,OAAO;EACP,OAAO;GACL,eAAe;GACf,OAAO;GACP,GAAG;GACJ;EACD,SAAS;EACT,GAAI;EAEH;GACM;EAGd;AAED,qBAAqB,cAAc;AAEnC,mCAAe"}

package/es/awesome/BottomGradientButton/index.d.mts

@@ -0,0 +1,2 @@
+import { BottomGradientButton } from "./BottomGradientButton.mjs";
+import { BottomGradientButtonProps } from "./type.mjs";

package/es/awesome/BottomGradientButton/style.mjs

@@ -0,0 +1,36 @@
+import { createStyles } from "antd-style";
+
+//#region src/awesome/BottomGradientButton/style.ts
+const useStyles = createStyles(({ cx: cx$1, stylish, css: css$1, token }) => cx$1(stylish.resetLinkColor, css$1`
+      overflow: hidden;
+      font-weight: bold;
+      color: ${token.colorTextSecondary};
+      transition: all 0.2s ease-in-out;
+
+      &::before {
+        content: '';
+
+        position: absolute;
+        inset-block-end: 0;
+
+        display: block;
+
+        width: 50%;
+        height: 1px;
+
+        opacity: 0;
+        background-image: linear-gradient(to right, transparent, ${token.gold}, transparent);
+
+        transition: all 0.2s ease-in-out;
+      }
+
+      &:hover {
+        &::before {
+          opacity: 1;
+        }
+      }
+    `));
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/awesome/BottomGradientButton/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cx"],"sources":["../../../src/awesome/BottomGradientButton/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ cx, stylish, css, token }) =>\n  cx(\n    stylish.resetLinkColor,\n    css`\n      overflow: hidden;\n      font-weight: bold;\n      color: ${token.colorTextSecondary};\n      transition: all 0.2s ease-in-out;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-end: 0;\n\n        display: block;\n\n        width: 50%;\n        height: 1px;\n\n        opacity: 0;\n        background-image: linear-gradient(to right, transparent, ${token.gold}, transparent);\n\n        transition: all 0.2s ease-in-out;\n      }\n\n      &:hover {\n        &::before {\n          opacity: 1;\n        }\n      }\n    `,\n  ),\n);\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,UAAI,SAAS,YAAK,YACzDA,KACE,QAAQ,gBACR,KAAG;;;eAGQ,MAAM,mBAAmB;;;;;;;;;;;;;;;mEAe2B,MAAM,KAAK;;;;;;;;;;MAW3E,CACF"}

package/es/awesome/BottomGradientButton/type.d.mts

@@ -0,0 +1,8 @@
+import { ButtonProps } from "../../Button/type.mjs";
+import "../../Button/index.mjs";
+
+//#region src/awesome/BottomGradientButton/type.d.ts
+type BottomGradientButtonProps = ButtonProps;
+//#endregion
+export { BottomGradientButtonProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/Features/FeatureItem.mjs

@@ -0,0 +1,86 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Center_default from "../../Flex/Center.mjs";
+import Icon_default from "../../Icon/Icon.mjs";
+import Text_default from "../../Text/Text.mjs";
+import Img_default from "../../Img/index.mjs";
+import A_default from "../../A/index.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/awesome/Features/FeatureItem.tsx
+const Image = memo(({ image, className, title, style }) => {
+	return image.startsWith("http") ? /* @__PURE__ */ jsx(Img_default, {
+		alt: title,
+		className,
+		src: image,
+		style
+	}) : /* @__PURE__ */ jsx(Center_default, {
+		className,
+		style,
+		children: image
+	});
+});
+const Item = memo(({ style, className, row, column, description, image, title, link, icon, imageStyle, openExternal, ...rest }) => {
+	const rowNumber = row || 7;
+	const { styles, cx } = useStyles({
+		hasLink: Boolean(link),
+		rowNum: rowNumber
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.container, className),
+		style: {
+			gridColumn: `span ${column || 1}`,
+			gridRow: `span ${rowNumber}`,
+			...style
+		},
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: styles.cell,
+			children: [
+				image || icon && /* @__PURE__ */ jsxs(Center_default, {
+					className: styles.imgContainer,
+					style: imageStyle,
+					children: [icon && /* @__PURE__ */ jsx(Icon_default, {
+						className: styles.img,
+						icon
+					}), image && /* @__PURE__ */ jsx(Image, {
+						className: styles.img,
+						image,
+						title
+					})]
+				}),
+				title && /* @__PURE__ */ jsx(FlexBasic_default, {
+					align: "center",
+					as: "h3",
+					className: styles.title,
+					gap: 8,
+					horizontal: true,
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx(Text_default, {
+					className: styles.desc,
+					ellipsis: { rows: 4 },
+					children: description
+				}),
+				link && /* @__PURE__ */ jsx("div", {
+					className: styles.link,
+					children: /* @__PURE__ */ jsx(A_default, {
+						href: link,
+						rel: "noreferrer",
+						target: openExternal ? "_blank" : void 0,
+						children: "Read More"
+					})
+				})
+			]
+		})
+	});
+});
+Item.displayName = "FeatureItem";
+var FeatureItem_default = Item;
+
+//#endregion
+export { FeatureItem_default as default };
+//# sourceMappingURL=FeatureItem.mjs.map

package/es/awesome/Features/FeatureItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureItem.mjs","names":["Img","Center","Icon","Flexbox","Text","A"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\n\nimport { CSSProperties, memo } from 'react';\n\nimport A from '@/A';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport Text from '@/Text';\n\nimport { useStyles } from './style';\nimport type { FeatureItemProps } from './type';\n\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\n  ({ image, className, title, style }) => {\n    return image.startsWith('http') ? (\n      <Img alt={title} className={className} src={image} style={style} />\n    ) : (\n      <Center className={className} style={style}>\n        {image}\n      </Center>\n    );\n  },\n);\n\nconst Item = memo<FeatureItemProps>(\n  ({\n    style,\n    className,\n    row,\n    column,\n    description,\n    image,\n    title,\n    link,\n    icon,\n    imageStyle,\n    openExternal,\n    ...rest\n  }) => {\n    const rowNumber = row || 7;\n    const { styles, cx } = useStyles({ hasLink: Boolean(link), rowNum: rowNumber });\n\n    return (\n      <div\n        className={cx(styles.container, className)}\n        style={{\n          gridColumn: `span ${column || 1}`,\n          gridRow: `span ${rowNumber}`,\n          ...style,\n        }}\n        {...rest}\n      >\n        <div className={styles.cell}>\n          {image ||\n            (icon && (\n              <Center className={styles.imgContainer} style={imageStyle}>\n                {icon && <Icon className={styles.img} icon={icon} />}\n                {image && <Image className={styles.img} image={image} title={title} />}\n              </Center>\n            ))}\n          {title && (\n            <Flexbox align={'center'} as={'h3'} className={styles.title} gap={8} horizontal>\n              {title}\n            </Flexbox>\n          )}\n          {description && (\n            <Text\n              className={styles.desc}\n              ellipsis={{\n                rows: 4,\n              }}\n            >\n              {description}\n            </Text>\n          )}\n          {link && (\n            <div className={styles.link}>\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\n                Read More\n              </A>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nItem.displayName = 'FeatureItem';\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,QAAQ,MACX,EAAE,OAAO,WAAW,OAAO,YAAY;AACtC,QAAO,MAAM,WAAW,OAAO,GAC7B,oBAACA;EAAI,KAAK;EAAkB;EAAW,KAAK;EAAc;GAAS,GAEnE,oBAACC;EAAkB;EAAkB;YAClC;GACM;EAGd;AAED,MAAM,OAAO,MACV,EACC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,EAAE,QAAQ,OAAO,UAAU;EAAE,SAAS,QAAQ,KAAK;EAAE,QAAQ;EAAW,CAAC;AAE/E,QACE,oBAAC;EACC,WAAW,GAAG,OAAO,WAAW,UAAU;EAC1C,OAAO;GACL,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;GACJ;EACD,GAAI;YAEJ,qBAAC;GAAI,WAAW,OAAO;;IACpB,SACE,QACC,qBAACA;KAAO,WAAW,OAAO;KAAc,OAAO;gBAC5C,QAAQ,oBAACC;MAAK,WAAW,OAAO;MAAW;OAAQ,EACnD,SAAS,oBAAC;MAAM,WAAW,OAAO;MAAY;MAAc;OAAS;MAC/D;IAEZ,SACC,oBAACC;KAAQ,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO;KAAO,KAAK;KAAG;eAClE;MACO;IAEX,eACC,oBAACC;KACC,WAAW,OAAO;KAClB,UAAU,EACR,MAAM,GACP;eAEA;MACI;IAER,QACC,oBAAC;KAAI,WAAW,OAAO;eACrB,oBAACC;MAAE,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW;gBAAW;OAEzE;MACA;;IAEJ;GACF;EAGX;AAED,KAAK,cAAc;AAEnB,0BAAe"}

package/es/awesome/Features/Features.d.mts

@@ -0,0 +1,8 @@
+import { FeaturesProps } from "./type.mjs";
+import * as react109 from "react";
+
+//#region src/awesome/Features/Features.d.ts
+declare const Features: react109.NamedExoticComponent<FeaturesProps>;
+//#endregion
+export { Features };
+//# sourceMappingURL=Features.d.mts.map

package/es/awesome/Features/Features.mjs

@@ -0,0 +1,31 @@
+'use client';
+
+import SpotlightCard_default from "../SpotlightCard/SpotlightCard.mjs";
+import FeatureItem_default from "./FeatureItem.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/awesome/Features/Features.tsx
+const Features = memo(({ items, className, itemClassName, itemStyle, maxWidth = 960, style, ...rest }) => {
+	if (!items?.length) return;
+	return /* @__PURE__ */ jsx(SpotlightCard_default, {
+		className,
+		items,
+		renderItem: (item) => /* @__PURE__ */ jsx(FeatureItem_default, {
+			className: itemClassName,
+			style: itemStyle,
+			...item
+		}, item.title),
+		style: {
+			maxWidth,
+			...style
+		},
+		...rest
+	});
+});
+Features.displayName = "Features";
+var Features_default = Features;
+
+//#endregion
+export { Features_default as default };
+//# sourceMappingURL=Features.mjs.map

package/es/awesome/Features/Features.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Features.mjs","names":["SpotlightCard","FeatureItem"],"sources":["../../../src/awesome/Features/Features.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport SpotlightCard from '@/awesome/SpotlightCard';\n\nimport FeatureItem from './FeatureItem';\nimport type { FeaturesProps } from './type';\n\nconst Features = memo<FeaturesProps>(\n  ({ items, className, itemClassName, itemStyle, maxWidth = 960, style, ...rest }) => {\n    if (!items?.length) return;\n\n    return (\n      <SpotlightCard\n        className={className}\n        items={items}\n        renderItem={(item: any) => (\n          <FeatureItem className={itemClassName} key={item.title} style={itemStyle} {...item} />\n        )}\n        style={{ maxWidth, ...style }}\n        {...rest}\n      />\n    );\n  },\n);\n\nFeatures.displayName = 'Features';\n\nexport default Features;\n"],"mappings":";;;;;;;;AASA,MAAM,WAAW,MACd,EAAE,OAAO,WAAW,eAAe,WAAW,WAAW,KAAK,OAAO,GAAG,WAAW;AAClF,KAAI,CAAC,OAAO,OAAQ;AAEpB,QACE,oBAACA;EACY;EACJ;EACP,aAAa,SACX,oBAACC;GAAY,WAAW;GAAgC,OAAO;GAAW,GAAI;KAAlC,KAAK,MAAqC;EAExF,OAAO;GAAE;GAAU,GAAG;GAAO;EAC7B,GAAI;GACJ;EAGP;AAED,SAAS,cAAc;AAEvB,uBAAe"}

package/es/awesome/Features/index.d.mts

@@ -0,0 +1,2 @@
+import { FeatureItemType, FeaturesProps } from "./type.mjs";
+import { Features } from "./Features.mjs";