@lobehub/ui 5.48.1 → 5.49.0

package/es/awesome/index.mjs

@@ -1,13 +1,25 @@
 import Spotlight from "./Spotlight/Spotlight.mjs";
+import { DEFAULT_SKILL_AGENTS } from "./AgentSkillCard/agents.mjs";
+import AgentSkillCard from "./AgentSkillCard/AgentSkillCard.mjs";
 import AuroraBackground from "./AuroraBackground/AuroraBackground.mjs";
+import BentoCard from "./BentoGrid/BentoCard.mjs";
+import BentoGrid from "./BentoGrid/BentoGrid.mjs";
 import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
+import CodeShowcase from "./CodeShowcase/CodeShowcase.mjs";
+import FeatureGrid from "./FeatureGrid/FeatureGrid.mjs";
 import SpotlightCard from "./SpotlightCard/SpotlightCard.mjs";
 import Features from "./Features/Features.mjs";
+import { LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, accentGradient } from "./landingTokens.mjs";
+import FluidGradient from "./FluidGradient/FluidGradient.mjs";
 import Giscus from "./Giscus/Giscus.mjs";
 import GradientButton from "./GradientButton/GradientButton.mjs";
 import GridBackground from "./GridBackground/GridBackground.mjs";
 import GridShowcase from "./GridBackground/GridShowcase.mjs";
 import Hero from "./Hero/Hero.mjs";
+import InstallBanner from "./InstallBanner/InstallBanner.mjs";
+import LandingHero from "./LandingHero/LandingHero.mjs";
+import LandingSection from "./LandingSection/LandingSection.mjs";
+import LogoMarquee from "./LogoMarquee/LogoMarquee.mjs";
 import Spline from "./Spline/Spine.mjs";
 import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
-export { AuroraBackground, BottomGradientButton, Features, Giscus, GradientButton, GridBackground, GridShowcase, Hero, Spline, Spotlight, SpotlightCard, TypewriterEffect };
+export { AgentSkillCard, AuroraBackground, BentoCard, BentoGrid, BottomGradientButton, CodeShowcase, DEFAULT_SKILL_AGENTS, FeatureGrid, Features, FluidGradient, Giscus, GradientButton, GridBackground, GridShowcase, Hero, InstallBanner, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingHero, LandingSection, LogoMarquee, Spline, Spotlight, SpotlightCard, TypewriterEffect, accentGradient as landingAccentGradient };

package/es/awesome/landingActions.d.mts

@@ -0,0 +1,20 @@
+import { IconProps } from "../Icon/type.mjs";
+import "../Icon/index.mjs";
+import "./landingLink.mjs";
+import { ReactNode } from "react";
+//#region src/awesome/landingActions.d.ts
+interface LandingAction {
+  /** Opens in a new tab. Inferred from absolute URLs when omitted. */
+  external?: boolean;
+  href: string;
+  icon?: IconProps['icon'];
+  /** Places the icon after the label, e.g. for an arrow. */
+  iconPlacement?: 'start' | 'end';
+  label: ReactNode;
+  /** The primary action is a filled pill; others render as BottomGradientButton. */
+  primary?: boolean;
+}
+type LandingNavigate = (href: string) => void;
+//#endregion
+export { LandingAction, LandingNavigate };
+//# sourceMappingURL=landingActions.d.mts.map

package/es/awesome/landingActions.mjs

@@ -0,0 +1,123 @@
+import Icon from "../Icon/Icon.mjs";
+import { isExternalHref, renderLandingLink } from "./landingLink.mjs";
+import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
+import { accentGradient } from "./landingTokens.mjs";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createStaticStyles, cx } from "antd-style";
+//#region src/awesome/landingActions.tsx
+const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
+	action: css`
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+
+    min-block-size: 44px;
+    padding-block: 0;
+    padding-inline: 22px;
+    border: 1px solid transparent;
+    border-radius: 999px;
+
+    font-size: ${cssVar.fontSize};
+    font-weight: 600;
+    color: ${cssVar.colorText};
+    text-decoration: none;
+    white-space: nowrap;
+
+    background-image:
+      linear-gradient(${cssVar.colorBgContainer}, ${cssVar.colorBgContainer}), ${accentGradient};
+    background-clip: padding-box, border-box;
+    background-origin: border-box;
+
+    transition:
+      filter 140ms ease,
+      transform 90ms ease;
+
+    &:hover {
+      color: ${cssVar.colorText};
+      filter: brightness(1.06);
+    }
+
+    &:active {
+      transform: scale(0.97);
+    }
+  `,
+	actionPrimary: css`
+    && {
+      color: ${cssVar.colorBgContainer};
+      background: ${cssVar.colorText};
+    }
+
+    &&:hover {
+      color: ${cssVar.colorBgContainer};
+    }
+  `,
+	actionSmall: css`
+    && {
+      gap: 6px;
+      min-block-size: 34px;
+      padding-inline: 14px;
+      font-size: ${cssVar.fontSizeSM};
+    }
+  `,
+	group: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+
+    &[data-size='small'] {
+      gap: 8px;
+    }
+
+    ${responsive.mobile} {
+      &[data-size='large'] {
+        align-self: stretch;
+      }
+
+      &[data-size='large'] > * {
+        flex: 1;
+      }
+    }
+  `
+}));
+const LandingActions = ({ actions, className, onNavigate, renderLink, size = "large" }) => /* @__PURE__ */ jsx("div", {
+	className: cx(styles.group, className),
+	"data-size": size,
+	children: actions.map(({ external, href, icon, iconPlacement = "start", label, primary }) => {
+		const iconNode = icon && /* @__PURE__ */ jsx(Icon, {
+			icon,
+			size: size === "small" ? 14 : 16
+		});
+		if (!primary) {
+			const isExternal = external ?? isExternalHref(href);
+			return /* @__PURE__ */ jsx(BottomGradientButton, {
+				href,
+				icon: iconNode,
+				iconPlacement,
+				rel: isExternal ? "noreferrer" : void 0,
+				size: size === "small" ? "middle" : "large",
+				target: isExternal ? "_blank" : void 0,
+				onClick: !isExternal && onNavigate ? (event) => {
+					event.preventDefault();
+					onNavigate(href);
+				} : void 0,
+				children: label
+			}, href);
+		}
+		return /* @__PURE__ */ jsx(Fragment, { children: renderLandingLink(renderLink, {
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				iconPlacement === "start" && iconNode,
+				label,
+				iconPlacement === "end" && iconNode
+			] }),
+			className: cx(styles.action, styles.actionPrimary, size === "small" && styles.actionSmall),
+			external,
+			href
+		}) }, href);
+	})
+});
+//#endregion
+export { LandingActions };
+
+//# sourceMappingURL=landingActions.mjs.map

package/es/awesome/landingActions.mjs.map

@@ -0,0 +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"}

package/es/awesome/landingIcon.mjs

@@ -0,0 +1,13 @@
+import { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/awesome/landingIcon.tsx
+const isElementType = (icon) => typeof icon === "function" || typeof icon === "object" && icon !== null && !isValidElement(icon) && "$$typeof" in icon;
+/** Renders an icon given either a component (e.g. from `@lobehub/icons`) or a ready-made node. */
+const renderLandingIcon = (icon, size) => {
+	if (!isElementType(icon)) return icon;
+	return /* @__PURE__ */ jsx(icon, { size });
+};
+//#endregion
+export { renderLandingIcon };
+
+//# sourceMappingURL=landingIcon.mjs.map

package/es/awesome/landingIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"landingIcon.mjs","names":["IconComponent"],"sources":["../../src/awesome/landingIcon.tsx"],"sourcesContent":["import { type ElementType, isValidElement, type ReactNode } from 'react';\n\nexport type LandingIconSource = ElementType<{ size: number }> | ReactNode;\n\nconst isElementType = (icon: LandingIconSource): icon is ElementType<{ size: number }> =>\n  typeof icon === 'function' ||\n  (typeof icon === 'object' && icon !== null && !isValidElement(icon) && '$$typeof' in icon);\n\n/** Renders an icon given either a component (e.g. from `@lobehub/icons`) or a ready-made node. */\nexport const renderLandingIcon = (icon: LandingIconSource, size: number): ReactNode => {\n  if (!isElementType(icon)) return icon as ReactNode;\n  const IconComponent = icon;\n  return <IconComponent size={size} />;\n};\n"],"mappings":";;;AAIA,MAAM,iBAAiB,SACrB,OAAO,SAAS,cACf,OAAO,SAAS,YAAY,SAAS,QAAQ,CAAC,eAAe,IAAI,KAAK,cAAc;;AAGvF,MAAa,qBAAqB,MAAyB,SAA4B;CACrF,IAAI,CAAC,cAAc,IAAI,GAAG,OAAO;CAEjC,OAAO,oBAACA,MAAD,EAAqB,KAAO,CAAA;AACrC"}

package/es/awesome/landingLink.d.mts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/awesome/landingLink.d.ts
+interface LandingLinkProps {
+  children: ReactNode;
+  className?: string;
+  external?: boolean;
+  href: string;
+}
+type LandingLinkRender = (props: LandingLinkProps) => ReactNode;
+//#endregion
+export { LandingLinkProps, LandingLinkRender };
+//# sourceMappingURL=landingLink.d.mts.map

package/es/awesome/landingLink.mjs

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/awesome/landingLink.tsx
+const isExternalHref = (href) => /^[a-z][\d+.a-z-]*:/i.test(href);
+const renderLandingLink = (renderLink, { external, href, ...props }) => {
+	const isExternal = external ?? isExternalHref(href);
+	if (renderLink) return renderLink({
+		...props,
+		external: isExternal,
+		href
+	});
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		...isExternal ? {
+			rel: "noreferrer",
+			target: "_blank"
+		} : {},
+		...props
+	});
+};
+//#endregion
+export { isExternalHref, renderLandingLink };
+
+//# sourceMappingURL=landingLink.mjs.map

package/es/awesome/landingLink.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"landingLink.mjs","names":[],"sources":["../../src/awesome/landingLink.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nexport interface LandingLinkProps {\n  children: ReactNode;\n  className?: string;\n  external?: boolean;\n  href: string;\n}\n\nexport type LandingLinkRender = (props: LandingLinkProps) => ReactNode;\n\nexport const isExternalHref = (href: string) => /^[a-z][\\d+.a-z-]*:/i.test(href);\n\nexport const renderLandingLink = (\n  renderLink: LandingLinkRender | undefined,\n  { external, href, ...props }: LandingLinkProps,\n): ReactNode => {\n  const isExternal = external ?? isExternalHref(href);\n  if (renderLink) return renderLink({ ...props, external: isExternal, href });\n\n  return (\n    <a href={href} {...(isExternal ? { rel: 'noreferrer', target: '_blank' } : {})} {...props} />\n  );\n};\n"],"mappings":";;AAWA,MAAa,kBAAkB,SAAiB,sBAAsB,KAAK,IAAI;AAE/E,MAAa,qBACX,YACA,EAAE,UAAU,MAAM,GAAG,YACP;CACd,MAAM,aAAa,YAAY,eAAe,IAAI;CAClD,IAAI,YAAY,OAAO,WAAW;EAAE,GAAG;EAAO,UAAU;EAAY;CAAK,CAAC;CAE1E,OACE,oBAAC,KAAD;EAAS;EAAM,GAAK,aAAa;GAAE,KAAK;GAAc,QAAQ;EAAS,IAAI,CAAC;EAAI,GAAI;CAAQ,CAAA;AAEhG"}

package/es/awesome/landingTokens.d.mts

@@ -0,0 +1,10 @@
+//#region src/awesome/landingTokens.d.ts
+type LandingPalette = [string, string, string];
+declare const LANDING_PALETTE_LIGHT: LandingPalette;
+declare const LANDING_PALETTE_DARK: LandingPalette;
+/** Consumers can override the accent of every landing component with this CSS variable. */
+declare const LANDING_GRADIENT_VAR = "--lobe-landing-gradient";
+declare const accentGradient: string;
+//#endregion
+export { LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingPalette, accentGradient };
+//# sourceMappingURL=landingTokens.d.mts.map

package/es/awesome/landingTokens.mjs

@@ -0,0 +1,19 @@
+//#region src/awesome/landingTokens.ts
+const LANDING_PALETTE_LIGHT = [
+	"#7c5cff",
+	"#d6549e",
+	"#f0885f"
+];
+const LANDING_PALETTE_DARK = [
+	"#a78bfa",
+	"#ef7fc0",
+	"#f8a878"
+];
+const landingGradient = ([from, via, to]) => `linear-gradient(105deg, ${from} 8%, ${via} 55%, ${to} 95%)`;
+/** Consumers can override the accent of every landing component with this CSS variable. */
+const LANDING_GRADIENT_VAR = "--lobe-landing-gradient";
+const accentGradient = `var(${LANDING_GRADIENT_VAR}, ${landingGradient(LANDING_PALETTE_LIGHT)})`;
+//#endregion
+export { LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, accentGradient, landingGradient };
+
+//# sourceMappingURL=landingTokens.mjs.map

package/es/awesome/landingTokens.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"landingTokens.mjs","names":[],"sources":["../../src/awesome/landingTokens.ts"],"sourcesContent":["export type LandingPalette = [string, string, string];\n\nexport const LANDING_PALETTE_LIGHT: LandingPalette = ['#7c5cff', '#d6549e', '#f0885f'];\nexport const LANDING_PALETTE_DARK: LandingPalette = ['#a78bfa', '#ef7fc0', '#f8a878'];\n\nexport const landingGradient = ([from, via, to]: LandingPalette) =>\n  `linear-gradient(105deg, ${from} 8%, ${via} 55%, ${to} 95%)`;\n\n/** Consumers can override the accent of every landing component with this CSS variable. */\nexport const LANDING_GRADIENT_VAR = '--lobe-landing-gradient';\n\nexport const accentGradient = `var(${LANDING_GRADIENT_VAR}, ${landingGradient(LANDING_PALETTE_LIGHT)})`;\n"],"mappings":";AAEA,MAAa,wBAAwC;CAAC;CAAW;CAAW;AAAS;AACrF,MAAa,uBAAuC;CAAC;CAAW;CAAW;AAAS;AAEpF,MAAa,mBAAmB,CAAC,MAAM,KAAK,QAC1C,2BAA2B,KAAK,OAAO,IAAI,QAAQ,GAAG;;AAGxD,MAAa,uBAAuB;AAEpC,MAAa,iBAAiB,OAAO,qBAAqB,IAAI,gBAAgB,qBAAqB,EAAE"}

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

@@ -20,7 +20,7 @@ const Avatar = memo(({ alt, animation, avatar, background, bordered, borderedCol
 		isStringAvatar,
 		isUrlOrElement
 	]);
-	const text = String(isUrlOrElement ? title : avatar);
+	const text = isUrlOrElement ? title : typeof avatar === "string" ? avatar : void 0;
 	const imgAlt = alt || title || "avatar";
 	const hasBackground = hasValidBackground(background);
 	const showImage = isUrlOrElement && isStringAvatar && !isImgError;

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../src/base-ui/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { cssVar, cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport { type AvatarProps } from './type';\nimport {\n  calculateEmojiSize,\n  formatAvatarText,\n  hasValidBackground,\n  isDefaultAntAvatar,\n} from './utils';\n\nconst Avatar = memo<AvatarProps>(\n  ({\n    alt,\n    animation,\n    avatar,\n    background,\n    bordered,\n    borderedColor,\n    className,\n    classNames,\n    crossOrigin,\n    draggable = false,\n    emojiScaleWithBackground = true,\n    loading,\n    ref,\n    shadow,\n    shape = 'square',\n    size = 48,\n    sliceText = true,\n    style,\n    styles: customStyles,\n    title,\n    tooltipProps,\n    unoptimized,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const isStringAvatar = typeof avatar === 'string';\n\n    const [isImgError, setIsImgError] = useState(false);\n\n    const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);\n\n    const emoji = useMemo(\n      () => (avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : undefined),\n      [avatar, isStringAvatar, isUrlOrElement],\n    );\n\n    const text = String(isUrlOrElement ? title : avatar);\n\n    const imgAlt = alt || title || 'avatar';\n\n    const hasBackground = hasValidBackground(background);\n    const showImage = isUrlOrElement && isStringAvatar && !isImgError;\n    const showElement = isUrlOrElement && !isStringAvatar && !isImgError;\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : (\n          formatAvatarText(text || title, sliceText)\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    return (\n      <div\n        {...rest}\n        className={cx(variants({ shadow, variant }), className, classNames?.root)}\n        ref={ref}\n        style={{\n          backgroundColor:\n            (isUrlOrElement && !isImgError) || emoji\n              ? background\n              : background || cssVar.colorBorder,\n          borderRadius: shape === 'circle' ? '50%' : size < 24 ? '33%' : Math.max(size / 6, 2),\n          boxShadow: bordered\n            ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n            : undefined,\n          color: safeReadableColor(background || cssVar.colorBorder),\n          cursor: rest?.onClick ? 'pointer' : undefined,\n          fontSize: size * (emoji ? 0.7 : 0.5),\n          height: size,\n          width: size,\n          ...style,\n          ...customStyles?.root,\n        }}\n      >\n        {loading && (\n          <Center\n            className={cx(styles.loading, classNames?.loading)}\n            flex={'none'}\n            height={'100%'}\n            style={customStyles?.loading}\n            width={'100%'}\n          >\n            <Icon spin icon={Loader2} />\n          </Center>\n        )}\n        {typeof avatar === 'string' && showImage && (\n          <img\n            alt={imgAlt}\n            className={cx(styles.img, classNames?.img)}\n            crossOrigin={crossOrigin}\n            draggable={draggable}\n            height={size}\n            loading={'lazy'}\n            src={avatar}\n            style={customStyles?.img}\n            width={size}\n            onError={() => setIsImgError(true)}\n          />\n        )}\n        {!showImage && (\n          <span className={cx(styles.content, classNames?.content)} style={customStyles?.content}>\n            {showElement ? avatar : customAvatar}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,SAAS,MACZ,EACC,KACA,WACA,QACA,YACA,UACA,eACA,WACA,YACA,aACA,YAAY,OACZ,2BAA2B,MAC3B,SACA,KACA,QACA,QAAQ,UACR,OAAO,IACP,YAAY,MACZ,OACA,QAAQ,cACR,OACA,cACA,aACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,iBAAiB,cAAc,mBAAmB,MAAM,GAAG,CAAC,MAAM,CAAC;CAEzE,MAAM,QAAQ,cACL,UAAU,kBAAkB,CAAC,iBAAiB,SAAS,MAAM,IAAI,KAAA,GACxE;EAAC;EAAQ;EAAgB;CAAc,CACzC;CAEA,MAAM,OAAO,OAAO,iBAAiB,QAAQ,MAAM;CAEnD,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,mBAAmB,UAAU;CACnD,MAAM,YAAY,kBAAkB,kBAAkB,CAAC;CACvD,MAAM,cAAc,kBAAkB,CAAC,kBAAkB,CAAC;CAE1D,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,WAAW,YAAY,IAAI;EACnE;EACL,OAAO;GACL,iBACG,kBAAkB,CAAC,cAAe,QAC/B,aACA,cAAc,OAAO;GAC3B,cAAc,UAAU,WAAW,QAAQ,OAAO,KAAK,QAAQ,KAAK,IAAI,OAAO,GAAG,CAAC;GACnF,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;GACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;GACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,QAAQ;GACR,OAAO;GACP,GAAG;GACH,GAAG,cAAc;EACnB;EApBF,UAAA;GAsBG,WACC,oBAAC,QAAD;IACE,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IACjD,MAAM;IACN,QAAQ;IACR,OAAO,cAAc;IACrB,OAAO;IAEP,UAAA,oBAAC,MAAD;KAAM,MAAA;KAAK,MAAM;IAAU,CAAA;GACrB,CAAA;GAET,OAAO,WAAW,YAAY,aAC7B,oBAAC,OAAD;IACE,KAAK;IACL,WAAW,GAAG,OAAO,KAAK,YAAY,GAAG;IAC5B;IACF;IACX,QAAQ;IACR,SAAS;IACT,KAAK;IACL,OAAO,cAAc;IACrB,OAAO;IACP,eAAe,cAAc,IAAI;GAClC,CAAA;GAEF,CAAC,aACA,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IAAG,OAAO,cAAc;IAC5E,UAAA,cAAc,SAAS;GACpB,CAAA;EAEL;;AAET,CACF;AAEA,OAAO,cAAc"}
+{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../src/base-ui/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\n\nimport { getEmoji } from '@lobehub/fluent-emoji';\nimport { cssVar, cx } from 'antd-style';\nimport { Loader2 } from 'lucide-react';\nimport { memo, useMemo, useState } from 'react';\n\nimport { Center } from '@/Flex';\nimport FluentEmoji from '@/FluentEmoji';\nimport Icon from '@/Icon';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles, variants } from './style';\nimport { type AvatarProps } from './type';\nimport {\n  calculateEmojiSize,\n  formatAvatarText,\n  hasValidBackground,\n  isDefaultAntAvatar,\n} from './utils';\n\nconst Avatar = memo<AvatarProps>(\n  ({\n    alt,\n    animation,\n    avatar,\n    background,\n    bordered,\n    borderedColor,\n    className,\n    classNames,\n    crossOrigin,\n    draggable = false,\n    emojiScaleWithBackground = true,\n    loading,\n    ref,\n    shadow,\n    shape = 'square',\n    size = 48,\n    sliceText = true,\n    style,\n    styles: customStyles,\n    title,\n    tooltipProps,\n    unoptimized,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const isStringAvatar = typeof avatar === 'string';\n\n    const [isImgError, setIsImgError] = useState(false);\n\n    const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);\n\n    const emoji = useMemo(\n      () => (avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : undefined),\n      [avatar, isStringAvatar, isUrlOrElement],\n    );\n\n    const text = isUrlOrElement ? title : typeof avatar === 'string' ? avatar : undefined;\n\n    const imgAlt = alt || title || 'avatar';\n\n    const hasBackground = hasValidBackground(background);\n    const showImage = isUrlOrElement && isStringAvatar && !isImgError;\n    const showElement = isUrlOrElement && !isStringAvatar && !isImgError;\n\n    const customAvatar = useMemo(\n      () =>\n        emoji ? (\n          <FluentEmoji\n            emoji={emoji}\n            size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\n            type={animation ? 'anim' : '3d'}\n            unoptimized={unoptimized}\n          />\n        ) : (\n          formatAvatarText(text || title, sliceText)\n        ),\n      [\n        animation,\n        emoji,\n        hasBackground,\n        size,\n        sliceText,\n        text,\n        title,\n        unoptimized,\n        emojiScaleWithBackground,\n      ],\n    );\n\n    return (\n      <div\n        {...rest}\n        className={cx(variants({ shadow, variant }), className, classNames?.root)}\n        ref={ref}\n        style={{\n          backgroundColor:\n            (isUrlOrElement && !isImgError) || emoji\n              ? background\n              : background || cssVar.colorBorder,\n          borderRadius: shape === 'circle' ? '50%' : size < 24 ? '33%' : Math.max(size / 6, 2),\n          boxShadow: bordered\n            ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\n            : undefined,\n          color: safeReadableColor(background || cssVar.colorBorder),\n          cursor: rest?.onClick ? 'pointer' : undefined,\n          fontSize: size * (emoji ? 0.7 : 0.5),\n          height: size,\n          width: size,\n          ...style,\n          ...customStyles?.root,\n        }}\n      >\n        {loading && (\n          <Center\n            className={cx(styles.loading, classNames?.loading)}\n            flex={'none'}\n            height={'100%'}\n            style={customStyles?.loading}\n            width={'100%'}\n          >\n            <Icon spin icon={Loader2} />\n          </Center>\n        )}\n        {typeof avatar === 'string' && showImage && (\n          <img\n            alt={imgAlt}\n            className={cx(styles.img, classNames?.img)}\n            crossOrigin={crossOrigin}\n            draggable={draggable}\n            height={size}\n            loading={'lazy'}\n            src={avatar}\n            style={customStyles?.img}\n            width={size}\n            onError={() => setIsImgError(true)}\n          />\n        )}\n        {!showImage && (\n          <span className={cx(styles.content, classNames?.content)} style={customStyles?.content}>\n            {showElement ? avatar : customAvatar}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,SAAS,MACZ,EACC,KACA,WACA,QACA,YACA,UACA,eACA,WACA,YACA,aACA,YAAY,OACZ,2BAA2B,MAC3B,SACA,KACA,QACA,QAAQ,UACR,OAAO,IACP,YAAY,MACZ,OACA,QAAQ,cACR,OACA,cACA,aACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,iBAAiB,OAAO,WAAW;CAEzC,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,iBAAiB,cAAc,mBAAmB,MAAM,GAAG,CAAC,MAAM,CAAC;CAEzE,MAAM,QAAQ,cACL,UAAU,kBAAkB,CAAC,iBAAiB,SAAS,MAAM,IAAI,KAAA,GACxE;EAAC;EAAQ;EAAgB;CAAc,CACzC;CAEA,MAAM,OAAO,iBAAiB,QAAQ,OAAO,WAAW,WAAW,SAAS,KAAA;CAE5E,MAAM,SAAS,OAAO,SAAS;CAE/B,MAAM,gBAAgB,mBAAmB,UAAU;CACnD,MAAM,YAAY,kBAAkB,kBAAkB,CAAC;CACvD,MAAM,cAAc,kBAAkB,CAAC,kBAAkB,CAAC;CAE1D,MAAM,eAAe,cAEjB,QACE,oBAAC,aAAD;EACS;EACP,MAAM,mBAAmB,MAAM,eAAe,wBAAwB;EACtE,MAAM,YAAY,SAAS;EACd;CACd,CAAA,IAED,iBAAiB,QAAQ,OAAO,SAAS,GAE7C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,WAAW,YAAY,IAAI;EACnE;EACL,OAAO;GACL,iBACG,kBAAkB,CAAC,cAAe,QAC/B,aACA,cAAc,OAAO;GAC3B,cAAc,UAAU,WAAW,QAAQ,OAAO,KAAK,QAAQ,KAAK,IAAI,OAAO,GAAG,CAAC;GACnF,WAAW,WACP,GAAG,OAAO,cAAc,cAAc,iBAAiB,OAAO,kBAAkB,cAChF,KAAA;GACJ,OAAO,kBAAkB,cAAc,OAAO,WAAW;GACzD,QAAQ,MAAM,UAAU,YAAY,KAAA;GACpC,UAAU,QAAQ,QAAQ,KAAM;GAChC,QAAQ;GACR,OAAO;GACP,GAAG;GACH,GAAG,cAAc;EACnB;EApBF,UAAA;GAsBG,WACC,oBAAC,QAAD;IACE,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IACjD,MAAM;IACN,QAAQ;IACR,OAAO,cAAc;IACrB,OAAO;IAEP,UAAA,oBAAC,MAAD;KAAM,MAAA;KAAK,MAAM;IAAU,CAAA;GACrB,CAAA;GAET,OAAO,WAAW,YAAY,aAC7B,oBAAC,OAAD;IACE,KAAK;IACL,WAAW,GAAG,OAAO,KAAK,YAAY,GAAG;IAC5B;IACF;IACX,QAAQ;IACR,SAAS;IACT,KAAK;IACL,OAAO,cAAc;IACrB,OAAO;IACP,eAAe,cAAc,IAAI;GAClC,CAAA;GAEF,CAAC,aACA,oBAAC,QAAD;IAAM,WAAW,GAAG,OAAO,SAAS,YAAY,OAAO;IAAG,OAAO,cAAc;IAC5E,UAAA,cAAc,SAAS;GACpB,CAAA;EAEL;;AAET,CACF;AAEA,OAAO,cAAc"}

package/es/base-ui/Segmented/atoms.mjs

@@ -13,6 +13,7 @@ const SegmentedRoot = ({ block = false, className, glass = false, shadow = false
 			shadow,
 			variant
 		}), className),
+		"data-variant": variant,
 		...rest
 	});
 };

package/es/base-ui/Segmented/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BaseUIToggleGroup","BaseUIToggle"],"sources":["../../../src/base-ui/Segmented/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseUIToggleGroup } from '@base-ui/react/toggle-group';\nimport { cx } from 'antd-style';\nimport { type ComponentProps, type CSSProperties, type FC, type ReactNode } from 'react';\n\nimport { itemVariants, listVariants, styles } from './style';\nimport type { SegmentedSize, SegmentedVariant } from './type';\n\nexport type SegmentedRootProps<Value extends string = string> = Omit<\n  ComponentProps<typeof BaseUIToggleGroup<Value>>,\n  'className' | 'render'\n> & {\n  block?: boolean;\n  className?: string;\n  glass?: boolean;\n  shadow?: boolean;\n  variant?: SegmentedVariant;\n};\n\nexport const SegmentedRoot = <Value extends string = string>({\n  block = false,\n  className,\n  glass = false,\n  shadow = false,\n  variant = 'filled',\n  ...rest\n}: SegmentedRootProps<Value>) => {\n  return (\n    <BaseUIToggleGroup<Value>\n      className={cx(listVariants({ block, glass, shadow, variant }), className)}\n      {...rest}\n    />\n  );\n};\n\nSegmentedRoot.displayName = 'SegmentedRoot';\n\nexport type SegmentedItemProps<Value extends string = string> = Omit<\n  ComponentProps<typeof BaseUIToggle<Value>>,\n  'className' | 'render'\n> & {\n  block?: boolean;\n  className?: string;\n  size?: SegmentedSize;\n};\n\nexport const SegmentedItem = <Value extends string = string>({\n  block = false,\n  className,\n  size = 'middle',\n  ...rest\n}: SegmentedItemProps<Value>) => {\n  return <BaseUIToggle<Value> className={cx(itemVariants({ block, size }), className)} {...rest} />;\n};\n\nSegmentedItem.displayName = 'SegmentedItem';\n\ninterface SimpleSpanProps {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const SegmentedItemIcon: FC<SimpleSpanProps> = ({ children, className, style }) => (\n  <span className={cx(styles.itemIcon, className)} style={style}>\n    {children}\n  </span>\n);\nSegmentedItemIcon.displayName = 'SegmentedItemIcon';\n\nexport const SegmentedItemLabel: FC<SimpleSpanProps> = ({ children, className, style }) => (\n  <span className={cx(styles.itemLabel, className)} style={style}>\n    {children}\n  </span>\n);\nSegmentedItemLabel.displayName = 'SegmentedItemLabel';\n\nexport interface SegmentedIndicatorProps {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const SegmentedIndicator: FC<SegmentedIndicatorProps> = ({ className, style }) => (\n  <span aria-hidden className={cx(styles.indicator, className)} style={style} />\n);\nSegmentedIndicator.displayName = 'SegmentedIndicator';\n"],"mappings":";;;;;;;AAqBA,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,QAAQ,OACR,SAAS,OACT,UAAU,UACV,GAAG,WAC4B;CAC/B,OACE,oBAACA,aAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAO;GAAO;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACxE,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;AAW5B,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,OAAO,UACP,GAAG,WAC4B;CAC/B,OAAO,oBAACC,QAAD;EAAqB,WAAW,GAAG,aAAa;GAAE;GAAO;EAAK,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAClG;AAEA,cAAc,cAAc;AAQ5B,MAAa,qBAA0C,EAAE,UAAU,WAAW,YAC5E,oBAAC,QAAD;CAAM,WAAW,GAAG,OAAO,UAAU,SAAS;CAAU;CACrD;AACG,CAAA;AAER,kBAAkB,cAAc;AAEhC,MAAa,sBAA2C,EAAE,UAAU,WAAW,YAC7E,oBAAC,QAAD;CAAM,WAAW,GAAG,OAAO,WAAW,SAAS;CAAU;CACtD;AACG,CAAA;AAER,mBAAmB,cAAc;AAOjC,MAAa,sBAAmD,EAAE,WAAW,YAC3E,oBAAC,QAAD;CAAM,eAAA;CAAY,WAAW,GAAG,OAAO,WAAW,SAAS;CAAU;AAAQ,CAAA;AAE/E,mBAAmB,cAAc"}
+{"version":3,"file":"atoms.mjs","names":["BaseUIToggleGroup","BaseUIToggle"],"sources":["../../../src/base-ui/Segmented/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseUIToggleGroup } from '@base-ui/react/toggle-group';\nimport { cx } from 'antd-style';\nimport { type ComponentProps, type CSSProperties, type FC, type ReactNode } from 'react';\n\nimport { itemVariants, listVariants, styles } from './style';\nimport type { SegmentedSize, SegmentedVariant } from './type';\n\nexport type SegmentedRootProps<Value extends string = string> = Omit<\n  ComponentProps<typeof BaseUIToggleGroup<Value>>,\n  'className' | 'render'\n> & {\n  block?: boolean;\n  className?: string;\n  glass?: boolean;\n  shadow?: boolean;\n  variant?: SegmentedVariant;\n};\n\nexport const SegmentedRoot = <Value extends string = string>({\n  block = false,\n  className,\n  glass = false,\n  shadow = false,\n  variant = 'filled',\n  ...rest\n}: SegmentedRootProps<Value>) => {\n  return (\n    <BaseUIToggleGroup<Value>\n      className={cx(listVariants({ block, glass, shadow, variant }), className)}\n      data-variant={variant}\n      {...rest}\n    />\n  );\n};\n\nSegmentedRoot.displayName = 'SegmentedRoot';\n\nexport type SegmentedItemProps<Value extends string = string> = Omit<\n  ComponentProps<typeof BaseUIToggle<Value>>,\n  'className' | 'render'\n> & {\n  block?: boolean;\n  className?: string;\n  size?: SegmentedSize;\n};\n\nexport const SegmentedItem = <Value extends string = string>({\n  block = false,\n  className,\n  size = 'middle',\n  ...rest\n}: SegmentedItemProps<Value>) => {\n  return <BaseUIToggle<Value> className={cx(itemVariants({ block, size }), className)} {...rest} />;\n};\n\nSegmentedItem.displayName = 'SegmentedItem';\n\ninterface SimpleSpanProps {\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const SegmentedItemIcon: FC<SimpleSpanProps> = ({ children, className, style }) => (\n  <span className={cx(styles.itemIcon, className)} style={style}>\n    {children}\n  </span>\n);\nSegmentedItemIcon.displayName = 'SegmentedItemIcon';\n\nexport const SegmentedItemLabel: FC<SimpleSpanProps> = ({ children, className, style }) => (\n  <span className={cx(styles.itemLabel, className)} style={style}>\n    {children}\n  </span>\n);\nSegmentedItemLabel.displayName = 'SegmentedItemLabel';\n\nexport interface SegmentedIndicatorProps {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const SegmentedIndicator: FC<SegmentedIndicatorProps> = ({ className, style }) => (\n  <span aria-hidden className={cx(styles.indicator, className)} style={style} />\n);\nSegmentedIndicator.displayName = 'SegmentedIndicator';\n"],"mappings":";;;;;;;AAqBA,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,QAAQ,OACR,SAAS,OACT,UAAU,UACV,GAAG,WAC4B;CAC/B,OACE,oBAACA,aAAD;EACE,WAAW,GAAG,aAAa;GAAE;GAAO;GAAO;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACxE,gBAAc;EACd,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;AAW5B,MAAa,iBAAgD,EAC3D,QAAQ,OACR,WACA,OAAO,UACP,GAAG,WAC4B;CAC/B,OAAO,oBAACC,QAAD;EAAqB,WAAW,GAAG,aAAa;GAAE;GAAO;EAAK,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAClG;AAEA,cAAc,cAAc;AAQ5B,MAAa,qBAA0C,EAAE,UAAU,WAAW,YAC5E,oBAAC,QAAD;CAAM,WAAW,GAAG,OAAO,UAAU,SAAS;CAAU;CACrD;AACG,CAAA;AAER,kBAAkB,cAAc;AAEhC,MAAa,sBAA2C,EAAE,UAAU,WAAW,YAC7E,oBAAC,QAAD;CAAM,WAAW,GAAG,OAAO,WAAW,SAAS;CAAU;CACtD;AACG,CAAA;AAER,mBAAmB,cAAc;AAOjC,MAAa,sBAAmD,EAAE,WAAW,YAC3E,oBAAC,QAAD;CAAM,eAAA;CAAY,WAAW,GAAG,OAAO,WAAW,SAAS;CAAU;AAAQ,CAAA;AAE/E,mBAAmB,cAAc"}

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

@@ -3,8 +3,9 @@ import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
 //#region src/base-ui/Segmented/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
-	indicator: css`
+const styles = createStaticStyles(({ css, cssVar }) => {
+	return {
+		indicator: css`
     pointer-events: none;
 
     position: absolute;
@@ -17,7 +18,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     border-radius: ${cssVar.borderRadius};
 
     background: ${cssVar.colorBgElevated};
-    box-shadow: ${cssVar.boxShadowTertiary};
+    box-shadow: none;
 
     transition-timing-function: ${cssVar.motionEaseOut};
     transition-duration: 240ms;
@@ -31,130 +32,131 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       transition-duration: 0s;
     }
   `,
-	item: css`
-    cursor: pointer;
-    user-select: none;
-
-    position: relative;
-    z-index: 1;
-
-    display: inline-flex;
-    flex-shrink: 0;
-    gap: 6px;
-    align-items: center;
-    justify-content: center;
-
-    box-sizing: border-box;
-    border: 0;
-
-    font-weight: 500;
-    color: ${cssVar.colorTextSecondary};
-    white-space: nowrap;
-
-    background: transparent;
-    outline: none;
-
-    transition:
-      color 120ms ${cssVar.motionEaseOut},
-      transform 120ms ${cssVar.motionEaseOut};
-
-    &:hover:not([data-disabled], [data-pressed]) {
-      color: ${cssVar.colorText};
-    }
-
-    &:active:not([data-disabled]) {
-      transform: scale(0.98);
-    }
-
-    border-radius: ${cssVar.borderRadius};
-    ${focusRing};
-
-    &[data-pressed] {
-      color: ${cssVar.colorText};
-    }
-
-    &[data-disabled] {
-      cursor: not-allowed;
-      color: ${cssVar.colorTextDisabled};
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      transition-duration: 0s;
-    }
-  `,
-	itemBlock: css`
-    flex: 1 1 0;
-  `,
-	itemIcon: css`
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  `,
-	itemLabel: css`
-    display: inline-flex;
-    align-items: center;
-  `,
-	itemLarge: css`
-    height: 36px;
-    padding-inline: 16px;
-    border-radius: ${cssVar.borderRadius};
-    font-size: 14px;
-  `,
-	itemMiddle: css`
-    height: 32px;
-    padding-inline: 12px;
-    border-radius: ${cssVar.borderRadius};
-    font-size: 13px;
-  `,
-	itemSmall: css`
-    height: 26px;
-    padding-inline: 10px;
-    border-radius: ${cssVar.borderRadius};
-    font-size: 12px;
-  `,
-	list: css`
-    position: relative;
-
-    display: inline-flex;
-    flex-wrap: nowrap;
-    gap: 4px;
-    align-items: center;
-    align-self: flex-start;
-
-    box-sizing: border-box;
-    padding: 3px;
-    border-radius: ${cssVar.borderRadiusLG};
-
-    &[data-orientation='vertical'] {
-      flex-direction: column;
-      align-items: stretch;
-      align-self: stretch;
-    }
-  `,
-	listBlock: css`
-    display: flex;
-    align-self: stretch;
-    width: 100%;
-  `,
-	listFilled: css`
-    border: 1px solid ${cssVar.colorFillQuaternary};
-    background: ${cssVar.colorBgLayout};
-  `,
-	listGlass: staticStylish.blur,
-	listOutlined: css`
-    border: 1px solid ${cssVar.colorBorderSecondary};
-    background: transparent;
-  `,
-	listShadow: staticStylish.shadow,
-	root: css`
-    display: inline-flex;
-
-    &[data-block='true'] {
+		item: css`
+      cursor: pointer;
+      user-select: none;
+
+      position: relative;
+      z-index: 1;
+
+      display: inline-flex;
+      flex-shrink: 0;
+      gap: 6px;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: border-box;
+      border: 0;
+      border-radius: ${cssVar.borderRadius};
+
+      font-weight: 500;
+      color: ${cssVar.colorTextSecondary};
+      white-space: nowrap;
+
+      background: transparent;
+      outline: none;
+
+      transition:
+        color 120ms ${cssVar.motionEaseOut},
+        transform 120ms ${cssVar.motionEaseOut};
+
+      &:hover:not([data-disabled], [data-pressed]) {
+        color: ${cssVar.colorText};
+      }
+
+      &:active:not([data-disabled]) {
+        transform: scale(0.98);
+      }
+
+      ${focusRing};
+
+      &[data-pressed] {
+        color: ${cssVar.colorText};
+      }
+
+      &[data-disabled] {
+        cursor: not-allowed;
+        color: ${cssVar.colorTextDisabled};
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition-duration: 0s;
+      }
+    `,
+		itemBlock: css`
+      flex: 1 1 0;
+    `,
+		itemIcon: css`
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    `,
+		itemLabel: css`
+      display: inline-flex;
+      align-items: center;
+    `,
+		itemLarge: css`
+      height: 36px;
+      padding-inline: 16px;
+      border-radius: ${cssVar.borderRadius};
+      font-size: 14px;
+    `,
+		itemMiddle: css`
+      height: 32px;
+      padding-inline: 12px;
+      border-radius: ${cssVar.borderRadius};
+      font-size: 13px;
+    `,
+		itemSmall: css`
+      height: 26px;
+      padding-inline: 10px;
+      border-radius: ${cssVar.borderRadius};
+      font-size: 12px;
+    `,
+		list: css`
+      position: relative;
+
+      display: inline-flex;
+      flex-wrap: nowrap;
+      gap: 4px;
+      align-items: center;
+      align-self: flex-start;
+
+      box-sizing: border-box;
+      padding: 3px;
+      border-radius: ${cssVar.borderRadiusLG};
+
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+        align-items: stretch;
+        align-self: stretch;
+      }
+    `,
+		listBlock: css`
       display: flex;
+      align-self: stretch;
       width: 100%;
-    }
-  `
-}));
+    `,
+		listFilled: css`
+      border: 1px solid ${cssVar.colorFillQuaternary};
+      background: ${cssVar.colorBgLayout};
+    `,
+		listGlass: staticStylish.blur,
+		listOutlined: css`
+      border: 1px solid ${cssVar.colorBorderSecondary};
+      background: transparent;
+    `,
+		listShadow: staticStylish.shadow,
+		root: css`
+      display: inline-flex;
+
+      &[data-block='true'] {
+        display: flex;
+        width: 100%;
+      }
+    `
+	};
+});
 const listVariants = cva(styles.list, {
 	defaultVariants: {
 		block: false,