@lobehub/ui 5.53.0 → 5.55.0

package/es/Image/index.d.mts

@@ -1,5 +1,6 @@
 import { ImagePreviewOptions, ImageProps, PreviewGroupProps } from "./type.mjs";
 import PreviewGroup from "./PreviewGroup.mjs";
+import { UseImagePreviewResult, useImagePreview } from "./useImagePreview.mjs";
 import { ReactNode } from "react";
 //#region src/Image/index.d.ts
 interface IImage {
@@ -8,5 +9,5 @@ interface IImage {
 }
 declare const Image: IImage;
 //#endregion
-export { IImage, type ImagePreviewOptions, type ImageProps, PreviewGroup, type PreviewGroupProps, Image as default };
+export { IImage, type ImagePreviewOptions, type ImageProps, PreviewGroup, type PreviewGroupProps, type UseImagePreviewResult, Image as default, useImagePreview };
 //# sourceMappingURL=index.d.mts.map

package/es/Image/index.mjs

@@ -1,9 +1,10 @@
 import PreviewGroup from "./PreviewGroup.mjs";
 import Image$1 from "./Image.mjs";
+import { useImagePreview } from "./useImagePreview.mjs";
 //#region src/Image/index.ts
 const Image = Image$1;
 Image.PreviewGroup = PreviewGroup;
 //#endregion
-export { PreviewGroup, Image as default };
+export { PreviewGroup, Image as default, useImagePreview };
 
 //# sourceMappingURL=index.mjs.map

package/es/Image/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["ImageParent"],"sources":["../../src/Image/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport ImageParent from './Image';\nimport PreviewGroup from './PreviewGroup';\nimport type { ImageProps } from './type';\n\nexport interface IImage {\n  (props: ImageProps): ReactNode;\n  PreviewGroup: typeof PreviewGroup;\n}\n\nconst Image = ImageParent as unknown as IImage;\nImage.PreviewGroup = PreviewGroup;\n\nexport default Image;\nexport { default as PreviewGroup } from './PreviewGroup';\nexport type * from './type';\n"],"mappings":";;;AAWA,MAAM,QAAQA;AACd,MAAM,eAAe"}
+{"version":3,"file":"index.mjs","names":["ImageParent"],"sources":["../../src/Image/index.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport ImageParent from './Image';\nimport PreviewGroup from './PreviewGroup';\nimport type { ImageProps } from './type';\n\nexport interface IImage {\n  (props: ImageProps): ReactNode;\n  PreviewGroup: typeof PreviewGroup;\n}\n\nconst Image = ImageParent as unknown as IImage;\nImage.PreviewGroup = PreviewGroup;\n\nexport default Image;\nexport { default as PreviewGroup } from './PreviewGroup';\nexport type * from './type';\nexport { useImagePreview, type UseImagePreviewResult } from './useImagePreview';\n"],"mappings":";;;;AAWA,MAAM,QAAQA;AACd,MAAM,eAAe"}

package/es/Image/useImagePreview.d.mts

@@ -0,0 +1,11 @@
+import { ImagePreviewOptions } from "./type.mjs";
+import { ReactNode, RefObject } from "react";
+//#region src/Image/useImagePreview.d.ts
+interface UseImagePreviewResult {
+  open: () => void;
+  outlet: ReactNode;
+}
+declare const useImagePreview: (elementRef: RefObject<HTMLImageElement | null>, options?: ImagePreviewOptions) => UseImagePreviewResult;
+//#endregion
+export { UseImagePreviewResult, useImagePreview };
+//# sourceMappingURL=useImagePreview.d.mts.map

package/es/Image/useImagePreview.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { openPreview } from "./viewer/registry.mjs";
+import PreviewOutlet from "./viewer/PreviewOutlet.mjs";
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Image/useImagePreview.tsx
+const useImagePreview = (elementRef, options) => {
+	const resolvedOptions = useMemo(() => ({
+		autoZoomThreshold: 2,
+		defaultZoom: "auto",
+		maxScale: 8,
+		...options
+	}), [options]);
+	return {
+		open: useCallback(() => {
+			const element = elementRef.current;
+			if (!element) return;
+			const active = document.activeElement;
+			openPreview({
+				element,
+				options: resolvedOptions,
+				previewSrc: resolvedOptions.src,
+				src: element.currentSrc || element.src
+			}, void 0, 0, active instanceof HTMLElement && active !== document.body ? active : null);
+		}, [elementRef, resolvedOptions]),
+		outlet: /* @__PURE__ */ jsx(PreviewOutlet, { elementRef })
+	};
+};
+//#endregion
+export { useImagePreview };
+
+//# sourceMappingURL=useImagePreview.mjs.map

package/es/Image/useImagePreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePreview.mjs","names":[],"sources":["../../src/Image/useImagePreview.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, type RefObject, useCallback, useMemo } from 'react';\n\nimport type { ImagePreviewOptions } from './type';\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from './viewer/geometry';\nimport PreviewOutlet from './viewer/PreviewOutlet';\nimport { openPreview, type ResolvedPreviewOptions } from './viewer/registry';\n\nexport interface UseImagePreviewResult {\n  open: () => void;\n  outlet: ReactNode;\n}\n\nexport const useImagePreview = (\n  elementRef: RefObject<HTMLImageElement | null>,\n  options?: ImagePreviewOptions,\n): UseImagePreviewResult => {\n  const resolvedOptions = useMemo<ResolvedPreviewOptions>(\n    () => ({\n      autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\n      defaultZoom: 'auto',\n      maxScale: DEFAULT_MAX_SCALE,\n      ...options,\n    }),\n    [options],\n  );\n\n  const open = useCallback(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    const active = document.activeElement;\n    openPreview(\n      {\n        element,\n        options: resolvedOptions,\n        previewSrc: resolvedOptions.src,\n        src: element.currentSrc || element.src,\n      },\n      undefined,\n      0,\n      active instanceof HTMLElement && active !== document.body ? active : null,\n    );\n  }, [elementRef, resolvedOptions]);\n\n  return { open, outlet: <PreviewOutlet elementRef={elementRef} /> };\n};\n"],"mappings":";;;;;;AAcA,MAAa,mBACX,YACA,YAC0B;CAC1B,MAAM,kBAAkB,eACf;EACL,mBAAA;EACA,aAAa;EACb,UAAA;EACA,GAAG;CACL,IACA,CAAC,OAAO,CACV;CAmBA,OAAO;EAAE,MAjBI,kBAAkB;GAC7B,MAAM,UAAU,WAAW;GAC3B,IAAI,CAAC,SAAS;GACd,MAAM,SAAS,SAAS;GACxB,YACE;IACE;IACA,SAAS;IACT,YAAY,gBAAgB;IAC5B,KAAK,QAAQ,cAAc,QAAQ;GACrC,GACA,KAAA,GACA,GACA,kBAAkB,eAAe,WAAW,SAAS,OAAO,SAAS,IACvE;EACF,GAAG,CAAC,YAAY,eAAe,CAEnB;EAAG,QAAQ,oBAAC,eAAD,EAA2B,WAAa,CAAA;CAAE;AACnE"}

package/es/Image/viewer/registry.d.mts

@@ -1,2 +1,2 @@
 import "../type.mjs";
-import "react";
+import { RefObject } from "react";

package/es/awesome/BottomGradientButton/BottomGradientButton.d.mts

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

package/es/awesome/BottomGradientButton/BottomGradientButton.mjs

@@ -1,5 +1,5 @@
 "use client";
-import Button from "../../Button/Button.mjs";
+import Button from "../../base-ui/Button/Button.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -10,7 +10,7 @@ const BottomGradientButton = memo(({ className, children, style, ref, ...rest })
 		className: cx(styles, className),
 		ref,
 		shape: "round",
-		variant: "filled",
+		type: "fill",
 		style: {
 			paddingInline: 16,
 			width: "unset",

package/es/awesome/BottomGradientButton/BottomGradientButton.mjs.map

@@ -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        variant={'filled'}\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,SAAS;EACT,OAAO;GACL,eAAe;GACf,OAAO;GACP,GAAG;EACL;EACA,GAAI;EAEH;CACK,CAAA;AAEZ,CACF;AAEA,qBAAqB,cAAc"}
+{"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"}

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

@@ -1,3 +1,3 @@
-import BottomGradientButton from "./BottomGradientButton.mjs";
 import { BottomGradientButtonProps } from "./type.mjs";
+import BottomGradientButton from "./BottomGradientButton.mjs";
 export { type BottomGradientButtonProps, BottomGradientButton as default };

package/es/awesome/BottomGradientButton/style.mjs

@@ -4,7 +4,6 @@ import { createStaticStyles, cx } from "antd-style";
 const styles = createStaticStyles(({ css, cssVar }) => cx(staticStylish.resetLinkColor, css`
       overflow: hidden;
       font-weight: bold;
-      color: ${cssVar.colorTextSecondary};
       transition: all 0.2s ease-in-out;
 
       &::before {
@@ -24,6 +23,10 @@ const styles = createStaticStyles(({ css, cssVar }) => cx(staticStylish.resetLin
         transition: all 0.2s ease-in-out;
       }
 
+      &&:not(:hover) {
+        color: ${cssVar.colorTextSecondary};
+      }
+
       &:hover {
         &::before {
           opacity: 1;

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

@@ -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      color: ${cssVar.colorTextSecondary};\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      &: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;;;eAGQ,OAAO,mBAAmB;;;;;;;;;;;;;;;mEAe0B,OAAO,KAAK;;;;;;;;;;KAW7E,CACF"}
+{"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"}

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

@@ -1,5 +1,5 @@
-import { ButtonProps } from "../../Button/type.mjs";
-import "../../Button/index.mjs";
+import { ButtonProps } from "../../base-ui/Button/type.mjs";
+import "../../base-ui/Button/index.mjs";
 //#region src/awesome/BottomGradientButton/type.d.ts
 type BottomGradientButtonProps = ButtonProps;
 //#endregion

package/es/awesome/GradientButton/GradientButton.mjs

@@ -1,5 +1,5 @@
 "use client";
-import Button from "../../Button/Button.mjs";
+import Button from "../../base-ui/Button/Button.mjs";
 import { styles } from "./style.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -24,7 +24,7 @@ const GradientButton = memo(({ glow = true, children, className, size, disabled,
 	return /* @__PURE__ */ jsxs(Button, {
 		disabled,
 		size,
-		variant: disabled ? void 0 : "text",
+		type: disabled ? void 0 : "text",
 		className: cx(!disabled && (isDarkMode ? styles.buttonDark : styles.buttonLight), className),
 		style: {
 			...cssVariables,

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

@@ -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        variant={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,SAAS,WAAW,KAAA,IAAY;EAChC,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"}
+{"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"}

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

@@ -1,5 +1,5 @@
-import { ButtonProps } from "../../Button/type.mjs";
-import "../../Button/index.mjs";
+import { ButtonProps } from "../../base-ui/Button/type.mjs";
+import "../../base-ui/Button/index.mjs";
 //#region src/awesome/GradientButton/type.d.ts
 interface GradientButtonProps extends ButtonProps {
   glow?: boolean;

package/es/awesome/Hero/Hero.mjs

@@ -2,7 +2,8 @@
 import A from "../../A/index.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Center from "../../Flex/Center.mjs";
-import Button$1 from "../../Button/Button.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import Button from "../../base-ui/Button/Button.mjs";
 import AuroraBackground from "../AuroraBackground/AuroraBackground.mjs";
 import GradientButton from "../GradientButton/GradientButton.mjs";
 import GithubIcon from "../../icons/lucideExtra/GithubIcon.mjs";
@@ -10,7 +11,6 @@ import { styles } from "./style.mjs";
 import { memo, useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useResponsive } from "antd-style";
-import { ConfigProvider } from "antd";
 //#region src/awesome/Hero/Hero.tsx
 const Hero = memo(({ title, description, actions, Link }) => {
 	const { mobile } = useResponsive();
@@ -23,12 +23,18 @@ const Hero = memo(({ title, description, actions, Link }) => {
 		children: actions.map(({ text, link, openExternal, github, type }, index) => {
 			const content = type === "primary" ? /* @__PURE__ */ jsx(GradientButton, {
 				block: mobile,
-				icon: github ? GithubIcon : void 0,
+				icon: github ? /* @__PURE__ */ jsx(Icon, {
+					icon: GithubIcon,
+					size: 18
+				}) : void 0,
 				size: "large",
 				children: text
-			}, index) : /* @__PURE__ */ jsx(Button$1, {
+			}, index) : /* @__PURE__ */ jsx(Button, {
 				block: mobile,
-				icon: github ? GithubIcon : void 0,
+				icon: github ? /* @__PURE__ */ jsx(Icon, {
+					icon: GithubIcon,
+					size: 18
+				}) : void 0,
 				size: "large",
 				type: "primary",
 				children: text
@@ -43,31 +49,31 @@ const Hero = memo(({ title, description, actions, Link }) => {
 			}, text);
 		})
 	}), [actions]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AuroraBackground, {}), /* @__PURE__ */ jsx(ConfigProvider, {
-		theme: { token: { fontSize: 16 } },
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AuroraBackground, {}), /* @__PURE__ */ jsx(FlexBasic_default, {
+		align: "center",
+		style: {
+			fontSize: 16,
+			zIndex: 1
+		},
 		children: /* @__PURE__ */ jsx(FlexBasic_default, {
-			align: "center",
-			style: { zIndex: 1 },
-			children: /* @__PURE__ */ jsx(FlexBasic_default, {
-				horizontal: true,
-				className: styles.container,
-				distribution: "center",
-				children: /* @__PURE__ */ jsxs(Center, { children: [
-					title && /* @__PURE__ */ jsx(Center, {
-						horizontal: true,
-						as: "h1",
-						className: styles.title,
-						dangerouslySetInnerHTML: { __html: title },
-						gap: "0.25em",
-						wrap: "wrap"
-					}),
-					description && /* @__PURE__ */ jsx("p", {
-						className: styles.desc,
-						dangerouslySetInnerHTML: { __html: description }
-					}),
-					/* @__PURE__ */ jsx(ButtonGroups, {})
-				] })
-			})
+			horizontal: true,
+			className: styles.container,
+			distribution: "center",
+			children: /* @__PURE__ */ jsxs(Center, { children: [
+				title && /* @__PURE__ */ jsx(Center, {
+					horizontal: true,
+					as: "h1",
+					className: styles.title,
+					dangerouslySetInnerHTML: { __html: title },
+					gap: "0.25em",
+					wrap: "wrap"
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: styles.desc,
+					dangerouslySetInnerHTML: { __html: description }
+				}),
+				/* @__PURE__ */ jsx(ButtonGroups, {})
+			] })
 		})
 	})] });
 });

package/es/awesome/Hero/Hero.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.mjs","names":["Flexbox","Button"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport { GithubIcon } from '@lobehub/ui/icons';\nimport { ConfigProvider } from 'antd';\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 '@/Button';\nimport { Center, Flexbox } from '@/Flex';\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 ? GithubIcon : undefined}\n                  key={index}\n                  size=\"large\"\n                >\n                  {text}\n                </GradientButton>\n              ) : (\n                <Button\n                  block={mobile}\n                  icon={github ? GithubIcon : 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      <ConfigProvider theme={{ token: { fontSize: 16 } }}>\n        <Flexbox align={'center'} style={{ 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      </ConfigProvider>\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,aAAa,KAAA;IAE5B,MAAK;IAEJ,UAAA;GACa,GAJT,KAIS,IAEhB,oBAACC,UAAD;IACE,OAAO;IACP,MAAM,SAAS,aAAa,KAAA;IAE5B,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,oBAAC,gBAAD;EAAgB,OAAO,EAAE,OAAO,EAAE,UAAU,GAAG,EAAE;EAC/C,UAAA,oBAACD,mBAAD;GAAS,OAAO;GAAU,OAAO,EAAE,QAAQ,EAAE;GAC3C,UAAA,oBAACA,mBAAD;IAAS,YAAA;IAAW,WAAW,OAAO;IAAW,cAAc;IAC7D,UAAA,qBAAC,QAAD,EAAA,UAAA;KACG,SACC,oBAAC,QAAD;MACE,YAAA;MACA,IAAI;MACJ,WAAW,OAAO;MAClB,yBAAyB,EAAE,QAAQ,MAAM;MACzC,KAAK;MACL,MAAM;KACP,CAAA;KAEF,eACC,oBAAC,KAAD;MAAG,WAAW,OAAO;MAAM,yBAAyB,EAAE,QAAQ,YAAY;KAAI,CAAA;KAEhF,oBAAC,cAAD,CAAe,CAAA;IACT,EAAA,CAAA;GACD,CAAA;EACF,CAAA;CACK,CAAA,CAChB,EAAA,CAAA;AAEN,CAAC;AAED,KAAK,cAAc"}
+{"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"}

package/es/awesome/Hero/style.mjs

@@ -6,7 +6,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     margin-block-start: 24px;
 
     button {
+      height: 45px;
       padding-inline: 32px !important;
+      border-radius: ${cssVar.borderRadiusLG};
+
+      font-size: 18px;
       font-weight: 500;
     }
 

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

@@ -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;;;;;;;;MAQR,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"}
+{"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

@@ -10,8 +10,8 @@ import { BentoCardProps, BentoGridProps } from "./BentoGrid/type.mjs";
 import BentoCard from "./BentoGrid/BentoCard.mjs";
 import BentoGrid from "./BentoGrid/BentoGrid.mjs";
 import "./BentoGrid/index.mjs";
-import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
 import { BottomGradientButtonProps } from "./BottomGradientButton/type.mjs";
+import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
 import "./BottomGradientButton/index.mjs";
 import { CodeShowcaseItem, CodeShowcaseProps } from "./CodeShowcase/type.mjs";
 import CodeShowcase from "./CodeShowcase/CodeShowcase.mjs";

package/es/awesome/landingActions.mjs

@@ -94,7 +94,7 @@ const LandingActions = ({ actions, className, onNavigate, renderLink, size = "la
 			return /* @__PURE__ */ jsx(BottomGradientButton, {
 				href,
 				icon: iconNode,
-				iconPlacement,
+				iconPosition: iconPlacement,
 				rel: isExternal ? "noreferrer" : void 0,
 				size: size === "small" ? "middle" : "large",
 				target: isExternal ? "_blank" : void 0,

package/es/awesome/landingActions.mjs.map

@@ -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            iconPlacement={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;IACS;IAEf,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"}
+{"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"}

package/es/base-ui/Input/style.mjs

@@ -90,6 +90,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     &::placeholder {
       color: ${cssVar.colorTextPlaceholder};
     }
+
+    /* the root shows focus via its border; outrank global :focus-visible rings */
+    &:focus-visible {
+      outline: none;
+    }
   `,
 	invalid: css`
     &:has([data-invalid], [aria-invalid='true']) {

package/es/base-ui/Input/style.mjs.map

@@ -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;;;CAGzC,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"}
+{"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

@@ -75,6 +75,11 @@ import "./ScrollArea/index.mjs";
 import { ToastAPI, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType } from "./Toast/type.mjs";
 import { ToastHost, ToastHostProps, toast, useToast } from "./Toast/imperative.mjs";
 import "./Toast/index.mjs";
+import { ButtonIconPosition, ButtonOutdent, ButtonProps, ButtonShape, ButtonSize, ButtonType } from "./Button/type.mjs";
+import Button from "./Button/Button.mjs";
+import _default, { SplitButtonMenuProps, SplitButtonProps } from "./Button/SplitButton.mjs";
+import { buttonPaddingInline, styles as styles$4 } from "./Button/style.mjs";
+import "./Button/index.mjs";
 import { AccordionClassNames, AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionItemType, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionStyles, AccordionTriggerProps, AccordionVariant } from "./Accordion/type.mjs";
 import Accordion from "./Accordion/Accordion.mjs";
 import { styles } from "./Accordion/style.mjs";
@@ -100,11 +105,6 @@ import "./List/index.mjs";
 import { BurgerProps } from "./Burger/type.mjs";
 import Burger from "./Burger/Burger.mjs";
 import "./Burger/index.mjs";
-import { ButtonIconPosition, ButtonOutdent, ButtonProps, ButtonShape, ButtonSize, ButtonType } from "./Button/type.mjs";
-import Button from "./Button/Button.mjs";
-import _default, { SplitButtonMenuProps, SplitButtonProps } from "./Button/SplitButton.mjs";
-import { buttonPaddingInline, styles as styles$4 } from "./Button/style.mjs";
-import "./Button/index.mjs";
 import { CarouselProps, CarouselRef } from "./Carousel/type.mjs";
 import Carousel from "./Carousel/Carousel.mjs";
 import "./Carousel/index.mjs";

package/es/chat/BackBottom/BackBottom.mjs

@@ -1,5 +1,6 @@
 "use client";
-import Button from "../../Button/Button.mjs";
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import Button from "../../base-ui/Button/Button.mjs";
 import { styles } from "./style.mjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -30,14 +31,13 @@ const BackBottom = memo(({ visibilityHeight = 240, target, onClick, style, class
 		onClick?.(e);
 	};
 	return /* @__PURE__ */ jsx(Button, {
-		glass: true,
-		className: cx(visible ? styles.visible : styles.hidden, className),
+		className: cx(staticStylish.blur, visible ? styles.visible : styles.hidden, className),
 		icon: ListEnd,
 		ref,
 		shape: "round",
 		size: "small",
 		style,
-		variant: "filled",
+		type: "fill",
 		onClick: scrollToBottom,
 		children: text || "Back to bottom"
 	});

package/es/chat/BackBottom/BackBottom.mjs.map

@@ -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<HTMLDivElement> = (e) => {\n      (target as any)?.current?.scrollTo({ behavior: 'smooth', left: 0, top: scrollHeight });\n      onClick?.(e);\n    };\n\n    return (\n      <Button\n        glass\n        className={cx(visible ? styles.visible : styles.hidden, className)}\n        icon={ListEnd}\n        ref={ref}\n        shape={'round'}\n        size={'small'}\n        style={style}\n        variant={'filled'}\n        onClick={scrollToBottom}\n      >\n        {text || 'Back to bottom'}\n      </Button>\n    );\n  },\n);\n\nBackBottom.displayName = 'BackBottom';\n\nexport default BackBottom;\n"],"mappings":";;;;;;;;;AAYA,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,kBAAqD,MAAM;EAC/D,QAAiB,SAAS,SAAS;GAAE,UAAU;GAAU,MAAM;GAAG,KAAK;EAAa,CAAC;EACrF,UAAU,CAAC;CACb;CAEA,OACE,oBAAC,QAAD;EACE,OAAA;EACA,WAAW,GAAG,UAAU,OAAO,UAAU,OAAO,QAAQ,SAAS;EACjE,MAAM;EACD;EACL,OAAO;EACP,MAAM;EACC;EACP,SAAS;EACT,SAAS;EAER,UAAA,QAAQ;CACH,CAAA;AAEZ,CACF;AAEA,WAAW,cAAc"}
+{"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"}

package/es/chat/BackBottom/type.d.mts

@@ -1,14 +1,13 @@
-import { CSSProperties } from "react";
-import { BackTopProps } from "antd";
+import { CSSProperties, MouseEventHandler } from "react";
 import { Target } from "ahooks/lib/useScroll/index.js";
 //#region src/chat/BackBottom/type.d.ts
 interface BackBottomProps {
   className?: string;
-  onClick?: BackTopProps['onClick'];
+  onClick?: MouseEventHandler<HTMLElement>;
   style?: CSSProperties;
   target: Target;
   text?: string;
-  visibilityHeight?: BackTopProps['visibilityHeight'];
+  visibilityHeight?: number;
 }
 //#endregion
 export { BackBottomProps };