@lobehub/ui 5.32.6 → 5.33.0

package/es/base-ui/Avatar/AvatarGroup/index.mjs

@@ -0,0 +1,65 @@
+"use client";
+import FlexBasic_default from "../../../Flex/FlexBasic.mjs";
+import Avatar from "../Avatar.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+//#region src/base-ui/Avatar/AvatarGroup/index.tsx
+const AvatarGroup = memo(({ items, max, gap, variant = "borderless", bordered, shadow, size = 48, background, animation, draggable, classNames, shape, styles: customStyles, onClick, ref, zIndexReverse, ...rest }) => {
+	const avatars = max ? items.slice(0, max) : items;
+	const restAvatars = items.slice(max, items.length);
+	const gapValue = gap ?? Math.floor(-size / 4);
+	const avatarProps = {
+		animation,
+		background,
+		bordered,
+		draggable,
+		shadow,
+		shape,
+		size,
+		variant
+	};
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		gap,
+		ref,
+		style: { position: "relative" },
+		...rest,
+		children: [avatars.map((avatar, index) => {
+			const { key, style: avatarStyle, className: avatarClassName, ...restAvatarProps } = avatar;
+			return /* @__PURE__ */ jsx(Avatar, {
+				className: cx(classNames?.avatar, avatarClassName, styles.avatar),
+				style: {
+					marginLeft: index === 0 ? 0 : gapValue,
+					zIndex: zIndexReverse ? items.length - index : index,
+					...customStyles?.avatar,
+					...avatarStyle
+				},
+				onClick: () => onClick?.({
+					item: avatar,
+					key
+				}),
+				...avatarProps,
+				...restAvatarProps
+			}, key);
+		}), max && restAvatars.length > 0 && /* @__PURE__ */ jsx(Avatar, {
+			...avatarProps,
+			avatar: `+${restAvatars.length}`,
+			background: cssVar.colorText,
+			className: cx(styles.avatar, classNames?.count),
+			classNames: { content: styles.count },
+			sliceText: false,
+			style: {
+				marginLeft: gapValue,
+				zIndex: zIndexReverse ? 0 : avatars.length,
+				...customStyles?.count
+			}
+		})]
+	});
+});
+AvatarGroup.displayName = "AvatarGroup";
+//#endregion
+export { AvatarGroup as default };
+
+//# sourceMappingURL=index.mjs.map

package/es/base-ui/Avatar/AvatarGroup/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Flexbox"],"sources":["../../../../src/base-ui/Avatar/AvatarGroup/index.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport Avatar from '../Avatar';\nimport type { AvatarGroupProps } from '../type';\nimport { styles } from './style';\n\nconst AvatarGroup = memo<AvatarGroupProps>(\n  ({\n    items,\n    max,\n    gap,\n    variant = 'borderless',\n    bordered,\n    shadow,\n    size = 48,\n    background,\n    animation,\n    draggable,\n    classNames,\n    shape,\n    styles: customStyles,\n    onClick,\n    ref,\n    zIndexReverse,\n    ...rest\n  }) => {\n    const avatars = max ? items.slice(0, max) : items;\n    const restAvatars = items.slice(max, items.length);\n    const gapValue = gap ?? Math.floor(-size / 4);\n\n    const avatarProps = {\n      animation,\n      background,\n      bordered,\n      draggable,\n      shadow,\n      shape,\n      size,\n      variant,\n    };\n\n    return (\n      <Flexbox\n        horizontal\n        gap={gap}\n        ref={ref}\n        style={{\n          position: 'relative',\n        }}\n        {...rest}\n      >\n        {avatars.map((avatar, index) => {\n          const {\n            key,\n            style: avatarStyle,\n            className: avatarClassName,\n            ...restAvatarProps\n          } = avatar;\n          return (\n            <Avatar\n              className={cx(classNames?.avatar, avatarClassName, styles.avatar)}\n              key={key}\n              style={{\n                marginLeft: index === 0 ? 0 : gapValue,\n                zIndex: zIndexReverse ? items.length - index : index,\n                ...customStyles?.avatar,\n                ...avatarStyle,\n              }}\n              onClick={() => onClick?.({ item: avatar, key })}\n              {...avatarProps}\n              {...restAvatarProps}\n            />\n          );\n        })}\n        {max && restAvatars.length > 0 && (\n          <Avatar\n            {...avatarProps}\n            avatar={`+${restAvatars.length}`}\n            background={cssVar.colorText}\n            className={cx(styles.avatar, classNames?.count)}\n            classNames={{ content: styles.count }}\n            sliceText={false}\n            style={{\n              marginLeft: gapValue,\n              zIndex: zIndexReverse ? 0 : avatars.length,\n              ...customStyles?.count,\n            }}\n          />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport default AvatarGroup;\n"],"mappings":";;;;;;;;AAWA,MAAM,cAAc,MACjB,EACC,OACA,KACA,KACA,UAAU,cACV,UACA,QACA,OAAO,IACP,YACA,WACA,WACA,YACA,OACA,QAAQ,cACR,SACA,KACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,MAAM,MAAM,MAAM,GAAG,GAAG,IAAI;CAC5C,MAAM,cAAc,MAAM,MAAM,KAAK,MAAM,MAAM;CACjD,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC;CAE5C,MAAM,cAAc;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,OACE,qBAACA,mBAAD;EACE,YAAA;EACK;EACA;EACL,OAAO,EACL,UAAU,WACZ;EACA,GAAI;EAPN,UAAA,CASG,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,EACJ,KACA,OAAO,aACP,WAAW,iBACX,GAAG,oBACD;GACJ,OACE,oBAAC,QAAD;IACE,WAAW,GAAG,YAAY,QAAQ,iBAAiB,OAAO,MAAM;IAEhE,OAAO;KACL,YAAY,UAAU,IAAI,IAAI;KAC9B,QAAQ,gBAAgB,MAAM,SAAS,QAAQ;KAC/C,GAAG,cAAc;KACjB,GAAG;IACL;IACA,eAAe,UAAU;KAAE,MAAM;KAAQ;IAAI,CAAC;IAC9C,GAAI;IACJ,GAAI;GACL,GAVM,GAUN;EAEL,CAAC,GACA,OAAO,YAAY,SAAS,KAC3B,oBAAC,QAAD;GACE,GAAI;GACJ,QAAQ,IAAI,YAAY;GACxB,YAAY,OAAO;GACnB,WAAW,GAAG,OAAO,QAAQ,YAAY,KAAK;GAC9C,YAAY,EAAE,SAAS,OAAO,MAAM;GACpC,WAAW;GACX,OAAO;IACL,YAAY;IACZ,QAAQ,gBAAgB,IAAI,QAAQ;IACpC,GAAG,cAAc;GACnB;EACD,CAAA,CAEI;;AAEb,CACF;AAEA,YAAY,cAAc"}

package/es/base-ui/Avatar/AvatarGroup/style.mjs

@@ -0,0 +1,17 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Avatar/AvatarGroup/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		avatar: css`
+      border: 2px solid ${cssVar.colorBgContainer} !important;
+    `,
+		count: css`
+      font-size: 0.8em;
+      color: ${cssVar.colorBgLayout};
+    `
+	};
+});
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Avatar/AvatarGroup/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../../src/base-ui/Avatar/AvatarGroup/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    avatar: css`\n      border: 2px solid ${cssVar.colorBgContainer} !important;\n    `,\n    count: css`\n      font-size: 0.8em;\n      color: ${cssVar.colorBgLayout};\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,QAAQ,GAAG;0BACW,OAAO,iBAAiB;;EAE9C,OAAO,GAAG;;eAEC,OAAO,cAAc;;CAElC;AACF,CAAC"}

package/es/base-ui/Avatar/index.d.mts

@@ -0,0 +1,12 @@
+import { AvatarClassNames, AvatarGroupItemType, AvatarGroupProps, AvatarProps, AvatarStyles } from "./type.mjs";
+import AvatarGroup from "./AvatarGroup/index.mjs";
+import { ReactNode, RefAttributes } from "react";
+//#region src/base-ui/Avatar/index.d.ts
+interface IAvatar {
+  (props: AvatarProps & RefAttributes<HTMLDivElement>): ReactNode;
+  Group: typeof AvatarGroup;
+}
+declare const Avatar: IAvatar;
+//#endregion
+export { type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, Avatar as default };
+//# sourceMappingURL=index.d.mts.map

package/es/base-ui/Avatar/index.mjs

@@ -0,0 +1,9 @@
+import Avatar$1 from "./Avatar.mjs";
+import AvatarGroup from "./AvatarGroup/index.mjs";
+//#region src/base-ui/Avatar/index.ts
+const Avatar = Avatar$1;
+Avatar.Group = AvatarGroup;
+//#endregion
+export { AvatarGroup, Avatar as default };
+
+//# sourceMappingURL=index.mjs.map

package/es/base-ui/Avatar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["AvatarParent"],"sources":["../../../src/base-ui/Avatar/index.ts"],"sourcesContent":["import type { ReactNode, RefAttributes } from 'react';\n\nimport AvatarParent from './Avatar';\nimport AvatarGroup from './AvatarGroup';\nimport { type AvatarProps } from './type';\n\ninterface IAvatar {\n  (props: AvatarProps & RefAttributes<HTMLDivElement>): ReactNode;\n  Group: typeof AvatarGroup;\n}\n\nconst Avatar = AvatarParent as unknown as IAvatar;\nAvatar.Group = AvatarGroup;\n\nexport default Avatar;\nexport { default as AvatarGroup } from './AvatarGroup';\nexport type * from './type';\n"],"mappings":";;;AAWA,MAAM,SAASA;AACf,OAAO,QAAQ"}

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

@@ -0,0 +1,73 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Avatar/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		borderless: staticStylish.variantBorderlessWithoutHover,
+		content: css`
+      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;
+    `,
+		filled: staticStylish.variantFilledWithoutHover,
+		img: css`
+      flex: none;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    `,
+		loading: css`
+      position: absolute;
+      inset: 0;
+      color: #fff;
+      background: ${cssVar.colorBgMask};
+    `,
+		outlined: staticStylish.variantOutlinedWithoutHover,
+		root: css`
+      user-select: none;
+
+      position: relative;
+
+      overflow: hidden;
+      display: flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+
+      background: transparent;
+    `,
+		shadow: staticStylish.shadow
+	};
+});
+const variants = cva(styles.root, {
+	defaultVariants: {
+		shadow: false,
+		variant: "borderless"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/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    content: css`\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    filled: lobeStaticStylish.variantFilledWithoutHover,\n    img: css`\n      flex: none;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    `,\n    loading: css`\n      position: absolute;\n      inset: 0;\n      color: #fff;\n      background: ${cssVar.colorBgMask};\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      background: transparent;\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,SAAS,GAAG;;;;;;;;;;;;;;;EAeZ,QAAQA,cAAkB;EAC1B,KAAK,GAAG;;;;;;EAMR,SAAS,GAAG;;;;oBAII,OAAO,YAAY;;EAEnC,UAAUA,cAAkB;EAC5B,MAAM,GAAG;;;;;;;;;;;;;EAaT,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"}

package/es/base-ui/Avatar/type.d.mts

@@ -0,0 +1,128 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+//#region src/base-ui/Avatar/type.d.ts
+interface AvatarClassNames {
+  content?: string;
+  img?: string;
+  loading?: string;
+  root?: string;
+}
+interface AvatarStyles {
+  content?: CSSProperties;
+  img?: CSSProperties;
+  loading?: CSSProperties;
+  root?: CSSProperties;
+}
+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;
+  /**
+   * 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, 'avatar' | 'title' | 'alt' | 'onClick' | 'style' | 'className' | 'loading'> {
+  key: string;
+}
+interface AvatarGroupProps extends Pick<AvatarProps, 'variant' | 'bordered' | 'shadow' | 'size' | 'background' | 'animation' | 'draggable' | 'shape'>, Omit<FlexboxProps, 'children' | 'draggable' | 'onClick' | 'ref'> {
+  classNames?: {
+    avatar?: string;
+    count?: string;
+  };
+  items: AvatarGroupItemType[];
+  max?: number;
+  onClick?: (props: {
+    item: AvatarGroupItemType;
+    key: string;
+  }) => void;
+  ref?: Ref<HTMLDivElement>;
+  styles?: {
+    avatar?: CSSProperties;
+    count?: CSSProperties;
+  };
+  zIndexReverse?: boolean;
+}
+//#endregion
+export { AvatarClassNames, AvatarGroupItemType, AvatarGroupProps, AvatarProps, AvatarStyles };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Avatar/utils.mjs

@@ -0,0 +1,27 @@
+import { isValidElement } from "react";
+//#region src/base-ui/Avatar/utils.ts
+const isDefaultAntAvatar = (avatar) => {
+	if (!avatar) return false;
+	const isUrlOrDataUri = typeof avatar === "string" && [
+		"/",
+		"http",
+		"data:"
+	].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;
+};
+const calculateEmojiSize = (size, hasBackground, emojiScaleWithBackground) => {
+	if (emojiScaleWithBackground) return hasBackground ? size * .85 : size;
+	return size * .85;
+};
+//#endregion
+export { calculateEmojiSize, formatAvatarText, hasValidBackground, isDefaultAntAvatar };
+
+//# sourceMappingURL=utils.mjs.map

package/es/base-ui/Avatar/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/base-ui/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/base-ui/Tag/Tag.d.mts

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

package/es/base-ui/Tag/Tag.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
+import { styles, variants } from "./style.mjs";
+import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./utils.mjs";
+import { memo, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { X } from "lucide-react";
+//#region src/base-ui/Tag/Tag.tsx
+const Tag = memo(({ children, className, classNames, closable, closeIcon, color, icon, onClick, onClose, ref, shape = "normal", size = "middle", style, styles: customStyles, variant = "filled", ...rest }) => {
+	const [visible, setVisible] = useState(true);
+	const colors = useMemo(() => {
+		let textColor = cssVar.colorTextSecondary;
+		let backgroundColor;
+		let borderColor;
+		const isBorderless = variant === "borderless";
+		const isFilled = variant === "filled";
+		const isSolid = variant === "solid";
+		const isPresetColor = color && presetColors.includes(color);
+		const isPresetSystemColors = color && presetSystemColors.has(color);
+		const isHexColor = color && color.startsWith("#");
+		if (isPresetColor) {
+			const solidBgColor = colorsPreset(color);
+			textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, "active");
+			backgroundColor = isSolid ? solidBgColor : isBorderless ? "transparent" : colorsPreset(color, "fillTertiary");
+			borderColor = isSolid ? solidBgColor : colorsPreset(color, isFilled ? "fillQuaternary" : "fillTertiary");
+		}
+		if (isPresetSystemColors) {
+			const solidBgColor = colorsPresetSystem(color);
+			textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);
+			backgroundColor = isSolid ? solidBgColor : isBorderless ? "transparent" : colorsPresetSystem(color, "fillTertiary");
+			borderColor = isSolid ? solidBgColor : colorsPresetSystem(color, isFilled ? "fillQuaternary" : "fillTertiary");
+		}
+		if (isHexColor) {
+			textColor = isSolid ? safeReadableColor(color) : isBorderless ? color : cssVar.colorBgLayout;
+			backgroundColor = isSolid ? color : isBorderless ? "transparent" : color;
+			borderColor = isSolid ? color : borderColor;
+		}
+		return {
+			backgroundColor,
+			borderColor,
+			textColor
+		};
+	}, [color, variant]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx(variants({
+			shape,
+			size,
+			variant
+		}), className, classNames?.root),
+		ref,
+		style: {
+			background: colors.backgroundColor,
+			borderColor: colors.borderColor,
+			color: colors.textColor,
+			cursor: onClick ? "pointer" : void 0,
+			...style,
+			...customStyles?.root
+		},
+		onClick,
+		...rest,
+		children: [
+			icon,
+			children,
+			closable && /* @__PURE__ */ jsx("button", {
+				"aria-label": "Close",
+				className: cx(styles.close, classNames?.closeIcon),
+				style: customStyles?.closeIcon,
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					onClose?.(e);
+					setVisible(false);
+				},
+				children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 12 })
+			})
+		]
+	});
+});
+Tag.displayName = "Tag";
+//#endregion
+export { Tag as default };
+
+//# sourceMappingURL=Tag.mjs.map

package/es/base-ui/Tag/Tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","names":[],"sources":["../../../src/base-ui/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport type { TagProps } from './type';\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from './utils';\n\nconst Tag = memo<TagProps>(\n  ({\n    children,\n    className,\n    classNames,\n    closable,\n    closeIcon,\n    color,\n    icon,\n    onClick,\n    onClose,\n    ref,\n    shape = 'normal',\n    size = 'middle',\n    style,\n    styles: customStyles,\n    variant = 'filled',\n    ...rest\n  }) => {\n    const [visible, setVisible] = useState(true);\n\n    const colors = useMemo(() => {\n      let textColor = cssVar.colorTextSecondary;\n      let backgroundColor;\n      let borderColor;\n      const isBorderless = variant === 'borderless';\n      const isFilled = variant === 'filled';\n      const isSolid = variant === 'solid';\n      const isPresetColor = color && presetColors.includes(color);\n      const isPresetSystemColors = color && presetSystemColors.has(color);\n      const isHexColor = color && color.startsWith('#');\n\n      if (isPresetColor) {\n        const solidBgColor = colorsPreset(color);\n        textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPreset(color, 'active');\n        backgroundColor = isSolid\n          ? solidBgColor\n          : isBorderless\n            ? 'transparent'\n            : colorsPreset(color, 'fillTertiary');\n        borderColor = isSolid\n          ? solidBgColor\n          : colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n      }\n      if (isPresetSystemColors) {\n        const solidBgColor = colorsPresetSystem(color);\n        textColor = isSolid ? safeReadableColor(solidBgColor) : colorsPresetSystem(color);\n        backgroundColor = isSolid\n          ? solidBgColor\n          : isBorderless\n            ? 'transparent'\n            : colorsPresetSystem(color, 'fillTertiary');\n        borderColor = isSolid\n          ? solidBgColor\n          : colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n      }\n      if (isHexColor) {\n        textColor = isSolid\n          ? safeReadableColor(color)\n          : isBorderless\n            ? color\n            : cssVar.colorBgLayout;\n        backgroundColor = isSolid ? color : isBorderless ? 'transparent' : color;\n        borderColor = isSolid ? color : borderColor;\n      }\n\n      return {\n        backgroundColor,\n        borderColor,\n        textColor,\n      };\n    }, [color, variant]);\n\n    if (!visible) return null;\n\n    return (\n      <span\n        className={cx(variants({ shape, size, variant }), className, classNames?.root)}\n        ref={ref}\n        style={{\n          background: colors.backgroundColor,\n          borderColor: colors.borderColor,\n          color: colors.textColor,\n          cursor: onClick ? 'pointer' : undefined,\n          ...style,\n          ...customStyles?.root,\n        }}\n        onClick={onClick}\n        {...rest}\n      >\n        {icon}\n        {children}\n        {closable && (\n          <button\n            aria-label=\"Close\"\n            className={cx(styles.close, classNames?.closeIcon)}\n            style={customStyles?.closeIcon}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onClose?.(e);\n              setVisible(false);\n            }}\n          >\n            {closeIcon ?? <X size={12} />}\n          </button>\n        )}\n      </span>\n    );\n  },\n);\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;AAYA,MAAM,MAAM,MACT,EACC,UACA,WACA,YACA,UACA,WACA,OACA,MACA,SACA,SACA,KACA,QAAQ,UACR,OAAO,UACP,OACA,QAAQ,cACR,UAAU,UACV,GAAG,WACC;CACJ,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAE3C,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,UAAU,YAAY;EAC5B,MAAM,gBAAgB,SAAS,aAAa,SAAS,KAAK;EAC1D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,KAAK;EAClE,MAAM,aAAa,SAAS,MAAM,WAAW,GAAG;EAEhD,IAAI,eAAe;GACjB,MAAM,eAAe,aAAa,KAAK;GACvC,YAAY,UAAU,kBAAkB,YAAY,IAAI,aAAa,OAAO,QAAQ;GACpF,kBAAkB,UACd,eACA,eACE,gBACA,aAAa,OAAO,cAAc;GACxC,cAAc,UACV,eACA,aAAa,OAAO,WAAW,mBAAmB,cAAc;EACtE;EACA,IAAI,sBAAsB;GACxB,MAAM,eAAe,mBAAmB,KAAK;GAC7C,YAAY,UAAU,kBAAkB,YAAY,IAAI,mBAAmB,KAAK;GAChF,kBAAkB,UACd,eACA,eACE,gBACA,mBAAmB,OAAO,cAAc;GAC9C,cAAc,UACV,eACA,mBAAmB,OAAO,WAAW,mBAAmB,cAAc;EAC5E;EACA,IAAI,YAAY;GACd,YAAY,UACR,kBAAkB,KAAK,IACvB,eACE,QACA,OAAO;GACb,kBAAkB,UAAU,QAAQ,eAAe,gBAAgB;GACnE,cAAc,UAAU,QAAQ;EAClC;EAEA,OAAO;GACL;GACA;GACA;EACF;CACF,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,qBAAC,QAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAO;GAAM;EAAQ,CAAC,GAAG,WAAW,YAAY,IAAI;EACxE;EACL,OAAO;GACL,YAAY,OAAO;GACnB,aAAa,OAAO;GACpB,OAAO,OAAO;GACd,QAAQ,UAAU,YAAY,KAAA;GAC9B,GAAG;GACH,GAAG,cAAc;EACnB;EACS;EACT,GAAI;EAZN,UAAA;GAcG;GACA;GACA,YACC,oBAAC,UAAD;IACE,cAAW;IACX,WAAW,GAAG,OAAO,OAAO,YAAY,SAAS;IACjD,OAAO,cAAc;IACrB,MAAK;IACL,UAAU,MAAM;KACd,EAAE,gBAAgB;KAClB,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IAEC,UAAA,aAAa,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;GACtB,CAAA;EAEN;;AAEV,CACF;AAEA,IAAI,cAAc"}

package/es/base-ui/Tag/index.d.mts

@@ -0,0 +1,4 @@
+import { TagClassNames, TagProps, TagShape, TagSize, TagStyles, TagVariant } from "./type.mjs";
+import Tag from "./Tag.mjs";
+import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./utils.mjs";
+export { type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, colorsPreset, colorsPresetSystem, Tag as default, presetColors, presetSystemColors };

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

@@ -0,0 +1,112 @@
+import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Tag/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	borderless: staticStylish.variantBorderlessWithoutHover,
+	close: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 0;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    color: inherit;
+
+    background: none;
+  `,
+	filled: staticStylish.variantFilledWithoutHover,
+	large: css`
+    height: 28px;
+    padding-inline: 12px;
+    border-radius: 6px;
+  `,
+	outlined: staticStylish.variantOutlinedWithoutHover,
+	round: css`
+    border-radius: 999px;
+  `,
+	roundLarge: css`
+    padding-inline: 14px;
+  `,
+	roundMiddle: css`
+    padding-inline: 10px;
+  `,
+	roundSmall: css`
+    padding-inline: 8px;
+  `,
+	root: css`
+    user-select: none;
+
+    display: inline-flex;
+    gap: 0.4em;
+    align-items: center;
+    justify-content: center;
+
+    width: fit-content;
+    height: 22px;
+    margin: 0;
+
+    font-size: inherit;
+    line-height: 1.2;
+
+    span {
+      margin: 0;
+      line-height: inherit;
+    }
+  `,
+	small: css`
+    height: 20px;
+    padding-inline: 4px;
+    border-radius: 3px;
+  `
+}));
+const variants = cva(styles.root, {
+	compoundVariants: [
+		{
+			className: styles.roundSmall,
+			shape: "round",
+			size: "small"
+		},
+		{
+			className: styles.roundMiddle,
+			shape: "round",
+			size: "middle"
+		},
+		{
+			className: styles.roundLarge,
+			shape: "round",
+			size: "large"
+		}
+	],
+	defaultVariants: {
+		shape: "normal",
+		size: "middle",
+		variant: "filled"
+	},
+	variants: {
+		shape: {
+			normal: null,
+			round: styles.round
+		},
+		size: {
+			large: styles.large,
+			middle: null,
+			small: styles.small
+		},
+		variant: {
+			borderless: styles.borderless,
+			filled: styles.filled,
+			outlined: styles.outlined,
+			solid: styles.filled
+		}
+	}
+});
+//#endregion
+export { styles, variants };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Tag/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 }) => ({\n  borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n  close: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    color: inherit;\n\n    background: none;\n  `,\n  filled: lobeStaticStylish.variantFilledWithoutHover,\n  large: css`\n    height: 28px;\n    padding-inline: 12px;\n    border-radius: 6px;\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  round: css`\n    border-radius: 999px;\n  `,\n  roundLarge: css`\n    padding-inline: 14px;\n  `,\n  roundMiddle: css`\n    padding-inline: 10px;\n  `,\n  roundSmall: css`\n    padding-inline: 8px;\n  `,\n  root: css`\n    user-select: none;\n\n    display: inline-flex;\n    gap: 0.4em;\n    align-items: center;\n    justify-content: center;\n\n    width: fit-content;\n    height: 22px;\n    margin: 0;\n\n    font-size: inherit;\n    line-height: 1.2;\n\n    span {\n      margin: 0;\n      line-height: inherit;\n    }\n  `,\n  small: css`\n    height: 20px;\n    padding-inline: 4px;\n    border-radius: 3px;\n  `,\n}));\n\nexport const variants = cva(styles.root, {\n  compoundVariants: [\n    {\n      className: styles.roundSmall,\n      shape: 'round',\n      size: 'small',\n    },\n    {\n      className: styles.roundMiddle,\n      shape: 'round',\n      size: 'middle',\n    },\n    {\n      className: styles.roundLarge,\n      shape: 'round',\n      size: 'large',\n    },\n  ],\n  defaultVariants: {\n    shape: 'normal',\n    size: 'middle',\n    variant: 'filled',\n  },\n  variants: {\n    shape: {\n      normal: null,\n      round: styles.round,\n    },\n    size: {\n      large: styles.large,\n      middle: null,\n      small: styles.small,\n    },\n    variant: {\n      borderless: styles.borderless,\n      filled: styles.filled,\n      outlined: styles.outlined,\n      solid: styles.filled,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,WAAW;CACrD,YAAYA,cAAkB;CAC9B,OAAO,GAAG;;;;;;;;;;;;;;;;CAgBV,QAAQA,cAAkB;CAC1B,OAAO,GAAG;;;;;CAKV,UAAUA,cAAkB;CAC5B,OAAO,GAAG;;;CAGV,YAAY,GAAG;;;CAGf,aAAa,GAAG;;;CAGhB,YAAY,GAAG;;;CAGf,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;CAoBT,OAAO,GAAG;;;;;AAKZ,EAAE;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,kBAAkB;EAChB;GACE,WAAW,OAAO;GAClB,OAAO;GACP,MAAM;EACR;EACA;GACE,WAAW,OAAO;GAClB,OAAO;GACP,MAAM;EACR;EACA;GACE,WAAW,OAAO;GAClB,OAAO;GACP,MAAM;EACR;CACF;CACA,iBAAiB;EACf,OAAO;EACP,MAAM;EACN,SAAS;CACX;CACA,UAAU;EACR,OAAO;GACL,QAAQ;GACR,OAAO,OAAO;EAChB;EACA,MAAM;GACJ,OAAO,OAAO;GACd,QAAQ;GACR,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY,OAAO;GACnB,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,OAAO,OAAO;EAChB;CACF;AACF,CAAC"}

package/es/base-ui/Tag/type.d.mts

@@ -0,0 +1,29 @@
+import { CSSProperties, ComponentProps, MouseEvent, ReactNode, Ref } from "react";
+//#region src/base-ui/Tag/type.d.ts
+type TagShape = 'normal' | 'round';
+type TagSize = 'small' | 'middle' | 'large';
+type TagVariant = 'filled' | 'outlined' | 'borderless' | 'solid';
+interface TagClassNames {
+  closeIcon?: string;
+  root?: string;
+}
+interface TagStyles {
+  closeIcon?: CSSProperties;
+  root?: CSSProperties;
+}
+interface TagProps extends Omit<ComponentProps<'span'>, 'color'> {
+  classNames?: TagClassNames;
+  closable?: boolean;
+  closeIcon?: ReactNode;
+  color?: string;
+  icon?: ReactNode;
+  onClose?: (e: MouseEvent<HTMLSpanElement>) => void;
+  ref?: Ref<HTMLSpanElement>;
+  shape?: TagShape;
+  size?: TagSize;
+  styles?: TagStyles;
+  variant?: TagVariant;
+}
+//#endregion
+export { TagClassNames, TagProps, TagShape, TagSize, TagStyles, TagVariant };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Tag/utils.d.mts

@@ -0,0 +1,8 @@
+//#region src/base-ui/Tag/utils.d.ts
+declare const presetColors: string[];
+declare const presetSystemColors: Set<string>;
+declare const colorsPreset: (type: string, ...keys: string[]) => string;
+declare const colorsPresetSystem: (type: string, ...keys: string[]) => string;
+//#endregion
+export { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors };
+//# sourceMappingURL=utils.d.mts.map