@lobehub/ui 4.1.9 → 4.2.1

package/es/Accordion/Accordion.d.mts

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

package/es/Accordion/Accordion.mjs

@@ -6,14 +6,14 @@ import { Children, Fragment, isValidElement, memo, useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Divider } from "antd";
 import { LayoutGroup } from "motion/react";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 
 //#region src/Accordion/Accordion.tsx
 const Accordion = memo(({ 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, ref, ...rest }) => {
 	const { cx, styles } = useStyles();
 	const validChildren = Children.toArray(children).filter(isValidElement);
 	const allItemKeys = validChildren.map((child, index) => child.props.itemKey || index);
-	const [expandedKeys, setExpandedKeys] = useControlledState(defaultExpandedKeys ?? allItemKeys, {
+	const [expandedKeys, setExpandedKeys] = useMergeState(defaultExpandedKeys ?? allItemKeys, {
 		onChange: onExpandedChange,
 		value: expandedKeysProp
 	});

package/es/Accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":["useMergeState","newKeys: Key[]"],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { LayoutGroup } from 'motion/react';\nimport { Children, Fragment, 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<AccordionProps>(\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    ref,\n    ...rest\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((child, index) => (child.props as any).itemKey || index);\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\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAY,MACf,EACC,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,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAGlC,MAAM,gBAAgB,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CAGvE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,MAAM;CAK9F,MAAM,CAAC,cAAc,mBAAmBA,mBAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO;EACb,IAAIC;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;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"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, 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<AccordionProps>(\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    ref,\n    ...rest\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((child, index) => (child.props as any).itemKey || index);\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\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAY,MACf,EACC,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,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAGlC,MAAM,gBAAgB,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CAGvE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,MAAM;CAK9F,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;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/Accordion/AccordionItem.d.mts

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

package/es/Accordion/AccordionItem.mjs

@@ -7,25 +7,155 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Block_default from "../Block/Block.mjs";
 import Text_default from "../Text/Text.mjs";
 import ArrowIcon_default from "./ArrowIcon.mjs";
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence } from "motion/react";
+import useMergeState from "use-merge-value";
 
 //#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 motionContainerStyle = { overflow: "hidden" };
+const AccordionStaticContent = memo(({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {
+	if (keepContentMounted) return /* @__PURE__ */ jsx("div", {
+		className,
+		role: "region",
+		style: {
+			display: isOpen ? "block" : "none",
+			...style
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: contentInnerClassName,
+			children
+		})
+	});
+	if (!isOpen) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		role: "region",
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			className: contentInnerClassName,
+			children
+		})
+	});
+});
+AccordionStaticContent.displayName = "AccordionStaticContent";
+const AccordionMotionContent = memo(({ contextMotionProps, className, style, children, contentInnerClassName, isOpen, skipInitialAnimation }) => {
+	const Motion = useMotionComponent();
+	const motionProps = useMemo(() => ({
+		animate: "enter",
+		exit: "exit",
+		initial: skipInitialAnimation ? false : "exit",
+		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
+	}), [contextMotionProps, skipInitialAnimation]);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: isOpen ? /* @__PURE__ */ jsx(Motion.div, {
+			...motionProps,
+			style: motionContainerStyle,
+			children: /* @__PURE__ */ jsx("div", {
+				className,
+				role: "region",
+				style,
+				children: /* @__PURE__ */ jsx("div", {
+					className: contentInnerClassName,
+					children
+				})
+			})
+		}) : null
+	});
+});
+AccordionMotionContent.displayName = "AccordionMotionContent";
+const AccordionItemContent = memo(({ disableAnimation, isOpen, keepContentMounted, className, style, children, contentInnerClassName, contextMotionProps, skipInitialAnimation }) => {
+	if (disableAnimation || !keepContentMounted) return /* @__PURE__ */ jsx(AccordionStaticContent, {
+		className,
+		contentInnerClassName,
+		isOpen,
+		keepContentMounted,
+		style,
+		children
+	});
+	return /* @__PURE__ */ jsx(AccordionMotionContent, {
+		className,
+		contentInnerClassName,
+		contextMotionProps,
+		isOpen,
+		skipInitialAnimation,
+		style,
+		children
+	});
+});
+AccordionItemContent.displayName = "AccordionItemContent";
+const AccordionItem = memo(({ itemKey, title, children, action, disabled = false, allowExpand = true, hideIndicator: itemHideIndicator, indicatorPlacement: itemIndicatorPlacement, indicator: customIndicator, classNames, paddingInline = 16, paddingBlock = 8, padding, ref, variant: customVariant, styles: customStyles, headerWrapper, defaultExpand, expand, onExpandChange }) => {
 	const { cx, styles } = useStyles();
-	const { isExpanded, onToggle, hideIndicator: contextHideIndicator, indicatorPlacement: contextIndicatorPlacement, keepContentMounted, disableAnimation, motionProps: contextMotionProps, variant = "filled" } = useAccordionContext();
-	const isOpen = isExpanded(itemKey);
+	const context = useAccordionContext();
+	const isStandalone = expand !== void 0 || defaultExpand !== void 0;
+	const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState(defaultExpand ?? false, {
+		onChange: onExpandChange,
+		value: expand
+	});
+	const contextIsExpanded = context?.isExpanded;
+	const contextOnToggle = context?.onToggle;
+	const contextHideIndicator = context?.hideIndicator;
+	const contextIndicatorPlacement = context?.indicatorPlacement;
+	const contextKeepContentMounted = context?.keepContentMounted;
+	const contextDisableAnimation = context?.disableAnimation;
+	const contextMotionProps = context?.motionProps;
+	const contextVariant = context?.variant ?? "filled";
+	const isInitialRenderRef = useRef(true);
+	useEffect(() => {
+		isInitialRenderRef.current = false;
+	}, []);
+	const isOpen = isStandalone ? isExpandedStandalone : contextIsExpanded ? contextIsExpanded(itemKey) : false;
 	const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;
 	const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? "start";
+	const keepContentMounted = contextKeepContentMounted ?? true;
+	const disableAnimation = contextDisableAnimation ?? false;
+	const variant = customVariant || contextVariant;
 	const handleToggle = useCallback(() => {
-		if (!disabled) onToggle(itemKey);
+		if (!allowExpand) return;
+		if (!disabled) {
+			if (isStandalone) setIsExpandedStandalone(!isExpandedStandalone);
+			else if (contextOnToggle) contextOnToggle(itemKey);
+		}
 	}, [
+		allowExpand,
 		disabled,
-		itemKey,
-		onToggle
+		isStandalone,
+		setIsExpandedStandalone,
+		isExpandedStandalone,
+		contextOnToggle,
+		itemKey
 	]);
 	const handleKeyDown = useCallback((e) => {
-		if (disabled) return;
+		if (!allowExpand || disabled) return;
 		switch (e.key) {
 			case "Enter":
 			case " ":
@@ -33,9 +163,13 @@ const AccordionItem = memo(({ itemKey, title, children, action, disabled = false
 				handleToggle();
 				break;
 		}
-	}, [disabled, handleToggle]);
+	}, [
+		allowExpand,
+		disabled,
+		handleToggle
+	]);
 	const indicator = useMemo(() => {
-		if (hideIndicatorFinal) return null;
+		if (!allowExpand || hideIndicatorFinal) return null;
 		if (customIndicator) {
 			if (typeof customIndicator === "function") return /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -60,6 +194,7 @@ const AccordionItem = memo(({ itemKey, title, children, action, disabled = false
 			children: /* @__PURE__ */ jsx(ArrowIcon_default, { className: cx(styles.icon, isOpen && styles.iconRotate) })
 		});
 	}, [
+		allowExpand,
 		hideIndicatorFinal,
 		customIndicator,
 		disabled,
@@ -69,88 +204,11 @@ const AccordionItem = memo(({ itemKey, title, children, action, disabled = false
 		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 Motion = useMotionComponent();
-	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(Motion.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,
+	const skipInitialAnimation = isInitialRenderRef.current && isOpen;
+	const contentClassName = useMemo(() => cx("accordion-content", styles.content, classNames?.content), [
 		cx,
 		styles,
-		classNames,
-		customStyles,
-		children,
-		motionProps
+		classNames?.content
 	]);
 	const titleNode = useMemo(() => typeof title === "string" ? /* @__PURE__ */ jsx(Text_default, {
 		className: classNames?.title,
@@ -181,7 +239,7 @@ const AccordionItem = memo(({ itemKey, title, children, action, disabled = false
 	const headerElement = useMemo(() => {
 		const header = /* @__PURE__ */ jsx(Block_default, {
 			className: cx("accordion-header", styles.header, classNames?.header),
-			clickable: !disabled,
+			clickable: !disabled && allowExpand,
 			gap: 4,
 			horizontal: true,
 			justify: "space-between",
@@ -193,7 +251,7 @@ const AccordionItem = memo(({ itemKey, title, children, action, disabled = false
 			ref,
 			style: {
 				alignItems: "center",
-				cursor: disabled ? "not-allowed" : "pointer",
+				cursor: disabled ? "not-allowed" : allowExpand ? "pointer" : "default",
 				opacity: disabled ? .5 : void 0,
 				overflow: "hidden",
 				width: "100%",
@@ -252,7 +310,17 @@ const AccordionItem = memo(({ itemKey, title, children, action, disabled = false
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("accordion-item", styles.item, classNames?.base),
 		style: customStyles?.base,
-		children: [headerElement, contentElement]
+		children: [headerElement, /* @__PURE__ */ jsx(AccordionItemContent, {
+			className: contentClassName,
+			contentInnerClassName: styles.contentInner,
+			contextMotionProps,
+			disableAnimation: !!disableAnimation,
+			isOpen,
+			keepContentMounted: !!keepContentMounted,
+			skipInitialAnimation,
+			style: customStyles?.content,
+			children
+		})]
 	});
 });
 AccordionItem.displayName = "AccordionItem";

package/es/Accordion/AccordionItem.mjs.map

@@ -1 +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 { useMotionComponent } from '@/MotionProvider';\nimport Text from '@/Text';\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    const Motion = useMotionComponent();\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        <Motion.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        </Motion.div>\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;CAED,MAAM,SAAS,oBAAoB;CAGnC,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,OAAO;GAAI,GAAI;GAAa,OAAO,EAAE,UAAU,UAAU;aACxD,oBAAC;IACC,WAAW,GAAG,qBAAqB,OAAO,SAAS,YAAY,QAAQ;IACvE,MAAK;IACL,OAAO,cAAc;cAErB,oBAAC;KAAI,WAAW,OAAO;KAAe;MAAe;KACjD;IACK;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"}
+{"version":3,"file":"AccordionItem.mjs","names":["motionContainerStyle: CSSProperties","ArrowIcon","Text","Flexbox","Block"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence } from 'motion/react';\nimport type { CSSProperties, ComponentPropsWithoutRef, ReactNode } from 'react';\nimport { KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport { type MotionComponentType, useMotionComponent } from '@/MotionProvider';\nimport Text from '@/Text';\n\nimport ArrowIcon from './ArrowIcon';\nimport { useAccordionContext } from './context';\nimport { useStyles } from './style';\nimport type { AccordionItemProps } from './type';\n\ntype AccordionContentBaseProps = {\n  children?: ReactNode;\n  className?: string;\n  contentInnerClassName: string;\n  style?: CSSProperties;\n};\n\ntype AccordionStaticContentProps = AccordionContentBaseProps & {\n  isOpen: boolean;\n  keepContentMounted: boolean;\n};\n\ntype MotionDivProps = ComponentPropsWithoutRef<MotionComponentType['div']>;\n\ntype AccordionMotionContentProps = AccordionContentBaseProps & {\n  contextMotionProps?: MotionDivProps;\n  isOpen: boolean;\n  skipInitialAnimation: boolean;\n};\n\ntype AccordionItemContentProps = AccordionContentBaseProps & {\n  contextMotionProps?: MotionDivProps;\n  disableAnimation: boolean;\n  isOpen: boolean;\n  keepContentMounted: boolean;\n  skipInitialAnimation: boolean;\n};\n\nconst motionContainerStyle: CSSProperties = { overflow: 'hidden' };\n\nconst AccordionStaticContent = memo<AccordionStaticContentProps>(\n  ({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {\n    if (keepContentMounted) {\n      return (\n        <div\n          className={className}\n          role=\"region\"\n          style={{\n            display: isOpen ? 'block' : 'none',\n            ...style,\n          }}\n        >\n          <div className={contentInnerClassName}>{children}</div>\n        </div>\n      );\n    }\n\n    if (!isOpen) return null;\n\n    return (\n      <div className={className} role=\"region\" style={style}>\n        <div className={contentInnerClassName}>{children}</div>\n      </div>\n    );\n  },\n);\n\nAccordionStaticContent.displayName = 'AccordionStaticContent';\n\nconst AccordionMotionContent = memo<AccordionMotionContentProps>(\n  ({\n    contextMotionProps,\n    className,\n    style,\n    children,\n    contentInnerClassName,\n    isOpen,\n    skipInitialAnimation,\n  }) => {\n    const Motion = useMotionComponent();\n\n    const motionProps = useMemo(\n      () => ({\n        animate: 'enter',\n        exit: 'exit',\n        initial: skipInitialAnimation ? false : 'exit',\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      [contextMotionProps, skipInitialAnimation],\n    );\n\n    return (\n      <AnimatePresence initial={false}>\n        {isOpen ? (\n          <Motion.div {...(motionProps as any)} style={motionContainerStyle}>\n            <div className={className} role=\"region\" style={style}>\n              <div className={contentInnerClassName}>{children}</div>\n            </div>\n          </Motion.div>\n        ) : null}\n      </AnimatePresence>\n    );\n  },\n);\n\nAccordionMotionContent.displayName = 'AccordionMotionContent';\n\nconst AccordionItemContent = memo<AccordionItemContentProps>(\n  ({\n    disableAnimation,\n    isOpen,\n    keepContentMounted,\n    className,\n    style,\n    children,\n    contentInnerClassName,\n    contextMotionProps,\n    skipInitialAnimation,\n  }) => {\n    if (disableAnimation || !keepContentMounted) {\n      return (\n        <AccordionStaticContent\n          className={className}\n          contentInnerClassName={contentInnerClassName}\n          isOpen={isOpen}\n          keepContentMounted={keepContentMounted}\n          style={style}\n        >\n          {children}\n        </AccordionStaticContent>\n      );\n    }\n\n    return (\n      <AccordionMotionContent\n        className={className}\n        contentInnerClassName={contentInnerClassName}\n        contextMotionProps={contextMotionProps}\n        isOpen={isOpen}\n        skipInitialAnimation={skipInitialAnimation}\n        style={style}\n      >\n        {children}\n      </AccordionMotionContent>\n    );\n  },\n);\n\nAccordionItemContent.displayName = 'AccordionItemContent';\n\nconst AccordionItem = memo<AccordionItemProps>(\n  ({\n    itemKey,\n    title,\n    children,\n    action,\n    disabled = false,\n    allowExpand = true,\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    defaultExpand,\n    expand,\n    onExpandChange,\n  }) => {\n    const { cx, styles } = useStyles();\n    const context = useAccordionContext();\n\n    // Determine if using standalone mode (has expand or defaultExpand props)\n    const isStandalone = expand !== undefined || defaultExpand !== undefined;\n\n    // Standalone state management\n    const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState<boolean>(\n      defaultExpand ?? false,\n      {\n        onChange: onExpandChange,\n        value: expand,\n      },\n    );\n\n    // Context values (may be null if used standalone)\n    const contextIsExpanded = context?.isExpanded;\n    const contextOnToggle = context?.onToggle;\n    const contextHideIndicator = context?.hideIndicator;\n    const contextIndicatorPlacement = context?.indicatorPlacement;\n    const contextKeepContentMounted = context?.keepContentMounted;\n    const contextDisableAnimation = context?.disableAnimation;\n    const contextMotionProps = context?.motionProps;\n    const contextVariant = context?.variant ?? 'filled';\n\n    const isInitialRenderRef = useRef(true);\n\n    useEffect(() => {\n      isInitialRenderRef.current = false;\n    }, []);\n\n    // Determine expanded state\n    const isOpen = isStandalone\n      ? isExpandedStandalone\n      : contextIsExpanded\n        ? contextIsExpanded(itemKey)\n        : false;\n\n    // Determine other props with fallbacks\n    const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\n    const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\n    const keepContentMounted = contextKeepContentMounted ?? true;\n    const disableAnimation = contextDisableAnimation ?? false;\n    const variant = customVariant || contextVariant;\n\n    const handleToggle = useCallback(() => {\n      // If allowExpand is false, only allow controlled expansion via expand prop\n      if (!allowExpand) return;\n\n      if (!disabled) {\n        if (isStandalone) {\n          setIsExpandedStandalone(!isExpandedStandalone);\n        } else if (contextOnToggle) {\n          contextOnToggle(itemKey);\n        }\n      }\n    }, [\n      allowExpand,\n      disabled,\n      isStandalone,\n      setIsExpandedStandalone,\n      isExpandedStandalone,\n      contextOnToggle,\n      itemKey,\n    ]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        // If allowExpand is false, disable keyboard toggle\n        if (!allowExpand || disabled) return;\n\n        switch (e.key) {\n          case 'Enter':\n          case ' ': {\n            e.preventDefault();\n            handleToggle();\n            break;\n          }\n        }\n      },\n      [allowExpand, disabled, handleToggle],\n    );\n\n    // Build indicator\n    const indicator = useMemo(() => {\n      if (!allowExpand || 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      allowExpand,\n      hideIndicatorFinal,\n      customIndicator,\n      disabled,\n      isOpen,\n      cx,\n      styles,\n      classNames,\n      customStyles,\n    ]);\n\n    const skipInitialAnimation = isInitialRenderRef.current && isOpen;\n\n    const contentClassName = useMemo(\n      () => cx('accordion-content', styles.content, classNames?.content),\n      [cx, styles, classNames?.content],\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 && allowExpand}\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' : allowExpand ? 'pointer' : 'default',\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        <AccordionItemContent\n          className={contentClassName}\n          contentInnerClassName={styles.contentInner}\n          contextMotionProps={contextMotionProps}\n          disableAnimation={!!disableAnimation}\n          isOpen={isOpen}\n          keepContentMounted={!!keepContentMounted}\n          skipInitialAnimation={skipInitialAnimation}\n          style={customStyles?.content}\n        >\n          {children}\n        </AccordionItemContent>\n      </div>\n    );\n  },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport default AccordionItem;\n"],"mappings":"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"}

package/es/Accordion/context.mjs

@@ -3,9 +3,7 @@ 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;
+	return useContext(AccordionContext);
 };
 
 //#endregion

package/es/Accordion/context.mjs.map

@@ -1 +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"}
+{"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  return useContext(AccordionContext);\n};\n"],"mappings":";;;AAgBA,MAAa,mBAAmB,cAA4C,KAAK;AAEjF,MAAa,4BAA4B;AACvC,QAAO,WAAW,iBAAiB"}

package/es/Accordion/type.d.mts

@@ -8,6 +8,11 @@ interface AccordionItemProps extends Pick<BlockProps, 'padding' | 'paddingBlock'
    * Action component that appears on hover
    */
   action?: ReactNode;
+  /**
+   * Whether to allow expanding (hide indicator when false)
+   * @default true
+   */
+  allowExpand?: boolean;
   /**
    * Content of the accordion item
    */
@@ -23,10 +28,18 @@ interface AccordionItemProps extends Pick<BlockProps, 'padding' | 'paddingBlock'
     indicator?: string;
     title?: string;
   };
+  /**
+   * Default expanded state (uncontrolled)
+   */
+  defaultExpand?: boolean;
   /**
    * Whether the item is disabled
    */
   disabled?: boolean;
+  /**
+   * Controlled expanded state
+   */
+  expand?: boolean;
   headerWrapper?: (header: ReactNode) => ReactNode;
   /**
    * Whether to hide the chevron indicator
@@ -49,6 +62,10 @@ interface AccordionItemProps extends Pick<BlockProps, 'padding' | 'paddingBlock'
    * Unique identifier for the item (use as React key)
    */
   itemKey: Key;
+  /**
+   * Callback when expanded state changes
+   */
+  onExpandChange?: (expanded: boolean) => void;
   /**
    * Custom styles for child elements
    */

package/es/ActionIcon/ActionIcon.d.mts

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

package/es/Alert/Alert.d.mts

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

package/es/AutoComplete/Select.d.mts

@@ -1,8 +1,8 @@
 import { AutoCompleteProps } from "./type.mjs";
-import * as react13 from "react";
+import * as react37 from "react";
 
 //#region src/AutoComplete/Select.d.ts
-declare const AutoComplete: react13.NamedExoticComponent<AutoCompleteProps>;
+declare const AutoComplete: react37.NamedExoticComponent<AutoCompleteProps>;
 //#endregion
 export { AutoComplete };
 //# sourceMappingURL=Select.d.mts.map

package/es/Avatar/AvatarGroup/index.d.mts

@@ -1,8 +1,8 @@
 import { AvatarGroupProps } from "../type.mjs";
-import * as react69 from "react";
+import * as react40 from "react";
 
 //#region src/Avatar/AvatarGroup/index.d.ts
-declare const AvatarGroup: react69.NamedExoticComponent<AvatarGroupProps>;
+declare const AvatarGroup: react40.NamedExoticComponent<AvatarGroupProps>;
 //#endregion
 export { AvatarGroup };
 //# sourceMappingURL=index.d.mts.map

package/es/Burger/Burger.d.mts

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

package/es/Checkbox/Checkbox.d.mts

@@ -0,0 +1,8 @@
+import { CheckboxProps } from "./type.mjs";
+import { FC } from "react";
+
+//#region src/Checkbox/Checkbox.d.ts
+declare const Checkbox: FC<CheckboxProps>;
+//#endregion
+export { Checkbox };
+//# sourceMappingURL=Checkbox.d.mts.map

package/es/Checkbox/Checkbox.mjs

@@ -0,0 +1,63 @@
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Block_default from "../Block/Block.mjs";
+import Text_default from "../Text/Text.mjs";
+import { useStyles } from "./style.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useMergeState from "use-merge-value";
+import { CheckIcon } from "lucide-react";
+
+//#region src/Checkbox/Checkbox.tsx
+const Checkbox = ({ checked, defaultChecked, onChange, size = 16, className, style, children, textProps, backgroundColor, classNames, styles: customStyles, shape = "square" }) => {
+	const { styles, cx } = useStyles();
+	const [value, setValue] = useMergeState(defaultChecked || false, {
+		defaultValue: defaultChecked,
+		onChange,
+		value: checked
+	});
+	const checkboxStyles = {
+		borderRadius: shape === "square" ? `max(4px, ${Math.round(size / 4)}px)` : "50%",
+		...style,
+		...customStyles?.checkbox
+	};
+	const checkIcon = /* @__PURE__ */ jsx(Block_default, {
+		align: "center",
+		className: cx(styles.root, value && styles.checked, className, classNames?.checkbox),
+		flex: "none",
+		height: size,
+		justify: "center",
+		onClick: () => setValue(!value),
+		style: backgroundColor && value ? {
+			backgroundColor,
+			borderColor: backgroundColor,
+			...checkboxStyles
+		} : { ...checkboxStyles },
+		variant: "outlined",
+		width: size,
+		children: value ? /* @__PURE__ */ jsx(CheckIcon, {
+			size,
+			strokeWidth: 3,
+			style: { transform: `scale(${shape === "square" ? .75 : .66})` }
+		}) : null
+	});
+	if (!children) return checkIcon;
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: "center",
+		className: classNames?.wrapper,
+		gap: Math.floor(size / 2),
+		horizontal: true,
+		style: customStyles?.wrapper,
+		children: [checkIcon, /* @__PURE__ */ jsx(Text_default, {
+			as: "span",
+			className: cx(classNames?.text),
+			style: customStyles?.text,
+			...textProps,
+			children
+		})]
+	});
+};
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+
+//#endregion
+export { Checkbox_default as default };
+//# sourceMappingURL=Checkbox.mjs.map