@jinmi/ui 0.0.0-stage → 6.0.1

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';\r\n\r\nimport { cx } from 'antd-style';\r\nimport {\r\n  type CSSProperties,\r\n  memo,\r\n  type MouseEvent,\r\n  useEffect,\r\n  useLayoutEffect,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport { useMergeRefs } from 'react-merge-refs';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport { useEventCallback } from '@/hooks/useEventCallback';\r\n\r\nimport { styles } from './style';\r\nimport type { AnchorItem, AnchorProps } from './type';\r\n\r\ntype ScrollContainer = HTMLElement | Window;\r\n\r\nconst SCROLL_LOCK_FALLBACK_MS = 1000;\r\n\r\nconst flatten = (items: AnchorItem[]): AnchorItem[] =>\r\n  items.flatMap((item) => [item, ...flatten(item.children ?? [])]);\r\n\r\nconst getTarget = (href: string) => {\r\n  const hash = href.split('#')[1];\r\n  if (!hash) return null;\r\n  try {\r\n    return document.getElementById(decodeURIComponent(hash));\r\n  } catch {\r\n    return document.getElementById(hash);\r\n  }\r\n};\r\n\r\nconst isWindow = (container: ScrollContainer): container is Window => container === window;\r\n\r\nconst getRelativeTop = (element: HTMLElement, container: ScrollContainer) =>\r\n  element.getBoundingClientRect().top -\r\n  (isWindow(container) ? 0 : container.getBoundingClientRect().top);\r\n\r\nconst getScrollTop = (container: ScrollContainer) =>\r\n  isWindow(container) ? window.scrollY : container.scrollTop;\r\n\r\nconst getActiveKey = (\r\n  items: AnchorItem[],\r\n  container: ScrollContainer,\r\n  offset: number,\r\n): string | null => {\r\n  let activeKey: string | null = null;\r\n  let activeTop = -Infinity;\r\n  for (const item of flatten(items)) {\r\n    const target = getTarget(item.href);\r\n    if (!target) continue;\r\n    const top = getRelativeTop(target, container);\r\n    if (top <= offset + 1 && top >= activeTop) {\r\n      activeKey = item.key;\r\n      activeTop = top;\r\n    }\r\n  }\r\n  return activeKey;\r\n};\r\n\r\nconst Anchor = memo<AnchorProps>(\r\n  ({ activeKey, className, getContainer, items, offset = 0, onChange, onClick, ref, ...rest }) => {\r\n    const [mergedActiveKey, setMergedActiveKey] = useControlledState<string | null>(null, {\r\n      onChange,\r\n      value: activeKey,\r\n    });\r\n    const scrollLockRef = useRef(false);\r\n    const navRef = useRef<HTMLElement>(null);\r\n    const mergedRef = useMergeRefs([ref, navRef]);\r\n    const [marker, setMarker] = useState<CSSProperties>();\r\n    const lockTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\r\n\r\n    const resolveContainer = useEventCallback((): ScrollContainer => getContainer?.() ?? window);\r\n    const setActive = useEventCallback(setMergedActiveKey);\r\n    const spy = useEventCallback(() => {\r\n      if (scrollLockRef.current) return;\r\n      setActive(getActiveKey(items, resolveContainer(), offset));\r\n    });\r\n\r\n    useEffect(() => {\r\n      const container = resolveContainer();\r\n      let frame = 0;\r\n      const handleScroll = () => {\r\n        cancelAnimationFrame(frame);\r\n        frame = requestAnimationFrame(spy);\r\n      };\r\n      spy();\r\n      container.addEventListener('scroll', handleScroll, { passive: true });\r\n      return () => {\r\n        cancelAnimationFrame(frame);\r\n        container.removeEventListener('scroll', handleScroll);\r\n      };\r\n    }, [items, offset, resolveContainer, spy]);\r\n\r\n    useEffect(() => () => clearTimeout(lockTimerRef.current), []);\r\n\r\n    useLayoutEffect(() => {\r\n      const nav = navRef.current;\r\n      if (!nav) return;\r\n      const place = () => {\r\n        const link = [...nav.querySelectorAll<HTMLElement>('a[data-key]')].find(\r\n          (element) => element.dataset.key === mergedActiveKey,\r\n        );\r\n        setMarker(\r\n          link ? { height: link.offsetHeight, insetBlockStart: link.offsetTop } : undefined,\r\n        );\r\n      };\r\n      place();\r\n      if (typeof ResizeObserver === 'undefined') return;\r\n      const observer = new ResizeObserver(place);\r\n      observer.observe(nav);\r\n      return () => observer.disconnect();\r\n    }, [items, mergedActiveKey]);\r\n\r\n    const handleClick = (event: MouseEvent<HTMLAnchorElement>, item: AnchorItem) => {\r\n      onClick?.(event, item);\r\n      if (event.defaultPrevented || event.button !== 0) return;\r\n      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\r\n\r\n      const target = getTarget(item.href);\r\n      if (!target) return;\r\n      event.preventDefault();\r\n\r\n      const container = resolveContainer();\r\n      const top = getRelativeTop(target, container) + getScrollTop(container) - offset;\r\n      const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\r\n\r\n      // Smooth scrolling may never bring a heading near the page end up to the offset line, so the\r\n      // clicked item is pinned as active until the scroll settles.\r\n      const release = () => {\r\n        scrollLockRef.current = false;\r\n      };\r\n      scrollLockRef.current = true;\r\n      setActive(item.key);\r\n      clearTimeout(lockTimerRef.current);\r\n      lockTimerRef.current = setTimeout(release, SCROLL_LOCK_FALLBACK_MS);\r\n      container.addEventListener('scrollend', release, { once: true });\r\n      container.scrollTo({ behavior: reduceMotion ? 'auto' : 'smooth', top });\r\n    };\r\n\r\n    const renderList = (list: AnchorItem[]) => (\r\n      <ul className={styles.list}>\r\n        {list.map((item) => (\r\n          <li key={item.key}>\r\n            <a\r\n              aria-current={item.key === mergedActiveKey ? 'location' : undefined}\r\n              className={styles.link}\r\n              data-key={item.key}\r\n              href={item.href}\r\n              title={typeof item.title === 'string' ? item.title : undefined}\r\n              onClick={(event) => handleClick(event, item)}\r\n            >\r\n              {item.title}\r\n            </a>\r\n            {item.children && item.children.length > 0 && renderList(item.children)}\r\n          </li>\r\n        ))}\r\n      </ul>\r\n    );\r\n\r\n    return (\r\n      <nav className={cx(styles.root, className)} ref={mergedRef} {...rest}>\r\n        <span aria-hidden className={styles.marker} hidden={!marker} style={marker} />\r\n        {renderList(items)}\r\n      </nav>\r\n    );\r\n  },\r\n);\r\n\r\nAnchor.displayName = 'Anchor';\r\n\r\nexport default Anchor;\r\n"],"mappings":";;;;;;;;;AAsBA,MAAM,0BAA0B;AAEhC,MAAM,WAAW,UACf,MAAM,SAAS,SAAS,CAAC,MAAM,GAAG,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC;AAEjE,MAAM,aAAa,SAAiB;CAClC,MAAM,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;CAC7B,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI;EACF,OAAO,SAAS,eAAe,mBAAmB,IAAI,CAAC;CACzD,QAAQ;EACN,OAAO,SAAS,eAAe,IAAI;CACrC;AACF;AAEA,MAAM,YAAY,cAAoD,cAAc;AAEpF,MAAM,kBAAkB,SAAsB,cAC5C,QAAQ,sBAAsB,CAAC,CAAC,OAC/B,SAAS,SAAS,IAAI,IAAI,UAAU,sBAAsB,CAAC,CAAC;AAE/D,MAAM,gBAAgB,cACpB,SAAS,SAAS,IAAI,OAAO,UAAU,UAAU;AAEnD,MAAM,gBACJ,OACA,WACA,WACkB;CAClB,IAAI,YAA2B;CAC/B,IAAI,YAAY;CAChB,KAAK,MAAM,QAAQ,QAAQ,KAAK,GAAG;EACjC,MAAM,SAAS,UAAU,KAAK,IAAI;EAClC,IAAI,CAAC,QAAQ;EACb,MAAM,MAAM,eAAe,QAAQ,SAAS;EAC5C,IAAI,OAAO,SAAS,KAAK,OAAO,WAAW;GACzC,YAAY,KAAK;GACjB,YAAY;EACd;CACF;CACA,OAAO;AACT;AAEA,MAAM,SAAS,MACZ,EAAE,WAAW,WAAW,cAAc,OAAO,SAAS,GAAG,UAAU,SAAS,KAAK,GAAG,WAAW;CAC9F,MAAM,CAAC,iBAAiB,sBAAsBA,cAAkC,MAAM;EACpF;EACA,OAAO;CACT,CAAC;CACD,MAAM,gBAAgB,OAAO,KAAK;CAClC,MAAM,SAAS,OAAoB,IAAI;CACvC,MAAM,YAAY,aAAa,CAAC,KAAK,MAAM,CAAC;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAwB;CACpD,MAAM,eAAe,OAAsC,KAAA,CAAS;CAEpE,MAAM,mBAAmB,uBAAwC,eAAe,KAAK,MAAM;CAC3F,MAAM,YAAY,iBAAiB,kBAAkB;CACrD,MAAM,MAAM,uBAAuB;EACjC,IAAI,cAAc,SAAS;EAC3B,UAAU,aAAa,OAAO,iBAAiB,GAAG,MAAM,CAAC;CAC3D,CAAC;CAED,gBAAgB;EACd,MAAM,YAAY,iBAAiB;EACnC,IAAI,QAAQ;EACZ,MAAM,qBAAqB;GACzB,qBAAqB,KAAK;GAC1B,QAAQ,sBAAsB,GAAG;EACnC;EACA,IAAI;EACJ,UAAU,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;EACpE,aAAa;GACX,qBAAqB,KAAK;GAC1B,UAAU,oBAAoB,UAAU,YAAY;EACtD;CACF,GAAG;EAAC;EAAO;EAAQ;EAAkB;CAAG,CAAC;CAEzC,sBAAsB,aAAa,aAAa,OAAO,GAAG,CAAC,CAAC;CAE5D,sBAAsB;EACpB,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EACV,MAAM,cAAc;GAClB,MAAM,OAAO,CAAC,GAAG,IAAI,iBAA8B,aAAa,CAAC,CAAC,CAAC,MAChE,YAAY,QAAQ,QAAQ,QAAQ,eACvC;GACA,UACE,OAAO;IAAE,QAAQ,KAAK;IAAc,iBAAiB,KAAK;GAAU,IAAI,KAAA,CAC1E;EACF;EACA,MAAM;EACN,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,KAAK;EACzC,SAAS,QAAQ,GAAG;EACpB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,OAAO,eAAe,CAAC;CAE3B,MAAM,eAAe,OAAsC,SAAqB;EAC9E,UAAU,OAAO,IAAI;EACrB,IAAI,MAAM,oBAAoB,MAAM,WAAW,GAAG;EAClD,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ;EAEtE,MAAM,SAAS,UAAU,KAAK,IAAI;EAClC,IAAI,CAAC,QAAQ;EACb,MAAM,eAAe;EAErB,MAAM,YAAY,iBAAiB;EACnC,MAAM,MAAM,eAAe,QAAQ,SAAS,IAAI,aAAa,SAAS,IAAI;EAC1E,MAAM,eAAe,OAAO,aAAa,kCAAkC,CAAC,CAAC;EAI7E,MAAM,gBAAgB;GACpB,cAAc,UAAU;EAC1B;EACA,cAAc,UAAU;EACxB,UAAU,KAAK,GAAG;EAClB,aAAa,aAAa,OAAO;EACjC,aAAa,UAAU,WAAW,SAAS,uBAAuB;EAClE,UAAU,iBAAiB,aAAa,SAAS,EAAE,MAAM,KAAK,CAAC;EAC/D,UAAU,SAAS;GAAE,UAAU,eAAe,SAAS;GAAU;EAAI,CAAC;CACxE;CAEA,MAAM,cAAc,SAClB,oBAAC,MAAD;EAAI,WAAW,OAAO;EACnB,UAAA,KAAK,KAAK,SACT,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,KAAD;GACE,gBAAc,KAAK,QAAQ,kBAAkB,aAAa,KAAA;GAC1D,WAAW,OAAO;GAClB,YAAU,KAAK;GACf,MAAM,KAAK;GACX,OAAO,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAA;GACrD,UAAU,UAAU,YAAY,OAAO,IAAI;GAE1C,UAAA,KAAK;EACL,CAAA,GACF,KAAK,YAAY,KAAK,SAAS,SAAS,KAAK,WAAW,KAAK,QAAQ,CACpE,EAAA,GAZK,KAAK,GAYV,CACL;CACC,CAAA;CAGN,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,KAAK;EAAW,GAAI;EAAhE,UAAA,CACE,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAW,OAAO;GAAQ,QAAQ,CAAC;GAAQ,OAAO;EAAS,CAAA,GAC5E,WAAW,KAAK,CACd;;AAET,CACF;AAEA,OAAO,cAAc"}

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,81 @@
+import { brandCssVar } from "../../styles/brandCssVar.mjs";
+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 ${brandCssVar.colorBrand};
+      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';\r\n\nimport { brandCssVar } from '@/styles/brandCssVar';\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  link: css`\r\n    overflow: hidden;\r\n    display: -webkit-box;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-line-clamp: 2;\r\n\r\n    font-size: 14px;\r\n    line-height: 1.4;\r\n    color: ${cssVar.colorTextSecondary};\r\n    overflow-wrap: anywhere;\r\n\r\n    transition: color 0.15s ease;\r\n\r\n    &:hover {\r\n      color: ${cssVar.colorText};\r\n    }\r\n\r\n    &[aria-current='location'] {\r\n      font-weight: 500;\r\n      color: ${cssVar.colorText};\r\n    }\r\n\r\n    &:focus-visible {\r\n      border-radius: 4px;\r\n      outline: 2px solid ${brandCssVar.colorBrand};\r\n      outline-offset: 2px;\r\n    }\r\n  `,\r\n  list: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n\r\n    margin: 0;\r\n    padding-block: 0;\r\n    padding-inline: 14px 0;\r\n    border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\r\n\r\n    list-style: none;\r\n\r\n    & & {\r\n      margin-block-start: 8px;\r\n      padding-inline-start: 12px;\r\n      border-inline-start: none;\r\n\r\n      a {\r\n        font-size: 13px;\r\n      }\r\n    }\r\n  `,\r\n  marker: css`\r\n    pointer-events: none;\r\n\r\n    position: absolute;\r\n    inset-inline-start: -1px;\r\n\r\n    width: 2px;\r\n    border-radius: 2px;\r\n\r\n    background: ${cssVar.colorText};\r\n\r\n    transition:\r\n      inset-block-start 0.2s ${cssVar.motionEaseOut},\r\n      height 0.2s ${cssVar.motionEaseOut};\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      transition: none;\r\n    }\r\n  `,\r\n  root: css`\r\n    position: relative;\r\n  `,\r\n}));\r\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;aAQE,OAAO,mBAAmB;;;;;;eAMxB,OAAO,UAAU;;;;;eAKjB,OAAO,UAAU;;;;;2BAKL,YAAY,WAAW;;;;CAIhD,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.d.mts

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

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

@@ -0,0 +1,97 @@
+"use client";
+import { getFloatingCollisionPadding } from "../floating/collisionPadding.mjs";
+import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
+import { rootVariants, styles } from "../Input/style.mjs";
+import { styles as styles$1 } from "./style.mjs";
+import { memo, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
+import { XIcon } from "lucide-react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/base-ui/AutoComplete/AutoComplete.tsx
+const AutoComplete = memo(({ className, classNames, styles: customStyles, style, variant, shadow, size = "middle", options = [], onChange, onSearch, allowClear, disabled, placeholder, prefix, suffix, emptyText, ...rest }) => {
+	const { isDarkMode } = useThemeMode();
+	const appElement = useAppElement();
+	const anchorRef = useRef(null);
+	const { ref: positionerRef, zIndex } = useLayerZIndex("floating");
+	const mergedVariant = variant || (isDarkMode ? "filled" : "outlined");
+	const items = useMemo(() => options.map((option) => typeof option === "string" ? { value: option } : option), [options]);
+	return /* @__PURE__ */ jsxs(Autocomplete.Root, {
+		openOnInputClick: true,
+		disabled,
+		itemToStringValue: (item) => item.value,
+		items,
+		onValueChange: (value) => {
+			onChange?.(value);
+			onSearch?.(value);
+		},
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(rootVariants({
+				shadow,
+				size,
+				variant: mergedVariant
+			}), className),
+			"data-disabled": disabled ? "" : void 0,
+			ref: anchorRef,
+			style,
+			children: [
+				prefix && /* @__PURE__ */ jsx("span", {
+					className: styles.slot,
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx(Autocomplete.Input, {
+					className: cx(styles.input, classNames?.input),
+					placeholder,
+					style: customStyles?.input
+				}),
+				allowClear && /* @__PURE__ */ jsx(Autocomplete.Clear, {
+					"aria-label": "Clear",
+					className: styles$1.clear,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: XIcon,
+						size: 14
+					})
+				}),
+				suffix && /* @__PURE__ */ jsx("span", {
+					className: styles.slot,
+					children: suffix
+				})
+			]
+		}), /* @__PURE__ */ jsx(Autocomplete.Portal, {
+			container: appElement ?? void 0,
+			children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
+				anchor: anchorRef,
+				className: styles$1.positioner,
+				collisionPadding: getFloatingCollisionPadding(),
+				ref: positionerRef,
+				sideOffset: 4,
+				style: zIndex === void 0 ? void 0 : { zIndex },
+				children: /* @__PURE__ */ jsxs(Autocomplete.Popup, {
+					className: cx(styles$1.popup, classNames?.popup),
+					style: customStyles?.popup,
+					children: [emptyText && /* @__PURE__ */ jsx(Autocomplete.Empty, {
+						className: styles$1.empty,
+						children: emptyText
+					}), /* @__PURE__ */ jsx(Autocomplete.List, {
+						className: styles$1.list,
+						children: (item) => /* @__PURE__ */ jsx(Autocomplete.Item, {
+							className: cx(styles$1.item, classNames?.item),
+							disabled: item.disabled,
+							style: customStyles?.item,
+							value: item,
+							children: item.label ?? item.value
+						}, item.value)
+					})]
+				})
+			})
+		})]
+	});
+});
+AutoComplete.displayName = "AutoComplete";
+//#endregion
+export { AutoComplete as default };
+
+//# sourceMappingURL=AutoComplete.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoComplete.mjs","names":["inputVariants","inputStyles","styles"],"sources":["../../../src/base-ui/AutoComplete/AutoComplete.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Autocomplete } from '@base-ui/react/autocomplete';\r\nimport { cx, useThemeMode } from 'antd-style';\r\nimport { XIcon } from 'lucide-react';\r\nimport { memo, useMemo, useRef } from 'react';\r\n\r\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\r\nimport { inputStyles, inputVariants } from '@/base-ui/Input';\r\nimport { useLayerZIndex } from '@/base-ui/zIndex';\r\nimport Icon from '@/Icon';\r\nimport { useAppElement } from '@/ThemeProvider/AppElementContext';\r\n\r\nimport { styles } from './style';\r\nimport type { AutoCompleteOption, AutoCompleteProps } from './type';\r\n\r\nconst AutoComplete = memo<AutoCompleteProps>(\r\n  ({\r\n    className,\r\n    classNames,\r\n    styles: customStyles,\r\n    style,\r\n    variant,\r\n    shadow,\r\n    size = 'middle',\r\n    options = [],\r\n    onChange,\r\n    onSearch,\r\n    allowClear,\r\n    disabled,\r\n    placeholder,\r\n    prefix,\r\n    suffix,\r\n    emptyText,\r\n    ...rest\r\n  }) => {\r\n    const { isDarkMode } = useThemeMode();\r\n    const appElement = useAppElement();\r\n    const anchorRef = useRef<HTMLDivElement>(null);\r\n    const { ref: positionerRef, zIndex } = useLayerZIndex<HTMLDivElement>('floating');\r\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\r\n\r\n    const items = useMemo<AutoCompleteOption[]>(\r\n      () => options.map((option) => (typeof option === 'string' ? { value: option } : option)),\r\n      [options],\r\n    );\r\n\r\n    return (\r\n      <Autocomplete.Root\r\n        openOnInputClick\r\n        disabled={disabled}\r\n        itemToStringValue={(item) => (item as AutoCompleteOption).value}\r\n        items={items}\r\n        onValueChange={(value) => {\r\n          onChange?.(value);\r\n          onSearch?.(value);\r\n        }}\r\n        {...rest}\r\n      >\r\n        <div\r\n          className={cx(inputVariants({ shadow, size, variant: mergedVariant }), className)}\r\n          data-disabled={disabled ? '' : undefined}\r\n          ref={anchorRef}\r\n          style={style}\r\n        >\r\n          {prefix && <span className={inputStyles.slot}>{prefix}</span>}\r\n          <Autocomplete.Input\r\n            className={cx(inputStyles.input, classNames?.input)}\r\n            placeholder={placeholder}\r\n            style={customStyles?.input}\r\n          />\r\n          {allowClear && (\r\n            <Autocomplete.Clear aria-label={'Clear'} className={styles.clear}>\r\n              <Icon icon={XIcon} size={14} />\r\n            </Autocomplete.Clear>\r\n          )}\r\n          {suffix && <span className={inputStyles.slot}>{suffix}</span>}\r\n        </div>\r\n        <Autocomplete.Portal container={appElement ?? undefined}>\r\n          <Autocomplete.Positioner\r\n            anchor={anchorRef}\r\n            className={styles.positioner}\r\n            collisionPadding={getFloatingCollisionPadding()}\r\n            ref={positionerRef}\r\n            sideOffset={4}\r\n            style={zIndex === undefined ? undefined : { zIndex }}\r\n          >\r\n            <Autocomplete.Popup\r\n              className={cx(styles.popup, classNames?.popup)}\r\n              style={customStyles?.popup}\r\n            >\r\n              {emptyText && (\r\n                <Autocomplete.Empty className={styles.empty}>{emptyText}</Autocomplete.Empty>\r\n              )}\r\n              <Autocomplete.List className={styles.list}>\r\n                {(item: AutoCompleteOption) => (\r\n                  <Autocomplete.Item\r\n                    className={cx(styles.item, classNames?.item)}\r\n                    disabled={item.disabled}\r\n                    key={item.value}\r\n                    style={customStyles?.item}\r\n                    value={item}\r\n                  >\r\n                    {item.label ?? item.value}\r\n                  </Autocomplete.Item>\r\n                )}\r\n              </Autocomplete.List>\r\n            </Autocomplete.Popup>\r\n          </Autocomplete.Positioner>\r\n        </Autocomplete.Portal>\r\n      </Autocomplete.Root>\r\n    );\r\n  },\r\n);\r\n\r\nAutoComplete.displayName = 'AutoComplete';\r\n\r\nexport default AutoComplete;\r\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/AutoComplete/index.d.mts

@@ -0,0 +1,4 @@
+import { AutoCompleteOption, AutoCompleteProps } from "./type.mjs";
+import AutoComplete from "./AutoComplete.mjs";
+import { styles } from "./style.mjs";
+export { AutoComplete, type AutoCompleteOption, type AutoCompleteProps, styles as autoCompleteStyles };

package/es/base-ui/AutoComplete/style.d.mts

@@ -0,0 +1,12 @@
+//#region src/base-ui/AutoComplete/style.d.ts
+declare const styles: {
+  clear: string;
+  empty: string;
+  item: string;
+  list: string;
+  popup: string;
+  positioner: string;
+};
+//#endregion
+export { styles };
+//# sourceMappingURL=style.d.mts.map

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

@@ -0,0 +1,76 @@
+import { styles as styles$1 } from "../DropdownMenu/sharedStyle.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/AutoComplete/style.ts
+const ownStyles = createStaticStyles(({ css, cssVar }) => ({
+	clear: css`
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0;
+    padding: 0;
+    border: none;
+
+    color: ${cssVar.colorTextTertiary};
+
+    background: none;
+    outline: none;
+
+    transition: color 150ms ${cssVar.motionEaseOut};
+
+    &:hover {
+      color: ${cssVar.colorText};
+    }
+  `,
+	empty: css`
+    cursor: default;
+
+    &:empty {
+      display: none;
+    }
+
+    &:hover {
+      background: transparent;
+    }
+  `,
+	list: css`
+    overflow-y: auto;
+    max-height: min(320px, var(--available-height));
+
+    &:empty {
+      display: none;
+    }
+  `,
+	popup: css`
+    transform-origin: var(--transform-origin);
+    width: var(--anchor-width);
+    min-width: 0;
+    transition:
+      opacity 140ms ${cssVar.motionEaseOut},
+      transform 140ms ${cssVar.motionEaseOut};
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: scaleY(0.92);
+      opacity: 0;
+    }
+  `
+}));
+const styles = {
+	clear: ownStyles.clear,
+	empty: [
+		styles$1.item,
+		styles$1.empty,
+		ownStyles.empty
+	].join(" "),
+	item: styles$1.item,
+	list: ownStyles.list,
+	popup: [styles$1.popup, ownStyles.popup].join(" "),
+	positioner: styles$1.positioner
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["menuStyles"],"sources":["../../../src/base-ui/AutoComplete/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\r\n\r\nconst ownStyles = createStaticStyles(({ css, cssVar }) => ({\r\n  clear: css`\r\n    cursor: pointer;\r\n\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n    border: none;\r\n\r\n    color: ${cssVar.colorTextTertiary};\r\n\r\n    background: none;\r\n    outline: none;\r\n\r\n    transition: color 150ms ${cssVar.motionEaseOut};\r\n\r\n    &:hover {\r\n      color: ${cssVar.colorText};\r\n    }\r\n  `,\r\n  empty: css`\r\n    cursor: default;\r\n\r\n    &:empty {\r\n      display: none;\r\n    }\r\n\r\n    &:hover {\r\n      background: transparent;\r\n    }\r\n  `,\r\n  list: css`\r\n    overflow-y: auto;\r\n    max-height: min(320px, var(--available-height));\r\n\r\n    &:empty {\r\n      display: none;\r\n    }\r\n  `,\r\n  popup: css`\r\n    transform-origin: var(--transform-origin);\r\n    width: var(--anchor-width);\r\n    min-width: 0;\r\n    transition:\r\n      opacity 140ms ${cssVar.motionEaseOut},\r\n      transform 140ms ${cssVar.motionEaseOut};\r\n\r\n    &[data-starting-style],\r\n    &[data-ending-style] {\r\n      transform: scaleY(0.92);\r\n      opacity: 0;\r\n    }\r\n  `,\r\n}));\r\n\r\nexport const styles = {\r\n  clear: ownStyles.clear,\r\n  empty: [menuStyles.item, menuStyles.empty, ownStyles.empty].join(' '),\r\n  item: menuStyles.item,\r\n  list: ownStyles.list,\r\n  popup: [menuStyles.popup, ownStyles.popup].join(' '),\r\n  positioner: menuStyles.positioner,\r\n};\r\n"],"mappings":";;;AAIA,MAAM,YAAY,oBAAoB,EAAE,KAAK,cAAc;CACzD,OAAO,GAAG;;;;;;;;;;;aAWC,OAAO,kBAAkB;;;;;8BAKR,OAAO,cAAc;;;eAGpC,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;;;;;;;CAWV,MAAM,GAAG;;;;;;;;CAQT,OAAO,GAAG;;;;;sBAKU,OAAO,cAAc;wBACnB,OAAO,cAAc;;;;;;;;AAQ7C,EAAE;AAEF,MAAa,SAAS;CACpB,OAAO,UAAU;CACjB,OAAO;EAACA,SAAW;EAAMA,SAAW;EAAO,UAAU;CAAK,CAAC,CAAC,KAAK,GAAG;CACpE,MAAMA,SAAW;CACjB,MAAM,UAAU;CAChB,OAAO,CAACA,SAAW,OAAO,UAAU,KAAK,CAAC,CAAC,KAAK,GAAG;CACnD,YAAYA,SAAW;AACzB"}

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

@@ -0,0 +1,40 @@
+import { InputProps } from "../Input/type.mjs";
+import "../Input/index.mjs";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/base-ui/AutoComplete/type.d.ts
+interface AutoCompleteOption {
+  disabled?: boolean;
+  label?: ReactNode;
+  value: string;
+}
+type BaseAutocompleteProps = Omit<ComponentProps<typeof Autocomplete.Root>, 'className' | 'style' | 'render' | 'children' | 'items' | 'onValueChange' | 'mode'>;
+interface AutoCompleteProps extends BaseAutocompleteProps {
+  allowClear?: boolean;
+  className?: string;
+  classNames?: {
+    input?: string;
+    item?: string;
+    popup?: string;
+  };
+  disabled?: boolean;
+  emptyText?: ReactNode;
+  onChange?: (value: string) => void;
+  onSearch?: (value: string) => void;
+  options?: (string | AutoCompleteOption)[];
+  placeholder?: string;
+  prefix?: InputProps['prefix'];
+  shadow?: boolean;
+  size?: InputProps['size'];
+  style?: CSSProperties;
+  styles?: {
+    input?: CSSProperties;
+    item?: CSSProperties;
+    popup?: CSSProperties;
+  };
+  suffix?: InputProps['suffix'];
+  variant?: InputProps['variant'];
+}
+//#endregion
+export { AutoCompleteOption, AutoCompleteProps };
+//# sourceMappingURL=type.d.mts.map

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

@@ -0,0 +1,99 @@
+"use client";
+import Center from "../../Flex/Center.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";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { Loader2 } from "lucide-react";
+import { getEmoji } from "@lobehub/fluent-emoji";
+//#region src/base-ui/Avatar/Avatar.tsx
+const Avatar = memo(({ alt, animation, avatar, background, bordered, borderedColor, className, classNames, crossOrigin, draggable = false, emojiScaleWithBackground = true, loading, ref, shadow, shape = "square", size = 48, sliceText = true, style, styles: customStyles, title, tooltipProps, unoptimized, variant = "borderless", ...rest }) => {
+	const isStringAvatar = typeof avatar === "string";
+	const [isImgError, setIsImgError] = useState(false);
+	const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);
+	const emoji = useMemo(() => avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : void 0, [
+		avatar,
+		isStringAvatar,
+		isUrlOrElement
+	]);
+	const text = isUrlOrElement ? title : typeof avatar === "string" ? avatar : void 0;
+	const imgAlt = alt || title || "avatar";
+	const hasBackground = hasValidBackground(background);
+	const showImage = isUrlOrElement && isStringAvatar && !isImgError;
+	const showElement = isUrlOrElement && !isStringAvatar && !isImgError;
+	const customAvatar = useMemo(() => emoji ? /* @__PURE__ */ jsx(FluentEmoji, {
+		emoji,
+		size: calculateEmojiSize(size, hasBackground, emojiScaleWithBackground),
+		type: animation ? "anim" : "3d",
+		unoptimized
+	}) : formatAvatarText(text || title, sliceText), [
+		animation,
+		emoji,
+		hasBackground,
+		size,
+		sliceText,
+		text,
+		title,
+		unoptimized,
+		emojiScaleWithBackground
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: cx(variants({
+			shadow,
+			variant
+		}), className, classNames?.root),
+		ref,
+		style: {
+			backgroundColor: isUrlOrElement && !isImgError || emoji ? background : background || cssVar.colorBorder,
+			borderRadius: shape === "circle" ? "50%" : size < 24 ? "33%" : Math.max(size / 6, 2),
+			boxShadow: bordered ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px` : void 0,
+			color: safeReadableColor(background || cssVar.colorBorder),
+			cursor: rest?.onClick ? "pointer" : void 0,
+			fontSize: size * (emoji ? .7 : .5),
+			height: size,
+			width: size,
+			...style,
+			...customStyles?.root
+		},
+		children: [
+			loading && /* @__PURE__ */ jsx(Center, {
+				className: cx(styles.loading, classNames?.loading),
+				flex: "none",
+				height: "100%",
+				style: customStyles?.loading,
+				width: "100%",
+				children: /* @__PURE__ */ jsx(Icon, {
+					spin: true,
+					icon: Loader2
+				})
+			}),
+			typeof avatar === "string" && showImage && /* @__PURE__ */ jsx("img", {
+				alt: imgAlt,
+				className: cx(styles.img, classNames?.img),
+				crossOrigin,
+				draggable,
+				height: size,
+				loading: "lazy",
+				src: avatar,
+				style: customStyles?.img,
+				width: size,
+				onError: () => setIsImgError(true)
+			}),
+			!showImage && /* @__PURE__ */ jsx("span", {
+				className: cx(styles.content, classNames?.content),
+				style: customStyles?.content,
+				children: showElement ? avatar : customAvatar
+			})
+		]
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar as default };
+
+//# sourceMappingURL=Avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","names":[],"sources":["../../../src/base-ui/Avatar/Avatar.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { getEmoji } from '@lobehub/fluent-emoji';\r\nimport { cssVar, cx } from 'antd-style';\r\nimport { Loader2 } from 'lucide-react';\r\nimport { memo, useMemo, useState } from 'react';\r\n\r\nimport { Center } from '@/Flex';\r\nimport FluentEmoji from '@/FluentEmoji';\r\nimport Icon from '@/Icon';\r\nimport { safeReadableColor } from '@/utils/safeReadableColor';\r\n\r\nimport { styles, variants } from './style';\r\nimport { type AvatarProps } from './type';\r\nimport {\r\n  calculateEmojiSize,\r\n  formatAvatarText,\r\n  hasValidBackground,\r\n  isDefaultAntAvatar,\r\n} from './utils';\r\n\r\nconst Avatar = memo<AvatarProps>(\r\n  ({\r\n    alt,\r\n    animation,\r\n    avatar,\r\n    background,\r\n    bordered,\r\n    borderedColor,\r\n    className,\r\n    classNames,\r\n    crossOrigin,\r\n    draggable = false,\r\n    emojiScaleWithBackground = true,\r\n    loading,\r\n    ref,\r\n    shadow,\r\n    shape = 'square',\r\n    size = 48,\r\n    sliceText = true,\r\n    style,\r\n    styles: customStyles,\r\n    title,\r\n    tooltipProps,\r\n    unoptimized,\r\n    variant = 'borderless',\r\n    ...rest\r\n  }) => {\r\n    const isStringAvatar = typeof avatar === 'string';\r\n\r\n    const [isImgError, setIsImgError] = useState(false);\r\n\r\n    const isUrlOrElement = useMemo(() => isDefaultAntAvatar(avatar), [avatar]);\r\n\r\n    const emoji = useMemo(\r\n      () => (avatar && isStringAvatar && !isUrlOrElement ? getEmoji(avatar) : undefined),\r\n      [avatar, isStringAvatar, isUrlOrElement],\r\n    );\r\n\r\n    const text = isUrlOrElement ? title : typeof avatar === 'string' ? avatar : undefined;\r\n\r\n    const imgAlt = alt || title || 'avatar';\r\n\r\n    const hasBackground = hasValidBackground(background);\r\n    const showImage = isUrlOrElement && isStringAvatar && !isImgError;\r\n    const showElement = isUrlOrElement && !isStringAvatar && !isImgError;\r\n\r\n    const customAvatar = useMemo(\r\n      () =>\r\n        emoji ? (\r\n          <FluentEmoji\r\n            emoji={emoji}\r\n            size={calculateEmojiSize(size, hasBackground, emojiScaleWithBackground)}\r\n            type={animation ? 'anim' : '3d'}\r\n            unoptimized={unoptimized}\r\n          />\r\n        ) : (\r\n          formatAvatarText(text || title, sliceText)\r\n        ),\r\n      [\r\n        animation,\r\n        emoji,\r\n        hasBackground,\r\n        size,\r\n        sliceText,\r\n        text,\r\n        title,\r\n        unoptimized,\r\n        emojiScaleWithBackground,\r\n      ],\r\n    );\r\n\r\n    return (\r\n      <div\r\n        {...rest}\r\n        className={cx(variants({ shadow, variant }), className, classNames?.root)}\r\n        ref={ref}\r\n        style={{\r\n          backgroundColor:\r\n            (isUrlOrElement && !isImgError) || emoji\r\n              ? background\r\n              : background || cssVar.colorBorder,\r\n          borderRadius: shape === 'circle' ? '50%' : size < 24 ? '33%' : Math.max(size / 6, 2),\r\n          boxShadow: bordered\r\n            ? `${cssVar.colorBgLayout} 0 0 0 2px, ${borderedColor || cssVar.colorTextTertiary} 0 0 0 4px`\r\n            : undefined,\r\n          color: safeReadableColor(background || cssVar.colorBorder),\r\n          cursor: rest?.onClick ? 'pointer' : undefined,\r\n          fontSize: size * (emoji ? 0.7 : 0.5),\r\n          height: size,\r\n          width: size,\r\n          ...style,\r\n          ...customStyles?.root,\r\n        }}\r\n      >\r\n        {loading && (\r\n          <Center\r\n            className={cx(styles.loading, classNames?.loading)}\r\n            flex={'none'}\r\n            height={'100%'}\r\n            style={customStyles?.loading}\r\n            width={'100%'}\r\n          >\r\n            <Icon spin icon={Loader2} />\r\n          </Center>\r\n        )}\r\n        {typeof avatar === 'string' && showImage && (\r\n          <img\r\n            alt={imgAlt}\r\n            className={cx(styles.img, classNames?.img)}\r\n            crossOrigin={crossOrigin}\r\n            draggable={draggable}\r\n            height={size}\r\n            loading={'lazy'}\r\n            src={avatar}\r\n            style={customStyles?.img}\r\n            width={size}\r\n            onError={() => setIsImgError(true)}\r\n          />\r\n        )}\r\n        {!showImage && (\r\n          <span className={cx(styles.content, classNames?.content)} style={customStyles?.content}>\r\n            {showElement ? avatar : customAvatar}\r\n          </span>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nAvatar.displayName = 'Avatar';\r\n\r\nexport default Avatar;\r\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/Avatar/AvatarGroup/index.d.mts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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