@lobehub/ui 6.0.0-beta.4 → 6.0.0-beta.6

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/Input/style.mjs

@@ -164,11 +164,11 @@ const styles = {
 		kmkexE: "lbavbupb",
 		kGNEyG: "lb6s0dn4",
 		kB7OPa: "lb9f619",
-		kMwMTN: "lb66ogz0 lb1pedyqg",
-		kkrTdU: "lb1ed109x lbzoe6q",
+		kMwMTN: "lb66ogz0 lb1k6ehaq",
+		kkrTdU: "lb1ed109x lb1btkyy5",
 		k1xSpc: "lb3nfvp2",
 		kGuDYH: "lbif65rj",
-		kSiTet: "lbb5d7sw",
+		kSiTet: "lb1gf9ui9",
 		kzqmXN: "lbh8yej3",
 		$$css: true
 	},

package/es/Input/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Input/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { inputMarker } from './marker.stylex';\nimport type { InputSize, InputVariant } from './type';\n\nconst disabled = ':is([data-disabled], :has(:disabled))';\nconst hover = ':hover:not(:focus-within, [data-disabled])';\nconst invalid = \":has([data-invalid], [aria-invalid='true'])\";\nconst invalidIdle =\n  \":has([data-invalid], [aria-invalid='true']):is(:focus-within, :not(:hover), [data-disabled])\";\nconst invalidFocus = \":has([data-invalid], [aria-invalid='true']):focus-within\";\nconst validFocus = \":focus-within:not(:has([data-invalid], [aria-invalid='true']))\";\n\nconst lobeShadow = `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`;\nconst primaryRing = `0 0 0 2px ${cssVar.colorPrimaryBg}`;\nconst errorRing = `0 0 0 2px ${cssVar.colorErrorBg}`;\n\nexport const styles = stylex.create({\n  borderless: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  clear: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'none',\n    borderWidth: 0,\n    flex: 'none',\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorTextQuaternary,\n      ':hover': cssVar.colorTextTertiary,\n    },\n    color: cssVar.colorBgContainer,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    visibility: {\n      default: 'hidden',\n      [stylex.when.ancestor(':focus-within', inputMarker)]: 'visible',\n      [stylex.when.ancestor(':hover', inputMarker)]: 'visible',\n    },\n    height: 16,\n    width: 16,\n  },\n  count: {\n    borderRadius: 999,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillTertiary,\n      ':is([data-over])': cssVar.colorError,\n    },\n    color: {\n      'default': cssVar.colorTextSecondary,\n      ':is([data-over])': cssVar.colorWhite,\n    },\n    display: 'inline-flex',\n    fontSize: 11,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    insetBlockEnd: 6,\n    insetInlineEnd: 8,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 20,\n  },\n  filled: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: {\n      default: cssVar.colorFillTertiary,\n      [hover]: cssVar.colorFillSecondary,\n    },\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  input: {\n    'font': 'inherit',\n    'padding': 0,\n    'borderColor': 'currentcolor',\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'flex': '1',\n    'outline': 'none',\n    'appearance': 'none',\n    'backgroundColor': 'transparent',\n    'color': 'inherit',\n    'minWidth': 0,\n    '::placeholder': {\n      color: cssVar.colorTextPlaceholder,\n    },\n  },\n  numberControl: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: 4,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}, background 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      ':hover:not(:disabled)': cssVar.colorFillSecondary,\n    },\n    color: {\n      'default': cssVar.colorTextTertiary,\n      ':hover:not(:disabled)': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':disabled': 'not-allowed' },\n    display: 'flex',\n    justifyContent: 'center',\n    opacity: { 'default': null, ':disabled': 0.3 },\n    height: 13,\n    width: 20,\n  },\n  numberControlLarge: {\n    height: 15,\n    width: 22,\n  },\n  numberControls: {\n    flex: 'none',\n    display: 'flex',\n    flexDirection: 'column',\n    marginInlineEnd: -6,\n  },\n  numberControlSmall: {\n    borderRadius: 3,\n    height: 10,\n    width: 16,\n  },\n  numberControlsSmall: {\n    marginInlineEnd: -4,\n  },\n  numberInput: {\n    fontVariantNumeric: 'tabular-nums',\n  },\n  otpCell: {\n    flex: 'none',\n    paddingInline: 0,\n    textAlign: 'center',\n    width: 32,\n  },\n  otpRoot: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  outlined: {\n    borderColor: {\n      default: cssVar.colorBorderSecondary,\n      [hover]: cssVar.colorBorder,\n      [invalidIdle]: cssVar.colorError,\n      [validFocus]: cssVar.colorPrimary,\n    },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: { default: null, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  passwordToggle: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    gap: 8,\n    paddingInline: 12,\n    transition: `background 150ms ${cssVar.motionEaseOut}, border-color 150ms ${cssVar.motionEaseOut}, box-shadow 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    color: { default: cssVar.colorText, [disabled]: cssVar.colorTextQuaternary },\n    cursor: { default: 'text', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontSize: 14,\n    opacity: { default: null, [disabled]: 0.66 },\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing },\n  },\n  shadowOutlined: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  sizeLarge: {\n    borderRadius: cssVar.borderRadiusLG,\n    fontSize: 16,\n    minHeight: 40,\n  },\n  sizeMiddle: {\n    minHeight: 32,\n  },\n  sizeSmall: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingInline: 8,\n    fontSize: 12,\n    minHeight: 24,\n  },\n  slot: {\n    flex: 'none',\n    alignItems: 'center',\n    color: cssVar.colorTextTertiary,\n    display: 'inline-flex',\n  },\n  textarea: {\n    paddingBlock: 8,\n    position: 'relative',\n    height: 'auto',\n  },\n  textareaAutoSize: {\n    fieldSizing: 'content',\n  },\n  textareaClear: {\n    insetBlockStart: 10,\n    insetInlineEnd: 10,\n    position: 'absolute',\n  },\n  textareaControl: {\n    lineHeight: 1.5,\n    resize: 'none',\n    maxHeight: 'var(--textarea-max-height, none)',\n    minHeight: 'calc(1.5em * var(--textarea-min-rows, 2))',\n  },\n  textareaResize: {\n    resize: 'vertical',\n  },\n  textareaWithCount: {\n    paddingBlockEnd: 30,\n  },\n});\n\nconst sizeStyles = {\n  large: styles.sizeLarge,\n  middle: styles.sizeMiddle,\n  small: styles.sizeSmall,\n};\n\nconst variantStyles = {\n  borderless: styles.borderless,\n  filled: styles.filled,\n  outlined: styles.outlined,\n};\n\ninterface RootOptions {\n  shadow?: boolean | null;\n  size?: InputSize | null;\n  variant?: InputVariant | null;\n}\n\nexport const inputRootStyles = ({ shadow, size, variant }: RootOptions = {}) => {\n  const mergedVariant = variant || 'outlined';\n  return [\n    inputMarker,\n    styles.root,\n    sizeStyles[size || 'middle'],\n    variantStyles[mergedVariant],\n    shadow && (mergedVariant === 'outlined' ? styles.shadowOutlined : styles.shadow),\n  ];\n};\n\nexport const rootVariants = (options?: RootOptions) =>\n  stylex.props(inputRootStyles(options)).className ?? '';\n\nconst className = (style: Parameters<typeof styleProps>[0]) => styleProps(style).className;\n\nexport const inputClassNames = {\n  borderless: className(styles.borderless),\n  clear: className(styles.clear),\n  count: className(styles.count),\n  filled: className(styles.filled),\n  input: className(styles.input),\n  invalid: '',\n  numberControl: className(styles.numberControl),\n  numberControlLarge: className(styles.numberControlLarge),\n  numberControls: className(styles.numberControls),\n  numberControlSmall: className(styles.numberControlSmall),\n  numberControlsSmall: className(styles.numberControlsSmall),\n  numberInput: className(styles.numberInput),\n  otpCell: className(styles.otpCell),\n  otpRoot: className(styles.otpRoot),\n  outlined: className(styles.outlined),\n  passwordToggle: className(styles.passwordToggle),\n  root: className([inputMarker, styles.root]),\n  shadow: className(styles.shadow),\n  sizeLarge: className(styles.sizeLarge),\n  sizeMiddle: className(styles.sizeMiddle),\n  sizeSmall: className(styles.sizeSmall),\n  slot: className(styles.slot),\n  textarea: className(styles.textarea),\n  textareaAutoSize: className(styles.textareaAutoSize),\n  textareaClear: className(styles.textareaClear),\n  textareaResize: className(styles.textareaResize),\n  textareaWithCount: className(styles.textareaWithCount),\n};\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Input/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { inputMarker } from './marker.stylex';\nimport type { InputSize, InputVariant } from './type';\n\nexport const disabledControl = 'input:disabled, textarea:disabled';\n\nconst disabled = `:is([data-disabled], :has(${disabledControl}))`;\nconst hover = ':hover:not(:focus-within, [data-disabled])';\nconst invalid = \":has([data-invalid], [aria-invalid='true'])\";\nconst invalidIdle =\n  \":has([data-invalid], [aria-invalid='true']):is(:focus-within, :not(:hover), [data-disabled])\";\nconst invalidFocus = \":has([data-invalid], [aria-invalid='true']):focus-within\";\nconst validFocus = \":focus-within:not(:has([data-invalid], [aria-invalid='true']))\";\n\nconst lobeShadow = `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`;\nconst primaryRing = `0 0 0 2px ${cssVar.colorPrimaryBg}`;\nconst errorRing = `0 0 0 2px ${cssVar.colorErrorBg}`;\n\nexport const styles = stylex.create({\n  borderless: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  clear: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: '50%',\n    borderStyle: 'none',\n    borderWidth: 0,\n    flex: 'none',\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorTextQuaternary,\n      ':hover': cssVar.colorTextTertiary,\n    },\n    color: cssVar.colorBgContainer,\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    visibility: {\n      default: 'hidden',\n      [stylex.when.ancestor(':focus-within', inputMarker)]: 'visible',\n      [stylex.when.ancestor(':hover', inputMarker)]: 'visible',\n    },\n    height: 16,\n    width: 16,\n  },\n  count: {\n    borderRadius: 999,\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': cssVar.colorFillTertiary,\n      ':is([data-over])': cssVar.colorError,\n    },\n    color: {\n      'default': cssVar.colorTextSecondary,\n      ':is([data-over])': cssVar.colorWhite,\n    },\n    display: 'inline-flex',\n    fontSize: 11,\n    fontVariantNumeric: 'tabular-nums',\n    fontWeight: 600,\n    insetBlockEnd: 6,\n    insetInlineEnd: 8,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 20,\n  },\n  filled: {\n    borderColor: { default: 'transparent', [invalid]: cssVar.colorError },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: {\n      default: cssVar.colorFillTertiary,\n      [hover]: cssVar.colorFillSecondary,\n    },\n    boxShadow: { default: null, [invalidFocus]: errorRing },\n  },\n  input: {\n    'font': 'inherit',\n    'padding': 0,\n    'borderColor': 'currentcolor',\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'flex': '1',\n    'outline': 'none',\n    'appearance': 'none',\n    'backgroundColor': 'transparent',\n    'color': 'inherit',\n    'minWidth': 0,\n    '::placeholder': {\n      color: cssVar.colorTextPlaceholder,\n    },\n  },\n  numberControl: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: 4,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}, background 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      ':hover:not(:disabled)': cssVar.colorFillSecondary,\n    },\n    color: {\n      'default': cssVar.colorTextTertiary,\n      ':hover:not(:disabled)': cssVar.colorText,\n    },\n    cursor: { 'default': 'pointer', ':disabled': 'not-allowed' },\n    display: 'flex',\n    justifyContent: 'center',\n    opacity: { 'default': null, ':disabled': 0.3 },\n    height: 13,\n    width: 20,\n  },\n  numberControlLarge: {\n    height: 15,\n    width: 22,\n  },\n  numberControls: {\n    flex: 'none',\n    display: 'flex',\n    flexDirection: 'column',\n    marginInlineEnd: -6,\n  },\n  numberControlSmall: {\n    borderRadius: 3,\n    height: 10,\n    width: 16,\n  },\n  numberControlsSmall: {\n    marginInlineEnd: -4,\n  },\n  numberInput: {\n    fontVariantNumeric: 'tabular-nums',\n  },\n  otpCell: {\n    flex: 'none',\n    paddingInline: 0,\n    textAlign: 'center',\n    width: 32,\n  },\n  otpRoot: {\n    gap: 8,\n    alignItems: 'center',\n    display: 'inline-flex',\n  },\n  outlined: {\n    borderColor: {\n      default: cssVar.colorBorderSecondary,\n      [hover]: cssVar.colorBorder,\n      [invalidIdle]: cssVar.colorError,\n      [validFocus]: cssVar.colorPrimary,\n    },\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: { default: null, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  passwordToggle: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    outline: 'none',\n    transition: `color 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    color: { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    gap: 8,\n    paddingInline: 12,\n    transition: `background 150ms ${cssVar.motionEaseOut}, border-color 150ms ${cssVar.motionEaseOut}, box-shadow 150ms ${cssVar.motionEaseOut}`,\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    color: { default: cssVar.colorText, [disabled]: cssVar.colorTextQuaternary },\n    cursor: { default: 'text', [disabled]: 'not-allowed' },\n    display: 'inline-flex',\n    fontSize: 14,\n    opacity: { default: null, [disabled]: 0.66 },\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing },\n  },\n  shadowOutlined: {\n    boxShadow: { default: lobeShadow, [invalidFocus]: errorRing, [validFocus]: primaryRing },\n  },\n  sizeLarge: {\n    borderRadius: cssVar.borderRadiusLG,\n    fontSize: 16,\n    minHeight: 40,\n  },\n  sizeMiddle: {\n    minHeight: 32,\n  },\n  sizeSmall: {\n    borderRadius: cssVar.borderRadiusSM,\n    paddingInline: 8,\n    fontSize: 12,\n    minHeight: 24,\n  },\n  slot: {\n    flex: 'none',\n    alignItems: 'center',\n    color: cssVar.colorTextTertiary,\n    display: 'inline-flex',\n  },\n  textarea: {\n    paddingBlock: 8,\n    position: 'relative',\n    height: 'auto',\n  },\n  textareaAutoSize: {\n    fieldSizing: 'content',\n  },\n  textareaClear: {\n    insetBlockStart: 10,\n    insetInlineEnd: 10,\n    position: 'absolute',\n  },\n  textareaControl: {\n    lineHeight: 1.5,\n    resize: 'none',\n    maxHeight: 'var(--textarea-max-height, none)',\n    minHeight: 'calc(1.5em * var(--textarea-min-rows, 2))',\n  },\n  textareaResize: {\n    resize: 'vertical',\n  },\n  textareaWithCount: {\n    paddingBlockEnd: 30,\n  },\n});\n\nconst sizeStyles = {\n  large: styles.sizeLarge,\n  middle: styles.sizeMiddle,\n  small: styles.sizeSmall,\n};\n\nconst variantStyles = {\n  borderless: styles.borderless,\n  filled: styles.filled,\n  outlined: styles.outlined,\n};\n\ninterface RootOptions {\n  shadow?: boolean | null;\n  size?: InputSize | null;\n  variant?: InputVariant | null;\n}\n\nexport const inputRootStyles = ({ shadow, size, variant }: RootOptions = {}) => {\n  const mergedVariant = variant || 'outlined';\n  return [\n    inputMarker,\n    styles.root,\n    sizeStyles[size || 'middle'],\n    variantStyles[mergedVariant],\n    shadow && (mergedVariant === 'outlined' ? styles.shadowOutlined : styles.shadow),\n  ];\n};\n\nexport const rootVariants = (options?: RootOptions) =>\n  stylex.props(inputRootStyles(options)).className ?? '';\n\nconst className = (style: Parameters<typeof styleProps>[0]) => styleProps(style).className;\n\nexport const inputClassNames = {\n  borderless: className(styles.borderless),\n  clear: className(styles.clear),\n  count: className(styles.count),\n  filled: className(styles.filled),\n  input: className(styles.input),\n  invalid: '',\n  numberControl: className(styles.numberControl),\n  numberControlLarge: className(styles.numberControlLarge),\n  numberControls: className(styles.numberControls),\n  numberControlSmall: className(styles.numberControlSmall),\n  numberControlsSmall: className(styles.numberControlsSmall),\n  numberInput: className(styles.numberInput),\n  otpCell: className(styles.otpCell),\n  otpRoot: className(styles.otpRoot),\n  outlined: className(styles.outlined),\n  passwordToggle: className(styles.passwordToggle),\n  root: className([inputMarker, styles.root]),\n  shadow: className(styles.shadow),\n  sizeLarge: className(styles.sizeLarge),\n  sizeMiddle: className(styles.sizeMiddle),\n  sizeSmall: className(styles.sizeSmall),\n  slot: className(styles.slot),\n  textarea: className(styles.textarea),\n  textareaAutoSize: className(styles.textareaAutoSize),\n  textareaClear: className(styles.textareaClear),\n  textareaResize: className(styles.textareaResize),\n  textareaWithCount: className(styles.textareaWithCount),\n};\n"],"mappings":"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"}

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":";;;;;;;;;;;;;;;;;AAiBA,MAAa,cAAcA,QAAY;AACvC,MAAa,kBAAkBA,QAAY;AAI3C,MAAa,yBAAyB,EACpC,UACA,WACA,cACA,KAAK,SACL,GAAG,WAC6B;CAChC,MAAM,EACJ,8BACA,yBACE,gBAAgB;EAClB;EACA;CACF,CAAC;CACD,IAAI,eAAe,QAAQ,GACzB,OAAO,oBAACA,QAAY,SAAb;EAAqB,GAAI;EAAM,cAAc;EAAsB,SAAS,OAAO,UAAU;GAGlG,MAAM,uBAAuB;IAC3B,IAAI,8BAA8B,OAAO;IAEzC,MAAM,EACJ,MACA,KAAK,YACL,GAAG,cACD;IACJ,OAAO;GACT,EAAA,CAAG;GACH,MAAM,cAAc,WAAY,SAAiB,OAAO,aAAa;GACrE,MAAM,gBAAgB,OAAQ,YAAoB,cAAc,aAAc,YAAoB,UAAU,KAAK,IAAK,YAAoB;GAC1I,MAAM,iBAAiB,OAAQ,cAAsB,aAAc,UAAkB,KAAK,IAAI;GAC9F,OAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAW,KAAK,eAAe,cAAc;IAC7C,KAAK,UAAU;KAAE,SAAiB;KAAM,MAAc;KAAK;IAAO,CAAC;GACrE,CAAC;EACH;CAAI,CAAA;CAEN,OAAO,oBAACA,QAAY,SAAb;EAAqB,GAAI;EAAiB;EAAW,cAAc;EAAsB,KAAK;EAChG;CACkB,CAAA;AACzB;AACA,sBAAsB,cAAc;AAWpC,MAAa,iBAAiB,EAC5B,WACA,MACA,UACA,GAAG,WACyB;CAC5B,MAAM,mBAAmB,0BAA0B,IAAI;CACvD,MAAM,oBAAoB,aAAa;CACvC,IAAI,CAAC,mBAAmB,OAAO;CAC/B,OAAO,oBAACA,QAAY,QAAb;EAAoB,WAAW;EAAmB,GAAI;EACxD;CACiB,CAAA;AACxB;AACA,cAAc,cAAc;AAK5B,MAAa,qBAAqB,EAChC,UACA,WACA,kBACA,cACA,WACA,OACA,MACA,YACA,OACA,GAAG,WAC6B;CAChC,MAAM,kBAAkB,YAAY,aAAa,aAAa,KAAA;CAC9D,MAAM,CAAC,gBAAgB,qBAAqB,SAAgC,IAAI;CAChF,MAAM,iBAAiB,OAAO,UAAU,cAAc,OAAO,UAAU,QAAQ,OAAO,MAAM,WAAW,WAAW,MAAM,SAAS,KAAA;CACjI,MAAM,EACJ,QACA,KAAK,SACH,eAA+B,YAAY,cAAc;CAC7D,MAAM,cAAc,aAAa,CAAC,mBAAmB,IAAI,CAAC;CAC1D,MAAM,gBAAgB,OAAO,UAAU,cAAc,WAAgB;EACnE;EACA,GAAG,MAAM,KAAK;CAChB,KAAK;EACH;EACA,GAAG;CACL;CACA,OAAO,oBAACA,QAAY,YAAb;EAAwB,OAAO,SAAS,iBAAiB,SAAS;EAAU,kBAAkB,oBAAoB,4BAA4B;EAAG,sBAAoB,gBAAgB,KAAA;EAAW,kBAAgB;EAAW,KAAK;EAAoB,MAAM,QAAQ,iBAAiB,QAAQ;EAAU,YAAY,cAAc;EAAG,OAAO;EAAe,YAAW,UAAS,KAAK,OAAO,MAAM,OAAO,UAAU,CAAC,CAAC,WAAW,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;EAAG,GAAI;EACpe,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAiB;EAAgC,CAAA;CACzD,CAAA;AAC5B;AACA,kBAAkB,cAAc;AAIhC,MAAa,gBAAgB,EAC3B,WACA,QACA,GAAG,WACwB;CAC3B,OAAO,oBAACA,QAAY,OAAb;EAAmB,YAAW,UAAS,KAAK,OAAO,MAAM,OAAO,OAAO,MAAM,CAAC,CAAC,WAAW,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/K;AACA,aAAa,cAAc;AAE3B,MAAa,gBAAgB,EAC3B,WACA,UACA,GAAG,WACwB;CAC3B,OAAO,oBAACA,QAAY,OAAb;EAAmB,YAAW,UAAS,KAAK,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC,WAAW,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;EAAG,GAAI;EACzJ,UAAA,YAAY;CACI,CAAA;AACvB;AACA,aAAa,cAAc;AAE3B,MAAa,mBAAmB,EAC9B,WACA,GAAG,WAC2B;CAC9B,OAAO,oBAACA,QAAY,UAAb;EAAsB,YAAW,UAAS,KAAK,OAAO,MAAM,OAAO,QAAQ,CAAC,CAAC,WAAW,yBAAyB,OAAO,cAAc,aAAa,UAAU,KAAK,IAAI,SAAS;EAAG,GAAI;CAAO,CAAA;AACtM;AACA,gBAAgB,cAAc"}
+{"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"}

package/es/SearchBar/SearchBar.mjs

@@ -2,6 +2,8 @@
 import { styleProps } from "../styles/stylex/props.mjs";
 import Icon from "../Icon/Icon.mjs";
 import Hotkey from "../Hotkey/Hotkey.mjs";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import Input_default from "../Input/Input.mjs";
 import Spotlight from "../awesome/Spotlight/Spotlight.mjs";
 import { styles } from "./style.mjs";
@@ -9,7 +11,6 @@ import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { LucideLoader2, Search } from "lucide-react";
-import useControlledState from "use-merge-value";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/SearchBar/SearchBar.tsx
 const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInputChange, placeholder, enableShortKey, shortKey = "mod+k", onSearch, loading, style, onChange, onBlur, onPressEnter, onFocus, styles: { input: inputStyle, shortKey: shortKeyStyle } = {}, classNames: { input: inputClassName, shortKey: shortKeyClassName } = {}, ...rest }) => {
@@ -21,6 +22,30 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 	const [showTag, setShowTag] = useState(true);
 	const inputReference = useRef(null);
 	const hotkey = useMemo(() => shortKey.includes("+") ? shortKey : `mod+${shortKey}`, [shortKey]);
+	const prefix = useMemo(() => /* @__PURE__ */ jsx(Icon, {
+		...stylex.props(styles.icon),
+		icon: loading ? LucideLoader2 : Search,
+		size: "small",
+		spin: loading,
+		style: { marginRight: 4 }
+	}), [loading]);
+	const handleBlur = useEventCallback((e) => {
+		onBlur?.(e);
+		setInputValue(e.target.value);
+		setShowTag(true);
+	});
+	const handleChange = useEventCallback((e) => {
+		setInputValue(e.target.value);
+		onChange?.(e);
+	});
+	const handleFocus = useEventCallback((e) => {
+		onFocus?.(e);
+		setShowTag(false);
+	});
+	const handlePressEnter = useEventCallback((e) => {
+		onPressEnter?.(e);
+		onSearch?.(inputValue);
+	});
 	useHotkeys(hotkey, () => {
 		if (!enableShortKey) return;
 		inputReference.current?.focus();
@@ -37,33 +62,14 @@ const SearchBar = memo(({ defaultValue = "", spotlight, className, value, onInpu
 				allowClear: true,
 				className: inputClassName,
 				placeholder: placeholder ?? "Type keywords...",
+				prefix,
 				ref: inputReference,
 				style: inputStyle,
 				value: inputValue,
-				prefix: /* @__PURE__ */ jsx(Icon, {
-					...stylex.props(styles.icon),
-					icon: loading ? LucideLoader2 : Search,
-					size: "small",
-					spin: loading,
-					style: { marginRight: 4 }
-				}),
-				onBlur: (e) => {
-					onBlur?.(e);
-					setInputValue(e.target.value);
-					setShowTag(true);
-				},
-				onChange: (e) => {
-					setInputValue(e.target.value);
-					onChange?.(e);
-				},
-				onFocus: (e) => {
-					onFocus?.(e);
-					setShowTag(false);
-				},
-				onPressEnter: (e) => {
-					onPressEnter?.(e);
-					onSearch?.(inputValue);
-				},
+				onBlur: handleBlur,
+				onChange: handleChange,
+				onFocus: handleFocus,
+				onPressEnter: handlePressEnter,
 				...rest
 			}),
 			enableShortKey && showTag && !inputValue && /* @__PURE__ */ jsx(Hotkey, {