@lobehub/ui 6.0.0-beta.9 → 6.0.1

package/README.md

@@ -2,9 +2,9 @@
 
 <div align="center">
 
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
-<img height="120" src="https://github.com/user-attachments/assets/bb48d7f1-460a-4dae-a632-66d1a7ff8f70">
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/lollipop.webp">
+<img height="120" src="https://raw.githubusercontent.com/lobehub/lobe-assets/master/packages/assets-logo/assets/logo-3d.webp">
+<img height="120" src="https://raw.githubusercontent.com/lobehub/lobe-assets/master/packages/assets-logo/assets/split.svg">
+<img height="120" src="https://raw.githubusercontent.com/lobehub/lobe-assets/master/packages/assets-emoji/assets/lollipop.webp">
 
 <h1>Lobe UI</h1>
 

package/es/Accordion/style.d.mts

@@ -6,9 +6,9 @@ export declare const accordionStyles: {
   action: string;
   content: string;
   trigger: string;
-  item: string;
   root: string;
   indicator: string;
+  item: string;
   itemOutlined: string;
   rootOutlined: string;
   actionAlwaysVisible: string;

package/es/CodeDiff/DiffPanel.mjs

@@ -6,7 +6,7 @@ import Text from "../Text/Text.mjs";
 import MaterialFileTypeIcon from "../MaterialFileTypeIcon/MaterialFileTypeIcon.mjs";
 import Tag from "../Tag/Tag.mjs";
 import { stopPropagation } from "../utils/dom.mjs";
-import { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from "./style.mjs";
+import { compactActionsCls, prefix, styles, variantStyles } from "./style.mjs";
 import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx$1 from "clsx";
@@ -34,7 +34,7 @@ const DiffPanel = memo(({ actions, body, className, classNames, dataCodeType, de
 				children: actions
 			}),
 			showHeader && /* @__PURE__ */ jsx(Tag, {
-				className: compactLangCls,
+				className: "lobe-code-diff-lang",
 				children: displayName
 			}),
 			/* @__PURE__ */ jsx("div", {

package/es/CodeDiff/DiffPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DiffPanel.mjs","names":["Flexbox","clsx"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n  actions?: ReactNode;\n  additions: number;\n  body: ReactNode;\n  classNames?: {\n    body?: string;\n    header?: string;\n  };\n  dataCodeType: string;\n  defaultExpand?: boolean;\n  deletions: number;\n  displayName: string;\n  fileName?: string;\n  fullFeatured?: boolean;\n  showHeader?: boolean;\n  styles?: {\n    body?: CSSProperties;\n    header?: CSSProperties;\n  };\n  variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n  ({\n    actions,\n    body,\n    className,\n    classNames,\n    dataCodeType,\n    defaultExpand = true,\n    deletions,\n    displayName,\n    fileName,\n    fullFeatured = true,\n    showHeader = true,\n    styles: customStyles,\n    variant = 'filled',\n    additions,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const rootStyles = [styles.root, variantStyles[variant]];\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    if (!fullFeatured)\n      return (\n        <Flexbox\n          data-code-type={dataCodeType}\n          width={'100%'}\n          {...rest}\n          {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n        >\n          <Flexbox\n            horizontal\n            align=\"center\"\n            flex=\"none\"\n            gap={4}\n            {...styleProps(styles.actionsCompact, compactActionsCls)}\n          >\n            {actions}\n          </Flexbox>\n          {showHeader && <Tag className={compactLangCls}>{displayName}</Tag>}\n          <div {...styleProps(styles.body, classNames?.body, customStyles?.body)}>{body}</div>\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox\n        data-code-type={dataCodeType}\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n      >\n        {showHeader && (\n          <Flexbox\n            horizontal\n            align=\"center\"\n            gap={8}\n            justify=\"space-between\"\n            padding={4}\n            paddingInline={variant === 'borderless' ? 0 : undefined}\n            onClick={handleToggleExpand}\n            {...styleProps(\n              [styles.header, variant === 'filled' && styles.headerFilled],\n              classNames?.header,\n              customStyles?.header,\n            )}\n          >\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className=\"language-title\"\n              flex={1}\n              gap={4}\n              justify=\"flex-start\"\n              paddingInline={8}\n            >\n              <MaterialFileTypeIcon\n                fallbackUnknownType={false}\n                filename={fileName || displayName}\n                size={18}\n                type=\"file\"\n                variant=\"raw\"\n              />\n              <Text ellipsis fontSize={13}>\n                {displayName}\n              </Text>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n              {actions && (\n                <Flexbox\n                  horizontal\n                  align=\"center\"\n                  flex=\"none\"\n                  gap={4}\n                  {...styleProps(styles.actions, `panel-actions ${prefix}-actions`)}\n                >\n                  {actions}\n                </Flexbox>\n              )}\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal align=\"center\" gap={8}>\n                  {deletions > 0 && <span {...stylex.props(styles.deletions)}>-{deletions}</span>}\n                  {additions > 0 && <span {...stylex.props(styles.additions)}>+{additions}</span>}\n                </Flexbox>\n              )}\n              <ActionIcon\n                icon={expand ? ChevronDown : ChevronRight}\n                size=\"small\"\n                onClick={handleToggleExpand}\n              />\n            </Flexbox>\n          </Flexbox>\n        )}\n        <div\n          {...styleProps(\n            [\n              styles.bodyRoot,\n              !expand && styles.bodyCollapsed,\n              styles.body,\n              showHeader && variant !== 'borderless' && styles.bodyDivider,\n            ],\n            clsx(`${prefix}-body`, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {body}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":"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"}
+{"version":3,"file":"DiffPanel.mjs","names":["Flexbox","clsx"],"sources":["../../src/CodeDiff/DiffPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport type { FlexboxProps } from '@/Flex';\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Tag from '@/Tag';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { compactActionsCls, compactLangCls, prefix, styles, variantStyles } from './style';\n\ninterface DiffPanelProps extends Omit<FlexboxProps, 'children'> {\n  actions?: ReactNode;\n  additions: number;\n  body: ReactNode;\n  classNames?: {\n    body?: string;\n    header?: string;\n  };\n  dataCodeType: string;\n  defaultExpand?: boolean;\n  deletions: number;\n  displayName: string;\n  fileName?: string;\n  fullFeatured?: boolean;\n  showHeader?: boolean;\n  styles?: {\n    body?: CSSProperties;\n    header?: CSSProperties;\n  };\n  variant?: 'filled' | 'outlined' | 'borderless';\n}\n\nexport const DiffPanel = memo<DiffPanelProps>(\n  ({\n    actions,\n    body,\n    className,\n    classNames,\n    dataCodeType,\n    defaultExpand = true,\n    deletions,\n    displayName,\n    fileName,\n    fullFeatured = true,\n    showHeader = true,\n    styles: customStyles,\n    variant = 'filled',\n    additions,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const rootStyles = [styles.root, variantStyles[variant]];\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    if (!fullFeatured)\n      return (\n        <Flexbox\n          data-code-type={dataCodeType}\n          width={'100%'}\n          {...rest}\n          {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n        >\n          <Flexbox\n            horizontal\n            align=\"center\"\n            flex=\"none\"\n            gap={4}\n            {...styleProps(styles.actionsCompact, compactActionsCls)}\n          >\n            {actions}\n          </Flexbox>\n          {showHeader && <Tag className={compactLangCls}>{displayName}</Tag>}\n          <div {...styleProps(styles.body, classNames?.body, customStyles?.body)}>{body}</div>\n        </Flexbox>\n      );\n\n    return (\n      <Flexbox\n        data-code-type={dataCodeType}\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles, clsx(prefix, className), rest.style)}\n      >\n        {showHeader && (\n          <Flexbox\n            horizontal\n            align=\"center\"\n            gap={8}\n            justify=\"space-between\"\n            padding={4}\n            paddingInline={variant === 'borderless' ? 0 : undefined}\n            onClick={handleToggleExpand}\n            {...styleProps(\n              [styles.header, variant === 'filled' && styles.headerFilled],\n              classNames?.header,\n              customStyles?.header,\n            )}\n          >\n            <Flexbox\n              horizontal\n              align=\"center\"\n              className=\"language-title\"\n              flex={1}\n              gap={4}\n              justify=\"flex-start\"\n              paddingInline={8}\n            >\n              <MaterialFileTypeIcon\n                fallbackUnknownType={false}\n                filename={fileName || displayName}\n                size={18}\n                type=\"file\"\n                variant=\"raw\"\n              />\n              <Text ellipsis fontSize={13}>\n                {displayName}\n              </Text>\n            </Flexbox>\n            <Flexbox horizontal align=\"center\" flex=\"none\" gap={8} onClick={stopPropagation}>\n              {actions && (\n                <Flexbox\n                  horizontal\n                  align=\"center\"\n                  flex=\"none\"\n                  gap={4}\n                  {...styleProps(styles.actions, `panel-actions ${prefix}-actions`)}\n                >\n                  {actions}\n                </Flexbox>\n              )}\n              {(deletions > 0 || additions > 0) && (\n                <Flexbox horizontal align=\"center\" gap={8}>\n                  {deletions > 0 && <span {...stylex.props(styles.deletions)}>-{deletions}</span>}\n                  {additions > 0 && <span {...stylex.props(styles.additions)}>+{additions}</span>}\n                </Flexbox>\n              )}\n              <ActionIcon\n                icon={expand ? ChevronDown : ChevronRight}\n                size=\"small\"\n                onClick={handleToggleExpand}\n              />\n            </Flexbox>\n          </Flexbox>\n        )}\n        <div\n          {...styleProps(\n            [\n              styles.bodyRoot,\n              !expand && styles.bodyCollapsed,\n              styles.body,\n              showHeader && variant !== 'borderless' && styles.bodyDivider,\n            ],\n            clsx(`${prefix}-body`, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {body}\n        </div>\n      </Flexbox>\n    );\n  },\n);\n\nDiffPanel.displayName = 'DiffPanel';\n"],"mappings":"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"}

package/es/Drawer/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 { getElementRef } from "../utils/getElementRef.mjs";
 import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { useLayerZIndex } from "../internal/zIndex/useLayerZIndex.mjs";
 import { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from "./constants.mjs";
@@ -242,7 +243,7 @@ const DrawerTrigger = ({ children, className, nativeButton, ref: refProp, ...res
 		return cloneElement(children, {
 			...mergedProps,
 			ref: mergeRefs([
-				children.ref,
+				getElementRef(children),
 				props.ref,
 				refProp
 			])

package/es/Drawer/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/Drawer/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  useRef,\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 { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from './constants';\nimport { DrawerLayerProvider, useDrawerLayer } from './DrawerLayerContext';\nimport { styles } from './style';\nimport type { DrawerPlacement } from './type';\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\nconst popupPlacementClass = {\n  bottom: styles.popupBottom,\n  left: styles.popupLeft,\n  right: styles.popupRight,\n  top: styles.popupTop,\n};\n\nconst panelPlacementClass = {\n  bottom: styles.panelBottom,\n  left: styles.panelLeft,\n  right: styles.panelRight,\n  top: styles.panelTop,\n};\n\nconst panelRoundedClass = {\n  bottom: styles.panelRoundedBottom,\n  left: styles.panelRoundedLeft,\n  right: styles.panelRoundedRight,\n  top: styles.panelRoundedTop,\n};\n\nconst DrawerOpenContext = createContext<boolean | null>(null);\n\ninterface DrawerAnimationActions {\n  onExitComplete: () => void;\n}\nconst DrawerActionsContext = createContext<DrawerAnimationActions | null>(null);\n\nexport const useDrawerOpen = () => use(DrawerOpenContext);\nexport const useDrawerActions = () => use(DrawerActionsContext);\n\nexport type DrawerRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedDrawerRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<DrawerRootProps, '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    <DrawerOpenContext value={open}>\n      <DrawerActionsContext value={actions}>\n        <DrawerLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </DrawerLayerProvider>\n      </DrawerActionsContext>\n    </DrawerOpenContext>\n  );\n};\n\nconst NonAnimatedDrawerRoot = ({ zIndex: explicitZIndex, children, ...rest }: DrawerRootProps) => {\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  return (\n    <DrawerLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </DrawerLayerProvider>\n  );\n};\n\nexport const DrawerRoot = ({ open, onExitComplete, ...rest }: DrawerRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedDrawerRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedDrawerRoot {...rest} />;\n};\n\nexport type DrawerPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const DrawerPortal = ({ container, ...rest }: DrawerPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nexport type DrawerBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const DrawerBackdrop = ({ className, style, ...rest }: DrawerBackdropProps) => {\n  const open = useDrawerOpen();\n  const layer = useDrawerLayer();\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={drawerBackdropTransition}\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\nexport type DrawerPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  flush?: boolean;\n  height?: number | string;\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  panelStyle?: React.CSSProperties;\n  placement?: DrawerPlacement;\n  popupStyle?: React.CSSProperties;\n  pushOffset?: number;\n  width?: number | string;\n};\n\nexport const DrawerPopupImpl = ({\n  className,\n  children,\n  placement: placementProp = 'right',\n  width: widthProp,\n  height: heightProp,\n  flush,\n  pushOffset = 0,\n  motionProps,\n  panelClassName,\n  panelStyle,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  ...rest\n}: DrawerPopupProps & { panelXstyle?: XStyle }) => {\n  const open = useDrawerOpen();\n  const actions = useDrawerActions();\n  const layer = useDrawerLayer();\n  const Motion = useMotionComponent();\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  // The exiting panel lives inside AnimatePresence and keeps the props it had while open,\n  // but this popup re-renders with whatever the consumer passes now. Freezing the geometry\n  // during exit keeps the two in sync — otherwise a placement change on close teleports the\n  // popup to the new edge while the panel animates out along the old axis.\n  const openGeometryRef = useRef({\n    height: heightProp,\n    placement: placementProp,\n    width: widthProp,\n  });\n  if (open !== false) {\n    openGeometryRef.current = { height: heightProp, placement: placementProp, width: widthProp };\n  }\n  const { height, placement, width } = openGeometryRef.current;\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const sizeStyle: React.CSSProperties = isHorizontal ? { width } : { height };\n  const resolvedPopupStyle: React.CSSProperties = {\n    ...(layer?.zIndex === undefined ? undefined : { zIndex: layer.zIndex + 1 }),\n    ...sizeStyle,\n    ...popupStyle,\n  };\n  const popupXstyle = [styles.popup, popupPlacementClass[placement]];\n  const resolvedPanelClassName = clsx(\n    stylex.props(\n      styles.panel,\n      panelPlacementClass[placement],\n      flush ? styles.panelFlush : panelRoundedClass[placement],\n      panelXstyle,\n    ).className,\n    panelClassName,\n  );\n\n  if (open !== null && actions) {\n    const motionConfig = getDrawerMotionConfig(placement, pushOffset);\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(popupXstyle).className, className as string)}\n        data-drawer-anchor={placement}\n        ref={composedRef as any}\n        style={resolvedPopupStyle}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...motionConfig}\n              {...motionProps}\n              className={resolvedPanelClassName}\n              data-drawer-placement={placement}\n              key=\"drawer-popup-panel\"\n              style={{ transition: 'none', ...panelStyle }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  const { axis, sign } = pushAxis[placement];\n  const pushVars = {\n    [axis === 'x' ? '--drawer-push-x' : '--drawer-push-y']: `${pushOffset * sign}px`,\n  } as React.CSSProperties;\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName(popupXstyle, className as any) as any}\n      data-drawer-anchor={placement}\n      ref={composedRef as any}\n      style={resolvedPopupStyle}\n    >\n      <div\n        className={resolvedPanelClassName}\n        data-drawer-placement={placement}\n        style={{ ...pushVars, ...panelStyle }}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const DrawerPopup: React.FC<DrawerPopupProps> = DrawerPopupImpl;\n\nexport type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerHeader = ({ className, style, ...rest }: DrawerHeaderProps) => (\n  <div {...rest} {...styleProps(styles.header, className, style)} />\n);\n\nexport type DrawerTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const DrawerTitle = ({ className, ...rest }: DrawerTitleProps) => (\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\nexport type DrawerDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const DrawerDescription: React.FC<DrawerDescriptionProps> = Dialog.Description;\n\nexport type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: DrawerContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const DrawerContent: React.FC<DrawerContentProps> = DrawerContentImpl;\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerFooter = ({ className, style, ...rest }: DrawerFooterProps) => (\n  <div {...rest} {...styleProps(styles.footer, className, style)} />\n);\n\nexport type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const DrawerClose = ({ className, children, ...rest }: DrawerCloseProps) => (\n  <Dialog.Close\n    {...rest}\n    className={mergeStateClassName([styles.close, focusRing.info], className as any) as any}\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\n\nexport type DrawerTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const DrawerTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DrawerTriggerProps) => {\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":["clsx"],"sources":["../../src/Drawer/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  useRef,\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 { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { drawerBackdropTransition, getDrawerMotionConfig, pushAxis } from './constants';\nimport { DrawerLayerProvider, useDrawerLayer } from './DrawerLayerContext';\nimport { styles } from './style';\nimport type { DrawerPlacement } from './type';\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\nconst popupPlacementClass = {\n  bottom: styles.popupBottom,\n  left: styles.popupLeft,\n  right: styles.popupRight,\n  top: styles.popupTop,\n};\n\nconst panelPlacementClass = {\n  bottom: styles.panelBottom,\n  left: styles.panelLeft,\n  right: styles.panelRight,\n  top: styles.panelTop,\n};\n\nconst panelRoundedClass = {\n  bottom: styles.panelRoundedBottom,\n  left: styles.panelRoundedLeft,\n  right: styles.panelRoundedRight,\n  top: styles.panelRoundedTop,\n};\n\nconst DrawerOpenContext = createContext<boolean | null>(null);\n\ninterface DrawerAnimationActions {\n  onExitComplete: () => void;\n}\nconst DrawerActionsContext = createContext<DrawerAnimationActions | null>(null);\n\nexport const useDrawerOpen = () => use(DrawerOpenContext);\nexport const useDrawerActions = () => use(DrawerActionsContext);\n\nexport type DrawerRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedDrawerRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<DrawerRootProps, '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    <DrawerOpenContext value={open}>\n      <DrawerActionsContext value={actions}>\n        <DrawerLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </DrawerLayerProvider>\n      </DrawerActionsContext>\n    </DrawerOpenContext>\n  );\n};\n\nconst NonAnimatedDrawerRoot = ({ zIndex: explicitZIndex, children, ...rest }: DrawerRootProps) => {\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  return (\n    <DrawerLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </DrawerLayerProvider>\n  );\n};\n\nexport const DrawerRoot = ({ open, onExitComplete, ...rest }: DrawerRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedDrawerRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedDrawerRoot {...rest} />;\n};\n\nexport type DrawerPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const DrawerPortal = ({ container, ...rest }: DrawerPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nexport type DrawerBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const DrawerBackdrop = ({ className, style, ...rest }: DrawerBackdropProps) => {\n  const open = useDrawerOpen();\n  const layer = useDrawerLayer();\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={drawerBackdropTransition}\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\nexport type DrawerPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  flush?: boolean;\n  height?: number | string;\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  panelStyle?: React.CSSProperties;\n  placement?: DrawerPlacement;\n  popupStyle?: React.CSSProperties;\n  pushOffset?: number;\n  width?: number | string;\n};\n\nexport const DrawerPopupImpl = ({\n  className,\n  children,\n  placement: placementProp = 'right',\n  width: widthProp,\n  height: heightProp,\n  flush,\n  pushOffset = 0,\n  motionProps,\n  panelClassName,\n  panelStyle,\n  panelXstyle,\n  popupStyle,\n  ref: forwardedRef,\n  ...rest\n}: DrawerPopupProps & { panelXstyle?: XStyle }) => {\n  const open = useDrawerOpen();\n  const actions = useDrawerActions();\n  const layer = useDrawerLayer();\n  const Motion = useMotionComponent();\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  // The exiting panel lives inside AnimatePresence and keeps the props it had while open,\n  // but this popup re-renders with whatever the consumer passes now. Freezing the geometry\n  // during exit keeps the two in sync — otherwise a placement change on close teleports the\n  // popup to the new edge while the panel animates out along the old axis.\n  const openGeometryRef = useRef({\n    height: heightProp,\n    placement: placementProp,\n    width: widthProp,\n  });\n  if (open !== false) {\n    openGeometryRef.current = { height: heightProp, placement: placementProp, width: widthProp };\n  }\n  const { height, placement, width } = openGeometryRef.current;\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const sizeStyle: React.CSSProperties = isHorizontal ? { width } : { height };\n  const resolvedPopupStyle: React.CSSProperties = {\n    ...(layer?.zIndex === undefined ? undefined : { zIndex: layer.zIndex + 1 }),\n    ...sizeStyle,\n    ...popupStyle,\n  };\n  const popupXstyle = [styles.popup, popupPlacementClass[placement]];\n  const resolvedPanelClassName = clsx(\n    stylex.props(\n      styles.panel,\n      panelPlacementClass[placement],\n      flush ? styles.panelFlush : panelRoundedClass[placement],\n      panelXstyle,\n    ).className,\n    panelClassName,\n  );\n\n  if (open !== null && actions) {\n    const motionConfig = getDrawerMotionConfig(placement, pushOffset);\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={clsx(stylex.props(popupXstyle).className, className as string)}\n        data-drawer-anchor={placement}\n        ref={composedRef as any}\n        style={resolvedPopupStyle}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...motionConfig}\n              {...motionProps}\n              className={resolvedPanelClassName}\n              data-drawer-placement={placement}\n              key=\"drawer-popup-panel\"\n              style={{ transition: 'none', ...panelStyle }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  const { axis, sign } = pushAxis[placement];\n  const pushVars = {\n    [axis === 'x' ? '--drawer-push-x' : '--drawer-push-y']: `${pushOffset * sign}px`,\n  } as React.CSSProperties;\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName(popupXstyle, className as any) as any}\n      data-drawer-anchor={placement}\n      ref={composedRef as any}\n      style={resolvedPopupStyle}\n    >\n      <div\n        className={resolvedPanelClassName}\n        data-drawer-placement={placement}\n        style={{ ...pushVars, ...panelStyle }}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\nexport const DrawerPopup: React.FC<DrawerPopupProps> = DrawerPopupImpl;\n\nexport type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerHeader = ({ className, style, ...rest }: DrawerHeaderProps) => (\n  <div {...rest} {...styleProps(styles.header, className, style)} />\n);\n\nexport type DrawerTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const DrawerTitle = ({ className, ...rest }: DrawerTitleProps) => (\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\nexport type DrawerDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const DrawerDescription: React.FC<DrawerDescriptionProps> = Dialog.Description;\n\nexport type DrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerContentImpl = ({\n  className,\n  style,\n  xstyle,\n  ...rest\n}: DrawerContentProps & { xstyle?: XStyle }) => (\n  <div {...rest} {...styleProps([styles.content, xstyle], className, style)} />\n);\nexport const DrawerContent: React.FC<DrawerContentProps> = DrawerContentImpl;\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const DrawerFooter = ({ className, style, ...rest }: DrawerFooterProps) => (\n  <div {...rest} {...styleProps(styles.footer, className, style)} />\n);\n\nexport type DrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const DrawerClose = ({ className, children, ...rest }: DrawerCloseProps) => (\n  <Dialog.Close\n    {...rest}\n    className={mergeStateClassName([styles.close, focusRing.info], className as any) as any}\n  >\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\n\nexport type DrawerTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const DrawerTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DrawerTriggerProps) => {\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([getElementRef(children), (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/Drawer/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Drawer/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst softEase = 'cubic-bezier(0.32, 0.72, 0, 1)';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst pushTransform = 'translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0))';\nconst edge = `var(--drawer-edge-width, 1px)`;\n\n/* antd's boxShadowDrawer{Left,Right,Up,Down} geometry and alphas, scaled against colorShadow's own\n   alpha (opaque black in light, rgba(255,255,255,0.2) in dark). Direction styles set the cast sign\n   and weight styles scale the alpha, so the two compose without a style per combination. */\nconst castShadow = (x: number, y: number, blur: number, spread: number, alpha: number) =>\n  `calc(var(--drawer-cast-x, 0) * ${x}px) calc(var(--drawer-cast-y, 0) * ${y}px) ${blur}px ${spread}px color-mix(in srgb, var(--lobe-color-shadow, #000) calc(${alpha}% * var(--drawer-cast-alpha, 1)), transparent)`;\n\nconst panelShadow = `${castShadow(6, 6, 16, 0, 8)}, ${castShadow(3, 3, 6, -4, 12)}, ${castShadow(9, 9, 28, 8, 5)}`;\n\nexport const styles = stylex.create({\n  backdrop: {\n    inset: 0,\n    transition: `opacity 180ms ${softEase}`,\n    backgroundColor: cssVar.colorBgMask,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'fixed',\n    zIndex: 1200,\n  },\n\n  popup: {\n    display: 'flex',\n    pointerEvents: 'none',\n    position: 'fixed',\n    zIndex: 1201,\n    /* Clamped here rather than on the panel, so an oversized size prop shrinks the box instead of\n       detaching the panel from its anchored edge. */\n    maxHeight: '100dvh',\n    maxWidth: '100dvw',\n  },\n\n  popupLeft: {\n    insetBlock: 0,\n    insetInlineStart: 0,\n  },\n\n  popupRight: {\n    insetBlock: 0,\n    insetInlineEnd: 0,\n  },\n\n  popupTop: {\n    insetInline: 0,\n    insetBlockStart: 0,\n  },\n\n  popupBottom: {\n    insetInline: 0,\n    insetBlockEnd: 0,\n  },\n\n  panel: {\n    flex: '1',\n    overflow: 'hidden',\n    transition: `transform 300ms ${softEase}`,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: panelShadow,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    pointerEvents: 'auto',\n    position: 'relative',\n    transform: pushTransform,\n    minHeight: 0,\n    minWidth: 0,\n  },\n\n  panelLeft: {\n    '--drawer-cast-x': '1',\n    'borderInlineEndColor': cssVar.colorBorder,\n    'borderInlineEndStyle': 'solid',\n    'borderInlineEndWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateX(-100%)' },\n  },\n\n  panelRight: {\n    '--drawer-cast-x': '-1',\n    'borderInlineStartColor': cssVar.colorBorder,\n    'borderInlineStartStyle': 'solid',\n    'borderInlineStartWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateX(100%)' },\n  },\n\n  panelTop: {\n    '--drawer-cast-y': '1',\n    'borderBlockEndColor': cssVar.colorBorder,\n    'borderBlockEndStyle': 'solid',\n    'borderBlockEndWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateY(-100%)' },\n  },\n\n  panelBottom: {\n    '--drawer-cast-y': '-1',\n    'borderBlockStartColor': cssVar.colorBorder,\n    'borderBlockStartStyle': 'solid',\n    'borderBlockStartWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateY(100%)' },\n  },\n\n  panelRoundedLeft: {\n    borderEndEndRadius: 12,\n    borderStartEndRadius: 12,\n  },\n\n  panelRoundedRight: {\n    borderEndStartRadius: 12,\n    borderStartStartRadius: 12,\n  },\n\n  panelRoundedTop: {\n    borderEndEndRadius: 12,\n    borderEndStartRadius: 12,\n  },\n\n  panelRoundedBottom: {\n    borderStartEndRadius: 12,\n    borderStartStartRadius: 12,\n  },\n\n  panelFlush: {\n    '--drawer-cast-alpha': '0',\n    '--drawer-edge-width': '0',\n  },\n\n  panelBoosted: {\n    '--drawer-cast-alpha': '1.75',\n  },\n\n  panelRecessed: {\n    '--drawer-cast-alpha': '0.5',\n  },\n\n  header: {\n    flex: 'none',\n    gap: 8,\n    paddingBlock: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    borderBlockEndColor: cssVar.colorSplit,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'flex',\n    justifyContent: 'space-between',\n    minHeight: 56,\n  },\n\n  containerInner: {\n    flex: '1',\n    gap: 8,\n    marginInline: 'auto',\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n\n  containerInnerFooter: {\n    justifyContent: 'flex-end',\n  },\n\n  title: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 17,\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    lineHeight: 1.4,\n  },\n\n  extra: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineEnd: -4,\n  },\n\n  extraFloating: {\n    insetBlockStart: 12,\n    insetInlineEnd: 12,\n    marginInlineEnd: 0,\n    position: 'absolute',\n    zIndex: 1,\n  },\n\n  close: {\n    'padding': 0,\n    'borderColor': 'currentcolor',\n    'borderRadius': 8,\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'transition': `color 160ms ${softEase}, background 160ms ${softEase}, transform 160ms ${softEase}`,\n    'alignItems': 'center',\n    'backgroundColor': { default: 'transparent', ':hover': cssVar.colorFillSecondary },\n    'color': { default: cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    'cursor': 'pointer',\n    'display': 'flex',\n    'justifyContent': 'center',\n    'position': 'relative',\n    'transform': {\n      default: null,\n      ':hover:not(:active)': 'scale(1.04)',\n      ':active': 'scale(0.96)',\n    },\n    'height': 32,\n    'width': 32,\n    '::after': {\n      inset: -4,\n      content: '\"\"',\n      position: 'absolute',\n    },\n  },\n\n  content: {\n    flex: '1',\n    display: 'flex',\n    minHeight: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  bodyContent: {\n    marginInline: 'auto',\n    paddingBlock: 12,\n    paddingInline: 16,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: '100%',\n    width: '100%',\n  },\n\n  contentSidebar: {\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n  },\n\n  bodyContentSidebar: {\n    paddingBlock: 0,\n    paddingInline: 0,\n    flexDirection: 'row',\n    height: '100%',\n    minHeight: 0,\n  },\n\n  sidebar: {\n    flex: 'none',\n    paddingBlock: 12,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgLayout,\n    borderInlineEndColor: cssVar.colorBorderSecondary,\n    borderInlineEndStyle: 'solid',\n    borderInlineEndWidth: 1,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  sidebarContent: {\n    flex: '1',\n    paddingBlock: 12,\n    paddingInline: 16,\n    minWidth: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  footer: {\n    flex: 'none',\n    gap: 8,\n    paddingBlock: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    borderBlockStartColor: cssVar.colorSplit,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n    display: 'flex',\n    justifyContent: 'flex-end',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Drawer/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst softEase = 'cubic-bezier(0.32, 0.72, 0, 1)';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst pushTransform = 'translate(var(--drawer-push-x, 0), var(--drawer-push-y, 0))';\nconst edge = `var(--drawer-edge-width, 1px)`;\n\n/* antd's boxShadowDrawer{Left,Right,Up,Down} geometry and alphas, mixed against colorShadow.\n   Direction styles set the cast sign and weight styles scale the alpha, so the two compose without\n   a style per combination. */\nconst castShadow = (x: number, y: number, blur: number, spread: number, alpha: number) =>\n  `calc(var(--drawer-cast-x, 0) * ${x}px) calc(var(--drawer-cast-y, 0) * ${y}px) ${blur}px ${spread}px color-mix(in srgb, var(--lobe-color-shadow, #000) calc(${alpha}% * var(--drawer-cast-alpha, 1)), transparent)`;\n\nconst panelShadow = `${castShadow(6, 6, 16, 0, 8)}, ${castShadow(3, 3, 6, -4, 12)}, ${castShadow(9, 9, 28, 8, 5)}`;\n\nexport const styles = stylex.create({\n  backdrop: {\n    inset: 0,\n    transition: `opacity 180ms ${softEase}`,\n    backgroundColor: cssVar.colorBgMask,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'fixed',\n    zIndex: 1200,\n  },\n\n  popup: {\n    display: 'flex',\n    pointerEvents: 'none',\n    position: 'fixed',\n    zIndex: 1201,\n    /* Clamped here rather than on the panel, so an oversized size prop shrinks the box instead of\n       detaching the panel from its anchored edge. */\n    maxHeight: '100dvh',\n    maxWidth: '100dvw',\n  },\n\n  popupLeft: {\n    insetBlock: 0,\n    insetInlineStart: 0,\n  },\n\n  popupRight: {\n    insetBlock: 0,\n    insetInlineEnd: 0,\n  },\n\n  popupTop: {\n    insetInline: 0,\n    insetBlockStart: 0,\n  },\n\n  popupBottom: {\n    insetInline: 0,\n    insetBlockEnd: 0,\n  },\n\n  panel: {\n    flex: '1',\n    overflow: 'hidden',\n    transition: `transform 300ms ${softEase}`,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: panelShadow,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    pointerEvents: 'auto',\n    position: 'relative',\n    transform: pushTransform,\n    minHeight: 0,\n    minWidth: 0,\n  },\n\n  panelLeft: {\n    '--drawer-cast-x': '1',\n    'borderInlineEndColor': cssVar.colorBorder,\n    'borderInlineEndStyle': 'solid',\n    'borderInlineEndWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateX(-100%)' },\n  },\n\n  panelRight: {\n    '--drawer-cast-x': '-1',\n    'borderInlineStartColor': cssVar.colorBorder,\n    'borderInlineStartStyle': 'solid',\n    'borderInlineStartWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateX(100%)' },\n  },\n\n  panelTop: {\n    '--drawer-cast-y': '1',\n    'borderBlockEndColor': cssVar.colorBorder,\n    'borderBlockEndStyle': 'solid',\n    'borderBlockEndWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateY(-100%)' },\n  },\n\n  panelBottom: {\n    '--drawer-cast-y': '-1',\n    'borderBlockStartColor': cssVar.colorBorder,\n    'borderBlockStartStyle': 'solid',\n    'borderBlockStartWidth': edge,\n    'transform': { default: pushTransform, [startingOrEnding]: 'translateY(100%)' },\n  },\n\n  panelRoundedLeft: {\n    borderEndEndRadius: 12,\n    borderStartEndRadius: 12,\n  },\n\n  panelRoundedRight: {\n    borderEndStartRadius: 12,\n    borderStartStartRadius: 12,\n  },\n\n  panelRoundedTop: {\n    borderEndEndRadius: 12,\n    borderEndStartRadius: 12,\n  },\n\n  panelRoundedBottom: {\n    borderStartEndRadius: 12,\n    borderStartStartRadius: 12,\n  },\n\n  panelFlush: {\n    '--drawer-cast-alpha': '0',\n    '--drawer-edge-width': '0',\n  },\n\n  panelBoosted: {\n    '--drawer-cast-alpha': '1.75',\n  },\n\n  panelRecessed: {\n    '--drawer-cast-alpha': '0.5',\n  },\n\n  header: {\n    flex: 'none',\n    gap: 8,\n    paddingBlock: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    borderBlockEndColor: cssVar.colorSplit,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    display: 'flex',\n    justifyContent: 'space-between',\n    minHeight: 56,\n  },\n\n  containerInner: {\n    flex: '1',\n    gap: 8,\n    marginInline: 'auto',\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n\n  containerInnerFooter: {\n    justifyContent: 'flex-end',\n  },\n\n  title: {\n    margin: 0,\n    color: cssVar.colorText,\n    fontSize: 17,\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    lineHeight: 1.4,\n  },\n\n  extra: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    marginInlineEnd: -4,\n  },\n\n  extraFloating: {\n    insetBlockStart: 12,\n    insetInlineEnd: 12,\n    marginInlineEnd: 0,\n    position: 'absolute',\n    zIndex: 1,\n  },\n\n  close: {\n    'padding': 0,\n    'borderColor': 'currentcolor',\n    'borderRadius': 8,\n    'borderStyle': 'none',\n    'borderWidth': 'medium',\n    'transition': `color 160ms ${softEase}, background 160ms ${softEase}, transform 160ms ${softEase}`,\n    'alignItems': 'center',\n    'backgroundColor': { 'default': 'transparent', ':hover': cssVar.colorFillSecondary },\n    'color': { 'default': cssVar.colorTextTertiary, ':hover': cssVar.colorText },\n    'cursor': 'pointer',\n    'display': 'flex',\n    'justifyContent': 'center',\n    'position': 'relative',\n    'transform': {\n      'default': null,\n      ':hover:not(:active)': 'scale(1.04)',\n      ':active': 'scale(0.96)',\n    },\n    'height': 32,\n    'width': 32,\n    '::after': {\n      inset: -4,\n      content: '\"\"',\n      position: 'absolute',\n    },\n  },\n\n  content: {\n    flex: '1',\n    display: 'flex',\n    minHeight: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  bodyContent: {\n    marginInline: 'auto',\n    paddingBlock: 12,\n    paddingInline: 16,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: '100%',\n    width: '100%',\n  },\n\n  contentSidebar: {\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n  },\n\n  bodyContentSidebar: {\n    paddingBlock: 0,\n    paddingInline: 0,\n    flexDirection: 'row',\n    height: '100%',\n    minHeight: 0,\n  },\n\n  sidebar: {\n    flex: 'none',\n    paddingBlock: 12,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgLayout,\n    borderInlineEndColor: cssVar.colorBorderSecondary,\n    borderInlineEndStyle: 'solid',\n    borderInlineEndWidth: 1,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  sidebarContent: {\n    flex: '1',\n    paddingBlock: 12,\n    paddingInline: 16,\n    minWidth: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n\n  footer: {\n    flex: 'none',\n    gap: 8,\n    paddingBlock: 12,\n    paddingInline: 16,\n    alignItems: 'center',\n    borderBlockStartColor: cssVar.colorSplit,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n    display: 'flex',\n    justifyContent: 'flex-end',\n  },\n});\n"],"mappings":"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"}

package/es/DropdownMenu/atoms.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { useAppElement } from "../ConfigProvider/AppElementContext.mjs";
 import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { getElementRef } from "../utils/getElementRef.mjs";
 import { mergeRefs, useMergeRefs } from "../utils/mergeRefs.mjs";
 import { FloatingLayerProvider } from "../hooks/useFloatingLayer.mjs";
 import { getFloatingCollisionPadding } from "../internal/floating/collisionPadding.mjs";
@@ -45,7 +46,7 @@ const DropdownMenuTrigger = ({ children, className, nativeButton, ref: refProp,
 			...mergedProps,
 			className: clsx$1(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),
 			ref: mergeRefs([
-				children.ref,
+				getElementRef(children),
 				props.ref,
 				refProp
 			])

package/es/DropdownMenu/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { MenuVirtualList, type VirtualListProps } from '@/internal/virtual';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { type styleProps } from '@/styles/stylex/props';\nimport Switch from '@/Switch';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { menuClassNames, menuStyles } from './style';\nimport { type DropdownMenuPlacement } from './type';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nconst sx = (styles: XStyle, stableClassName?: string) =>\n  clsx(stylex.props(styles).className, stableClassName);\n\nconst itemClassName = (danger: boolean | undefined) =>\n  sx([menuStyles.item, danger && menuStyles.danger]);\n\nexport type DropdownMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Menu.Trigger>,\n  'children' | 'render'\n> & {\n  children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DropdownMenuTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\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, ...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      className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n  }\n\n  return (\n    <Menu.Trigger\n      {...rest}\n      className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Menu.Trigger>\n  );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Menu.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n  className,\n  collisionPadding,\n  placement,\n  hoverTrigger,\n  align,\n  side,\n  sideOffset,\n  children,\n  style,\n  ...rest\n}: DropdownMenuPositionerProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\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    <Menu.Positioner\n      {...rest}\n      align={align ?? placementConfig?.align}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side}\n      sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n      style={resolvedStyle}\n      className={\n        mergeStateClassName(\n          sx(menuStyles.positioner, menuClassNames.positioner),\n          className as any,\n        ) as any\n      }\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </Menu.Positioner>\n  );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopupImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuPopupProps & { xstyle?: XStyle }) => {\n  return (\n    <Menu.Popup\n      {...rest}\n      className={\n        mergeStateClassName(\n          sx([menuStyles.popup, xstyle], menuClassNames.popup),\n          className as any,\n        ) as any\n      }\n    />\n  );\n};\n\nexport const DropdownMenuPopup = (props: DropdownMenuPopupProps) => (\n  <DropdownMenuPopupImpl {...props} />\n);\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuHeader = ({ className, ...rest }: DropdownMenuHeaderProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.header), className)} data-slot=\"header\" />;\n};\n\nDropdownMenuHeader.displayName = 'DropdownMenuHeader';\n\nexport type DropdownMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuFooter = ({ className, ...rest }: DropdownMenuFooterProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.footer), className)} data-slot=\"footer\" />;\n};\n\nDropdownMenuFooter.displayName = 'DropdownMenuFooter';\n\nexport type DropdownMenuScrollViewportProps = React.HTMLAttributes<HTMLDivElement> &\n  VirtualListProps;\n\nexport const DropdownMenuScrollViewport = ({\n  children,\n  className,\n  getItemLabel,\n  keepMounted,\n  listItemHeight,\n  virtual,\n  ...rest\n}: DropdownMenuScrollViewportProps) => {\n  if (!virtual) {\n    return (\n      <div {...rest} className={clsx(sx(menuStyles.slotViewport), className)}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MenuVirtualList\n      {...rest}\n      className={className}\n      getItemLabel={getItemLabel}\n      itemSize={listItemHeight}\n      keepMounted={keepMounted}\n    >\n      {children}\n    </MenuVirtualList>\n  );\n};\n\nDropdownMenuScrollViewport.displayName = 'DropdownMenuScrollViewport';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n  return (\n    <Menu.Item\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuCheckboxItemProps) => {\n  return (\n    <Menu.CheckboxItem\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n  return (\n    <Menu.Separator\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.separator),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n  return (\n    <Menu.GroupLabel\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.groupLabel),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n  return (\n    <Menu.SubmenuTrigger\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContentImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuItemContentProps & { xstyle?: XStyle }) => {\n  return <div {...rest} className={clsx(sx([menuStyles.itemContent, xstyle]), className)} />;\n};\n\nexport const DropdownMenuItemContent = (props: DropdownMenuItemContentProps) => (\n  <DropdownMenuItemContentImpl {...props} />\n);\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIconImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuItemIconProps & { xstyle?: XStyle }) => {\n  return (\n    <span\n      {...rest}\n      className={clsx(sx([menuStyles.icon, xstyle], menuClassNames.icon), className)}\n    />\n  );\n};\n\nexport const DropdownMenuItemIcon = (props: DropdownMenuItemIconProps) => (\n  <DropdownMenuItemIconImpl {...props} />\n);\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n  className,\n  ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.labelGroup), className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.label, menuClassNames.label), className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.desc), className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.extra), className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n  return (\n    <span\n      {...rest}\n      className={clsx(sx(menuStyles.submenuArrow, menuClassNames.submenuArrow), className)}\n    />\n  );\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n  React.ComponentProps<typeof Menu.Item>,\n  'onClick'\n> & {\n  checked?: boolean;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n  checked: checkedProp,\n  className,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  onCheckedChange,\n  children,\n  ...rest\n}: DropdownMenuSwitchItemProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <Menu.Item\n      {...rest}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <span\n        style={{ display: 'inline-flex', marginInlineStart: 16 }}\n        onFocus={(e) => e.stopPropagation()}\n      >\n        <Switch\n          checked={checked}\n          disabled={disabled}\n          size=\"small\"\n          tabIndex={-1}\n          onChange={handleCheckedChange}\n          onClick={(_, e) => e.stopPropagation()}\n        />\n      </span>\n    </Menu.Item>\n  );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["clsx"],"sources":["../../src/DropdownMenu/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Menu } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport type React from 'react';\nimport { cloneElement, isValidElement, useCallback, useState } from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { getFloatingCollisionPadding } from '@/internal/floating';\nimport { MenuVirtualList, type VirtualListProps } from '@/internal/virtual';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { type styleProps } from '@/styles/stylex/props';\nimport Switch from '@/Switch';\nimport { getElementRef } from '@/utils/getElementRef';\nimport { mergeRefs, useMergeRefs } from '@/utils/mergeRefs';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../internal/zIndex';\nimport { menuClassNames, menuStyles } from './style';\nimport { type DropdownMenuPlacement } from './type';\n\nexport const DropdownMenuRoot: typeof Menu.Root = (props) => <Menu.Root modal={false} {...props} />;\nexport const DropdownMenuSubmenuRoot = Menu.SubmenuRoot;\nexport const DropdownMenuCheckboxItemIndicator = Menu.CheckboxItemIndicator;\n\ntype XStyle = Parameters<typeof styleProps>[0];\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => clsx(base, className(state));\n  return clsx(base, className);\n};\n\nconst sx = (styles: XStyle, stableClassName?: string) =>\n  clsx(stylex.props(styles).className, stableClassName);\n\nconst itemClassName = (danger: boolean | undefined) =>\n  sx([menuStyles.item, danger && menuStyles.danger]);\n\nexport type DropdownMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Menu.Trigger>,\n  'children' | 'render'\n> & {\n  children: React.ReactNode;\n};\n\nexport const DropdownMenuTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: DropdownMenuTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\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, ...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      className: clsx(CLASSNAMES.DropdownMenuTrigger, className, mergedProps.className),\n      ref: mergeRefs([getElementRef(children), (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return <Menu.Trigger {...rest} nativeButton={resolvedNativeButton} render={renderer as any} />;\n  }\n\n  return (\n    <Menu.Trigger\n      {...rest}\n      className={clsx(CLASSNAMES.DropdownMenuTrigger, className)}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Menu.Trigger>\n  );\n};\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\nexport type DropdownMenuPortalProps = React.ComponentProps<typeof Menu.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const DropdownMenuPortal = ({ container, ...rest }: DropdownMenuPortalProps) => {\n  const appElement = useAppElement();\n  return <Menu.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nDropdownMenuPortal.displayName = 'DropdownMenuPortal';\n\nexport type DropdownMenuPositionerProps = React.ComponentProps<typeof Menu.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: DropdownMenuPlacement;\n};\n\nexport const DropdownMenuPositioner = ({\n  className,\n  collisionPadding,\n  placement,\n  hoverTrigger,\n  align,\n  side,\n  sideOffset,\n  children,\n  style,\n  ...rest\n}: DropdownMenuPositionerProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\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    <Menu.Positioner\n      {...rest}\n      align={align ?? placementConfig?.align}\n      collisionPadding={collisionPadding ?? getFloatingCollisionPadding()}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side}\n      sideOffset={sideOffset ?? (placementConfig ? 6 : undefined)}\n      style={resolvedStyle}\n      className={\n        mergeStateClassName(\n          sx(menuStyles.positioner, menuClassNames.positioner),\n          className as any,\n        ) as any\n      }\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </Menu.Positioner>\n  );\n};\n\nDropdownMenuPositioner.displayName = 'DropdownMenuPositioner';\n\nexport type DropdownMenuPopupProps = React.ComponentProps<typeof Menu.Popup>;\n\nexport const DropdownMenuPopupImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuPopupProps & { xstyle?: XStyle }) => {\n  return (\n    <Menu.Popup\n      {...rest}\n      className={\n        mergeStateClassName(\n          sx([menuStyles.popup, xstyle], menuClassNames.popup),\n          className as any,\n        ) as any\n      }\n    />\n  );\n};\n\nexport const DropdownMenuPopup = (props: DropdownMenuPopupProps) => (\n  <DropdownMenuPopupImpl {...props} />\n);\n\nDropdownMenuPopup.displayName = 'DropdownMenuPopup';\n\nexport type DropdownMenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuHeader = ({ className, ...rest }: DropdownMenuHeaderProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.header), className)} data-slot=\"header\" />;\n};\n\nDropdownMenuHeader.displayName = 'DropdownMenuHeader';\n\nexport type DropdownMenuFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuFooter = ({ className, ...rest }: DropdownMenuFooterProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.footer), className)} data-slot=\"footer\" />;\n};\n\nDropdownMenuFooter.displayName = 'DropdownMenuFooter';\n\nexport type DropdownMenuScrollViewportProps = React.HTMLAttributes<HTMLDivElement> &\n  VirtualListProps;\n\nexport const DropdownMenuScrollViewport = ({\n  children,\n  className,\n  getItemLabel,\n  keepMounted,\n  listItemHeight,\n  virtual,\n  ...rest\n}: DropdownMenuScrollViewportProps) => {\n  if (!virtual) {\n    return (\n      <div {...rest} className={clsx(sx(menuStyles.slotViewport), className)}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MenuVirtualList\n      {...rest}\n      className={className}\n      getItemLabel={getItemLabel}\n      itemSize={listItemHeight}\n      keepMounted={keepMounted}\n    >\n      {children}\n    </MenuVirtualList>\n  );\n};\n\nDropdownMenuScrollViewport.displayName = 'DropdownMenuScrollViewport';\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof Menu.Item> & { danger?: boolean };\n\nexport const DropdownMenuItem = ({ className, danger, ...rest }: DropdownMenuItemProps) => {\n  return (\n    <Menu.Item\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\nexport type DropdownMenuCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuCheckboxItemPrimitive = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuCheckboxItemProps) => {\n  return (\n    <Menu.CheckboxItem\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuCheckboxItemPrimitive.displayName = 'DropdownMenuCheckboxItemPrimitive';\n\nexport type DropdownMenuSeparatorProps = React.ComponentProps<typeof Menu.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...rest }: DropdownMenuSeparatorProps) => {\n  return (\n    <Menu.Separator\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.separator),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\nexport const DropdownMenuGroup = Menu.Group;\n\nexport type DropdownMenuGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>;\n\nexport const DropdownMenuGroupLabel = ({ className, ...rest }: DropdownMenuGroupLabelProps) => {\n  return (\n    <Menu.GroupLabel\n      {...rest}\n      className={(state) =>\n        clsx(\n          sx(menuStyles.groupLabel),\n          typeof className === 'function' ? className(state) : className,\n        )\n      }\n    />\n  );\n};\n\nDropdownMenuGroupLabel.displayName = 'DropdownMenuGroupLabel';\n\nexport type DropdownMenuSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger> & {\n  danger?: boolean;\n};\n\nexport const DropdownMenuSubmenuTrigger = ({\n  className,\n  danger,\n  ...rest\n}: DropdownMenuSubmenuTriggerProps) => {\n  return (\n    <Menu.SubmenuTrigger\n      {...rest}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n    />\n  );\n};\n\nDropdownMenuSubmenuTrigger.displayName = 'DropdownMenuSubmenuTrigger';\n\nexport type DropdownMenuItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemContentImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuItemContentProps & { xstyle?: XStyle }) => {\n  return <div {...rest} className={clsx(sx([menuStyles.itemContent, xstyle]), className)} />;\n};\n\nexport const DropdownMenuItemContent = (props: DropdownMenuItemContentProps) => (\n  <DropdownMenuItemContentImpl {...props} />\n);\n\nDropdownMenuItemContent.displayName = 'DropdownMenuItemContent';\n\nexport type DropdownMenuItemIconProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemIconImpl = ({\n  className,\n  xstyle,\n  ...rest\n}: DropdownMenuItemIconProps & { xstyle?: XStyle }) => {\n  return (\n    <span\n      {...rest}\n      className={clsx(sx([menuStyles.icon, xstyle], menuClassNames.icon), className)}\n    />\n  );\n};\n\nexport const DropdownMenuItemIcon = (props: DropdownMenuItemIconProps) => (\n  <DropdownMenuItemIconImpl {...props} />\n);\n\nDropdownMenuItemIcon.displayName = 'DropdownMenuItemIcon';\n\nexport type DropdownMenuItemLabelGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const DropdownMenuItemLabelGroup = ({\n  className,\n  ...rest\n}: DropdownMenuItemLabelGroupProps) => {\n  return <div {...rest} className={clsx(sx(menuStyles.labelGroup), className)} />;\n};\n\nDropdownMenuItemLabelGroup.displayName = 'DropdownMenuItemLabelGroup';\n\nexport type DropdownMenuItemLabelProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemLabel = ({ className, ...rest }: DropdownMenuItemLabelProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.label, menuClassNames.label), className)} />;\n};\n\nDropdownMenuItemLabel.displayName = 'DropdownMenuItemLabel';\n\nexport type DropdownMenuItemDescProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemDesc = ({ className, ...rest }: DropdownMenuItemDescProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.desc), className)} />;\n};\n\nDropdownMenuItemDesc.displayName = 'DropdownMenuItemDesc';\n\nexport type DropdownMenuItemExtraProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuItemExtra = ({ className, ...rest }: DropdownMenuItemExtraProps) => {\n  return <span {...rest} className={clsx(sx(menuStyles.extra), className)} />;\n};\n\nDropdownMenuItemExtra.displayName = 'DropdownMenuItemExtra';\n\nexport type DropdownMenuSubmenuArrowProps = React.HTMLAttributes<HTMLSpanElement>;\n\nexport const DropdownMenuSubmenuArrow = ({ className, ...rest }: DropdownMenuSubmenuArrowProps) => {\n  return (\n    <span\n      {...rest}\n      className={clsx(sx(menuStyles.submenuArrow, menuClassNames.submenuArrow), className)}\n    />\n  );\n};\n\nDropdownMenuSubmenuArrow.displayName = 'DropdownMenuSubmenuArrow';\n\nexport type DropdownMenuSwitchItemProps = Omit<\n  React.ComponentProps<typeof Menu.Item>,\n  'onClick'\n> & {\n  checked?: boolean;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport const DropdownMenuSwitchItem = ({\n  checked: checkedProp,\n  className,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  onCheckedChange,\n  children,\n  ...rest\n}: DropdownMenuSwitchItemProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <Menu.Item\n      {...rest}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      className={(state) =>\n        clsx(itemClassName(danger), typeof className === 'function' ? className(state) : className)\n      }\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <span\n        style={{ display: 'inline-flex', marginInlineStart: 16 }}\n        onFocus={(e) => e.stopPropagation()}\n      >\n        <Switch\n          checked={checked}\n          disabled={disabled}\n          size=\"small\"\n          tabIndex={-1}\n          onChange={handleCheckedChange}\n          onClick={(_, e) => e.stopPropagation()}\n        />\n      </span>\n    </Menu.Item>\n  );\n};\n\nDropdownMenuSwitchItem.displayName = 'DropdownMenuSwitchItem';\n"],"mappings":"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"}

package/es/FloatingPanel/style.mjs

@@ -1,5 +1,6 @@
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
 //#region src/FloatingPanel/style.ts
-const dodge = `608ms linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)`;
+const dodge = `608ms ${cssVar.motionSpringSnappy}`;
 `${dodge}${dodge}${dodge}${dodge}`;
 const styles = {
 	actions: {
@@ -156,7 +157,7 @@ const styles = {
 	},
 	wrapper: {
 		kVQacm: "lbb3r6kr",
-		kmkexE: "lbon1zjq",
+		kmkexE: "lbchz62r",
 		kIyJzY: "lb12w9bfk",
 		k1ekBW: "lb4wkmsb",
 		kAMwcw: "lb7v8fk2",

package/es/FloatingPanel/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FloatingPanel/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst dodgeDuration = '608ms';\nconst dodgeEase =\n  'linear(0, 0.08, 0.249, 0.437, 0.607, 0.745, 0.847, 0.917, 0.963, 0.99, 1.004, 1.011, 1.012, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1)';\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst dodge = `${dodgeDuration} ${dodgeEase}`;\nconst wrapperTransition = `padding-block-end ${dodge}, padding-block-start ${dodge}, padding-inline-end ${dodge}, padding-inline-start ${dodge}`;\nconst handleActive = ':is(:hover, :focus-visible)';\n\nexport const styles = stylex.create({\n  actions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  body: {\n    flex: '1',\n    paddingInline: 0,\n    paddingBlockEnd: 0,\n    paddingBlockStart: 0,\n    minHeight: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n  close: {\n    borderRadius: 8,\n    marginInlineEnd: -4,\n    position: 'static',\n    height: 32,\n    width: 32,\n  },\n  footer: {\n    flex: 'none',\n    borderBlockStartColor: cssVar.colorBorderSecondary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  header: {\n    flex: 'none',\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    minHeight: 48,\n  },\n  headerActions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  panel: {\n    borderRadius: 12,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    transformOrigin: '100% 100%',\n    maxHeight: 'calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px))',\n    width: 'calc(100dvw - 32px)',\n  },\n  panelTop: {\n    transformOrigin: '100% 0',\n  },\n  resizeHandle: {\n    'backgroundColor': 'transparent',\n    'position': 'absolute',\n    'touchAction': 'none',\n    'zIndex': 1,\n    '::after': {\n      borderRadius: 999,\n      transition: 'opacity 120ms ease',\n      backgroundColor: cssVar.colorPrimary,\n      content: '\"\"',\n      opacity: { default: 0, [handleActive]: 0.55 },\n      position: 'absolute',\n    },\n  },\n  resizeHandleBottom: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockEnd': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockEnd: 3,\n      height: 2,\n    },\n  },\n  resizeHandleBottomLeft: {\n    cursor: 'nesw-resize',\n    insetBlockEnd: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleBottomRight: {\n    cursor: 'nwse-resize',\n    insetBlockEnd: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleLeft: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineStart': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineStart: 3,\n      width: 2,\n    },\n  },\n  resizeHandleRight: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineEnd': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineEnd: 3,\n      width: 2,\n    },\n  },\n  resizeHandleTop: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockStart': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockStart: 3,\n      height: 2,\n    },\n  },\n  resizeHandleTopLeft: {\n    cursor: 'nwse-resize',\n    insetBlockStart: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleTopRight: {\n    cursor: 'nesw-resize',\n    insetBlockStart: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  title: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n  wrapper: {\n    overflow: 'hidden',\n    transition: wrapperTransition,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    transitionProperty: { default: null, [reducedMotion]: 'none' },\n    transitionTimingFunction: { default: null, [reducedMotion]: 'ease' },\n  },\n});\n"],"mappings":";AAMA,MAAM,QAAQ;AACY,GAAqB,QAA8B,QAA6B,QAA+B;AAEzI,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,yBAAyB;EACvB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/FloatingPanel/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst dodgeDuration = '608ms';\nconst dodgeEase = cssVar.motionSpringSnappy;\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst dodge = `${dodgeDuration} ${dodgeEase}`;\nconst wrapperTransition = `padding-block-end ${dodge}, padding-block-start ${dodge}, padding-inline-end ${dodge}, padding-inline-start ${dodge}`;\nconst handleActive = ':is(:hover, :focus-visible)';\n\nexport const styles = stylex.create({\n  actions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  body: {\n    flex: '1',\n    paddingInline: 0,\n    paddingBlockEnd: 0,\n    paddingBlockStart: 0,\n    minHeight: 0,\n    overflowX: 'hidden',\n    overflowY: 'auto',\n  },\n  close: {\n    borderRadius: 8,\n    marginInlineEnd: -4,\n    position: 'static',\n    height: 32,\n    width: 32,\n  },\n  footer: {\n    flex: 'none',\n    borderBlockStartColor: cssVar.colorBorderSecondary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  header: {\n    flex: 'none',\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    minHeight: 48,\n  },\n  headerActions: {\n    flex: 'none',\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n  },\n  panel: {\n    borderRadius: 12,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    transformOrigin: '100% 100%',\n    maxHeight: 'calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px))',\n    width: 'calc(100dvw - 32px)',\n  },\n  panelTop: {\n    transformOrigin: '100% 0',\n  },\n  resizeHandle: {\n    'backgroundColor': 'transparent',\n    'position': 'absolute',\n    'touchAction': 'none',\n    'zIndex': 1,\n    '::after': {\n      borderRadius: 999,\n      transition: 'opacity 120ms ease',\n      backgroundColor: cssVar.colorPrimary,\n      content: '\"\"',\n      opacity: { default: 0, [handleActive]: 0.55 },\n      position: 'absolute',\n    },\n  },\n  resizeHandleBottom: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockEnd': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockEnd: 3,\n      height: 2,\n    },\n  },\n  resizeHandleBottomLeft: {\n    cursor: 'nesw-resize',\n    insetBlockEnd: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleBottomRight: {\n    cursor: 'nwse-resize',\n    insetBlockEnd: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleLeft: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineStart': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineStart: 3,\n      width: 2,\n    },\n  },\n  resizeHandleRight: {\n    'insetBlock': 16,\n    'cursor': 'ew-resize',\n    'insetInlineEnd': -4,\n    'width': 8,\n    '::after': {\n      insetBlock: 0,\n      insetInlineEnd: 3,\n      width: 2,\n    },\n  },\n  resizeHandleTop: {\n    'insetInline': 16,\n    'cursor': 'ns-resize',\n    'insetBlockStart': -4,\n    'height': 8,\n    '::after': {\n      insetInline: 0,\n      insetBlockStart: 3,\n      height: 2,\n    },\n  },\n  resizeHandleTopLeft: {\n    cursor: 'nwse-resize',\n    insetBlockStart: -5,\n    insetInlineStart: -5,\n    height: 16,\n    width: 16,\n  },\n  resizeHandleTopRight: {\n    cursor: 'nesw-resize',\n    insetBlockStart: -5,\n    insetInlineEnd: -5,\n    height: 16,\n    width: 16,\n  },\n  title: {\n    flex: '1',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    minWidth: 0,\n  },\n  wrapper: {\n    overflow: 'hidden',\n    transition: wrapperTransition,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    transitionProperty: { default: null, [reducedMotion]: 'none' },\n    transitionTimingFunction: { default: null, [reducedMotion]: 'ease' },\n  },\n});\n"],"mappings":";;AAMA,MAAM,QAAQ,SAFI,OAAO;AAGC,GAAqB,QAA8B,QAA6B,QAA+B;AAEzI,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,yBAAyB;EACvB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Form/Form.mjs

@@ -17,7 +17,9 @@ const serializeForm = (form) => {
 	const entries = [...new FormData(form).entries()].filter(([, value]) => typeof value === "string");
 	return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));
 };
-const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, itemsType = "group", variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, onFormSubmit, layout, ref, ...rest }) => {
+const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, itemsType = "group", variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, onFormSubmit, layout, ref, compact, itemPadding, ...rest }) => {
+	const resolvedGap = gap ?? (compact ? 12 : void 0);
+	const resolvedItemPadding = itemPadding ?? (compact ? 10 : void 0);
 	const { mobile } = useResponsive();
 	const formRef = useRef(null);
 	const [submitLoading, setSubmitLoading] = useState(false);
@@ -124,7 +126,9 @@ const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, it
 				rootStyles.root,
 				variant === "borderless" && rootStyles.borderless
 			], className, {
-				gap,
+				gap: resolvedGap,
+				...resolvedGap === void 0 ? void 0 : { "--lobe-form-gap": typeof resolvedGap === "number" ? `${resolvedGap}px` : resolvedGap },
+				...resolvedItemPadding === void 0 ? void 0 : { "--lobe-form-item-padding-block": typeof resolvedItemPadding === "number" ? `${resolvedItemPadding}px` : resolvedItemPadding },
 				...style
 			}),
 			onFormSubmit: async (values, eventDetails) => {

package/es/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n  if (!form) return '';\n  const entries = [...new FormData(form).entries()].filter(\n    ([, value]) => typeof value === 'string',\n  ) as [string, string][];\n  return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    items = [],\n    children,\n    itemsType = 'group',\n    variant = 'borderless',\n    classNames,\n    styles: customStyles,\n    gap,\n    style,\n    collapsible,\n    defaultActiveKey,\n    initialValues,\n    activeKey,\n    onCollapse,\n    onFinish,\n    onFormSubmit,\n    layout,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const formRef = useRef<HTMLFormElement>(null);\n    const [submitLoading, setSubmitLoading] = useState(false);\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const snapshotRef = useRef('');\n\n    const syncUnsaved = useCallback(() => {\n      setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n    }, []);\n\n    useEffect(() => {\n      const form = formRef.current;\n      if (!form) return;\n      snapshotRef.current = serializeForm(form);\n      let resetTimer: ReturnType<typeof setTimeout>;\n      const handleMutation = () => syncUnsaved();\n      const handleReset = () => {\n        resetTimer = setTimeout(() => {\n          snapshotRef.current = serializeForm(formRef.current);\n          syncUnsaved();\n        }, 0);\n      };\n      form.addEventListener('input', handleMutation);\n      form.addEventListener('change', handleMutation);\n      form.addEventListener('reset', handleReset);\n      return () => {\n        clearTimeout(resetTimer);\n        form.removeEventListener('input', handleMutation);\n        form.removeEventListener('change', handleMutation);\n        form.removeEventListener('reset', handleReset);\n      };\n    }, [syncUnsaved]);\n\n    const requestReset = useCallback(() => {\n      formRef.current?.reset();\n    }, []);\n\n    const mergedRef = useCallback(\n      (node: HTMLFormElement | null) => {\n        formRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const context = useMemo(\n      () => ({\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n        requestReset,\n        submitLoading,\n        variant,\n      }),\n      [\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout,\n        mobile,\n        requestReset,\n        submitLoading,\n        variant,\n      ],\n    );\n\n    const mapFlat = useCallback(\n      (item: FormFieldProps, itemIndex: number) => (\n        <FormField\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [variant, classNames, customStyles],\n    );\n\n    const mapTree = useCallback(\n      (group: FormGroupItemType, groupIndex: number) => {\n        const key = group?.key || groupIndex;\n        return (\n          <FormGroup\n            active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n            className={classNames?.group}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            desc={group?.desc}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            style={customStyles?.group}\n            title={group.title}\n            variant={group?.variant || variant}\n            defaultActive={\n              defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n            }\n            onCollapse={(active) => {\n              let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n              keys = keys.filter((k) => k !== key);\n              onCollapse?.(active ? [...keys, key] : keys);\n            }}\n          >\n            {Array.isArray(group.children)\n              ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n              : group.children}\n          </FormGroup>\n        );\n      },\n      [\n        activeKey,\n        collapsible,\n        defaultActiveKey,\n        onCollapse,\n        variant,\n        classNames,\n        customStyles,\n        mapFlat,\n      ],\n    );\n\n    return (\n      <FormContext value={context}>\n        <BaseForm\n          ref={mergedRef}\n          {...styleProps(\n            [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n            className,\n            { gap, ...style },\n          )}\n          onFormSubmit={async (values, eventDetails) => {\n            onFormSubmit?.(values, eventDetails);\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            try {\n              await onFinish(values, eventDetails);\n              snapshotRef.current = serializeForm(formRef.current);\n              syncUnsaved();\n            } finally {\n              setSubmitLoading(false);\n            }\n          }}\n          {...rest}\n        >\n          {items && items.length > 0 ? (\n            itemsType === 'group' ? (\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n            ) : (\n              <FormFlatGroup\n                className={classNames?.group}\n                style={customStyles?.group}\n                variant={variant}\n              >\n                {(items as FormFieldProps[])\n                  .filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </BaseForm>\n      </FormContext>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}
+{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n  if (!form) return '';\n  const entries = [...new FormData(form).entries()].filter(\n    ([, value]) => typeof value === 'string',\n  ) as [string, string][];\n  return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    items = [],\n    children,\n    itemsType = 'group',\n    variant = 'borderless',\n    classNames,\n    styles: customStyles,\n    gap,\n    style,\n    collapsible,\n    defaultActiveKey,\n    initialValues,\n    activeKey,\n    onCollapse,\n    onFinish,\n    onFormSubmit,\n    layout,\n    ref,\n    compact,\n    itemPadding,\n    ...rest\n  }) => {\n    const resolvedGap = gap ?? (compact ? 12 : undefined);\n    const resolvedItemPadding = itemPadding ?? (compact ? 10 : undefined);\n    const { mobile } = useResponsive();\n    const formRef = useRef<HTMLFormElement>(null);\n    const [submitLoading, setSubmitLoading] = useState(false);\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const snapshotRef = useRef('');\n\n    const syncUnsaved = useCallback(() => {\n      setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n    }, []);\n\n    useEffect(() => {\n      const form = formRef.current;\n      if (!form) return;\n      snapshotRef.current = serializeForm(form);\n      let resetTimer: ReturnType<typeof setTimeout>;\n      const handleMutation = () => syncUnsaved();\n      const handleReset = () => {\n        resetTimer = setTimeout(() => {\n          snapshotRef.current = serializeForm(formRef.current);\n          syncUnsaved();\n        }, 0);\n      };\n      form.addEventListener('input', handleMutation);\n      form.addEventListener('change', handleMutation);\n      form.addEventListener('reset', handleReset);\n      return () => {\n        clearTimeout(resetTimer);\n        form.removeEventListener('input', handleMutation);\n        form.removeEventListener('change', handleMutation);\n        form.removeEventListener('reset', handleReset);\n      };\n    }, [syncUnsaved]);\n\n    const requestReset = useCallback(() => {\n      formRef.current?.reset();\n    }, []);\n\n    const mergedRef = useCallback(\n      (node: HTMLFormElement | null) => {\n        formRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const context = useMemo(\n      () => ({\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n        requestReset,\n        submitLoading,\n        variant,\n      }),\n      [\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout,\n        mobile,\n        requestReset,\n        submitLoading,\n        variant,\n      ],\n    );\n\n    const mapFlat = useCallback(\n      (item: FormFieldProps, itemIndex: number) => (\n        <FormField\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [variant, classNames, customStyles],\n    );\n\n    const mapTree = useCallback(\n      (group: FormGroupItemType, groupIndex: number) => {\n        const key = group?.key || groupIndex;\n        return (\n          <FormGroup\n            active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n            className={classNames?.group}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            desc={group?.desc}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            style={customStyles?.group}\n            title={group.title}\n            variant={group?.variant || variant}\n            defaultActive={\n              defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n            }\n            onCollapse={(active) => {\n              let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n              keys = keys.filter((k) => k !== key);\n              onCollapse?.(active ? [...keys, key] : keys);\n            }}\n          >\n            {Array.isArray(group.children)\n              ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n              : group.children}\n          </FormGroup>\n        );\n      },\n      [\n        activeKey,\n        collapsible,\n        defaultActiveKey,\n        onCollapse,\n        variant,\n        classNames,\n        customStyles,\n        mapFlat,\n      ],\n    );\n\n    return (\n      <FormContext value={context}>\n        <BaseForm\n          ref={mergedRef}\n          {...styleProps(\n            [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n            className,\n            {\n              gap: resolvedGap,\n              ...(resolvedGap === undefined\n                ? undefined\n                : {\n                    '--lobe-form-gap':\n                      typeof resolvedGap === 'number' ? `${resolvedGap}px` : resolvedGap,\n                  }),\n              ...(resolvedItemPadding === undefined\n                ? undefined\n                : {\n                    '--lobe-form-item-padding-block':\n                      typeof resolvedItemPadding === 'number'\n                        ? `${resolvedItemPadding}px`\n                        : resolvedItemPadding,\n                  }),\n              ...style,\n            },\n          )}\n          onFormSubmit={async (values, eventDetails) => {\n            onFormSubmit?.(values, eventDetails);\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            try {\n              await onFinish(values, eventDetails);\n              snapshotRef.current = serializeForm(formRef.current);\n              syncUnsaved();\n            } finally {\n              setSubmitLoading(false);\n            }\n          }}\n          {...rest}\n        >\n          {items && items.length > 0 ? (\n            itemsType === 'group' ? (\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n            ) : (\n              <FormFlatGroup\n                className={classNames?.group}\n                style={customStyles?.group}\n                variant={variant}\n              >\n                {(items as FormFieldProps[])\n                  .filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </BaseForm>\n      </FormContext>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,iBAAiB,SAAiC;CACtD,IAAI,CAAC,MAAM,OAAO;CAClB,MAAM,UAAU,CAAC,GAAG,IAAI,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAC/C,GAAG,WAAW,OAAO,UAAU,QAClC;CACA,OAAO,KAAK,UAAU,QAAQ,MAAM,GAAG,MAAM,EAAE,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;AACxE;AAEA,MAAMA,SAAO,MACV,EACC,WACA,cACA,QACA,QAAQ,CAAC,GACT,UACA,YAAY,SACZ,UAAU,cACV,YACA,QAAQ,cACR,KACA,OACA,aACA,kBACA,eACA,WACA,YACA,UACA,cACA,QACA,KACA,SACA,aACA,GAAG,WACC;CACJ,MAAM,cAAc,QAAQ,UAAU,KAAK,KAAA;CAC3C,MAAM,sBAAsB,gBAAgB,UAAU,KAAK,KAAA;CAC3D,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,UAAU,OAAwB,IAAI;CAC5C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,cAAc,OAAO,EAAE;CAE7B,MAAM,cAAc,kBAAkB;EACpC,qBAAqB,cAAc,QAAQ,OAAO,MAAM,YAAY,OAAO;CAC7E,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,YAAY,UAAU,cAAc,IAAI;EACxC,IAAI;EACJ,MAAM,uBAAuB,YAAY;EACzC,MAAM,oBAAoB;GACxB,aAAa,iBAAiB;IAC5B,YAAY,UAAU,cAAc,QAAQ,OAAO;IACnD,YAAY;GACd,GAAG,CAAC;EACN;EACA,KAAK,iBAAiB,SAAS,cAAc;EAC7C,KAAK,iBAAiB,UAAU,cAAc;EAC9C,KAAK,iBAAiB,SAAS,WAAW;EAC1C,aAAa;GACX,aAAa,UAAU;GACvB,KAAK,oBAAoB,SAAS,cAAc;GAChD,KAAK,oBAAoB,UAAU,cAAc;GACjD,KAAK,oBAAoB,SAAS,WAAW;EAC/C;CACF,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,eAAe,kBAAkB;EACrC,QAAQ,SAAS,MAAM;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,aACf,SAAiC;EAChC,QAAQ,UAAU;EAClB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAI,UAAU;CAC9B,GACA,CAAC,GAAG,CACN;CAEA,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA,QAAQ,WAAW,SAAU,aAAwB;EACrD;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,UAAU,aACb,MAAsB,cACrB,oBAAC,WAAD;EACE,WAAW,YAAY;EACvB,SAAS,cAAc;EAEvB,OAAO,cAAc;EACZ;EACT,GAAI;CACL,GAJM,SAIN,GAEH;EAAC;EAAS;EAAY;CAAY,CACpC;CAEA,MAAM,UAAU,aACb,OAA0B,eAAuB;EAChD,MAAM,MAAM,OAAO,OAAO;EAC1B,OACE,oBAAC,WAAD;GACE,QAAQ,aAAa,OAAO,MAAM,UAAU,SAAS,GAAG,IAAI,KAAA;GAC5D,WAAW,YAAY;GACvB,aAAa,YAAY,MAAM,WAAW,IAAI,cAAc,MAAM;GAClE,MAAM,OAAO;GACb,OAAO,OAAO;GACd,MAAM,OAAO;GAEb,OAAO,cAAc;GACrB,OAAO,MAAM;GACb,SAAS,OAAO,WAAW;GAC3B,eACE,oBAAoB,OAAO,MAAM,iBAAiB,SAAS,GAAG,IAAI,OAAO;GAE3E,aAAa,WAAW;IACtB,IAAI,OAA4B,aAAa,oBAAoB,CAAC;IAClE,OAAO,KAAK,QAAQ,MAAM,MAAM,GAAG;IACnC,aAAa,SAAS,CAAC,GAAG,MAAM,GAAG,IAAI,IAAI;GAC7C;GAEC,UAAA,MAAM,QAAQ,MAAM,QAAQ,IACzB,MAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC,IAC/E,MAAM;EACD,GAhBJ,GAgBI;CAEf,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,aAAD;EAAa,OAAO;EAClB,UAAA,qBAACC,MAAD;GACE,KAAK;GACL,GAAI,WACF;IAAC;IAAY,WAAW;IAAM,YAAY,gBAAgB,WAAW;GAAU,GAC/E,WACA;IACE,KAAK;IACL,GAAI,gBAAgB,KAAA,IAChB,KAAA,IACA,EACE,mBACE,OAAO,gBAAgB,WAAW,GAAG,YAAY,MAAM,YAC3D;IACJ,GAAI,wBAAwB,KAAA,IACxB,KAAA,IACA,EACE,kCACE,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACR;IACJ,GAAG;GACL,CACF;GACA,cAAc,OAAO,QAAQ,iBAAiB;IAC5C,eAAe,QAAQ,YAAY;IACnC,IAAI,CAAC,UAAU;IACf,iBAAiB,IAAI;IACrB,IAAI;KACF,MAAM,SAAS,QAAQ,YAAY;KACnC,YAAY,UAAU,cAAc,QAAQ,OAAO;KACnD,YAAY;IACd,UAAU;KACR,iBAAiB,KAAK;IACxB;GACF;GACA,GAAI;GApCN,UAAA;IAsCG,SAAS,MAAM,SAAS,IACvB,cAAc,UACX,MAA8B,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC,IAEhE,oBAAC,eAAD;KACE,WAAW,YAAY;KACvB,OAAO,cAAc;KACZ;KAEP,UAAA,MACC,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAC9B,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC;IACvB,CAAA,IAEf,KAAA;IACH;IACA;GACO;;CACC,CAAA;AAEjB,CACF;AAEA,OAAK,cAAc"}

package/es/Form/style.mjs

@@ -1,11 +1,11 @@
 //#region src/Form/style.ts
 const rootStyles = {
 	borderless: {
-		kOIVth: "lb1y9zxd1 lb1q0xmy4",
+		kOIVth: "lb1y9zxd1 lbcptdvr",
 		$$css: true
 	},
 	root: {
-		kOIVth: "lbou54vl lb1q0xmy4",
+		kOIVth: "lbou54vl lbcptdvr",
 		k1xSpc: "lb78zum5",
 		kXwgrk: "lbdt5ytf",
 		kVAEAm: "lb1n2onr6",
@@ -47,7 +47,7 @@ const fieldStyles = {
 	},
 	root: {
 		kOIVth: "lb1v2ro7d",
-		k8WAf4: "lb1xn8qrt",
+		k8WAf4: "lby0ca47",
 		kB7OPa: "lb9f619",
 		k1xSpc: "lb78zum5",
 		kzqmXN: "lbh8yej3",

package/es/Form/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Form/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nimport { formGroupTriggerMarker, formMarker } from './marker.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const rootStyles = stylex.create({\n  borderless: {\n    gap: { default: 48, [media.sm]: '0 !important' },\n  },\n  root: {\n    gap: { default: 16, [media.sm]: '0 !important' },\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    width: '100%',\n  },\n});\n\nexport const fieldStyles = stylex.create({\n  control: {\n    gap: 4,\n    alignItems: 'flex-end',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 'var(--form-field-min-width, unset)',\n  },\n  controlVertical: {\n    alignItems: 'stretch',\n    width: '100%',\n  },\n  error: {\n    color: cssVar.colorError,\n    fontSize: 12,\n  },\n  horizontal: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  label: {\n    flex: '1',\n    display: 'block',\n    textAlign: 'start',\n    maxWidth: '100%',\n  },\n  root: {\n    gap: 12,\n    paddingBlock: 16,\n    boxSizing: 'border-box',\n    display: 'flex',\n    width: '100%',\n  },\n  vertical: {\n    gap: 8,\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\nexport const fieldLayoutStyles = {\n  horizontal: fieldStyles.horizontal,\n  vertical: fieldStyles.vertical,\n};\n\nexport const dividerStyles = stylex.create({\n  root: {\n    margin: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    backgroundColor: cssVar.colorBorderSecondary,\n    height: 1,\n    width: '100%',\n  },\n});\n\nexport const groupStyles = stylex.create({\n  body: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  bodyBoxed: {\n    paddingBlock: { default: 16, [stylex.when.ancestor(':is(*)', formMarker)]: 0 },\n    paddingInline: 16,\n  },\n  bodyFilled: {\n    borderRadius: cssVar.borderRadius,\n    marginInline: 3,\n    marginBlockEnd: 3,\n  },\n  bodyFilledLight: {\n    boxShadow: `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}`,\n  },\n  chevron: {\n    flex: 'none',\n    transition: `transform 200ms ${cssVar.motionEaseOut}`,\n    color: cssVar.colorTextDescription,\n    transform: {\n      default: null,\n      [stylex.when.ancestor('[data-panel-open]', formGroupTriggerMarker)]: 'rotate(180deg)',\n    },\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n    fontSize: 12,\n    fontWeight: 400,\n  },\n  header: {\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n  headerBorderless: {\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    paddingBlockEnd: 16,\n  },\n  headerBoxed: {\n    padding: 16,\n  },\n  mobileBody: {\n    paddingBlock: 0,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgContainer,\n  },\n  mobileHeader: {\n    padding: 16,\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  mobileTitle: {\n    fontSize: 14,\n    fontWeight: 400,\n    opacity: 0.5,\n  },\n  panel: {\n    overflow: 'hidden',\n    transition: `height 200ms ${cssVar.motionEaseOut}`,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    height: {\n      'default': 'var(--collapsible-panel-height)',\n      ':is([data-starting-style], [data-ending-style])': 0,\n    },\n  },\n  rootFilled: {\n    borderRadius: cssVar.borderRadiusLG,\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  rootFilledDark: {\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  rootOutlined: {\n    borderRadius: cssVar.borderRadiusLG,\n  },\n  title: {\n    gap: 8,\n    alignItems: 'center',\n    color: cssVar.colorText,\n    display: 'flex',\n    flexShrink: 0,\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  titleBorderless: {\n    fontSize: 18,\n  },\n  trigger: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: '1',\n    gap: 12,\n    outline: 'none',\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    cursor: 'pointer',\n    display: 'flex',\n    textAlign: 'start',\n  },\n});\n\nexport const flatGroupStyles = stylex.create({\n  borderless: {\n    paddingInline: 0,\n  },\n  filled: {\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  mobile: {\n    borderRadius: 0,\n    paddingBlock: 0,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgContainer,\n  },\n  root: {\n    borderRadius: cssVar.borderRadiusLG,\n    paddingInline: 16,\n  },\n});\n\nexport const footerStyles = stylex.create({\n  root: {\n    padding: { default: null, [media.sm]: 16 },\n    backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n    borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n    borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n    borderBlockStartWidth: { default: null, [media.sm]: 1 },\n  },\n});\n\nexport const submitFooterStyles = stylex.create({\n  floatFooter: {\n    padding: 8,\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: 48,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: cssVar.boxShadowSecondary,\n    insetBlockEnd: 24,\n    insetInlineStart: '50%',\n    position: 'fixed',\n    transform: 'translateX(-50%)',\n    zIndex: 1000,\n    width: 'max-content',\n  },\n  footer: {\n    padding: { default: null, [media.sm]: 16 },\n    backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n    borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n    borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n    borderBlockStartWidth: { default: null, [media.sm]: 1 },\n    marginBlockStart: { default: null, [media.sm]: `calc(-1 * ${cssVar.borderRadius})` },\n  },\n});\n\nexport const titleStyles = stylex.create({\n  content: {\n    position: 'relative',\n    textAlign: 'start',\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n    display: 'block',\n    fontSize: 12,\n    fontWeight: 400,\n    lineHeight: 1.44,\n    overflowWrap: 'break-word',\n    whiteSpace: 'pre-wrap',\n  },\n  title: {\n    color: cssVar.colorText,\n    fontWeight: 500,\n    lineHeight: 1,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Form/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\n\nimport { formGroupTriggerMarker, formMarker } from './marker.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\n\nexport const rootStyles = stylex.create({\n  borderless: {\n    gap: { default: 48, [media.sm]: 'var(--lobe-form-gap, 0) !important' },\n  },\n  root: {\n    gap: { default: 16, [media.sm]: 'var(--lobe-form-gap, 0) !important' },\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n    width: '100%',\n  },\n});\n\nexport const fieldStyles = stylex.create({\n  control: {\n    gap: 4,\n    alignItems: 'flex-end',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 'var(--form-field-min-width, unset)',\n  },\n  controlVertical: {\n    alignItems: 'stretch',\n    width: '100%',\n  },\n  error: {\n    color: cssVar.colorError,\n    fontSize: 12,\n  },\n  horizontal: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  label: {\n    flex: '1',\n    display: 'block',\n    textAlign: 'start',\n    maxWidth: '100%',\n  },\n  root: {\n    gap: 12,\n    paddingBlock: 'var(--lobe-form-item-padding-block,16px)',\n    boxSizing: 'border-box',\n    display: 'flex',\n    width: '100%',\n  },\n  vertical: {\n    gap: 8,\n    alignItems: 'stretch',\n    flexDirection: 'column',\n  },\n});\n\nexport const fieldLayoutStyles = {\n  horizontal: fieldStyles.horizontal,\n  vertical: fieldStyles.vertical,\n};\n\nexport const dividerStyles = stylex.create({\n  root: {\n    margin: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    backgroundColor: cssVar.colorBorderSecondary,\n    height: 1,\n    width: '100%',\n  },\n});\n\nexport const groupStyles = stylex.create({\n  body: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  bodyBoxed: {\n    paddingBlock: { default: 16, [stylex.when.ancestor(':is(*)', formMarker)]: 0 },\n    paddingInline: 16,\n  },\n  bodyFilled: {\n    borderRadius: cssVar.borderRadius,\n    marginInline: 3,\n    marginBlockEnd: 3,\n  },\n  bodyFilledLight: {\n    boxShadow: `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}`,\n  },\n  chevron: {\n    flex: 'none',\n    transition: `transform 200ms ${cssVar.motionEaseOut}`,\n    color: cssVar.colorTextDescription,\n    transform: {\n      default: null,\n      [stylex.when.ancestor('[data-panel-open]', formGroupTriggerMarker)]: 'rotate(180deg)',\n    },\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n    fontSize: 12,\n    fontWeight: 400,\n  },\n  header: {\n    gap: 12,\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'space-between',\n    width: '100%',\n  },\n  headerBorderless: {\n    borderBlockEndColor: cssVar.colorBorderSecondary,\n    borderBlockEndStyle: 'solid',\n    borderBlockEndWidth: 1,\n    paddingBlockEnd: 16,\n  },\n  headerBoxed: {\n    padding: 16,\n  },\n  mobileBody: {\n    paddingBlock: 0,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgContainer,\n  },\n  mobileHeader: {\n    padding: 16,\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  mobileTitle: {\n    fontSize: 14,\n    fontWeight: 400,\n    opacity: 0.5,\n  },\n  panel: {\n    overflow: 'hidden',\n    transition: `height 200ms ${cssVar.motionEaseOut}`,\n    transitionDuration: { default: null, [reducedMotion]: '0s' },\n    height: {\n      'default': 'var(--collapsible-panel-height)',\n      ':is([data-starting-style], [data-ending-style])': 0,\n    },\n  },\n  rootFilled: {\n    borderRadius: cssVar.borderRadiusLG,\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  rootFilledDark: {\n    backgroundColor: cssVar.colorBgLayout,\n  },\n  rootOutlined: {\n    borderRadius: cssVar.borderRadiusLG,\n  },\n  title: {\n    gap: 8,\n    alignItems: 'center',\n    color: cssVar.colorText,\n    display: 'flex',\n    flexShrink: 0,\n    fontSize: 16,\n    fontWeight: 'bold',\n  },\n  titleBorderless: {\n    fontSize: 18,\n  },\n  trigger: {\n    margin: 0,\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderRadius: cssVar.borderRadius,\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: '1',\n    gap: 12,\n    outline: 'none',\n    alignItems: 'center',\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    cursor: 'pointer',\n    display: 'flex',\n    textAlign: 'start',\n  },\n});\n\nexport const flatGroupStyles = stylex.create({\n  borderless: {\n    paddingInline: 0,\n  },\n  filled: {\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  mobile: {\n    borderRadius: 0,\n    paddingBlock: 0,\n    paddingInline: 16,\n    backgroundColor: cssVar.colorBgContainer,\n  },\n  root: {\n    borderRadius: cssVar.borderRadiusLG,\n    paddingInline: 16,\n  },\n});\n\nexport const footerStyles = stylex.create({\n  root: {\n    padding: { default: null, [media.sm]: 16 },\n    backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n    borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n    borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n    borderBlockStartWidth: { default: null, [media.sm]: 1 },\n  },\n});\n\nexport const submitFooterStyles = stylex.create({\n  floatFooter: {\n    padding: 8,\n    borderColor: cssVar.colorBorderSecondary,\n    borderRadius: 48,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: cssVar.boxShadowSecondary,\n    insetBlockEnd: 24,\n    insetInlineStart: '50%',\n    position: 'fixed',\n    transform: 'translateX(-50%)',\n    zIndex: 1000,\n    width: 'max-content',\n  },\n  footer: {\n    padding: { default: null, [media.sm]: 16 },\n    backgroundColor: { default: null, [media.sm]: cssVar.colorBgContainer },\n    borderBlockStartColor: { default: null, [media.sm]: cssVar.colorBorderSecondary },\n    borderBlockStartStyle: { default: null, [media.sm]: 'solid' },\n    borderBlockStartWidth: { default: null, [media.sm]: 1 },\n    marginBlockStart: { default: null, [media.sm]: `calc(-1 * ${cssVar.borderRadius})` },\n  },\n});\n\nexport const titleStyles = stylex.create({\n  content: {\n    position: 'relative',\n    textAlign: 'start',\n  },\n  desc: {\n    color: cssVar.colorTextDescription,\n    display: 'block',\n    fontSize: 12,\n    fontWeight: 400,\n    lineHeight: 1.44,\n    overflowWrap: 'break-word',\n    whiteSpace: 'pre-wrap',\n  },\n  title: {\n    color: cssVar.colorText,\n    fontWeight: 500,\n    lineHeight: 1,\n  },\n});\n"],"mappings":"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"}