@lobehub/ui 1.69.0 → 1.70.0

package/es/GridBackground/Grid.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+declare enum Line {
+    l7 = 0,
+    l6 = 1,
+    l5 = 2,
+    l4 = 3,
+    l3 = 4,
+    l2 = 5,
+    l1 = 6,
+    center = 7,
+    r1 = 8,
+    r2 = 9,
+    r3 = 10,
+    r4 = 11,
+    r5 = 12,
+    r6 = 13,
+    r7 = 14
+}
+export interface GridProps extends DivProps {
+    color?: string;
+    linePick?: Line;
+    strokeWidth?: number;
+}
+declare const Grid: import("react").NamedExoticComponent<GridProps>;
+export default Grid;

package/es/GridBackground/Grid.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["color", "strokeWidth", "linePick"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { isUndefined } from 'lodash-es';
+import { memo, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Line = /*#__PURE__*/function (Line) {
+  Line[Line["l7"] = 0] = "l7";
+  Line[Line["l6"] = 1] = "l6";
+  Line[Line["l5"] = 2] = "l5";
+  Line[Line["l4"] = 3] = "l4";
+  Line[Line["l3"] = 4] = "l3";
+  Line[Line["l2"] = 5] = "l2";
+  Line[Line["l1"] = 6] = "l1";
+  Line[Line["center"] = 7] = "center";
+  Line[Line["r1"] = 8] = "r1";
+  Line[Line["r2"] = 9] = "r2";
+  Line[Line["r3"] = 10] = "r3";
+  Line[Line["r4"] = 11] = "r4";
+  Line[Line["r5"] = 12] = "r5";
+  Line[Line["r6"] = 13] = "r6";
+  Line[Line["r7"] = 14] = "r7";
+  return Line;
+}(Line || {});
+var Grid = /*#__PURE__*/memo(function (_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#fff' : _ref$color,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 3 : _ref$strokeWidth,
+    linePick = _ref.linePick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isUnpick = isUndefined(linePick);
+  var showLine = useCallback(function (l) {
+    return isUnpick || linePick === l;
+  }, [linePick]);
+  var vLine = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showLine(Line.l7) && /*#__PURE__*/_jsx("path", {
+      d: "M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0"
+    }), showLine(Line.l6) && /*#__PURE__*/_jsx("path", {
+      d: "M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0"
+    }), showLine(Line.l5) && /*#__PURE__*/_jsx("path", {
+      d: "M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0"
+    }), showLine(Line.l4) && /*#__PURE__*/_jsx("path", {
+      d: "M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0"
+    }), showLine(Line.l3) && /*#__PURE__*/_jsx("path", {
+      d: "M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0"
+    }), showLine(Line.l2) && /*#__PURE__*/_jsx("path", {
+      d: "M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0"
+    }), showLine(Line.l1) && /*#__PURE__*/_jsx("path", {
+      d: "M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0"
+    }), showLine(Line.center) && /*#__PURE__*/_jsx("path", {
+      d: "M1864 420V0h0"
+    }), showLine(Line.r1) && /*#__PURE__*/_jsx("path", {
+      d: "M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0"
+    }), showLine(Line.r2) && /*#__PURE__*/_jsx("path", {
+      d: "M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0"
+    }), showLine(Line.r3) && /*#__PURE__*/_jsx("path", {
+      d: "M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0"
+    }), showLine(Line.r4) && /*#__PURE__*/_jsx("path", {
+      d: "M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0"
+    }), showLine(Line.r5) && /*#__PURE__*/_jsx("path", {
+      d: "M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0"
+    }), showLine(Line.r6) && /*#__PURE__*/_jsx("path", {
+      d: "M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0"
+    }), showLine(Line.r7) && /*#__PURE__*/_jsx("path", {
+      d: "M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0"
+    })]
+  });
+  var hLine = isUnpick && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M2835 42H892"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M595 136h2538"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M237 249h3254"
+    })]
+  });
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsx("svg", {
+      style: {
+        width: '100%'
+      },
+      viewBox: "0 0 3728 422",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/_jsxs("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        stroke: color,
+        strokeWidth: strokeWidth,
+        children: [vLine, hLine]
+      })
+    })
+  }));
+});
+export default Grid;

package/es/GridBackground/GridShowcase.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+import { type GridBackgroundProps } from './index';
+export interface GridShowcaseProps extends DivProps {
+    backgroundColor?: GridBackgroundProps['backgroundColor'];
+}
+declare const GridShowcase: import("react").NamedExoticComponent<GridShowcaseProps>;
+export default GridShowcase;

package/es/GridBackground/GridShowcase.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "children", "backgroundColor"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useTheme } from 'antd-style';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import GridBackground from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridShowcase = /*#__PURE__*/memo(function (_ref) {
+  var style = _ref.style,
+    children = _ref.children,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? '#001dff' : _ref$backgroundColor,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    style: _objectSpread({
+      position: 'relative'
+    }, style)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(GridBackground, {
+      animation: true,
+      colorBack: rgba(theme.colorText, 0.12),
+      colorFront: rgba(theme.colorText, 0.6),
+      flip: true
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      style: {
+        zIndex: 4
+      },
+      children: children
+    }), /*#__PURE__*/_jsx(GridBackground, {
+      animation: true,
+      backgroundColor: backgroundColor,
+      colorBack: rgba(theme.colorText, 0.24),
+      colorFront: theme.colorText,
+      random: true,
+      showBackground: true,
+      style: {
+        zIndex: 0
+      }
+    })]
+  }));
+});
+export default GridShowcase;

package/es/GridBackground/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+export interface GridBackgroundProps extends DivProps {
+    animation?: boolean;
+    animationDuration?: number;
+    backgroundColor?: string;
+    colorBack?: string;
+    colorFront?: string;
+    flip?: boolean;
+    random?: boolean;
+    reverse?: boolean;
+    showBackground?: boolean;
+    strokeWidth?: number;
+}
+declare const GridBackground: import("react").NamedExoticComponent<GridBackgroundProps>;
+export default GridBackground;

package/es/GridBackground/index.js

@@ -0,0 +1,87 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["flip", "reverse", "showBackground", "backgroundColor", "random", "animationDuration", "className", "colorFront", "colorBack", "strokeWidth", "style", "animation"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useSize } from 'ahooks';
+import { shuffle } from 'lodash-es';
+import { memo, useCallback, useMemo, useRef } from 'react';
+import Grid from "./Grid";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridBackground = /*#__PURE__*/memo(function (_ref) {
+  var flip = _ref.flip,
+    reverse = _ref.reverse,
+    showBackground = _ref.showBackground,
+    backgroundColor = _ref.backgroundColor,
+    random = _ref.random,
+    _ref$animationDuratio = _ref.animationDuration,
+    animationDuration = _ref$animationDuratio === void 0 ? 8 : _ref$animationDuratio,
+    className = _ref.className,
+    colorFront = _ref.colorFront,
+    colorBack = _ref.colorBack,
+    strokeWidth = _ref.strokeWidth,
+    style = _ref.style,
+    animation = _ref.animation,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef(null);
+  var size = useSize(ref);
+  var _useStyles = useStyles({
+      backgroundColor: backgroundColor,
+      reverse: reverse
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var gridProps = useMemo(function () {
+    return {
+      className: styles.highlight,
+      color: colorFront,
+      strokeWidth: strokeWidth
+    };
+  }, [reverse, colorFront, strokeWidth]);
+  var HighlightGrid = useCallback(function () {
+    if (!random) return /*#__PURE__*/_jsx(Grid, _objectSpread({
+      style: {
+        '--duration': "".concat(animationDuration, "s")
+      }
+    }, gridProps));
+    var group = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: shuffle(group).map(function (item, index) {
+        return /*#__PURE__*/_jsx(Grid, _objectSpread({
+          linePick: item,
+          style: {
+            '--delay': "".concat(index + Math.random(), "s"),
+            '--duration': "".concat(animationDuration, "s")
+          }
+        }, gridProps), item);
+      })
+    });
+  }, [random, animationDuration, gridProps]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    ref: ref,
+    style: flip ? _objectSpread({
+      transform: 'scaleY(-1)'
+    }, style) : style
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Grid, {
+      color: colorBack,
+      strokeWidth: strokeWidth,
+      style: {
+        zIndex: 2
+      }
+    }), animation && /*#__PURE__*/_jsx(HighlightGrid, {}), showBackground && /*#__PURE__*/_jsx("div", {
+      className: styles.backgroundContainer,
+      style: size ? {
+        fontSize: size.width / 80
+      } : {},
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.background
+      })
+    })]
+  }));
+});
+export default GridBackground;

package/es/GridBackground/style.d.ts

@@ -0,0 +1,9 @@
+export declare const useStyles: (props?: {
+    backgroundColor?: string | undefined;
+    reverse?: boolean | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    background: import("antd-style").SerializedStyles;
+    backgroundContainer: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    highlight: import("antd-style").SerializedStyles;
+}>;

package/es/GridBackground/style.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import { createStyles, keyframes } from 'antd-style';
+import chroma from 'chroma-js';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token;
+  var reverse = _ref2.reverse,
+    _ref2$backgroundColor = _ref2.backgroundColor,
+    backgroundColor = _ref2$backgroundColor === void 0 ? 'blue' : _ref2$backgroundColor;
+  var highlightAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      mask-position: 100% 0%;\n    }\n    16%,100% {\n      mask-position: 100% 200%;\n    }\n  "])));
+  var highlightAnimationReverse = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% {\n      mask-position: 100% 200%;\n    }\n    16%,100% {\n      mask-position: 100% 0%;\n    }\n  "])));
+  var scale = chroma.bezier([token.colorText, backgroundColor, token.colorBgLayout]).scale().mode('lch').correctLightness().colors(6);
+  var width = 24;
+  var height = 36;
+  return {
+    background: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: ", "%;\n        left: ", "%;\n        transform: rotateX(60deg);\n\n        width: ", "%;\n        height: ", "%;\n\n        background: ", ";\n        filter: blur(2em) saturate(400%);\n        border-radius: 50%;\n        box-shadow:\n          0 0 1em 2em ", ",\n          0 0 3em 6em ", ",\n          0 0 6em 10em ", ",\n          0 0 8em 16em ", ";\n      "])), 60 - height / 2, 50 - width / 2, width, height, scale[1], scale[1], scale[2], scale[3], scale[4]),
+    backgroundContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: -1;\n        inset: 0;\n\n        width: 100%;\n        height: 100%;\n\n        perspective: 200px;\n      "]))),
+    container: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: relative;\n\n        mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);\n        mask-size: cover;\n      "]))),
+    highlight: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        --duration: 6s;\n        --delay: 0s;\n\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        animation: ", " var(--duration)\n          cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;\n        animation-delay: var(--delay);\n\n        mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);\n        mask-size: 100% 200%;\n      "])), reverse ? highlightAnimationReverse : highlightAnimation)
+  };
+});

package/es/index.d.ts

@@ -31,6 +31,8 @@ export { default as FormItem, type FormItemProps } from './Form/components/FormI
 export { default as FormTitle, type FormTitleProps } from './Form/components/FormTitle';
 export { default as Giscus, type GiscusProps } from './Giscus';
 export { default as GradientButton, type GradientButtonProps } from './GradientButton';
+export { default as GridBackground, type GridBackgroundProps } from './GridBackground';
+export { default as GridShowcase, type GridShowcaseProps } from './GridBackground/GridShowcase';
 export { default as Header, type HeaderProps } from './Header';
 export { default as Hero, type HeroAction, type HeroProps } from './Hero';
 export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';

package/es/index.js

@@ -30,6 +30,8 @@ export { default as FormItem } from "./Form/components/FormItem";
 export { default as FormTitle } from "./Form/components/FormTitle";
 export { default as Giscus } from "./Giscus";
 export { default as GradientButton } from "./GradientButton";
+export { default as GridBackground } from "./GridBackground";
+export { default as GridShowcase } from "./GridBackground/GridShowcase";
 export { default as Header } from "./Header";
 export { default as Hero } from "./Hero";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.69.0",
+  "version": "1.70.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",