@jinmi/ui 0.0.0-stage → 6.0.2

package/es/awesome/Giscus/style.mjs

@@ -0,0 +1,149 @@
+import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
+import { useMemo } from "react";
+import { css, useTheme } from "antd-style";
+import { rgba } from "polished";
+//#region src/awesome/Giscus/style.ts
+const useStyles = () => {
+	const theme = useTheme();
+	const colorText = theme.colorText;
+	const colorTextSecondary = theme.colorTextSecondary;
+	const colorTextTertiary = theme.colorTextTertiary;
+	const colorRed = theme.colorError;
+	const colorOrange = theme.colorWarning;
+	const colorGreen = theme.colorSuccess;
+	const colorBlue = theme.colorInfo;
+	const loaderContainer = theme.isDarkMode ? "https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg" : "https://github.com/images/modules/pulls/progressive-disclosure-line.svg";
+	const loadingImage = theme.isDarkMode ? "https://github.githubassets.com/images/mona-loading-dark.gif" : "https://github.githubassets.com/images/mona-loading-default.gif";
+	const { styles } = css`
+    main {
+      --color-prettylights-syntax-comment: ${colorTextTertiary};
+      --color-prettylights-syntax-constant: ${colorGreen};
+      --color-prettylights-syntax-entity: ${colorOrange};
+      --color-prettylights-syntax-storage-modifier-import: ${colorRed};
+      --color-prettylights-syntax-entity-tag: ${colorBlue};
+      --color-prettylights-syntax-keyword: ${colorBlue};
+      --color-prettylights-syntax-string: ${colorGreen};
+      --color-prettylights-syntax-variable: ${colorRed};
+      --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};
+      --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};
+      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, .4)};
+      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};
+      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, .6)};
+      --color-prettylights-syntax-string-regexp: ${colorGreen};
+      --color-prettylights-syntax-markup-list: ${colorOrange};
+      --color-prettylights-syntax-markup-heading: ${colorBlue};
+      --color-prettylights-syntax-markup-italic: ${colorTextSecondary};
+      --color-prettylights-syntax-markup-bold: ${colorTextSecondary};
+      --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};
+      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, .2)};
+      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};
+      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, .2)};
+      --color-prettylights-syntax-markup-changed-text: ${colorOrange};
+      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, .2)};
+      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};
+      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, .2)};
+      --color-prettylights-syntax-meta-diff-range: ${colorOrange};
+      --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};
+      --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};
+      --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};
+      --color-btn-text: ${theme.colorText};
+      --color-btn-bg: ${theme.colorFillTertiary};
+      --color-btn-border: ${theme.colorBorderSecondary};
+      --color-btn-shadow: 0 0 transparent;
+      --color-btn-inset-shadow: 0 0 transparent;
+      --color-btn-hover-bg: ${theme.colorFillSecondary};
+      --color-btn-hover-border: ${theme.colorBorder};
+      --color-btn-active-bg: ${theme.colorFillSecondary};
+      --color-btn-active-border: ${theme.colorBorder};
+      --color-btn-selected-bg: ${theme.colorFillSecondary};
+      --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};
+      --color-btn-primary-bg: ${theme.colorPrimary};
+      --color-btn-primary-border: ${theme.colorPrimaryBorder};
+      --color-btn-primary-shadow: 0 0 transparent;
+      --color-btn-primary-inset-shadow: 0 0 transparent;
+      --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};
+      --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};
+      --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};
+      --color-btn-primary-selected-shadow: 0 0 transparent;
+      --color-btn-primary-disabled-text: color-mix(
+        in srgb,
+        ${safeReadableColor(theme.colorPrimary)} 50%,
+        transparent
+      );
+      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, .5)};
+      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, .5)};
+      --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};
+      --color-segmented-control-bg: ${theme.colorFillTertiary};
+      --color-segmented-control-button-bg: transparent;
+      --color-segmented-control-button-selected-border: ${theme.colorBorder};
+      --color-fg-default: ${theme.colorText};
+      --color-fg-muted: ${theme.colorTextSecondary};
+      --color-fg-subtle: ${theme.colorTextQuaternary};
+      --color-canvas-default: transparent;
+      --color-canvas-overlay: ${theme.colorBgElevated};
+      --color-canvas-inset: transparent;
+      --color-canvas-subtle: ${theme.colorFillQuaternary};
+      --color-border-default: ${theme.colorBorder};
+      --color-border-muted: ${theme.colorBorderSecondary};
+      --color-neutral-muted: ${theme.colorFillQuaternary};
+      --color-neutral-subtle: ${theme.colorFillTertiary};
+      --color-accent-fg: ${theme.colorInfo};
+      --color-accent-emphasis: ${theme.colorInfoBorderHover};
+      --color-accent-muted: ${theme.colorInfoBorder};
+      --color-accent-subtle: ${theme.colorInfoBg};
+      --color-success-fg: ${theme.colorSuccess};
+      --color-attention-fg: ${theme.colorWarning};
+      --color-attention-muted: ${theme.colorWarningBorder};
+      --color-attention-subtle: ${theme.colorWarningBg};
+      --color-danger-fg: ${theme.colorError};
+      --color-danger-muted: ${theme.colorErrorBorder};
+      --color-danger-subtle: ${theme.colorErrorBg};
+      --color-primer-shadow-inset: 0 0 transparent;
+      --color-scale-gray-7: ${theme.colorBgContainer};
+      --color-scale-blue-8: ${theme.colorInfoBg};
+      --color-social-reaction-bg-hover: ${theme.colorFillSecondary};
+      --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};
+
+      .markdown pre {
+        color: ${colorText};
+      }
+
+      .pagination-loader-container {
+        background-image: url(${loaderContainer});
+      }
+
+      .gsc-pagination-button {
+        background-color: var(--color-btn-bg);
+      }
+
+      .gsc-reactions-popover {
+        width: 170px;
+
+        > .m-2 {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+        }
+      }
+
+      .gsc-emoji-button.has-reacted {
+        border-color: ${theme.colorInfoBorderHover};
+        border-radius: ${theme.borderRadius}px;
+      }
+
+      .gsc-loading-image {
+        background-image: url(${loadingImage});
+      }
+    }
+  `;
+	return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);
+};
+const formatLang = (lang) => {
+	if (["zh_CN", "zh_TW"].includes(lang)) return lang.replace("_", "-");
+	else if (lang === "zh_HK") return "zh-TW";
+	else return lang.split("_")[0];
+};
+//#endregion
+export { formatLang, useStyles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { css, useTheme } from 'antd-style';\r\nimport { rgba } from 'polished';\r\nimport { useMemo } from 'react';\r\n\r\nimport { safeReadableColor } from '@/utils/safeReadableColor';\r\n\r\nexport const useStyles = () => {\r\n  const theme = useTheme();\r\n  const colorText = theme.colorText;\r\n  const colorTextSecondary = theme.colorTextSecondary;\r\n  const colorTextTertiary = theme.colorTextTertiary;\r\n  const colorRed = theme.colorError;\r\n  const colorOrange = theme.colorWarning;\r\n  const colorGreen = theme.colorSuccess;\r\n  const colorBlue = theme.colorInfo;\r\n  const loaderContainer = theme.isDarkMode\r\n    ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\r\n    : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\r\n  const loadingImage = theme.isDarkMode\r\n    ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\r\n    : 'https://github.githubassets.com/images/mona-loading-default.gif';\r\n  const { styles } = css`\r\n    main {\r\n      --color-prettylights-syntax-comment: ${colorTextTertiary};\r\n      --color-prettylights-syntax-constant: ${colorGreen};\r\n      --color-prettylights-syntax-entity: ${colorOrange};\r\n      --color-prettylights-syntax-storage-modifier-import: ${colorRed};\r\n      --color-prettylights-syntax-entity-tag: ${colorBlue};\r\n      --color-prettylights-syntax-keyword: ${colorBlue};\r\n      --color-prettylights-syntax-string: ${colorGreen};\r\n      --color-prettylights-syntax-variable: ${colorRed};\r\n      --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\r\n      --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\r\n      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, 0.4)};\r\n      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\r\n      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, 0.6)};\r\n      --color-prettylights-syntax-string-regexp: ${colorGreen};\r\n      --color-prettylights-syntax-markup-list: ${colorOrange};\r\n      --color-prettylights-syntax-markup-heading: ${colorBlue};\r\n      --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\r\n      --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\r\n      --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\r\n      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, 0.2)};\r\n      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\r\n      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, 0.2)};\r\n      --color-prettylights-syntax-markup-changed-text: ${colorOrange};\r\n      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, 0.2)};\r\n      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\r\n      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, 0.2)};\r\n      --color-prettylights-syntax-meta-diff-range: ${colorOrange};\r\n      --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\r\n      --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\r\n      --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\r\n      --color-btn-text: ${theme.colorText};\r\n      --color-btn-bg: ${theme.colorFillTertiary};\r\n      --color-btn-border: ${theme.colorBorderSecondary};\r\n      --color-btn-shadow: 0 0 transparent;\r\n      --color-btn-inset-shadow: 0 0 transparent;\r\n      --color-btn-hover-bg: ${theme.colorFillSecondary};\r\n      --color-btn-hover-border: ${theme.colorBorder};\r\n      --color-btn-active-bg: ${theme.colorFillSecondary};\r\n      --color-btn-active-border: ${theme.colorBorder};\r\n      --color-btn-selected-bg: ${theme.colorFillSecondary};\r\n      --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\r\n      --color-btn-primary-bg: ${theme.colorPrimary};\r\n      --color-btn-primary-border: ${theme.colorPrimaryBorder};\r\n      --color-btn-primary-shadow: 0 0 transparent;\r\n      --color-btn-primary-inset-shadow: 0 0 transparent;\r\n      --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\r\n      --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\r\n      --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\r\n      --color-btn-primary-selected-shadow: 0 0 transparent;\r\n      --color-btn-primary-disabled-text: color-mix(\r\n        in srgb,\r\n        ${safeReadableColor(theme.colorPrimary)} 50%,\r\n        transparent\r\n      );\r\n      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, 0.5)};\r\n      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, 0.5)};\r\n      --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};\r\n      --color-segmented-control-bg: ${theme.colorFillTertiary};\r\n      --color-segmented-control-button-bg: transparent;\r\n      --color-segmented-control-button-selected-border: ${theme.colorBorder};\r\n      --color-fg-default: ${theme.colorText};\r\n      --color-fg-muted: ${theme.colorTextSecondary};\r\n      --color-fg-subtle: ${theme.colorTextQuaternary};\r\n      --color-canvas-default: transparent;\r\n      --color-canvas-overlay: ${theme.colorBgElevated};\r\n      --color-canvas-inset: transparent;\r\n      --color-canvas-subtle: ${theme.colorFillQuaternary};\r\n      --color-border-default: ${theme.colorBorder};\r\n      --color-border-muted: ${theme.colorBorderSecondary};\r\n      --color-neutral-muted: ${theme.colorFillQuaternary};\r\n      --color-neutral-subtle: ${theme.colorFillTertiary};\r\n      --color-accent-fg: ${theme.colorInfo};\r\n      --color-accent-emphasis: ${theme.colorInfoBorderHover};\r\n      --color-accent-muted: ${theme.colorInfoBorder};\r\n      --color-accent-subtle: ${theme.colorInfoBg};\r\n      --color-success-fg: ${theme.colorSuccess};\r\n      --color-attention-fg: ${theme.colorWarning};\r\n      --color-attention-muted: ${theme.colorWarningBorder};\r\n      --color-attention-subtle: ${theme.colorWarningBg};\r\n      --color-danger-fg: ${theme.colorError};\r\n      --color-danger-muted: ${theme.colorErrorBorder};\r\n      --color-danger-subtle: ${theme.colorErrorBg};\r\n      --color-primer-shadow-inset: 0 0 transparent;\r\n      --color-scale-gray-7: ${theme.colorBgContainer};\r\n      --color-scale-blue-8: ${theme.colorInfoBg};\r\n      --color-social-reaction-bg-hover: ${theme.colorFillSecondary};\r\n      --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};\r\n\r\n      .markdown pre {\r\n        color: ${colorText};\r\n      }\r\n\r\n      .pagination-loader-container {\r\n        background-image: url(${loaderContainer});\r\n      }\r\n\r\n      .gsc-pagination-button {\r\n        background-color: var(--color-btn-bg);\r\n      }\r\n\r\n      .gsc-reactions-popover {\r\n        width: 170px;\r\n\r\n        > .m-2 {\r\n          display: flex;\r\n          flex-wrap: wrap;\r\n          gap: 8px;\r\n        }\r\n      }\r\n\r\n      .gsc-emoji-button.has-reacted {\r\n        border-color: ${theme.colorInfoBorderHover};\r\n        border-radius: ${theme.borderRadius}px;\r\n      }\r\n\r\n      .gsc-loading-image {\r\n        background-image: url(${loadingImage});\r\n      }\r\n    }\r\n  `;\r\n\r\n  return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);\r\n};\r\n\r\nexport const formatLang = (lang: string) => {\r\n  if (['zh_CN', 'zh_TW'].includes(lang)) {\r\n    return lang.replace('_', '-');\r\n  } else if (lang === 'zh_HK') {\r\n    return 'zh-TW';\r\n  } else {\r\n    return lang.split('_')[0];\r\n  }\r\n};\r\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,qBAAqB,MAAM;CACjC,MAAM,oBAAoB,MAAM;CAChC,MAAM,WAAW,MAAM;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,MAAM;CACxB,MAAM,kBAAkB,MAAM,aAC1B,iFACA;CACJ,MAAM,eAAe,MAAM,aACvB,iEACA;CACJ,MAAM,EAAE,WAAW,GAAG;;6CAEqB,kBAAkB;8CACjB,WAAW;4CACb,YAAY;6DACK,SAAS;gDACtB,UAAU;6CACb,UAAU;4CACX,WAAW;8CACT,SAAS;kEACW,SAAS;0DACjB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;0DAClB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;mDACzB,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,KAAK,UAAU,EAAG,EAAE;0DACjB,WAAW;wDACb,KAAK,YAAY,EAAG,EAAE;yDACrB,YAAY;uDACd,KAAK,UAAU,EAAG,EAAE;yDAClB,mBAAmB;uDACrB,KAAK,WAAW,EAAG,EAAE;qDACvB,YAAY;8DACH,mBAAmB;+DAClB,kBAAkB;mEACd,UAAU;0BACnD,MAAM,UAAU;wBAClB,MAAM,kBAAkB;4BACpB,MAAM,qBAAqB;;;8BAGzB,MAAM,mBAAmB;kCACrB,MAAM,YAAY;+BACrB,MAAM,mBAAmB;mCACrB,MAAM,YAAY;iCACpB,MAAM,mBAAmB;kCACxB,kBAAkB,MAAM,YAAY,EAAE;gCACxC,MAAM,aAAa;oCACf,MAAM,mBAAmB;;;sCAGvB,MAAM,kBAAkB;0CACpB,MAAM,wBAAwB;yCAC/B,MAAM,mBAAmB;;;;UAIxD,kBAAkB,MAAM,YAAY,EAAE;;;yCAGP,KAAK,MAAM,cAAc,EAAG,EAAE;6CAC1B,KAAK,MAAM,oBAAoB,EAAG,EAAE;mDAC9B,MAAM,oBAAoB;sCACvC,MAAM,kBAAkB;;0DAEJ,MAAM,YAAY;4BAChD,MAAM,UAAU;0BAClB,MAAM,mBAAmB;2BACxB,MAAM,oBAAoB;;gCAErB,MAAM,gBAAgB;;+BAEvB,MAAM,oBAAoB;gCACzB,MAAM,YAAY;8BACpB,MAAM,qBAAqB;+BAC1B,MAAM,oBAAoB;gCACzB,MAAM,kBAAkB;2BAC7B,MAAM,UAAU;iCACV,MAAM,qBAAqB;8BAC9B,MAAM,gBAAgB;+BACrB,MAAM,YAAY;4BACrB,MAAM,aAAa;8BACjB,MAAM,aAAa;iCAChB,MAAM,mBAAmB;kCACxB,MAAM,eAAe;2BAC5B,MAAM,WAAW;8BACd,MAAM,iBAAiB;+BACtB,MAAM,aAAa;;8BAEpB,MAAM,iBAAiB;8BACvB,MAAM,YAAY;0CACN,MAAM,mBAAmB;kDACjB,MAAM,iBAAiB;;;iBAGxD,UAAU;;;;gCAIK,gBAAgB;;;;;;;;;;;;;;;;;;wBAkBxB,MAAM,qBAAqB;yBAC1B,MAAM,aAAa;;;;gCAIZ,aAAa;;;;CAK3C,OAAO,cAAc,wBAAwB,KAAK,MAAM,KAAK,CAAC,MAAM,CAAC;AACvE;AAEA,MAAa,cAAc,SAAiB;CAC1C,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,GAClC,OAAO,KAAK,QAAQ,KAAK,GAAG;MACvB,IAAI,SAAS,SAClB,OAAO;MAEP,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAE3B"}

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

@@ -0,0 +1,10 @@
+import { CSSProperties, ComponentProps } from "react";
+import GiscusComponent from "@giscus/react";
+//#region src/awesome/Giscus/type.d.ts
+interface GiscusProps extends ComponentProps<typeof GiscusComponent> {
+  className?: string;
+  style?: CSSProperties;
+}
+//#endregion
+export { GiscusProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/GradientButton/GradientButton.d.mts

@@ -0,0 +1,6 @@
+import { GradientButtonProps } from "./type.mjs";
+//#region src/awesome/GradientButton/GradientButton.d.ts
+declare const GradientButton: import("react").NamedExoticComponent<GradientButtonProps>;
+//#endregion
+export { GradientButton as default };
+//# sourceMappingURL=GradientButton.d.mts.map

package/es/awesome/GradientButton/GradientButton.mjs

@@ -0,0 +1,41 @@
+"use client";
+import Button from "../../base-ui/Button/Button.mjs";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx, useThemeMode } from "antd-style";
+//#region src/awesome/GradientButton/GradientButton.tsx
+const GradientButton = memo(({ glow = true, children, className, size, disabled, style, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const cssVariables = useMemo(() => {
+		if (!size || disabled) return {};
+		let borderRadius;
+		switch (size) {
+			case "large":
+				borderRadius = cssVar.borderRadiusLG;
+				break;
+			case "small":
+				borderRadius = cssVar.borderRadiusSM;
+				break;
+			default: borderRadius = cssVar.borderRadius;
+		}
+		return { "--gradient-button-border-radius": borderRadius };
+	}, [size, disabled]);
+	return /* @__PURE__ */ jsxs(Button, {
+		disabled,
+		size,
+		type: disabled ? void 0 : "text",
+		className: cx(!disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight), className),
+		style: {
+			...cssVariables,
+			...style
+		},
+		...rest,
+		children: [glow && /* @__PURE__ */ jsx("div", { className: styles.glow }), children]
+	});
+});
+GradientButton.displayName = "GradientButton";
+//#endregion
+export { GradientButton as default };
+
+//# sourceMappingURL=GradientButton.mjs.map

package/es/awesome/GradientButton/GradientButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientButton.mjs","names":[],"sources":["../../../src/awesome/GradientButton/GradientButton.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cssVar, cx, useThemeMode } from 'antd-style';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport Button from '@/base-ui/Button';\r\n\r\nimport { styles } from './style';\r\nimport type { GradientButtonProps } from './type';\r\n\r\nconst GradientButton = memo<GradientButtonProps>(\r\n  ({ glow = true, children, className, size, disabled, style, ...rest }) => {\r\n    const { isDarkMode } = useThemeMode();\r\n\r\n    // Convert size prop to CSS variable for borderRadius\r\n    const cssVariables = useMemo<Record<string, string>>(() => {\r\n      if (!size || disabled) return {} as Record<string, string>;\r\n      let borderRadius: string;\r\n      switch (size) {\r\n        case 'large': {\r\n          borderRadius = cssVar.borderRadiusLG;\r\n          break;\r\n        }\r\n        case 'small': {\r\n          borderRadius = cssVar.borderRadiusSM;\r\n          break;\r\n        }\r\n        default: {\r\n          borderRadius = cssVar.borderRadius;\r\n          break;\r\n        }\r\n      }\r\n      return {\r\n        '--gradient-button-border-radius': borderRadius,\r\n      };\r\n    }, [size, disabled]);\r\n\r\n    return (\r\n      <Button\r\n        disabled={disabled}\r\n        size={size}\r\n        type={disabled ? undefined : 'text'}\r\n        className={cx(\r\n          !disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight),\r\n          className,\r\n        )}\r\n        style={{\r\n          ...cssVariables,\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      >\r\n        {glow && <div className={styles.glow} />}\r\n        {children}\r\n      </Button>\r\n    );\r\n  },\r\n);\r\n\r\nGradientButton.displayName = 'GradientButton';\r\n\r\nexport default GradientButton;\r\n"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB,MACpB,EAAE,OAAO,MAAM,UAAU,WAAW,MAAM,UAAU,OAAO,GAAG,WAAW;CACxE,MAAM,EAAE,eAAe,aAAa;CAGpC,MAAM,eAAe,cAAsC;EACzD,IAAI,CAAC,QAAQ,UAAU,OAAO,CAAC;EAC/B,IAAI;EACJ,QAAQ,MAAR;GACE,KAAK;IACH,eAAe,OAAO;IACtB;GAEF,KAAK;IACH,eAAe,OAAO;IACtB;GAEF,SACE,eAAe,OAAO;EAG1B;EACA,OAAO,EACL,mCAAmC,aACrC;CACF,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,qBAAC,QAAD;EACY;EACJ;EACN,MAAM,WAAW,KAAA,IAAY;EAC7B,WAAW,GACT,CAAC,aAAa,aAAa,OAAO,aAAa,OAAO,cACtD,SACF;EACA,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EAZN,UAAA,CAcG,QAAQ,oBAAC,OAAD,EAAK,WAAW,OAAO,KAAO,CAAA,GACtC,QACK;;AAEZ,CACF;AAEA,eAAe,cAAc"}

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

@@ -0,0 +1,3 @@
+import { GradientButtonProps } from "./type.mjs";
+import GradientButton from "./GradientButton.mjs";
+export { type GradientButtonProps, GradientButton as default };

package/es/awesome/GradientButton/style.mjs

@@ -0,0 +1,113 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles, cx } from "antd-style";
+//#region src/awesome/GradientButton/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const borderRadius = "var(--gradient-button-border-radius, var(--ant-border-radius))";
+	return {
+		buttonDark: css`
+      position: relative;
+      z-index: 1;
+      border: none;
+      border-radius: ${borderRadius} !important;
+
+      &::before {
+        ${staticStylish.gradientAnimation}
+        content: '';
+
+        position: absolute;
+        z-index: -2;
+        inset: 0;
+
+        border-radius: ${borderRadius};
+      }
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        z-index: -1;
+        inset-block-start: 1px;
+        inset-inline-start: 1px;
+
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        border-radius: calc(${borderRadius} - 1px);
+
+        background: ${cssVar.colorBgLayout};
+      }
+
+      &:hover {
+        &::after {
+          background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);
+        }
+      }
+
+      &:active {
+        &::after {
+          background: color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent);
+        }
+      }
+    `,
+		buttonLight: css`
+      position: relative;
+      z-index: 1;
+      border: none;
+      border-radius: ${borderRadius} !important;
+
+      &::before {
+        ${staticStylish.gradientAnimation}
+        content: '';
+
+        position: absolute;
+        z-index: -2;
+        inset: 0;
+
+        border-radius: ${borderRadius};
+      }
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        z-index: -1;
+        inset-block-start: 1px;
+        inset-inline-start: 1px;
+
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+        border-radius: calc(${borderRadius} - 1px);
+
+        background: ${cssVar.colorBgContainer};
+      }
+
+      &:hover {
+        &::after {
+          background: color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent);
+        }
+      }
+
+      &:active {
+        &::after {
+          background: color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent);
+        }
+      }
+    `,
+		glow: cx(staticStylish.gradientAnimation, css`
+        position: absolute;
+        z-index: -2;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+
+        opacity: 0.5;
+        filter: blur(0.5em);
+      `)
+	};
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/awesome/GradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\r\n\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  const borderRadius = 'var(--gradient-button-border-radius, var(--ant-border-radius))';\r\n\r\n  return {\r\n    buttonDark: css`\r\n      position: relative;\r\n      z-index: 1;\r\n      border: none;\r\n      border-radius: ${borderRadius} !important;\r\n\r\n      &::before {\r\n        ${lobeStaticStylish.gradientAnimation}\r\n        content: '';\r\n\r\n        position: absolute;\r\n        z-index: -2;\r\n        inset: 0;\r\n\r\n        border-radius: ${borderRadius};\r\n      }\r\n\r\n      &::after {\r\n        content: '';\r\n\r\n        position: absolute;\r\n        z-index: -1;\r\n        inset-block-start: 1px;\r\n        inset-inline-start: 1px;\r\n\r\n        width: calc(100% - 2px);\r\n        height: calc(100% - 2px);\r\n        border-radius: calc(${borderRadius} - 1px);\r\n\r\n        background: ${cssVar.colorBgLayout};\r\n      }\r\n\r\n      &:hover {\r\n        &::after {\r\n          background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\r\n        }\r\n      }\r\n\r\n      &:active {\r\n        &::after {\r\n          background: color-mix(in srgb, ${cssVar.colorBgLayout} 85%, transparent);\r\n        }\r\n      }\r\n    `,\r\n    buttonLight: css`\r\n      position: relative;\r\n      z-index: 1;\r\n      border: none;\r\n      border-radius: ${borderRadius} !important;\r\n\r\n      &::before {\r\n        ${lobeStaticStylish.gradientAnimation}\r\n        content: '';\r\n\r\n        position: absolute;\r\n        z-index: -2;\r\n        inset: 0;\r\n\r\n        border-radius: ${borderRadius};\r\n      }\r\n\r\n      &::after {\r\n        content: '';\r\n\r\n        position: absolute;\r\n        z-index: -1;\r\n        inset-block-start: 1px;\r\n        inset-inline-start: 1px;\r\n\r\n        width: calc(100% - 2px);\r\n        height: calc(100% - 2px);\r\n        border-radius: calc(${borderRadius} - 1px);\r\n\r\n        background: ${cssVar.colorBgContainer};\r\n      }\r\n\r\n      &:hover {\r\n        &::after {\r\n          background: color-mix(in srgb, ${cssVar.colorBgContainer} 95%, transparent);\r\n        }\r\n      }\r\n\r\n      &:active {\r\n        &::after {\r\n          background: color-mix(in srgb, ${cssVar.colorBgContainer} 90%, transparent);\r\n        }\r\n      }\r\n    `,\r\n    glow: cx(\r\n      lobeStaticStylish.gradientAnimation,\r\n      css`\r\n        position: absolute;\r\n        z-index: -2;\r\n        inset-block-start: 0;\r\n        inset-inline-start: 0;\r\n\r\n        width: 100%;\r\n        height: 100%;\r\n        border-radius: inherit;\r\n\r\n        opacity: 0.5;\r\n        filter: blur(0.5em);\r\n      `,\r\n    ),\r\n  };\r\n});\r\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,MAAM,eAAe;CAErB,OAAO;EACL,YAAY,GAAG;;;;uBAII,aAAa;;;UAG1BA,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErB,OAAO,cAAc;;;;;2CAKA,OAAO,cAAc;;;;;;2CAMrB,OAAO,cAAc;;;;EAI5D,aAAa,GAAG;;;;uBAIG,aAAa;;;UAG1BA,cAAkB,kBAAkB;;;;;;;yBAOrB,aAAa;;;;;;;;;;;;;8BAaR,aAAa;;sBAErB,OAAO,iBAAiB;;;;;2CAKH,OAAO,iBAAiB;;;;;;2CAMxB,OAAO,iBAAiB;;;;EAI/D,MAAM,GACJA,cAAkB,mBAClB,GAAG;;;;;;;;;;;;OAaL;CACF;AACF,CAAC"}

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

@@ -0,0 +1,9 @@
+import { ButtonProps } from "../../base-ui/Button/type.mjs";
+import "../../base-ui/Button/index.mjs";
+//#region src/awesome/GradientButton/type.d.ts
+interface GradientButtonProps extends ButtonProps {
+  glow?: boolean;
+}
+//#endregion
+export { GradientButtonProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/GridBackground/GridBackground.d.mts

@@ -0,0 +1,6 @@
+import { GridBackgroundProps } from "./type.mjs";
+//#region src/awesome/GridBackground/GridBackground.d.ts
+declare const GridBackground: import("react").NamedExoticComponent<GridBackgroundProps>;
+//#endregion
+export { GridBackground as default };
+//# sourceMappingURL=GridBackground.d.mts.map

package/es/awesome/GridBackground/GridBackground.mjs

@@ -0,0 +1,114 @@
+"use client";
+import Grid from "./components/Grid.mjs";
+import { styles } from "./style.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx, useTheme } from "antd-style";
+import { shuffle } from "es-toolkit/compat";
+import chroma from "chroma-js";
+import { useSize } from "ahooks";
+//#region src/awesome/GridBackground/GridBackground.tsx
+const initialGroup = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	11,
+	12,
+	13,
+	14
+];
+const GridBackground = memo(({ flip, reverse, showBackground, backgroundColor, random, animationDuration = 8, className, colorFront, colorBack, strokeWidth, style, animation, ...rest }) => {
+	const ref = useRef(null);
+	const size = useSize(ref);
+	const theme = useTheme();
+	const backgroundCssVariables = useMemo(() => {
+		if (!showBackground) return {};
+		const scale = chroma.bezier([
+			theme.colorText,
+			backgroundColor || "blue",
+			theme.colorBgLayout
+		]).scale().mode("lch").correctLightness().colors(6);
+		return {
+			"--grid-background-color-1": scale[1],
+			"--grid-background-color-2": scale[2],
+			"--grid-background-color-3": scale[3],
+			"--grid-background-color-4": scale[4]
+		};
+	}, [
+		showBackground,
+		backgroundColor,
+		theme.colorText,
+		theme.colorBgLayout
+	]);
+	const gridProps = useMemo(() => ({
+		className: reverse ? styles.highlightReverse : styles.highlight,
+		color: colorFront || cssVar.colorText,
+		strokeWidth
+	}), [
+		reverse,
+		colorFront,
+		strokeWidth
+	]);
+	const [group, setGroup] = useState(random ? initialGroup : void 0);
+	useEffect(() => {
+		setGroup(random ? shuffle(initialGroup) : void 0);
+	}, [random]);
+	const HighlightGrid = useCallback(() => {
+		if (!group) return /* @__PURE__ */ jsx(Grid, {
+			style: { "--duration": `${animationDuration}s` },
+			...gridProps
+		});
+		return /* @__PURE__ */ jsx(Fragment$1, { children: group.map((item, index) => {
+			return /* @__PURE__ */ jsx(Grid, {
+				linePick: item,
+				style: {
+					"--delay": `${index + Math.random()}s`,
+					"--duration": `${animationDuration}s`
+				},
+				...gridProps
+			}, item);
+		}) });
+	}, [
+		group,
+		animationDuration,
+		gridProps
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.container, className),
+		ref,
+		style: flip ? {
+			transform: "scaleY(-1)",
+			...style
+		} : style,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(Grid, {
+				color: colorBack || cssVar.colorBorder,
+				strokeWidth,
+				style: { zIndex: 2 }
+			}),
+			animation && /* @__PURE__ */ jsx(HighlightGrid, {}),
+			showBackground && /* @__PURE__ */ jsx("div", {
+				className: styles.backgroundContainer,
+				style: {
+					...size ? { fontSize: size.width / 80 } : {},
+					...backgroundCssVariables
+				},
+				children: /* @__PURE__ */ jsx("div", { className: styles.background })
+			})
+		]
+	});
+});
+GridBackground.displayName = "GridBackground";
+//#endregion
+export { GridBackground as default };
+
+//# sourceMappingURL=GridBackground.mjs.map

package/es/awesome/GridBackground/GridBackground.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridBackground.mjs","names":[],"sources":["../../../src/awesome/GridBackground/GridBackground.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useSize } from 'ahooks';\r\nimport { cssVar, cx, useTheme } from 'antd-style';\r\nimport chroma from 'chroma-js';\r\nimport { shuffle } from 'es-toolkit/compat';\r\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport Grid, { type GridProps } from './components/Grid';\r\nimport { styles } from './style';\r\nimport type { GridBackgroundProps } from './type';\r\n\r\nconst initialGroup = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];\r\n\r\nconst GridBackground = memo<GridBackgroundProps>(\r\n  ({\r\n    flip,\r\n    reverse,\r\n    showBackground,\r\n    backgroundColor,\r\n    random,\r\n    animationDuration = 8,\r\n    className,\r\n    colorFront,\r\n    colorBack,\r\n    strokeWidth,\r\n    style,\r\n    animation,\r\n    ...rest\r\n  }) => {\r\n    const ref = useRef(null);\r\n    const size = useSize(ref);\r\n    const theme = useTheme();\r\n\r\n    const backgroundCssVariables = useMemo<Record<string, string>>(() => {\r\n      if (!showBackground) return {} as Record<string, string>;\r\n\r\n      const scale = chroma\r\n        .bezier([theme.colorText, backgroundColor || 'blue', theme.colorBgLayout])\r\n        .scale()\r\n        .mode('lch')\r\n        .correctLightness()\r\n        .colors(6);\r\n\r\n      return {\r\n        '--grid-background-color-1': scale[1],\r\n        '--grid-background-color-2': scale[2],\r\n        '--grid-background-color-3': scale[3],\r\n        '--grid-background-color-4': scale[4],\r\n      };\r\n    }, [showBackground, backgroundColor, theme.colorText, theme.colorBgLayout]);\r\n\r\n    const gridProps: GridProps = useMemo(\r\n      () => ({\r\n        className: reverse ? styles.highlightReverse : styles.highlight,\r\n        color: colorFront || cssVar.colorText,\r\n        strokeWidth,\r\n      }),\r\n      [reverse, colorFront, strokeWidth],\r\n    );\r\n\r\n    const [group, setGroup] = useState(random ? initialGroup : undefined);\r\n    useEffect(() => {\r\n      setGroup(random ? shuffle(initialGroup) : undefined);\r\n    }, [random]);\r\n\r\n    const HighlightGrid = useCallback(() => {\r\n      if (!group)\r\n        return <Grid style={{ '--duration': `${animationDuration}s` } as any} {...gridProps} />;\r\n\r\n      return (\r\n        <>\r\n          {group.map((item, index) => {\r\n            return (\r\n              <Grid\r\n                key={item}\r\n                linePick={item}\r\n                style={\r\n                  {\r\n                    '--delay': `${index + Math.random()}s`,\r\n                    '--duration': `${animationDuration}s`,\r\n                  } as any\r\n                }\r\n                {...gridProps}\r\n              />\r\n            );\r\n          })}\r\n        </>\r\n      );\r\n    }, [group, animationDuration, gridProps]);\r\n\r\n    return (\r\n      <div\r\n        className={cx(styles.container, className)}\r\n        ref={ref}\r\n        style={flip ? { transform: 'scaleY(-1)', ...style } : style}\r\n        {...rest}\r\n      >\r\n        <Grid\r\n          color={colorBack || cssVar.colorBorder}\r\n          strokeWidth={strokeWidth}\r\n          style={{ zIndex: 2 }}\r\n        />\r\n        {animation && <HighlightGrid />}\r\n        {showBackground && (\r\n          <div\r\n            className={styles.backgroundContainer}\r\n            style={{\r\n              ...(size ? { fontSize: size.width / 80 } : {}),\r\n              ...backgroundCssVariables,\r\n            }}\r\n          >\r\n            <div className={styles.background} />\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nGridBackground.displayName = 'GridBackground';\r\n\r\nexport default GridBackground;\r\n"],"mappings":";;;;;;;;;;AAYA,MAAM,eAAe;CAAC;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAG;CAAI;CAAI;CAAI;CAAI;AAAE;AAEtE,MAAM,iBAAiB,MACpB,EACC,MACA,SACA,gBACA,iBACA,QACA,oBAAoB,GACpB,WACA,YACA,WACA,aACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,OAAO,QAAQ,GAAG;CACxB,MAAM,QAAQ,SAAS;CAEvB,MAAM,yBAAyB,cAAsC;EACnE,IAAI,CAAC,gBAAgB,OAAO,CAAC;EAE7B,MAAM,QAAQ,OACX,OAAO;GAAC,MAAM;GAAW,mBAAmB;GAAQ,MAAM;EAAa,CAAC,CAAC,CACzE,MAAM,CAAC,CACP,KAAK,KAAK,CAAC,CACX,iBAAiB,CAAC,CAClB,OAAO,CAAC;EAEX,OAAO;GACL,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;GACnC,6BAA6B,MAAM;EACrC;CACF,GAAG;EAAC;EAAgB;EAAiB,MAAM;EAAW,MAAM;CAAa,CAAC;CAE1E,MAAM,YAAuB,eACpB;EACL,WAAW,UAAU,OAAO,mBAAmB,OAAO;EACtD,OAAO,cAAc,OAAO;EAC5B;CACF,IACA;EAAC;EAAS;EAAY;CAAW,CACnC;CAEA,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,eAAe,KAAA,CAAS;CACpE,gBAAgB;EACd,SAAS,SAAS,QAAQ,YAAY,IAAI,KAAA,CAAS;CACrD,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,OACH,OAAO,oBAAC,MAAD;GAAM,OAAO,EAAE,cAAc,GAAG,kBAAkB,GAAG;GAAU,GAAI;EAAY,CAAA;EAExF,OACE,oBAAA,YAAA,EAAA,UACG,MAAM,KAAK,MAAM,UAAU;GAC1B,OACE,oBAAC,MAAD;IAEE,UAAU;IACV,OACE;KACE,WAAW,GAAG,QAAQ,KAAK,OAAO,EAAE;KACpC,cAAc,GAAG,kBAAkB;IACrC;IAEF,GAAI;GACL,GATM,IASN;EAEL,CAAC,EACD,CAAA;CAEN,GAAG;EAAC;EAAO;EAAmB;CAAS,CAAC;CAExC,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,WAAW,SAAS;EACpC;EACL,OAAO,OAAO;GAAE,WAAW;GAAc,GAAG;EAAM,IAAI;EACtD,GAAI;EAJN,UAAA;GAME,oBAAC,MAAD;IACE,OAAO,aAAa,OAAO;IACd;IACb,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;GACA,aAAa,oBAAC,eAAD,CAAgB,CAAA;GAC7B,kBACC,oBAAC,OAAD;IACE,WAAW,OAAO;IAClB,OAAO;KACL,GAAI,OAAO,EAAE,UAAU,KAAK,QAAQ,GAAG,IAAI,CAAC;KAC5C,GAAG;IACL;IAEA,UAAA,oBAAC,OAAD,EAAK,WAAW,OAAO,WAAa,CAAA;GACjC,CAAA;EAEJ;;AAET,CACF;AAEA,eAAe,cAAc"}

package/es/awesome/GridBackground/GridShowcase.d.mts

@@ -0,0 +1,6 @@
+import { GridShowcaseProps } from "./type.mjs";
+//#region src/awesome/GridBackground/GridShowcase.d.ts
+declare const GridShowcase: import("react").NamedExoticComponent<GridShowcaseProps>;
+//#endregion
+export { GridShowcase as default };
+//# sourceMappingURL=GridShowcase.d.mts.map

package/es/awesome/GridBackground/GridShowcase.mjs

@@ -0,0 +1,50 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import GridBackground from "./GridBackground.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "antd-style";
+import { rgba } from "polished";
+//#region src/awesome/GridBackground/GridShowcase.tsx
+const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", innerProps, ...rest }) => {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		style: {
+			position: "relative",
+			...style
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(GridBackground, {
+				animation: true,
+				flip: true,
+				colorBack: rgba(theme.colorText, .12),
+				colorFront: rgba(theme.colorText, .6)
+			}),
+			/* @__PURE__ */ jsx(FlexBasic_default, {
+				align: "center",
+				...innerProps,
+				style: {
+					zIndex: 4,
+					...innerProps?.style
+				},
+				children
+			}),
+			/* @__PURE__ */ jsx(GridBackground, {
+				animation: true,
+				random: true,
+				reverse: true,
+				showBackground: true,
+				backgroundColor,
+				colorBack: rgba(theme.colorText, .24),
+				colorFront: theme.colorText,
+				style: { zIndex: 0 }
+			})
+		]
+	});
+});
+GridShowcase.displayName = "GridShowcase";
+//#endregion
+export { GridShowcase as default };
+
+//# sourceMappingURL=GridShowcase.mjs.map

package/es/awesome/GridBackground/GridShowcase.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridShowcase.mjs","names":["Flexbox"],"sources":["../../../src/awesome/GridBackground/GridShowcase.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useTheme } from 'antd-style';\r\nimport { rgba } from 'polished';\r\nimport { memo } from 'react';\r\n\r\nimport { Flexbox } from '@/Flex';\r\n\r\nimport GridBackground from './GridBackground';\r\nimport type { GridShowcaseProps } from './type';\r\n\r\nconst GridShowcase = memo<GridShowcaseProps>(\r\n  ({ style, children, backgroundColor = '#001dff', innerProps, ...rest }) => {\r\n    const theme = useTheme();\r\n\r\n    return (\r\n      <Flexbox style={{ position: 'relative', ...style }} {...rest}>\r\n        <GridBackground\r\n          animation\r\n          flip\r\n          colorBack={rgba(theme.colorText, 0.12)}\r\n          colorFront={rgba(theme.colorText, 0.6)}\r\n        />\r\n        <Flexbox align={'center'} {...innerProps} style={{ zIndex: 4, ...innerProps?.style }}>\r\n          {children}\r\n        </Flexbox>\r\n        <GridBackground\r\n          animation\r\n          random\r\n          reverse\r\n          showBackground\r\n          backgroundColor={backgroundColor}\r\n          colorBack={rgba(theme.colorText, 0.24)}\r\n          colorFront={theme.colorText}\r\n          style={{ zIndex: 0 }}\r\n        />\r\n      </Flexbox>\r\n    );\r\n  },\r\n);\r\n\r\nGridShowcase.displayName = 'GridShowcase';\r\n\r\nexport default GridShowcase;\r\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,MAClB,EAAE,OAAO,UAAU,kBAAkB,WAAW,YAAY,GAAG,WAAW;CACzE,MAAM,QAAQ,SAAS;CAEvB,OACE,qBAACA,mBAAD;EAAS,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EAAG,GAAI;EAAxD,UAAA;GACE,oBAAC,gBAAD;IACE,WAAA;IACA,MAAA;IACA,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,KAAK,MAAM,WAAW,EAAG;GACtC,CAAA;GACD,oBAACA,mBAAD;IAAS,OAAO;IAAU,GAAI;IAAY,OAAO;KAAE,QAAQ;KAAG,GAAG,YAAY;IAAM;IAChF;GACM,CAAA;GACT,oBAAC,gBAAD;IACE,WAAA;IACA,QAAA;IACA,SAAA;IACA,gBAAA;IACiB;IACjB,WAAW,KAAK,MAAM,WAAW,GAAI;IACrC,YAAY,MAAM;IAClB,OAAO,EAAE,QAAQ,EAAE;GACpB,CAAA;EACM;;AAEb,CACF;AAEA,aAAa,cAAc"}

package/es/awesome/GridBackground/components/Grid.mjs

@@ -0,0 +1,48 @@
+import { memo, useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { isUndefined } from "es-toolkit/compat";
+//#region src/awesome/GridBackground/components/Grid.tsx
+const Grid = memo(({ color = "#fff", strokeWidth = 3, linePick, ...rest }) => {
+	const isUnpick = isUndefined(linePick);
+	const showLine = useCallback((l) => isUnpick || linePick === l, [linePick]);
+	const vLine = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		showLine(0) && /* @__PURE__ */ jsx("path", { d: "M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0" }),
+		showLine(1) && /* @__PURE__ */ jsx("path", { d: "M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0" }),
+		showLine(2) && /* @__PURE__ */ jsx("path", { d: "M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0" }),
+		showLine(3) && /* @__PURE__ */ jsx("path", { d: "M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0" }),
+		showLine(4) && /* @__PURE__ */ jsx("path", { d: "M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0" }),
+		showLine(5) && /* @__PURE__ */ jsx("path", { d: "M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0" }),
+		showLine(6) && /* @__PURE__ */ jsx("path", { d: "M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0" }),
+		showLine(7) && /* @__PURE__ */ jsx("path", { d: "M1864 420V0h0" }),
+		showLine(8) && /* @__PURE__ */ jsx("path", { d: "M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0" }),
+		showLine(9) && /* @__PURE__ */ jsx("path", { d: "M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0" }),
+		showLine(10) && /* @__PURE__ */ jsx("path", { d: "M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0" }),
+		showLine(11) && /* @__PURE__ */ jsx("path", { d: "M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0" }),
+		showLine(12) && /* @__PURE__ */ jsx("path", { d: "M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0" }),
+		showLine(13) && /* @__PURE__ */ jsx("path", { d: "M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0" }),
+		showLine(14) && /* @__PURE__ */ jsx("path", { d: "M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0" })
+	] });
+	const hLine = isUnpick && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("path", { d: "M2835 42H892" }),
+		/* @__PURE__ */ jsx("path", { d: "M595 136h2538" }),
+		/* @__PURE__ */ jsx("path", { d: "M237 249h3254" })
+	] });
+	return /* @__PURE__ */ jsx("svg", {
+		style: { width: "100%" },
+		viewBox: "0 0 3728 422",
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: /* @__PURE__ */ jsxs("g", {
+			fill: "none",
+			fillRule: "evenodd",
+			stroke: color,
+			strokeWidth,
+			children: [vLine, hLine]
+		})
+	});
+});
+Grid.displayName = "Grid";
+//#endregion
+export { Grid as default };
+
+//# sourceMappingURL=Grid.mjs.map

package/es/awesome/GridBackground/components/Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.mjs","names":[],"sources":["../../../../src/awesome/GridBackground/components/Grid.tsx"],"sourcesContent":["import { isUndefined } from 'es-toolkit/compat';\r\nimport { memo, useCallback } from 'react';\r\n\r\nimport type { SvgProps } from '@/types';\r\n\r\nenum Line {\r\n  l7,\r\n  l6,\r\n  l5,\r\n  l4,\r\n  l3,\r\n  l2,\r\n  l1,\r\n  center,\r\n  r1,\r\n  r2,\r\n  r3,\r\n  r4,\r\n  r5,\r\n  r6,\r\n  r7,\r\n}\r\n\r\nexport interface GridProps extends SvgProps {\r\n  color?: string;\r\n  linePick?: Line;\r\n  strokeWidth?: number;\r\n}\r\n\r\nconst Grid = memo<GridProps>(({ color = '#fff', strokeWidth = 3, linePick, ...rest }) => {\r\n  const isUnpick = isUndefined(linePick);\r\n\r\n  const showLine = useCallback((l: Line) => isUnpick || linePick === l, [linePick]);\r\n\r\n  const vLine = (\r\n    <>\r\n      {showLine(Line.l7) && <path d=\"M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0\" />}\r\n      {showLine(Line.l6) && (\r\n        <path d=\"M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0\" />\r\n      )}\r\n      {showLine(Line.l5) && <path d=\"M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0\" />}\r\n      {showLine(Line.l4) && <path d=\"M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0\" />}\r\n      {showLine(Line.l3) && <path d=\"M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0\" />}\r\n      {showLine(Line.l2) && <path d=\"M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0\" />}\r\n      {showLine(Line.l1) && <path d=\"M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0\" />}\r\n      {showLine(Line.center) && <path d=\"M1864 420V0h0\" />}\r\n      {showLine(Line.r1) && <path d=\"M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0\" />}\r\n      {showLine(Line.r2) && <path d=\"M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0\" />}\r\n      {showLine(Line.r3) && <path d=\"M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0\" />}\r\n      {showLine(Line.r4) && <path d=\"M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0\" />}\r\n      {showLine(Line.r5) && <path d=\"M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0\" />}\r\n      {showLine(Line.r6) && (\r\n        <path d=\"M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0\" />\r\n      )}\r\n      {showLine(Line.r7) && (\r\n        <path d=\"M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0\" />\r\n      )}\r\n    </>\r\n  );\r\n\r\n  const hLine = isUnpick && (\r\n    <>\r\n      <path d=\"M2835 42H892\" />\r\n      <path d=\"M595 136h2538\" />\r\n      <path d=\"M237 249h3254\" />\r\n    </>\r\n  );\r\n\r\n  return (\r\n    <svg\r\n      style={{ width: '100%' }}\r\n      viewBox=\"0 0 3728 422\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      {...rest}\r\n    >\r\n      <g fill=\"none\" fillRule=\"evenodd\" stroke={color} strokeWidth={strokeWidth}>\r\n        {vLine}\r\n        {hLine}\r\n      </g>\r\n    </svg>\r\n  );\r\n});\r\n\r\nGrid.displayName = 'Grid';\r\n\r\nexport default Grid;\r\n"],"mappings":";;;;AA6BA,MAAM,OAAO,MAAiB,EAAE,QAAQ,QAAQ,cAAc,GAAG,UAAU,GAAG,WAAW;CACvF,MAAM,WAAW,YAAY,QAAQ;CAErC,MAAM,WAAW,aAAa,MAAY,YAAY,aAAa,GAAG,CAAC,QAAQ,CAAC;CAEhF,MAAM,QACJ,qBAAA,YAAA,EAAA,UAAA;EACG,SAAA,CAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,4DAA6D,CAAA;EAC1F,SAAA,CAAgB,KACf,oBAAC,QAAD,EAAM,GAAE,iEAAkE,CAAA;EAE3E,SAAA,CAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,oDAAqD,CAAA;EAClF,SAAA,CAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,mDAAoD,CAAA;EACjF,SAAA,CAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,qDAAsD,CAAA;EACnF,SAAA,CAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,qDAAsD,CAAA;EACnF,SAAA,CAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,oDAAqD,CAAA;EAClF,SAAA,CAAoB,KAAK,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;EAClD,SAAA,CAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,qDAAsD,CAAA;EACnF,SAAA,CAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,sDAAuD,CAAA;EACpF,SAAA,EAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,sDAAuD,CAAA;EACpF,SAAA,EAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,qDAAsD,CAAA;EACnF,SAAA,EAAgB,KAAK,oBAAC,QAAD,EAAM,GAAE,sDAAuD,CAAA;EACpF,SAAA,EAAgB,KACf,oBAAC,QAAD,EAAM,GAAE,kEAAmE,CAAA;EAE5E,SAAA,EAAgB,KACf,oBAAC,QAAD,EAAM,GAAE,+DAAgE,CAAA;CAE1E,EAAA,CAAA;CAGJ,MAAM,QAAQ,YACZ,qBAAA,YAAA,EAAA,UAAA;EACE,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;EACxB,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;EACzB,oBAAC,QAAD,EAAM,GAAE,gBAAiB,CAAA;CACzB,EAAA,CAAA;CAGJ,OACE,oBAAC,OAAD;EACE,OAAO,EAAE,OAAO,OAAO;EACvB,SAAQ;EACR,OAAM;EACN,GAAI;EAEJ,UAAA,qBAAC,KAAD;GAAG,MAAK;GAAO,UAAS;GAAU,QAAQ;GAAoB;GAA9D,UAAA,CACG,OACA,KACA;;CACA,CAAA;AAET,CAAC;AAED,KAAK,cAAc"}

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

@@ -0,0 +1,4 @@
+import { GridBackgroundProps, GridShowcaseProps } from "./type.mjs";
+import GridBackground from "./GridBackground.mjs";
+import GridShowcase from "./GridShowcase.mjs";
+export { type GridBackgroundProps, GridShowcase, type GridShowcaseProps, GridBackground as default };