@lobehub/ui 5.53.0 → 5.54.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/awesome/BottomGradientButton/BottomGradientButton.d.mts +2 -3
- package/es/awesome/BottomGradientButton/BottomGradientButton.mjs +2 -2
- package/es/awesome/BottomGradientButton/BottomGradientButton.mjs.map +1 -1
- package/es/awesome/BottomGradientButton/index.d.mts +1 -1
- package/es/awesome/BottomGradientButton/style.mjs +4 -1
- package/es/awesome/BottomGradientButton/style.mjs.map +1 -1
- package/es/awesome/BottomGradientButton/type.d.mts +2 -2
- package/es/awesome/GradientButton/GradientButton.mjs +2 -2
- package/es/awesome/GradientButton/GradientButton.mjs.map +1 -1
- package/es/awesome/GradientButton/type.d.mts +2 -2
- package/es/awesome/Hero/Hero.mjs +35 -29
- package/es/awesome/Hero/Hero.mjs.map +1 -1
- package/es/awesome/Hero/style.mjs +4 -0
- package/es/awesome/Hero/style.mjs.map +1 -1
- package/es/awesome/index.d.mts +1 -1
- package/es/awesome/landingActions.mjs +1 -1
- package/es/awesome/landingActions.mjs.map +1 -1
- package/es/base-ui/Input/style.d.mts +2 -2
- package/es/base-ui/Input/style.mjs +5 -0
- package/es/base-ui/Input/style.mjs.map +1 -1
- package/es/base-ui/index.d.mts +5 -5
- package/es/chat/BackBottom/BackBottom.mjs +4 -4
- package/es/chat/BackBottom/BackBottom.mjs.map +1 -1
- package/es/chat/BackBottom/type.d.mts +3 -4
- package/es/chat/ChatInputArea/ChatInputArea.mjs +32 -24
- package/es/chat/ChatInputArea/ChatInputArea.mjs.map +1 -1
- package/es/chat/ChatInputArea/components/ChatInputAreaInner.mjs +1 -1
- package/es/chat/ChatInputArea/components/ChatInputAreaInner.mjs.map +1 -1
- package/es/chat/ChatInputArea/components/ChatSendButton.mjs +1 -1
- package/es/chat/ChatInputArea/components/ChatSendButton.mjs.map +1 -1
- package/es/chat/ChatInputArea/style.mjs +12 -1
- package/es/chat/ChatInputArea/style.mjs.map +1 -1
- package/es/chat/ChatInputArea/type.d.mts +7 -8
- package/es/chat/ChatItem/components/Avatar.mjs +1 -1
- package/es/chat/ChatItem/components/Avatar.mjs.map +1 -1
- package/es/chat/ChatItem/components/ErrorContent.mjs +1 -1
- package/es/chat/ChatItem/components/ErrorContent.mjs.map +1 -1
- package/es/chat/ChatItem/type.d.mts +4 -4
- package/es/chat/ChatList/ChatList.mjs +4 -3
- package/es/chat/ChatList/ChatList.mjs.map +1 -1
- package/es/chat/ChatList/components/ChatListItem.mjs +3 -5
- package/es/chat/ChatList/components/ChatListItem.mjs.map +1 -1
- package/es/chat/ChatList/components/HistoryDivider.mjs +1 -1
- package/es/chat/ChatList/components/HistoryDivider.mjs.map +1 -1
- package/es/chat/ChatList/type.d.mts +2 -2
- package/es/chat/EditableMessageList/EditableMessageList.mjs +2 -3
- package/es/chat/EditableMessageList/EditableMessageList.mjs.map +1 -1
- package/es/chat/MessageInput/MessageInput.mjs +3 -3
- package/es/chat/MessageInput/MessageInput.mjs.map +1 -1
- package/es/chat/MessageInput/type.d.mts +2 -2
- package/es/chat/MessageModal/MessageModal.mjs +4 -5
- package/es/chat/MessageModal/MessageModal.mjs.map +1 -1
- package/es/chat/MessageModal/type.d.mts +3 -3
- package/es/chat/TokenTag/TokenTag.mjs +1 -1
- package/es/chat/TokenTag/TokenTag.mjs.map +1 -1
- package/es/color/ColorScales/ScaleRow.mjs +6 -4
- package/es/color/ColorScales/ScaleRow.mjs.map +1 -1
- package/es/color/ColorScales/index.mjs +10 -9
- package/es/color/ColorScales/index.mjs.map +1 -1
- package/es/color/CssVar/ScaleRow.mjs +6 -4
- package/es/color/CssVar/ScaleRow.mjs.map +1 -1
- package/es/color/CssVar/VarRow.mjs +6 -4
- package/es/color/CssVar/VarRow.mjs.map +1 -1
- package/es/color/CssVar/index.mjs +10 -9
- package/es/color/CssVar/index.mjs.map +1 -1
- package/es/mobile/ChatInputArea/ChatInputArea.mjs +1 -1
- package/es/mobile/ChatInputArea/ChatInputArea.mjs.map +1 -1
- package/es/mobile/ChatInputArea/components/ChatSendButton.mjs +1 -1
- package/es/mobile/ChatInputArea/components/ChatSendButton.mjs.map +1 -1
- package/es/mobile/ChatInputArea/type.d.mts +6 -7
- package/es/static-css/baseline.mjs +0 -2
- package/es/static-css/baseline.mjs.map +1 -1
- package/es/storybook/StoryBook/index.mjs +1 -1
- package/es/storybook/StoryBook/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import "../../Button/index.mjs";
|
|
1
|
+
import { BottomGradientButtonProps } from "./type.mjs";
|
|
3
2
|
//#region src/awesome/BottomGradientButton/BottomGradientButton.d.ts
|
|
4
|
-
declare const BottomGradientButton: import("react").NamedExoticComponent<
|
|
3
|
+
declare const BottomGradientButton: import("react").NamedExoticComponent<BottomGradientButtonProps>;
|
|
5
4
|
//#endregion
|
|
6
5
|
export { BottomGradientButton as default };
|
|
7
6
|
//# sourceMappingURL=BottomGradientButton.d.mts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import Button from "../../Button/Button.mjs";
|
|
2
|
+
import Button from "../../base-ui/Button/Button.mjs";
|
|
3
3
|
import { styles } from "./style.mjs";
|
|
4
4
|
import { memo } from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -10,7 +10,7 @@ const BottomGradientButton = memo(({ className, children, style, ref, ...rest })
|
|
|
10
10
|
className: cx(styles, className),
|
|
11
11
|
ref,
|
|
12
12
|
shape: "round",
|
|
13
|
-
|
|
13
|
+
type: "fill",
|
|
14
14
|
style: {
|
|
15
15
|
paddingInline: 16,
|
|
16
16
|
width: "unset",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomGradientButton.mjs","names":[],"sources":["../../../src/awesome/BottomGradientButton/BottomGradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport Button from '@/Button';\n\nimport { styles } from './style';\nimport type { BottomGradientButtonProps } from './type';\n\nconst BottomGradientButton = memo<BottomGradientButtonProps>(\n ({ className, children, style, ref, ...rest }) => {\n return (\n <Button\n className={cx(styles, className)}\n ref={ref}\n shape={'round'}\n
|
|
1
|
+
{"version":3,"file":"BottomGradientButton.mjs","names":[],"sources":["../../../src/awesome/BottomGradientButton/BottomGradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport Button from '@/base-ui/Button';\n\nimport { styles } from './style';\nimport type { BottomGradientButtonProps } from './type';\n\nconst BottomGradientButton = memo<BottomGradientButtonProps>(\n ({ className, children, style, ref, ...rest }) => {\n return (\n <Button\n className={cx(styles, className)}\n ref={ref}\n shape={'round'}\n type={'fill'}\n style={{\n paddingInline: 16,\n width: 'unset',\n ...style,\n }}\n {...rest}\n >\n {children}\n </Button>\n );\n },\n);\n\nBottomGradientButton.displayName = 'BottomGradientButton';\n\nexport default BottomGradientButton;\n"],"mappings":";;;;;;;AAUA,MAAM,uBAAuB,MAC1B,EAAE,WAAW,UAAU,OAAO,KAAK,GAAG,WAAW;CAChD,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,QAAQ,SAAS;EAC1B;EACL,OAAO;EACP,MAAM;EACN,OAAO;GACL,eAAe;GACf,OAAO;GACP,GAAG;EACL;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CACF;AAEA,qBAAqB,cAAc"}
|
|
@@ -4,7 +4,6 @@ import { createStaticStyles, cx } from "antd-style";
|
|
|
4
4
|
const styles = createStaticStyles(({ css, cssVar }) => cx(staticStylish.resetLinkColor, css`
|
|
5
5
|
overflow: hidden;
|
|
6
6
|
font-weight: bold;
|
|
7
|
-
color: ${cssVar.colorTextSecondary};
|
|
8
7
|
transition: all 0.2s ease-in-out;
|
|
9
8
|
|
|
10
9
|
&::before {
|
|
@@ -24,6 +23,10 @@ const styles = createStaticStyles(({ css, cssVar }) => cx(staticStylish.resetLin
|
|
|
24
23
|
transition: all 0.2s ease-in-out;
|
|
25
24
|
}
|
|
26
25
|
|
|
26
|
+
&&:not(:hover) {
|
|
27
|
+
color: ${cssVar.colorTextSecondary};
|
|
28
|
+
}
|
|
29
|
+
|
|
27
30
|
&:hover {
|
|
28
31
|
&::before {
|
|
29
32
|
opacity: 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/awesome/BottomGradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) =>\n cx(\n lobeStaticStylish.resetLinkColor,\n css`\n overflow: hidden;\n font-weight: bold;\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/awesome/BottomGradientButton/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) =>\n cx(\n lobeStaticStylish.resetLinkColor,\n css`\n overflow: hidden;\n font-weight: bold;\n transition: all 0.2s ease-in-out;\n\n &::before {\n content: '';\n\n position: absolute;\n inset-block-end: 0;\n\n display: block;\n\n width: 50%;\n height: 1px;\n\n opacity: 0;\n background-image: linear-gradient(to right, transparent, ${cssVar.gold}, transparent);\n\n transition: all 0.2s ease-in-out;\n }\n\n &&:not(:hover) {\n color: ${cssVar.colorTextSecondary};\n }\n\n &:hover {\n &::before {\n opacity: 1;\n }\n }\n `,\n ),\n);\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAC/C,GACEA,cAAkB,gBAClB,GAAG;;;;;;;;;;;;;;;;;mEAiB4D,OAAO,KAAK;;;;;;iBAM9D,OAAO,mBAAmB;;;;;;;;KASzC,CACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ButtonProps } from "../../Button/type.mjs";
|
|
2
|
-
import "../../Button/index.mjs";
|
|
1
|
+
import { ButtonProps } from "../../base-ui/Button/type.mjs";
|
|
2
|
+
import "../../base-ui/Button/index.mjs";
|
|
3
3
|
//#region src/awesome/BottomGradientButton/type.d.ts
|
|
4
4
|
type BottomGradientButtonProps = ButtonProps;
|
|
5
5
|
//#endregion
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import Button from "../../Button/Button.mjs";
|
|
2
|
+
import Button from "../../base-ui/Button/Button.mjs";
|
|
3
3
|
import { styles } from "./style.mjs";
|
|
4
4
|
import { memo, useMemo } from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -24,7 +24,7 @@ const GradientButton = memo(({ glow = true, children, className, size, disabled,
|
|
|
24
24
|
return /* @__PURE__ */ jsxs(Button, {
|
|
25
25
|
disabled,
|
|
26
26
|
size,
|
|
27
|
-
|
|
27
|
+
type: disabled ? void 0 : "text",
|
|
28
28
|
className: cx(!disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight), className),
|
|
29
29
|
style: {
|
|
30
30
|
...cssVariables,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GradientButton.mjs","names":[],"sources":["../../../src/awesome/GradientButton/GradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx, useThemeMode } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport Button from '@/Button';\n\nimport { styles } from './style';\nimport type { GradientButtonProps } from './type';\n\nconst GradientButton = memo<GradientButtonProps>(\n ({ glow = true, children, className, size, disabled, style, ...rest }) => {\n const { isDarkMode } = useThemeMode();\n\n // Convert size prop to CSS variable for borderRadius\n const cssVariables = useMemo<Record<string, string>>(() => {\n if (!size || disabled) return {} as Record<string, string>;\n let borderRadius: string;\n switch (size) {\n case 'large': {\n borderRadius = cssVar.borderRadiusLG;\n break;\n }\n case 'small': {\n borderRadius = cssVar.borderRadiusSM;\n break;\n }\n default: {\n borderRadius = cssVar.borderRadius;\n break;\n }\n }\n return {\n '--gradient-button-border-radius': borderRadius,\n };\n }, [size, disabled]);\n\n return (\n <Button\n disabled={disabled}\n size={size}\n
|
|
1
|
+
{"version":3,"file":"GradientButton.mjs","names":[],"sources":["../../../src/awesome/GradientButton/GradientButton.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx, useThemeMode } from 'antd-style';\nimport { memo, useMemo } from 'react';\n\nimport Button from '@/base-ui/Button';\n\nimport { styles } from './style';\nimport type { GradientButtonProps } from './type';\n\nconst GradientButton = memo<GradientButtonProps>(\n ({ glow = true, children, className, size, disabled, style, ...rest }) => {\n const { isDarkMode } = useThemeMode();\n\n // Convert size prop to CSS variable for borderRadius\n const cssVariables = useMemo<Record<string, string>>(() => {\n if (!size || disabled) return {} as Record<string, string>;\n let borderRadius: string;\n switch (size) {\n case 'large': {\n borderRadius = cssVar.borderRadiusLG;\n break;\n }\n case 'small': {\n borderRadius = cssVar.borderRadiusSM;\n break;\n }\n default: {\n borderRadius = cssVar.borderRadius;\n break;\n }\n }\n return {\n '--gradient-button-border-radius': borderRadius,\n };\n }, [size, disabled]);\n\n return (\n <Button\n disabled={disabled}\n size={size}\n type={disabled ? undefined : 'text'}\n className={cx(\n !disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight),\n className,\n )}\n style={{\n ...cssVariables,\n ...style,\n }}\n {...rest}\n >\n {glow && <div className={styles.glow} />}\n {children}\n </Button>\n );\n },\n);\n\nGradientButton.displayName = 'GradientButton';\n\nexport default GradientButton;\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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ButtonProps } from "../../Button/type.mjs";
|
|
2
|
-
import "../../Button/index.mjs";
|
|
1
|
+
import { ButtonProps } from "../../base-ui/Button/type.mjs";
|
|
2
|
+
import "../../base-ui/Button/index.mjs";
|
|
3
3
|
//#region src/awesome/GradientButton/type.d.ts
|
|
4
4
|
interface GradientButtonProps extends ButtonProps {
|
|
5
5
|
glow?: boolean;
|
package/es/awesome/Hero/Hero.mjs
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import A from "../../A/index.mjs";
|
|
3
3
|
import FlexBasic_default from "../../Flex/FlexBasic.mjs";
|
|
4
4
|
import Center from "../../Flex/Center.mjs";
|
|
5
|
-
import
|
|
5
|
+
import Icon from "../../Icon/Icon.mjs";
|
|
6
|
+
import Button from "../../base-ui/Button/Button.mjs";
|
|
6
7
|
import AuroraBackground from "../AuroraBackground/AuroraBackground.mjs";
|
|
7
8
|
import GradientButton from "../GradientButton/GradientButton.mjs";
|
|
8
9
|
import GithubIcon from "../../icons/lucideExtra/GithubIcon.mjs";
|
|
@@ -10,7 +11,6 @@ import { styles } from "./style.mjs";
|
|
|
10
11
|
import { memo, useCallback } from "react";
|
|
11
12
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
12
13
|
import { useResponsive } from "antd-style";
|
|
13
|
-
import { ConfigProvider } from "antd";
|
|
14
14
|
//#region src/awesome/Hero/Hero.tsx
|
|
15
15
|
const Hero = memo(({ title, description, actions, Link }) => {
|
|
16
16
|
const { mobile } = useResponsive();
|
|
@@ -23,12 +23,18 @@ const Hero = memo(({ title, description, actions, Link }) => {
|
|
|
23
23
|
children: actions.map(({ text, link, openExternal, github, type }, index) => {
|
|
24
24
|
const content = type === "primary" ? /* @__PURE__ */ jsx(GradientButton, {
|
|
25
25
|
block: mobile,
|
|
26
|
-
icon: github ?
|
|
26
|
+
icon: github ? /* @__PURE__ */ jsx(Icon, {
|
|
27
|
+
icon: GithubIcon,
|
|
28
|
+
size: 18
|
|
29
|
+
}) : void 0,
|
|
27
30
|
size: "large",
|
|
28
31
|
children: text
|
|
29
|
-
}, index) : /* @__PURE__ */ jsx(Button
|
|
32
|
+
}, index) : /* @__PURE__ */ jsx(Button, {
|
|
30
33
|
block: mobile,
|
|
31
|
-
icon: github ?
|
|
34
|
+
icon: github ? /* @__PURE__ */ jsx(Icon, {
|
|
35
|
+
icon: GithubIcon,
|
|
36
|
+
size: 18
|
|
37
|
+
}) : void 0,
|
|
32
38
|
size: "large",
|
|
33
39
|
type: "primary",
|
|
34
40
|
children: text
|
|
@@ -43,31 +49,31 @@ const Hero = memo(({ title, description, actions, Link }) => {
|
|
|
43
49
|
}, text);
|
|
44
50
|
})
|
|
45
51
|
}), [actions]);
|
|
46
|
-
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AuroraBackground, {}), /* @__PURE__ */ jsx(
|
|
47
|
-
|
|
52
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AuroraBackground, {}), /* @__PURE__ */ jsx(FlexBasic_default, {
|
|
53
|
+
align: "center",
|
|
54
|
+
style: {
|
|
55
|
+
fontSize: 16,
|
|
56
|
+
zIndex: 1
|
|
57
|
+
},
|
|
48
58
|
children: /* @__PURE__ */ jsx(FlexBasic_default, {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
title
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}),
|
|
68
|
-
/* @__PURE__ */ jsx(ButtonGroups, {})
|
|
69
|
-
] })
|
|
70
|
-
})
|
|
59
|
+
horizontal: true,
|
|
60
|
+
className: styles.container,
|
|
61
|
+
distribution: "center",
|
|
62
|
+
children: /* @__PURE__ */ jsxs(Center, { children: [
|
|
63
|
+
title && /* @__PURE__ */ jsx(Center, {
|
|
64
|
+
horizontal: true,
|
|
65
|
+
as: "h1",
|
|
66
|
+
className: styles.title,
|
|
67
|
+
dangerouslySetInnerHTML: { __html: title },
|
|
68
|
+
gap: "0.25em",
|
|
69
|
+
wrap: "wrap"
|
|
70
|
+
}),
|
|
71
|
+
description && /* @__PURE__ */ jsx("p", {
|
|
72
|
+
className: styles.desc,
|
|
73
|
+
dangerouslySetInnerHTML: { __html: description }
|
|
74
|
+
}),
|
|
75
|
+
/* @__PURE__ */ jsx(ButtonGroups, {})
|
|
76
|
+
] })
|
|
71
77
|
})
|
|
72
78
|
})] });
|
|
73
79
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.mjs","names":["Flexbox"
|
|
1
|
+
{"version":3,"file":"Hero.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport { GithubIcon } from '@lobehub/ui/icons';\nimport { useResponsive } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\nimport Button from '@/base-ui/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport { type HeroProps } from './type';\n\nconst Hero = memo<HeroProps>(({ title, description, actions, Link }) => {\n const { mobile } = useResponsive();\n\n const LinkRender = Link || A;\n\n const ButtonGroups = useCallback(\n () =>\n Boolean(actions?.length) && (\n <Flexbox horizontal className={styles.actions} gap={16} justify={'center'}>\n {actions!.map(({ text, link, openExternal, github, type }, index) => {\n const content =\n type === 'primary' ? (\n <GradientButton\n block={mobile}\n icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n key={index}\n size=\"large\"\n >\n {text}\n </GradientButton>\n ) : (\n <Button\n block={mobile}\n icon={github ? <Icon icon={GithubIcon} size={18} /> : undefined}\n key={index}\n size=\"large\"\n type=\"primary\"\n >\n {text}\n </Button>\n );\n\n return openExternal ? (\n <A href={link} key={text} target={openExternal ? '_blank' : undefined}>\n {content}\n </A>\n ) : (\n <LinkRender key={text} to={link}>\n {content}\n </LinkRender>\n );\n })}\n </Flexbox>\n ),\n [actions],\n );\n\n return (\n <>\n <AuroraBackground />\n <Flexbox align={'center'} style={{ fontSize: 16, zIndex: 1 }}>\n <Flexbox horizontal className={styles.container} distribution={'center'}>\n <Center>\n {title && (\n <Center\n horizontal\n as={'h1'}\n className={styles.title}\n dangerouslySetInnerHTML={{ __html: title }}\n gap={'0.25em'}\n wrap={'wrap'}\n />\n )}\n {description && (\n <p className={styles.desc} dangerouslySetInnerHTML={{ __html: description }} />\n )}\n <ButtonGroups />\n </Center>\n </Flexbox>\n </Flexbox>\n </>\n );\n});\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,OAAO,MAAiB,EAAE,OAAO,aAAa,SAAS,WAAW;CACtE,MAAM,EAAE,WAAW,cAAc;CAEjC,MAAM,aAAa,QAAQ;CAE3B,MAAM,eAAe,kBAEjB,QAAQ,SAAS,MAAM,KACrB,oBAACA,mBAAD;EAAS,YAAA;EAAW,WAAW,OAAO;EAAS,KAAK;EAAI,SAAS;EAC9D,UAAA,QAAS,KAAK,EAAE,MAAM,MAAM,cAAc,QAAQ,QAAQ,UAAU;GACnE,MAAM,UACJ,SAAS,YACP,oBAAC,gBAAD;IACE,OAAO;IACP,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAEtD,MAAK;IAEJ,UAAA;GACa,GAJT,KAIS,IAEhB,oBAAC,QAAD;IACE,OAAO;IACP,MAAM,SAAS,oBAAC,MAAD;KAAM,MAAM;KAAY,MAAM;IAAK,CAAA,IAAI,KAAA;IAEtD,MAAK;IACL,MAAK;IAEJ,UAAA;GACK,GALD,KAKC;GAGZ,OAAO,eACL,oBAAC,GAAD;IAAG,MAAM;IAAiB,QAAQ,eAAe,WAAW,KAAA;IACzD,UAAA;GACA,GAFiB,IAEjB,IAEH,oBAAC,YAAD;IAAuB,IAAI;IACxB,UAAA;GACS,GAFK,IAEL;EAEhB,CAAC;CACM,CAAA,GAEb,CAAC,OAAO,CACV;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,oBAACA,mBAAD;EAAS,OAAO;EAAU,OAAO;GAAE,UAAU;GAAI,QAAQ;EAAE;EACzD,UAAA,oBAACA,mBAAD;GAAS,YAAA;GAAW,WAAW,OAAO;GAAW,cAAc;GAC7D,UAAA,qBAAC,QAAD,EAAA,UAAA;IACG,SACC,oBAAC,QAAD;KACE,YAAA;KACA,IAAI;KACJ,WAAW,OAAO;KAClB,yBAAyB,EAAE,QAAQ,MAAM;KACzC,KAAK;KACL,MAAM;IACP,CAAA;IAEF,eACC,oBAAC,KAAD;KAAG,WAAW,OAAO;KAAM,yBAAyB,EAAE,QAAQ,YAAY;IAAI,CAAA;IAEhF,oBAAC,cAAD,CAAe,CAAA;GACT,EAAA,CAAA;EACD,CAAA;CACF,CAAA,CACT,EAAA,CAAA;AAEN,CAAC;AAED,KAAK,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/awesome/Hero/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n actions: css`\n margin-block-start: 24px;\n\n button {\n padding-inline: 32px !important;\n font-weight: 500;\n }\n\n ${responsive.sm} {\n flex-direction: column;\n gap: 16px;\n width: 100%;\n margin-block-start: 24px;\n\n button {\n width: 100%;\n }\n }\n `,\n\n container: css`\n position: relative;\n box-sizing: border-box;\n text-align: center;\n `,\n\n desc: css`\n margin-block-start: 0;\n font-size: ${cssVar.fontSizeHeading3};\n color: ${cssVar.colorTextSecondary};\n text-align: center;\n\n ${responsive.sm} {\n margin-block: 24px;\n margin-inline: 16px;\n font-size: ${cssVar.fontSizeHeading5};\n }\n `,\n title: css`\n z-index: 10;\n\n margin: 0;\n\n font-size: min(100px, 10vw);\n line-height: 1.2;\n text-align: center;\n\n b {\n ${lobeStaticStylish.gradientAnimation}\n position: relative;\n z-index: 5;\n background-clip: text;\n\n -webkit-text-fill-color: transparent;\n\n &::selection {\n -webkit-text-fill-color: #000 !important;\n }\n }\n\n ${responsive.sm} {\n font-size: 64px;\n }\n `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/awesome/Hero/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n actions: css`\n margin-block-start: 24px;\n\n button {\n height: 45px;\n padding-inline: 32px !important;\n border-radius: ${cssVar.borderRadiusLG};\n\n font-size: 18px;\n font-weight: 500;\n }\n\n ${responsive.sm} {\n flex-direction: column;\n gap: 16px;\n width: 100%;\n margin-block-start: 24px;\n\n button {\n width: 100%;\n }\n }\n `,\n\n container: css`\n position: relative;\n box-sizing: border-box;\n text-align: center;\n `,\n\n desc: css`\n margin-block-start: 0;\n font-size: ${cssVar.fontSizeHeading3};\n color: ${cssVar.colorTextSecondary};\n text-align: center;\n\n ${responsive.sm} {\n margin-block: 24px;\n margin-inline: 16px;\n font-size: ${cssVar.fontSizeHeading5};\n }\n `,\n title: css`\n z-index: 10;\n\n margin: 0;\n\n font-size: min(100px, 10vw);\n line-height: 1.2;\n text-align: center;\n\n b {\n ${lobeStaticStylish.gradientAnimation}\n position: relative;\n z-index: 5;\n background-clip: text;\n\n -webkit-text-fill-color: transparent;\n\n &::selection {\n -webkit-text-fill-color: #000 !important;\n }\n }\n\n ${responsive.sm} {\n font-size: 64px;\n }\n `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;;uBAMS,OAAO,eAAe;;;;;;MAMvC,WAAW,GAAG;;;;;;;;;;;CAYlB,WAAW,GAAG;;;;;CAMd,MAAM,GAAG;;iBAEM,OAAO,iBAAiB;aAC5B,OAAO,mBAAmB;;;MAGjC,WAAW,GAAG;;;mBAGD,OAAO,iBAAiB;;;CAGzC,OAAO,GAAG;;;;;;;;;;QAUJA,cAAkB,kBAAkB;;;;;;;;;;;;MAYtC,WAAW,GAAG;;;;AAIpB,EAAE"}
|
package/es/awesome/index.d.mts
CHANGED
|
@@ -10,8 +10,8 @@ import { BentoCardProps, BentoGridProps } from "./BentoGrid/type.mjs";
|
|
|
10
10
|
import BentoCard from "./BentoGrid/BentoCard.mjs";
|
|
11
11
|
import BentoGrid from "./BentoGrid/BentoGrid.mjs";
|
|
12
12
|
import "./BentoGrid/index.mjs";
|
|
13
|
-
import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
|
|
14
13
|
import { BottomGradientButtonProps } from "./BottomGradientButton/type.mjs";
|
|
14
|
+
import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
|
|
15
15
|
import "./BottomGradientButton/index.mjs";
|
|
16
16
|
import { CodeShowcaseItem, CodeShowcaseProps } from "./CodeShowcase/type.mjs";
|
|
17
17
|
import CodeShowcase from "./CodeShowcase/CodeShowcase.mjs";
|
|
@@ -94,7 +94,7 @@ const LandingActions = ({ actions, className, onNavigate, renderLink, size = "la
|
|
|
94
94
|
return /* @__PURE__ */ jsx(BottomGradientButton, {
|
|
95
95
|
href,
|
|
96
96
|
icon: iconNode,
|
|
97
|
-
iconPlacement,
|
|
97
|
+
iconPosition: iconPlacement,
|
|
98
98
|
rel: isExternal ? "noreferrer" : void 0,
|
|
99
99
|
size: size === "small" ? "middle" : "large",
|
|
100
100
|
target: isExternal ? "_blank" : void 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"landingActions.mjs","names":[],"sources":["../../src/awesome/landingActions.tsx"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { Fragment, type ReactNode } from 'react';\n\nimport BottomGradientButton from '@/awesome/BottomGradientButton';\nimport { isExternalHref, type LandingLinkRender, renderLandingLink } from '@/awesome/landingLink';\nimport { accentGradient } from '@/awesome/landingTokens';\nimport Icon, { type IconProps } from '@/Icon';\n\nexport interface LandingAction {\n /** Opens in a new tab. Inferred from absolute URLs when omitted. */\n external?: boolean;\n href: string;\n icon?: IconProps['icon'];\n /** Places the icon after the label, e.g. for an arrow. */\n iconPlacement?: 'start' | 'end';\n label: ReactNode;\n /** The primary action is a filled pill; others render as BottomGradientButton. */\n primary?: boolean;\n}\n\nconst styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n action: css`\n display: inline-flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n\n min-block-size: 44px;\n padding-block: 0;\n padding-inline: 22px;\n border: 1px solid transparent;\n border-radius: 999px;\n\n font-size: ${cssVar.fontSize};\n font-weight: 600;\n color: ${cssVar.colorText};\n text-decoration: none;\n white-space: nowrap;\n\n background-image:\n linear-gradient(${cssVar.colorBgContainer}, ${cssVar.colorBgContainer}), ${accentGradient};\n background-clip: padding-box, border-box;\n background-origin: border-box;\n\n transition:\n filter 140ms ease,\n transform 90ms ease;\n\n &:hover {\n color: ${cssVar.colorText};\n filter: brightness(1.06);\n }\n\n &:active {\n transform: scale(0.97);\n }\n `,\n actionPrimary: css`\n && {\n color: ${cssVar.colorBgContainer};\n background: ${cssVar.colorText};\n }\n\n &&:hover {\n color: ${cssVar.colorBgContainer};\n }\n `,\n actionSmall: css`\n && {\n gap: 6px;\n min-block-size: 34px;\n padding-inline: 14px;\n font-size: ${cssVar.fontSizeSM};\n }\n `,\n group: css`\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n\n &[data-size='small'] {\n gap: 8px;\n }\n\n ${responsive.mobile} {\n &[data-size='large'] {\n align-self: stretch;\n }\n\n &[data-size='large'] > * {\n flex: 1;\n }\n }\n `,\n}));\n\nexport type LandingNavigate = (href: string) => void;\n\nexport interface LandingActionsProps {\n actions: LandingAction[];\n className?: string;\n /** Client-side navigation for internal non-primary actions, which render as buttons with an href. */\n onNavigate?: LandingNavigate;\n renderLink?: LandingLinkRender;\n size?: 'large' | 'small';\n}\n\nexport const LandingActions = ({\n actions,\n className,\n onNavigate,\n renderLink,\n size = 'large',\n}: LandingActionsProps) => (\n <div className={cx(styles.group, className)} data-size={size}>\n {actions.map(({ external, href, icon, iconPlacement = 'start', label, primary }) => {\n const iconNode = icon && <Icon icon={icon} size={size === 'small' ? 14 : 16} />;\n if (!primary) {\n const isExternal = external ?? isExternalHref(href);\n return (\n <BottomGradientButton\n href={href}\n icon={iconNode}\n
|
|
1
|
+
{"version":3,"file":"landingActions.mjs","names":[],"sources":["../../src/awesome/landingActions.tsx"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { Fragment, type ReactNode } from 'react';\n\nimport BottomGradientButton from '@/awesome/BottomGradientButton';\nimport { isExternalHref, type LandingLinkRender, renderLandingLink } from '@/awesome/landingLink';\nimport { accentGradient } from '@/awesome/landingTokens';\nimport Icon, { type IconProps } from '@/Icon';\n\nexport interface LandingAction {\n /** Opens in a new tab. Inferred from absolute URLs when omitted. */\n external?: boolean;\n href: string;\n icon?: IconProps['icon'];\n /** Places the icon after the label, e.g. for an arrow. */\n iconPlacement?: 'start' | 'end';\n label: ReactNode;\n /** The primary action is a filled pill; others render as BottomGradientButton. */\n primary?: boolean;\n}\n\nconst styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n action: css`\n display: inline-flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n\n min-block-size: 44px;\n padding-block: 0;\n padding-inline: 22px;\n border: 1px solid transparent;\n border-radius: 999px;\n\n font-size: ${cssVar.fontSize};\n font-weight: 600;\n color: ${cssVar.colorText};\n text-decoration: none;\n white-space: nowrap;\n\n background-image:\n linear-gradient(${cssVar.colorBgContainer}, ${cssVar.colorBgContainer}), ${accentGradient};\n background-clip: padding-box, border-box;\n background-origin: border-box;\n\n transition:\n filter 140ms ease,\n transform 90ms ease;\n\n &:hover {\n color: ${cssVar.colorText};\n filter: brightness(1.06);\n }\n\n &:active {\n transform: scale(0.97);\n }\n `,\n actionPrimary: css`\n && {\n color: ${cssVar.colorBgContainer};\n background: ${cssVar.colorText};\n }\n\n &&:hover {\n color: ${cssVar.colorBgContainer};\n }\n `,\n actionSmall: css`\n && {\n gap: 6px;\n min-block-size: 34px;\n padding-inline: 14px;\n font-size: ${cssVar.fontSizeSM};\n }\n `,\n group: css`\n display: flex;\n flex-wrap: wrap;\n gap: 12px;\n\n &[data-size='small'] {\n gap: 8px;\n }\n\n ${responsive.mobile} {\n &[data-size='large'] {\n align-self: stretch;\n }\n\n &[data-size='large'] > * {\n flex: 1;\n }\n }\n `,\n}));\n\nexport type LandingNavigate = (href: string) => void;\n\nexport interface LandingActionsProps {\n actions: LandingAction[];\n className?: string;\n /** Client-side navigation for internal non-primary actions, which render as buttons with an href. */\n onNavigate?: LandingNavigate;\n renderLink?: LandingLinkRender;\n size?: 'large' | 'small';\n}\n\nexport const LandingActions = ({\n actions,\n className,\n onNavigate,\n renderLink,\n size = 'large',\n}: LandingActionsProps) => (\n <div className={cx(styles.group, className)} data-size={size}>\n {actions.map(({ external, href, icon, iconPlacement = 'start', label, primary }) => {\n const iconNode = icon && <Icon icon={icon} size={size === 'small' ? 14 : 16} />;\n if (!primary) {\n const isExternal = external ?? isExternalHref(href);\n return (\n <BottomGradientButton\n href={href}\n icon={iconNode}\n iconPosition={iconPlacement}\n key={href}\n rel={isExternal ? 'noreferrer' : undefined}\n size={size === 'small' ? 'middle' : 'large'}\n target={isExternal ? '_blank' : undefined}\n onClick={\n !isExternal && onNavigate\n ? (event) => {\n event.preventDefault();\n onNavigate(href);\n }\n : undefined\n }\n >\n {label}\n </BottomGradientButton>\n );\n }\n return (\n <Fragment key={href}>\n {renderLandingLink(renderLink, {\n children: (\n <>\n {iconPlacement === 'start' && iconNode}\n {label}\n {iconPlacement === 'end' && iconNode}\n </>\n ),\n className: cx(\n styles.action,\n styles.actionPrimary,\n size === 'small' && styles.actionSmall,\n ),\n external,\n href,\n })}\n </Fragment>\n );\n })}\n </div>\n);\n"],"mappings":";;;;;;;;AAoBA,MAAM,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CAClE,QAAQ,GAAG;;;;;;;;;;;;iBAYI,OAAO,SAAS;;aAEpB,OAAO,UAAU;;;;;wBAKN,OAAO,iBAAiB,IAAI,OAAO,iBAAiB,KAAK,eAAe;;;;;;;;;eASjF,OAAO,UAAU;;;;;;;;CAQ9B,eAAe,GAAG;;eAEL,OAAO,iBAAiB;oBACnB,OAAO,UAAU;;;;eAItB,OAAO,iBAAiB;;;CAGrC,aAAa,GAAG;;;;;mBAKC,OAAO,WAAW;;;CAGnC,OAAO,GAAG;;;;;;;;;MASN,WAAW,OAAO;;;;;;;;;;AAUxB,EAAE;AAaF,MAAa,kBAAkB,EAC7B,SACA,WACA,YACA,YACA,OAAO,cAEP,oBAAC,OAAD;CAAK,WAAW,GAAG,OAAO,OAAO,SAAS;CAAG,aAAW;CACrD,UAAA,QAAQ,KAAK,EAAE,UAAU,MAAM,MAAM,gBAAgB,SAAS,OAAO,cAAc;EAClF,MAAM,WAAW,QAAQ,oBAAC,MAAD;GAAY;GAAM,MAAM,SAAS,UAAU,KAAK;EAAK,CAAA;EAC9E,IAAI,CAAC,SAAS;GACZ,MAAM,aAAa,YAAY,eAAe,IAAI;GAClD,OACE,oBAAC,sBAAD;IACQ;IACN,MAAM;IACN,cAAc;IAEd,KAAK,aAAa,eAAe,KAAA;IACjC,MAAM,SAAS,UAAU,WAAW;IACpC,QAAQ,aAAa,WAAW,KAAA;IAChC,SACE,CAAC,cAAc,cACV,UAAU;KACT,MAAM,eAAe;KACrB,WAAW,IAAI;IACjB,IACA,KAAA;IAGL,UAAA;GACmB,GAdf,IAce;EAE1B;EACA,OACE,oBAAC,UAAD,EAAA,UACG,kBAAkB,YAAY;GAC7B,UACE,qBAAA,YAAA,EAAA,UAAA;IACG,kBAAkB,WAAW;IAC7B;IACA,kBAAkB,SAAS;GAC5B,EAAA,CAAA;GAEJ,WAAW,GACT,OAAO,QACP,OAAO,eACP,SAAS,WAAW,OAAO,WAC7B;GACA;GACA;EACF,CAAC,EACO,GAjBK,IAiBL;CAEd,CAAC;AACE,CAAA"}
|
|
@@ -27,8 +27,8 @@ declare const styles: {
|
|
|
27
27
|
};
|
|
28
28
|
declare const rootVariants: (props?: ({
|
|
29
29
|
shadow?: boolean | null | undefined;
|
|
30
|
-
size?: "
|
|
31
|
-
variant?: "filled" | "
|
|
30
|
+
size?: "small" | "middle" | "large" | null | undefined;
|
|
31
|
+
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
32
32
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
33
33
|
//#endregion
|
|
34
34
|
export { rootVariants, styles };
|
|
@@ -90,6 +90,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
90
90
|
&::placeholder {
|
|
91
91
|
color: ${cssVar.colorTextPlaceholder};
|
|
92
92
|
}
|
|
93
|
+
|
|
94
|
+
/* the root shows focus via its border; outrank global :focus-visible rings */
|
|
95
|
+
&:focus-visible {
|
|
96
|
+
outline: none;
|
|
97
|
+
}
|
|
93
98
|
`,
|
|
94
99
|
invalid: css`
|
|
95
100
|
&:has([data-invalid], [aria-invalid='true']) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Input/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n clear: css`\n cursor: pointer;\n\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n\n width: 16px;\n height: 16px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n\n color: ${cssVar.colorBgContainer};\n\n visibility: hidden;\n background: ${cssVar.colorTextQuaternary};\n\n &:hover {\n background: ${cssVar.colorTextTertiary};\n }\n `,\n count: css`\n pointer-events: none;\n\n position: absolute;\n inset-block-end: 6px;\n inset-inline-end: 8px;\n\n display: inline-flex;\n align-items: center;\n\n height: 20px;\n padding-inline: 8px;\n border-radius: 999px;\n\n font-size: 11px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorTextSecondary};\n\n background: ${cssVar.colorFillTertiary};\n\n &[data-over] {\n color: ${cssVar.colorWhite};\n background: ${cssVar.colorError};\n }\n `,\n textareaClear: css`\n position: absolute;\n inset-block-start: 10px;\n inset-inline-end: 10px;\n `,\n textareaWithCount: css`\n padding-block-end: 30px;\n `,\n borderless: css`\n border: 1px solid transparent;\n background: none;\n `,\n filled: css`\n border: 1px solid transparent;\n background: ${cssVar.colorFillTertiary};\n\n &:hover:not(:focus-within, [data-disabled]) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n input: css`\n flex: 1;\n\n min-width: 0;\n padding: 0;\n border: none;\n\n font: inherit;\n color: inherit;\n\n appearance: none;\n background: transparent;\n outline: none;\n\n &::placeholder {\n color: ${cssVar.colorTextPlaceholder};\n }\n `,\n invalid: css`\n &:has([data-invalid], [aria-invalid='true']) {\n border-color: ${cssVar.colorError};\n\n &:focus-within {\n border-color: ${cssVar.colorError};\n box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};\n }\n }\n `,\n outlined: css`\n border: 1px solid ${cssVar.colorBorderSecondary};\n background: ${cssVar.colorBgContainer};\n\n &:hover:not(:focus-within, [data-disabled]) {\n border-color: ${cssVar.colorBorder};\n }\n\n &:focus-within {\n border-color: ${cssVar.colorPrimary};\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};\n }\n `,\n root: css`\n cursor: text;\n\n display: inline-flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: 100%;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadius};\n\n font-size: 14px;\n color: ${cssVar.colorText};\n\n transition:\n background 150ms ${cssVar.motionEaseOut},\n border-color 150ms ${cssVar.motionEaseOut},\n box-shadow 150ms ${cssVar.motionEaseOut};\n\n &[data-disabled],\n &:has(:disabled) {\n cursor: not-allowed;\n color: ${cssVar.colorTextQuaternary};\n opacity: 0.66;\n }\n\n &:hover [data-lobe-input-clear],\n &:focus-within [data-lobe-input-clear] {\n visibility: visible;\n }\n `,\n shadow: lobeStaticStylish.shadow,\n sizeLarge: css`\n min-height: ${controlHeight.large}px;\n border-radius: ${cssVar.borderRadiusLG};\n font-size: 16px;\n `,\n sizeMiddle: css`\n min-height: ${controlHeight.middle}px;\n `,\n sizeSmall: css`\n min-height: ${controlHeight.small}px;\n padding-inline: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 12px;\n `,\n numberControl: css`\n cursor: pointer;\n\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n\n margin: 0;\n padding: 0;\n border: none;\n\n color: ${cssVar.colorTextTertiary};\n\n background: none;\n outline: none;\n\n transition: color 150ms ${cssVar.motionEaseOut};\n\n &:hover:not(:disabled) {\n color: ${cssVar.colorText};\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n `,\n numberControls: css`\n display: flex;\n flex: none;\n flex-direction: column;\n align-self: stretch;\n\n width: 22px;\n margin-inline-end: -8px;\n border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n numberInput: css`\n font-variant-numeric: tabular-nums;\n `,\n otpCell: css`\n flex: none;\n width: ${controlHeight.middle}px;\n padding-inline: 0;\n text-align: center;\n `,\n otpRoot: css`\n display: inline-flex;\n gap: 8px;\n align-items: center;\n `,\n passwordToggle: css`\n cursor: pointer;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n margin: 0;\n padding: 0;\n border: none;\n\n color: ${cssVar.colorTextTertiary};\n\n background: none;\n outline: none;\n\n transition: color 150ms ${cssVar.motionEaseOut};\n\n &:hover {\n color: ${cssVar.colorText};\n }\n `,\n slot: css`\n display: inline-flex;\n flex: none;\n align-items: center;\n color: ${cssVar.colorTextTertiary};\n `,\n textarea: css`\n position: relative;\n height: auto;\n padding-block: 8px;\n\n textarea {\n resize: none;\n min-height: calc(1.5em * var(--textarea-min-rows, 2));\n max-height: var(--textarea-max-height, none);\n line-height: 1.5;\n }\n `,\n textareaAutoSize: css`\n textarea {\n field-sizing: content;\n }\n `,\n textareaResize: css`\n textarea {\n resize: vertical;\n }\n `,\n}));\n\nexport const rootVariants = cva([styles.root, styles.invalid], {\n defaultVariants: {\n shadow: false,\n size: 'middle',\n variant: 'outlined',\n },\n variants: {\n shadow: {\n false: null,\n true: styles.shadow,\n },\n size: {\n large: styles.sizeLarge,\n middle: styles.sizeMiddle,\n small: styles.sizeSmall,\n },\n variant: {\n borderless: styles.borderless,\n filled: styles.filled,\n outlined: styles.outlined,\n },\n },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;aAcC,OAAO,iBAAiB;;;kBAGnB,OAAO,oBAAoB;;;oBAGzB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;;eAG5B,OAAO,WAAW;oBACb,OAAO,WAAW;;;CAGpC,eAAe,GAAG;;;;;CAKlB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Input/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { controlHeight } from '@/base-ui/controlSize';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n clear: css`\n cursor: pointer;\n\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n\n width: 16px;\n height: 16px;\n padding: 0;\n border: 0;\n border-radius: 50%;\n\n color: ${cssVar.colorBgContainer};\n\n visibility: hidden;\n background: ${cssVar.colorTextQuaternary};\n\n &:hover {\n background: ${cssVar.colorTextTertiary};\n }\n `,\n count: css`\n pointer-events: none;\n\n position: absolute;\n inset-block-end: 6px;\n inset-inline-end: 8px;\n\n display: inline-flex;\n align-items: center;\n\n height: 20px;\n padding-inline: 8px;\n border-radius: 999px;\n\n font-size: 11px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorTextSecondary};\n\n background: ${cssVar.colorFillTertiary};\n\n &[data-over] {\n color: ${cssVar.colorWhite};\n background: ${cssVar.colorError};\n }\n `,\n textareaClear: css`\n position: absolute;\n inset-block-start: 10px;\n inset-inline-end: 10px;\n `,\n textareaWithCount: css`\n padding-block-end: 30px;\n `,\n borderless: css`\n border: 1px solid transparent;\n background: none;\n `,\n filled: css`\n border: 1px solid transparent;\n background: ${cssVar.colorFillTertiary};\n\n &:hover:not(:focus-within, [data-disabled]) {\n background: ${cssVar.colorFillSecondary};\n }\n `,\n input: css`\n flex: 1;\n\n min-width: 0;\n padding: 0;\n border: none;\n\n font: inherit;\n color: inherit;\n\n appearance: none;\n background: transparent;\n outline: none;\n\n &::placeholder {\n color: ${cssVar.colorTextPlaceholder};\n }\n\n /* the root shows focus via its border; outrank global :focus-visible rings */\n &:focus-visible {\n outline: none;\n }\n `,\n invalid: css`\n &:has([data-invalid], [aria-invalid='true']) {\n border-color: ${cssVar.colorError};\n\n &:focus-within {\n border-color: ${cssVar.colorError};\n box-shadow: 0 0 0 2px ${cssVar.colorErrorBg};\n }\n }\n `,\n outlined: css`\n border: 1px solid ${cssVar.colorBorderSecondary};\n background: ${cssVar.colorBgContainer};\n\n &:hover:not(:focus-within, [data-disabled]) {\n border-color: ${cssVar.colorBorder};\n }\n\n &:focus-within {\n border-color: ${cssVar.colorPrimary};\n box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};\n }\n `,\n root: css`\n cursor: text;\n\n display: inline-flex;\n gap: 8px;\n align-items: center;\n\n box-sizing: border-box;\n width: 100%;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadius};\n\n font-size: 14px;\n color: ${cssVar.colorText};\n\n transition:\n background 150ms ${cssVar.motionEaseOut},\n border-color 150ms ${cssVar.motionEaseOut},\n box-shadow 150ms ${cssVar.motionEaseOut};\n\n &[data-disabled],\n &:has(:disabled) {\n cursor: not-allowed;\n color: ${cssVar.colorTextQuaternary};\n opacity: 0.66;\n }\n\n &:hover [data-lobe-input-clear],\n &:focus-within [data-lobe-input-clear] {\n visibility: visible;\n }\n `,\n shadow: lobeStaticStylish.shadow,\n sizeLarge: css`\n min-height: ${controlHeight.large}px;\n border-radius: ${cssVar.borderRadiusLG};\n font-size: 16px;\n `,\n sizeMiddle: css`\n min-height: ${controlHeight.middle}px;\n `,\n sizeSmall: css`\n min-height: ${controlHeight.small}px;\n padding-inline: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n font-size: 12px;\n `,\n numberControl: css`\n cursor: pointer;\n\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n\n margin: 0;\n padding: 0;\n border: none;\n\n color: ${cssVar.colorTextTertiary};\n\n background: none;\n outline: none;\n\n transition: color 150ms ${cssVar.motionEaseOut};\n\n &:hover:not(:disabled) {\n color: ${cssVar.colorText};\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n `,\n numberControls: css`\n display: flex;\n flex: none;\n flex-direction: column;\n align-self: stretch;\n\n width: 22px;\n margin-inline-end: -8px;\n border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n numberInput: css`\n font-variant-numeric: tabular-nums;\n `,\n otpCell: css`\n flex: none;\n width: ${controlHeight.middle}px;\n padding-inline: 0;\n text-align: center;\n `,\n otpRoot: css`\n display: inline-flex;\n gap: 8px;\n align-items: center;\n `,\n passwordToggle: css`\n cursor: pointer;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n margin: 0;\n padding: 0;\n border: none;\n\n color: ${cssVar.colorTextTertiary};\n\n background: none;\n outline: none;\n\n transition: color 150ms ${cssVar.motionEaseOut};\n\n &:hover {\n color: ${cssVar.colorText};\n }\n `,\n slot: css`\n display: inline-flex;\n flex: none;\n align-items: center;\n color: ${cssVar.colorTextTertiary};\n `,\n textarea: css`\n position: relative;\n height: auto;\n padding-block: 8px;\n\n textarea {\n resize: none;\n min-height: calc(1.5em * var(--textarea-min-rows, 2));\n max-height: var(--textarea-max-height, none);\n line-height: 1.5;\n }\n `,\n textareaAutoSize: css`\n textarea {\n field-sizing: content;\n }\n `,\n textareaResize: css`\n textarea {\n resize: vertical;\n }\n `,\n}));\n\nexport const rootVariants = cva([styles.root, styles.invalid], {\n defaultVariants: {\n shadow: false,\n size: 'middle',\n variant: 'outlined',\n },\n variants: {\n shadow: {\n false: null,\n true: styles.shadow,\n },\n size: {\n large: styles.sizeLarge,\n middle: styles.sizeMiddle,\n small: styles.sizeSmall,\n },\n variant: {\n borderless: styles.borderless,\n filled: styles.filled,\n outlined: styles.outlined,\n },\n },\n});\n"],"mappings":";;;;;AAMA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;aAcC,OAAO,iBAAiB;;;kBAGnB,OAAO,oBAAoB;;;oBAGzB,OAAO,kBAAkB;;;CAG3C,OAAO,GAAG;;;;;;;;;;;;;;;;;aAiBC,OAAO,mBAAmB;;kBAErB,OAAO,kBAAkB;;;eAG5B,OAAO,WAAW;oBACb,OAAO,WAAW;;;CAGpC,eAAe,GAAG;;;;;CAKlB,mBAAmB,GAAG;;;CAGtB,YAAY,GAAG;;;;CAIf,QAAQ,GAAG;;kBAEK,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;;;;;;;;;;;;;eAeG,OAAO,qBAAqB;;;;;;;;CAQzC,SAAS,GAAG;;sBAEQ,OAAO,WAAW;;;wBAGhB,OAAO,WAAW;gCACV,OAAO,aAAa;;;;CAIlD,UAAU,GAAG;wBACS,OAAO,qBAAqB;kBAClC,OAAO,iBAAiB;;;sBAGpB,OAAO,YAAY;;;;sBAInB,OAAO,aAAa;8BACZ,OAAO,eAAe;;;CAGlD,MAAM,GAAG;;;;;;;;;;qBAUU,OAAO,aAAa;;;aAG5B,OAAO,UAAU;;;yBAGL,OAAO,cAAc;2BACnB,OAAO,cAAc;yBACvB,OAAO,cAAc;;;;;eAK/B,OAAO,oBAAoB;;;;;;;;;CASxC,QAAQA,cAAkB;CAC1B,WAAW,GAAG;kBACE,cAAc,MAAM;qBACjB,OAAO,eAAe;;;CAGzC,YAAY,GAAG;kBACC,cAAc,OAAO;;CAErC,WAAW,GAAG;kBACE,cAAc,MAAM;;qBAEjB,OAAO,eAAe;;;CAGzC,eAAe,GAAG;;;;;;;;;;;;aAYP,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;;;;;;CAQ9B,gBAAgB,GAAG;;;;;;;;qCAQgB,OAAO,qBAAqB;;CAE/D,aAAa,GAAG;;;CAGhB,SAAS,GAAG;;aAED,cAAc,OAAO;;;;CAIhC,SAAS,GAAG;;;;;CAKZ,gBAAgB,GAAG;;;;;;;;;;;aAWR,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;CAG9B,MAAM,GAAG;;;;aAIE,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;;;;;;;;;CAYb,kBAAkB,GAAG;;;;;CAKrB,gBAAgB,GAAG;;;;;AAKrB,EAAE;AAEF,MAAa,eAAe,IAAI,CAAC,OAAO,MAAM,OAAO,OAAO,GAAG;CAC7D,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
|
package/es/base-ui/index.d.mts
CHANGED
|
@@ -75,6 +75,11 @@ import "./ScrollArea/index.mjs";
|
|
|
75
75
|
import { ToastAPI, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType } from "./Toast/type.mjs";
|
|
76
76
|
import { ToastHost, ToastHostProps, toast, useToast } from "./Toast/imperative.mjs";
|
|
77
77
|
import "./Toast/index.mjs";
|
|
78
|
+
import { ButtonIconPosition, ButtonOutdent, ButtonProps, ButtonShape, ButtonSize, ButtonType } from "./Button/type.mjs";
|
|
79
|
+
import Button from "./Button/Button.mjs";
|
|
80
|
+
import _default, { SplitButtonMenuProps, SplitButtonProps } from "./Button/SplitButton.mjs";
|
|
81
|
+
import { buttonPaddingInline, styles as styles$4 } from "./Button/style.mjs";
|
|
82
|
+
import "./Button/index.mjs";
|
|
78
83
|
import { AccordionClassNames, AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionItemType, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionStyles, AccordionTriggerProps, AccordionVariant } from "./Accordion/type.mjs";
|
|
79
84
|
import Accordion from "./Accordion/Accordion.mjs";
|
|
80
85
|
import { styles } from "./Accordion/style.mjs";
|
|
@@ -100,11 +105,6 @@ import "./List/index.mjs";
|
|
|
100
105
|
import { BurgerProps } from "./Burger/type.mjs";
|
|
101
106
|
import Burger from "./Burger/Burger.mjs";
|
|
102
107
|
import "./Burger/index.mjs";
|
|
103
|
-
import { ButtonIconPosition, ButtonOutdent, ButtonProps, ButtonShape, ButtonSize, ButtonType } from "./Button/type.mjs";
|
|
104
|
-
import Button from "./Button/Button.mjs";
|
|
105
|
-
import _default, { SplitButtonMenuProps, SplitButtonProps } from "./Button/SplitButton.mjs";
|
|
106
|
-
import { buttonPaddingInline, styles as styles$4 } from "./Button/style.mjs";
|
|
107
|
-
import "./Button/index.mjs";
|
|
108
108
|
import { CarouselProps, CarouselRef } from "./Carousel/type.mjs";
|
|
109
109
|
import Carousel from "./Carousel/Carousel.mjs";
|
|
110
110
|
import "./Carousel/index.mjs";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
2
|
+
import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
|
|
3
|
+
import Button from "../../base-ui/Button/Button.mjs";
|
|
3
4
|
import { styles } from "./style.mjs";
|
|
4
5
|
import { memo, useEffect, useRef, useState } from "react";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -30,14 +31,13 @@ const BackBottom = memo(({ visibilityHeight = 240, target, onClick, style, class
|
|
|
30
31
|
onClick?.(e);
|
|
31
32
|
};
|
|
32
33
|
return /* @__PURE__ */ jsx(Button, {
|
|
33
|
-
|
|
34
|
-
className: cx(visible ? styles.visible : styles.hidden, className),
|
|
34
|
+
className: cx(staticStylish.blur, visible ? styles.visible : styles.hidden, className),
|
|
35
35
|
icon: ListEnd,
|
|
36
36
|
ref,
|
|
37
37
|
shape: "round",
|
|
38
38
|
size: "small",
|
|
39
39
|
style,
|
|
40
|
-
|
|
40
|
+
type: "fill",
|
|
41
41
|
onClick: scrollToBottom,
|
|
42
42
|
children: text || "Back to bottom"
|
|
43
43
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BackBottom.mjs","names":[],"sources":["../../../src/chat/BackBottom/BackBottom.tsx"],"sourcesContent":["'use client';\n\nimport { useScroll } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ListEnd } from 'lucide-react';\nimport { memo, type MouseEventHandler, useEffect, useRef, useState } from 'react';\n\nimport Button from '@/Button';\n\nimport { styles } from './style';\nimport { type BackBottomProps } from './type';\n\nconst BackBottom = memo<BackBottomProps>(\n ({ visibilityHeight = 240, target, onClick, style, className, text }) => {\n const [visible, setVisible] = useState<boolean>(false);\n const ref = useRef<HTMLButtonElement>(null);\n const current = (target as any)?.current;\n const scrollHeight = current?.scrollHeight || 0;\n const clientHeight = current?.clientHeight || 0;\n const scroll = useScroll(target);\n\n useEffect(() => {\n if (scroll?.top) {\n setVisible(scroll?.top + clientHeight + visibilityHeight < scrollHeight);\n }\n }, [scrollHeight, scroll, visibilityHeight]);\n\n const scrollToBottom: MouseEventHandler<
|
|
1
|
+
{"version":3,"file":"BackBottom.mjs","names":["lobeStaticStylish"],"sources":["../../../src/chat/BackBottom/BackBottom.tsx"],"sourcesContent":["'use client';\n\nimport { useScroll } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ListEnd } from 'lucide-react';\nimport { memo, type MouseEventHandler, useEffect, useRef, useState } from 'react';\n\nimport Button from '@/base-ui/Button';\nimport { lobeStaticStylish } from '@/styles';\n\nimport { styles } from './style';\nimport { type BackBottomProps } from './type';\n\nconst BackBottom = memo<BackBottomProps>(\n ({ visibilityHeight = 240, target, onClick, style, className, text }) => {\n const [visible, setVisible] = useState<boolean>(false);\n const ref = useRef<HTMLButtonElement>(null);\n const current = (target as any)?.current;\n const scrollHeight = current?.scrollHeight || 0;\n const clientHeight = current?.clientHeight || 0;\n const scroll = useScroll(target);\n\n useEffect(() => {\n if (scroll?.top) {\n setVisible(scroll?.top + clientHeight + visibilityHeight < scrollHeight);\n }\n }, [scrollHeight, scroll, visibilityHeight]);\n\n const scrollToBottom: MouseEventHandler<HTMLElement> = (e) => {\n (target as any)?.current?.scrollTo({ behavior: 'smooth', left: 0, top: scrollHeight });\n onClick?.(e);\n };\n\n return (\n <Button\n className={cx(lobeStaticStylish.blur, visible ? styles.visible : styles.hidden, className)}\n icon={ListEnd}\n ref={ref}\n shape={'round'}\n size={'small'}\n style={style}\n type={'fill'}\n onClick={scrollToBottom}\n >\n {text || 'Back to bottom'}\n </Button>\n );\n },\n);\n\nBackBottom.displayName = 'BackBottom';\n\nexport default BackBottom;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,aAAa,MAChB,EAAE,mBAAmB,KAAK,QAAQ,SAAS,OAAO,WAAW,WAAW;CACvE,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAM,MAAM,OAA0B,IAAI;CAC1C,MAAM,UAAW,QAAgB;CACjC,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,SAAS,UAAU,MAAM;CAE/B,gBAAgB;EACd,IAAI,QAAQ,KACV,WAAW,QAAQ,MAAM,eAAe,mBAAmB,YAAY;CAE3E,GAAG;EAAC;EAAc;EAAQ;CAAgB,CAAC;CAE3C,MAAM,kBAAkD,MAAM;EAC5D,QAAiB,SAAS,SAAS;GAAE,UAAU;GAAU,MAAM;GAAG,KAAK;EAAa,CAAC;EACrF,UAAU,CAAC;CACb;CAEA,OACE,oBAAC,QAAD;EACE,WAAW,GAAGA,cAAkB,MAAM,UAAU,OAAO,UAAU,OAAO,QAAQ,SAAS;EACzF,MAAM;EACD;EACL,OAAO;EACP,MAAM;EACC;EACP,MAAM;EACN,SAAS;EAER,UAAA,QAAQ;CACH,CAAA;AAEZ,CACF;AAEA,WAAW,cAAc"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
import { CSSProperties } from "react";
|
|
2
|
-
import { BackTopProps } from "antd";
|
|
1
|
+
import { CSSProperties, MouseEventHandler } from "react";
|
|
3
2
|
import { Target } from "ahooks/lib/useScroll/index.js";
|
|
4
3
|
//#region src/chat/BackBottom/type.d.ts
|
|
5
4
|
interface BackBottomProps {
|
|
6
5
|
className?: string;
|
|
7
|
-
onClick?:
|
|
6
|
+
onClick?: MouseEventHandler<HTMLElement>;
|
|
8
7
|
style?: CSSProperties;
|
|
9
8
|
target: Target;
|
|
10
9
|
text?: string;
|
|
11
|
-
visibilityHeight?:
|
|
10
|
+
visibilityHeight?: number;
|
|
12
11
|
}
|
|
13
12
|
//#endregion
|
|
14
13
|
export { BackBottomProps };
|
|
@@ -1,16 +1,44 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import DraggablePanel from "../../DraggablePanel/
|
|
2
|
+
import DraggablePanel from "../../base-ui/DraggablePanel/DraggablePanel.mjs";
|
|
3
3
|
import ChatInputAreaInner from "./components/ChatInputAreaInner.mjs";
|
|
4
4
|
import { styles } from "./style.mjs";
|
|
5
5
|
import { memo } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { cx } from "antd-style";
|
|
7
8
|
//#region src/chat/ChatInputArea/ChatInputArea.tsx
|
|
8
9
|
const ChatInputArea = memo(({ ref, className, style, classNames, expand = true, setExpand, bottomAddons, topAddons, onSizeChange, heights, onSend, ...rest }) => {
|
|
10
|
+
const content = /* @__PURE__ */ jsxs("section", {
|
|
11
|
+
className: styles.container,
|
|
12
|
+
style: { minHeight: heights?.minHeight },
|
|
13
|
+
children: [
|
|
14
|
+
topAddons,
|
|
15
|
+
/* @__PURE__ */ jsx("div", {
|
|
16
|
+
className: styles.textareaContainer,
|
|
17
|
+
children: /* @__PURE__ */ jsx(ChatInputAreaInner, {
|
|
18
|
+
className: styles.textarea,
|
|
19
|
+
ref,
|
|
20
|
+
style: { paddingInline: 16 },
|
|
21
|
+
onSend: () => {
|
|
22
|
+
onSend?.();
|
|
23
|
+
setExpand?.(false);
|
|
24
|
+
},
|
|
25
|
+
...rest
|
|
26
|
+
})
|
|
27
|
+
}),
|
|
28
|
+
bottomAddons
|
|
29
|
+
]
|
|
30
|
+
});
|
|
31
|
+
if (expand) return /* @__PURE__ */ jsx("div", {
|
|
32
|
+
className: cx(styles.fullscreen, className),
|
|
33
|
+
style: {
|
|
34
|
+
insetBlockStart: heights?.headerHeight ?? 0,
|
|
35
|
+
...style
|
|
36
|
+
},
|
|
37
|
+
children: content
|
|
38
|
+
});
|
|
9
39
|
return /* @__PURE__ */ jsx(DraggablePanel, {
|
|
10
40
|
className,
|
|
11
41
|
classNames,
|
|
12
|
-
fullscreen: expand,
|
|
13
|
-
headerHeight: heights?.headerHeight,
|
|
14
42
|
maxHeight: heights?.maxHeight,
|
|
15
43
|
minHeight: heights?.minHeight,
|
|
16
44
|
placement: "bottom",
|
|
@@ -23,27 +51,7 @@ const ChatInputArea = memo(({ ref, className, style, classNames, expand = true,
|
|
|
23
51
|
...style
|
|
24
52
|
},
|
|
25
53
|
onSizeChange,
|
|
26
|
-
children:
|
|
27
|
-
className: styles.container,
|
|
28
|
-
style: { minHeight: heights?.minHeight },
|
|
29
|
-
children: [
|
|
30
|
-
topAddons,
|
|
31
|
-
/* @__PURE__ */ jsx("div", {
|
|
32
|
-
className: styles.textareaContainer,
|
|
33
|
-
children: /* @__PURE__ */ jsx(ChatInputAreaInner, {
|
|
34
|
-
className: styles.textarea,
|
|
35
|
-
ref,
|
|
36
|
-
style: { paddingInline: 16 },
|
|
37
|
-
onSend: () => {
|
|
38
|
-
onSend?.();
|
|
39
|
-
setExpand?.(false);
|
|
40
|
-
},
|
|
41
|
-
...rest
|
|
42
|
-
})
|
|
43
|
-
}),
|
|
44
|
-
bottomAddons
|
|
45
|
-
]
|
|
46
|
-
})
|
|
54
|
+
children: content
|
|
47
55
|
});
|
|
48
56
|
});
|
|
49
57
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatInputArea.mjs","names":[],"sources":["../../../src/chat/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\n\nimport ChatInputAreaInner from './components/ChatInputAreaInner';\nimport { styles } from './style';\nimport type { ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n ({\n ref,\n className,\n style,\n classNames,\n expand = true,\n setExpand,\n bottomAddons,\n topAddons,\n onSizeChange,\n heights,\n onSend,\n ...rest\n }) => {\n
|
|
1
|
+
{"version":3,"file":"ChatInputArea.mjs","names":[],"sources":["../../../src/chat/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\n\nimport ChatInputAreaInner from './components/ChatInputAreaInner';\nimport { styles } from './style';\nimport type { ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n ({\n ref,\n className,\n style,\n classNames,\n expand = true,\n setExpand,\n bottomAddons,\n topAddons,\n onSizeChange,\n heights,\n onSend,\n ...rest\n }) => {\n const content = (\n <section className={styles.container} style={{ minHeight: heights?.minHeight }}>\n {topAddons}\n <div className={styles.textareaContainer}>\n <ChatInputAreaInner\n className={styles.textarea}\n ref={ref}\n style={{\n paddingInline: 16,\n }}\n onSend={() => {\n onSend?.();\n setExpand?.(false);\n }}\n {...rest}\n />\n </div>\n {bottomAddons}\n </section>\n );\n\n if (expand)\n return (\n <div\n className={cx(styles.fullscreen, className)}\n style={{ insetBlockStart: heights?.headerHeight ?? 0, ...style }}\n >\n {content}\n </div>\n );\n\n return (\n <DraggablePanel\n className={className}\n classNames={classNames}\n maxHeight={heights?.maxHeight}\n minHeight={heights?.minHeight}\n placement=\"bottom\"\n size={{ height: heights?.inputHeight, width: '100%' }}\n style={{ zIndex: 10, ...style }}\n onSizeChange={onSizeChange}\n >\n {content}\n </DraggablePanel>\n );\n },\n);\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;AAWA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,YACA,SAAS,MACT,WACA,cACA,WACA,cACA,SACA,QACA,GAAG,WACC;CACJ,MAAM,UACJ,qBAAC,WAAD;EAAS,WAAW,OAAO;EAAW,OAAO,EAAE,WAAW,SAAS,UAAU;EAA7E,UAAA;GACG;GACD,oBAAC,OAAD;IAAK,WAAW,OAAO;IACrB,UAAA,oBAAC,oBAAD;KACE,WAAW,OAAO;KACb;KACL,OAAO,EACL,eAAe,GACjB;KACA,cAAc;MACZ,SAAS;MACT,YAAY,KAAK;KACnB;KACA,GAAI;IACL,CAAA;GACE,CAAA;GACJ;EACM;;CAGX,IAAI,QACF,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,OAAO,YAAY,SAAS;EAC1C,OAAO;GAAE,iBAAiB,SAAS,gBAAgB;GAAG,GAAG;EAAM;EAE9D,UAAA;CACE,CAAA;CAGT,OACE,oBAAC,gBAAD;EACa;EACC;EACZ,WAAW,SAAS;EACpB,WAAW,SAAS;EACpB,WAAU;EACV,MAAM;GAAE,QAAQ,SAAS;GAAa,OAAO;EAAO;EACpD,OAAO;GAAE,QAAQ;GAAI,GAAG;EAAM;EAChB;EAEb,UAAA;CACa,CAAA;AAEpB,CACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import TextArea from "../../../Input/TextArea.mjs";
|
|
2
|
+
import TextArea from "../../../base-ui/Input/TextArea.mjs";
|
|
3
3
|
import { memo, useRef } from "react";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
//#region src/chat/ChatInputArea/components/ChatInputAreaInner.tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatInputAreaInner.mjs","names":[],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputAreaInner.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useRef } from 'react';\n\nimport { TextArea } from '@/Input';\n\nimport type { ChatInputAreaInnerProps } from '../type';\n\nconst ChatInputAreaInner = memo<ChatInputAreaInnerProps>(\n ({\n ref,\n resize = false,\n onCompositionEnd,\n onPressEnter,\n onCompositionStart,\n className,\n onInput,\n loading,\n onSend,\n onBlur,\n onChange,\n ...rest\n }) => {\n const isChineseInput = useRef(false);\n\n return (\n <TextArea\n className={className}\n ref={ref}\n resize={resize}\n variant={'borderless'}\n onBlur={(e) => {\n onInput?.(e.target.value);\n onBlur?.(e);\n }}\n onChange={(e) => {\n onInput?.(e.target.value);\n onChange?.(e);\n }}\n onCompositionEnd={(e) => {\n isChineseInput.current = false;\n onCompositionEnd?.(e);\n }}\n onCompositionStart={(e) => {\n isChineseInput.current = true;\n onCompositionStart?.(e);\n }}\n onPressEnter={(e) => {\n onPressEnter?.(e);\n const isMobile = /mobi|android|iphone/i.test(navigator.userAgent);\n if (\n !loading &&\n !isChineseInput.current &&\n ((!isMobile && !e.shiftKey) || (isMobile && e.shiftKey))\n ) {\n e.preventDefault();\n onSend?.();\n }\n }}\n {...rest}\n />\n );\n },\n);\n\nexport default ChatInputAreaInner;\n"],"mappings":";;;;;AAQA,MAAM,qBAAqB,MACxB,EACC,KACA,SAAS,OACT,kBACA,cACA,oBACA,WACA,SACA,SACA,QACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,KAAK;CAEnC,OACE,oBAAC,UAAD;EACa;EACN;EACG;EACR,SAAS;EACT,SAAS,MAAM;GACb,UAAU,EAAE,OAAO,KAAK;GACxB,SAAS,CAAC;EACZ;EACA,WAAW,MAAM;GACf,UAAU,EAAE,OAAO,KAAK;GACxB,WAAW,CAAC;EACd;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,eAAe,CAAC;GAChB,MAAM,WAAW,uBAAuB,KAAK,UAAU,SAAS;GAChE,IACE,CAAC,WACD,CAAC,eAAe,YACd,CAAC,YAAY,CAAC,EAAE,YAAc,YAAY,EAAE,WAC9C;IACA,EAAE,eAAe;IACjB,SAAS;GACX;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}
|
|
1
|
+
{"version":3,"file":"ChatInputAreaInner.mjs","names":[],"sources":["../../../../src/chat/ChatInputArea/components/ChatInputAreaInner.tsx"],"sourcesContent":["'use client';\n\nimport { memo, useRef } from 'react';\n\nimport { TextArea } from '@/base-ui/Input';\n\nimport type { ChatInputAreaInnerProps } from '../type';\n\nconst ChatInputAreaInner = memo<ChatInputAreaInnerProps>(\n ({\n ref,\n resize = false,\n onCompositionEnd,\n onPressEnter,\n onCompositionStart,\n className,\n onInput,\n loading,\n onSend,\n onBlur,\n onChange,\n ...rest\n }) => {\n const isChineseInput = useRef(false);\n\n return (\n <TextArea\n className={className}\n ref={ref}\n resize={resize}\n variant={'borderless'}\n onBlur={(e) => {\n onInput?.(e.target.value);\n onBlur?.(e);\n }}\n onChange={(e) => {\n onInput?.(e.target.value);\n onChange?.(e);\n }}\n onCompositionEnd={(e) => {\n isChineseInput.current = false;\n onCompositionEnd?.(e);\n }}\n onCompositionStart={(e) => {\n isChineseInput.current = true;\n onCompositionStart?.(e);\n }}\n onPressEnter={(e) => {\n onPressEnter?.(e);\n const isMobile = /mobi|android|iphone/i.test(navigator.userAgent);\n if (\n !loading &&\n !isChineseInput.current &&\n ((!isMobile && !e.shiftKey) || (isMobile && e.shiftKey))\n ) {\n e.preventDefault();\n onSend?.();\n }\n }}\n {...rest}\n />\n );\n },\n);\n\nexport default ChatInputAreaInner;\n"],"mappings":";;;;;AAQA,MAAM,qBAAqB,MACxB,EACC,KACA,SAAS,OACT,kBACA,cACA,oBACA,WACA,SACA,SACA,QACA,QACA,UACA,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,KAAK;CAEnC,OACE,oBAAC,UAAD;EACa;EACN;EACG;EACR,SAAS;EACT,SAAS,MAAM;GACb,UAAU,EAAE,OAAO,KAAK;GACxB,SAAS,CAAC;EACZ;EACA,WAAW,MAAM;GACf,UAAU,EAAE,OAAO,KAAK;GACxB,WAAW,CAAC;EACd;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,eAAe,CAAC;GAChB,MAAM,WAAW,uBAAuB,KAAK,UAAU,SAAS;GAChE,IACE,CAAC,WACD,CAAC,eAAe,YACd,CAAC,YAAY,CAAC,EAAE,YAAc,YAAY,EAAE,WAC9C;IACA,EAAE,eAAe;IACjB,SAAS;GACX;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
|
|
2
2
|
import Icon from "../../../Icon/Icon.mjs";
|
|
3
|
-
import Button from "../../../Button/Button.mjs";
|
|
3
|
+
import Button from "../../../base-ui/Button/Button.mjs";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { cssVar } from "antd-style";
|
|
6
6
|
import { ArrowBigUp, CornerDownLeft, Loader2 } from "lucide-react";
|