@lobehub/ui 5.64.2 → 6.0.0-beta.10

package/es/Avatar/style.mjs

@@ -1,71 +1,50 @@
-import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
-import { createStaticStyles } from "antd-style";
-import { cva } from "class-variance-authority";
 //#region src/Avatar/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => {
-	return {
-		borderless: staticStylish.variantBorderlessWithoutHover,
-		filled: staticStylish.variantFilledWithoutHover,
-		loading: css`
-      position: absolute;
-      color: #fff;
-      background: ${cssVar.colorBgMask};
-    `,
-		outlined: staticStylish.variantOutlinedWithoutHover,
-		root: css`
-      flex: none;
-      background: transparent;
-
-      &[class*='ant-avatar'] {
-        user-select: none;
-
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        border: none;
-
-        [class*='ant-avatar-string'] {
-          transform: none !important;
-
-          overflow: hidden;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          width: 100%;
-          height: 100%;
-          padding: 0;
-
-          font-size: inherit;
-          font-weight: bolder;
-          line-height: 1;
-          color: inherit;
-        }
-      }
-    `,
-		shadow: staticStylish.shadow
-	};
-});
-const variants = cva(styles.root, {
-	defaultVariants: {
-		shadow: false,
-		variant: "borderless"
+const styles = {
+	content: {
+		kmVPX3: "lb1717udv",
+		kVQacm: "lbb3r6kr",
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lb1heor9g",
+		k1xSpc: "lb78zum5",
+		kGuDYH: "lb1qlqyl8",
+		k63SB2: "lbjs9k72",
+		kjj79g: "lbl56j7k",
+		kLWn49: "lbo5v014",
+		kZKoxP: "lb5yr21d",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	img: {
+		kUk6DE: "lb1okw0bk",
+		kVIFPx: "lbl1xv1r",
+		kZKoxP: "lb5yr21d",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	loading: {
+		kpwlN0: "lb10a8y8t",
+		kWkggS: "lb1a3x57l",
+		kMwMTN: "lbfungia",
+		kVAEAm: "lb10l6tqk",
+		$$css: true
+	},
+	root: {
+		kUk6DE: "lb1okw0bk",
+		kVQacm: "lbb3r6kr",
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w",
+		k1xSpc: "lb78zum5",
+		kjj79g: "lbl56j7k",
+		kVAEAm: "lb1n2onr6",
+		kfSwDN: "lb87ps6o",
+		$$css: true
 	},
-	variants: {
-		variant: {
-			filled: styles.filled,
-			outlined: styles.outlined,
-			borderless: styles.borderless
-		},
-		shadow: {
-			false: null,
-			true: styles.shadow
-		}
+	shadow: {
+		kGVxlE: "lbpjwdtl",
+		$$css: true
 	}
-});
+};
 //#endregion
-export { styles, variants };
+export { styles };
 
 //# sourceMappingURL=style.mjs.map

package/es/Avatar/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Avatar/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n    filled: lobeStaticStylish.variantFilledWithoutHover,\n    loading: css`\n      position: absolute;\n      color: #fff;\n      background: ${cssVar.colorBgMask};\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      flex: none;\n      background: transparent;\n\n      &[class*='ant-avatar'] {\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        border: none;\n\n        [class*='ant-avatar-string'] {\n          transform: none !important;\n\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n\n          width: 100%;\n          height: 100%;\n          padding: 0;\n\n          font-size: inherit;\n          font-weight: bolder;\n          line-height: 1;\n          color: inherit;\n        }\n      }\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n    variant: 'borderless',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,YAAYA,cAAkB;EAC9B,QAAQA,cAAkB;EAC1B,SAAS,GAAG;;;oBAGI,OAAO,YAAY;;EAEnC,UAAUA,cAAkB;EAC5B,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCT,QAAQA,cAAkB;CAC5B;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,QAAQ;EACR,SAAS;CACX;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Avatar/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nexport const styles = stylex.create({\n  content: {\n    padding: 0,\n    overflow: 'hidden',\n    alignItems: 'center',\n    color: 'inherit',\n    display: 'flex',\n    fontSize: 'inherit',\n    fontWeight: 'bolder',\n    justifyContent: 'center',\n    lineHeight: 1,\n    height: '100%',\n    width: '100%',\n  },\n  img: {\n    flex: 'none',\n    objectFit: 'cover',\n    height: '100%',\n    width: '100%',\n  },\n  loading: {\n    inset: 0,\n    backgroundColor: cssVar.colorBgMask,\n    color: '#fff',\n    position: 'absolute',\n  },\n  root: {\n    flex: 'none',\n    overflow: 'hidden',\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    display: 'flex',\n    justifyContent: 'center',\n    position: 'relative',\n    userSelect: 'none',\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n"],"mappings":";AAGA,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Avatar/type.d.mts

@@ -1,32 +1,111 @@
 import { FlexboxProps } from "../Flex/type.mjs";
 import "../Flex/index.mjs";
-import { TooltipProps } from "../base-ui/Tooltip/type.mjs";
-import "../Tooltip/index.mjs";
-import { CSSProperties, ReactNode, Ref } from "react";
-import { AvatarProps } from "antd";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
 //#region src/Avatar/type.d.ts
-interface AvatarProps$1 extends AvatarProps {
+export interface AvatarClassNames {
+  content?: string;
+  img?: string;
+  loading?: string;
+  root?: string;
+}
+export interface AvatarStyles {
+  content?: CSSProperties;
+  img?: CSSProperties;
+  loading?: CSSProperties;
+  root?: CSSProperties;
+}
+export interface AvatarProps extends ComponentProps<'div'> {
+  /**
+   * Alias for the native `alt` attribute of the rendered image
+   */
+  alt?: string;
+  /**
+   * Play the animated emoji variant instead of the static one
+   */
   animation?: boolean;
+  /**
+   * Avatar content: an image URL, an emoji, or a custom React node
+   */
   avatar?: string | ReactNode;
+  /**
+   * Background color, ignored when the avatar is an image or a custom node
+   */
   background?: string;
+  /**
+   * Show the outer ring
+   */
   bordered?: boolean;
+  /**
+   * Custom color for the outer ring
+   */
   borderedColor?: string;
+  /**
+   * Custom class names for each part
+   */
+  classNames?: AvatarClassNames;
+  /**
+   * Native `crossOrigin` attribute forwarded to the rendered image
+   */
+  crossOrigin?: '' | 'anonymous' | 'use-credentials';
+  /**
+   * Native `draggable` attribute of the rendered image
+   * @default false
+   */
+  draggable?: boolean;
+  /**
+   * Scale the emoji down when a background color is present
+   * @default true
+   */
   emojiScaleWithBackground?: boolean;
+  /**
+   * Show the full-size loading overlay
+   */
   loading?: boolean;
   ref?: Ref<HTMLDivElement>;
+  /**
+   * Apply the lobe shadow style
+   */
   shadow?: boolean;
+  /**
+   * @default 'square'
+   */
   shape?: 'circle' | 'square';
+  /**
+   * Width and height in pixels
+   * @default 48
+   */
   size?: number;
+  /**
+   * Slice fallback text to its first two characters
+   * @default true
+   */
   sliceText?: boolean;
+  /**
+   * Custom styles for each part
+   */
+  styles?: AvatarStyles;
+  /**
+   * Fallback text when no avatar content resolves; also used as the default image alt text
+   */
   title?: string;
-  tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
+  /**
+   * Reserved for tooltip integration; not rendered yet
+   */
+  tooltipProps?: Record<string, unknown>;
+  /**
+   * Accepted for compatibility with next/image-based avatars; has no effect on the native img
+   */
   unoptimized?: boolean;
+  /**
+   * Visual variant
+   * @default 'borderless'
+   */
   variant?: 'borderless' | 'filled' | 'outlined';
 }
-interface AvatarGroupItemType extends Pick<AvatarProps$1, 'avatar' | 'title' | 'alt' | 'onClick' | 'style' | 'className' | 'loading'> {
+export interface AvatarGroupItemType extends Pick<AvatarProps, 'avatar' | 'title' | 'alt' | 'onClick' | 'style' | 'className' | 'loading'> {
   key: string;
 }
-interface AvatarGroupProps extends Pick<AvatarProps$1, 'variant' | 'bordered' | 'shadow' | 'size' | 'background' | 'animation' | 'draggable' | 'shape'>, Omit<FlexboxProps, 'children' | 'onClick'> {
+export interface AvatarGroupProps extends Pick<AvatarProps, 'variant' | 'bordered' | 'shadow' | 'size' | 'background' | 'animation' | 'draggable' | 'shape'>, Omit<FlexboxProps, 'children' | 'draggable' | 'onClick' | 'ref'> {
   classNames?: {
     avatar?: string;
     count?: string;
@@ -45,5 +124,4 @@ interface AvatarGroupProps extends Pick<AvatarProps$1, 'variant' | 'bordered' |
   zIndexReverse?: boolean;
 }
 //#endregion
-export { AvatarGroupItemType, AvatarGroupProps, AvatarProps$1 as AvatarProps };
 //# sourceMappingURL=type.d.mts.map

package/es/Avatar/utils.mjs

@@ -1,9 +1,5 @@
 import { isValidElement } from "react";
 //#region src/Avatar/utils.ts
-/**
-* 判断 avatar 是否是默认的 Ant Design Avatar 类型
-* (URL 路径或 React 元素)
-*/
 const isDefaultAntAvatar = (avatar) => {
 	if (!avatar) return false;
 	const isUrlOrDataUri = typeof avatar === "string" && [
@@ -13,23 +9,14 @@ const isDefaultAntAvatar = (avatar) => {
 	].some((prefix) => avatar.startsWith(prefix));
 	return Boolean(isUrlOrDataUri || isValidElement(avatar));
 };
-/**
-* 判断是否有有效的背景色
-*/
 const hasValidBackground = (background) => {
 	return Boolean(background && background !== "transparent" && background !== "rgba(0,0,0,0)" && background !== null);
 };
-/**
-* 格式化头像文本（转大写并可选切片）
-*/
 const formatAvatarText = (text, sliceText) => {
 	if (!text) return "";
 	const upperText = text.toUpperCase();
 	return sliceText ? upperText.slice(0, 2) : upperText;
 };
-/**
-* 计算 emoji 大小
-*/
 const calculateEmojiSize = (size, hasBackground, emojiScaleWithBackground) => {
 	if (emojiScaleWithBackground) return hasBackground ? size * .85 : size;
 	return size * .85;

package/es/Avatar/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Avatar/utils.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react';\n\n/**\n * 判断 avatar 是否是默认的 Ant Design Avatar 类型\n * (URL 路径或 React 元素)\n */\nexport const isDefaultAntAvatar = (avatar: ReactNode): boolean => {\n  if (!avatar) return false;\n\n  const isStringAvatar = typeof avatar === 'string';\n  const isUrlOrDataUri =\n    isStringAvatar && ['/', 'http', 'data:'].some((prefix) => avatar.startsWith(prefix));\n\n  return Boolean(isUrlOrDataUri || isValidElement(avatar));\n};\n\n/**\n * 判断是否有有效的背景色\n */\nexport const hasValidBackground = (background?: string | null): boolean => {\n  return Boolean(\n    background &&\n    background !== 'transparent' &&\n    background !== 'rgba(0,0,0,0)' &&\n    background !== null,\n  );\n};\n\n/**\n * 格式化头像文本（转大写并可选切片）\n */\nexport const formatAvatarText = (text: string | undefined, sliceText: boolean): string => {\n  if (!text) return '';\n\n  const upperText = text.toUpperCase();\n  return sliceText ? upperText.slice(0, 2) : upperText;\n};\n\n/**\n * 计算 emoji 大小\n */\nexport const calculateEmojiSize = (\n  size: number,\n  hasBackground: boolean,\n  emojiScaleWithBackground: boolean,\n): number => {\n  if (emojiScaleWithBackground) {\n    return hasBackground ? size * 0.85 : size;\n  }\n  return size * 0.85;\n};\n"],"mappings":";;;;;;AAMA,MAAa,sBAAsB,WAA+B;CAChE,IAAI,CAAC,QAAQ,OAAO;CAGpB,MAAM,iBADiB,OAAO,WAAW,YAErB;EAAC;EAAK;EAAQ;CAAO,CAAC,CAAC,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;CAErF,OAAO,QAAQ,kBAAkB,eAAe,MAAM,CAAC;AACzD;;;;AAKA,MAAa,sBAAsB,eAAwC;CACzE,OAAO,QACL,cACA,eAAe,iBACf,eAAe,mBACf,eAAe,IACjB;AACF;;;;AAKA,MAAa,oBAAoB,MAA0B,cAA+B;CACxF,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,YAAY,KAAK,YAAY;CACnC,OAAO,YAAY,UAAU,MAAM,GAAG,CAAC,IAAI;AAC7C;;;;AAKA,MAAa,sBACX,MACA,eACA,6BACW;CACX,IAAI,0BACF,OAAO,gBAAgB,OAAO,MAAO;CAEvC,OAAO,OAAO;AAChB"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Avatar/utils.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react';\n\nexport const isDefaultAntAvatar = (avatar: ReactNode): boolean => {\n  if (!avatar) return false;\n\n  const isStringAvatar = typeof avatar === 'string';\n  const isUrlOrDataUri =\n    isStringAvatar && ['/', 'http', 'data:'].some((prefix) => avatar.startsWith(prefix));\n\n  return Boolean(isUrlOrDataUri || isValidElement(avatar));\n};\n\nexport const hasValidBackground = (background?: string | null): boolean => {\n  return Boolean(\n    background &&\n    background !== 'transparent' &&\n    background !== 'rgba(0,0,0,0)' &&\n    background !== null,\n  );\n};\n\nexport const formatAvatarText = (text: string | undefined, sliceText: boolean): string => {\n  if (!text) return '';\n\n  const upperText = text.toUpperCase();\n  return sliceText ? upperText.slice(0, 2) : upperText;\n};\n\nexport const calculateEmojiSize = (\n  size: number,\n  hasBackground: boolean,\n  emojiScaleWithBackground: boolean,\n): number => {\n  if (emojiScaleWithBackground) {\n    return hasBackground ? size * 0.85 : size;\n  }\n  return size * 0.85;\n};\n"],"mappings":";;AAEA,MAAa,sBAAsB,WAA+B;CAChE,IAAI,CAAC,QAAQ,OAAO;CAGpB,MAAM,iBADiB,OAAO,WAAW,YAErB;EAAC;EAAK;EAAQ;CAAO,CAAC,CAAC,MAAM,WAAW,OAAO,WAAW,MAAM,CAAC;CAErF,OAAO,QAAQ,kBAAkB,eAAe,MAAM,CAAC;AACzD;AAEA,MAAa,sBAAsB,eAAwC;CACzE,OAAO,QACL,cACA,eAAe,iBACf,eAAe,mBACf,eAAe,IACjB;AACF;AAEA,MAAa,oBAAoB,MAA0B,cAA+B;CACxF,IAAI,CAAC,MAAM,OAAO;CAElB,MAAM,YAAY,KAAK,YAAY;CACnC,OAAO,YAAY,UAAU,MAAM,GAAG,CAAC,IAAI;AAC7C;AAEA,MAAa,sBACX,MACA,eACA,6BACW;CACX,IAAI,0BACF,OAAO,gBAAgB,OAAO,MAAO;CAEvC,OAAO,OAAO;AAChB"}

package/es/Badge/Badge.d.mts

@@ -0,0 +1,6 @@
+import { BadgeProps } from "./type.mjs";
+//#region src/Badge/Badge.d.ts
+declare const Badge: import("react").NamedExoticComponent<BadgeProps>;
+//#endregion
+export { Badge as default };
+//# sourceMappingURL=Badge.d.mts.map

package/es/Badge/Badge.mjs

@@ -0,0 +1,80 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { statusColor, styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+//#region src/Badge/Badge.tsx
+const pillSizeStyles = {
+	default: null,
+	small: styles.pillSmall
+};
+const Badge = memo(({ children, className, color, count, dot = false, offset, overflowCount = 99, ref, showZero = false, size = "default", status, style, text, ...rest }) => {
+	if (children == null && (status !== void 0 || text !== void 0)) {
+		const dotColor = color ?? statusColor[status ?? "default"];
+		return /* @__PURE__ */ jsxs("span", {
+			ref,
+			...styleProps([styles.statusRoot], className, style),
+			...rest,
+			children: [/* @__PURE__ */ jsx("span", { ...styleProps([styles.statusDot, status === "processing" && styles.statusDotProcessing], void 0, {
+				background: dotColor,
+				color: dotColor
+			}) }), text && /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.statusText),
+				children: text
+			})]
+		});
+	}
+	let content = null;
+	let renderPill = dot;
+	if (!dot) {
+		if (typeof count === "number") {
+			if (count !== 0 || showZero) {
+				renderPill = true;
+				content = count > overflowCount ? `${overflowCount}+` : count;
+			}
+		} else if (count != null) {
+			renderPill = true;
+			content = count;
+		}
+	}
+	const pillStyle = {
+		background: color,
+		transform: offset ? `translate(${offset[0]}px, ${offset[1]}px)` : void 0
+	};
+	if (children == null) {
+		if (!renderPill) return null;
+		return /* @__PURE__ */ jsx("span", {
+			ref,
+			...styleProps([
+				styles.pill,
+				pillSizeStyles[size],
+				dot && styles.pillDot
+			], className, {
+				...pillStyle,
+				...style
+			}),
+			...rest,
+			children: !dot && content
+		});
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		...styleProps([styles.wrapper], className, style),
+		...rest,
+		children: [children, renderPill && /* @__PURE__ */ jsx("span", {
+			...styleProps([
+				styles.pill,
+				pillSizeStyles[size],
+				styles.pillAbsolute,
+				dot && styles.pillDot
+			], void 0, pillStyle),
+			children: !dot && content
+		})]
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+export { Badge as default };
+
+//# sourceMappingURL=Badge.mjs.map

package/es/Badge/Badge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.mjs","names":[],"sources":["../../src/Badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo, type ReactNode } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { statusColor, styles } from './style';\nimport type { BadgeProps } from './type';\n\nconst pillSizeStyles = { default: null, small: styles.pillSmall };\n\nconst Badge = memo<BadgeProps>(\n  ({\n    children,\n    className,\n    color,\n    count,\n    dot = false,\n    offset,\n    overflowCount = 99,\n    ref,\n    showZero = false,\n    size = 'default',\n    status,\n    style,\n    text,\n    ...rest\n  }) => {\n    const isStatusMode = children == null && (status !== undefined || text !== undefined);\n\n    if (isStatusMode) {\n      const dotColor = color ?? statusColor[status ?? 'default'];\n\n      return (\n        <span ref={ref} {...styleProps([styles.statusRoot], className, style)} {...rest}>\n          <span\n            {...styleProps(\n              [styles.statusDot, status === 'processing' && styles.statusDotProcessing],\n              undefined,\n              { background: dotColor, color: dotColor },\n            )}\n          />\n          {text && <span {...stylex.props(styles.statusText)}>{text}</span>}\n        </span>\n      );\n    }\n\n    let content: ReactNode = null;\n    let renderPill = dot;\n\n    if (!dot) {\n      if (typeof count === 'number') {\n        if (count !== 0 || showZero) {\n          renderPill = true;\n          content = count > overflowCount ? `${overflowCount}+` : count;\n        }\n      } else if (count != null) {\n        renderPill = true;\n        content = count;\n      }\n    }\n\n    const pillStyle = {\n      background: color,\n      transform: offset ? `translate(${offset[0]}px, ${offset[1]}px)` : undefined,\n    };\n\n    if (children == null) {\n      if (!renderPill) return null;\n\n      return (\n        <span\n          ref={ref}\n          {...styleProps([styles.pill, pillSizeStyles[size], dot && styles.pillDot], className, {\n            ...pillStyle,\n            ...style,\n          })}\n          {...rest}\n        >\n          {!dot && content}\n        </span>\n      );\n    }\n\n    return (\n      <span ref={ref} {...styleProps([styles.wrapper], className, style)} {...rest}>\n        {children}\n        {renderPill && (\n          <span\n            {...styleProps(\n              [styles.pill, pillSizeStyles[size], styles.pillAbsolute, dot && styles.pillDot],\n              undefined,\n              pillStyle,\n            )}\n          >\n            {!dot && content}\n          </span>\n        )}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";;;;;;;AAOA,MAAM,iBAAiB;CACrB,SAAS;CACT,OAAO,OAAO;AAChB;AACA,MAAM,QAAQ,MAAkB,EAC9B,UACA,WACA,OACA,OACA,MAAM,OACN,QACA,gBAAgB,IAChB,KACA,WAAW,OACX,OAAO,WACP,QACA,OACA,MACA,GAAG,WACC;CAEJ,IADqB,YAAY,SAAS,WAAW,KAAA,KAAa,SAAS,KAAA,IACzD;EAChB,MAAM,WAAW,SAAS,YAAY,UAAU;EAChD,OAAO,qBAAC,QAAD;GAAW;GAAK,GAAI,WAAW,CAAC,OAAO,UAAU,GAAG,WAAW,KAAK;GAAG,GAAI;GAA3E,UAAA,CACD,oBAAC,QAAD,EAAM,GAAI,WAAW,CAAC,OAAO,WAAW,WAAW,gBAAgB,OAAO,mBAAmB,GAAG,KAAA,GAAW;IAC7G,YAAY;IACZ,OAAO;GACT,CAAC,EAAI,CAAA,GACA,QAAQ,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,UAAU;IAAI,UAAA;GAAW,CAAA,CAC5D;;CACZ;CACA,IAAI,UAAqB;CACzB,IAAI,aAAa;CACjB,IAAI,CAAC,KAAK;EACR,IAAI,OAAO,UAAU,UACf;OAAA,UAAU,KAAK,UAAU;IAC3B,aAAa;IACb,UAAU,QAAQ,gBAAgB,GAAG,cAAc,KAAK;GAC1D;SACK,IAAI,SAAS,MAAM;GACxB,aAAa;GACb,UAAU;EACZ;CACF;CACA,MAAM,YAAY;EAChB,YAAY;EACZ,WAAW,SAAS,aAAa,OAAO,GAAG,MAAM,OAAO,GAAG,OAAO,KAAA;CACpE;CACA,IAAI,YAAY,MAAM;EACpB,IAAI,CAAC,YAAY,OAAO;EACxB,OAAO,oBAAC,QAAD;GAAW;GAAK,GAAI,WAAW;IAAC,OAAO;IAAM,eAAe;IAAO,OAAO,OAAO;GAAO,GAAG,WAAW;IAC3G,GAAG;IACH,GAAG;GACL,CAAC;GAAG,GAAI;GACD,UAAA,CAAC,OAAO;EACL,CAAA;CACZ;CACA,OAAO,qBAAC,QAAD;EAAW;EAAK,GAAI,WAAW,CAAC,OAAO,OAAO,GAAG,WAAW,KAAK;EAAG,GAAI;EAAxE,UAAA,CACA,UACA,cAAc,oBAAC,QAAD;GAAM,GAAI,WAAW;IAAC,OAAO;IAAM,eAAe;IAAO,OAAO;IAAc,OAAO,OAAO;GAAO,GAAG,KAAA,GAAW,SAAS;GACpI,UAAA,CAAC,OAAO;EACL,CAAA,CACJ;;AACZ,CAAC;AACD,MAAM,cAAc"}

package/es/Badge/index.mjs

@@ -0,0 +1 @@
+export { default } from "./Badge.mjs";

package/es/Badge/style.mjs

@@ -0,0 +1,95 @@
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+//#region src/Badge/style.ts
+const styles = {
+	pill: {
+		kaIpWk: "lb1e6avla",
+		kg3NbH: "lbm9j1uf",
+		kWkggS: "lbixdnzb",
+		kGVxlE: "lb155vy5e",
+		kB7OPa: "lb9f619",
+		kMwMTN: "lb1u6jh17",
+		k1xSpc: "lb1rg5ohu",
+		kMv6JI: "lb2xbw48",
+		kGuDYH: "lb1j6dyjg",
+		kcqcaj: "lbss6m8b",
+		k63SB2: "lbk50ysn",
+		kLWn49: "lbd4r4e8",
+		k9WMMc: "lb2b8uid",
+		khDVqt: "lbuxw1ft",
+		kZKoxP: "lbmix8c7",
+		k7Eaqz: "lb16xo4sp",
+		$$css: true
+	},
+	pillAbsolute: {
+		k87sOh: "lb13vifvy",
+		kt4wiu: "lbtijo5x",
+		kVAEAm: "lb10l6tqk",
+		kIY38u: "lb1mrfq0t",
+		$$css: true
+	},
+	pillDot: {
+		kmVPX3: "lb1717udv",
+		kg3NbH: "lbnjsko4",
+		kGVxlE: "lb1gnnqk1",
+		kZKoxP: "lbdk7pt",
+		k7Eaqz: "lbeuugli",
+		kzqmXN: "lb1xc55vz",
+		$$css: true
+	},
+	pillSmall: {
+		kGuDYH: "lb1j6dyjg",
+		kLWn49: "lb1xxsxie",
+		kZKoxP: "lb1v9usgg",
+		k7Eaqz: "lb1wu2mox",
+		$$css: true
+	},
+	statusDot: {
+		kaIpWk: "lb16rqkct",
+		kWkggS: "lbur9dxv",
+		kmuXW: "lb2lah0s",
+		kVAEAm: "lb1n2onr6",
+		kZKoxP: "lbols6we",
+		kzqmXN: "lb1v4s8kt",
+		$$css: true
+	},
+	statusDotProcessing: {
+		kv0HGH: "lbgmhms5",
+		kXtpa: "lbi7ptuk",
+		kUfP38: "lb2coff9",
+		kbwMcY: "lb86avzo",
+		kPGmMm: "lb5hscyn",
+		kh3gPk: "lb1woo5v2",
+		kVUETb: "lb13ee8us",
+		kFguJn: "lbj47bkc lb1j82dal",
+		kYqdJW: "lb152856",
+		k5JduY: "lb100rkj9",
+		kwXMNM: "lb1j6awrg",
+		$$css: true
+	},
+	statusRoot: {
+		kOIVth: "lb167g77z",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
+		$$css: true
+	},
+	statusText: {
+		kMwMTN: "lb66ogz0",
+		$$css: true
+	},
+	wrapper: {
+		k1xSpc: "lb1rg5ohu",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	}
+};
+const statusColor = {
+	default: cssVar.colorTextQuaternary,
+	error: cssVar.colorError,
+	processing: cssVar.colorInfo,
+	success: cssVar.colorSuccess,
+	warning: cssVar.colorWarning
+};
+//#endregion
+export { statusColor, styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Badge/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Badge/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst pulse = stylex.keyframes({\n  to: { opacity: 0, scale: 2.4 },\n});\n\nexport const styles = stylex.create({\n  pill: {\n    borderRadius: 999,\n    paddingInline: 5,\n    backgroundColor: cssVar.colorError,\n    boxShadow: `0 0 0 1.5px ${cssVar.colorBgContainer}`,\n    boxSizing: 'border-box',\n    color: cssVar.colorWhite,\n    display: 'inline-block',\n    fontFamily: cssVar.fontFamilyCode,\n    fontSize: 11,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 500,\n    lineHeight: '18px',\n    textAlign: 'center',\n    whiteSpace: 'nowrap',\n    height: 18,\n    minWidth: 18,\n  },\n  pillAbsolute: {\n    insetBlockStart: 0,\n    insetInlineEnd: 0,\n    position: 'absolute',\n    translate: '50% -50%',\n  },\n  pillDot: {\n    padding: 0,\n    paddingInline: 0,\n    boxShadow: 'none',\n    height: 8,\n    minWidth: 0,\n    width: 8,\n  },\n  pillSmall: {\n    fontSize: 11,\n    lineHeight: '14px',\n    height: 14,\n    minWidth: 14,\n  },\n  statusDot: {\n    borderRadius: '50%',\n    backgroundColor: cssVar.colorTextQuaternary,\n    flexShrink: 0,\n    position: 'relative',\n    height: 6,\n    width: 6,\n  },\n  statusDotProcessing: {\n    '::after': {\n      inset: -1,\n      borderColor: 'currentcolor',\n      borderRadius: '50%',\n      borderStyle: 'solid',\n      borderWidth: 1,\n      animationDuration: '1.2s',\n      animationIterationCount: 'infinite',\n      animationName: { 'default': pulse, '@media (prefers-reduced-motion: reduce)': 'none' },\n      animationTimingFunction: 'ease-out',\n      content: \"''\",\n      position: 'absolute',\n    },\n  },\n  statusRoot: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  statusText: {\n    color: cssVar.colorText,\n  },\n  wrapper: {\n    display: 'inline-block',\n    position: 'relative',\n  },\n});\n\nexport const statusColor: Record<string, string> = {\n  default: cssVar.colorTextQuaternary,\n  error: cssVar.colorError,\n  processing: cssVar.colorInfo,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n"],"mappings":";;AAIA,MAAa,SAAS;CACpB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,cAAsC;CACjD,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,YAAY,OAAO;CACnB,SAAS,OAAO;CAChB,SAAS,OAAO;AAClB"}

package/es/Badge/type.d.mts

@@ -0,0 +1,18 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/Badge/type.d.ts
+export type BadgeStatus = 'success' | 'processing' | 'default' | 'error' | 'warning';
+export type BadgeSize = 'default' | 'small';
+export interface BadgeProps extends Omit<ComponentProps<'span'>, 'color'> {
+  color?: string;
+  count?: ReactNode;
+  dot?: boolean;
+  offset?: [number, number];
+  overflowCount?: number;
+  ref?: Ref<HTMLSpanElement>;
+  showZero?: boolean;
+  size?: BadgeSize;
+  status?: BadgeStatus;
+  text?: ReactNode;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Block/Block.d.mts

@@ -1,3 +1,4 @@
+import "../styles/stylex/props.mjs";
 import { BlockProps } from "./type.mjs";
 import { FC } from "react";
 //#region src/Block/Block.d.ts

package/es/Block/Block.mjs

@@ -1,24 +1,39 @@
 "use client";
+import { styleProps } from "../styles/stylex/props.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { variants } from "./style.mjs";
+import { stylish } from "../styles/stylex/stylish.mjs";
+import { styles } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { cx } from "antd-style";
 //#region src/Block/Block.tsx
-const Block = ({ className, variant = "filled", shadow, glass, children, clickable, ref, ...rest }) => {
+const variantStyles = {
+	borderless: stylish.variantBorderlessWithoutHover,
+	filled: stylish.variantFilledWithoutHover,
+	outlined: stylish.variantOutlinedWithoutHover
+};
+const clickableVariantStyles = {
+	borderless: styles.clickableBorderless,
+	filled: styles.clickableFilled,
+	outlined: styles.clickableOutlined
+};
+const BlockImpl = ({ className, variant = "filled", shadow, glass, children, clickable, ref, style, xstyle, ...rest }) => {
 	return /* @__PURE__ */ jsx(FlexBasic_default, {
-		className: cx(variants({
-			clickable,
-			glass,
-			shadow,
-			variant
-		}), className),
 		ref,
 		...rest,
+		...styleProps([
+			styles.root,
+			variantStyles[variant],
+			clickable && styles.clickableRoot,
+			glass && styles.glass,
+			shadow && styles.shadow,
+			clickable && clickableVariantStyles[variant],
+			xstyle
+		], className, style),
 		children
 	});
 };
-Block.displayName = "Block";
+BlockImpl.displayName = "Block";
+const Block = BlockImpl;
 //#endregion
-export { Block as default };
+export { BlockImpl, Block as default };
 
 //# sourceMappingURL=Block.mjs.map

package/es/Block/Block.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Block.mjs","names":["Flexbox"],"sources":["../../src/Block/Block.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { variants } from './style';\nimport type { BlockProps } from './type';\n\nconst Block: FC<BlockProps> = ({\n  className,\n  variant = 'filled',\n  shadow,\n  glass,\n  children,\n  clickable,\n  ref,\n  ...rest\n}) => {\n  return (\n    <Flexbox\n      className={cx(variants({ clickable, glass, shadow, variant }), className)}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nBlock.displayName = 'Block';\n\nexport default Block;\n"],"mappings":";;;;;;AAUA,MAAM,SAAyB,EAC7B,WACA,UAAU,UACV,QACA,OACA,UACA,WACA,KACA,GAAG,WACC;CACJ,OACE,oBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAW;GAAO;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACnE;EACL,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,MAAM,cAAc"}
+{"version":3,"file":"Block.mjs","names":["Flexbox"],"sources":["../../src/Block/Block.tsx"],"sourcesContent":["'use client';\n\nimport { type FC } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stylish } from '@/styles/stylex/stylish';\n\nimport { styles } from './style';\nimport type { BlockProps } from './type';\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: stylish.variantFilledWithoutHover,\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nconst clickableVariantStyles = {\n  borderless: styles.clickableBorderless,\n  filled: styles.clickableFilled,\n  outlined: styles.clickableOutlined,\n};\n\nexport const BlockImpl: FC<BlockProps & { xstyle?: Parameters<typeof styleProps>[0] }> = ({\n  className,\n  variant = 'filled',\n  shadow,\n  glass,\n  children,\n  clickable,\n  ref,\n  style,\n  xstyle,\n  ...rest\n}) => {\n  return (\n    <Flexbox\n      ref={ref}\n      {...rest}\n      {...styleProps(\n        [\n          styles.root,\n          variantStyles[variant],\n          clickable && styles.clickableRoot,\n          glass && styles.glass,\n          shadow && styles.shadow,\n          clickable && clickableVariantStyles[variant],\n          xstyle,\n        ],\n        className,\n        style,\n      )}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nBlockImpl.displayName = 'Block';\n\nconst Block = BlockImpl as FC<BlockProps>;\n\nexport default Block;\n"],"mappings":";;;;;;;AAWA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,QAAQ;CAChB,UAAU,QAAQ;AACpB;AAEA,MAAM,yBAAyB;CAC7B,YAAY,OAAO;CACnB,QAAQ,OAAO;CACf,UAAU,OAAO;AACnB;AAEA,MAAa,aAA6E,EACxF,WACA,UAAU,UACV,QACA,OACA,UACA,WACA,KACA,OACA,QACA,GAAG,WACC;CACJ,OACE,oBAACA,mBAAD;EACO;EACL,GAAI;EACJ,GAAI,WACF;GACE,OAAO;GACP,cAAc;GACd,aAAa,OAAO;GACpB,SAAS,OAAO;GAChB,UAAU,OAAO;GACjB,aAAa,uBAAuB;GACpC;EACF,GACA,WACA,KACF;EAEC;CACM,CAAA;AAEb;AAEA,UAAU,cAAc;AAExB,MAAM,QAAQ"}