@lobehub/ui 6.0.0-beta.3 → 6.0.0-beta.5

package/es/ImageSelect/ImageSelect.mjs

@@ -2,12 +2,12 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import Icon from "../Icon/Icon.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import Img from "../Img/index.mjs";
 import { styles } from "./styles.mjs";
 import { createElement, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
-import useControlledState from "use-merge-value";
 //#region src/ImageSelect/ImageSelect.tsx
 const ImageSelect = memo(({ ref, className, style, value, defaultValue, onChange, options, width = 144, height = 86, styles: customStyles, classNames, unoptimized, ...rest }) => {
 	const [currentValue, setCurrentValue] = useControlledState(defaultValue, {

package/es/ImageSelect/ImageSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSelect.mjs","names":["Flexbox"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    return (\n      <Flexbox horizontal className={className} gap={16} ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              gap={4}\n              {...stylex.props(styles.container, isActive && styles.active)}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                height={height}\n                src={item.img}\n                unoptimized={unoptimized}\n                width={width}\n                {...styleProps([styles.img, isActive && styles.imgActive], classNames?.img, {\n                  ...customStyles?.img,\n                  height,\n                  width,\n                })}\n              />\n\n              <Flexbox horizontal align={'center'} gap={4}>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,cAAc,MAAwB,EAC1C,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmB,mBAA2B,cAAc;EAC/E;EACA;EACA;CACF,CAAC;CACD,OAAO,oBAACA,mBAAD;EAAS,YAAA;EAAsB;EAAW,KAAK;EAAS;EAAY;EAAO,GAAI;EAC/E,UAAA,SAAS,KAAI,SAAQ;GACxB,MAAM,WAAW,KAAK,UAAU;GAChC,OAAO,8BAACA,mBAAD;IAAS,OAAO;IAAU,KAAK;IAAG,GAAI,OAAO,MAAM,OAAO,WAAW,YAAY,OAAO,MAAM;IAAG,KAAK,KAAK;IAAO,eAAe,gBAAgB,KAAK,KAAK;GAWnJ,GAVP,oBAAC,KAAD;IAAK,KAAK,KAAK,OAAO,KAAK;IAAe;IAAQ,KAAK,KAAK;IAAkB;IAAoB;IAAO,GAAI,WAAW,CAAC,OAAO,KAAK,YAAY,OAAO,SAAS,GAAG,YAAY,KAAK;KACzL,GAAG,cAAc;KACjB;KACA;IACF,CAAC;GAAI,CAAA,GAEC,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;IAA1C,UAAA,CACG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACrC,KAAK,KACC;GACF,CAAA,CAAA;EACjB,CAAC;CACU,CAAA;AACf,CAAC;AACD,YAAY,cAAc"}
+{"version":3,"file":"ImageSelect.mjs","names":["Flexbox"],"sources":["../../src/ImageSelect/ImageSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './styles';\nimport type { ImageSelectProps } from './type';\n\nconst ImageSelect = memo<ImageSelectProps>(\n  ({\n    ref,\n    className,\n    style,\n    value,\n    defaultValue,\n    onChange,\n    options,\n    width = 144,\n    height = 86,\n    styles: customStyles,\n    classNames,\n    unoptimized,\n    ...rest\n  }) => {\n    const [currentValue, setCurrentValue] = useControlledState<string>(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    return (\n      <Flexbox horizontal className={className} gap={16} ref={ref} style={style} {...rest}>\n        {options?.map((item) => {\n          const isActive = item.value === currentValue;\n          return (\n            <Flexbox\n              align={'center'}\n              gap={4}\n              {...stylex.props(styles.container, isActive && styles.active)}\n              key={item.value}\n              onClick={() => setCurrentValue(item.value)}\n            >\n              <Img\n                alt={item.alt || item.value}\n                height={height}\n                src={item.img}\n                unoptimized={unoptimized}\n                width={width}\n                {...styleProps([styles.img, isActive && styles.imgActive], classNames?.img, {\n                  ...customStyles?.img,\n                  height,\n                  width,\n                })}\n              />\n\n              <Flexbox horizontal align={'center'} gap={4}>\n                {item.icon && <Icon icon={item.icon} />}\n                {item.label}\n              </Flexbox>\n            </Flexbox>\n          );\n        })}\n      </Flexbox>\n    );\n  },\n);\n\nImageSelect.displayName = 'ImageSelect';\n\nexport default ImageSelect;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,cAAc,MAAwB,EAC1C,KACA,WACA,OACA,OACA,cACA,UACA,SACA,QAAQ,KACR,SAAS,IACT,QAAQ,cACR,YACA,aACA,GAAG,WACC;CACJ,MAAM,CAAC,cAAc,mBAAmB,mBAA2B,cAAc;EAC/E;EACA;EACA;CACF,CAAC;CACD,OAAO,oBAACA,mBAAD;EAAS,YAAA;EAAsB;EAAW,KAAK;EAAS;EAAY;EAAO,GAAI;EAC/E,UAAA,SAAS,KAAI,SAAQ;GACxB,MAAM,WAAW,KAAK,UAAU;GAChC,OAAO,8BAACA,mBAAD;IAAS,OAAO;IAAU,KAAK;IAAG,GAAI,OAAO,MAAM,OAAO,WAAW,YAAY,OAAO,MAAM;IAAG,KAAK,KAAK;IAAO,eAAe,gBAAgB,KAAK,KAAK;GAWnJ,GAVP,oBAAC,KAAD;IAAK,KAAK,KAAK,OAAO,KAAK;IAAe;IAAQ,KAAK,KAAK;IAAkB;IAAoB;IAAO,GAAI,WAAW,CAAC,OAAO,KAAK,YAAY,OAAO,SAAS,GAAG,YAAY,KAAK;KACzL,GAAG,cAAc;KACjB;KACA;IACF,CAAC;GAAI,CAAA,GAEC,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,KAAK;IAA1C,UAAA,CACG,KAAK,QAAQ,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,GACrC,KAAK,KACC;GACF,CAAA,CAAA;EACjB,CAAC;CACU,CAAA;AACf,CAAC;AACD,YAAY,cAAc"}

package/es/Input/Input.mjs

@@ -1,13 +1,14 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
+import { useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useThemeMode } from "../styles/theme/scope.mjs";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
 import { inputRootStyles, styles } from "./style.mjs";
 import ClearButton from "./ClearButton.mjs";
 import { clearNativeValue } from "./clearNativeValue.mjs";
 import { isPressEnter } from "./pressEnter.mjs";
 import { memo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMergeRefs } from "react-merge-refs";
 import { Input } from "@base-ui/react/input";
 //#region src/Input/Input.tsx
 const hasText = (value) => value !== void 0 && value !== null && String(value).length > 0;
@@ -19,6 +20,10 @@ const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style,
 	const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));
 	const isFilled = value === void 0 ? filled : hasText(value);
 	const showClear = allowClear && isFilled && !disabled && !readOnly;
+	const handleClear = useEventCallback(() => {
+		clearNativeValue(inputRef.current);
+		onClear?.();
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-disabled": disabled ? "" : void 0,
 		"data-variant": mergedVariant,
@@ -49,10 +54,7 @@ const Input$1 = memo(({ ref, className, classNames, styles: customStyles, style,
 				},
 				...rest
 			}),
-			showClear && /* @__PURE__ */ jsx(ClearButton, { onClear: () => {
-				clearNativeValue(inputRef.current);
-				onClear?.();
-			} }),
+			showClear && /* @__PURE__ */ jsx(ClearButton, { onClear: handleClear }),
 			suffix && /* @__PURE__ */ jsx("span", {
 				...styleProps(styles.slot, classNames?.suffix, customStyles?.suffix),
 				children: suffix

package/es/Input/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../src/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { memo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { inputRootStyles, styles } from './style';\nimport type { InputProps } from './type';\n\nconst hasText = (value: unknown) =>\n  value !== undefined && value !== null && String(value).length > 0;\n\nconst Input = memo<InputProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    prefix,\n    suffix,\n    disabled,\n    readOnly,\n    allowClear,\n    onClear,\n    onPressEnter,\n    onKeyDown,\n    onChange,\n    value,\n    defaultValue,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRefs([ref, inputRef]);\n    const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));\n    const isFilled = value === undefined ? filled : hasText(value);\n    const showClear = allowClear && isFilled && !disabled && !readOnly;\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        data-variant={mergedVariant}\n        {...styleProps(inputRootStyles({ shadow, size, variant: mergedVariant }), className, style)}\n      >\n        {prefix && (\n          <span {...styleProps(styles.slot, classNames?.prefix, customStyles?.prefix)}>\n            {prefix}\n          </span>\n        )}\n        <BaseInput\n          defaultValue={defaultValue}\n          disabled={disabled}\n          readOnly={readOnly}\n          ref={mergedRef}\n          value={value}\n          {...styleProps(styles.input, classNames?.input, customStyles?.input)}\n          onChange={(event) => {\n            setFilled(event.currentTarget.value.length > 0);\n            onChange?.(event);\n          }}\n          onKeyDown={(event) => {\n            if (isPressEnter(event)) onPressEnter?.(event);\n            onKeyDown?.(event);\n          }}\n          {...rest}\n        />\n        {showClear && (\n          <ClearButton\n            onClear={() => {\n              clearNativeValue(inputRef.current);\n              onClear?.();\n            }}\n          />\n        )}\n        {suffix && (\n          <span {...styleProps(styles.slot, classNames?.suffix, customStyles?.suffix)}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Object.assign(Input, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,WAAW,UACf,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,KAAK,CAAC,CAAC,SAAS;AAElE,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,UACA,YACA,SACA,cACA,WACA,UACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,aAAa,CAAC,KAAK,QAAQ,CAAC;CAC9C,MAAM,CAAC,QAAQ,aAAa,eAAe,QAAQ,SAAS,YAAY,CAAC;CACzE,MAAM,WAAW,UAAU,KAAA,IAAY,SAAS,QAAQ,KAAK;CAC7D,MAAM,YAAY,cAAc,YAAY,CAAC,YAAY,CAAC;CAE1D,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,gBAAc;EACd,GAAI,WAAW,gBAAgB;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,WAAW,KAAK;EAH5F,UAAA;GAKG,UACC,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,MAAM,YAAY,QAAQ,cAAc,MAAM;IACvE,UAAA;GACG,CAAA;GAER,oBAACC,OAAD;IACgB;IACJ;IACA;IACV,KAAK;IACE;IACP,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;IACnE,WAAW,UAAU;KACnB,UAAU,MAAM,cAAc,MAAM,SAAS,CAAC;KAC9C,WAAW,KAAK;IAClB;IACA,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;KAC7C,YAAY,KAAK;IACnB;IACA,GAAI;GACL,CAAA;GACA,aACC,oBAAC,aAAD,EACE,eAAe;IACb,iBAAiB,SAAS,OAAO;IACjC,UAAU;GACZ,EACD,CAAA;GAEF,UACC,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,MAAM,YAAY,QAAQ,cAAc,MAAM;IACvE,UAAA;GACG,CAAA;EAEL;;AAET,CACF;AAEA,QAAM,cAAc;AAEpB,IAAA,gBAAe,OAAO,OAAOD,SAAO,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}
+{"version":3,"file":"Input.mjs","names":["Input","BaseInput"],"sources":["../../src/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport { memo, useRef, useState } from 'react';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { inputRootStyles, styles } from './style';\nimport type { InputProps } from './type';\n\nconst hasText = (value: unknown) =>\n  value !== undefined && value !== null && String(value).length > 0;\n\nconst Input = memo<InputProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    size = 'middle',\n    prefix,\n    suffix,\n    disabled,\n    readOnly,\n    allowClear,\n    onClear,\n    onPressEnter,\n    onKeyDown,\n    onChange,\n    value,\n    defaultValue,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const mergedRef = useMergeRefs([ref, inputRef]);\n    const [filled, setFilled] = useState(() => hasText(value ?? defaultValue));\n    const isFilled = value === undefined ? filled : hasText(value);\n    const showClear = allowClear && isFilled && !disabled && !readOnly;\n\n    const handleClear = useEventCallback(() => {\n      clearNativeValue(inputRef.current);\n      onClear?.();\n    });\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        data-variant={mergedVariant}\n        {...styleProps(inputRootStyles({ shadow, size, variant: mergedVariant }), className, style)}\n      >\n        {prefix && (\n          <span {...styleProps(styles.slot, classNames?.prefix, customStyles?.prefix)}>\n            {prefix}\n          </span>\n        )}\n        <BaseInput\n          defaultValue={defaultValue}\n          disabled={disabled}\n          readOnly={readOnly}\n          ref={mergedRef}\n          value={value}\n          {...styleProps(styles.input, classNames?.input, customStyles?.input)}\n          onChange={(event) => {\n            setFilled(event.currentTarget.value.length > 0);\n            onChange?.(event);\n          }}\n          onKeyDown={(event) => {\n            if (isPressEnter(event)) onPressEnter?.(event);\n            onKeyDown?.(event);\n          }}\n          {...rest}\n        />\n        {showClear && <ClearButton onClear={handleClear} />}\n        {suffix && (\n          <span {...styleProps(styles.slot, classNames?.suffix, customStyles?.suffix)}>\n            {suffix}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nInput.displayName = 'Input';\n\nexport default Object.assign(Input, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,WAAW,UACf,UAAU,KAAA,KAAa,UAAU,QAAQ,OAAO,KAAK,CAAC,CAAC,SAAS;AAElE,MAAMA,UAAQ,MACX,EACC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,QACA,QACA,UACA,UACA,YACA,SACA,cACA,WACA,UACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,aAAa,CAAC,KAAK,QAAQ,CAAC;CAC9C,MAAM,CAAC,QAAQ,aAAa,eAAe,QAAQ,SAAS,YAAY,CAAC;CACzE,MAAM,WAAW,UAAU,KAAA,IAAY,SAAS,QAAQ,KAAK;CAC7D,MAAM,YAAY,cAAc,YAAY,CAAC,YAAY,CAAC;CAE1D,MAAM,cAAc,uBAAuB;EACzC,iBAAiB,SAAS,OAAO;EACjC,UAAU;CACZ,CAAC;CAED,OACE,qBAAC,OAAD;EACE,iBAAe,WAAW,KAAK,KAAA;EAC/B,gBAAc;EACd,GAAI,WAAW,gBAAgB;GAAE;GAAQ;GAAM,SAAS;EAAc,CAAC,GAAG,WAAW,KAAK;EAH5F,UAAA;GAKG,UACC,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,MAAM,YAAY,QAAQ,cAAc,MAAM;IACvE,UAAA;GACG,CAAA;GAER,oBAACC,OAAD;IACgB;IACJ;IACA;IACV,KAAK;IACE;IACP,GAAI,WAAW,OAAO,OAAO,YAAY,OAAO,cAAc,KAAK;IACnE,WAAW,UAAU;KACnB,UAAU,MAAM,cAAc,MAAM,SAAS,CAAC;KAC9C,WAAW,KAAK;IAClB;IACA,YAAY,UAAU;KACpB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;KAC7C,YAAY,KAAK;IACnB;IACA,GAAI;GACL,CAAA;GACA,aAAa,oBAAC,aAAD,EAAa,SAAS,YAAc,CAAA;GACjD,UACC,oBAAC,QAAD;IAAM,GAAI,WAAW,OAAO,MAAM,YAAY,QAAQ,cAAc,MAAM;IACvE,UAAA;GACG,CAAA;EAEL;;AAET,CACF;AAEA,QAAM,cAAc;AAEpB,IAAA,gBAAe,OAAO,OAAOD,SAAO,EAAE,aAAa,EAAE,YAAY,GAAG,EAAW,CAAC"}

package/es/Input/TextArea.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
+import { useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useThemeMode } from "../styles/theme/scope.mjs";
 import { inputRootStyles, styles } from "./style.mjs";
 import ClearButton from "./ClearButton.mjs";
@@ -8,7 +9,6 @@ import { isPressEnter } from "./pressEnter.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
-import { useMergeRefs } from "react-merge-refs";
 import { Field } from "@base-ui/react/field";
 //#region src/Input/TextArea.tsx
 const textLength = (value) => value === void 0 || value === null ? 0 : Array.from(String(value)).length;

package/es/Input/TextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../src/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport * as stylex from '@stylexjs/stylex';\nimport { type CSSProperties, memo, useMemo, useRef, useState } from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { inputRootStyles, styles } from './style';\nimport type { TextAreaProps } from './type';\n\nconst textLength = (value: unknown) =>\n  value === undefined || value === null ? 0 : Array.from(String(value)).length;\n\nconst TextArea = memo<TextAreaProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    autoSize,\n    resize = false,\n    disabled,\n    readOnly,\n    allowClear,\n    onClear,\n    onPressEnter,\n    onKeyDown,\n    onChange,\n    showCount,\n    maxLength,\n    value,\n    defaultValue,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const mergedRef = useMergeRefs([ref, textareaRef]);\n    const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));\n    const length = value === undefined ? innerLength : textLength(value);\n    const showClear = allowClear && length > 0 && !disabled && !readOnly;\n    const over = maxLength !== undefined && length > maxLength;\n\n    const cssVariables = useMemo<CSSProperties>(() => {\n      if (typeof autoSize !== 'object') return {};\n      return {\n        '--textarea-max-height': autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : undefined,\n        '--textarea-min-rows': autoSize.minRows,\n      } as CSSProperties;\n    }, [autoSize]);\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        data-variant={mergedVariant}\n        {...styleProps(\n          [\n            ...inputRootStyles({ shadow, variant: mergedVariant }),\n            styles.textarea,\n            showCount && styles.textareaWithCount,\n          ],\n          className,\n          { ...cssVariables, ...style },\n        )}\n      >\n        <Field.Control\n          disabled={disabled}\n          {...styleProps(\n            [\n              styles.input,\n              styles.textareaControl,\n              autoSize && styles.textareaAutoSize,\n              resize && styles.textareaResize,\n            ],\n            classNames?.input,\n            customStyles?.input,\n          )}\n          render={\n            <textarea\n              defaultValue={defaultValue}\n              maxLength={maxLength}\n              readOnly={readOnly}\n              ref={mergedRef}\n              value={value}\n              onChange={(event) => {\n                setInnerLength(textLength(event.currentTarget.value));\n                onChange?.(event);\n              }}\n              onKeyDown={(event) => {\n                if (isPressEnter(event)) onPressEnter?.(event);\n                onKeyDown?.(event);\n              }}\n              {...rest}\n            />\n          }\n        />\n        {showClear && (\n          <ClearButton\n            xstyle={styles.textareaClear}\n            onClear={() => {\n              clearNativeValue(textareaRef.current);\n              onClear?.();\n            }}\n          />\n        )}\n        {showCount && (\n          <span data-over={over ? '' : undefined} {...stylex.props(styles.count)}>\n            {maxLength === undefined ? length : `${length} / ${maxLength}`}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default Object.assign(TextArea, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,cAAc,UAAmB,UAAU,KAAA,KAAa,UAAU,OAAO,IAAI,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;AAC7G,MAAM,WAAW,MAAqB,EACpC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,UACA,SAAS,OACT,UACA,UACA,YACA,SACA,cACA,WACA,UACA,WACA,WACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,YAAY,aAAa,CAAC,KAAK,WAAW,CAAC;CACjD,MAAM,CAAC,aAAa,kBAAkB,eAAe,WAAW,SAAS,YAAY,CAAC;CACtF,MAAM,SAAS,UAAU,KAAA,IAAY,cAAc,WAAW,KAAK;CACnE,MAAM,YAAY,cAAc,SAAS,KAAK,CAAC,YAAY,CAAC;CAC5D,MAAM,OAAO,cAAc,KAAA,KAAa,SAAS;CACjD,MAAM,eAAe,cAA6B;EAChD,IAAI,OAAO,aAAa,UAAU,OAAO,CAAC;EAC1C,OAAO;GACL,yBAAyB,SAAS,UAAU,gBAAgB,SAAS,QAAQ,KAAK,KAAA;GAClF,uBAAuB,SAAS;EAClC;CACF,GAAG,CAAC,QAAQ,CAAC;CACb,OAAO,qBAAC,OAAD;EAAK,iBAAe,WAAW,KAAK,KAAA;EAAW,gBAAc;EAAe,GAAI,WAAW;GAAC,GAAG,gBAAgB;IACpH;IACA,SAAS;GACX,CAAC;GAAG,OAAO;GAAU,aAAa,OAAO;EAAiB,GAAG,WAAW;GACtE,GAAG;GACH,GAAG;EACL,CAAC;EANM,UAAA;GAOD,oBAAC,MAAM,SAAP;IAAyB;IAAU,GAAI,WAAW;KAAC,OAAO;KAAO,OAAO;KAAiB,YAAY,OAAO;KAAkB,UAAU,OAAO;IAAc,GAAG,YAAY,OAAO,cAAc,KAAK;IAAG,QAAQ,oBAAC,YAAD;KAAwB;KAAyB;KAAqB;KAAU,KAAK;KAAkB;KAAO,WAAU,UAAS;MACpV,eAAe,WAAW,MAAM,cAAc,KAAK,CAAC;MACpD,WAAW,KAAK;KAClB;KAAG,YAAW,UAAS;MACrB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;MAC7C,YAAY,KAAK;KACnB;KAAG,GAAI;IAAO,CAAA;GAAI,CAAA;GACb,aAAa,oBAAC,aAAD;IAAa,QAAQ,OAAO;IAAe,eAAe;KAC1E,iBAAiB,YAAY,OAAO;KACpC,UAAU;IACZ;GAAI,CAAA;GACC,aAAa,oBAAC,QAAD;IAAM,aAAW,OAAO,KAAK,KAAA;IAAW,GAAI,OAAO,MAAM,OAAO,KAAK;IAC9E,UAAA,cAAc,KAAA,IAAY,SAAS,GAAG,OAAO,KAAK;GAC/C,CAAA;EACL;;AACX,CAAC;AACD,SAAS,cAAc;AACvB,IAAA,mBAAe,OAAO,OAAO,UAAU,EACrC,aAAa,EACX,YAAY,GACd,EACF,CAAC"}
+{"version":3,"file":"TextArea.mjs","names":[],"sources":["../../src/Input/TextArea.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@base-ui/react/field';\nimport * as stylex from '@stylexjs/stylex';\nimport { type CSSProperties, memo, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\nimport ClearButton from './ClearButton';\nimport { clearNativeValue } from './clearNativeValue';\nimport { isPressEnter } from './pressEnter';\nimport { inputRootStyles, styles } from './style';\nimport type { TextAreaProps } from './type';\n\nconst textLength = (value: unknown) =>\n  value === undefined || value === null ? 0 : Array.from(String(value)).length;\n\nconst TextArea = memo<TextAreaProps>(\n  ({\n    ref,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    variant,\n    shadow,\n    autoSize,\n    resize = false,\n    disabled,\n    readOnly,\n    allowClear,\n    onClear,\n    onPressEnter,\n    onKeyDown,\n    onChange,\n    showCount,\n    maxLength,\n    value,\n    defaultValue,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n    const mergedRef = useMergeRefs([ref, textareaRef]);\n    const [innerLength, setInnerLength] = useState(() => textLength(value ?? defaultValue));\n    const length = value === undefined ? innerLength : textLength(value);\n    const showClear = allowClear && length > 0 && !disabled && !readOnly;\n    const over = maxLength !== undefined && length > maxLength;\n\n    const cssVariables = useMemo<CSSProperties>(() => {\n      if (typeof autoSize !== 'object') return {};\n      return {\n        '--textarea-max-height': autoSize.maxRows ? `calc(1.5em * ${autoSize.maxRows})` : undefined,\n        '--textarea-min-rows': autoSize.minRows,\n      } as CSSProperties;\n    }, [autoSize]);\n\n    return (\n      <div\n        data-disabled={disabled ? '' : undefined}\n        data-variant={mergedVariant}\n        {...styleProps(\n          [\n            ...inputRootStyles({ shadow, variant: mergedVariant }),\n            styles.textarea,\n            showCount && styles.textareaWithCount,\n          ],\n          className,\n          { ...cssVariables, ...style },\n        )}\n      >\n        <Field.Control\n          disabled={disabled}\n          {...styleProps(\n            [\n              styles.input,\n              styles.textareaControl,\n              autoSize && styles.textareaAutoSize,\n              resize && styles.textareaResize,\n            ],\n            classNames?.input,\n            customStyles?.input,\n          )}\n          render={\n            <textarea\n              defaultValue={defaultValue}\n              maxLength={maxLength}\n              readOnly={readOnly}\n              ref={mergedRef}\n              value={value}\n              onChange={(event) => {\n                setInnerLength(textLength(event.currentTarget.value));\n                onChange?.(event);\n              }}\n              onKeyDown={(event) => {\n                if (isPressEnter(event)) onPressEnter?.(event);\n                onKeyDown?.(event);\n              }}\n              {...rest}\n            />\n          }\n        />\n        {showClear && (\n          <ClearButton\n            xstyle={styles.textareaClear}\n            onClear={() => {\n              clearNativeValue(textareaRef.current);\n              onClear?.();\n            }}\n          />\n        )}\n        {showCount && (\n          <span data-over={over ? '' : undefined} {...stylex.props(styles.count)}>\n            {maxLength === undefined ? length : `${length} / ${maxLength}`}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default Object.assign(TextArea, { formBinding: { emptyValue: '' } as const });\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,cAAc,UAAmB,UAAU,KAAA,KAAa,UAAU,OAAO,IAAI,MAAM,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;AAC7G,MAAM,WAAW,MAAqB,EACpC,KACA,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,UACA,SAAS,OACT,UACA,UACA,YACA,SACA,cACA,WACA,UACA,WACA,WACA,OACA,cACA,GAAG,WACC;CACJ,MAAM,EACJ,eACE,aAAa;CACjB,MAAM,gBAAgB,YAAY,aAAa,WAAW;CAC1D,MAAM,cAAc,OAA4B,IAAI;CACpD,MAAM,YAAY,aAAa,CAAC,KAAK,WAAW,CAAC;CACjD,MAAM,CAAC,aAAa,kBAAkB,eAAe,WAAW,SAAS,YAAY,CAAC;CACtF,MAAM,SAAS,UAAU,KAAA,IAAY,cAAc,WAAW,KAAK;CACnE,MAAM,YAAY,cAAc,SAAS,KAAK,CAAC,YAAY,CAAC;CAC5D,MAAM,OAAO,cAAc,KAAA,KAAa,SAAS;CACjD,MAAM,eAAe,cAA6B;EAChD,IAAI,OAAO,aAAa,UAAU,OAAO,CAAC;EAC1C,OAAO;GACL,yBAAyB,SAAS,UAAU,gBAAgB,SAAS,QAAQ,KAAK,KAAA;GAClF,uBAAuB,SAAS;EAClC;CACF,GAAG,CAAC,QAAQ,CAAC;CACb,OAAO,qBAAC,OAAD;EAAK,iBAAe,WAAW,KAAK,KAAA;EAAW,gBAAc;EAAe,GAAI,WAAW;GAAC,GAAG,gBAAgB;IACpH;IACA,SAAS;GACX,CAAC;GAAG,OAAO;GAAU,aAAa,OAAO;EAAiB,GAAG,WAAW;GACtE,GAAG;GACH,GAAG;EACL,CAAC;EANM,UAAA;GAOD,oBAAC,MAAM,SAAP;IAAyB;IAAU,GAAI,WAAW;KAAC,OAAO;KAAO,OAAO;KAAiB,YAAY,OAAO;KAAkB,UAAU,OAAO;IAAc,GAAG,YAAY,OAAO,cAAc,KAAK;IAAG,QAAQ,oBAAC,YAAD;KAAwB;KAAyB;KAAqB;KAAU,KAAK;KAAkB;KAAO,WAAU,UAAS;MACpV,eAAe,WAAW,MAAM,cAAc,KAAK,CAAC;MACpD,WAAW,KAAK;KAClB;KAAG,YAAW,UAAS;MACrB,IAAI,aAAa,KAAK,GAAG,eAAe,KAAK;MAC7C,YAAY,KAAK;KACnB;KAAG,GAAI;IAAO,CAAA;GAAI,CAAA;GACb,aAAa,oBAAC,aAAD;IAAa,QAAQ,OAAO;IAAe,eAAe;KAC1E,iBAAiB,YAAY,OAAO;KACpC,UAAU;IACZ;GAAI,CAAA;GACC,aAAa,oBAAC,QAAD;IAAM,aAAW,OAAO,KAAK,KAAA;IAAW,GAAI,OAAO,MAAM,OAAO,KAAK;IAC9E,UAAA,cAAc,KAAA,IAAY,SAAS,GAAG,OAAO,KAAK;GAC/C,CAAA;EACL;;AACX,CAAC;AACD,SAAS,cAAc;AACvB,IAAA,mBAAe,OAAO,OAAO,UAAU,EACrC,aAAa,EACX,YAAY,GACd,EACF,CAAC"}

package/es/Modal/atoms.mjs

@@ -4,6 +4,7 @@ import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { focusRing } from "../styles/stylex/focusRing.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
 import { backdropTransition, modalMotionConfig } from "./constants.mjs";
 import { ModalLayerProvider, useModalLayer } from "./ModalLayerContext.mjs";
@@ -14,7 +15,6 @@ import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { X } from "lucide-react";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Dialog } from "@base-ui/react/dialog";
 import { AnimatePresence } from "motion/react";
 //#region src/Modal/atoms.tsx
@@ -141,13 +141,13 @@ const ModalPopupImpl = ({ className, children, width, style, motionProps, panelC
 			children: open ? /* @__PURE__ */ createElement(Motion.div, {
 				...modalMotionConfig,
 				...motionProps,
-				className: clsx(stylex.props(styles.popupInner, panelXstyle).className, panelClassName),
 				key: "modal-popup-panel",
 				style: {
 					maxWidth: width ?? void 0,
 					transition: "none",
 					...style
-				}
+				},
+				className: clsx(stylex.props(styles.popupInner, panelXstyle).className, panelClassName)
 			}, children) : null
 		})
 	});

package/es/Modal/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopupImpl = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  xstyle,\n  ...rest\n}: ModalPopupProps & { panelXstyle?: XStyle; xstyle?: XStyle }) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(styles.popup, xstyle).className, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              className={clsx(stylex.props(styles.popupInner, panelXstyle).className, panelClassName)}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName([styles.popup, xstyle], className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        {...styleProps([styles.popupInner, panelXstyle], panelClassName, {\n          maxWidth: width ?? undefined,\n          ...style,\n        })}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const ModalPopup: React.FC<ModalPopupProps> = ModalPopupImpl;\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeaderImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalHeaderProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.header, xstyle], className, style)} />\n);\nexport const ModalHeader: React.FC<ModalHeaderProps> = ModalHeaderImpl;\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitleImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: ModalTitleProps & { xstyle?: XStyle }) => (\n  <Dialog.Title\n    {...rest}\n    className={mergeStateClassName([styles.title, xstyle], className as any) as any}\n  />\n);\nexport const ModalTitle: React.FC<ModalTitleProps> = ModalTitleImpl;\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const ModalContent: React.FC<ModalContentProps> = ModalContentImpl;\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooterImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalFooterProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.footer, xstyle], className, style)} />\n);\nexport const ModalFooter: React.FC<ModalFooterProps> = ModalFooterImpl;\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalCloseImpl = ({\n  className,\n  children,\n  xstyle,\n  ...rest\n}: ModalCloseProps & { xstyle?: XStyle }) => (\n  <Dialog.Close\n    {...rest}\n    className={\n      mergeStateClassName(\n        [styles.closeInline, styles.close, focusRing.info, xstyle],\n        className as any,\n      ) as any\n    }\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\nexport const ModalClose: React.FC<ModalCloseProps> = ModalCloseImpl;\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":[],"sources":["../../src/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  xstyle: XStyle,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  const base = stylex.props(xstyle).className;\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={clsx(stylex.props(styles.backdrop).className, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopupImpl = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  xstyle,\n  ...rest\n}: ModalPopupProps & { panelXstyle?: XStyle; xstyle?: XStyle }) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(styles.popup, xstyle).className, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n              className={clsx(\n                stylex.props(styles.popupInner, panelXstyle).className,\n                panelClassName,\n              )}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName([styles.popup, xstyle], className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        {...styleProps([styles.popupInner, panelXstyle], panelClassName, {\n          maxWidth: width ?? undefined,\n          ...style,\n        })}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const ModalPopup: React.FC<ModalPopupProps> = ModalPopupImpl;\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeaderImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalHeaderProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.header, xstyle], className, style)} />\n);\nexport const ModalHeader: React.FC<ModalHeaderProps> = ModalHeaderImpl;\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitleImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: ModalTitleProps & { xstyle?: XStyle }) => (\n  <Dialog.Title\n    {...rest}\n    className={mergeStateClassName([styles.title, xstyle], className as any) as any}\n  />\n);\nexport const ModalTitle: React.FC<ModalTitleProps> = ModalTitleImpl;\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const ModalContent: React.FC<ModalContentProps> = ModalContentImpl;\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooterImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: ModalFooterProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.footer, xstyle], className, style)} />\n);\nexport const ModalFooter: React.FC<ModalFooterProps> = ModalFooterImpl;\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalCloseImpl = ({\n  className,\n  children,\n  xstyle,\n  ...rest\n}: ModalCloseProps & { xstyle?: XStyle }) => (\n  <Dialog.Close\n    {...rest}\n    className={\n      mergeStateClassName(\n        [styles.closeInline, styles.close, focusRing.info, xstyle],\n        className as any,\n      ) as any\n    }\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\nexport const ModalClose: React.FC<ModalCloseProps> = ModalCloseImpl;\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}

package/es/Pagination/Pagination.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import Select from "../Select/Select.mjs";
 import { clampPage, getPageCount, getPaginationItems } from "./helpers.mjs";
 import { styles } from "./style.mjs";
@@ -8,7 +9,6 @@ import { createElement, memo, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import useControlledState from "use-merge-value";
 //#region src/Pagination/Pagination.tsx
 const Pagination = memo(({ className, current, defaultCurrent = 1, defaultPageSize = 10, disabled, hideOnSinglePage, onChange, onPageSizeChange, pageSize, pageSizeOptions = [
 	10,

package/es/Pagination/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport Select from '@/Select';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { styles } from './style';\nimport type { PaginationProps } from './type';\n\nconst Pagination = memo<PaginationProps>(\n  ({\n    className,\n    current,\n    defaultCurrent = 1,\n    defaultPageSize = 10,\n    disabled,\n    hideOnSinglePage,\n    onChange,\n    onPageSizeChange,\n    pageSize,\n    pageSizeOptions = [10, 20, 50, 100],\n    ref,\n    showSizeChanger = false,\n    showTotal,\n    size = 'middle',\n    style,\n    total,\n    ...rest\n  }) => {\n    const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, {\n      value: pageSize,\n    });\n    const pageCount = getPageCount(total, mergedPageSize);\n    const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, {\n      value: current,\n    });\n    const onChangeStable = useEventCallback((nextCurrent: number, nextPageSize: number) => {\n      onChange?.(nextCurrent, nextPageSize);\n    });\n\n    const pendingNotifyRef = useRef<{ current: number; pageSize: number } | null>(null);\n    const [prevPageCount, setPrevPageCount] = useState(pageCount);\n\n    if (pageCount !== prevPageCount) {\n      setPrevPageCount(pageCount);\n\n      if (mergedCurrent > pageCount && pageCount >= 1) {\n        setMergedCurrent(pageCount);\n        pendingNotifyRef.current = { current: pageCount, pageSize: mergedPageSize };\n      }\n    }\n\n    useEffect(() => {\n      if (!pendingNotifyRef.current) return;\n\n      const { current: nextCurrent, pageSize: nextPageSize } = pendingNotifyRef.current;\n      pendingNotifyRef.current = null;\n      onChangeStable(nextCurrent, nextPageSize);\n    });\n\n    const displayCurrent = clampPage(mergedCurrent, pageCount);\n\n    if (hideOnSinglePage && pageCount <= 1) return null;\n\n    const commitCurrent = (nextCurrent: number, nextPageSize: number) => {\n      setMergedCurrent(nextCurrent);\n      onChange?.(nextCurrent, nextPageSize);\n    };\n\n    const goTo = (page: number) => {\n      commitCurrent(clampPage(page, pageCount), mergedPageSize);\n    };\n\n    const handlePageSizeChange = (value: string) => {\n      const nextSize = Number(value);\n      const nextPageCount = getPageCount(total, nextSize);\n      const nextCurrent = clampPage(displayCurrent, nextPageCount);\n\n      setMergedPageSize(nextSize);\n      commitCurrent(nextCurrent, nextSize);\n      onPageSizeChange?.(nextCurrent, nextSize);\n    };\n\n    const buttonProps = stylex.props(styles.button, size === 'small' && styles.small);\n    const items = getPaginationItems(displayCurrent, pageCount);\n    const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;\n    const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);\n\n    return (\n      <nav\n        aria-label=\"Pagination\"\n        ref={ref}\n        role=\"navigation\"\n        {...styleProps(styles.root, className, style)}\n        {...rest}\n      >\n        {showTotal && (\n          <span {...stylex.props(styles.total)}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n        )}\n        <button\n          aria-label=\"Previous page\"\n          {...buttonProps}\n          disabled={disabled || displayCurrent <= 1}\n          type=\"button\"\n          onClick={() => goTo(displayCurrent - 1)}\n        >\n          <ChevronLeft size={size === 'small' ? 14 : 16} />\n        </button>\n        {items.map((item) =>\n          typeof item === 'number' ? (\n            <button\n              aria-current={item === displayCurrent ? 'page' : undefined}\n              {...buttonProps}\n              disabled={disabled}\n              key={item}\n              type=\"button\"\n              onClick={() => goTo(item)}\n            >\n              {item}\n            </button>\n          ) : (\n            <span\n              key={item}\n              {...stylex.props(styles.ellipsis, size === 'small' && styles.smallEllipsis)}\n            >\n              ···\n            </span>\n          ),\n        )}\n        <button\n          aria-label=\"Next page\"\n          {...buttonProps}\n          disabled={disabled || displayCurrent >= pageCount}\n          type=\"button\"\n          onClick={() => goTo(displayCurrent + 1)}\n        >\n          <ChevronRight size={size === 'small' ? 14 : 16} />\n        </button>\n        {showSizeChanger && (\n          <Select\n            disabled={disabled}\n            size={size === 'small' ? 'small' : 'middle'}\n            style={{ flex: 'none', marginInlineStart: 8, width: 'auto' }}\n            value={String(mergedPageSize)}\n            options={pageSizeOptions.map((option) => ({\n              label: `${option} / page`,\n              value: String(option),\n            }))}\n            onChange={handlePageSizeChange}\n          />\n        )}\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.mjs","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport Select from '@/Select';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { clampPage, getPageCount, getPaginationItems } from './helpers';\nimport { styles } from './style';\nimport type { PaginationProps } from './type';\n\nconst Pagination = memo<PaginationProps>(\n  ({\n    className,\n    current,\n    defaultCurrent = 1,\n    defaultPageSize = 10,\n    disabled,\n    hideOnSinglePage,\n    onChange,\n    onPageSizeChange,\n    pageSize,\n    pageSizeOptions = [10, 20, 50, 100],\n    ref,\n    showSizeChanger = false,\n    showTotal,\n    size = 'middle',\n    style,\n    total,\n    ...rest\n  }) => {\n    const [mergedPageSize, setMergedPageSize] = useControlledState(defaultPageSize, {\n      value: pageSize,\n    });\n    const pageCount = getPageCount(total, mergedPageSize);\n    const [mergedCurrent, setMergedCurrent] = useControlledState(defaultCurrent, {\n      value: current,\n    });\n    const onChangeStable = useEventCallback((nextCurrent: number, nextPageSize: number) => {\n      onChange?.(nextCurrent, nextPageSize);\n    });\n\n    const pendingNotifyRef = useRef<{ current: number; pageSize: number } | null>(null);\n    const [prevPageCount, setPrevPageCount] = useState(pageCount);\n\n    if (pageCount !== prevPageCount) {\n      setPrevPageCount(pageCount);\n\n      if (mergedCurrent > pageCount && pageCount >= 1) {\n        setMergedCurrent(pageCount);\n        pendingNotifyRef.current = { current: pageCount, pageSize: mergedPageSize };\n      }\n    }\n\n    useEffect(() => {\n      if (!pendingNotifyRef.current) return;\n\n      const { current: nextCurrent, pageSize: nextPageSize } = pendingNotifyRef.current;\n      pendingNotifyRef.current = null;\n      onChangeStable(nextCurrent, nextPageSize);\n    });\n\n    const displayCurrent = clampPage(mergedCurrent, pageCount);\n\n    if (hideOnSinglePage && pageCount <= 1) return null;\n\n    const commitCurrent = (nextCurrent: number, nextPageSize: number) => {\n      setMergedCurrent(nextCurrent);\n      onChange?.(nextCurrent, nextPageSize);\n    };\n\n    const goTo = (page: number) => {\n      commitCurrent(clampPage(page, pageCount), mergedPageSize);\n    };\n\n    const handlePageSizeChange = (value: string) => {\n      const nextSize = Number(value);\n      const nextPageCount = getPageCount(total, nextSize);\n      const nextCurrent = clampPage(displayCurrent, nextPageCount);\n\n      setMergedPageSize(nextSize);\n      commitCurrent(nextCurrent, nextSize);\n      onPageSizeChange?.(nextCurrent, nextSize);\n    };\n\n    const buttonProps = stylex.props(styles.button, size === 'small' && styles.small);\n    const items = getPaginationItems(displayCurrent, pageCount);\n    const rangeStart = total === 0 ? 0 : (displayCurrent - 1) * mergedPageSize + 1;\n    const rangeEnd = Math.min(displayCurrent * mergedPageSize, total);\n\n    return (\n      <nav\n        aria-label=\"Pagination\"\n        ref={ref}\n        role=\"navigation\"\n        {...styleProps(styles.root, className, style)}\n        {...rest}\n      >\n        {showTotal && (\n          <span {...stylex.props(styles.total)}>{showTotal(total, [rangeStart, rangeEnd])}</span>\n        )}\n        <button\n          aria-label=\"Previous page\"\n          {...buttonProps}\n          disabled={disabled || displayCurrent <= 1}\n          type=\"button\"\n          onClick={() => goTo(displayCurrent - 1)}\n        >\n          <ChevronLeft size={size === 'small' ? 14 : 16} />\n        </button>\n        {items.map((item) =>\n          typeof item === 'number' ? (\n            <button\n              aria-current={item === displayCurrent ? 'page' : undefined}\n              {...buttonProps}\n              disabled={disabled}\n              key={item}\n              type=\"button\"\n              onClick={() => goTo(item)}\n            >\n              {item}\n            </button>\n          ) : (\n            <span\n              key={item}\n              {...stylex.props(styles.ellipsis, size === 'small' && styles.smallEllipsis)}\n            >\n              ···\n            </span>\n          ),\n        )}\n        <button\n          aria-label=\"Next page\"\n          {...buttonProps}\n          disabled={disabled || displayCurrent >= pageCount}\n          type=\"button\"\n          onClick={() => goTo(displayCurrent + 1)}\n        >\n          <ChevronRight size={size === 'small' ? 14 : 16} />\n        </button>\n        {showSizeChanger && (\n          <Select\n            disabled={disabled}\n            size={size === 'small' ? 'small' : 'middle'}\n            style={{ flex: 'none', marginInlineStart: 8, width: 'auto' }}\n            value={String(mergedPageSize)}\n            options={pageSizeOptions.map((option) => ({\n              label: `${option} / page`,\n              value: String(option),\n            }))}\n            onChange={handlePageSizeChange}\n          />\n        )}\n      </nav>\n    );\n  },\n);\n\nPagination.displayName = 'Pagination';\n\nexport default Pagination;\n"],"mappings":"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"}

package/es/Popover/PopoverInGroup.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { mergeRefs } from "../utils/mergeRefs.mjs";
 import { parseTrigger } from "../utils/parseTrigger.mjs";
 import { PopoverGroupHandleContext } from "./groupContext.mjs";
 import { HOVER_ONLY_TRIGGER_ATTR } from "./hoverOnlyPress.mjs";
@@ -8,7 +9,6 @@ import { cloneElement, isValidElement, use, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs } from "react-merge-refs";
 import { Popover } from "@base-ui/react/popover";
 //#region src/Popover/PopoverInGroup.tsx
 const PopoverInGroup = ({ children, ref: refProp, ...props }) => {

package/es/Popover/PopoverInGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverInGroup.mjs","names":["BasePopover"],"sources":["../../src/Popover/PopoverInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { cloneElement, type FC, isValidElement, useMemo } from 'react';\nimport { use } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport { PopoverGroupHandleContext } from './groupContext';\nimport { HOVER_ONLY_TRIGGER_ATTR } from './hoverOnlyPress';\nimport { type PopoverProps } from './type';\nimport { useMergedPopoverProps } from './useMergedPopoverProps';\n\nexport const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {\n  const group = use(PopoverGroupHandleContext);\n  const item = useMergedPopoverProps(props);\n\n  const { openOnClick, openOnHover } = useMemo(\n    () => parseTrigger(item.trigger ?? 'hover'),\n    [item.trigger],\n  );\n\n  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;\n  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;\n  const disabled = Boolean(item.disabled);\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton: item.nativeButton,\n  });\n\n  // Don't render trigger behavior if no content\n  if (!item.content) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    [HOVER_ONLY_TRIGGER_ATTR]: openOnClick ? undefined : '',\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    openOnHover: openOnHover && !disabled,\n    ...item.triggerProps,\n    payload: item,\n  };\n\n  const triggerClassName = item.classNames?.trigger;\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        render={(renderProps) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return renderProps as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = renderProps as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(mergedProps.className, triggerClassName),\n            ref: mergeRefs([(children as any).ref, (renderProps as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      handle={group ?? undefined}\n      {...triggerProps}\n      className={triggerClassName}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverInGroup.displayName = 'PopoverInGroup';\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,IAAI,yBAAyB;CAC3C,MAAM,OAAO,sBAAsB,KAAK;CAExC,MAAM,EAAE,aAAa,gBAAgB,cAC7B,aAAa,KAAK,WAAW,OAAO,GAC1C,CAAC,KAAK,OAAO,CACf;CAEA,MAAM,oBAAoB,KAAK,cAAc,KAAK,mBAAmB,MAAO;CAC5E,MAAM,qBAAqB,KAAK,eAAe,KAAK,mBAAmB,MAAO;CAC9E,MAAM,WAAW,QAAQ,KAAK,QAAQ;CAEtC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA,cAAc,KAAK;CACrB,CAAC;CAGD,IAAI,CAAC,KAAK,SACR,OAAO;CAGT,MAAM,eAAe;GAClB,0BAA0B,cAAc,KAAA,IAAY;EACrD,YAAY;EACZ,OAAO;EACP;EACA,aAAa,eAAe,CAAC;EAC7B,GAAG,KAAK;EACR,SAAS;CACX;CAEA,MAAM,mBAAmB,KAAK,YAAY;CAE1C,IAAI,eAAe,QAAQ,GACzB,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,cAAc;EACd,SAAS,gBAAgB;GAGvB,MAAM,uBAAuB;IAC3B,IAAI,8BAA8B,OAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;IAChD,OAAO;GACT,EAAA,CAAG;GAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;GACrE,OAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAW,KAAK,YAAY,WAAW,gBAAgB;IACvD,KAAK,UAAU;KAAE,SAAiB;KAAM,YAAoB;KAAK;IAAO,CAAC;GAC3E,CAAC;EACH;CACD,CAAA;CAIL,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,WAAW;EACX,cAAc;EACd,KAAK;EAEJ;CACkB,CAAA;AAEzB;AAEA,eAAe,cAAc"}
+{"version":3,"file":"PopoverInGroup.mjs","names":["BasePopover"],"sources":["../../src/Popover/PopoverInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { cloneElement, type FC, isValidElement, useMemo } from 'react';\nimport { use } from 'react';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { parseTrigger } from '@/utils/parseTrigger';\n\nimport { PopoverGroupHandleContext } from './groupContext';\nimport { HOVER_ONLY_TRIGGER_ATTR } from './hoverOnlyPress';\nimport { type PopoverProps } from './type';\nimport { useMergedPopoverProps } from './useMergedPopoverProps';\n\nexport const PopoverInGroup: FC<PopoverProps> = ({ children, ref: refProp, ...props }) => {\n  const group = use(PopoverGroupHandleContext);\n  const item = useMergedPopoverProps(props);\n\n  const { openOnClick, openOnHover } = useMemo(\n    () => parseTrigger(item.trigger ?? 'hover'),\n    [item.trigger],\n  );\n\n  const resolvedOpenDelay = item.openDelay ?? (item.mouseEnterDelay ?? 0.1) * 1000;\n  const resolvedCloseDelay = item.closeDelay ?? (item.mouseLeaveDelay ?? 0.1) * 1000;\n  const disabled = Boolean(item.disabled);\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton: item.nativeButton,\n  });\n\n  // Don't render trigger behavior if no content\n  if (!item.content) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    [HOVER_ONLY_TRIGGER_ATTR]: openOnClick ? undefined : '',\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    openOnHover: openOnHover && !disabled,\n    ...item.triggerProps,\n    payload: item,\n  };\n\n  const triggerClassName = item.classNames?.trigger;\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        nativeButton={resolvedNativeButton}\n        render={(renderProps) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return renderProps as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = renderProps as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(mergedProps.className, triggerClassName),\n            ref: mergeRefs([(children as any).ref, (renderProps as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      handle={group ?? undefined}\n      {...triggerProps}\n      className={triggerClassName}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverInGroup.displayName = 'PopoverInGroup';\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,IAAI,yBAAyB;CAC3C,MAAM,OAAO,sBAAsB,KAAK;CAExC,MAAM,EAAE,aAAa,gBAAgB,cAC7B,aAAa,KAAK,WAAW,OAAO,GAC1C,CAAC,KAAK,OAAO,CACf;CAEA,MAAM,oBAAoB,KAAK,cAAc,KAAK,mBAAmB,MAAO;CAC5E,MAAM,qBAAqB,KAAK,eAAe,KAAK,mBAAmB,MAAO;CAC9E,MAAM,WAAW,QAAQ,KAAK,QAAQ;CAEtC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA,cAAc,KAAK;CACrB,CAAC;CAGD,IAAI,CAAC,KAAK,SACR,OAAO;CAGT,MAAM,eAAe;GAClB,0BAA0B,cAAc,KAAA,IAAY;EACrD,YAAY;EACZ,OAAO;EACP;EACA,aAAa,eAAe,CAAC;EAC7B,GAAG,KAAK;EACR,SAAS;CACX;CAEA,MAAM,mBAAmB,KAAK,YAAY;CAE1C,IAAI,eAAe,QAAQ,GACzB,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,cAAc;EACd,SAAS,gBAAgB;GAGvB,MAAM,uBAAuB;IAC3B,IAAI,8BAA8B,OAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;IAChD,OAAO;GACT,EAAA,CAAG;GAEH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;GACrE,OAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAW,KAAK,YAAY,WAAW,gBAAgB;IACvD,KAAK,UAAU;KAAE,SAAiB;KAAM,YAAoB;KAAK;IAAO,CAAC;GAC3E,CAAC;EACH;CACD,CAAA;CAIL,OACE,oBAACA,QAAY,SAAb;EACE,QAAQ,SAAS,KAAA;EACjB,GAAI;EACJ,WAAW;EACX,cAAc;EACd,KAAK;EAEJ;CACkB,CAAA;AAEzB;AAEA,eAAe,cAAc"}

package/es/Popover/atoms.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
 import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
 import { placementMap } from "../utils/placement.mjs";
@@ -12,7 +13,6 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Popover } from "@base-ui/react/popover";
 //#region src/Popover/atoms.tsx
 const PopoverRoot = Popover.Root;

package/es/Popover/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BasePopover"],"sources":["../../src/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n  useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n  ComponentPropsWithRef<typeof BasePopover.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: PopoverTriggerElementProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const baseClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName =\n            typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(baseClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n  ComponentProps<typeof BasePopover.Portal>,\n  'container'\n> & {\n  /**\n   * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Root element used by `usePopoverPortalContainer` to create the default container.\n   */\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n  const defaultContainer = usePopoverPortalContainer(root);\n  const resolvedContainer = container ?? defaultContainer;\n\n  if (!resolvedContainer) return null;\n\n  return (\n    <BasePopover.Portal container={resolvedContainer} {...rest}>\n      {children}\n    </BasePopover.Portal>\n  );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n  children,\n  className,\n  collisionPadding,\n  hoverTrigger,\n  placement,\n  align,\n  side,\n  sideOffset,\n  style,\n  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      className={(state) =>\n        clsx(\n          stylex.props(styles.positioner).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </BasePopover.Positioner>\n  );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport const PopoverPopup = ({ className, xstyle, ...rest }: PopoverPopupAtomProps) => {\n  return (\n    <BasePopover.Popup\n      className={(state) =>\n        clsx(\n          stylex.props(styles.popup, xstyle).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n  return (\n    <BasePopover.Arrow\n      className={(state) =>\n        clsx(\n          stylex.props(styles.arrow).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      {children ?? PopoverArrowIcon}\n    </BasePopover.Arrow>\n  );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n  return (\n    <BasePopover.Viewport\n      className={(state) =>\n        clsx(\n          stylex.props(styles.viewport).className,\n          'lobe-popover-viewport',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["BasePopover"],"sources":["../../src/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n  useState,\n} from 'react';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n  ComponentPropsWithRef<typeof BasePopover.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: PopoverTriggerElementProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const baseClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName =\n            typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: clsx(baseClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n  ComponentProps<typeof BasePopover.Portal>,\n  'container'\n> & {\n  /**\n   * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Root element used by `usePopoverPortalContainer` to create the default container.\n   */\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n  const defaultContainer = usePopoverPortalContainer(root);\n  const resolvedContainer = container ?? defaultContainer;\n\n  if (!resolvedContainer) return null;\n\n  return (\n    <BasePopover.Portal container={resolvedContainer} {...rest}>\n      {children}\n    </BasePopover.Portal>\n  );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n  children,\n  className,\n  collisionPadding,\n  hoverTrigger,\n  placement,\n  align,\n  side,\n  sideOffset,\n  style,\n  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      className={(state) =>\n        clsx(\n          stylex.props(styles.positioner).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </BasePopover.Positioner>\n  );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup> & {\n  xstyle?: stylex.StyleXStyles;\n};\n\nexport const PopoverPopup = ({ className, xstyle, ...rest }: PopoverPopupAtomProps) => {\n  return (\n    <BasePopover.Popup\n      className={(state) =>\n        clsx(\n          stylex.props(styles.popup, xstyle).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n  return (\n    <BasePopover.Arrow\n      className={(state) =>\n        clsx(\n          stylex.props(styles.arrow).className,\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    >\n      {children ?? PopoverArrowIcon}\n    </BasePopover.Arrow>\n  );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n  return (\n    <BasePopover.Viewport\n      className={(state) =>\n        clsx(\n          stylex.props(styles.viewport).className,\n          'lobe-popover-viewport',\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}

package/es/Rate/Rate.mjs

@@ -1,12 +1,12 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
 import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { styles } from "./style.mjs";
 import { createElement, memo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { Star } from "lucide-react";
-import useControlledState from "use-merge-value";
 //#region src/Rate/Rate.tsx
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 const formatValue = (value) => String(Math.round(value * 100) / 100);

package/es/Rate/Rate.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rate.mjs","names":[],"sources":["../../src/Rate/Rate.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Star } from 'lucide-react';\nimport { type KeyboardEvent, memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { RateProps } from './type';\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst formatValue = (value: number) => String(Math.round(value * 100) / 100);\n\nconst Rate = memo<RateProps>(\n  ({\n    allowHalf = false,\n    character,\n    className,\n    color = cssVar.colorWarning,\n    count = 5,\n    defaultValue = 0,\n    disabled = false,\n    gap,\n    onChange,\n    onKeyDown,\n    onPointerLeave,\n    readOnly = false,\n    size = 20,\n    style,\n    value,\n    ...rest\n  }) => {\n    const [mergedValue, setMergedValue] = useControlledState(defaultValue, { onChange, value });\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n    const interactive = !readOnly && !disabled;\n    const step = allowHalf ? 0.5 : 1;\n    const displayValue = clamp(hoverValue ?? mergedValue, 0, count);\n    const label = `${formatValue(clamp(mergedValue, 0, count))} out of ${count}`;\n    const icon = character ?? <Star fill=\"currentColor\" size={size} />;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (!interactive || event.defaultPrevented) return;\n\n      const next = {\n        ArrowDown: mergedValue - step,\n        ArrowLeft: mergedValue - step,\n        ArrowRight: mergedValue + step,\n        ArrowUp: mergedValue + step,\n        End: count,\n        Home: 0,\n      }[event.key];\n      if (next === undefined) return;\n\n      event.preventDefault();\n      setMergedValue(clamp(Math.round(next / step) * step, 0, count));\n    };\n\n    const a11yProps = readOnly\n      ? { 'aria-label': label, 'role': 'img' }\n      : {\n          'aria-disabled': disabled || undefined,\n          'aria-valuemax': count,\n          'aria-valuemin': 0,\n          'aria-valuenow': mergedValue,\n          'aria-valuetext': label,\n          'role': 'slider',\n          'tabIndex': disabled ? -1 : 0,\n        };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHoverValue(null);\n        }}\n        {...a11yProps}\n        {...rest}\n        {...styleProps(styles.root, className, { gap: gap ?? size / 2, ...style })}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fill = clamp(displayValue - index, 0, 1);\n          const targets = allowHalf ? [index + 0.5, index + 1] : [index + 1];\n\n          return (\n            <span\n              aria-hidden=\"true\"\n              data-index={index}\n              key={index}\n              {...styleProps([styles.star, interactive && styles.starInteractive], undefined, {\n                fontSize: size,\n                height: size,\n              })}\n            >\n              <span {...styleProps([styles.icon, styles.empty], undefined, { minWidth: size })}>\n                {icon}\n              </span>\n              <span {...styleProps(styles.fill, undefined, { color, width: `${fill * 100}%` })}>\n                <span {...styleProps(styles.icon, undefined, { minWidth: size })}>{icon}</span>\n              </span>\n              {interactive &&\n                targets.map((target) => (\n                  <span\n                    {...stylex.props(styles.half)}\n                    data-half={target % 1 === 0 && allowHalf ? 'end' : 'start'}\n                    data-value={target}\n                    key={target}\n                    style={allowHalf ? undefined : { width: '100%' }}\n                    onClick={() => setMergedValue(target)}\n                    onPointerEnter={() => setHoverValue(target)}\n                  />\n                ))}\n            </span>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nRate.displayName = 'Rate';\n\nexport default Rate;\n"],"mappings":"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"}
+{"version":3,"file":"Rate.mjs","names":[],"sources":["../../src/Rate/Rate.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Star } from 'lucide-react';\nimport { type KeyboardEvent, memo, useState } from 'react';\n\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { RateProps } from './type';\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst formatValue = (value: number) => String(Math.round(value * 100) / 100);\n\nconst Rate = memo<RateProps>(\n  ({\n    allowHalf = false,\n    character,\n    className,\n    color = cssVar.colorWarning,\n    count = 5,\n    defaultValue = 0,\n    disabled = false,\n    gap,\n    onChange,\n    onKeyDown,\n    onPointerLeave,\n    readOnly = false,\n    size = 20,\n    style,\n    value,\n    ...rest\n  }) => {\n    const [mergedValue, setMergedValue] = useControlledState(defaultValue, { onChange, value });\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n    const interactive = !readOnly && !disabled;\n    const step = allowHalf ? 0.5 : 1;\n    const displayValue = clamp(hoverValue ?? mergedValue, 0, count);\n    const label = `${formatValue(clamp(mergedValue, 0, count))} out of ${count}`;\n    const icon = character ?? <Star fill=\"currentColor\" size={size} />;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (!interactive || event.defaultPrevented) return;\n\n      const next = {\n        ArrowDown: mergedValue - step,\n        ArrowLeft: mergedValue - step,\n        ArrowRight: mergedValue + step,\n        ArrowUp: mergedValue + step,\n        End: count,\n        Home: 0,\n      }[event.key];\n      if (next === undefined) return;\n\n      event.preventDefault();\n      setMergedValue(clamp(Math.round(next / step) * step, 0, count));\n    };\n\n    const a11yProps = readOnly\n      ? { 'aria-label': label, 'role': 'img' }\n      : {\n          'aria-disabled': disabled || undefined,\n          'aria-valuemax': count,\n          'aria-valuemin': 0,\n          'aria-valuenow': mergedValue,\n          'aria-valuetext': label,\n          'role': 'slider',\n          'tabIndex': disabled ? -1 : 0,\n        };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHoverValue(null);\n        }}\n        {...a11yProps}\n        {...rest}\n        {...styleProps(styles.root, className, { gap: gap ?? size / 2, ...style })}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fill = clamp(displayValue - index, 0, 1);\n          const targets = allowHalf ? [index + 0.5, index + 1] : [index + 1];\n\n          return (\n            <span\n              aria-hidden=\"true\"\n              data-index={index}\n              key={index}\n              {...styleProps([styles.star, interactive && styles.starInteractive], undefined, {\n                fontSize: size,\n                height: size,\n              })}\n            >\n              <span {...styleProps([styles.icon, styles.empty], undefined, { minWidth: size })}>\n                {icon}\n              </span>\n              <span {...styleProps(styles.fill, undefined, { color, width: `${fill * 100}%` })}>\n                <span {...styleProps(styles.icon, undefined, { minWidth: size })}>{icon}</span>\n              </span>\n              {interactive &&\n                targets.map((target) => (\n                  <span\n                    {...stylex.props(styles.half)}\n                    data-half={target % 1 === 0 && allowHalf ? 'end' : 'start'}\n                    data-value={target}\n                    key={target}\n                    style={allowHalf ? undefined : { width: '100%' }}\n                    onClick={() => setMergedValue(target)}\n                    onPointerEnter={() => setHoverValue(target)}\n                  />\n                ))}\n            </span>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nRate.displayName = 'Rate';\n\nexport default Rate;\n"],"mappings":"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"}

package/es/ScrollShadow/ScrollShadow.mjs

@@ -1,12 +1,12 @@
 "use client";
 import { styleProps } from "../styles/stylex/props.mjs";
+import { mergeRefs } from "../utils/mergeRefs.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import { useEventCallback } from "../hooks/useEventCallback.mjs";
 import { styles } from "./style.mjs";
 import { useScrollOverflow } from "./useScrollOverflow.mjs";
 import { useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { mergeRefs } from "react-merge-refs";
 //#region src/ScrollShadow/ScrollShadow.tsx
 const scrollPositionStyles = {
 	"bottom": styles.bottom,

package/es/ScrollShadow/ScrollShadow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst scrollPositionStyles = {\n  'bottom': styles.bottom,\n  'left': styles.left,\n  'left-right': styles.leftRight,\n  'none': null,\n  'right': styles.right,\n  'top': styles.top,\n  'top-bottom': styles.topBottom,\n};\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 16,\n  offset = 8,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--scroll-shadow-size': `${size}%`,\n    }),\n    [size],\n  );\n  const domRef = useRef<HTMLDivElement>(null);\n\n  const onVisibilityChangeEvent = useEventCallback<\n    NonNullable<ScrollShadowProps['onVisibilityChange']>\n  >((visibility) => {\n    onVisibilityChange?.(visibility);\n  });\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange: onVisibilityChangeEvent,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  return (\n    <Flexbox\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      className={\n        styleProps(\n          [\n            styles.root,\n            styles[orientation],\n            hideScrollBar && styles.hideScrollBar,\n            scrollPositionStyles[scrollPosition],\n          ],\n          className,\n        ).className\n      }\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,uBAAuB;CAC3B,UAAU,OAAO;CACjB,QAAQ,OAAO;CACf,cAAc,OAAO;CACrB,QAAQ;CACR,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,cAAc,OAAO;AACvB;AAEA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,GAClC,IACA,CAAC,IAAI,CACP;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,0BAA0B,kBAE7B,eAAe;EAChB,qBAAqB,UAAU;CACjC,CAAC;CAED,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,QAAQ;CACvB,CAAC;CAGD,MAAM,mBAAmB,cAAc;EACrC,IAAI,eAAe,UACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,IAAI,eAAe,SACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,OAAO;CACT,GAAG,CAAC,YAAY,WAAW,CAAC;CAG5B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,YACtB;EAEA,IAAI,gBAAgB,YAAY;GAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAC3C,WAAW,4BAA4B;QAClC,IAAI,iBAAiB,KAC1B,WAAW,qBAAqB;QAC3B,IAAI,iBAAiB,QAC1B,WAAW,wBAAwB;EAEvC,OACE,IAAI,iBAAiB,QAAQ,iBAAiB,OAC5C,WAAW,4BAA4B;OAClC,IAAI,iBAAiB,MAC1B,WAAW,sBAAsB;OAC5B,IAAI,iBAAiB,OAC1B,WAAW,uBAAuB;EAItC,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAGlC,MAAM,iBAAiB,cAAc;EACnC,IAAI,gBAAgB,YAAY;GAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAAQ,OAAO;GAC5D,IAAI,iBAAiB,KAAK,OAAO;GACjC,IAAI,iBAAiB,QAAQ,OAAO;EACtC,OAAO;GACL,IAAI,iBAAiB,QAAQ,iBAAiB,OAAO,OAAO;GAC5D,IAAI,iBAAiB,MAAM,OAAO;GAClC,IAAI,iBAAiB,OAAO,OAAO;EACrC;EACA,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAElC,OACE,oBAACA,mBAAD;EACE,KAAK,UAA0B,CAAC,QAAQ,GAAG,CAAC;EAC5C,WACE,WACE;GACE,OAAO;GACP,OAAO;GACP,iBAAiB,OAAO;GACxB,qBAAqB;EACvB,GACA,SACF,CAAC,CAAC;EAEJ,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EACJ,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,aAAa,cAAc"}
+{"version":3,"file":"ScrollShadow.mjs","names":["Flexbox"],"sources":["../../src/ScrollShadow/ScrollShadow.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useMemo, useRef } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { styleProps } from '@/styles/stylex/props';\nimport { mergeRefs } from '@/utils/mergeRefs';\n\nimport { styles } from './style';\nimport type { ScrollShadowProps } from './type';\nimport { useScrollOverflow } from './useScrollOverflow';\n\nconst scrollPositionStyles = {\n  'bottom': styles.bottom,\n  'left': styles.left,\n  'left-right': styles.leftRight,\n  'none': null,\n  'right': styles.right,\n  'top': styles.top,\n  'top-bottom': styles.topBottom,\n};\n\nconst ScrollShadow: FC<ScrollShadowProps> = ({\n  className,\n  children,\n  orientation = 'vertical',\n  hideScrollBar = false,\n  size = 16,\n  offset = 8,\n  visibility = 'auto',\n  isEnabled = true,\n  onVisibilityChange,\n  style,\n  ref,\n  ...rest\n}) => {\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--scroll-shadow-size': `${size}%`,\n    }),\n    [size],\n  );\n  const domRef = useRef<HTMLDivElement>(null);\n\n  const onVisibilityChangeEvent = useEventCallback<\n    NonNullable<ScrollShadowProps['onVisibilityChange']>\n  >((visibility) => {\n    onVisibilityChange?.(visibility);\n  });\n  // 使用滚动检测钩子\n  const scrollState = useScrollOverflow({\n    domRef,\n    isEnabled: isEnabled && visibility === 'auto',\n    offset,\n    onVisibilityChange: onVisibilityChangeEvent,\n    orientation,\n    updateDeps: [children],\n  });\n\n  // 决定最终的滚动状态\n  const finalScrollState = useMemo(() => {\n    if (visibility === 'always') {\n      return {\n        bottom: true,\n        left: true,\n        right: true,\n        top: true,\n      };\n    }\n\n    if (visibility === 'never') {\n      return {\n        bottom: false,\n        left: false,\n        right: false,\n        top: false,\n      };\n    }\n\n    return scrollState;\n  }, [visibility, scrollState]);\n\n  // 计算数据属性\n  const dataAttributes = useMemo(() => {\n    const attributes: Record<string, boolean | string> = {\n      'data-orientation': orientation,\n    };\n\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) {\n        attributes['data-top-bottom-scroll'] = true;\n      } else if (finalScrollState.top) {\n        attributes['data-top-scroll'] = true;\n      } else if (finalScrollState.bottom) {\n        attributes['data-bottom-scroll'] = true;\n      }\n    } else {\n      if (finalScrollState.left && finalScrollState.right) {\n        attributes['data-left-right-scroll'] = true;\n      } else if (finalScrollState.left) {\n        attributes['data-left-scroll'] = true;\n      } else if (finalScrollState.right) {\n        attributes['data-right-scroll'] = true;\n      }\n    }\n\n    return attributes;\n  }, [orientation, finalScrollState]);\n\n  // 计算滚动位置变体\n  const scrollPosition = useMemo(() => {\n    if (orientation === 'vertical') {\n      if (finalScrollState.top && finalScrollState.bottom) return 'top-bottom';\n      if (finalScrollState.top) return 'top';\n      if (finalScrollState.bottom) return 'bottom';\n    } else {\n      if (finalScrollState.left && finalScrollState.right) return 'left-right';\n      if (finalScrollState.left) return 'left';\n      if (finalScrollState.right) return 'right';\n    }\n    return 'none';\n  }, [orientation, finalScrollState]);\n\n  return (\n    <Flexbox\n      ref={mergeRefs<HTMLDivElement>([domRef, ref])}\n      className={\n        styleProps(\n          [\n            styles.root,\n            styles[orientation],\n            hideScrollBar && styles.hideScrollBar,\n            scrollPositionStyles[scrollPosition],\n          ],\n          className,\n        ).className\n      }\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...dataAttributes}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nScrollShadow.displayName = 'ScrollShadow';\n\nexport default ScrollShadow;\n"],"mappings":";;;;;;;;;;AAcA,MAAM,uBAAuB;CAC3B,UAAU,OAAO;CACjB,QAAQ,OAAO;CACf,cAAc,OAAO;CACrB,QAAQ;CACR,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,cAAc,OAAO;AACvB;AAEA,MAAM,gBAAuC,EAC3C,WACA,UACA,cAAc,YACd,gBAAgB,OAChB,OAAO,IACP,SAAS,GACT,aAAa,QACb,YAAY,MACZ,oBACA,OACA,KACA,GAAG,WACC;CAEJ,MAAM,eAAe,eACZ,EACL,wBAAwB,GAAG,KAAK,GAClC,IACA,CAAC,IAAI,CACP;CACA,MAAM,SAAS,OAAuB,IAAI;CAE1C,MAAM,0BAA0B,kBAE7B,eAAe;EAChB,qBAAqB,UAAU;CACjC,CAAC;CAED,MAAM,cAAc,kBAAkB;EACpC;EACA,WAAW,aAAa,eAAe;EACvC;EACA,oBAAoB;EACpB;EACA,YAAY,CAAC,QAAQ;CACvB,CAAC;CAGD,MAAM,mBAAmB,cAAc;EACrC,IAAI,eAAe,UACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,IAAI,eAAe,SACjB,OAAO;GACL,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;EACP;EAGF,OAAO;CACT,GAAG,CAAC,YAAY,WAAW,CAAC;CAG5B,MAAM,iBAAiB,cAAc;EACnC,MAAM,aAA+C,EACnD,oBAAoB,YACtB;EAEA,IAAI,gBAAgB,YAAY;GAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAC3C,WAAW,4BAA4B;QAClC,IAAI,iBAAiB,KAC1B,WAAW,qBAAqB;QAC3B,IAAI,iBAAiB,QAC1B,WAAW,wBAAwB;EAEvC,OACE,IAAI,iBAAiB,QAAQ,iBAAiB,OAC5C,WAAW,4BAA4B;OAClC,IAAI,iBAAiB,MAC1B,WAAW,sBAAsB;OAC5B,IAAI,iBAAiB,OAC1B,WAAW,uBAAuB;EAItC,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAGlC,MAAM,iBAAiB,cAAc;EACnC,IAAI,gBAAgB,YAAY;GAC9B,IAAI,iBAAiB,OAAO,iBAAiB,QAAQ,OAAO;GAC5D,IAAI,iBAAiB,KAAK,OAAO;GACjC,IAAI,iBAAiB,QAAQ,OAAO;EACtC,OAAO;GACL,IAAI,iBAAiB,QAAQ,iBAAiB,OAAO,OAAO;GAC5D,IAAI,iBAAiB,MAAM,OAAO;GAClC,IAAI,iBAAiB,OAAO,OAAO;EACrC;EACA,OAAO;CACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;CAElC,OACE,oBAACA,mBAAD;EACE,KAAK,UAA0B,CAAC,QAAQ,GAAG,CAAC;EAC5C,WACE,WACE;GACE,OAAO;GACP,OAAO;GACP,iBAAiB,OAAO;GACxB,qBAAqB;EACvB,GACA,SACF,CAAC,CAAC;EAEJ,OAAO;GACL,GAAG;GACH,GAAG;EACL;EACA,GAAI;EACJ,GAAI;EAEH;CACM,CAAA;AAEb;AAEA,aAAa,cAAc"}