@lobehub/ui 1.134.2 → 1.135.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/DraggablePanel/style.js +1 -1
- package/es/GradientButton/style.d.ts +1 -1
- package/es/GradientButton/style.js +3 -2
- package/es/Grid/index.d.ts +16 -0
- package/es/Grid/index.js +49 -0
- package/es/Markdown/index.js +3 -1
- package/es/Markdown/markdown.style.js +4 -4
- package/es/SpotlightCard/index.d.ts +3 -2
- package/es/SpotlightCard/index.js +10 -14
- package/es/ThemeProvider/GlobalStyle/global.js +1 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +1 -0
- package/es/mdx/Cards.d.ts +1 -0
- package/es/mdx/Cards.js +9 -4
- package/es/mdx/Pre.js +1 -1
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ var prefix = 'draggable-panel';
|
|
|
8
8
|
export var useStyles = createStyles(function (_ref, headerHeight) {
|
|
9
9
|
var token = _ref.token;
|
|
10
10
|
var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n z-index: 50;\n transition: all 0.2s ", ";\n }\n\n &:hover,\n &:active {\n &::before {\n background: ", " !important;\n }\n }\n "])), token.motionEaseOut, token.colorPrimary);
|
|
11
|
-
var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 101;\n opacity: 0;\n transition: all 0.2s ", ";\n\n &:hover {\n opacity: 1 !important;\n }\n\n &:active {\n opacity: 1 !important;\n }\n\n > div {\n cursor: pointer;\n\n position: absolute;\n\n color: ", ";\n\n background: ", ";\n border-color: ", ";\n border-style: solid;\n border-width: 1px;\n border-radius: 4px;\n\n transition: all 0.2s ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
|
|
11
|
+
var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pointer-events: none;\n\n position: absolute;\n z-index: 101;\n\n opacity: 0;\n\n transition: all 0.2s ", ";\n\n &:hover {\n opacity: 1 !important;\n }\n\n &:active {\n opacity: 1 !important;\n }\n\n > div {\n pointer-events: all;\n cursor: pointer;\n\n position: absolute;\n\n color: ", ";\n\n background: ", ";\n border-color: ", ";\n border-style: solid;\n border-width: 1px;\n border-radius: 4px;\n\n transition: all 0.2s ", ";\n\n &:hover {\n color: ", ";\n background: ", ";\n }\n\n &:active {\n color: ", ";\n background: ", ";\n }\n }\n "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
|
|
12
12
|
var float = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 200;\n "])));
|
|
13
13
|
return {
|
|
14
14
|
bottomFloat: cx(float, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n inset-block-end: 0;\n inset-inline: 0 0;\n width: 100%;\n "])))),
|
|
@@ -2,7 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
|
|
|
2
2
|
var _templateObject, _templateObject2;
|
|
3
3
|
import { createStyles } from 'antd-style';
|
|
4
4
|
export var useStyles = createStyles(function (_ref, size) {
|
|
5
|
-
var
|
|
5
|
+
var cx = _ref.cx,
|
|
6
|
+
css = _ref.css,
|
|
6
7
|
token = _ref.token,
|
|
7
8
|
isDarkMode = _ref.isDarkMode,
|
|
8
9
|
stylish = _ref.stylish;
|
|
@@ -30,7 +31,7 @@ export var useStyles = createStyles(function (_ref, size) {
|
|
|
30
31
|
}
|
|
31
32
|
}
|
|
32
33
|
return {
|
|
33
|
-
button: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
34
|
+
button: cx(stylish.gradientAnimation, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n z-index: 1;\n border: none;\n border-radius: ", "px !important;\n\n &::before {\n content: '';\n\n position: absolute;\n z-index: -1;\n inset-block-start: 1px;\n inset-inline-start: 1px;\n\n width: calc(100% - 2px);\n height: calc(100% - 2px);\n\n background: ", ";\n border-radius: ", "px;\n }\n\n &:hover {\n background: ", " !important;\n }\n "])), radius, token.colorBgLayout, radius - 1, token.colorPrimary)),
|
|
34
35
|
glow: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n position: absolute;\n z-index: -2;\n inset-block-start: 0;\n inset-inline-start: 0;\n\n width: 100%;\n height: 100%;\n\n opacity: ", ";\n filter: blur(", "em);\n border-radius: inherit;\n "])), stylish.gradientAnimation, isDarkMode ? 0.5 : 0.3, isDarkMode ? 1.5 : 1)
|
|
35
36
|
};
|
|
36
37
|
});
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type FlexboxProps } from 'react-layout-kit';
|
|
3
|
+
export declare const useStyles: (props?: {
|
|
4
|
+
gap: string | number;
|
|
5
|
+
maxItemWidth: string | number;
|
|
6
|
+
rows: number;
|
|
7
|
+
} | undefined) => import("antd-style").ReturnStyles<{
|
|
8
|
+
container: import("antd-style").SerializedStyles;
|
|
9
|
+
}>;
|
|
10
|
+
export interface GridProps extends Omit<FlexboxProps, 'gap'> {
|
|
11
|
+
gap?: string | number;
|
|
12
|
+
maxItemWidth?: string | number;
|
|
13
|
+
rows?: number;
|
|
14
|
+
}
|
|
15
|
+
declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
|
+
export default Grid;
|
package/es/Grid/index.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
+
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
6
|
+
var _excluded = ["className", "gap", "rows", "children", "maxItemWidth"];
|
|
7
|
+
var _templateObject;
|
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
+
import { createStyles } from 'antd-style';
|
|
11
|
+
import { isString } from 'lodash-es';
|
|
12
|
+
import { forwardRef } from 'react';
|
|
13
|
+
import { Flexbox } from 'react-layout-kit';
|
|
14
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
|
+
export var useStyles = createStyles(function (_ref, _ref2) {
|
|
16
|
+
var css = _ref.css;
|
|
17
|
+
var rows = _ref2.rows,
|
|
18
|
+
maxItemWidth = _ref2.maxItemWidth,
|
|
19
|
+
gap = _ref2.gap;
|
|
20
|
+
return {
|
|
21
|
+
container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --rows: ", ";\n --max-item-width: ", ";\n --gap: ", ";\n\n display: grid !important;\n grid-template-columns: repeat(\n auto-fill,\n minmax(\n max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))),\n 1fr\n )\n );\n "])), rows, isString(maxItemWidth) ? maxItemWidth : "".concat(maxItemWidth, "px"), isString(gap) ? gap : "".concat(gap, "px"))
|
|
22
|
+
};
|
|
23
|
+
});
|
|
24
|
+
var Grid = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
25
|
+
var className = _ref3.className,
|
|
26
|
+
_ref3$gap = _ref3.gap,
|
|
27
|
+
gap = _ref3$gap === void 0 ? '1em' : _ref3$gap,
|
|
28
|
+
_ref3$rows = _ref3.rows,
|
|
29
|
+
rows = _ref3$rows === void 0 ? 3 : _ref3$rows,
|
|
30
|
+
children = _ref3.children,
|
|
31
|
+
_ref3$maxItemWidth = _ref3.maxItemWidth,
|
|
32
|
+
maxItemWidth = _ref3$maxItemWidth === void 0 ? 240 : _ref3$maxItemWidth,
|
|
33
|
+
rest = _objectWithoutProperties(_ref3, _excluded);
|
|
34
|
+
var _useStyles = useStyles({
|
|
35
|
+
gap: gap,
|
|
36
|
+
maxItemWidth: maxItemWidth,
|
|
37
|
+
rows: rows
|
|
38
|
+
}),
|
|
39
|
+
cx = _useStyles.cx,
|
|
40
|
+
styles = _useStyles.styles;
|
|
41
|
+
return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
|
|
42
|
+
className: cx(styles.container, className),
|
|
43
|
+
gap: gap,
|
|
44
|
+
ref: ref
|
|
45
|
+
}, rest), {}, {
|
|
46
|
+
children: children
|
|
47
|
+
}));
|
|
48
|
+
});
|
|
49
|
+
export default Grid;
|
package/es/Markdown/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
-
var _excluded = ["children", "className", "style", "fullFeaturedCodeBlock", "onDoubleClick", "enableImageGallery", "componentProps", "allowHtml", "fontSize", "headerMultiple", "marginMultiple", "variant"];
|
|
5
|
+
var _excluded = ["children", "className", "style", "fullFeaturedCodeBlock", "onDoubleClick", "enableImageGallery", "componentProps", "allowHtml", "fontSize", "headerMultiple", "marginMultiple", "variant", "lineHeight"];
|
|
6
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
7
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
8
8
|
import { memo, useMemo } from 'react';
|
|
@@ -33,10 +33,12 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
|
|
|
33
33
|
marginMultiple = _ref.marginMultiple,
|
|
34
34
|
_ref$variant = _ref.variant,
|
|
35
35
|
variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
|
|
36
|
+
lineHeight = _ref.lineHeight,
|
|
36
37
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
37
38
|
var _useStyles = useStyles({
|
|
38
39
|
fontSize: fontSize,
|
|
39
40
|
headerMultiple: headerMultiple,
|
|
41
|
+
lineHeight: lineHeight,
|
|
40
42
|
marginMultiple: marginMultiple
|
|
41
43
|
}),
|
|
42
44
|
cx = _useStyles.cx,
|
|
@@ -15,11 +15,11 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
15
15
|
_ref2$lineHeight = _ref2.lineHeight,
|
|
16
16
|
lineHeight = _ref2$lineHeight === void 0 ? 1.8 : _ref2$lineHeight;
|
|
17
17
|
return {
|
|
18
|
-
__root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --lobe-markdown-font-size: ", "px;\n --lobe-markdown-header-multiple: ", ";\n --lobe-markdown-margin-multiple: ", ";\n --lobe-markdown-line-height: ", ";\n --lobe-markdown-border-radius: ", ";\n --lobe-markdown-border-color: ", ";\n\n position: relative;\n\n width: 100%;\n\n font-size: var(--lobe-markdown-font-size);\n line-height: var(--lobe-markdown-line-height);\n word-break:
|
|
18
|
+
__root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n --lobe-markdown-font-size: ", "px;\n --lobe-markdown-header-multiple: ", ";\n --lobe-markdown-margin-multiple: ", ";\n --lobe-markdown-line-height: ", ";\n --lobe-markdown-border-radius: ", ";\n --lobe-markdown-border-color: ", ";\n\n position: relative;\n\n width: 100%;\n padding-inline: 1px;\n\n font-size: var(--lobe-markdown-font-size);\n line-height: var(--lobe-markdown-line-height);\n word-break: break-word;\n "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, isDarkMode ? token.colorBorderSecondary : rgba(token.colorBorderSecondary, 0.5)),
|
|
19
19
|
a: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n a {\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n }\n "])), token.colorInfoText, token.colorInfoHover),
|
|
20
20
|
blockquote: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n blockquote {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n margin-inline: 0;\n padding-block: 0;\n padding-inline: 1em;\n\n color: ", ";\n\n border-inline-start: solid 4px ", ";\n }\n "])), token.colorTextSecondary, token.colorBorder),
|
|
21
|
-
code: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n code:not(:has(span)) {\n display: inline;\n\n margin-inline: 0.25em;\n padding-block: 0.2em;\n padding-inline: 0.4em;\n\n font-family: ", ";\n font-size: 0.875em;\n line-height: 1;\n word-break:
|
|
22
|
-
details: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n details {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n padding-block: 0.75em;\n padding-inline: 1em;\n\n background: ", ";\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow:
|
|
21
|
+
code: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n code:not(:has(span)) {\n display: inline;\n\n margin-inline: 0.25em;\n padding-block: 0.2em;\n padding-inline: 0.4em;\n\n font-family: ", ";\n font-size: 0.875em;\n line-height: 1;\n word-break: break-word;\n\n background: ", ";\n border: 1px solid var(--lobe-markdown-border-color);\n border-radius: 0.25em;\n }\n "])), token.fontFamilyCode, token.colorFillSecondary),
|
|
22
|
+
details: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n details {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n padding-block: 0.75em;\n padding-inline: 1em;\n\n background: ", ";\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n summary {\n cursor: pointer;\n display: flex;\n align-items: center;\n list-style: none;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-inline-end: 1.25em;\n transform: rotateZ(-45deg);\n\n display: block;\n\n width: 0.4em;\n height: 0.4em;\n\n font-family: ", ";\n\n border-block-end: 1.5px solid ", ";\n border-inline-end: 1.5px solid ", ";\n\n transition: transform 200ms ", ";\n }\n }\n\n &[open] {\n summary {\n padding-block-end: 0.75em;\n border-block-end: 1px dashed ", ";\n\n &::before {\n transform: rotateZ(45deg);\n }\n }\n }\n }\n "])), token.colorFillTertiary, token.fontFamily, token.colorTextSecondary, token.colorTextSecondary, token.motionEaseOut, token.colorBorder),
|
|
23
23
|
header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n h1,\n h2,\n h3,\n h4,\n h5 {\n margin-block: max(\n calc(\n var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em\n ),\n var(--lobe-markdown-font-size)\n );\n font-weight: 600;\n }\n\n h1 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h2 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple))\n );\n }\n\n h3 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h4 {\n font-size: calc(\n var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n );\n }\n\n h5 {\n font-size: calc(var(--lobe-markdown-font-size) * 1);\n }\n "]))),
|
|
24
24
|
hr: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n hr {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n\n border-color: ", ";\n border-style: dashed;\n border-width: 1px;\n border-block-start: none;\n border-inline-start: none;\n border-inline-end: none;\n }\n "])), token.colorBorderSecondary),
|
|
25
25
|
img: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n img {\n max-width: 100%;\n }\n\n > img,\n > p > img {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n "]))),
|
|
@@ -28,7 +28,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
28
28
|
p: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n p {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n line-height: var(--lobe-markdown-line-height);\n letter-spacing: 0.02em;\n }\n "]))),
|
|
29
29
|
pre: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n pre,\n [data-code-type='highlighter'] {\n border: none;\n\n > code {\n padding: 0 !important;\n\n font-family: ", ";\n font-size: 0.875em;\n line-height: 1.6;\n\n border: none !important;\n }\n }\n "])), token.fontFamilyCode),
|
|
30
30
|
strong: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n strong {\n font-weight: 600;\n }\n "]))),
|
|
31
|
-
table: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n table {\n overflow: auto hidden;\n display: block;\n border-spacing: 0;\n border-collapse: collapse;\n\n box-sizing: border-box;\n width: fit-content;\n max-width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n text-align: start;\n overflow-wrap: break-word;\n\n background: ", ";\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow:
|
|
31
|
+
table: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n table {\n overflow: auto hidden;\n display: block;\n border-spacing: 0;\n border-collapse: collapse;\n\n box-sizing: border-box;\n width: fit-content;\n max-width: 100%;\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n text-align: start;\n word-break: auto-phrase;\n overflow-wrap: break-word;\n\n background: ", ";\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n code {\n word-break: auto-phrase;\n }\n\n thead {\n background: ", ";\n }\n\n tr {\n box-shadow: 0 1px 0 var(--lobe-markdown-border-color);\n }\n\n th,\n td {\n padding-block: 0.75em;\n padding-inline: 1em;\n text-align: start;\n vertical-align: top;\n }\n }\n "])), token.colorFillQuaternary, token.colorFillQuaternary),
|
|
32
32
|
video: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n > video,\n > p > video {\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n }\n\n video {\n max-width: 100%;\n }\n "])))
|
|
33
33
|
};
|
|
34
34
|
});
|
|
@@ -2,9 +2,10 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
import { DivProps } from "../types";
|
|
3
3
|
export interface SpotlightCardProps<T = any> extends DivProps {
|
|
4
4
|
borderRadius?: number;
|
|
5
|
-
columns?:
|
|
6
|
-
gap?: number;
|
|
5
|
+
columns?: number;
|
|
6
|
+
gap?: number | string;
|
|
7
7
|
items: T[];
|
|
8
|
+
maxItemWidth?: string | number;
|
|
8
9
|
renderItem: (item: T) => ReactNode;
|
|
9
10
|
size?: number;
|
|
10
11
|
spotlight?: boolean;
|
|
@@ -2,25 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
5
|
-
var _excluded = ["items", "renderItem", "className", "columns", "gap", "style", "size", "borderRadius", "spotlight"];
|
|
5
|
+
var _excluded = ["items", "renderItem", "maxItemWidth", "className", "columns", "gap", "style", "size", "borderRadius", "spotlight"];
|
|
6
6
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
7
7
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
8
8
|
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
9
9
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
10
10
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
11
|
+
import { memo, useEffect, useRef } from 'react';
|
|
12
|
+
import Grid from "../Grid";
|
|
13
13
|
import SpotlightCardItem from "./SpotlightCardItem";
|
|
14
14
|
import { CHILDREN_CLASSNAME, useStyles } from "./style";
|
|
15
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
16
|
var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
|
|
17
17
|
var items = _ref.items,
|
|
18
18
|
Content = _ref.renderItem,
|
|
19
|
+
maxItemWidth = _ref.maxItemWidth,
|
|
19
20
|
className = _ref.className,
|
|
20
21
|
_ref$columns = _ref.columns,
|
|
21
22
|
columns = _ref$columns === void 0 ? 3 : _ref$columns,
|
|
22
23
|
_ref$gap = _ref.gap,
|
|
23
|
-
gap = _ref$gap === void 0 ?
|
|
24
|
+
gap = _ref$gap === void 0 ? '1em' : _ref$gap,
|
|
24
25
|
style = _ref.style,
|
|
25
26
|
_ref$size = _ref.size,
|
|
26
27
|
size = _ref$size === void 0 ? 800 : _ref$size,
|
|
@@ -36,11 +37,6 @@ var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
|
|
|
36
37
|
styles = _useStyles.styles,
|
|
37
38
|
cx = _useStyles.cx;
|
|
38
39
|
var ref = useRef(null);
|
|
39
|
-
var gridColumns = useMemo(function () {
|
|
40
|
-
return isNumber(columns) ? Array.from({
|
|
41
|
-
length: columns
|
|
42
|
-
}).fill('1fr').join(' ') : columns;
|
|
43
|
-
}, [columns]);
|
|
44
40
|
useEffect(function () {
|
|
45
41
|
if (!ref.current) return;
|
|
46
42
|
if (!spotlight) return;
|
|
@@ -68,13 +64,13 @@ var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
|
|
|
68
64
|
(_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.removeEventListener('mousemove', fn);
|
|
69
65
|
};
|
|
70
66
|
}, []);
|
|
71
|
-
return /*#__PURE__*/_jsx(
|
|
67
|
+
return /*#__PURE__*/_jsx(Grid, _objectSpread(_objectSpread({
|
|
72
68
|
className: cx(styles.container, styles.grid, className),
|
|
69
|
+
gap: gap,
|
|
70
|
+
maxItemWidth: maxItemWidth,
|
|
73
71
|
ref: ref,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
gridTemplateColumns: gridColumns
|
|
77
|
-
}, style)
|
|
72
|
+
rows: columns,
|
|
73
|
+
style: style
|
|
78
74
|
}, rest), {}, {
|
|
79
75
|
children: items.map(function (item, index) {
|
|
80
76
|
return /*#__PURE__*/_jsx(SpotlightCardItem, {
|
|
@@ -2,5 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
|
|
|
2
2
|
var _templateObject;
|
|
3
3
|
import { css } from 'antd-style';
|
|
4
4
|
export default (function (token) {
|
|
5
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n
|
|
5
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n :root {\n --font-settings: 'cv01', 'tnum', 'kern';\n --font-variations: 'opsz' auto, tabular-nums;\n }\n\n html {\n color-scheme: ", ";\n }\n\n body {\n overflow: hidden auto;\n\n min-height: 100vh;\n margin: 0;\n padding: 0;\n\n font-family: ", ";\n font-size: ", "px;\n font-feature-settings: var(--font-settings);\n font-variation-settings: var(--font-variations);\n line-height: 1;\n color: ", ";\n text-size-adjust: none;\n text-rendering: optimizelegibility;\n word-wrap: break-word;\n vertical-align: baseline;\n\n background-color: ", ";\n\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-overflow-scrolling: touch;\n -webkit-tap-highlight-color: transparent;\n }\n\n code {\n font-family: ", " !important;\n\n span {\n font-family: ", " !important;\n }\n }\n\n ::selection {\n color: #000;\n background: ", ";\n\n -webkit-text-fill-color: unset !important;\n }\n\n * {\n box-sizing: border-box;\n vertical-align: baseline;\n }\n"])), token.isDarkMode ? 'dark' : 'light', token.fontFamily, token.fontSize, token.colorTextBase, token.colorBgLayout, token.fontFamilyCode, token.fontFamilyCode, token.yellow9);
|
|
6
6
|
});
|
package/es/index.d.ts
CHANGED
|
@@ -39,6 +39,7 @@ export { default as FormTitle, type FormTitleProps } from './Form/components/For
|
|
|
39
39
|
export { default as GaussianBackground, type GaussianBackgroundProps } from './GaussianBackground';
|
|
40
40
|
export { default as Giscus, type GiscusProps } from './Giscus';
|
|
41
41
|
export { default as GradientButton, type GradientButtonProps } from './GradientButton';
|
|
42
|
+
export { default as Grid, type GridProps } from './Grid';
|
|
42
43
|
export { default as GridBackground, type GridBackgroundProps } from './GridBackground';
|
|
43
44
|
export { default as GridShowcase, type GridShowcaseProps } from './GridBackground/GridShowcase';
|
|
44
45
|
export { default as Header, type HeaderProps } from './Header';
|
package/es/index.js
CHANGED
|
@@ -38,6 +38,7 @@ export { default as FormTitle } from "./Form/components/FormTitle";
|
|
|
38
38
|
export { default as GaussianBackground } from "./GaussianBackground";
|
|
39
39
|
export { default as Giscus } from "./Giscus";
|
|
40
40
|
export { default as GradientButton } from "./GradientButton";
|
|
41
|
+
export { default as Grid } from "./Grid";
|
|
41
42
|
export { default as GridBackground } from "./GridBackground";
|
|
42
43
|
export { default as GridShowcase } from "./GridBackground/GridShowcase";
|
|
43
44
|
export { default as Header } from "./Header";
|
package/es/mdx/Cards.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export interface CardProps extends Omit<FlexboxProps, 'children'> {
|
|
|
11
11
|
}
|
|
12
12
|
declare const Card: FC<CardProps>;
|
|
13
13
|
interface _CardsProps extends PropsWithChildren {
|
|
14
|
+
maxItemWidth?: string | number;
|
|
14
15
|
rows?: number;
|
|
15
16
|
}
|
|
16
17
|
declare const _Cards: FC<_CardsProps>;
|
package/es/mdx/Cards.js
CHANGED
|
@@ -10,18 +10,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
10
10
|
import { createStyles } from 'antd-style';
|
|
11
11
|
import { Flexbox } from 'react-layout-kit';
|
|
12
12
|
import A from "../A";
|
|
13
|
+
import Grid from "../Grid";
|
|
13
14
|
import Icon from "../Icon";
|
|
14
15
|
import Img from "../Img";
|
|
15
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
16
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
-
var useStyles = createStyles(function (_ref
|
|
18
|
+
var useStyles = createStyles(function (_ref) {
|
|
18
19
|
var css = _ref.css,
|
|
19
20
|
cx = _ref.cx,
|
|
20
21
|
token = _ref.token;
|
|
21
22
|
var icon = cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin-block: 0.1em;\n opacity: 0.5;\n transition: opacity 0.2s ", ";\n "])), token.motionEaseInOut));
|
|
22
23
|
return {
|
|
23
24
|
card: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n --lobe-markdown-header-multiple: 0;\n --lobe-markdown-margin-multiple: 1;\n\n overflow: hidden;\n\n height: 100%;\n\n color: ", ";\n\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n transition: all 0.2s ", ";\n\n h3,\n p {\n margin-block: 0;\n }\n\n p {\n color: ", ";\n transition: color 0.2s ", ";\n }\n\n &:hover {\n background: ", ";\n box-shadow: 0 0 0 1px ", ";\n\n p {\n color: ", ";\n }\n\n .", " {\n opacity: 1;\n }\n }\n "])), token.colorText, token.motionEaseInOut, token.colorTextDescription, token.motionEaseInOut, token.colorFillQuaternary, token.colorBorder, token.colorTextSecondary, icon),
|
|
24
|
-
container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
25
|
+
container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n > div {\n margin: 0 !important;\n }\n "]))),
|
|
25
26
|
content: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n gap: 0.75em;\n padding: 1em;\n "]))),
|
|
26
27
|
icon: icon
|
|
27
28
|
};
|
|
@@ -75,12 +76,16 @@ var Card = function Card(_ref2) {
|
|
|
75
76
|
};
|
|
76
77
|
var _Cards = function _Cards(_ref3) {
|
|
77
78
|
var children = _ref3.children,
|
|
79
|
+
_ref3$maxItemWidth = _ref3.maxItemWidth,
|
|
80
|
+
maxItemWidth = _ref3$maxItemWidth === void 0 ? 250 : _ref3$maxItemWidth,
|
|
78
81
|
_ref3$rows = _ref3.rows,
|
|
79
82
|
rows = _ref3$rows === void 0 ? 3 : _ref3$rows;
|
|
80
|
-
var _useStyles2 = useStyles(
|
|
83
|
+
var _useStyles2 = useStyles(),
|
|
81
84
|
styles = _useStyles2.styles;
|
|
82
|
-
return /*#__PURE__*/_jsx(
|
|
85
|
+
return /*#__PURE__*/_jsx(Grid, {
|
|
83
86
|
className: styles.container,
|
|
87
|
+
maxItemWidth: maxItemWidth,
|
|
88
|
+
rows: rows,
|
|
84
89
|
children: children
|
|
85
90
|
});
|
|
86
91
|
};
|
package/es/mdx/Pre.js
CHANGED
|
@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
10
10
|
var useStyles = createStyles(function (_ref) {
|
|
11
11
|
var css = _ref.css;
|
|
12
12
|
return {
|
|
13
|
-
container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n margin-block: 1em;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow:
|
|
13
|
+
container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n margin-block: 1em;\n border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n "]))),
|
|
14
14
|
highlight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n pre {\n overflow-x: hidden !important;\n padding: 1em !important;\n }\n "])))
|
|
15
15
|
};
|
|
16
16
|
});
|