@jinmi/ui 0.0.0-stage → 6.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 LobeHub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,119 @@
-# Temporary Holding Version
+# Jinmi UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React component library and design tokens for Jinmi Work.
+
+## Installation
+
+This package is ESM only.
+
+```bash
+pnpm add @jinmi/ui
+```
+
+It needs `react` and `react-dom` 19, `antd` 6 and `motion` 12. The full list is under
+`peerDependencies` in `package.json`.
+
+### Next.js
+
+Add the package to `transpilePackages`:
+
+```js
+// next.config.js
+const nextConfig = {
+  transpilePackages: ['@jinmi/ui'],
+};
+
+export default nextConfig;
+```
+
+## Usage
+
+Components are built on [antd](https://ant.design) and styled with
+[antd-style](https://ant-design.github.io/antd-style/).
+
+```tsx
+import { Button, ThemeProvider } from '@jinmi/ui';
+
+export default () => (
+  <ThemeProvider>
+    <Button>Hello</Button>
+  </ThemeProvider>
+);
+```
+
+Headless primitives live under `@jinmi/ui/base-ui`:
+
+```tsx
+import { Select, Switch } from '@jinmi/ui/base-ui';
+```
+
+### Design tokens
+
+The default theme ships the Jinmi tokens: neutral frame `#F7F8F9`, ink `#0B0F12`, Inter, and the
+Sky Cyan brand color. Brand colors are exposed as `brandToken` / `brandCssVar` and as the CSS
+variables `--jinmi-color-brand*`.
+
+### ConfigProvider (motion)
+
+Pass a motion component through `ConfigProvider`, and keep `ConfigProvider` outside
+`ThemeProvider`:
+
+```tsx
+import { ConfigProvider, ThemeProvider } from '@jinmi/ui';
+import { motion } from 'motion/react';
+
+export default () => (
+  <ConfigProvider motion={motion}>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </ConfigProvider>
+);
+```
+
+With `LazyMotion`, pass `m`:
+
+```tsx
+import { ConfigProvider, ThemeProvider } from '@jinmi/ui';
+import { LazyMotion, domAnimation } from 'motion/react';
+import * as m from 'motion/react-m';
+
+export default () => (
+  <LazyMotion features={domAnimation}>
+    <ConfigProvider motion={m}>
+      <ThemeProvider>
+        <App />
+      </ThemeProvider>
+    </ConfigProvider>
+  </LazyMotion>
+);
+```
+
+### I18n
+
+`texts` props on a component always take priority over the provider.
+
+```tsx
+import { I18nProvider } from '@jinmi/ui';
+import formMessages from '@jinmi/ui/i18n/resources/form';
+import hotkeyMessages from '@jinmi/ui/i18n/resources/hotkey';
+
+<I18nProvider resources={[formMessages, hotkeyMessages]}>
+  <App />
+</I18nProvider>;
+```
+
+## Development
+
+```bash
+git clone git@gitlab.com:xretail-jinmi-work/jinmi-ui.git
+cd jinmi-ui
+pnpm install
+pnpm run build
+```
+
+Issues: <https://gitlab.com/xretail-jinmi-work/jinmi-ui/-/issues>
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/es/A/index.d.mts

@@ -0,0 +1,9 @@
+import { AProps } from "../types/index.mjs";
+import { FC, Ref } from "react";
+//#region src/A/index.d.ts
+declare const A: FC<AProps & {
+  ref?: Ref<HTMLAnchorElement>;
+}>;
+//#endregion
+export { A as default };
+//# sourceMappingURL=index.d.mts.map

package/es/A/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/A/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/A/index.mjs

@@ -0,0 +1,16 @@
+"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";
+	const AContainer = useMemo(() => createContainer(render), [render]);
+	return /* @__PURE__ */ jsx(AContainer, { ...props });
+};
+A.displayName = "A";
+//#endregion
+export { A as default };
+
+//# sourceMappingURL=index.mjs.map

package/es/A/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/A/index.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { createElement, type ElementType, type FC, memo, type Ref, use, useMemo } from 'react';\r\n\r\nimport { ConfigContext } from '@/ConfigProvider';\r\nimport { type AProps } from '@/types';\r\n\r\nconst createContainer = (as: ElementType) => memo((props: any) => createElement(as, props));\r\n\r\nconst A: FC<AProps & { ref?: Ref<HTMLAnchorElement> }> = (props) => {\r\n  const config = use(ConfigContext);\r\n  const render = config?.aAs || 'a';\r\n\r\n  const AContainer = useMemo(() => createContainer(render), [render]);\r\n\r\n  return <AContainer {...props} />;\r\n};\r\n\r\nA.displayName = 'A';\r\n\r\nexport default A;\r\n"],"mappings":";;;;;AAOA,MAAM,mBAAmB,OAAoB,MAAM,UAAe,cAAc,IAAI,KAAK,CAAC;AAE1F,MAAM,KAAoD,UAAU;CAElE,MAAM,SADS,IAAI,aACC,CAAC,EAAE,OAAO;CAE9B,MAAM,aAAa,cAAc,gBAAgB,MAAM,GAAG,CAAC,MAAM,CAAC;CAElE,OAAO,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;AACjC;AAEA,EAAE,cAAc"}

package/es/Accordion/Accordion.d.mts

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

package/es/Accordion/Accordion.mjs

@@ -0,0 +1,90 @@
+"use client";
+import Divider from "../base-ui/Divider/Divider.mjs";
+import { AccordionConfigContext, AccordionItemStateProvider } from "./context.mjs";
+import { styles } from "./style.mjs";
+import { Children, Fragment, isValidElement, memo, useCallback, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { LayoutGroup } from "motion/react";
+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 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 expandedKeysRef = useRef(expandedKeys);
+	expandedKeysRef.current = expandedKeys;
+	const setExpandedKeysRef = useRef(setExpandedKeys);
+	setExpandedKeysRef.current = setExpandedKeys;
+	const isOpenKey = useCallback((key) => expandedKeysRef.current.includes(key), []);
+	const toggleExpand = useCallback((key) => {
+		const prev = expandedKeysRef.current;
+		let newKeys;
+		if (accordion) newKeys = prev.includes(key) ? [] : [key];
+		else newKeys = prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key];
+		setExpandedKeysRef.current(newKeys);
+	}, [accordion]);
+	const toggleExpandKeys = useCallback((keys, preferredKey) => {
+		const prev = expandedKeysRef.current;
+		const isOpen = keys.some((key) => prev.includes(key));
+		let newKeys;
+		if (accordion) newKeys = isOpen ? [] : [preferredKey];
+		else newKeys = isOpen ? prev.filter((key) => !keys.includes(key)) : [...prev, preferredKey];
+		setExpandedKeysRef.current(newKeys);
+	}, [accordion]);
+	const configValue = useMemo(() => ({
+		disableAnimation,
+		hideIndicator,
+		indicatorPlacement,
+		keepContentMounted,
+		motionProps,
+		showDivider,
+		variant
+	}), [
+		disableAnimation,
+		hideIndicator,
+		indicatorPlacement,
+		keepContentMounted,
+		motionProps,
+		showDivider,
+		variant
+	]);
+	const hasExplicitExpandedKeys = expandedKeysProp !== void 0 || defaultExpandedKeys !== void 0;
+	const content = /* @__PURE__ */ jsx(Fragment$1, { children: validChildren.map((child, index) => {
+		const hasChildItemKey = child.props.itemKey !== void 0;
+		const childKey = hasChildItemKey ? child.props.itemKey : index;
+		const itemIsOpen = expandedKeys.includes(childKey);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AccordionItemStateProvider, {
+			expandedKeys: hasChildItemKey ? void 0 : expandedKeys,
+			isOpen: itemIsOpen,
+			isOpenKey,
+			itemKey: childKey,
+			preferProviderKeyForNestedItems: !hasExplicitExpandedKeys,
+			onToggleKey: toggleExpand,
+			onToggleKeys: toggleExpandKeys,
+			children: child
+		}), showDivider && index < validChildren.length - 1 && /* @__PURE__ */ jsx(Divider, { className: styles.divider })] }, childKey);
+	}) });
+	return /* @__PURE__ */ jsx(AccordionConfigContext, {
+		value: configValue,
+		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";
+//#endregion
+export { Accordion as default };
+
+//# sourceMappingURL=Accordion.mjs.map

package/es/Accordion/Accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { LayoutGroup } from 'motion/react';\r\nimport { type Key } from 'react';\r\nimport { Children, Fragment, isValidElement, memo, useCallback, useMemo, useRef } from 'react';\r\nimport useMergeState from 'use-merge-value';\r\n\r\nimport Divider from '@/base-ui/Divider';\r\n\r\nimport { AccordionConfigContext, AccordionItemStateProvider } from './context';\r\nimport { styles } from './style';\r\nimport { type AccordionProps } from './type';\r\n\r\nconst Accordion = memo<AccordionProps>(\r\n  ({\r\n    children,\r\n    className: userClassName,\r\n    style: userStyle,\r\n    accordion = false,\r\n    defaultExpandedKeys,\r\n    expandedKeys: expandedKeysProp,\r\n    onExpandedChange,\r\n    variant = 'borderless',\r\n    gap,\r\n    showDivider = false,\r\n    disableAnimation = false,\r\n    hideIndicator = false,\r\n    indicatorPlacement = 'start',\r\n    keepContentMounted = true,\r\n    classNames,\r\n    styles: customStyles,\r\n    motionProps,\r\n    ref,\r\n    ...rest\r\n  }) => {\r\n    // Convert children to array and filter valid elements\r\n    const validChildren = Children.toArray(children).filter(isValidElement);\r\n\r\n    // Collect all item keys\r\n    const allItemKeys = validChildren.map((child, index) => (child.props as any).itemKey || index);\r\n\r\n    // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\r\n    const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\r\n\r\n    const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\r\n      onChange: onExpandedChange,\r\n      value: expandedKeysProp,\r\n    });\r\n\r\n    // Hold expandedKeys and setExpandedKeys via refs so toggleExpand can stay\r\n    // reference-stable. use-merge-value's setter is recreated on every render,\r\n    // so depending on it would force AccordionItemStateProvider's memoized\r\n    // value to change identity each render — even when nothing toggled —\r\n    // re-rendering every nested AccordionItem via \"context changed\".\r\n    const expandedKeysRef = useRef(expandedKeys);\r\n    expandedKeysRef.current = expandedKeys;\r\n    const setExpandedKeysRef = useRef(setExpandedKeys);\r\n    setExpandedKeysRef.current = setExpandedKeys;\r\n\r\n    const isOpenKey = useCallback((key: Key) => expandedKeysRef.current.includes(key), []);\r\n\r\n    const toggleExpand = useCallback(\r\n      (key: Key) => {\r\n        const prev = expandedKeysRef.current;\r\n        let newKeys: Key[];\r\n\r\n        if (accordion) {\r\n          newKeys = prev.includes(key) ? [] : [key];\r\n        } else {\r\n          newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\r\n        }\r\n\r\n        setExpandedKeysRef.current(newKeys);\r\n      },\r\n      [accordion],\r\n    );\r\n\r\n    const toggleExpandKeys = useCallback(\r\n      (keys: Key[], preferredKey: Key) => {\r\n        const prev = expandedKeysRef.current;\r\n        const isOpen = keys.some((key) => prev.includes(key));\r\n        let newKeys: Key[];\r\n\r\n        if (accordion) {\r\n          newKeys = isOpen ? [] : [preferredKey];\r\n        } else {\r\n          newKeys = isOpen\r\n            ? prev.filter((key: Key) => !keys.includes(key))\r\n            : [...prev, preferredKey];\r\n        }\r\n\r\n        setExpandedKeysRef.current(newKeys);\r\n      },\r\n      [accordion],\r\n    );\r\n\r\n    const configValue = useMemo(\r\n      () => ({\r\n        disableAnimation,\r\n        hideIndicator,\r\n        indicatorPlacement,\r\n        keepContentMounted,\r\n        motionProps,\r\n        showDivider,\r\n        variant,\r\n      }),\r\n      [\r\n        disableAnimation,\r\n        hideIndicator,\r\n        indicatorPlacement,\r\n        keepContentMounted,\r\n        motionProps,\r\n        showDivider,\r\n        variant,\r\n      ],\r\n    );\r\n\r\n    const hasExplicitExpandedKeys =\r\n      expandedKeysProp !== undefined || defaultExpandedKeys !== undefined;\r\n\r\n    const content = (\r\n      <>\r\n        {validChildren.map((child, index) => {\r\n          const hasChildItemKey = (child.props as any).itemKey !== undefined;\r\n          const childKey = hasChildItemKey ? (child.props as any).itemKey : index;\r\n          const itemIsOpen = expandedKeys.includes(childKey);\r\n          return (\r\n            <Fragment key={childKey}>\r\n              <AccordionItemStateProvider\r\n                expandedKeys={hasChildItemKey ? undefined : expandedKeys}\r\n                isOpen={itemIsOpen}\r\n                isOpenKey={isOpenKey}\r\n                itemKey={childKey}\r\n                preferProviderKeyForNestedItems={!hasExplicitExpandedKeys}\r\n                onToggleKey={toggleExpand}\r\n                onToggleKeys={toggleExpandKeys}\r\n              >\r\n                {child}\r\n              </AccordionItemStateProvider>\r\n              {showDivider && index < validChildren.length - 1 && (\r\n                <Divider className={styles.divider} />\r\n              )}\r\n            </Fragment>\r\n          );\r\n        })}\r\n      </>\r\n    );\r\n\r\n    return (\r\n      <AccordionConfigContext value={configValue}>\r\n        <div\r\n          className={cx(styles.base, classNames?.base, userClassName)}\r\n          ref={ref}\r\n          style={{\r\n            gap,\r\n            ...customStyles?.base,\r\n            ...userStyle,\r\n          }}\r\n          {...rest}\r\n        >\r\n          {disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}\r\n        </div>\r\n      </AccordionConfigContext>\r\n    );\r\n  },\r\n);\r\n\r\nAccordion.displayName = 'Accordion';\r\n\r\nexport default Accordion;\r\n"],"mappings":";;;;;;;;;;AAcA,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;CAEJ,MAAM,gBAAgB,SAAS,QAAQ,QAAQ,CAAC,CAAC,OAAO,cAAc;CAGtE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,KAAK;CAK7F,MAAM,CAAC,cAAc,mBAAmB,cAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;CACT,CAAC;CAOD,MAAM,kBAAkB,OAAO,YAAY;CAC3C,gBAAgB,UAAU;CAC1B,MAAM,qBAAqB,OAAO,eAAe;CACjD,mBAAmB,UAAU;CAE7B,MAAM,YAAY,aAAa,QAAa,gBAAgB,QAAQ,SAAS,GAAG,GAAG,CAAC,CAAC;CAErF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO,gBAAgB;EAC7B,IAAI;EAEJ,IAAI,WACF,UAAU,KAAK,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG;OAExC,UAAU,KAAK,SAAS,GAAG,IAAI,KAAK,QAAQ,MAAW,MAAM,GAAG,IAAI,CAAC,GAAG,MAAM,GAAG;EAGnF,mBAAmB,QAAQ,OAAO;CACpC,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,mBAAmB,aACtB,MAAa,iBAAsB;EAClC,MAAM,OAAO,gBAAgB;EAC7B,MAAM,SAAS,KAAK,MAAM,QAAQ,KAAK,SAAS,GAAG,CAAC;EACpD,IAAI;EAEJ,IAAI,WACF,UAAU,SAAS,CAAC,IAAI,CAAC,YAAY;OAErC,UAAU,SACN,KAAK,QAAQ,QAAa,CAAC,KAAK,SAAS,GAAG,CAAC,IAC7C,CAAC,GAAG,MAAM,YAAY;EAG5B,mBAAmB,QAAQ,OAAO;CACpC,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,cAAc,eACX;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,0BACJ,qBAAqB,KAAA,KAAa,wBAAwB,KAAA;CAE5D,MAAM,UACJ,oBAAA,YAAA,EAAA,UACG,cAAc,KAAK,OAAO,UAAU;EACnC,MAAM,kBAAmB,MAAM,MAAc,YAAY,KAAA;EACzD,MAAM,WAAW,kBAAmB,MAAM,MAAc,UAAU;EAClE,MAAM,aAAa,aAAa,SAAS,QAAQ;EACjD,OACE,qBAAC,UAAD,EAAA,UAAA,CACE,oBAAC,4BAAD;GACE,cAAc,kBAAkB,KAAA,IAAY;GAC5C,QAAQ;GACG;GACX,SAAS;GACT,iCAAiC,CAAC;GAClC,aAAa;GACb,cAAc;GAEb,UAAA;EACyB,CAAA,GAC3B,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,SAAD,EAAS,WAAW,OAAO,QAAU,CAAA,CAE/B,EAAA,GAfK,QAeL;CAEd,CAAC,EACD,CAAA;CAGJ,OACE,oBAAC,wBAAD;EAAwB,OAAO;EAC7B,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,aAAa;GACrD;GACL,OAAO;IACL;IACA,GAAG,cAAc;IACjB,GAAG;GACL;GACA,GAAI;GAEH,UAAA,mBAAmB,UAAU,oBAAC,aAAD,EAAA,UAAc,QAAqB,CAAA;EAC9D,CAAA;CACiB,CAAA;AAE5B,CACF;AAEA,UAAU,cAAc"}

package/es/Accordion/AccordionItem.d.mts

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

package/es/Accordion/AccordionItem.mjs

@@ -0,0 +1,340 @@
+"use client";
+import { useMotionComponent } from "../MotionProvider/index.mjs";
+import { useAccordionConfig, useAccordionItemState } from "./context.mjs";
+import { styles } from "./style.mjs";
+import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import Block from "../Block/Block.mjs";
+import Text from "../Text/Text.mjs";
+import { stopPropagation } from "../utils/dom.mjs";
+import ArrowIcon from "./ArrowIcon.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { AnimatePresence } from "motion/react";
+import useMergeState from "use-merge-value";
+//#region src/Accordion/AccordionItem.tsx
+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, alwaysShowAction = false, 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 itemStateContext = useAccordionItemState();
+	const configContext = useAccordionConfig();
+	const isStandalone = expand !== void 0 || defaultExpand !== void 0;
+	const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState(defaultExpand ?? false, {
+		onChange: onExpandChange,
+		value: expand
+	});
+	const contextHideIndicator = configContext?.hideIndicator;
+	const contextIndicatorPlacement = configContext?.indicatorPlacement;
+	const contextKeepContentMounted = configContext?.keepContentMounted;
+	const contextDisableAnimation = configContext?.disableAnimation;
+	const contextMotionProps = configContext?.motionProps;
+	const contextVariant = configContext?.variant ?? "borderless";
+	const isInitialRenderRef = useRef(true);
+	useEffect(() => {
+		isInitialRenderRef.current = false;
+	}, []);
+	const isDirectContextItem = itemStateContext?.itemKey === itemKey;
+	let isOpen = false;
+	if (isStandalone) isOpen = isExpandedStandalone;
+	else if (itemStateContext) isOpen = isDirectContextItem ? itemStateContext.isOpen : itemStateContext.isOpen || itemStateContext.isOpenKey(itemKey);
+	const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;
+	const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? "start";
+	const keepContentMounted = contextKeepContentMounted ?? true;
+	const disableAnimation = contextDisableAnimation ?? false;
+	const variant = customVariant || contextVariant;
+	const contextOnToggle = useCallback(() => {
+		if (!itemStateContext) return;
+		if (itemStateContext.itemKey === itemKey) {
+			itemStateContext.onToggle();
+			return;
+		}
+		itemStateContext.onToggleNestedKey(itemKey);
+	}, [itemStateContext, itemKey]);
+	const handleToggle = useCallback(() => {
+		if (!allowExpand) return;
+		if (!disabled) {
+			if (isStandalone) setIsExpandedStandalone(!isExpandedStandalone);
+			else if (contextOnToggle) contextOnToggle();
+		}
+	}, [
+		allowExpand,
+		disabled,
+		isStandalone,
+		setIsExpandedStandalone,
+		isExpandedStandalone,
+		contextOnToggle
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (!allowExpand || disabled) return;
+		switch (e.key) {
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				handleToggle();
+		}
+	}, [
+		allowExpand,
+		disabled,
+		handleToggle
+	]);
+	const preventTitleTextSelection = useCallback((e) => {
+		if (e?.detail > 1) e.preventDefault();
+	}, []);
+	const indicator = useMemo(() => {
+		if (!allowExpand || 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, { className: cx(styles.icon, isOpen && styles.iconRotate) })
+		});
+	}, [
+		allowExpand,
+		hideIndicatorFinal,
+		customIndicator,
+		disabled,
+		isOpen,
+		classNames,
+		customStyles
+	]);
+	const skipInitialAnimation = isInitialRenderRef.current && isOpen;
+	const contentClassName = useMemo(() => cx("accordion-content", styles.content, classNames?.content), [classNames?.content]);
+	const titleNode = useMemo(() => typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
+		ellipsis: true,
+		className: classNames?.title,
+		style: customStyles?.title,
+		children: title
+	}) : title, [
+		title,
+		classNames?.title,
+		customStyles?.title
+	]);
+	const actionNode = useMemo(() => action && /* @__PURE__ */ jsx(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		flex: "none",
+		gap: 4,
+		style: customStyles?.action,
+		className: cx("accordion-action", styles.action, alwaysShowAction && styles.actionVisible, classNames?.action),
+		onClick: stopPropagation,
+		children: action
+	}), [
+		action,
+		alwaysShowAction,
+		classNames?.action,
+		customStyles?.action
+	]);
+	const headerElement = useMemo(() => {
+		const header = /* @__PURE__ */ jsx(Block, {
+			horizontal: true,
+			className: cx("accordion-header", styles.header, classNames?.header),
+			clickable: !disabled && allowExpand,
+			gap: 4,
+			justify: "space-between",
+			padding,
+			paddingBlock,
+			paddingInline,
+			ref,
+			variant: customVariant || variant,
+			style: {
+				alignItems: "center",
+				cursor: disabled ? "not-allowed" : allowExpand ? "pointer" : "default",
+				opacity: disabled ? .5 : void 0,
+				overflow: "hidden",
+				width: "100%",
+				...customStyles?.header
+			},
+			onClick: handleToggle,
+			onKeyDown: handleKeyDown,
+			children: indicatorPlacementFinal === "start" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				className: styles.titleWrapper,
+				flex: 1,
+				gap: 2,
+				style: { overflow: "hidden" },
+				onDoubleClick: preventTitleTextSelection,
+				onMouseDown: preventTitleTextSelection,
+				children: [titleNode, indicator]
+			}), /* @__PURE__ */ jsx(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				flex: "none",
+				gap: 4,
+				children: actionNode
+			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				className: styles.titleWrapper,
+				flex: 1,
+				gap: 2,
+				style: { overflow: "hidden" },
+				onDoubleClick: preventTitleTextSelection,
+				onMouseDown: preventTitleTextSelection,
+				children: titleNode
+			}), /* @__PURE__ */ jsxs(FlexBasic_default, {
+				horizontal: true,
+				align: "center",
+				flex: "none",
+				gap: 4,
+				children: [actionNode, indicator]
+			})] })
+		});
+		if (headerWrapper) return headerWrapper(header);
+		return header;
+	}, [
+		classNames?.header,
+		disabled,
+		allowExpand,
+		padding,
+		paddingBlock,
+		paddingInline,
+		ref,
+		customVariant,
+		variant,
+		customStyles?.header,
+		handleToggle,
+		handleKeyDown,
+		indicatorPlacementFinal,
+		preventTitleTextSelection,
+		titleNode,
+		indicator,
+		actionNode,
+		headerWrapper
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("accordion-item", styles.item, classNames?.base),
+		style: customStyles?.base,
+		children: [headerElement, /* @__PURE__ */ jsx(AccordionItemContent, {
+			className: contentClassName,
+			contentInnerClassName: styles.contentInner,
+			contextMotionProps,
+			disableAnimation: !!disableAnimation,
+			isOpen,
+			keepContentMounted: !!keepContentMounted,
+			skipInitialAnimation,
+			style: customStyles?.content,
+			children
+		})]
+	});
+});
+AccordionItem.displayName = "AccordionItem";
+//#endregion
+export { AccordionItem as default };
+
+//# sourceMappingURL=AccordionItem.mjs.map