@lobehub/ui 3.4.1 → 3.4.3

package/es/A/index.mjs

@@ -0,0 +1,18 @@
+'use client';
+
+import { ConfigContext } from "../ConfigProvider/index.mjs";
+import { createElement, memo, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/A/index.tsx
+const createContainer = (as) => memo((props) => createElement(as, props));
+const A = (props) => {
+	const render = use(ConfigContext)?.aAs || "a";
+	return /* @__PURE__ */ jsx(useMemo(() => createContainer(render), [render]), { ...props });
+};
+A.displayName = "A";
+var A_default = A;
+
+//#endregion
+export { A_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/A/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["A: FC<AProps & { ref?: Ref<HTMLAnchorElement> }>"],"sources":["../../src/A/index.tsx"],"sourcesContent":["'use client';\n\nimport { type ElementType, type FC, type Ref, createElement, memo, use, useMemo } from 'react';\n\nimport { ConfigContext } from '@/ConfigProvider';\nimport type { AProps } from '@/types';\n\nconst createContainer = (as: ElementType) => memo((props: any) => createElement(as, props));\n\nconst A: FC<AProps & { ref?: Ref<HTMLAnchorElement> }> = (props) => {\n  const config = use(ConfigContext);\n  const render = config?.aAs || 'a';\n\n  const AContainer = useMemo(() => createContainer(render), [render]);\n\n  return <AContainer {...props} />;\n};\n\nA.displayName = 'A';\n\nexport default A;\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,OAAoB,MAAM,UAAe,cAAc,IAAI,MAAM,CAAC;AAE3F,MAAMA,KAAoD,UAAU;CAElE,MAAM,SADS,IAAI,cAAc,EACV,OAAO;AAI9B,QAAO,oBAFY,cAAc,gBAAgB,OAAO,EAAE,CAAC,OAAO,CAAC,IAEhD,GAAI,QAAS;;AAGlC,EAAE,cAAc;AAEhB,gBAAe"}

package/es/Accordion/Accordion.d.mts

@@ -0,0 +1,8 @@
+import { AccordionProps } from "./type.mjs";
+import * as react21 from "react";
+
+//#region src/Accordion/Accordion.d.ts
+declare const Accordion: react21.NamedExoticComponent<AccordionProps & react21.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Accordion };
+//# sourceMappingURL=Accordion.d.mts.map

package/es/Accordion/Accordion.mjs

@@ -0,0 +1,69 @@
+'use client';
+
+import { AccordionContext } from "./context.mjs";
+import { useStyles } from "./style.mjs";
+import { Divider } from "antd";
+import { LayoutGroup } from "motion/react";
+import { Children, Fragment, forwardRef, isValidElement, memo, useCallback } from "react";
+import useMergeState from "use-merge-value";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Accordion/Accordion.tsx
+const Accordion = memo(forwardRef(({ children, className: userClassName, style: userStyle, accordion = false, defaultExpandedKeys, expandedKeys: expandedKeysProp, onExpandedChange, variant = "borderless", gap, showDivider = false, disableAnimation = false, hideIndicator = false, indicatorPlacement = "start", keepContentMounted = true, classNames, styles: customStyles, motionProps, ...rest }, ref) => {
+	const { cx, styles } = useStyles();
+	const validChildren = Children.toArray(children).filter(isValidElement);
+	const allItemKeys = validChildren.map((child, index) => child.props.itemKey || index);
+	const [expandedKeys, setExpandedKeys] = useMergeState(defaultExpandedKeys ?? allItemKeys, {
+		onChange: onExpandedChange,
+		value: expandedKeysProp
+	});
+	const toggleExpand = useCallback((key) => {
+		const prev = expandedKeys;
+		let newKeys;
+		if (accordion) newKeys = prev.includes(key) ? [] : [key];
+		else newKeys = prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key];
+		setExpandedKeys(newKeys);
+	}, [
+		accordion,
+		expandedKeys,
+		setExpandedKeys
+	]);
+	const contextValue = {
+		disableAnimation,
+		expandedKeys,
+		hideIndicator,
+		indicatorPlacement,
+		isExpanded: useCallback((key) => {
+			return expandedKeys.includes(key);
+		}, [expandedKeys]),
+		keepContentMounted,
+		motionProps,
+		onToggle: toggleExpand,
+		showDivider,
+		variant
+	};
+	const content = /* @__PURE__ */ jsx(Fragment$1, { children: validChildren.map((child, index) => {
+		const childKey = child.props.itemKey || index;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [child, showDivider && index < validChildren.length - 1 && /* @__PURE__ */ jsx(Divider, { className: styles.divider })] }, childKey);
+	}) });
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cx(styles.base, classNames?.base, userClassName),
+			ref,
+			style: {
+				gap,
+				...customStyles?.base,
+				...userStyle
+			},
+			...rest,
+			children: disableAnimation ? content : /* @__PURE__ */ jsx(LayoutGroup, { children: content })
+		})
+	});
+}));
+Accordion.displayName = "Accordion";
+var Accordion_default = Accordion;
+
+//#endregion
+export { Accordion_default as default };
+//# sourceMappingURL=Accordion.mjs.map

package/es/Accordion/Accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.mjs","names":["newKeys: Key[]"],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { LayoutGroup } from 'motion/react';\nimport { Children, Fragment, forwardRef, isValidElement, memo, useCallback } from 'react';\nimport type { Key } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionContext } from './context';\nimport { useStyles } from './style';\nimport type { AccordionProps } from './type';\n\nconst Accordion = memo(\n  forwardRef<HTMLDivElement, AccordionProps>(\n    (\n      {\n        children,\n        className: userClassName,\n        style: userStyle,\n        accordion = false,\n        defaultExpandedKeys,\n        expandedKeys: expandedKeysProp,\n        onExpandedChange,\n        variant = 'borderless',\n        gap,\n        showDivider = false,\n        disableAnimation = false,\n        hideIndicator = false,\n        indicatorPlacement = 'start',\n        keepContentMounted = true,\n        classNames,\n        styles: customStyles,\n        motionProps,\n        ...rest\n      },\n      ref,\n    ) => {\n      const { cx, styles } = useStyles();\n\n      // Convert children to array and filter valid elements\n      const validChildren = Children.toArray(children).filter(isValidElement);\n\n      // Collect all item keys\n      const allItemKeys = validChildren.map(\n        (child, index) => (child.props as any).itemKey || index,\n      );\n\n      // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\n      const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\n\n      const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\n        onChange: onExpandedChange,\n        value: expandedKeysProp,\n      });\n\n      const toggleExpand = useCallback(\n        (key: Key) => {\n          const prev = expandedKeys;\n          let newKeys: Key[];\n\n          if (accordion) {\n            newKeys = prev.includes(key) ? [] : [key];\n          } else {\n            newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\n          }\n\n          setExpandedKeys(newKeys);\n        },\n        [accordion, expandedKeys, setExpandedKeys],\n      );\n\n      const isExpanded = useCallback(\n        (key: Key) => {\n          return expandedKeys.includes(key);\n        },\n        [expandedKeys],\n      );\n\n      const contextValue = {\n        disableAnimation,\n        expandedKeys,\n        hideIndicator,\n        indicatorPlacement,\n        isExpanded,\n        keepContentMounted,\n        motionProps,\n        onToggle: toggleExpand,\n        showDivider,\n        variant,\n      };\n\n      const content = (\n        <>\n          {validChildren.map((child, index) => {\n            // Extract itemKey from child props to use as React key\n            const childKey = (child.props as any).itemKey || index;\n            return (\n              <Fragment key={childKey}>\n                {child}\n                {showDivider && index < validChildren.length - 1 && (\n                  <Divider className={styles.divider} />\n                )}\n              </Fragment>\n            );\n          })}\n        </>\n      );\n\n      return (\n        <AccordionContext.Provider value={contextValue}>\n          <div\n            className={cx(styles.base, classNames?.base, userClassName)}\n            ref={ref}\n            style={{\n              gap: gap,\n              ...customStyles?.base,\n              ...userStyle,\n            }}\n            {...rest}\n          >\n            {disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}\n          </div>\n        </AccordionContext.Provider>\n      );\n    },\n  ),\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAY,KAChB,YAEI,EACE,UACA,WAAW,eACX,OAAO,WACP,YAAY,OACZ,qBACA,cAAc,kBACd,kBACA,UAAU,cACV,KACA,cAAc,OACd,mBAAmB,OACnB,gBAAgB,OAChB,qBAAqB,SACrB,qBAAqB,MACrB,YACA,QAAQ,cACR,aACA,GAAG,QAEL,QACG;CACH,MAAM,EAAE,IAAI,WAAW,WAAW;CAGlC,MAAM,gBAAgB,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CAGvE,MAAM,cAAc,cAAc,KAC/B,OAAO,UAAW,MAAM,MAAc,WAAW,MACnD;CAKD,MAAM,CAAC,cAAc,mBAAmB,cAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO;EACb,IAAIA;AAEJ,MAAI,UACF,WAAU,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,CAAC,IAAI;MAEzC,WAAU,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,MAAW,MAAM,IAAI,GAAG,CAAC,GAAG,MAAM,IAAI;AAGpF,kBAAgB,QAAQ;IAE1B;EAAC;EAAW;EAAc;EAAgB,CAC3C;CASD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA,YAZiB,aAChB,QAAa;AACZ,UAAO,aAAa,SAAS,IAAI;KAEnC,CAAC,aAAa,CACf;EAQC;EACA;EACA,UAAU;EACV;EACA;EACD;CAED,MAAM,UACJ,4CACG,cAAc,KAAK,OAAO,UAAU;EAEnC,MAAM,WAAY,MAAM,MAAc,WAAW;AACjD,SACE,qBAAC,uBACE,OACA,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,WAAQ,WAAW,OAAO,UAAW,KAH3B,SAKJ;GAEb,GACD;AAGL,QACE,oBAAC,iBAAiB;EAAS,OAAO;YAChC,oBAAC;GACC,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,cAAc;GACtD;GACL,OAAO;IACA;IACL,GAAG,cAAc;IACjB,GAAG;IACJ;GACD,GAAI;aAEH,mBAAmB,UAAU,oBAAC,yBAAa,UAAsB;IAC9D;GACoB;EAGjC,CACF;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/Accordion/AccordionItem.d.mts

@@ -0,0 +1,8 @@
+import { AccordionItemProps } from "./type.mjs";
+import * as react23 from "react";
+
+//#region src/Accordion/AccordionItem.d.ts
+declare const AccordionItem: react23.NamedExoticComponent<AccordionItemProps>;
+//#endregion
+export { AccordionItem };
+//# sourceMappingURL=AccordionItem.d.mts.map

package/es/Accordion/AccordionItem.mjs

@@ -0,0 +1,263 @@
+'use client';
+
+import { useAccordionContext } from "./context.mjs";
+import { useStyles } from "./style.mjs";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Block_default from "../Block/Block.mjs";
+import { LazyMotion } from "../motion/LazyMotion.mjs";
+import { m } from "../motion/index.mjs";
+import Text_default from "../Text/Text.mjs";
+import ArrowIcon_default from "./ArrowIcon.mjs";
+import { memo, useCallback, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Accordion/AccordionItem.tsx
+const AccordionItem = memo(({ itemKey, title, children, action, disabled = false, hideIndicator: itemHideIndicator, indicatorPlacement: itemIndicatorPlacement, indicator: customIndicator, classNames, paddingInline = 16, paddingBlock = 8, padding, ref, variant: customVariant, styles: customStyles, headerWrapper }) => {
+	const { cx, styles } = useStyles();
+	const { isExpanded, onToggle, hideIndicator: contextHideIndicator, indicatorPlacement: contextIndicatorPlacement, keepContentMounted, disableAnimation, motionProps: contextMotionProps, variant = "filled" } = useAccordionContext();
+	const isOpen = isExpanded(itemKey);
+	const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;
+	const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? "start";
+	const handleToggle = useCallback(() => {
+		if (!disabled) onToggle(itemKey);
+	}, [
+		disabled,
+		itemKey,
+		onToggle
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (disabled) return;
+		switch (e.key) {
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				handleToggle();
+				break;
+		}
+	}, [disabled, handleToggle]);
+	const indicator = useMemo(() => {
+		if (hideIndicatorFinal) return null;
+		if (customIndicator) {
+			if (typeof customIndicator === "function") return /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cx(styles.indicator, classNames?.indicator),
+				style: customStyles?.indicator,
+				children: customIndicator({
+					isDisabled: disabled,
+					isOpen
+				})
+			});
+			return /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cx(styles.indicator, classNames?.indicator),
+				style: customStyles?.indicator,
+				children: customIndicator
+			});
+		}
+		return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cx(styles.indicator, classNames?.indicator),
+			style: customStyles?.indicator,
+			children: /* @__PURE__ */ jsx(ArrowIcon_default, { className: cx(styles.icon, isOpen && styles.iconRotate) })
+		});
+	}, [
+		hideIndicatorFinal,
+		customIndicator,
+		disabled,
+		isOpen,
+		cx,
+		styles,
+		classNames,
+		customStyles
+	]);
+	const motionProps = useMemo(() => ({
+		animate: isOpen ? "enter" : "exit",
+		exit: "exit",
+		initial: false,
+		variants: {
+			enter: {
+				height: "auto",
+				opacity: 1,
+				transition: {
+					duration: .2,
+					ease: [
+						.4,
+						0,
+						.2,
+						1
+					]
+				}
+			},
+			exit: {
+				height: 0,
+				opacity: 0,
+				transition: {
+					duration: .2,
+					ease: [
+						.4,
+						0,
+						.2,
+						1
+					]
+				}
+			}
+		},
+		...contextMotionProps
+	}), [isOpen, contextMotionProps]);
+	const contentElement = useMemo(() => {
+		if (disableAnimation || !keepContentMounted) {
+			if (keepContentMounted) return /* @__PURE__ */ jsx("div", {
+				className: cx("accordion-content", styles.content, classNames?.content),
+				role: "region",
+				style: {
+					display: isOpen ? "block" : "none",
+					...customStyles?.content
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					className: styles.contentInner,
+					children
+				})
+			});
+			return isOpen && /* @__PURE__ */ jsx("div", {
+				className: cx("accordion-content", styles.content, classNames?.content),
+				role: "region",
+				style: customStyles?.content,
+				children: /* @__PURE__ */ jsx("div", {
+					className: styles.contentInner,
+					children
+				})
+			});
+		}
+		return /* @__PURE__ */ jsx(LazyMotion, { children: /* @__PURE__ */ jsx(m.div, {
+			...motionProps,
+			style: { overflow: "hidden" },
+			children: /* @__PURE__ */ jsx("div", {
+				className: cx("accordion-content", styles.content, classNames?.content),
+				role: "region",
+				style: customStyles?.content,
+				children: /* @__PURE__ */ jsx("div", {
+					className: styles.contentInner,
+					children
+				})
+			})
+		}) });
+	}, [
+		disableAnimation,
+		keepContentMounted,
+		isOpen,
+		cx,
+		styles,
+		classNames,
+		customStyles,
+		children,
+		motionProps
+	]);
+	const titleNode = useMemo(() => typeof title === "string" ? /* @__PURE__ */ jsx(Text_default, {
+		className: classNames?.title,
+		ellipsis: true,
+		style: customStyles?.title,
+		children: title
+	}) : title, [
+		title,
+		classNames?.title,
+		customStyles?.title
+	]);
+	const actionNode = useMemo(() => action && /* @__PURE__ */ jsx(FlexBasic_default, {
+		align: "center",
+		className: cx("accordion-action", styles.action, classNames?.action),
+		flex: "none",
+		gap: 4,
+		horizontal: true,
+		onClick: (e) => e.stopPropagation(),
+		style: customStyles?.action,
+		children: action
+	}), [
+		action,
+		cx,
+		styles,
+		classNames?.action,
+		customStyles?.action
+	]);
+	const headerElement = useMemo(() => {
+		const header = /* @__PURE__ */ jsx(Block_default, {
+			className: cx("accordion-header", styles.header, classNames?.header),
+			clickable: !disabled,
+			gap: 4,
+			horizontal: true,
+			justify: "space-between",
+			onClick: handleToggle,
+			onKeyDown: handleKeyDown,
+			padding,
+			paddingBlock,
+			paddingInline,
+			ref,
+			style: {
+				alignItems: "center",
+				cursor: disabled ? "not-allowed" : "pointer",
+				opacity: disabled ? .5 : void 0,
+				overflow: "hidden",
+				width: "100%",
+				...customStyles?.header
+			},
+			variant: customVariant || variant,
+			children: indicatorPlacementFinal === "start" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+				align: "center",
+				flex: 1,
+				gap: 2,
+				horizontal: true,
+				style: { overflow: "hidden" },
+				children: [titleNode, indicator]
+			}), /* @__PURE__ */ jsx(FlexBasic_default, {
+				align: "center",
+				flex: "none",
+				gap: 4,
+				horizontal: true,
+				children: actionNode
+			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+				align: "center",
+				flex: 1,
+				gap: 2,
+				horizontal: true,
+				style: { overflow: "hidden" },
+				children: titleNode
+			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
+				align: "center",
+				flex: "none",
+				gap: 4,
+				horizontal: true,
+				children: [actionNode, indicator]
+			})] })
+		});
+		if (headerWrapper) return headerWrapper(header);
+		return header;
+	}, [
+		cx,
+		styles,
+		classNames,
+		disabled,
+		handleToggle,
+		handleKeyDown,
+		padding,
+		paddingBlock,
+		paddingInline,
+		ref,
+		customVariant,
+		variant,
+		indicatorPlacementFinal,
+		titleNode,
+		indicator,
+		actionNode,
+		headerWrapper
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("accordion-item", styles.item, classNames?.base),
+		style: customStyles?.base,
+		children: [headerElement, contentElement]
+	});
+});
+AccordionItem.displayName = "AccordionItem";
+var AccordionItem_default = AccordionItem;
+
+//#endregion
+export { AccordionItem_default as default };
+//# sourceMappingURL=AccordionItem.mjs.map

package/es/Accordion/AccordionItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.mjs","names":["ArrowIcon","Text","Flexbox","Block"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport { KeyboardEvent, memo, useCallback, useMemo } from 'react';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Text from '@/Text';\nimport { LazyMotion, m } from '@/motion';\n\nimport ArrowIcon from './ArrowIcon';\nimport { useAccordionContext } from './context';\nimport { useStyles } from './style';\nimport type { AccordionItemProps } from './type';\n\nconst AccordionItem = memo<AccordionItemProps>(\n  ({\n    itemKey,\n    title,\n    children,\n    action,\n    disabled = false,\n    hideIndicator: itemHideIndicator,\n    indicatorPlacement: itemIndicatorPlacement,\n    indicator: customIndicator,\n    classNames,\n    paddingInline = 16,\n    paddingBlock = 8,\n    padding,\n    ref,\n    variant: customVariant,\n    styles: customStyles,\n    headerWrapper,\n  }) => {\n    const { cx, styles } = useStyles();\n    const context = useAccordionContext();\n\n    const {\n      isExpanded,\n      onToggle,\n      hideIndicator: contextHideIndicator,\n      indicatorPlacement: contextIndicatorPlacement,\n      keepContentMounted,\n      disableAnimation,\n      motionProps: contextMotionProps,\n      variant = 'filled',\n    } = context;\n\n    const isOpen = isExpanded(itemKey);\n    const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\n    const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\n\n    const handleToggle = useCallback(() => {\n      if (!disabled) {\n        onToggle(itemKey);\n      }\n    }, [disabled, itemKey, onToggle]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (disabled) return;\n\n        switch (e.key) {\n          case 'Enter':\n          case ' ': {\n            e.preventDefault();\n            handleToggle();\n            break;\n          }\n        }\n      },\n      [disabled, handleToggle],\n    );\n\n    // Build indicator\n    const indicator = useMemo(() => {\n      if (hideIndicatorFinal) return null;\n\n      if (customIndicator) {\n        if (typeof customIndicator === 'function') {\n          return (\n            <span\n              aria-hidden=\"true\"\n              className={cx(styles.indicator, classNames?.indicator)}\n              style={customStyles?.indicator}\n            >\n              {customIndicator({ isDisabled: disabled, isOpen })}\n            </span>\n          );\n        }\n        return (\n          <span\n            aria-hidden=\"true\"\n            className={cx(styles.indicator, classNames?.indicator)}\n            style={customStyles?.indicator}\n          >\n            {customIndicator}\n          </span>\n        );\n      }\n\n      return (\n        <span\n          aria-hidden=\"true\"\n          className={cx(styles.indicator, classNames?.indicator)}\n          style={customStyles?.indicator}\n        >\n          <ArrowIcon className={cx(styles.icon, isOpen && styles.iconRotate)} />\n        </span>\n      );\n    }, [\n      hideIndicatorFinal,\n      customIndicator,\n      disabled,\n      isOpen,\n      cx,\n      styles,\n      classNames,\n      customStyles,\n    ]);\n\n    // Animation variants\n    const motionProps = useMemo(\n      () => ({\n        animate: isOpen ? 'enter' : 'exit',\n        exit: 'exit',\n        initial: false,\n        variants: {\n          enter: {\n            height: 'auto',\n            opacity: 1,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n          exit: {\n            height: 0,\n            opacity: 0,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n        },\n        ...contextMotionProps,\n      }),\n      [isOpen, contextMotionProps],\n    );\n\n    // Render content\n    const contentElement = useMemo(() => {\n      if (disableAnimation || !keepContentMounted) {\n        if (keepContentMounted) {\n          return (\n            <div\n              className={cx('accordion-content', styles.content, classNames?.content)}\n              role=\"region\"\n              style={{\n                display: isOpen ? 'block' : 'none',\n                ...customStyles?.content,\n              }}\n            >\n              <div className={styles.contentInner}>{children}</div>\n            </div>\n          );\n        }\n\n        return (\n          isOpen && (\n            <div\n              className={cx('accordion-content', styles.content, classNames?.content)}\n              role=\"region\"\n              style={customStyles?.content}\n            >\n              <div className={styles.contentInner}>{children}</div>\n            </div>\n          )\n        );\n      }\n\n      return (\n        <LazyMotion>\n          <m.div {...motionProps} style={{ overflow: 'hidden' }}>\n            <div\n              className={cx('accordion-content', styles.content, classNames?.content)}\n              role=\"region\"\n              style={customStyles?.content}\n            >\n              <div className={styles.contentInner}>{children}</div>\n            </div>\n          </m.div>\n        </LazyMotion>\n      );\n    }, [\n      disableAnimation,\n      keepContentMounted,\n      isOpen,\n      cx,\n      styles,\n      classNames,\n      customStyles,\n      children,\n      motionProps,\n    ]);\n\n    const titleNode = useMemo(\n      () =>\n        typeof title === 'string' ? (\n          <Text className={classNames?.title} ellipsis style={customStyles?.title}>\n            {title}\n          </Text>\n        ) : (\n          title\n        ),\n      [title, classNames?.title, customStyles?.title],\n    );\n\n    const actionNode = useMemo(\n      () =>\n        action && (\n          <Flexbox\n            align={'center'}\n            className={cx('accordion-action', styles.action, classNames?.action)}\n            flex={'none'}\n            gap={4}\n            horizontal\n            onClick={(e) => e.stopPropagation()}\n            style={customStyles?.action}\n          >\n            {action}\n          </Flexbox>\n        ),\n      [action, cx, styles, classNames?.action, customStyles?.action],\n    );\n\n    const headerElement = useMemo(() => {\n      const header = (\n        <Block\n          className={cx('accordion-header', styles.header, classNames?.header)}\n          clickable={!disabled}\n          gap={4}\n          horizontal\n          justify={'space-between'}\n          onClick={handleToggle}\n          onKeyDown={handleKeyDown}\n          padding={padding}\n          paddingBlock={paddingBlock}\n          paddingInline={paddingInline}\n          ref={ref}\n          style={{\n            alignItems: 'center',\n            cursor: disabled ? 'not-allowed' : 'pointer',\n            opacity: disabled ? 0.5 : undefined,\n            overflow: 'hidden',\n            width: '100%',\n            ...customStyles?.header,\n          }}\n          variant={customVariant || variant}\n        >\n          {indicatorPlacementFinal === 'start' ? (\n            <>\n              <Flexbox\n                align={'center'}\n                flex={1}\n                gap={2}\n                horizontal\n                style={{\n                  overflow: 'hidden',\n                }}\n              >\n                {titleNode}\n                {indicator}\n              </Flexbox>\n              <Flexbox align={'center'} flex={'none'} gap={4} horizontal>\n                {actionNode}\n              </Flexbox>\n            </>\n          ) : (\n            <>\n              <Flexbox\n                align={'center'}\n                flex={1}\n                gap={2}\n                horizontal\n                style={{\n                  overflow: 'hidden',\n                }}\n              >\n                {titleNode}\n              </Flexbox>\n              <Flexbox align={'center'} flex={'none'} gap={4} horizontal>\n                {actionNode}\n                {indicator}\n              </Flexbox>\n            </>\n          )}\n        </Block>\n      );\n      if (headerWrapper) {\n        return headerWrapper(header);\n      }\n      return header;\n    }, [\n      cx,\n      styles,\n      classNames,\n      disabled,\n      handleToggle,\n      handleKeyDown,\n      padding,\n      paddingBlock,\n      paddingInline,\n      ref,\n      customVariant,\n      variant,\n      indicatorPlacementFinal,\n      titleNode,\n      indicator,\n      actionNode,\n      headerWrapper,\n    ]);\n\n    return (\n      <div\n        className={cx('accordion-item', styles.item, classNames?.base)}\n        style={customStyles?.base}\n      >\n        {headerElement}\n        {contentElement}\n      </div>\n    );\n  },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport default AccordionItem;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,gBAAgB,MACnB,EACC,SACA,OACA,UACA,QACA,WAAW,OACX,eAAe,mBACf,oBAAoB,wBACpB,WAAW,iBACX,YACA,gBAAgB,IAChB,eAAe,GACf,SACA,KACA,SAAS,eACT,QAAQ,cACR,oBACI;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAGlC,MAAM,EACJ,YACA,UACA,eAAe,sBACf,oBAAoB,2BACpB,oBACA,kBACA,aAAa,oBACb,UAAU,aAVI,qBAAqB;CAarC,MAAM,SAAS,WAAW,QAAQ;CAClC,MAAM,qBAAqB,qBAAqB,wBAAwB;CACxE,MAAM,0BAA0B,0BAA0B,6BAA6B;CAEvF,MAAM,eAAe,kBAAkB;AACrC,MAAI,CAAC,SACH,UAAS,QAAQ;IAElB;EAAC;EAAU;EAAS;EAAS,CAAC;CAEjC,MAAM,gBAAgB,aACnB,MAAqB;AACpB,MAAI,SAAU;AAEd,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,MAAE,gBAAgB;AAClB,kBAAc;AACd;;IAIN,CAAC,UAAU,aAAa,CACzB;CAGD,MAAM,YAAY,cAAc;AAC9B,MAAI,mBAAoB,QAAO;AAE/B,MAAI,iBAAiB;AACnB,OAAI,OAAO,oBAAoB,WAC7B,QACE,oBAAC;IACC,eAAY;IACZ,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;IACtD,OAAO,cAAc;cAEpB,gBAAgB;KAAE,YAAY;KAAU;KAAQ,CAAC;KAC7C;AAGX,UACE,oBAAC;IACC,eAAY;IACZ,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;IACtD,OAAO,cAAc;cAEpB;KACI;;AAIX,SACE,oBAAC;GACC,eAAY;GACZ,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GACtD,OAAO,cAAc;aAErB,oBAACA,qBAAU,WAAW,GAAG,OAAO,MAAM,UAAU,OAAO,WAAW,GAAI;IACjE;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAGF,MAAM,cAAc,eACX;EACL,SAAS,SAAS,UAAU;EAC5B,MAAM;EACN,SAAS;EACT,UAAU;GACR,OAAO;IACL,QAAQ;IACR,SAAS;IACT,YAAY;KACV,UAAU;KACV,MAAM;MAAC;MAAK;MAAG;MAAK;MAAE;KACvB;IACF;GACD,MAAM;IACJ,QAAQ;IACR,SAAS;IACT,YAAY;KACV,UAAU;KACV,MAAM;MAAC;MAAK;MAAG;MAAK;MAAE;KACvB;IACF;GACF;EACD,GAAG;EACJ,GACD,CAAC,QAAQ,mBAAmB,CAC7B;CAGD,MAAM,iBAAiB,cAAc;AACnC,MAAI,oBAAoB,CAAC,oBAAoB;AAC3C,OAAI,mBACF,QACE,oBAAC;IACC,WAAW,GAAG,qBAAqB,OAAO,SAAS,YAAY,QAAQ;IACvE,MAAK;IACL,OAAO;KACL,SAAS,SAAS,UAAU;KAC5B,GAAG,cAAc;KAClB;cAED,oBAAC;KAAI,WAAW,OAAO;KAAe;MAAe;KACjD;AAIV,UACE,UACE,oBAAC;IACC,WAAW,GAAG,qBAAqB,OAAO,SAAS,YAAY,QAAQ;IACvE,MAAK;IACL,OAAO,cAAc;cAErB,oBAAC;KAAI,WAAW,OAAO;KAAe;MAAe;KACjD;;AAKZ,SACE,oBAAC,wBACC,oBAAC,EAAE;GAAI,GAAI;GAAa,OAAO,EAAE,UAAU,UAAU;aACnD,oBAAC;IACC,WAAW,GAAG,qBAAqB,OAAO,SAAS,YAAY,QAAQ;IACvE,MAAK;IACL,OAAO,cAAc;cAErB,oBAAC;KAAI,WAAW,OAAO;KAAe;MAAe;KACjD;IACA,GACG;IAEd;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAY,cAEd,OAAO,UAAU,WACf,oBAACC;EAAK,WAAW,YAAY;EAAO;EAAS,OAAO,cAAc;YAC/D;GACI,GAEP,OAEJ;EAAC;EAAO,YAAY;EAAO,cAAc;EAAM,CAChD;CAED,MAAM,aAAa,cAEf,UACE,oBAACC;EACC,OAAO;EACP,WAAW,GAAG,oBAAoB,OAAO,QAAQ,YAAY,OAAO;EACpE,MAAM;EACN,KAAK;EACL;EACA,UAAU,MAAM,EAAE,iBAAiB;EACnC,OAAO,cAAc;YAEpB;GACO,EAEd;EAAC;EAAQ;EAAI;EAAQ,YAAY;EAAQ,cAAc;EAAO,CAC/D;CAED,MAAM,gBAAgB,cAAc;EAClC,MAAM,SACJ,oBAACC;GACC,WAAW,GAAG,oBAAoB,OAAO,QAAQ,YAAY,OAAO;GACpE,WAAW,CAAC;GACZ,KAAK;GACL;GACA,SAAS;GACT,SAAS;GACT,WAAW;GACF;GACK;GACC;GACV;GACL,OAAO;IACL,YAAY;IACZ,QAAQ,WAAW,gBAAgB;IACnC,SAAS,WAAW,KAAM;IAC1B,UAAU;IACV,OAAO;IACP,GAAG,cAAc;IAClB;GACD,SAAS,iBAAiB;aAEzB,4BAA4B,UAC3B,8CACE,qBAACD;IACC,OAAO;IACP,MAAM;IACN,KAAK;IACL;IACA,OAAO,EACL,UAAU,UACX;eAEA,WACA;KACO,EACV,oBAACA;IAAQ,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG;cAC7C;KACO,IACT,GAEH,8CACE,oBAACA;IACC,OAAO;IACP,MAAM;IACN,KAAK;IACL;IACA,OAAO,EACL,UAAU,UACX;cAEA;KACO,EACV,qBAACA;IAAQ,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG;eAC7C,YACA;KACO,IACT;IAEC;AAEV,MAAI,cACF,QAAO,cAAc,OAAO;AAE9B,SAAO;IACN;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC;EACC,WAAW,GAAG,kBAAkB,OAAO,MAAM,YAAY,KAAK;EAC9D,OAAO,cAAc;aAEpB,eACA;GACG;EAGX;AAED,cAAc,cAAc;AAE5B,4BAAe"}

package/es/Accordion/ArrowIcon.mjs

@@ -0,0 +1,28 @@
+'use client';
+
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/Accordion/ArrowIcon.tsx
+const ArrowIcon = memo(({ size = "1em", style, ...rest }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		height: size,
+		style: {
+			flex: "none",
+			lineHeight: 1,
+			...style
+		},
+		viewBox: "0 0 16 16",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: /* @__PURE__ */ jsx("path", { d: "M7.002 10.624a.5.5 0 01-.752-.432V5.808a.5.5 0 01.752-.432l3.758 2.192a.5.5 0 010 .864l-3.758 2.192z" })
+	});
+});
+var ArrowIcon_default = ArrowIcon;
+
+//#endregion
+export { ArrowIcon_default as default };
+//# sourceMappingURL=ArrowIcon.mjs.map

package/es/Accordion/ArrowIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowIcon.mjs","names":["ArrowIcon: IconType"],"sources":["../../src/Accordion/ArrowIcon.tsx"],"sourcesContent":["'use client';\n\nimport type { IconType } from '@lobehub/icons';\nimport { memo } from 'react';\n\nconst ArrowIcon: IconType = memo(({ size = '1em', style, ...rest }) => {\n  return (\n    <svg\n      fill=\"currentColor\"\n      fillRule=\"evenodd\"\n      height={size}\n      style={{ flex: 'none', lineHeight: 1, ...style }}\n      viewBox=\"0 0 16 16\"\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...rest}\n    >\n      <path d=\"M7.002 10.624a.5.5 0 01-.752-.432V5.808a.5.5 0 01.752-.432l3.758 2.192a.5.5 0 010 .864l-3.758 2.192z\" />\n    </svg>\n  );\n});\n\nexport default ArrowIcon;\n"],"mappings":";;;;;;AAKA,MAAMA,YAAsB,MAAM,EAAE,OAAO,OAAO,OAAO,GAAG,WAAW;AACrE,QACE,oBAAC;EACC,MAAK;EACL,UAAS;EACT,QAAQ;EACR,OAAO;GAAE,MAAM;GAAQ,YAAY;GAAG,GAAG;GAAO;EAChD,SAAQ;EACR,OAAO;EACP,OAAM;EACN,GAAI;YAEJ,oBAAC,UAAK,GAAE,yGAAyG;GAC7G;EAER;AAEF,wBAAe"}

package/es/Accordion/context.mjs

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+
+//#region src/Accordion/context.tsx
+const AccordionContext = createContext(null);
+const useAccordionContext = () => {
+	const context = useContext(AccordionContext);
+	if (!context) throw new Error("AccordionItem must be used within Accordion");
+	return context;
+};
+
+//#endregion
+export { AccordionContext, useAccordionContext };
+//# sourceMappingURL=context.mjs.map

package/es/Accordion/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/Accordion/context.tsx"],"sourcesContent":["import type { Key } from 'react';\nimport { createContext, useContext } from 'react';\n\ninterface AccordionContextValue {\n  disableAnimation?: boolean;\n  expandedKeys: Key[];\n  hideIndicator?: boolean;\n  indicatorPlacement?: 'end' | 'start';\n  isExpanded: (key: Key) => boolean;\n  keepContentMounted?: boolean;\n  motionProps?: any;\n  onToggle: (key: Key) => void;\n  showDivider?: boolean;\n  variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const AccordionContext = createContext<AccordionContextValue | null>(null);\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext);\n  if (!context) {\n    throw new Error('AccordionItem must be used within Accordion');\n  }\n  return context;\n};\n"],"mappings":";;;AAgBA,MAAa,mBAAmB,cAA4C,KAAK;AAEjF,MAAa,4BAA4B;CACvC,MAAM,UAAU,WAAW,iBAAiB;AAC5C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,8CAA8C;AAEhE,QAAO"}

package/es/Accordion/index.d.mts

@@ -0,0 +1,4 @@
+import { AccordionItemProps, AccordionProps } from "./type.mjs";
+import { Accordion } from "./Accordion.mjs";
+import { AccordionItem } from "./AccordionItem.mjs";
+export { Accordion, AccordionItem, AccordionItemProps, AccordionProps };

package/es/Accordion/index.mjs

@@ -0,0 +1,4 @@
+import Accordion_default from "./Accordion.mjs";
+import AccordionItem_default from "./AccordionItem.mjs";
+
+export { Accordion_default as Accordion, AccordionItem_default as AccordionItem };

package/es/Accordion/style.mjs

@@ -0,0 +1,65 @@
+import { createStyles } from "antd-style";
+
+//#region src/Accordion/style.ts
+const useStyles = createStyles(({ css: css$1, token }) => {
+	return {
+		action: css$1`
+      width: 0;
+      opacity: 0;
+      transition:
+        opacity,
+        width 0.2s ${token.motionEaseOut};
+    `,
+		base: css$1`
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    `,
+		content: css$1`
+      overflow: hidden;
+    `,
+		contentInner: css$1`
+      /* Content wrapper for animation */
+    `,
+		divider: css$1`
+      margin-block: 0;
+    `,
+		header: css$1`
+      &:hover .accordion-action {
+        width: auto;
+        opacity: 1;
+      }
+
+      &:focus-visible {
+        border-radius: ${token.borderRadiusLG}px;
+        outline: 2px solid ${token.colorPrimary};
+        outline-offset: 2px;
+      }
+    `,
+		icon: css$1`
+      transition: transform 200ms ${token.motionEaseOut};
+    `,
+		iconRotate: css$1`
+      transform: rotate(90deg);
+    `,
+		indicator: css$1`
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+
+      font-size: 18px;
+      color: ${token.colorTextDescription};
+
+      transition: transform 200ms ${token.motionEaseOut};
+    `,
+		item: css$1`
+      position: relative;
+      display: flex;
+      flex-direction: column;
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/Accordion/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Accordion/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    action: css`\n      width: 0;\n      opacity: 0;\n      transition:\n        opacity,\n        width 0.2s ${token.motionEaseOut};\n    `,\n    base: css`\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    `,\n    content: css`\n      overflow: hidden;\n    `,\n    contentInner: css`\n      /* Content wrapper for animation */\n    `,\n    divider: css`\n      margin-block: 0;\n    `,\n    header: css`\n      &:hover .accordion-action {\n        width: auto;\n        opacity: 1;\n      }\n\n      &:focus-visible {\n        border-radius: ${token.borderRadiusLG}px;\n        outline: 2px solid ${token.colorPrimary};\n        outline-offset: 2px;\n      }\n    `,\n    icon: css`\n      transition: transform 200ms ${token.motionEaseOut};\n    `,\n    iconRotate: css`\n      transform: rotate(90deg);\n    `,\n    indicator: css`\n      display: flex;\n      flex-shrink: 0;\n      align-items: center;\n\n      font-size: 18px;\n      color: ${token.colorTextDescription};\n\n      transition: transform 200ms ${token.motionEaseOut};\n    `,\n    item: css`\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,QAAQ,KAAG;;;;;qBAKM,MAAM,cAAc;;EAErC,MAAM,KAAG;;;;;EAKT,SAAS,KAAG;;;EAGZ,cAAc,KAAG;;;EAGjB,SAAS,KAAG;;;EAGZ,QAAQ,KAAG;;;;;;;yBAOU,MAAM,eAAe;6BACjB,MAAM,aAAa;;;;EAI5C,MAAM,KAAG;oCACuB,MAAM,cAAc;;EAEpD,YAAY,KAAG;;;EAGf,WAAW,KAAG;;;;;;eAMH,MAAM,qBAAqB;;oCAEN,MAAM,cAAc;;EAEpD,MAAM,KAAG;;;;;EAKV;EACD"}