@lobehub/ui 5.51.2 → 5.52.0

package/es/SearchBar/SearchBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.mjs","names":["useControlledState"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\nimport Input from '@/Input';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          placeholder={placeholder ?? 'Type keywords...'}\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            compact\n            className={cx(styles.tag, shortKeyClassName)}\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,CAAC,GAC1D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,CAAC,GACtE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cACN,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAClD,CAAC,QAAQ,CACX;CAEA,WACE,cACM;EACJ,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GACA;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAU;EAArD,UAAA;GACG,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAAC,OAAD;IACE,YAAA;IACA,WAAW;IACX,aAAa,eAAe;IAC5B,KAAK;IACL,OAAO;IACP,OAAO;IACP,QACE,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,EAAE;IACzB,CAAA;IAEH,SAAS,MAAM;KACb,SAAS,CAAC;KACV,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,IAAI;IACjB;IACA,WAAW,MAAM;KACf,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,CAAC;IACd;IACA,UAAU,MAAM;KACd,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IACA,eAAe,MAAM;KACnB,eAAe,CAAC;KAChB,WAAW,UAAU;IACvB;IACA,GAAI;GACL,CAAA;GACA,kBAAkB,WAAW,CAAC,cAC7B,oBAAC,QAAD;IACE,SAAA;IACA,WAAW,GAAG,OAAO,KAAK,iBAAiB;IAC3C,MAAM;IACN,OAAO;GACR,CAAA;EAEA;;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"SearchBar.mjs","names":["useControlledState"],"sources":["../../src/SearchBar/SearchBar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideLoader2, Search } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport Spotlight from '@/awesome/Spotlight';\nimport { Input } from '@/base-ui/Input';\nimport Hotkey from '@/Hotkey';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport { type SearchBarProps } from './type';\n\nconst SearchBar = memo<SearchBarProps>(\n  ({\n    defaultValue = '',\n    spotlight,\n    className,\n    value,\n    onInputChange,\n    placeholder,\n    enableShortKey,\n    shortKey = 'mod+k',\n    onSearch,\n    loading,\n    style,\n    onChange,\n    onBlur,\n    onPressEnter,\n    onFocus,\n    styles: { input: inputStyle, shortKey: shortKeyStyle } = {},\n    classNames: { input: inputClassName, shortKey: shortKeyClassName } = {},\n    ...rest\n  }) => {\n    const [inputValue, setInputValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange: onInputChange,\n      value,\n    });\n\n    const [showTag, setShowTag] = useState<boolean>(true);\n    const inputReference: any = useRef<HTMLInputElement>(null);\n    const hotkey = useMemo(\n      () => (shortKey.includes('+') ? shortKey : `mod+${shortKey}`),\n      [shortKey],\n    );\n\n    useHotkeys(\n      hotkey,\n      () => {\n        if (!enableShortKey) return;\n        inputReference.current?.focus();\n      },\n      {\n        enableOnFormTags: true,\n        enabled: !!enableShortKey && !!shortKey,\n        preventDefault: true,\n      },\n    );\n\n    return (\n      <div className={cx(styles.search, className)} style={style}>\n        {spotlight && <Spotlight />}\n        <Input\n          allowClear\n          className={inputClassName}\n          placeholder={placeholder ?? 'Type keywords...'}\n          ref={inputReference}\n          style={inputStyle}\n          value={inputValue}\n          prefix={\n            <Icon\n              className={styles.icon}\n              icon={loading ? LucideLoader2 : Search}\n              size=\"small\"\n              spin={loading}\n              style={{ marginRight: 4 }}\n            />\n          }\n          onBlur={(e) => {\n            onBlur?.(e);\n            setInputValue(e.target.value);\n            setShowTag(true);\n          }}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onChange?.(e);\n          }}\n          onFocus={(e) => {\n            onFocus?.(e);\n            setShowTag(false);\n          }}\n          onPressEnter={(e) => {\n            onPressEnter?.(e);\n            onSearch?.(inputValue);\n          }}\n          {...rest}\n        />\n        {enableShortKey && showTag && !inputValue && (\n          <Hotkey\n            compact\n            className={cx(styles.tag, shortKeyClassName)}\n            keys={hotkey}\n            style={shortKeyStyle}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nSearchBar.displayName = 'SearchBar';\n\nexport default SearchBar;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,YAAY,MACf,EACC,eAAe,IACf,WACA,WACA,OACA,eACA,aACA,gBACA,WAAW,SACX,UACA,SACA,OACA,UACA,QACA,cACA,SACA,QAAQ,EAAE,OAAO,YAAY,UAAU,kBAAkB,CAAC,GAC1D,YAAY,EAAE,OAAO,gBAAgB,UAAU,sBAAsB,CAAC,GACtE,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiBA,cAAmB,cAAc;EACnE;EACA,UAAU;EACV;CACF,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAkB,IAAI;CACpD,MAAM,iBAAsB,OAAyB,IAAI;CACzD,MAAM,SAAS,cACN,SAAS,SAAS,GAAG,IAAI,WAAW,OAAO,YAClD,CAAC,QAAQ,CACX;CAEA,WACE,cACM;EACJ,IAAI,CAAC,gBAAgB;EACrB,eAAe,SAAS,MAAM;CAChC,GACA;EACE,kBAAkB;EAClB,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;EAC/B,gBAAgB;CAClB,CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,QAAQ,SAAS;EAAU;EAArD,UAAA;GACG,aAAa,oBAAC,WAAD,CAAY,CAAA;GAC1B,oBAAC,OAAD;IACE,YAAA;IACA,WAAW;IACX,aAAa,eAAe;IAC5B,KAAK;IACL,OAAO;IACP,OAAO;IACP,QACE,oBAAC,MAAD;KACE,WAAW,OAAO;KAClB,MAAM,UAAU,gBAAgB;KAChC,MAAK;KACL,MAAM;KACN,OAAO,EAAE,aAAa,EAAE;IACzB,CAAA;IAEH,SAAS,MAAM;KACb,SAAS,CAAC;KACV,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,IAAI;IACjB;IACA,WAAW,MAAM;KACf,cAAc,EAAE,OAAO,KAAK;KAC5B,WAAW,CAAC;IACd;IACA,UAAU,MAAM;KACd,UAAU,CAAC;KACX,WAAW,KAAK;IAClB;IACA,eAAe,MAAM;KACnB,eAAe,CAAC;KAChB,WAAW,UAAU;IACvB;IACA,GAAI;GACL,CAAA;GACA,kBAAkB,WAAW,CAAC,cAC7B,oBAAC,QAAD;IACE,SAAA;IACA,WAAW,GAAG,OAAO,KAAK,iBAAiB;IAC3C,MAAM;IACN,OAAO;GACR,CAAA;EAEA;;AAET,CACF;AAEA,UAAU,cAAc"}

package/es/SearchBar/type.d.mts

@@ -1,5 +1,5 @@
-import { InputProps } from "../Input/type.mjs";
-import "../Input/index.mjs";
+import { InputProps } from "../base-ui/Input/type.mjs";
+import "../base-ui/Input/index.mjs";
 import { CSSProperties } from "react";
 //#region src/SearchBar/type.d.ts
 interface SearchBarProps extends Omit<InputProps, 'styles' | 'classNames'> {

package/es/Segmented/Segmented.mjs

@@ -2,8 +2,8 @@
 import { variants } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Segmented } from "antd";
 import { cx } from "antd-style";
+import { Segmented } from "antd";
 //#region src/Segmented/Segmented.tsx
 /**
 * @deprecated Use `Segmented` from `@lobehub/ui/base-ui` instead.

package/es/Select/Select.mjs

@@ -3,9 +3,9 @@ import Icon from "../Icon/Icon.mjs";
 import { variants } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Select } from "antd";
 import { cx, useThemeMode } from "antd-style";
 import { ChevronDownIcon } from "lucide-react";
+import { Select } from "antd";
 //#region src/Select/Select.tsx
 /**
 * @deprecated Use `Select` from `@lobehub/ui/base-ui` instead.

package/es/SliderWithInput/SliderWithInput.mjs

@@ -3,8 +3,8 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import InputNumber$1 from "../Input/InputNumber.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Slider } from "antd";
 import { isNull } from "es-toolkit/compat";
+import { Slider } from "antd";
 //#region src/SliderWithInput/SliderWithInput.tsx
 const SliderWithInput = memo(({ step, value, onChange, max, min, defaultValue, size, controls, gap = 16, style, className, classNames, styles, disabled, unlimitedInput = false, changeOnWheel, ...rest }) => {
 	const handleOnchange = (value) => {

package/es/Tabs/Tabs.mjs

@@ -2,9 +2,9 @@
 import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
 import { styles, variants } from "./style.mjs";
 import { jsx } from "react/jsx-runtime";
-import { Tabs } from "antd";
 import { cx } from "antd-style";
 import { MoreHorizontalIcon } from "lucide-react";
+import { Tabs } from "antd";
 //#region src/Tabs/Tabs.tsx
 /**
 * @deprecated Use `Tabs` from `@lobehub/ui/base-ui` instead.

package/es/Tag/Tag.mjs

@@ -4,8 +4,8 @@ import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } fr
 import { variants } from "./styles.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Tag } from "antd";
 import { cssVar, cx } from "antd-style";
+import { Tag } from "antd";
 //#region src/Tag/Tag.tsx
 /**
 * @deprecated Use `Tag` from `@lobehub/ui/base-ui` instead.

package/es/ThemeProvider/ConfigProvider.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { ConfigProvider } from "antd";
 import { cssVar } from "antd-style";
+import { ConfigProvider } from "antd";
 //#region src/ThemeProvider/ConfigProvider.tsx
 const ConfigProvider$1 = memo(({ children }) => {
 	return /* @__PURE__ */ jsx(ConfigProvider, {

package/es/ThemeProvider/ThemeProvider.mjs

@@ -10,9 +10,9 @@ import ConfigProvider$1 from "./ConfigProvider.mjs";
 import GlobalStyle, { EssentialStyle } from "./GlobalStyle/index.mjs";
 import { memo, useCallback, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { App } from "antd";
 import { ThemeProvider } from "antd-style";
 import { merge } from "es-toolkit/compat";
+import { App } from "antd";
 //#region src/ThemeProvider/ThemeProvider.tsx
 const ThemeProvider$1 = memo(({ appId = LOBE_THEME_APP_ID, children, customStylish, customToken, enableCustomFonts = true, enableGlobalStyle = true, customFonts, customTheme = {}, className, style, theme: antdTheme, ...rest }) => {
 	const genCdnUrl = useCdnFn();

package/es/ThemeSwitch/ThemeSwitch.mjs

@@ -5,8 +5,8 @@ import DropdownMenu from "../base-ui/DropdownMenu/DropdownMenu.mjs";
 import ActionIcon from "../base-ui/ActionIcon/ActionIcon.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Select } from "antd";
 import { Monitor, Moon, Sun } from "lucide-react";
+import { Select } from "antd";
 //#region src/ThemeSwitch/ThemeSwitch.tsx
 const DEFAULT_ICON_SET = {
 	auto: Monitor,

package/es/Toc/Toc.mjs

@@ -4,8 +4,8 @@ import { mapItems } from "./utils.mjs";
 import TocMobile from "./TocMobile.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Anchor } from "antd";
 import { cx } from "antd-style";
+import { Anchor } from "antd";
 //#region src/Toc/Toc.tsx
 const Toc = memo(({ activeKey, items, getContainer, isMobile, headerHeight = 64, tocWidth = 176 }) => {
 	const cssVariables = useMemo(() => ({

package/es/Toc/TocMobile.mjs

@@ -4,9 +4,9 @@ import { styles } from "./style.mjs";
 import { mapItems } from "./utils.mjs";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Anchor, Collapse, ConfigProvider } from "antd";
 import useMergeState from "use-merge-value";
 import { PanelTopClose, PanelTopOpen } from "lucide-react";
+import { Anchor, Collapse, ConfigProvider } from "antd";
 //#region src/Toc/TocMobile.tsx
 const TocMobile = memo(({ items, activeKey, onChange, getContainer, headerHeight = 64, tocWidth = 176 }) => {
 	const [activeLink, setActiveLink] = useMergeState("", {

package/es/awesome/AgentSkillCard/AgentSkillCard.mjs

@@ -1,9 +1,9 @@
 "use client";
 import Icon from "../../Icon/Icon.mjs";
+import Segmented from "../../base-ui/Segmented/Segmented.mjs";
 import Snippet from "../../Snippet/Snippet.mjs";
 import { DEFAULT_SKILL_AGENTS } from "./agents.mjs";
 import { renderLandingIcon } from "../landingIcon.mjs";
-import Segmented from "../../base-ui/Segmented/Segmented.mjs";
 import { styles } from "./style.mjs";
 import { memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/es/awesome/Hero/Hero.mjs

@@ -9,8 +9,8 @@ import GithubIcon from "../../icons/lucideExtra/GithubIcon.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ConfigProvider } from "antd";
 import { useResponsive } from "antd-style";
+import { ConfigProvider } from "antd";
 //#region src/awesome/Hero/Hero.tsx
 const Hero = memo(({ title, description, actions, Link }) => {
 	const { mobile } = useResponsive();

package/es/awesome/LandingSection/LandingSection.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { LandingActions } from "../landingActions.mjs";
 import Tag from "../../base-ui/Tag/Tag.mjs";
+import { LandingActions } from "../landingActions.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/es/base-ui/Anchor/Anchor.d.mts

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

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

@@ -0,0 +1,141 @@
+"use client";
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import { styles } from "./style.mjs";
+import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+import { useMergeRefs } from "react-merge-refs";
+//#region src/base-ui/Anchor/Anchor.tsx
+const SCROLL_LOCK_FALLBACK_MS = 1e3;
+const flatten = (items) => items.flatMap((item) => [item, ...flatten(item.children ?? [])]);
+const getTarget = (href) => {
+	const hash = href.split("#")[1];
+	if (!hash) return null;
+	try {
+		return document.getElementById(decodeURIComponent(hash));
+	} catch {
+		return document.getElementById(hash);
+	}
+};
+const isWindow = (container) => container === window;
+const getRelativeTop = (element, container) => element.getBoundingClientRect().top - (isWindow(container) ? 0 : container.getBoundingClientRect().top);
+const getScrollTop = (container) => isWindow(container) ? window.scrollY : container.scrollTop;
+const getActiveKey = (items, container, offset) => {
+	let activeKey = null;
+	let activeTop = -Infinity;
+	for (const item of flatten(items)) {
+		const target = getTarget(item.href);
+		if (!target) continue;
+		const top = getRelativeTop(target, container);
+		if (top <= offset + 1 && top >= activeTop) {
+			activeKey = item.key;
+			activeTop = top;
+		}
+	}
+	return activeKey;
+};
+const Anchor = memo(({ activeKey, className, getContainer, items, offset = 0, onChange, onClick, ref, ...rest }) => {
+	const [mergedActiveKey, setMergedActiveKey] = useMergeState(null, {
+		onChange,
+		value: activeKey
+	});
+	const scrollLockRef = useRef(false);
+	const navRef = useRef(null);
+	const mergedRef = useMergeRefs([ref, navRef]);
+	const [marker, setMarker] = useState();
+	const lockTimerRef = useRef(void 0);
+	const resolveContainer = useEventCallback(() => getContainer?.() ?? window);
+	const setActive = useEventCallback(setMergedActiveKey);
+	const spy = useEventCallback(() => {
+		if (scrollLockRef.current) return;
+		setActive(getActiveKey(items, resolveContainer(), offset));
+	});
+	useEffect(() => {
+		const container = resolveContainer();
+		let frame = 0;
+		const handleScroll = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(spy);
+		};
+		spy();
+		container.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			cancelAnimationFrame(frame);
+			container.removeEventListener("scroll", handleScroll);
+		};
+	}, [
+		items,
+		offset,
+		resolveContainer,
+		spy
+	]);
+	useEffect(() => () => clearTimeout(lockTimerRef.current), []);
+	useLayoutEffect(() => {
+		const nav = navRef.current;
+		if (!nav) return;
+		const place = () => {
+			const link = [...nav.querySelectorAll("a[data-key]")].find((element) => element.dataset.key === mergedActiveKey);
+			setMarker(link ? {
+				height: link.offsetHeight,
+				insetBlockStart: link.offsetTop
+			} : void 0);
+		};
+		place();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(place);
+		observer.observe(nav);
+		return () => observer.disconnect();
+	}, [items, mergedActiveKey]);
+	const handleClick = (event, item) => {
+		onClick?.(event, item);
+		if (event.defaultPrevented || event.button !== 0) return;
+		if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+		const target = getTarget(item.href);
+		if (!target) return;
+		event.preventDefault();
+		const container = resolveContainer();
+		const top = getRelativeTop(target, container) + getScrollTop(container) - offset;
+		const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+		const release = () => {
+			scrollLockRef.current = false;
+		};
+		scrollLockRef.current = true;
+		setActive(item.key);
+		clearTimeout(lockTimerRef.current);
+		lockTimerRef.current = setTimeout(release, SCROLL_LOCK_FALLBACK_MS);
+		container.addEventListener("scrollend", release, { once: true });
+		container.scrollTo({
+			behavior: reduceMotion ? "auto" : "smooth",
+			top
+		});
+	};
+	const renderList = (list) => /* @__PURE__ */ jsx("ul", {
+		className: styles.list,
+		children: list.map((item) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
+			"aria-current": item.key === mergedActiveKey ? "location" : void 0,
+			className: styles.link,
+			"data-key": item.key,
+			href: item.href,
+			title: typeof item.title === "string" ? item.title : void 0,
+			onClick: (event) => handleClick(event, item),
+			children: item.title
+		}), item.children && item.children.length > 0 && renderList(item.children)] }, item.key))
+	});
+	return /* @__PURE__ */ jsxs("nav", {
+		className: cx(styles.root, className),
+		ref: mergedRef,
+		...rest,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: styles.marker,
+			hidden: !marker,
+			style: marker
+		}), renderList(items)]
+	});
+});
+Anchor.displayName = "Anchor";
+//#endregion
+export { Anchor as default };
+
+//# sourceMappingURL=Anchor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Anchor.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Anchor/Anchor.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport {\n  type CSSProperties,\n  memo,\n  type MouseEvent,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\nimport useControlledState from 'use-merge-value';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\n\nimport { styles } from './style';\nimport type { AnchorItem, AnchorProps } from './type';\n\ntype ScrollContainer = HTMLElement | Window;\n\nconst SCROLL_LOCK_FALLBACK_MS = 1000;\n\nconst flatten = (items: AnchorItem[]): AnchorItem[] =>\n  items.flatMap((item) => [item, ...flatten(item.children ?? [])]);\n\nconst getTarget = (href: string) => {\n  const hash = href.split('#')[1];\n  if (!hash) return null;\n  try {\n    return document.getElementById(decodeURIComponent(hash));\n  } catch {\n    return document.getElementById(hash);\n  }\n};\n\nconst isWindow = (container: ScrollContainer): container is Window => container === window;\n\nconst getRelativeTop = (element: HTMLElement, container: ScrollContainer) =>\n  element.getBoundingClientRect().top -\n  (isWindow(container) ? 0 : container.getBoundingClientRect().top);\n\nconst getScrollTop = (container: ScrollContainer) =>\n  isWindow(container) ? window.scrollY : container.scrollTop;\n\nconst getActiveKey = (\n  items: AnchorItem[],\n  container: ScrollContainer,\n  offset: number,\n): string | null => {\n  let activeKey: string | null = null;\n  let activeTop = -Infinity;\n  for (const item of flatten(items)) {\n    const target = getTarget(item.href);\n    if (!target) continue;\n    const top = getRelativeTop(target, container);\n    if (top <= offset + 1 && top >= activeTop) {\n      activeKey = item.key;\n      activeTop = top;\n    }\n  }\n  return activeKey;\n};\n\nconst Anchor = memo<AnchorProps>(\n  ({ activeKey, className, getContainer, items, offset = 0, onChange, onClick, ref, ...rest }) => {\n    const [mergedActiveKey, setMergedActiveKey] = useControlledState<string | null>(null, {\n      onChange,\n      value: activeKey,\n    });\n    const scrollLockRef = useRef(false);\n    const navRef = useRef<HTMLElement>(null);\n    const mergedRef = useMergeRefs([ref, navRef]);\n    const [marker, setMarker] = useState<CSSProperties>();\n    const lockTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n\n    const resolveContainer = useEventCallback((): ScrollContainer => getContainer?.() ?? window);\n    const setActive = useEventCallback(setMergedActiveKey);\n    const spy = useEventCallback(() => {\n      if (scrollLockRef.current) return;\n      setActive(getActiveKey(items, resolveContainer(), offset));\n    });\n\n    useEffect(() => {\n      const container = resolveContainer();\n      let frame = 0;\n      const handleScroll = () => {\n        cancelAnimationFrame(frame);\n        frame = requestAnimationFrame(spy);\n      };\n      spy();\n      container.addEventListener('scroll', handleScroll, { passive: true });\n      return () => {\n        cancelAnimationFrame(frame);\n        container.removeEventListener('scroll', handleScroll);\n      };\n    }, [items, offset, resolveContainer, spy]);\n\n    useEffect(() => () => clearTimeout(lockTimerRef.current), []);\n\n    useLayoutEffect(() => {\n      const nav = navRef.current;\n      if (!nav) return;\n      const place = () => {\n        const link = [...nav.querySelectorAll<HTMLElement>('a[data-key]')].find(\n          (element) => element.dataset.key === mergedActiveKey,\n        );\n        setMarker(\n          link ? { height: link.offsetHeight, insetBlockStart: link.offsetTop } : undefined,\n        );\n      };\n      place();\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(place);\n      observer.observe(nav);\n      return () => observer.disconnect();\n    }, [items, mergedActiveKey]);\n\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>, item: AnchorItem) => {\n      onClick?.(event, item);\n      if (event.defaultPrevented || event.button !== 0) return;\n      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n\n      const target = getTarget(item.href);\n      if (!target) return;\n      event.preventDefault();\n\n      const container = resolveContainer();\n      const top = getRelativeTop(target, container) + getScrollTop(container) - offset;\n      const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n\n      // Smooth scrolling may never bring a heading near the page end up to the offset line, so the\n      // clicked item is pinned as active until the scroll settles.\n      const release = () => {\n        scrollLockRef.current = false;\n      };\n      scrollLockRef.current = true;\n      setActive(item.key);\n      clearTimeout(lockTimerRef.current);\n      lockTimerRef.current = setTimeout(release, SCROLL_LOCK_FALLBACK_MS);\n      container.addEventListener('scrollend', release, { once: true });\n      container.scrollTo({ behavior: reduceMotion ? 'auto' : 'smooth', top });\n    };\n\n    const renderList = (list: AnchorItem[]) => (\n      <ul className={styles.list}>\n        {list.map((item) => (\n          <li key={item.key}>\n            <a\n              aria-current={item.key === mergedActiveKey ? 'location' : undefined}\n              className={styles.link}\n              data-key={item.key}\n              href={item.href}\n              title={typeof item.title === 'string' ? item.title : undefined}\n              onClick={(event) => handleClick(event, item)}\n            >\n              {item.title}\n            </a>\n            {item.children && item.children.length > 0 && renderList(item.children)}\n          </li>\n        ))}\n      </ul>\n    );\n\n    return (\n      <nav className={cx(styles.root, className)} ref={mergedRef} {...rest}>\n        <span aria-hidden className={styles.marker} hidden={!marker} style={marker} />\n        {renderList(items)}\n      </nav>\n    );\n  },\n);\n\nAnchor.displayName = 'Anchor';\n\nexport default Anchor;\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { AnchorItem, AnchorProps } from "./type.mjs";
+import Anchor from "./Anchor.mjs";
+export { type AnchorItem, type AnchorProps, Anchor as default };

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

@@ -0,0 +1,80 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Anchor/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	link: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    font-size: 14px;
+    line-height: 1.4;
+    color: ${cssVar.colorTextSecondary};
+    overflow-wrap: anywhere;
+
+    transition: color 0.15s ease;
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+
+    &[aria-current='location'] {
+      font-weight: 500;
+      color: ${cssVar.colorText};
+    }
+
+    &:focus-visible {
+      border-radius: 4px;
+      outline: 2px solid ${cssVar.colorText};
+      outline-offset: 2px;
+    }
+  `,
+	list: css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    margin: 0;
+    padding-block: 0;
+    padding-inline: 14px 0;
+    border-inline-start: 1px solid ${cssVar.colorBorderSecondary};
+
+    list-style: none;
+
+    & & {
+      margin-block-start: 8px;
+      padding-inline-start: 12px;
+      border-inline-start: none;
+
+      a {
+        font-size: 13px;
+      }
+    }
+  `,
+	marker: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-inline-start: -1px;
+
+    width: 2px;
+    border-radius: 2px;
+
+    background: ${cssVar.colorText};
+
+    transition:
+      inset-block-start 0.2s ${cssVar.motionEaseOut},
+      height 0.2s ${cssVar.motionEaseOut};
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  `,
+	root: css`
+    position: relative;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Anchor/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  link: css`\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n\n    font-size: 14px;\n    line-height: 1.4;\n    color: ${cssVar.colorTextSecondary};\n    overflow-wrap: anywhere;\n\n    transition: color 0.15s ease;\n\n    &:hover {\n      color: ${cssVar.colorText};\n    }\n\n    &[aria-current='location'] {\n      font-weight: 500;\n      color: ${cssVar.colorText};\n    }\n\n    &:focus-visible {\n      border-radius: 4px;\n      outline: 2px solid ${cssVar.colorText};\n      outline-offset: 2px;\n    }\n  `,\n  list: css`\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n\n    margin: 0;\n    padding-block: 0;\n    padding-inline: 14px 0;\n    border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n\n    list-style: none;\n\n    & & {\n      margin-block-start: 8px;\n      padding-inline-start: 12px;\n      border-inline-start: none;\n\n      a {\n        font-size: 13px;\n      }\n    }\n  `,\n  marker: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-inline-start: -1px;\n\n    width: 2px;\n    border-radius: 2px;\n\n    background: ${cssVar.colorText};\n\n    transition:\n      inset-block-start 0.2s ${cssVar.motionEaseOut},\n      height 0.2s ${cssVar.motionEaseOut};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n  root: css`\n    position: relative;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;aAQE,OAAO,mBAAmB;;;;;;eAMxB,OAAO,UAAU;;;;;eAKjB,OAAO,UAAU;;;;;2BAKL,OAAO,UAAU;;;;CAI1C,MAAM,GAAG;;;;;;;;qCAQ0B,OAAO,qBAAqB;;;;;;;;;;;;;;CAc/D,QAAQ,GAAG;;;;;;;;;kBASK,OAAO,UAAU;;;+BAGJ,OAAO,cAAc;oBAChC,OAAO,cAAc;;;;;;CAMvC,MAAM,GAAG;;;AAGX,EAAE"}

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

@@ -0,0 +1,20 @@
+import { ComponentProps, MouseEvent, ReactNode, Ref } from "react";
+//#region src/base-ui/Anchor/type.d.ts
+interface AnchorItem {
+  children?: AnchorItem[];
+  href: string;
+  key: string;
+  title: ReactNode;
+}
+interface AnchorProps extends Omit<ComponentProps<'nav'>, 'children' | 'onChange' | 'onClick'> {
+  activeKey?: string | null;
+  getContainer?: () => HTMLElement | Window | null | undefined;
+  items: AnchorItem[];
+  offset?: number;
+  onChange?: (key: string | null) => void;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>, item: AnchorItem) => void;
+  ref?: Ref<HTMLElement>;
+}
+//#endregion
+export { AnchorItem, AnchorProps };
+//# sourceMappingURL=type.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AutoComplete.mjs","names":["inputVariants","inputStyles","styles"],"sources":["../../../src/base-ui/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx, useThemeMode } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { memo, useMemo, useRef } from 'react';\n\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { inputStyles, inputVariants } from '@/base-ui/Input';\nimport { useLayerZIndex } from '@/base-ui/zIndex';\nimport Icon from '@/Icon';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { styles } from './style';\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(\n  ({\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    options = [],\n    onChange,\n    onSearch,\n    allowClear,\n    disabled,\n    placeholder,\n    prefix,\n    suffix,\n    emptyText,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const appElement = useAppElement();\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const { ref: positionerRef, zIndex } = useLayerZIndex<HTMLDivElement>('floating');\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    const items = useMemo<AutoCompleteOption[]>(\n      () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\n      [options],\n    );\n\n    return (\n      <Autocomplete.Root\n        openOnInputClick\n        disabled={disabled}\n        itemToStringValue={(item) => (item as AutoCompleteOption).value}\n        items={items}\n        onValueChange={(value) => {\n          onChange?.(value);\n          onSearch?.(value);\n        }}\n        {...rest}\n      >\n        <div\n          className={cx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\n          data-disabled={disabled ? '' : undefined}\n          ref={anchorRef}\n          style={style}\n        >\n          {prefix && <span className={inputStyles.slot}>{prefix}</span>}\n          <Autocomplete.Input\n            className={cx(inputStyles.input, classNames?.input)}\n            placeholder={placeholder}\n            style={customStyles?.input}\n          />\n          {allowClear && (\n            <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\n              <Icon icon={XIcon} size={14} />\n            </Autocomplete.Clear>\n          )}\n          {suffix && <span className={inputStyles.slot}>{suffix}</span>}\n        </div>\n        <Autocomplete.Portal container={appElement ?? undefined}>\n          <Autocomplete.Positioner\n            anchor={anchorRef}\n            className={styles.positioner}\n            collisionPadding={getFloatingCollisionPadding()}\n            ref={positionerRef}\n            sideOffset={4}\n            style={zIndex === undefined ? undefined : { zIndex }}\n          >\n            <Autocomplete.Popup\n              className={cx(styles.popup, classNames?.popup)}\n              style={customStyles?.popup}\n            >\n              {emptyText && (\n                <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\n              )}\n              <Autocomplete.List className={styles.list}>\n                {(item: AutoCompleteOption) => (\n                  <Autocomplete.Item\n                    className={cx(styles.item, classNames?.item)}\n                    disabled={item.disabled}\n                    key={item.value}\n                    style={customStyles?.item}\n                    value={item}\n                  >\n                    {item.label ?? item.value}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.List>\n            </Autocomplete.Popup>\n          </Autocomplete.Positioner>\n        </Autocomplete.Portal>\n      </Autocomplete.Root>\n    );\n  },\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,eAAe,MAClB,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,UAAU,CAAC,GACX,UACA,UACA,YACA,UACA,aACA,QACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,EAAE,KAAK,eAAe,WAAW,eAA+B,UAAU;CAChF,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,QAAQ,cACN,QAAQ,KAAK,WAAY,OAAO,WAAW,WAAW,EAAE,OAAO,OAAO,IAAI,MAAO,GACvF,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,aAAa,MAAd;EACE,kBAAA;EACU;EACV,oBAAoB,SAAU,KAA4B;EACnD;EACP,gBAAgB,UAAU;GACxB,WAAW,KAAK;GAChB,WAAW,KAAK;EAClB;EACA,GAAI;EATN,UAAA,CAWE,qBAAC,OAAD;GACE,WAAW,GAAGA,aAAc;IAAE;IAAQ;IAAM,SAAS;GAAc,CAAC,GAAG,SAAS;GAChF,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK;GACE;GAJT,UAAA;IAMG,UAAU,oBAAC,QAAD;KAAM,WAAWC,OAAY;KAAO,UAAA;IAAa,CAAA;IAC5D,oBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,OAAY,OAAO,YAAY,KAAK;KACrC;KACb,OAAO,cAAc;IACtB,CAAA;IACA,cACC,oBAAC,aAAa,OAAd;KAAoB,cAAY;KAAS,WAAWC,SAAO;KACzD,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAO,MAAM;KAAK,CAAA;IACZ,CAAA;IAErB,UAAU,oBAAC,QAAD;KAAM,WAAWD,OAAY;KAAO,UAAA;IAAa,CAAA;GACzD;EACL,CAAA,GAAA,oBAAC,aAAa,QAAd;GAAqB,WAAW,cAAc,KAAA;GAC5C,UAAA,oBAAC,aAAa,YAAd;IACE,QAAQ;IACR,WAAWC,SAAO;IAClB,kBAAkB,4BAA4B;IAC9C,KAAK;IACL,YAAY;IACZ,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO;IAEnD,UAAA,qBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,SAAO,OAAO,YAAY,KAAK;KAC7C,OAAO,cAAc;KAFvB,UAAA,CAIG,aACC,oBAAC,aAAa,OAAd;MAAoB,WAAWA,SAAO;MAAQ,UAAA;KAA8B,CAAA,GAE9E,oBAAC,aAAa,MAAd;MAAmB,WAAWA,SAAO;MACjC,WAAA,SACA,oBAAC,aAAa,MAAd;OACE,WAAW,GAAGA,SAAO,MAAM,YAAY,IAAI;OAC3C,UAAU,KAAK;OAEf,OAAO,cAAc;OACrB,OAAO;OAEN,UAAA,KAAK,SAAS,KAAK;MACH,GALZ,KAAK,KAKO;KAEJ,CAAA,CACD;;GACG,CAAA;EACN,CAAA,CACJ;;AAEvB,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"AutoComplete.mjs","names":["inputVariants","inputStyles","styles"],"sources":["../../../src/base-ui/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\n\nimport { Autocomplete } from '@base-ui/react/autocomplete';\nimport { cx, useThemeMode } from 'antd-style';\nimport { XIcon } from 'lucide-react';\nimport { memo, useMemo, useRef } from 'react';\n\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { inputStyles, inputVariants } from '@/base-ui/Input';\nimport { useLayerZIndex } from '@/base-ui/zIndex';\nimport Icon from '@/Icon';\nimport { useAppElement } from '@/ThemeProvider/AppElementContext';\n\nimport { styles } from './style';\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\n\nconst AutoComplete = memo<AutoCompleteProps>(\n  ({\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    options = [],\n    onChange,\n    onSearch,\n    allowClear,\n    disabled,\n    placeholder,\n    prefix,\n    suffix,\n    emptyText,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const appElement = useAppElement();\n    const anchorRef = useRef<HTMLDivElement>(null);\n    const { ref: positionerRef, zIndex } = useLayerZIndex<HTMLDivElement>('floating');\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n    const items = useMemo<AutoCompleteOption[]>(\n      () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\n      [options],\n    );\n\n    return (\n      <Autocomplete.Root\n        openOnInputClick\n        disabled={disabled}\n        itemToStringValue={(item) => (item as AutoCompleteOption).value}\n        items={items}\n        onValueChange={(value) => {\n          onChange?.(value);\n          onSearch?.(value);\n        }}\n        {...rest}\n      >\n        <div\n          className={cx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\n          data-disabled={disabled ? '' : undefined}\n          ref={anchorRef}\n          style={style}\n        >\n          {prefix && <span className={inputStyles.slot}>{prefix}</span>}\n          <Autocomplete.Input\n            className={cx(inputStyles.input, classNames?.input)}\n            placeholder={placeholder}\n            style={customStyles?.input}\n          />\n          {allowClear && (\n            <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\n              <Icon icon={XIcon} size={14} />\n            </Autocomplete.Clear>\n          )}\n          {suffix && <span className={inputStyles.slot}>{suffix}</span>}\n        </div>\n        <Autocomplete.Portal container={appElement ?? undefined}>\n          <Autocomplete.Positioner\n            anchor={anchorRef}\n            className={styles.positioner}\n            collisionPadding={getFloatingCollisionPadding()}\n            ref={positionerRef}\n            sideOffset={4}\n            style={zIndex === undefined ? undefined : { zIndex }}\n          >\n            <Autocomplete.Popup\n              className={cx(styles.popup, classNames?.popup)}\n              style={customStyles?.popup}\n            >\n              {emptyText && (\n                <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\n              )}\n              <Autocomplete.List className={styles.list}>\n                {(item: AutoCompleteOption) => (\n                  <Autocomplete.Item\n                    className={cx(styles.item, classNames?.item)}\n                    disabled={item.disabled}\n                    key={item.value}\n                    style={customStyles?.item}\n                    value={item}\n                  >\n                    {item.label ?? item.value}\n                  </Autocomplete.Item>\n                )}\n              </Autocomplete.List>\n            </Autocomplete.Popup>\n          </Autocomplete.Positioner>\n        </Autocomplete.Portal>\n      </Autocomplete.Root>\n    );\n  },\n);\n\nAutoComplete.displayName = 'AutoComplete';\n\nexport default AutoComplete;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,eAAe,MAClB,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,UAAU,CAAC,GACX,UACA,UACA,YACA,UACA,aACA,QACA,QACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,aAAa,cAAc;CACjC,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,EAAE,KAAK,eAAe,WAAW,eAA+B,UAAU;CAChF,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAE1D,MAAM,QAAQ,cACN,QAAQ,KAAK,WAAY,OAAO,WAAW,WAAW,EAAE,OAAO,OAAO,IAAI,MAAO,GACvF,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,aAAa,MAAd;EACE,kBAAA;EACU;EACV,oBAAoB,SAAU,KAA4B;EACnD;EACP,gBAAgB,UAAU;GACxB,WAAW,KAAK;GAChB,WAAW,KAAK;EAClB;EACA,GAAI;EATN,UAAA,CAWE,qBAAC,OAAD;GACE,WAAW,GAAGA,aAAc;IAAE;IAAQ;IAAM,SAAS;GAAc,CAAC,GAAG,SAAS;GAChF,iBAAe,WAAW,KAAK,KAAA;GAC/B,KAAK;GACE;GAJT,UAAA;IAMG,UAAU,oBAAC,QAAD;KAAM,WAAWC,OAAY;KAAO,UAAA;IAAa,CAAA;IAC5D,oBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,OAAY,OAAO,YAAY,KAAK;KACrC;KACb,OAAO,cAAc;IACtB,CAAA;IACA,cACC,oBAAC,aAAa,OAAd;KAAoB,cAAY;KAAS,WAAWC,SAAO;KACzD,UAAA,oBAAC,MAAD;MAAM,MAAM;MAAO,MAAM;KAAK,CAAA;IACZ,CAAA;IAErB,UAAU,oBAAC,QAAD;KAAM,WAAWD,OAAY;KAAO,UAAA;IAAa,CAAA;GACzD;EACL,CAAA,GAAA,oBAAC,aAAa,QAAd;GAAqB,WAAW,cAAc,KAAA;GAC5C,UAAA,oBAAC,aAAa,YAAd;IACE,QAAQ;IACR,WAAWC,SAAO;IAClB,kBAAkB,4BAA4B;IAC9C,KAAK;IACL,YAAY;IACZ,OAAO,WAAW,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO;IAEnD,UAAA,qBAAC,aAAa,OAAd;KACE,WAAW,GAAGA,SAAO,OAAO,YAAY,KAAK;KAC7C,OAAO,cAAc;KAFvB,UAAA,CAIG,aACC,oBAAC,aAAa,OAAd;MAAoB,WAAWA,SAAO;MAAQ,UAAA;KAA8B,CAAA,GAE9E,oBAAC,aAAa,MAAd;MAAmB,WAAWA,SAAO;MACjC,WAAA,SACA,oBAAC,aAAa,MAAd;OACE,WAAW,GAAGA,SAAO,MAAM,YAAY,IAAI;OAC3C,UAAU,KAAK;OAEf,OAAO,cAAc;OACrB,OAAO;OAEN,UAAA,KAAK,SAAS,KAAK;MACH,GALZ,KAAK,KAKO;KAEJ,CAAA,CACD;;GACG,CAAA;EACN,CAAA,CACJ;;AAEvB,CACF;AAEA,aAAa,cAAc"}

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

@@ -1,8 +1,8 @@
 "use client";
 import Center from "../../Flex/Center.mjs";
-import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import Icon from "../../Icon/Icon.mjs";
 import FluentEmoji from "../../FluentEmoji/FluentEmoji.mjs";
+import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import { styles, variants } from "./style.mjs";
 import { calculateEmojiSize, formatAvatarText, hasValidBackground, isDefaultAntAvatar } from "./utils.mjs";
 import { memo, useMemo, useState } from "react";

package/es/base-ui/Breadcrumb/Breadcrumb.d.mts

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

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

@@ -0,0 +1,58 @@
+"use client";
+import A from "../../A/index.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronRight } from "lucide-react";
+//#region src/base-ui/Breadcrumb/Breadcrumb.tsx
+const renderTitle = (item) => {
+	if (item.href) return /* @__PURE__ */ jsx(A, {
+		className: styles.link,
+		href: item.href,
+		onClick: item.onClick,
+		children: item.title
+	});
+	if (item.onClick) return /* @__PURE__ */ jsx("button", {
+		className: styles.button,
+		type: "button",
+		onClick: item.onClick,
+		children: item.title
+	});
+	return item.title;
+};
+const Breadcrumb = memo(({ className, classNames, items, ref, separator, styles: customStyles, ...rest }) => {
+	const separatorNode = separator ?? /* @__PURE__ */ jsx(Icon, {
+		icon: ChevronRight,
+		size: 14
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "breadcrumb",
+		className: cx(styles.root, className),
+		ref,
+		...rest,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: styles.list,
+			children: items.map((item, index) => {
+				const isLast = index === items.length - 1;
+				return /* @__PURE__ */ jsxs("li", {
+					"aria-current": isLast ? "page" : void 0,
+					className: cx(styles.item, classNames?.item),
+					style: customStyles?.item,
+					children: [renderTitle(item), !isLast && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: cx(styles.separator, classNames?.separator),
+						style: customStyles?.separator,
+						children: separatorNode
+					})]
+				}, item.key ?? index);
+			})
+		})
+	});
+});
+Breadcrumb.displayName = "Breadcrumb";
+//#endregion
+export { Breadcrumb as default };
+
+//# sourceMappingURL=Breadcrumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.mjs","names":[],"sources":["../../../src/base-ui/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport A from '@/A';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { BreadcrumbItem, BreadcrumbProps } from './type';\n\nconst renderTitle = (item: BreadcrumbItem): ReactNode => {\n  if (item.href) {\n    return (\n      <A className={styles.link} href={item.href} onClick={item.onClick}>\n        {item.title}\n      </A>\n    );\n  }\n\n  if (item.onClick) {\n    return (\n      <button className={styles.button} type=\"button\" onClick={item.onClick}>\n        {item.title}\n      </button>\n    );\n  }\n\n  return item.title;\n};\n\nconst Breadcrumb = memo<BreadcrumbProps>(\n  ({ className, classNames, items, ref, separator, styles: customStyles, ...rest }) => {\n    const separatorNode = separator ?? <Icon icon={ChevronRight} size={14} />;\n\n    return (\n      <nav aria-label=\"breadcrumb\" className={cx(styles.root, className)} ref={ref} {...rest}>\n        <ol className={styles.list}>\n          {items.map((item, index) => {\n            const isLast = index === items.length - 1;\n\n            return (\n              <li\n                aria-current={isLast ? 'page' : undefined}\n                className={cx(styles.item, classNames?.item)}\n                key={item.key ?? index}\n                style={customStyles?.item}\n              >\n                {renderTitle(item)}\n                {!isLast && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cx(styles.separator, classNames?.separator)}\n                    style={customStyles?.separator}\n                  >\n                    {separatorNode}\n                  </span>\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    );\n  },\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;AAYA,MAAM,eAAe,SAAoC;CACvD,IAAI,KAAK,MACP,OACE,oBAAC,GAAD;EAAG,WAAW,OAAO;EAAM,MAAM,KAAK;EAAM,SAAS,KAAK;EACvD,UAAA,KAAK;CACL,CAAA;CAIP,IAAI,KAAK,SACP,OACE,oBAAC,UAAD;EAAQ,WAAW,OAAO;EAAQ,MAAK;EAAS,SAAS,KAAK;EAC3D,UAAA,KAAK;CACA,CAAA;CAIZ,OAAO,KAAK;AACd;AAEA,MAAM,aAAa,MAChB,EAAE,WAAW,YAAY,OAAO,KAAK,WAAW,QAAQ,cAAc,GAAG,WAAW;CACnF,MAAM,gBAAgB,aAAa,oBAAC,MAAD;EAAM,MAAM;EAAc,MAAM;CAAK,CAAA;CAExE,OACE,oBAAC,OAAD;EAAK,cAAW;EAAa,WAAW,GAAG,OAAO,MAAM,SAAS;EAAQ;EAAK,GAAI;EAChF,UAAA,oBAAC,MAAD;GAAI,WAAW,OAAO;GACnB,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,SAAS,UAAU,MAAM,SAAS;IAExC,OACE,qBAAC,MAAD;KACE,gBAAc,SAAS,SAAS,KAAA;KAChC,WAAW,GAAG,OAAO,MAAM,YAAY,IAAI;KAE3C,OAAO,cAAc;KAJvB,UAAA,CAMG,YAAY,IAAI,GAChB,CAAC,UACA,oBAAC,QAAD;MACE,eAAY;MACZ,WAAW,GAAG,OAAO,WAAW,YAAY,SAAS;MACrD,OAAO,cAAc;MAEpB,UAAA;KACG,CAAA,CAEN;IAbG,GAAA,KAAK,OAAO,KAaf;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET,CACF;AAEA,WAAW,cAAc"}

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

@@ -0,0 +1,3 @@
+import { BreadcrumbItem, BreadcrumbProps } from "./type.mjs";
+import Breadcrumb from "./Breadcrumb.mjs";
+export { type BreadcrumbItem, type BreadcrumbProps, Breadcrumb as default };