@lobehub/ui 5.53.0 → 5.54.0

package/es/color/ColorScales/index.mjs

@@ -1,25 +1,26 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { ToastHost } from "../../base-ui/Toast/imperative.mjs";
 import { styles } from "./style.mjs";
 import ScaleRow from "./ScaleRow.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Space } from "antd";
 //#region src/color/ColorScales/index.tsx
 const ColorScales = memo(({ name, scale, midHighLight }) => {
-	return /* @__PURE__ */ jsx(FlexBasic_default, {
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		align: "center",
 		flex: 1,
 		justify: "center",
-		children: /* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsx("div", {
 			style: { padding: "8px 16px 32px 0" },
-			children: /* @__PURE__ */ jsxs(Space, {
-				direction: "vertical",
-				size: 2,
+			children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+				gap: 2,
 				children: [
-					/* @__PURE__ */ jsxs(Space, {
-						size: 2,
+					/* @__PURE__ */ jsxs(FlexBasic_default, {
+						horizontal: true,
+						align: "center",
+						gap: 2,
 						children: [/* @__PURE__ */ jsx(FlexBasic_default, {
 							horizontal: true,
 							align: "center",
@@ -68,7 +69,7 @@ const ColorScales = memo(({ name, scale, midHighLight }) => {
 					}, "darkA")
 				]
 			})
-		})
+		}), /* @__PURE__ */ jsx(ToastHost, {})]
 	});
 });
 //#endregion

package/es/color/ColorScales/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/color/ColorScales/index.tsx"],"sourcesContent":["'use client';\n\nimport { Space } from 'antd';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport type { ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Space direction={'vertical'} size={2}>\n          <Space key=\"scale-title\" size={2}>\n            <Flexbox horizontal align={'center'} className={styles.scaleRowTitle} key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        horizontal\n                        align={'center'}\n                        className={styles.scaleItem}\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Space>\n          <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n          <ScaleRow key=\"lightA\" name={name} scale={scale.lightA} title=\"lightA\" />\n          <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n          <ScaleRow key=\"darkA\" name={name} scale={scale.darkA} title=\"darkA\" />\n        </Space>\n      </div>\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;AA0BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,OACE,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;EACrD,UAAA,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,kBAAkB;GACvC,UAAA,qBAAC,OAAD;IAAO,WAAW;IAAY,MAAM;IAApC,UAAA;KACE,qBAAC,OAAD;MAAyB,MAAM;MAA/B,UAAA,CACE,oBAACA,mBAAD;OAAS,YAAA;OAAW,OAAO;OAAU,WAAW,OAAO;MAAgC,GAAb,WAAa,GACtF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC,CACxC,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU;OACjB,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;OAExC,MAAM,iBAAiB,iBAAiB;OAExC,OACE,oBAAC,OAAD;QAAK,WAAW,OAAO;QACrB,UAAA,oBAAC,OAAD;SAAK,WAAW,OAAO;SACrB,UAAA,oBAACA,mBAAD;UACE,YAAA;UACA,OAAO;UACP,WAAW,OAAO;UAClB,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;UACX;UAEC,UAAA;SACM,CAAA;QACN,CAAA;OACF,GAfiC,MAAM,OAevC;MAET,CAAC,CACE;KA5BI,GAAA,aA4BJ;KACP,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD;KACrE,oBAAC,UAAD;MAA6B;MAAM,OAAO,MAAM;MAAQ,OAAM;KAAU,GAA1D,QAA0D;KACxE,oBAAC,UAAD;MAA2B;MAAM,OAAO,MAAM;MAAM,OAAM;KAAQ,GAApD,MAAoD;KAClE,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD;IAChE;;EACJ,CAAA;CACE,CAAA;AAEb,CAAC"}
+{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/color/ColorScales/index.tsx"],"sourcesContent":["'use client';\n\nimport { memo } from 'react';\n\nimport { ToastHost } from '@/base-ui/Toast';\nimport { Flexbox } from '@/Flex';\n\nimport type { ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Flexbox gap={2}>\n          <Flexbox horizontal align={'center'} gap={2} key=\"scale-title\">\n            <Flexbox horizontal align={'center'} className={styles.scaleRowTitle} key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        horizontal\n                        align={'center'}\n                        className={styles.scaleItem}\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Flexbox>\n          <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n          <ScaleRow key=\"lightA\" name={name} scale={scale.lightA} title=\"lightA\" />\n          <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n          <ScaleRow key=\"darkA\" name={name} scale={scale.darkA} title=\"darkA\" />\n        </Flexbox>\n      </div>\n      <ToastHost />\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;AA0BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;EAAvD,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,kBAAkB;GACvC,UAAA,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACE,qBAACA,mBAAD;MAAS,YAAA;MAAW,OAAO;MAAU,KAAK;MAA1C,UAAA,CACE,oBAACA,mBAAD;OAAS,YAAA;OAAW,OAAO;OAAU,WAAW,OAAO;MAAgC,GAAb,WAAa,GACtF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC,CACxC,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU;OACjB,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;OAExC,MAAM,iBAAiB,iBAAiB;OAExC,OACE,oBAAC,OAAD;QAAK,WAAW,OAAO;QACrB,UAAA,oBAAC,OAAD;SAAK,WAAW,OAAO;SACrB,UAAA,oBAACA,mBAAD;UACE,YAAA;UACA,OAAO;UACP,WAAW,OAAO;UAClB,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;UACX;UAEC,UAAA;SACM,CAAA;QACN,CAAA;OACF,GAfiC,MAAM,OAevC;MAET,CAAC,CACI;KA5BwC,GAAA,aA4BxC;KACT,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD;KACrE,oBAAC,UAAD;MAA6B;MAAM,OAAO,MAAM;MAAQ,OAAM;KAAU,GAA1D,QAA0D;KACxE,oBAAC,UAAD;MAA2B;MAAM,OAAO,MAAM;MAAM,OAAM;KAAQ,GAApD,MAAoD;KAClE,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD;IAC9D;;EACN,CAAA,GACL,oBAAC,WAAD,CAAY,CAAA,CACL;;AAEb,CAAC"}

package/es/color/CssVar/ScaleRow.mjs

@@ -1,14 +1,16 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { copyToClipboard } from "../../utils/copyToClipboard.mjs";
+import { toast } from "../../base-ui/Toast/imperative.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Space, message } from "antd";
 //#region src/color/CssVar/ScaleRow.tsx
 const ScaleRow = memo(({ name, title, scale }) => {
 	const style = {};
-	return /* @__PURE__ */ jsxs(Space, {
-		size: 2,
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		gap: 2,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: styles.scaleRowTitle,
 			children: /* @__PURE__ */ jsx("div", {
@@ -24,7 +26,7 @@ const ScaleRow = memo(({ name, title, scale }) => {
 				onClick: async () => {
 					const content = `token.${name}${index} /* ${color} */`;
 					await copyToClipboard(content);
-					message.success(content);
+					toast.success(content);
 				},
 				children: /* @__PURE__ */ jsx(FlexBasic_default, {
 					horizontal: true,

package/es/color/CssVar/ScaleRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScaleRow.mjs","names":["Flexbox"],"sources":["../../../src/color/CssVar/ScaleRow.tsx"],"sourcesContent":["import { message, Space } from 'antd';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n  scale: string[];\n  title: 'light' | 'dark';\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name, title, scale }) => {\n  const style = {};\n  const isAlpha = false;\n\n  return (\n    <Space size={2}>\n      <div className={styles.scaleRowTitle} key={title}>\n        <div className={styles.text}>{title}</div>\n      </div>\n      {scale.map((color, index) => {\n        if (index === 0 || index === 12) return false;\n\n        return (\n          <div\n            className={styles.scaleBox}\n            key={index}\n            style={style}\n            title={color}\n            onClick={async () => {\n              const content = `token.${name}${index}${isAlpha ? 'A' : ''} /* ${color} */`;\n\n              await copyToClipboard(content);\n              message.success(content);\n            }}\n          >\n            <Flexbox\n              horizontal\n              align={'center'}\n              className={styles.scaleItem}\n              justify={'center'}\n              style={{ backgroundColor: color }}\n            />\n          </div>\n        );\n      })}\n    </Space>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;AAcA,MAAM,WAAW,MAAiB,EAAE,MAAM,OAAO,YAAY;CAC3D,MAAM,QAAQ,CAAC;CAGf,OACE,qBAAC,OAAD;EAAO,MAAM;EAAb,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAW,CAAA;EACtC,GAFsC,KAEtC,GACJ,MAAM,KAAK,OAAO,UAAU;GAC3B,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;GAExC,OACE,oBAAC,OAAD;IACE,WAAW,OAAO;IAEX;IACP,OAAO;IACP,SAAS,YAAY;KACnB,MAAM,UAAU,SAAS,OAAO,MAAA,MAAiC,MAAM;KAEvE,MAAM,gBAAgB,OAAO;KAC7B,QAAQ,QAAQ,OAAO;IACzB;IAEA,UAAA,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,OAAO;KAClB,SAAS;KACT,OAAO,EAAE,iBAAiB,MAAM;IACjC,CAAA;GACE,GAjBE,KAiBF;EAET,CAAC,CACI;;AAEX,CAAC"}
+{"version":3,"file":"ScaleRow.mjs","names":["Flexbox"],"sources":["../../../src/color/CssVar/ScaleRow.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { toast } from '@/base-ui/Toast';\nimport { Flexbox } from '@/Flex';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n  scale: string[];\n  title: 'light' | 'dark';\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name, title, scale }) => {\n  const style = {};\n  const isAlpha = false;\n\n  return (\n    <Flexbox horizontal align={'center'} gap={2}>\n      <div className={styles.scaleRowTitle} key={title}>\n        <div className={styles.text}>{title}</div>\n      </div>\n      {scale.map((color, index) => {\n        if (index === 0 || index === 12) return false;\n\n        return (\n          <div\n            className={styles.scaleBox}\n            key={index}\n            style={style}\n            title={color}\n            onClick={async () => {\n              const content = `token.${name}${index}${isAlpha ? 'A' : ''} /* ${color} */`;\n\n              await copyToClipboard(content);\n              toast.success(content);\n            }}\n          >\n            <Flexbox\n              horizontal\n              align={'center'}\n              className={styles.scaleItem}\n              justify={'center'}\n              style={{ backgroundColor: color }}\n            />\n          </div>\n        );\n      })}\n    </Flexbox>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;AAcA,MAAM,WAAW,MAAiB,EAAE,MAAM,OAAO,YAAY;CAC3D,MAAM,QAAQ,CAAC;CAGf,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAA1C,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAW,CAAA;EACtC,GAFsC,KAEtC,GACJ,MAAM,KAAK,OAAO,UAAU;GAC3B,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;GAExC,OACE,oBAAC,OAAD;IACE,WAAW,OAAO;IAEX;IACP,OAAO;IACP,SAAS,YAAY;KACnB,MAAM,UAAU,SAAS,OAAO,MAAA,MAAiC,MAAM;KAEvE,MAAM,gBAAgB,OAAO;KAC7B,MAAM,QAAQ,OAAO;IACvB;IAEA,UAAA,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,OAAO;KAClB,SAAS;KACT,OAAO,EAAE,iBAAiB,MAAM;IACjC,CAAA;GACE,GAjBE,KAiBF;EAET,CAAC,CACM;;AAEb,CAAC"}

package/es/color/CssVar/VarRow.mjs

@@ -1,14 +1,16 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import { copyToClipboard } from "../../utils/copyToClipboard.mjs";
+import { toast } from "../../base-ui/Toast/imperative.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cssVar } from "antd-style";
-import { Space, message } from "antd";
 //#region src/color/CssVar/VarRow.tsx
 const ScaleRow = memo(({ name }) => {
-	return /* @__PURE__ */ jsxs(Space, {
-		size: 2,
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		gap: 2,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: styles.scaleRowTitle,
 			children: /* @__PURE__ */ jsx("div", {
@@ -33,7 +35,7 @@ const ScaleRow = memo(({ name }) => {
 				onClick: async () => {
 					const content = cssVar[`${name}${color}`];
 					await copyToClipboard(content);
-					message.success(content);
+					toast.success(content);
 				},
 				children: /* @__PURE__ */ jsx(FlexBasic_default, {
 					horizontal: true,

package/es/color/CssVar/VarRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VarRow.mjs","names":["Flexbox"],"sources":["../../../src/color/CssVar/VarRow.tsx"],"sourcesContent":["import { message, Space } from 'antd';\nimport { cssVar } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name }) => {\n  return (\n    <Space size={2}>\n      <div className={styles.scaleRowTitle} key={name}>\n        <div className={styles.text}>cssVar</div>\n      </div>\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((color) => {\n        return (\n          <div\n            className={styles.scaleBox}\n            key={color}\n            title={(cssVar as any)[`${name}${color}`] as any}\n            onClick={async () => {\n              const content = (cssVar as any)[`${name}${color}`] as any;\n\n              await copyToClipboard(content);\n              message.success(content);\n            }}\n          >\n            <Flexbox\n              horizontal\n              align={'center'}\n              className={styles.scaleItem}\n              justify={'center'}\n              style={{ backgroundColor: (cssVar as any)[`${name}${color}`] as any }}\n            />\n          </div>\n        );\n      })}\n    </Space>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;;AAaA,MAAM,WAAW,MAAiB,EAAE,WAAW;CAC7C,OACE,qBAAC,OAAD;EAAO,MAAM;EAAb,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAM,UAAA;GAAW,CAAA;EACrC,GAFsC,IAEtC,GACJ;GAAC;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;EAAE,CAAC,CAAC,KAAK,UAAU;GAC9C,OACE,oBAAC,OAAD;IACE,WAAW,OAAO;IAElB,OAAQ,OAAe,GAAG,OAAO;IACjC,SAAS,YAAY;KACnB,MAAM,UAAW,OAAe,GAAG,OAAO;KAE1C,MAAM,gBAAgB,OAAO;KAC7B,QAAQ,QAAQ,OAAO;IACzB;IAEA,UAAA,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,OAAO;KAClB,SAAS;KACT,OAAO,EAAE,iBAAkB,OAAe,GAAG,OAAO,SAAgB;IACrE,CAAA;GACE,GAhBE,KAgBF;EAET,CAAC,CACI;;AAEX,CAAC"}
+{"version":3,"file":"VarRow.mjs","names":["Flexbox"],"sources":["../../../src/color/CssVar/VarRow.tsx"],"sourcesContent":["import { cssVar } from 'antd-style';\nimport { memo } from 'react';\n\nimport { toast } from '@/base-ui/Toast';\nimport { Flexbox } from '@/Flex';\nimport { copyToClipboard } from '@/utils/copyToClipboard';\n\nimport { styles } from './style';\n\nexport interface IScaleRow {\n  name: string;\n}\n\nconst ScaleRow = memo<IScaleRow>(({ name }) => {\n  return (\n    <Flexbox horizontal align={'center'} gap={2}>\n      <div className={styles.scaleRowTitle} key={name}>\n        <div className={styles.text}>cssVar</div>\n      </div>\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((color) => {\n        return (\n          <div\n            className={styles.scaleBox}\n            key={color}\n            title={(cssVar as any)[`${name}${color}`] as any}\n            onClick={async () => {\n              const content = (cssVar as any)[`${name}${color}`] as any;\n\n              await copyToClipboard(content);\n              toast.success(content);\n            }}\n          >\n            <Flexbox\n              horizontal\n              align={'center'}\n              className={styles.scaleItem}\n              justify={'center'}\n              style={{ backgroundColor: (cssVar as any)[`${name}${color}`] as any }}\n            />\n          </div>\n        );\n      })}\n    </Flexbox>\n  );\n});\n\nexport default ScaleRow;\n"],"mappings":";;;;;;;;AAaA,MAAM,WAAW,MAAiB,EAAE,WAAW;CAC7C,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAA1C,UAAA,CACE,oBAAC,OAAD;GAAK,WAAW,OAAO;GACrB,UAAA,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAM,UAAA;GAAW,CAAA;EACrC,GAFsC,IAEtC,GACJ;GAAC;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;GAAG;EAAE,CAAC,CAAC,KAAK,UAAU;GAC9C,OACE,oBAAC,OAAD;IACE,WAAW,OAAO;IAElB,OAAQ,OAAe,GAAG,OAAO;IACjC,SAAS,YAAY;KACnB,MAAM,UAAW,OAAe,GAAG,OAAO;KAE1C,MAAM,gBAAgB,OAAO;KAC7B,MAAM,QAAQ,OAAO;IACvB;IAEA,UAAA,oBAACA,mBAAD;KACE,YAAA;KACA,OAAO;KACP,WAAW,OAAO;KAClB,SAAS;KACT,OAAO,EAAE,iBAAkB,OAAe,GAAG,OAAO,SAAgB;IACrE,CAAA;GACE,GAhBE,KAgBF;EAET,CAAC,CACM;;AAEb,CAAC"}

package/es/color/CssVar/index.mjs

@@ -1,28 +1,29 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { ToastHost } from "../../base-ui/Toast/imperative.mjs";
 import { styles } from "./style.mjs";
 import ScaleRow from "./ScaleRow.mjs";
 import ScaleRow$1 from "./VarRow.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useThemeMode } from "antd-style";
-import { Space } from "antd";
 //#region src/color/CssVar/index.tsx
 const ColorScales = memo(({ name, scale, midHighLight }) => {
 	const { isDarkMode } = useThemeMode();
-	return /* @__PURE__ */ jsx(FlexBasic_default, {
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		align: "center",
 		flex: 1,
 		justify: "center",
-		children: /* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsx("div", {
 			style: { padding: "8px 16px 32px 0" },
-			children: /* @__PURE__ */ jsxs(Space, {
-				direction: "vertical",
-				size: 2,
+			children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+				gap: 2,
 				children: [
-					/* @__PURE__ */ jsxs(Space, {
-						size: 2,
+					/* @__PURE__ */ jsxs(FlexBasic_default, {
+						horizontal: true,
+						align: "center",
+						gap: 2,
 						children: [/* @__PURE__ */ jsx(FlexBasic_default, {
 							horizontal: true,
 							align: "center",
@@ -73,7 +74,7 @@ const ColorScales = memo(({ name, scale, midHighLight }) => {
 					] })
 				]
 			})
-		})
+		}), /* @__PURE__ */ jsx(ToastHost, {})]
 	});
 });
 //#endregion

package/es/color/CssVar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox","VarRow"],"sources":["../../../src/color/CssVar/index.tsx"],"sourcesContent":["'use client';\n\nimport { Space } from 'antd';\nimport { useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { type ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\nimport VarRow from './VarRow';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  const { isDarkMode } = useThemeMode();\n  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Space direction={'vertical'} size={2}>\n          <Space key=\"scale-title\" size={2}>\n            <Flexbox horizontal align={'center'} className={styles.scaleRowTitle} key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        horizontal\n                        align={'center'}\n                        className={styles.scaleItem}\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Space>\n          <VarRow name={name} />\n          {isDarkMode ? (\n            <>\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n            </>\n          ) : (\n            <>\n              {' '}\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n            </>\n          )}\n        </Space>\n      </div>\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,MAAM,EAAE,eAAe,aAAa;CACpC,OACE,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;EACrD,UAAA,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,kBAAkB;GACvC,UAAA,qBAAC,OAAD;IAAO,WAAW;IAAY,MAAM;IAApC,UAAA;KACE,qBAAC,OAAD;MAAyB,MAAM;MAA/B,UAAA,CACE,oBAACA,mBAAD;OAAS,YAAA;OAAW,OAAO;OAAU,WAAW,OAAO;MAAgC,GAAb,WAAa,GACtF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC,CACxC,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU;OACjB,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;OAExC,MAAM,iBAAiB,iBAAiB;OAExC,OACE,oBAAC,OAAD;QAAK,WAAW,OAAO;QACrB,UAAA,oBAAC,OAAD;SAAK,WAAW,OAAO;SACrB,UAAA,oBAACA,mBAAD;UACE,YAAA;UACA,OAAO;UACP,WAAW,OAAO;UAClB,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;UACX;UAEC,UAAA;SACM,CAAA;QACN,CAAA;OACF,GAfiC,MAAM,OAevC;MAET,CAAC,CACE;KA5BI,GAAA,aA4BJ;KACP,oBAACC,YAAD,EAAc,KAAO,CAAA;KACpB,aACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;MAA2B;MAAM,OAAO,MAAM;MAAM,OAAM;KAAQ,GAApD,MAAoD,GAClE,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD,CACrE,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;MACG;MACD,oBAAC,UAAD;OAA4B;OAAM,OAAO,MAAM;OAAO,OAAM;MAAS,GAAvD,OAAuD;MACrE,oBAAC,UAAD;OAA2B;OAAM,OAAO,MAAM;OAAM,OAAM;MAAQ,GAApD,MAAoD;KAClE,EAAA,CAAA;IAEC;;EACJ,CAAA;CACE,CAAA;AAEb,CAAC"}
+{"version":3,"file":"index.mjs","names":["Flexbox","VarRow"],"sources":["../../../src/color/CssVar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { ToastHost } from '@/base-ui/Toast';\nimport { Flexbox } from '@/Flex';\n\nimport { type ColorScaleItem } from '../types';\nimport ScaleRow from './ScaleRow';\nimport { styles } from './style';\nimport VarRow from './VarRow';\n\nexport interface ColorScalesProps {\n  /**\n   * @description Index of the mid highlight color in the scale\n   */\n  midHighLight: number;\n  /**\n   * @description Name of the color scale\n   */\n  name: string;\n  /**\n   * @description Color scale item object\n   */\n  scale: ColorScaleItem;\n}\n\nconst ColorScales = memo<ColorScalesProps>(({ name, scale, midHighLight }) => {\n  const { isDarkMode } = useThemeMode();\n  return (\n    <Flexbox horizontal align={'center'} flex={1} justify={'center'}>\n      <div style={{ padding: '8px 16px 32px 0' }}>\n        <Flexbox gap={2}>\n          <Flexbox horizontal align={'center'} gap={2} key=\"scale-title\">\n            <Flexbox horizontal align={'center'} className={styles.scaleRowTitle} key=\"scale-num\" />\n            {Array.from({ length: scale.light.length })\n              .fill('')\n              .map((_, index) => {\n                if (index === 0 || index === 12) return false;\n\n                const isMidHighlight = midHighLight === index;\n\n                return (\n                  <div className={styles.scaleBox} key={`num${index}`}>\n                    <div className={styles.scaleBox}>\n                      <Flexbox\n                        horizontal\n                        align={'center'}\n                        className={styles.scaleItem}\n                        justify={'center'}\n                        style={{\n                          fontWeight: isMidHighlight ? 700 : 400,\n                          opacity: 0.5,\n                        }}\n                      >\n                        {index}\n                      </Flexbox>\n                    </div>\n                  </div>\n                );\n              })}\n          </Flexbox>\n          <VarRow name={name} />\n          {isDarkMode ? (\n            <>\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n            </>\n          ) : (\n            <>\n              {' '}\n              <ScaleRow key=\"light\" name={name} scale={scale.light} title=\"light\" />\n              <ScaleRow key=\"dark\" name={name} scale={scale.dark} title=\"dark\" />\n            </>\n          )}\n        </Flexbox>\n      </div>\n      <ToastHost />\n    </Flexbox>\n  );\n});\n\nexport default ColorScales;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,cAAc,MAAwB,EAAE,MAAM,OAAO,mBAAmB;CAC5E,MAAM,EAAE,eAAe,aAAa;CACpC,OACE,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,MAAM;EAAG,SAAS;EAAvD,UAAA,CACE,oBAAC,OAAD;GAAK,OAAO,EAAE,SAAS,kBAAkB;GACvC,UAAA,qBAACA,mBAAD;IAAS,KAAK;IAAd,UAAA;KACE,qBAACA,mBAAD;MAAS,YAAA;MAAW,OAAO;MAAU,KAAK;MAA1C,UAAA,CACE,oBAACA,mBAAD;OAAS,YAAA;OAAW,OAAO;OAAU,WAAW,OAAO;MAAgC,GAAb,WAAa,GACtF,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,OAAO,CAAC,CAAC,CACxC,KAAK,EAAE,CAAC,CACR,KAAK,GAAG,UAAU;OACjB,IAAI,UAAU,KAAK,UAAU,IAAI,OAAO;OAExC,MAAM,iBAAiB,iBAAiB;OAExC,OACE,oBAAC,OAAD;QAAK,WAAW,OAAO;QACrB,UAAA,oBAAC,OAAD;SAAK,WAAW,OAAO;SACrB,UAAA,oBAACA,mBAAD;UACE,YAAA;UACA,OAAO;UACP,WAAW,OAAO;UAClB,SAAS;UACT,OAAO;WACL,YAAY,iBAAiB,MAAM;WACnC,SAAS;UACX;UAEC,UAAA;SACM,CAAA;QACN,CAAA;OACF,GAfiC,MAAM,OAevC;MAET,CAAC,CACI;KA5BwC,GAAA,aA4BxC;KACT,oBAACC,YAAD,EAAc,KAAO,CAAA;KACpB,aACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;MAA2B;MAAM,OAAO,MAAM;MAAM,OAAM;KAAQ,GAApD,MAAoD,GAClE,oBAAC,UAAD;MAA4B;MAAM,OAAO,MAAM;MAAO,OAAM;KAAS,GAAvD,OAAuD,CACrE,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA;MACG;MACD,oBAAC,UAAD;OAA4B;OAAM,OAAO,MAAM;OAAO,OAAM;MAAS,GAAvD,OAAuD;MACrE,oBAAC,UAAD;OAA2B;OAAM,OAAO,MAAM;OAAM,OAAM;MAAQ,GAApD,MAAoD;KAClE,EAAA,CAAA;IAEG;;EACN,CAAA,GACL,oBAAC,WAAD,CAAY,CAAA,CACL;;AAEb,CAAC"}

package/es/mobile/ChatInputArea/ChatInputArea.mjs

@@ -84,7 +84,7 @@ const ChatInputArea = memo(({ ref, className, style, topAddons, textAreaLeftAddo
 						loading,
 						ref,
 						style: {
-							height: 36,
+							minHeight: 36,
 							paddingBlock: 6
 						},
 						value,

package/es/mobile/ChatInputArea/ChatInputArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox className={styles.inner} gap={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} className={styles.inner} gap={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        className={cx(styles.container, expand && styles.expand, className)}\n        gap={12}\n        style={style}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          className={cx(expand && styles.expand)}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              className={styles.expandButton}\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={expand ? { top: 6 } : {}}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              className={styles.expandTextArea}\n              loading={loading}\n              ref={ref}\n              style={{ height: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,OAAO,QAAQ,YAAY;CACjC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM,QAAQ;EACnB,kBAAkB,KAAK,SAAS,EAAE;CACpC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,WAAW,OAAO;EAAO,KAAK;EAAvC,UAAA;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;IAArC,UAAA,CACG,EAAE,oBACF,EAAE,mBACI;;GACR;GACA,EAAE;GACF,EAAE;EACI;CAET,CAAA,IAAA,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,WAAW,OAAO;EAAO,KAAK;EAArE,UAAA;GACG,EAAE;GACF;GACA,EAAE;EACI;CAEb,CAAA,GAAA,CAAC,QAAQ,OAAO,CAClB;CAEA,MAAM,aAAa,CAAC,UAAU,CAAC;CAE/B,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,OAAO,WAAW,UAAU,OAAO,QAAQ,SAAS;EAClE,KAAK;EACE;EAHT,UAAA;GAKG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAmB,CAAA;GACzF,qBAACA,mBAAD;IACE,WAAW,GAAG,UAAU,OAAO,MAAM;IACrC,KAAK;IACL,OAAO,EAAE,UAAU,WAAW;IAHhC,UAAA,CAKG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,WAAW,OAAO;KAClB,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;KAAG;KACrD,OAAO,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC;KAC9B,eAAe,YAAY,CAAC,MAAM;IACnC,CAAA,GAEH,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;KAEX,UAAA,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;MAAE;MACpD,WAAW,OAAO;MACT;MACJ;MACL,OAAO;OAAE,QAAQ;OAAI,cAAc;MAAE;MAC9B;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,KAAK;MAChC,eAAe,aAAa,IAAI;MACvB;MACD;KACT,CAAA;IACa,CAAA,CACT;;GACR,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAsB,CAAA;GAE/E,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA;EACnD;;AAEb,CACF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox className={styles.inner} gap={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} className={styles.inner} gap={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        className={cx(styles.container, expand && styles.expand, className)}\n        gap={12}\n        style={style}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          className={cx(expand && styles.expand)}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              className={styles.expandButton}\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={expand ? { top: 6 } : {}}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              className={styles.expandTextArea}\n              loading={loading}\n              ref={ref}\n              style={{ minHeight: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,OAAO,QAAQ,YAAY;CACjC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM,QAAQ;EACnB,kBAAkB,KAAK,SAAS,EAAE;CACpC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,WAAW,OAAO;EAAO,KAAK;EAAvC,UAAA;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;IAArC,UAAA,CACG,EAAE,oBACF,EAAE,mBACI;;GACR;GACA,EAAE;GACF,EAAE;EACI;CAET,CAAA,IAAA,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,WAAW,OAAO;EAAO,KAAK;EAArE,UAAA;GACG,EAAE;GACF;GACA,EAAE;EACI;CAEb,CAAA,GAAA,CAAC,QAAQ,OAAO,CAClB;CAEA,MAAM,aAAa,CAAC,UAAU,CAAC;CAE/B,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,OAAO,WAAW,UAAU,OAAO,QAAQ,SAAS;EAClE,KAAK;EACE;EAHT,UAAA;GAKG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAmB,CAAA;GACzF,qBAACA,mBAAD;IACE,WAAW,GAAG,UAAU,OAAO,MAAM;IACrC,KAAK;IACL,OAAO,EAAE,UAAU,WAAW;IAHhC,UAAA,CAKG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,WAAW,OAAO;KAClB,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;KAAG;KACrD,OAAO,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC;KAC9B,eAAe,YAAY,CAAC,MAAM;IACnC,CAAA,GAEH,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;KAEX,UAAA,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;MAAE;MACpD,WAAW,OAAO;MACT;MACJ;MACL,OAAO;OAAE,WAAW;OAAI,cAAc;MAAE;MACjC;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,KAAK;MAChC,eAAe,aAAa,IAAI;MACvB;MACD;KACT,CAAA;IACa,CAAA,CACT;;GACR,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAsB,CAAA;GAE/E,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA;EACnD;;AAEb,CACF;AAEA,cAAc,cAAc"}

package/es/mobile/ChatInputArea/components/ChatSendButton.mjs

@@ -1,5 +1,5 @@
 "use client";
-import Button from "../../../Button/Button.mjs";
+import Button from "../../../base-ui/Button/Button.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { SendHorizontal } from "lucide-react";

package/es/mobile/ChatInputArea/components/ChatSendButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatSendButton.mjs","names":[],"sources":["../../../../src/mobile/ChatInputArea/components/ChatSendButton.tsx"],"sourcesContent":["'use client';\n\nimport { SendHorizontal } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Button from '@/Button';\n\nimport type { ChatSendButtonProps } from '../type';\n\nconst ChatSendButton = memo<ChatSendButtonProps>(({ ref, loading, onStop, onSend, ...rest }) => {\n  return (\n    <Button\n      icon={SendHorizontal}\n      loading={loading}\n      ref={ref}\n      type={'primary'}\n      onClick={(e) => {\n        e.preventDefault();\n        if (loading) {\n          onStop?.(e);\n        } else {\n          onSend?.(e);\n        }\n      }}\n      {...rest}\n    />\n  );\n});\n\nChatSendButton.displayName = 'ChatSendButton';\n\nexport default ChatSendButton;\n"],"mappings":";;;;;;AASA,MAAM,iBAAiB,MAA2B,EAAE,KAAK,SAAS,QAAQ,QAAQ,GAAG,WAAW;CAC9F,OACE,oBAAC,QAAD;EACE,MAAM;EACG;EACJ;EACL,MAAM;EACN,UAAU,MAAM;GACd,EAAE,eAAe;GACjB,IAAI,SACF,SAAS,CAAC;QAEV,SAAS,CAAC;EAEd;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"ChatSendButton.mjs","names":[],"sources":["../../../../src/mobile/ChatInputArea/components/ChatSendButton.tsx"],"sourcesContent":["'use client';\n\nimport { SendHorizontal } from 'lucide-react';\nimport { memo } from 'react';\n\nimport Button from '@/base-ui/Button';\n\nimport type { ChatSendButtonProps } from '../type';\n\nconst ChatSendButton = memo<ChatSendButtonProps>(({ ref, loading, onStop, onSend, ...rest }) => {\n  return (\n    <Button\n      icon={SendHorizontal}\n      loading={loading}\n      ref={ref}\n      type={'primary'}\n      onClick={(e) => {\n        e.preventDefault();\n        if (loading) {\n          onStop?.(e);\n        } else {\n          onSend?.(e);\n        }\n      }}\n      {...rest}\n    />\n  );\n});\n\nChatSendButton.displayName = 'ChatSendButton';\n\nexport default ChatSendButton;\n"],"mappings":";;;;;;AASA,MAAM,iBAAiB,MAA2B,EAAE,KAAK,SAAS,QAAQ,QAAQ,GAAG,WAAW;CAC9F,OACE,oBAAC,QAAD;EACE,MAAM;EACG;EACJ;EACL,MAAM;EACN,UAAU,MAAM;GACd,EAAE,eAAe;GACjB,IAAI,SACF,SAAS,CAAC;QAEV,SAAS,CAAC;EAEd;EACA,GAAI;CACL,CAAA;AAEL,CAAC;AAED,eAAe,cAAc"}

package/es/mobile/ChatInputArea/type.d.mts

@@ -1,14 +1,13 @@
-import { ButtonProps } from "../../Button/type.mjs";
-import "../../Button/index.mjs";
+import { ButtonProps } from "../../base-ui/Button/type.mjs";
+import "../../base-ui/Button/index.mjs";
 import { ChatInputAreaInnerProps } from "../../chat/ChatInputArea/type.mjs";
 import "../../chat/ChatInputArea/index.mjs";
-import { CSSProperties, ReactNode, Ref } from "react";
-import { TextAreaRef } from "antd/es/input/TextArea.js";
+import { CSSProperties, MouseEventHandler, ReactNode, Ref } from "react";
 //#region src/mobile/ChatInputArea/type.d.ts
 interface ChatInputAreaProps extends ChatInputAreaInnerProps {
   bottomAddons?: ReactNode;
   expand?: boolean;
-  ref?: Ref<TextAreaRef>;
+  ref?: Ref<HTMLTextAreaElement>;
   safeArea?: boolean;
   setExpand?: (expand: boolean) => void;
   style?: CSSProperties;
@@ -17,8 +16,8 @@ interface ChatInputAreaProps extends ChatInputAreaInnerProps {
   topAddons?: ReactNode;
 }
 interface ChatSendButtonProps extends Omit<ButtonProps, 'onClick'> {
-  onSend?: ButtonProps['onClick'];
-  onStop?: ButtonProps['onClick'];
+  onSend?: MouseEventHandler<HTMLElement>;
+  onStop?: MouseEventHandler<HTMLElement>;
 }
 //#endregion
 export { ChatInputAreaProps, ChatSendButtonProps };

package/es/static-css/baseline.mjs

@@ -17,11 +17,9 @@ const lobeUiAntdBaseline = [
 	"input-textarea",
 	"menu",
 	"modal",
-	"progress",
 	"segmented",
 	"select",
 	"slider",
-	"space",
 	"tabs",
 	"tag",
 	"tag-preset",

package/es/static-css/baseline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"baseline.mjs","names":[],"sources":["../../src/static-css/baseline.ts"],"sourcesContent":["import type { AntdProbeName } from './registry';\n\n// The antd components @lobehub/ui internals can render. Kept in sync with the\n// source tree by baseline.test.ts — a failure there means this list must change.\nexport const lobeUiAntdBaseline: AntdProbeName[] = [\n  'alert',\n  'anchor',\n  'app',\n  'auto-complete',\n  'avatar',\n  'button',\n  'collapse',\n  'date-picker',\n  'divider',\n  'drawer',\n  'dropdown',\n  'form',\n  'input',\n  'input-number',\n  'input-textarea',\n  'menu',\n  'modal',\n  'progress',\n  'segmented',\n  'select',\n  'slider',\n  'space',\n  'tabs',\n  'tag',\n  'tag-preset',\n  'tag-status',\n];\n"],"mappings":";AAIA,MAAa,qBAAsC;CACjD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"baseline.mjs","names":[],"sources":["../../src/static-css/baseline.ts"],"sourcesContent":["import type { AntdProbeName } from './registry';\n\n// The antd components @lobehub/ui internals can render. Kept in sync with the\n// source tree by baseline.test.ts — a failure there means this list must change.\nexport const lobeUiAntdBaseline: AntdProbeName[] = [\n  'alert',\n  'anchor',\n  'app',\n  'auto-complete',\n  'avatar',\n  'button',\n  'collapse',\n  'date-picker',\n  'divider',\n  'drawer',\n  'dropdown',\n  'form',\n  'input',\n  'input-number',\n  'input-textarea',\n  'menu',\n  'modal',\n  'segmented',\n  'select',\n  'slider',\n  'tabs',\n  'tag',\n  'tag-preset',\n  'tag-status',\n];\n"],"mappings":";AAIA,MAAa,qBAAsC;CACjD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF"}

package/es/storybook/StoryBook/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Center from "../../Flex/Center.mjs";
-import DraggablePanel from "../../DraggablePanel/index.mjs";
+import DraggablePanel from "../../base-ui/DraggablePanel/DraggablePanel.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/es/storybook/StoryBook/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/storybook/StoryBook/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { LevaPanel } from 'leva';\nimport { memo, type Ref } from 'react';\n\nimport DraggablePanel from '@/DraggablePanel';\nimport { Center, Flexbox, type FlexboxProps } from '@/Flex';\n\nimport { styles } from './style';\n\nexport interface StoryBookProps extends FlexboxProps {\n  levaStore: any;\n  noPadding?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StoryBook = memo<StoryBookProps>(\n  ({ ref, levaStore, noPadding, className, children, ...rest }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        align={'stretch'}\n        className={cx(styles.editor, className)}\n        data-lobe-storybook=\"\"\n        flex={1}\n        height={'100%'}\n        horizontal={!mobile}\n        justify={'stretch'}\n        ref={ref}\n        width={'100%'}\n      >\n        <Center className={cx(noPadding ? styles.left : styles.leftWithPadding)} flex={1} {...rest}>\n          {children}\n        </Center>\n        <DraggablePanel\n          className={styles.right}\n          minWidth={280}\n          placement={mobile ? 'bottom' : 'right'}\n        >\n          <div className={styles.leva}>\n            <LevaPanel fill flat store={levaStore} titleBar={false} />{' '}\n          </div>\n        </DraggablePanel>\n      </Flexbox>\n    );\n  },\n);\n\nStoryBook.displayName = 'StoryBook';\n\nexport default StoryBook;\n\nexport { useControls, useCreateStore } from 'leva';\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,YAAY,MACtB,EAAE,KAAK,WAAW,WAAW,WAAW,UAAU,GAAG,WAAW;CAC/D,MAAM,EAAE,WAAW,cAAc;CAEjC,OACE,qBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,uBAAoB;EACpB,MAAM;EACN,QAAQ;EACR,YAAY,CAAC;EACb,SAAS;EACJ;EACL,OAAO;EATT,UAAA,CAWE,oBAAC,QAAD;GAAQ,WAAW,GAAG,YAAY,OAAO,OAAO,OAAO,eAAe;GAAG,MAAM;GAAG,GAAI;GACnF;EACK,CAAA,GACR,oBAAC,gBAAD;GACE,WAAW,OAAO;GAClB,UAAU;GACV,WAAW,SAAS,WAAW;GAE/B,UAAA,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACE,oBAAC,WAAD;KAAW,MAAA;KAAK,MAAA;KAAK,OAAO;KAAW,UAAU;IAAQ,CAAA,GAAE,GACxD;;EACS,CAAA,CACT;;AAEb,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../src/storybook/StoryBook/index.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useResponsive } from 'antd-style';\nimport { LevaPanel } from 'leva';\nimport { memo, type Ref } from 'react';\n\nimport { DraggablePanel } from '@/base-ui/DraggablePanel';\nimport { Center, Flexbox, type FlexboxProps } from '@/Flex';\n\nimport { styles } from './style';\n\nexport interface StoryBookProps extends FlexboxProps {\n  levaStore: any;\n  noPadding?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StoryBook = memo<StoryBookProps>(\n  ({ ref, levaStore, noPadding, className, children, ...rest }) => {\n    const { mobile } = useResponsive();\n\n    return (\n      <Flexbox\n        align={'stretch'}\n        className={cx(styles.editor, className)}\n        data-lobe-storybook=\"\"\n        flex={1}\n        height={'100%'}\n        horizontal={!mobile}\n        justify={'stretch'}\n        ref={ref}\n        width={'100%'}\n      >\n        <Center className={cx(noPadding ? styles.left : styles.leftWithPadding)} flex={1} {...rest}>\n          {children}\n        </Center>\n        <DraggablePanel\n          className={styles.right}\n          minWidth={280}\n          placement={mobile ? 'bottom' : 'right'}\n        >\n          <div className={styles.leva}>\n            <LevaPanel fill flat store={levaStore} titleBar={false} />{' '}\n          </div>\n        </DraggablePanel>\n      </Flexbox>\n    );\n  },\n);\n\nStoryBook.displayName = 'StoryBook';\n\nexport default StoryBook;\n\nexport { useControls, useCreateStore } from 'leva';\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,YAAY,MACtB,EAAE,KAAK,WAAW,WAAW,WAAW,UAAU,GAAG,WAAW;CAC/D,MAAM,EAAE,WAAW,cAAc;CAEjC,OACE,qBAACA,mBAAD;EACE,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,uBAAoB;EACpB,MAAM;EACN,QAAQ;EACR,YAAY,CAAC;EACb,SAAS;EACJ;EACL,OAAO;EATT,UAAA,CAWE,oBAAC,QAAD;GAAQ,WAAW,GAAG,YAAY,OAAO,OAAO,OAAO,eAAe;GAAG,MAAM;GAAG,GAAI;GACnF;EACK,CAAA,GACR,oBAAC,gBAAD;GACE,WAAW,OAAO;GAClB,UAAU;GACV,WAAW,SAAS,WAAW;GAE/B,UAAA,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA,CACE,oBAAC,WAAD;KAAW,MAAA;KAAK,MAAA;KAAK,OAAO;KAAW,UAAU;IAAQ,CAAA,GAAE,GACxD;;EACS,CAAA,CACT;;AAEb,CACF;AAEA,UAAU,cAAc"}

package/package.json

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