@lobehub/ui 6.0.0-beta.9 → 6.0.0

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/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/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/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":";;;;;;;;;;;;;;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,GAAG,WACC;CACJ,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;IAAE;IAAK,GAAG;GAAM,CAClB;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;GAnBN,UAAA;IAqBG,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"}
+{"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":"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"}

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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"}

package/es/Form/type.d.mts

@@ -24,6 +24,11 @@ export interface FormProps extends BaseFormProps {
     item?: string;
   };
   collapsible?: boolean;
+  /**
+   * Compact spacing for narrow containers (Drawer / Modal): `gap` 12px and `itemPadding` 10px
+   * unless set explicitly. Default `false` (unchanged spacing).
+   */
+  compact?: boolean;
   defaultActiveKey?: (string | number)[];
   footer?: ReactNode;
   gap?: number | string;
@@ -33,6 +38,8 @@ export interface FormProps extends BaseFormProps {
    */
   initialValues?: FormValues;
   itemMinWidth?: FormFieldProps['minWidth'];
+  /** Block (top / bottom) padding of every Form.Field. Default `16px`. */
+  itemPadding?: number | string;
   items?: FormGroupItemType[] | FormFieldProps[];
   itemsType?: ItemsType;
   layout?: FormLayout;

package/es/Popover/style.mjs

@@ -61,7 +61,7 @@ const styles = {
 		"--lobe-popover-animation-scale": "lb191ky9q",
 		"--lobe-popover-animation-translate": "lb10lwwj9",
 		"--lobe-popover-layout-duration": "lbpmwb57 lbvabi",
-		"--lobe-popover-layout-ease": "lb18d1rk7",
+		"--lobe-popover-layout-ease": "lb1yl6ih0",
 		"--lobe-popover-translate-x": "lbdtzx1f lb1u18tlr lb8cr33m",
 		"--lobe-popover-translate-y": "lb70ox3w lb132x4ng lb19ms9b6 lb1jpw2w9",
 		kfzvcC: "lb1tblq73",

package/es/Popover/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Popover/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst layoutAnimation = ':is([data-layout-animation])';\nconst instantOrRepop = ':is([data-instant], [data-repop])';\nconst instant = ':is([data-instant])';\nconst popupLayoutTiming =\n  ':is([data-layout-animation]):not([data-repop], [data-ending-style], [data-instant])';\nconst popupLayoutProperty = ':is([data-layout-animation]):not([data-repop], [data-instant])';\nconst popupRepopTiming = ':is([data-repop]):not([data-ending-style], [data-instant])';\nconst popupEndingTiming = ':is([data-ending-style]):not([data-instant])';\nconst positionerLayout = ':is([data-layout-animation]):not([data-instant], [data-repop])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst anchorHidden = \":is([data-anchor-hidden], [data-zero-origin='true'])\";\nconst placementTop =\n  \":is([data-placement='top'], [data-placement='topLeft'], [data-placement='topRight'])\";\nconst placementLeft =\n  \":is([data-placement='left'], [data-placement='leftTop'], [data-placement='leftBottom'])\";\nconst placementRight =\n  \":is([data-placement='right'], [data-placement='rightTop'], [data-placement='rightBottom'])\";\n\nconst springGlide =\n  'linear(0, 0.041, 0.14, 0.268, 0.407, 0.541, 0.661, 0.765, 0.849, 0.915, 0.964, 0.998, 1.02, 1.032, 1.038, 1.039, 1.036, 1.032, 1.027, 1.022, 1.016, 1.012, 1.008, 1.005, 1.003)';\n\nexport const styles = stylex.create({\n  arrow: {\n    '--lobe-popover-arrow-offset-block': '5px',\n    '--lobe-popover-arrow-offset-inline': '8px',\n    'transition':\n      'inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease), inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease)',\n    'display': 'flex',\n    'insetBlockEnd': {\n      'default': null,\n      \":is([data-side='top'])\": 'calc(var(--lobe-popover-arrow-offset-block) * -1)',\n    },\n    'insetBlockStart': {\n      'default': null,\n      \":is([data-side='bottom'])\": 'calc(var(--lobe-popover-arrow-offset-block) * -1)',\n    },\n    'insetInlineEnd': {\n      'default': null,\n      \":is([data-side='left'])\": 'calc(var(--lobe-popover-arrow-offset-inline) * -1)',\n    },\n    'insetInlineStart': {\n      'default': null,\n      \":is([data-side='right'])\": 'calc(var(--lobe-popover-arrow-offset-inline) * -1)',\n    },\n    'pointerEvents': 'none',\n    'position': 'absolute',\n    'transform': {\n      'default': null,\n      \":is([data-side='left'])\": 'rotate(90deg)',\n      \":is([data-side='right'])\": 'rotate(-90deg)',\n      \":is([data-side='top'])\": 'rotate(180deg)',\n    },\n    'transformOrigin': 'center',\n    'height': 6,\n    'width': 12,\n  },\n  arrowFill: {\n    fill: cssVar.colorBgElevated,\n  },\n  arrowStroke: {\n    fill: 'none',\n    stroke: cssVar.colorBorder,\n    strokeWidth: '1px',\n  },\n  arrowSvg: {\n    display: 'block',\n    height: '100%',\n    width: '100%',\n  },\n\n  popup: {\n    borderRadius: cssVar.borderRadius,\n    outline: 'none',\n    backgroundColor: cssVar.colorBgElevated,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    boxSizing: 'border-box',\n    color: cssVar.colorText,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'relative',\n    transform: {\n      default: null,\n      [startingOrEnding]:\n        'translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0) scale(var(--lobe-popover-animation-scale))',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    transitionDuration: {\n      default: 'var(--lobe-popover-animation-duration)',\n      [instant]: '0s',\n      [popupEndingTiming]: 'var(--lobe-popover-animation-duration-exit)',\n      [popupLayoutTiming]:\n        'var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration), var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration)',\n      [popupRepopTiming]: '0s',\n    },\n    transitionProperty: {\n      default: 'opacity, transform',\n      [instantOrRepop]: 'none',\n      [popupLayoutProperty]: 'opacity, transform, width, height',\n    },\n    transitionTimingFunction: {\n      default: 'var(--lobe-popover-animation-ease-out)',\n      [instant]: 'ease',\n      [popupEndingTiming]: 'var(--lobe-popover-animation-ease-in)',\n      [popupLayoutTiming]:\n        'var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out), var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease)',\n      [popupRepopTiming]: 'ease',\n    },\n    height: { default: null, [layoutAnimation]: 'var(--popup-height, auto)' },\n    maxWidth: 'var(--available-width)',\n    minWidth: 120,\n    width: { default: null, [layoutAnimation]: 'var(--popup-width, auto)' },\n  },\n\n  positioner: {\n    '--lobe-popover-animation-duration': '150ms',\n    '--lobe-popover-animation-duration-exit': '75ms',\n    '--lobe-popover-animation-ease-in': 'ease-in',\n    '--lobe-popover-animation-ease-out': cssVar.motionEaseOut,\n    '--lobe-popover-animation-scale': '0.96',\n    '--lobe-popover-animation-translate': '6px',\n    '--lobe-popover-layout-duration': { default: '380ms', [reducedMotion]: '0s' },\n    '--lobe-popover-layout-ease': springGlide,\n    '--lobe-popover-translate-x': {\n      default: '0',\n      [placementLeft]: 'var(--lobe-popover-animation-translate)',\n      [placementRight]: 'calc(var(--lobe-popover-animation-translate) * -1)',\n    },\n    '--lobe-popover-translate-y': {\n      default: 'calc(var(--lobe-popover-animation-translate) * -1)',\n      [placementLeft]: '0',\n      [placementRight]: '0',\n      [placementTop]: 'var(--lobe-popover-animation-translate)',\n    },\n    'pointerEvents': { [anchorHidden]: 'none', default: null },\n    'transitionDuration': {\n      default: 'var(--lobe-popover-animation-duration)',\n      [instantOrRepop]: '0s',\n      [positionerLayout]: 'var(--lobe-popover-layout-duration)',\n    },\n    'transitionProperty': {\n      default: 'none',\n      [positionerLayout]:\n        'inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform',\n    },\n    'transitionTimingFunction': {\n      default: 'var(--lobe-popover-animation-ease-out)',\n      [instantOrRepop]: 'ease',\n      [positionerLayout]: 'var(--lobe-popover-layout-ease)',\n    },\n    'visibility': { [anchorHidden]: 'hidden', default: null },\n    'zIndex': 1100,\n    'height': 'var(--positioner-height)',\n    'width': 'min(var(--positioner-width), var(--available-width))',\n  },\n\n  viewport: {\n    '--lobe-popover-content-blur': '4px',\n    '--lobe-popover-content-shift': '8px',\n    '--lobe-popover-viewport-inline-padding': '12px',\n    'overflow': 'clip',\n    'paddingBlock': 12,\n    'paddingInline': 'var(--lobe-popover-viewport-inline-padding)',\n    'position': 'relative',\n  },\n});\n"],"mappings":";AAmBA,MAAa,SAAS;CACpB,OAAO;EACL,qCAAqC;EACrC,sCAAsC;EACtC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,qCAAqC;EACrC,0CAA0C;EAC1C,oCAAoC;EACpC,qCAAqC;EACrC,kCAAkC;EAClC,sCAAsC;EACtC,kCAAkC;EAClC,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,+BAA+B;EAC/B,gCAAgC;EAChC,0CAA0C;EAC1C,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Popover/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst layoutAnimation = ':is([data-layout-animation])';\nconst instantOrRepop = ':is([data-instant], [data-repop])';\nconst instant = ':is([data-instant])';\nconst popupLayoutTiming =\n  ':is([data-layout-animation]):not([data-repop], [data-ending-style], [data-instant])';\nconst popupLayoutProperty = ':is([data-layout-animation]):not([data-repop], [data-instant])';\nconst popupRepopTiming = ':is([data-repop]):not([data-ending-style], [data-instant])';\nconst popupEndingTiming = ':is([data-ending-style]):not([data-instant])';\nconst positionerLayout = ':is([data-layout-animation]):not([data-instant], [data-repop])';\nconst startingOrEnding = ':is([data-starting-style], [data-ending-style])';\nconst anchorHidden = \":is([data-anchor-hidden], [data-zero-origin='true'])\";\nconst placementTop =\n  \":is([data-placement='top'], [data-placement='topLeft'], [data-placement='topRight'])\";\nconst placementLeft =\n  \":is([data-placement='left'], [data-placement='leftTop'], [data-placement='leftBottom'])\";\nconst placementRight =\n  \":is([data-placement='right'], [data-placement='rightTop'], [data-placement='rightBottom'])\";\n\nexport const styles = stylex.create({\n  arrow: {\n    '--lobe-popover-arrow-offset-block': '5px',\n    '--lobe-popover-arrow-offset-inline': '8px',\n    'transition':\n      'inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease), inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease)',\n    'display': 'flex',\n    'insetBlockEnd': {\n      'default': null,\n      \":is([data-side='top'])\": 'calc(var(--lobe-popover-arrow-offset-block) * -1)',\n    },\n    'insetBlockStart': {\n      'default': null,\n      \":is([data-side='bottom'])\": 'calc(var(--lobe-popover-arrow-offset-block) * -1)',\n    },\n    'insetInlineEnd': {\n      'default': null,\n      \":is([data-side='left'])\": 'calc(var(--lobe-popover-arrow-offset-inline) * -1)',\n    },\n    'insetInlineStart': {\n      'default': null,\n      \":is([data-side='right'])\": 'calc(var(--lobe-popover-arrow-offset-inline) * -1)',\n    },\n    'pointerEvents': 'none',\n    'position': 'absolute',\n    'transform': {\n      'default': null,\n      \":is([data-side='left'])\": 'rotate(90deg)',\n      \":is([data-side='right'])\": 'rotate(-90deg)',\n      \":is([data-side='top'])\": 'rotate(180deg)',\n    },\n    'transformOrigin': 'center',\n    'height': 6,\n    'width': 12,\n  },\n  arrowFill: {\n    fill: cssVar.colorBgElevated,\n  },\n  arrowStroke: {\n    fill: 'none',\n    stroke: cssVar.colorBorder,\n    strokeWidth: '1px',\n  },\n  arrowSvg: {\n    display: 'block',\n    height: '100%',\n    width: '100%',\n  },\n\n  popup: {\n    borderRadius: cssVar.borderRadius,\n    outline: 'none',\n    backgroundColor: cssVar.colorBgElevated,\n    boxShadow: `${cssVar.boxShadowSecondary}, var(--lobe-ring)`,\n    boxSizing: 'border-box',\n    color: cssVar.colorText,\n    opacity: { default: null, [startingOrEnding]: 0 },\n    position: 'relative',\n    transform: {\n      default: null,\n      [startingOrEnding]:\n        'translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0) scale(var(--lobe-popover-animation-scale))',\n    },\n    transformOrigin: 'var(--transform-origin)',\n    transitionDuration: {\n      default: 'var(--lobe-popover-animation-duration)',\n      [instant]: '0s',\n      [popupEndingTiming]: 'var(--lobe-popover-animation-duration-exit)',\n      [popupLayoutTiming]:\n        'var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration), var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration)',\n      [popupRepopTiming]: '0s',\n    },\n    transitionProperty: {\n      default: 'opacity, transform',\n      [instantOrRepop]: 'none',\n      [popupLayoutProperty]: 'opacity, transform, width, height',\n    },\n    transitionTimingFunction: {\n      default: 'var(--lobe-popover-animation-ease-out)',\n      [instant]: 'ease',\n      [popupEndingTiming]: 'var(--lobe-popover-animation-ease-in)',\n      [popupLayoutTiming]:\n        'var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out), var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease)',\n      [popupRepopTiming]: 'ease',\n    },\n    height: { default: null, [layoutAnimation]: 'var(--popup-height, auto)' },\n    maxWidth: 'var(--available-width)',\n    minWidth: 120,\n    width: { default: null, [layoutAnimation]: 'var(--popup-width, auto)' },\n  },\n\n  positioner: {\n    '--lobe-popover-animation-duration': '150ms',\n    '--lobe-popover-animation-duration-exit': '75ms',\n    '--lobe-popover-animation-ease-in': 'ease-in',\n    '--lobe-popover-animation-ease-out': cssVar.motionEaseOut,\n    '--lobe-popover-animation-scale': '0.96',\n    '--lobe-popover-animation-translate': '6px',\n    '--lobe-popover-layout-duration': { default: '380ms', [reducedMotion]: '0s' },\n    '--lobe-popover-layout-ease': cssVar.motionSpringBouncy,\n    '--lobe-popover-translate-x': {\n      default: '0',\n      [placementLeft]: 'var(--lobe-popover-animation-translate)',\n      [placementRight]: 'calc(var(--lobe-popover-animation-translate) * -1)',\n    },\n    '--lobe-popover-translate-y': {\n      default: 'calc(var(--lobe-popover-animation-translate) * -1)',\n      [placementLeft]: '0',\n      [placementRight]: '0',\n      [placementTop]: 'var(--lobe-popover-animation-translate)',\n    },\n    'pointerEvents': { [anchorHidden]: 'none', default: null },\n    'transitionDuration': {\n      default: 'var(--lobe-popover-animation-duration)',\n      [instantOrRepop]: '0s',\n      [positionerLayout]: 'var(--lobe-popover-layout-duration)',\n    },\n    'transitionProperty': {\n      default: 'none',\n      [positionerLayout]:\n        'inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform',\n    },\n    'transitionTimingFunction': {\n      default: 'var(--lobe-popover-animation-ease-out)',\n      [instantOrRepop]: 'ease',\n      [positionerLayout]: 'var(--lobe-popover-layout-ease)',\n    },\n    'visibility': { [anchorHidden]: 'hidden', default: null },\n    'zIndex': 1100,\n    'height': 'var(--positioner-height)',\n    'width': 'min(var(--positioner-width), var(--available-width))',\n  },\n\n  viewport: {\n    '--lobe-popover-content-blur': '4px',\n    '--lobe-popover-content-shift': '8px',\n    '--lobe-popover-viewport-inline-padding': '12px',\n    'overflow': 'clip',\n    'paddingBlock': 12,\n    'paddingInline': 'var(--lobe-popover-viewport-inline-padding)',\n    'position': 'relative',\n  },\n});\n"],"mappings":";AAkBA,MAAa,SAAS;CACpB,OAAO;EACL,qCAAqC;EACrC,sCAAsC;EACtC,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,qCAAqC;EACrC,0CAA0C;EAC1C,oCAAoC;EACpC,qCAAqC;EACrC,kCAAkC;EAClC,sCAAsC;EACtC,kCAAkC;EAClC,8BAA8B;EAC9B,8BAA8B;EAC9B,8BAA8B;EAC9B,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,+BAA+B;EAC/B,gCAAgC;EAChC,0CAA0C;EAC1C,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/ProTable/hooks/useFetchData.mjs

@@ -24,7 +24,7 @@ const useFetchData = (options) => {
 				params.current = opts.pageInfo.current;
 				params.pageSize = opts.pageInfo.pageSize;
 			}
-			const response = await opts.request(params, opts.sort, opts.filter);
+			const response = await opts.request(params, opts.sort, opts.filter) ?? { data: [] };
 			if (id !== requestId.current) return;
 			if (response.success === false) return;
 			const raw = response.data ?? [];

package/es/ProTable/hooks/useFetchData.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useFetchData.mjs","names":[],"sources":["../../../src/ProTable/hooks/useFetchData.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { SortOrder } from '@/Table/type';\n\nimport type { ProTablePageInfo, ProTableRequest, ProTableRequestFilter } from '../type';\n\ntype Filter = Record<string, (string | number | boolean)[] | null>;\n\nexport interface UseFetchDataOptions<T> {\n  debounceTime: number;\n  defaultData?: T[];\n  depsKey: string;\n  filter: Filter;\n  getParams: () => Record<string, any>;\n  manual: boolean;\n  onDataSourceChange?: (data: T[]) => void;\n  onLoad?: (data: T[]) => void;\n  onLoadingChange?: (loading: boolean) => void;\n  onRequestError?: (error: Error) => void;\n  pageInfo: ProTablePageInfo;\n  paginated: boolean;\n  polling?: number | ((data: T[]) => number);\n  postData?: (data: T[]) => T[];\n  request?: ProTableRequest<T, any>;\n  setTotal: (total: number) => void;\n  sort: Record<string, SortOrder>;\n}\n\nexport const useFetchData = <T>(options: UseFetchDataOptions<T>) => {\n  const [data, setData] = useState<T[]>(options.defaultData ?? []);\n  const [loading, setLoading] = useState(false);\n  const latest = useRef(options);\n  latest.current = options;\n  const requestId = useRef(0);\n  const [enabled, setEnabled] = useState(!options.manual);\n  const [token, setToken] = useState(0);\n  const pending = useRef<(() => void)[]>([]);\n\n  const updateLoading = (next: boolean) => {\n    setLoading(next);\n    latest.current.onLoadingChange?.(next);\n  };\n\n  const run = useCallback(async () => {\n    const opts = latest.current;\n    if (!opts.request) return;\n    const id = ++requestId.current;\n    updateLoading(true);\n    try {\n      const params: Record<string, any> = { ...opts.getParams() };\n      if (opts.paginated) {\n        params.current = opts.pageInfo.current;\n        params.pageSize = opts.pageInfo.pageSize;\n      }\n      const response = await opts.request(\n        params as any,\n        opts.sort,\n        opts.filter as ProTableRequestFilter,\n      );\n      if (id !== requestId.current) return;\n      if (response.success === false) {\n        // Pro keeps the previous data when the request reports failure.\n        return;\n      }\n      const raw = response.data ?? [];\n      const next = opts.postData ? opts.postData(raw) : raw;\n      setData(next);\n      opts.setTotal(response.total ?? next.length);\n      opts.onLoad?.(next);\n      opts.onDataSourceChange?.(next);\n    } catch (error) {\n      if (id !== requestId.current) return;\n      if (opts.onRequestError) opts.onRequestError(error as Error);\n      else console.error(error);\n    } finally {\n      if (id === requestId.current) updateLoading(false);\n      const resolvers = pending.current;\n      pending.current = [];\n      resolvers.forEach((resolve) => resolve());\n    }\n  }, []);\n\n  const { current, pageSize } = options.pageInfo;\n  useEffect(() => {\n    if (!enabled || !latest.current.request) return;\n    const delay = latest.current.debounceTime;\n    if (delay <= 0) {\n      void run();\n      return;\n    }\n    const timer = setTimeout(() => void run(), delay);\n    return () => clearTimeout(timer);\n  }, [enabled, token, options.depsKey, current, pageSize, run]);\n\n  useEffect(() => {\n    const { polling } = latest.current;\n    if (!polling || loading || !enabled) return;\n    const interval = typeof polling === 'function' ? polling(data) : polling;\n    if (!interval) return;\n    const timer = setTimeout(() => void run(), Math.max(interval, 2000));\n    return () => clearTimeout(timer);\n  }, [data, loading, enabled, options.polling, run]);\n\n  const reload = useCallback(\n    () =>\n      new Promise<void>((resolve) => {\n        if (!latest.current.request) {\n          resolve();\n          return;\n        }\n        pending.current.push(resolve);\n        setEnabled(true);\n        setToken((value) => value + 1);\n      }),\n    [],\n  );\n\n  return { data, loading, reload, setData };\n};\n"],"mappings":";;AA4BA,MAAa,gBAAmB,YAAoC;CAClE,MAAM,CAAC,MAAM,WAAW,SAAc,QAAQ,eAAe,CAAC,CAAC;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,SAAS,OAAO,OAAO;CAC7B,OAAO,UAAU;CACjB,MAAM,YAAY,OAAO,CAAC;CAC1B,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,QAAQ,MAAM;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,UAAU,OAAuB,CAAC,CAAC;CAEzC,MAAM,iBAAiB,SAAkB;EACvC,WAAW,IAAI;EACf,OAAO,QAAQ,kBAAkB,IAAI;CACvC;CAEA,MAAM,MAAM,YAAY,YAAY;EAClC,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,KAAK,SAAS;EACnB,MAAM,KAAK,EAAE,UAAU;EACvB,cAAc,IAAI;EAClB,IAAI;GACF,MAAM,SAA8B,EAAE,GAAG,KAAK,UAAU,EAAE;GAC1D,IAAI,KAAK,WAAW;IAClB,OAAO,UAAU,KAAK,SAAS;IAC/B,OAAO,WAAW,KAAK,SAAS;GAClC;GACA,MAAM,WAAW,MAAM,KAAK,QAC1B,QACA,KAAK,MACL,KAAK,MACP;GACA,IAAI,OAAO,UAAU,SAAS;GAC9B,IAAI,SAAS,YAAY,OAEvB;GAEF,MAAM,MAAM,SAAS,QAAQ,CAAC;GAC9B,MAAM,OAAO,KAAK,WAAW,KAAK,SAAS,GAAG,IAAI;GAClD,QAAQ,IAAI;GACZ,KAAK,SAAS,SAAS,SAAS,KAAK,MAAM;GAC3C,KAAK,SAAS,IAAI;GAClB,KAAK,qBAAqB,IAAI;EAChC,SAAS,OAAO;GACd,IAAI,OAAO,UAAU,SAAS;GAC9B,IAAI,KAAK,gBAAgB,KAAK,eAAe,KAAc;QACtD,QAAQ,MAAM,KAAK;EAC1B,UAAU;GACR,IAAI,OAAO,UAAU,SAAS,cAAc,KAAK;GACjD,MAAM,YAAY,QAAQ;GAC1B,QAAQ,UAAU,CAAC;GACnB,UAAU,SAAS,YAAY,QAAQ,CAAC;EAC1C;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,EAAE,SAAS,aAAa,QAAQ;CACtC,gBAAgB;EACd,IAAI,CAAC,WAAW,CAAC,OAAO,QAAQ,SAAS;EACzC,MAAM,QAAQ,OAAO,QAAQ;EAC7B,IAAI,SAAS,GAAG;GACd,IAAS;GACT;EACF;EACA,MAAM,QAAQ,iBAAiB,KAAK,IAAI,GAAG,KAAK;EAChD,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAS;EAAO,QAAQ;EAAS;EAAS;EAAU;CAAG,CAAC;CAE5D,gBAAgB;EACd,MAAM,EAAE,YAAY,OAAO;EAC3B,IAAI,CAAC,WAAW,WAAW,CAAC,SAAS;EACrC,MAAM,WAAW,OAAO,YAAY,aAAa,QAAQ,IAAI,IAAI;EACjE,IAAI,CAAC,UAAU;EACf,MAAM,QAAQ,iBAAiB,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,GAAI,CAAC;EACnE,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAM;EAAS;EAAS,QAAQ;EAAS;CAAG,CAAC;CAgBjD,OAAO;EAAE;EAAM;EAAS,QAdT,kBAEX,IAAI,SAAe,YAAY;GAC7B,IAAI,CAAC,OAAO,QAAQ,SAAS;IAC3B,QAAQ;IACR;GACF;GACA,QAAQ,QAAQ,KAAK,OAAO;GAC5B,WAAW,IAAI;GACf,UAAU,UAAU,QAAQ,CAAC;EAC/B,CAAC,GACH,CAAC,CAG0B;EAAG;CAAQ;AAC1C"}
+{"version":3,"file":"useFetchData.mjs","names":[],"sources":["../../../src/ProTable/hooks/useFetchData.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { SortOrder } from '@/Table/type';\n\nimport type {\n  ProTablePageInfo,\n  ProTableRequest,\n  ProTableRequestData,\n  ProTableRequestFilter,\n} from '../type';\n\ntype Filter = Record<string, (string | number | boolean)[] | null>;\n\nexport interface UseFetchDataOptions<T> {\n  debounceTime: number;\n  defaultData?: T[];\n  depsKey: string;\n  filter: Filter;\n  getParams: () => Record<string, any>;\n  manual: boolean;\n  onDataSourceChange?: (data: T[]) => void;\n  onLoad?: (data: T[]) => void;\n  onLoadingChange?: (loading: boolean) => void;\n  onRequestError?: (error: Error) => void;\n  pageInfo: ProTablePageInfo;\n  paginated: boolean;\n  polling?: number | ((data: T[]) => number);\n  postData?: (data: T[]) => T[];\n  request?: ProTableRequest<T, any>;\n  setTotal: (total: number) => void;\n  sort: Record<string, SortOrder>;\n}\n\nexport const useFetchData = <T>(options: UseFetchDataOptions<T>) => {\n  const [data, setData] = useState<T[]>(options.defaultData ?? []);\n  const [loading, setLoading] = useState(false);\n  const latest = useRef(options);\n  latest.current = options;\n  const requestId = useRef(0);\n  const [enabled, setEnabled] = useState(!options.manual);\n  const [token, setToken] = useState(0);\n  const pending = useRef<(() => void)[]>([]);\n\n  const updateLoading = (next: boolean) => {\n    setLoading(next);\n    latest.current.onLoadingChange?.(next);\n  };\n\n  const run = useCallback(async () => {\n    const opts = latest.current;\n    if (!opts.request) return;\n    const id = ++requestId.current;\n    updateLoading(true);\n    try {\n      const params: Record<string, any> = { ...opts.getParams() };\n      if (opts.paginated) {\n        params.current = opts.pageInfo.current;\n        params.pageSize = opts.pageInfo.pageSize;\n      }\n      // A `request` resolving `null` / `undefined` (e.g. an empty API body) is treated as empty data.\n      const response: Partial<ProTableRequestData<T>> = (await opts.request(\n        params as any,\n        opts.sort,\n        opts.filter as ProTableRequestFilter,\n      )) ?? { data: [] };\n      if (id !== requestId.current) return;\n      if (response.success === false) {\n        // Pro keeps the previous data when the request reports failure.\n        return;\n      }\n      const raw = response.data ?? [];\n      const next = opts.postData ? opts.postData(raw) : raw;\n      setData(next);\n      opts.setTotal(response.total ?? next.length);\n      opts.onLoad?.(next);\n      opts.onDataSourceChange?.(next);\n    } catch (error) {\n      if (id !== requestId.current) return;\n      if (opts.onRequestError) opts.onRequestError(error as Error);\n      else console.error(error);\n    } finally {\n      if (id === requestId.current) updateLoading(false);\n      const resolvers = pending.current;\n      pending.current = [];\n      resolvers.forEach((resolve) => resolve());\n    }\n  }, []);\n\n  const { current, pageSize } = options.pageInfo;\n  useEffect(() => {\n    if (!enabled || !latest.current.request) return;\n    const delay = latest.current.debounceTime;\n    if (delay <= 0) {\n      void run();\n      return;\n    }\n    const timer = setTimeout(() => void run(), delay);\n    return () => clearTimeout(timer);\n  }, [enabled, token, options.depsKey, current, pageSize, run]);\n\n  useEffect(() => {\n    const { polling } = latest.current;\n    if (!polling || loading || !enabled) return;\n    const interval = typeof polling === 'function' ? polling(data) : polling;\n    if (!interval) return;\n    const timer = setTimeout(() => void run(), Math.max(interval, 2000));\n    return () => clearTimeout(timer);\n  }, [data, loading, enabled, options.polling, run]);\n\n  const reload = useCallback(\n    () =>\n      new Promise<void>((resolve) => {\n        if (!latest.current.request) {\n          resolve();\n          return;\n        }\n        pending.current.push(resolve);\n        setEnabled(true);\n        setToken((value) => value + 1);\n      }),\n    [],\n  );\n\n  return { data, loading, reload, setData };\n};\n"],"mappings":";;AAiCA,MAAa,gBAAmB,YAAoC;CAClE,MAAM,CAAC,MAAM,WAAW,SAAc,QAAQ,eAAe,CAAC,CAAC;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,SAAS,OAAO,OAAO;CAC7B,OAAO,UAAU;CACjB,MAAM,YAAY,OAAO,CAAC;CAC1B,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,QAAQ,MAAM;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CACpC,MAAM,UAAU,OAAuB,CAAC,CAAC;CAEzC,MAAM,iBAAiB,SAAkB;EACvC,WAAW,IAAI;EACf,OAAO,QAAQ,kBAAkB,IAAI;CACvC;CAEA,MAAM,MAAM,YAAY,YAAY;EAClC,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,KAAK,SAAS;EACnB,MAAM,KAAK,EAAE,UAAU;EACvB,cAAc,IAAI;EAClB,IAAI;GACF,MAAM,SAA8B,EAAE,GAAG,KAAK,UAAU,EAAE;GAC1D,IAAI,KAAK,WAAW;IAClB,OAAO,UAAU,KAAK,SAAS;IAC/B,OAAO,WAAW,KAAK,SAAS;GAClC;GAEA,MAAM,WAA6C,MAAM,KAAK,QAC5D,QACA,KAAK,MACL,KAAK,MACP,KAAM,EAAE,MAAM,CAAC,EAAE;GACjB,IAAI,OAAO,UAAU,SAAS;GAC9B,IAAI,SAAS,YAAY,OAEvB;GAEF,MAAM,MAAM,SAAS,QAAQ,CAAC;GAC9B,MAAM,OAAO,KAAK,WAAW,KAAK,SAAS,GAAG,IAAI;GAClD,QAAQ,IAAI;GACZ,KAAK,SAAS,SAAS,SAAS,KAAK,MAAM;GAC3C,KAAK,SAAS,IAAI;GAClB,KAAK,qBAAqB,IAAI;EAChC,SAAS,OAAO;GACd,IAAI,OAAO,UAAU,SAAS;GAC9B,IAAI,KAAK,gBAAgB,KAAK,eAAe,KAAc;QACtD,QAAQ,MAAM,KAAK;EAC1B,UAAU;GACR,IAAI,OAAO,UAAU,SAAS,cAAc,KAAK;GACjD,MAAM,YAAY,QAAQ;GAC1B,QAAQ,UAAU,CAAC;GACnB,UAAU,SAAS,YAAY,QAAQ,CAAC;EAC1C;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,EAAE,SAAS,aAAa,QAAQ;CACtC,gBAAgB;EACd,IAAI,CAAC,WAAW,CAAC,OAAO,QAAQ,SAAS;EACzC,MAAM,QAAQ,OAAO,QAAQ;EAC7B,IAAI,SAAS,GAAG;GACd,IAAS;GACT;EACF;EACA,MAAM,QAAQ,iBAAiB,KAAK,IAAI,GAAG,KAAK;EAChD,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAS;EAAO,QAAQ;EAAS;EAAS;EAAU;CAAG,CAAC;CAE5D,gBAAgB;EACd,MAAM,EAAE,YAAY,OAAO;EAC3B,IAAI,CAAC,WAAW,WAAW,CAAC,SAAS;EACrC,MAAM,WAAW,OAAO,YAAY,aAAa,QAAQ,IAAI,IAAI;EACjE,IAAI,CAAC,UAAU;EACf,MAAM,QAAQ,iBAAiB,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,GAAI,CAAC;EACnE,aAAa,aAAa,KAAK;CACjC,GAAG;EAAC;EAAM;EAAS;EAAS,QAAQ;EAAS;CAAG,CAAC;CAgBjD,OAAO;EAAE;EAAM;EAAS,QAdT,kBAEX,IAAI,SAAe,YAAY;GAC7B,IAAI,CAAC,OAAO,QAAQ,SAAS;IAC3B,QAAQ;IACR;GACF;GACA,QAAQ,QAAQ,KAAK,OAAO;GAC5B,WAAW,IAAI;GACf,UAAU,UAAU,QAAQ,CAAC;EAC/B,CAAC,GACH,CAAC,CAG0B;EAAG;CAAQ;AAC1C"}

package/es/ProTable/parts/FieldControl.mjs

@@ -6,8 +6,9 @@ import Select from "../../Select/Select.mjs";
 import DayjsDatePicker from "../../DatePicker/DayjsDatePicker.mjs";
 import DayjsDateRangePicker from "../../DatePicker/DayjsDateRangePicker.mjs";
 import { resolveValueEnum, resolveValueType, valueEnumToList } from "../utils.mjs";
+import { styles } from "../style.mjs";
 import { useColumnRequest } from "../hooks/useColumnRequest.mjs";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import dayjs from "dayjs";
 //#region src/ProTable/parts/FieldControl.tsx
 const SELECT_TYPES = /* @__PURE__ */ new Set([
@@ -21,11 +22,16 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 	const valueType = resolveValueType(column) ?? "text";
 	const valueEnum = resolveValueEnum(column);
 	const { fieldProps = {} } = column;
-	const label = typeof column.title === "string" ? column.title : void 0;
 	const size = light ? "small" : void 0;
 	const { isDarkMode } = useThemeMode();
 	const variant = light ? isDarkMode ? "filled" : "outlined" : void 0;
 	const remote = useColumnRequest(column);
+	const lightLabel = light && column.title !== void 0 && column.title !== null && typeof column.title !== "function" ? /* @__PURE__ */ jsx("span", {
+		className: styles.lightFilterLabel,
+		"data-pro-table-light-label": "",
+		children: column.title
+	}) : void 0;
+	const labelProps = lightLabel ? { prefix: lightLabel } : {};
 	if (column.renderFormItem) return column.renderFormItem(column, {
 		form,
 		isQuery: !light,
@@ -43,8 +49,9 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 			loading: remote.loading,
 			mode: valueType === "checkbox" ? "multiple" : void 0,
 			options,
-			placeholder: light ? label : placeholder.select,
+			placeholder: placeholder.select,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: value ?? (valueType === "checkbox" ? [] : null),
 			variant,
@@ -61,24 +68,32 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 		case "money":
 		case "percent":
 		case "progress": return /* @__PURE__ */ jsx(InputNumber_default, {
-			placeholder: light ? label : placeholder.input,
+			placeholder: placeholder.input,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: value ?? null,
 			variant,
 			...fieldProps,
 			onChange: (next) => onChange(next ?? void 0)
 		});
-		case "switch": return /* @__PURE__ */ jsx(Switch, {
-			checked: !!value,
-			...fieldProps,
-			onChange: (next) => onChange(next)
-		});
+		case "switch": {
+			const control = /* @__PURE__ */ jsx(Switch, {
+				checked: !!value,
+				...fieldProps,
+				onChange: (next) => onChange(next)
+			});
+			return lightLabel ? /* @__PURE__ */ jsxs("span", {
+				className: styles.lightFilterSwitch,
+				children: [lightLabel, control]
+			}) : control;
+		}
 		case "date":
 		case "dateTime": return /* @__PURE__ */ jsx(DayjsDatePicker, {
 			allowClear: true,
-			placeholder: light ? label : placeholder.select,
+			placeholder: placeholder.select,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: toDayjs(value),
 			variant,
@@ -89,6 +104,7 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 		case "dateTimeRange": return /* @__PURE__ */ jsx(DayjsDateRangePicker, {
 			allowClear: true,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: value ? [toDayjs(value[0]), toDayjs(value[1])] : null,
 			variant,
@@ -97,8 +113,9 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 		});
 		default: return /* @__PURE__ */ jsx(Input_default, {
 			allowClear: true,
-			placeholder: light ? label : placeholder.input,
+			placeholder: placeholder.input,
 			size,
+			...labelProps,
 			type: valueType === "password" ? "password" : void 0,
 			value: value ?? "",
 			variant,

package/es/ProTable/parts/FieldControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldControl.mjs","names":["InputNumber","DatePicker","DateRangePicker","Input"],"sources":["../../../src/ProTable/parts/FieldControl.tsx"],"sourcesContent":["import dayjs, { type Dayjs } from 'dayjs';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/DatePicker/DayjsDatePicker';\nimport DateRangePicker from '@/DatePicker/DayjsDateRangePicker';\nimport Input from '@/Input/Input';\nimport InputNumber from '@/Input/InputNumber';\nimport Select from '@/Select';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Switch from '@/Switch';\n\nimport { useColumnRequest } from '../hooks/useColumnRequest';\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from '../type';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from '../utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  light?: boolean;\n  onChange: (value: any) => void;\n  placeholder: { input: string; select: string };\n  value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n// Form values stay native Date (ProTable's contract); the picker works in Dayjs.\nconst toDayjs = (value: unknown) => (value ? dayjs(value as Date) : null);\nconst toDate = (value: Dayjs | null | undefined) => value?.toDate() ?? null;\n\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n  const valueType = resolveValueType(column) ?? 'text';\n  const valueEnum = resolveValueEnum(column);\n  const { fieldProps = {} } = column;\n  const label = typeof column.title === 'string' ? column.title : undefined;\n  const size = light ? 'small' : undefined;\n  const { isDarkMode } = useThemeMode();\n  // Light filter: outlined on light backgrounds, filled in dark mode.\n  const variant = light ? (isDarkMode ? 'filled' : 'outlined') : undefined;\n  const remote = useColumnRequest(column);\n\n  if (column.renderFormItem) {\n    return column.renderFormItem(\n      column,\n      { form, isQuery: !light, onChange, value },\n      form,\n    ) as ReactNode;\n  }\n\n  if (remote.enabled || valueEnum || SELECT_TYPES.has(valueType)) {\n    const options =\n      remote.options ??\n      fieldProps.options ??\n      valueEnumToList(valueEnum).map((item) => ({\n        disabled: item.disabled,\n        label: item.text,\n        value: item.value,\n      }));\n    return (\n      <Select\n        allowClear\n        loading={remote.loading}\n        mode={valueType === 'checkbox' ? 'multiple' : undefined}\n        options={options as any}\n        placeholder={light ? label : placeholder.select}\n        size={size}\n        style={{ width: '100%' }}\n        value={value ?? (valueType === 'checkbox' ? [] : null)}\n        variant={variant}\n        {...fieldProps}\n        onChange={(next) => onChange(next ?? undefined)}\n        onSearch={\n          remote.onSearch\n            ? (keyWords: string) => {\n                remote.onSearch!(keyWords);\n                fieldProps.onSearch?.(keyWords);\n              }\n            : fieldProps.onSearch\n        }\n      />\n    );\n  }\n\n  switch (valueType) {\n    case 'digit':\n    case 'money':\n    case 'percent':\n    case 'progress': {\n      return (\n        <InputNumber\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'switch': {\n      return <Switch checked={!!value} {...fieldProps} onChange={(next) => onChange(next)} />;\n    }\n    case 'date':\n    case 'dateTime': {\n      return (\n        <DatePicker\n          allowClear\n          placeholder={light ? label : placeholder.select}\n          size={size}\n          style={{ width: '100%' }}\n          value={toDayjs(value)}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(toDate(next) ?? undefined)}\n        />\n      );\n    }\n    case 'dateRange':\n    case 'dateTimeRange': {\n      return (\n        <DateRangePicker\n          allowClear\n          size={size}\n          style={{ width: '100%' }}\n          value={value ? [toDayjs(value[0]), toDayjs(value[1])] : null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) =>\n            onChange(next && (next[0] || next[1]) ? [toDate(next[0]), toDate(next[1])] : undefined)\n          }\n        />\n      );\n    }\n    default: {\n      return (\n        <Input\n          allowClear\n          placeholder={light ? label : placeholder.input}\n          size={size}\n          type={valueType === 'password' ? 'password' : undefined}\n          value={value ?? ''}\n          variant={variant}\n          {...fieldProps}\n          onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n          onClear={() => {\n            onChange(undefined);\n            fieldProps.onClear?.();\n          }}\n        />\n      );\n    }\n  }\n};\n\nexport default FieldControl;\n"],"mappings":"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"}
+{"version":3,"file":"FieldControl.mjs","names":["InputNumber","DatePicker","DateRangePicker","Input"],"sources":["../../../src/ProTable/parts/FieldControl.tsx"],"sourcesContent":["import dayjs, { type Dayjs } from 'dayjs';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/DatePicker/DayjsDatePicker';\nimport DateRangePicker from '@/DatePicker/DayjsDateRangePicker';\nimport Input from '@/Input/Input';\nimport InputNumber from '@/Input/InputNumber';\nimport Select from '@/Select';\nimport { useThemeMode } from '@/styles/theme/scope';\nimport Switch from '@/Switch';\n\nimport { useColumnRequest } from '../hooks/useColumnRequest';\nimport { styles } from '../style';\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from '../type';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from '../utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  light?: boolean;\n  onChange: (value: any) => void;\n  placeholder: { input: string; select: string };\n  value: any;\n}\n\nconst SELECT_TYPES = new Set<ProTableValueType>(['select', 'radio', 'checkbox']);\n\n// Form values stay native Date (ProTable's contract); the picker works in Dayjs.\nconst toDayjs = (value: unknown) => (value ? dayjs(value as Date) : null);\nconst toDate = (value: Dayjs | null | undefined) => value?.toDate() ?? null;\n\nconst FieldControl = ({ column, form, light, onChange, placeholder, value }: FieldControlProps) => {\n  const valueType = resolveValueType(column) ?? 'text';\n  const valueEnum = resolveValueEnum(column);\n  const { fieldProps = {} } = column;\n  const size = light ? 'small' : undefined;\n  const { isDarkMode } = useThemeMode();\n  // Light filter: outlined on light backgrounds, filled in dark mode.\n  const variant = light ? (isDarkMode ? 'filled' : 'outlined') : undefined;\n  const remote = useColumnRequest(column);\n  // Light filter: the field label always stays visible inside the control (Pro `FieldLabel`\n  // style, \"Status: All\"), so a placeholder such as \"All\" is never ambiguous.\n  const lightLabel =\n    light &&\n    column.title !== undefined &&\n    column.title !== null &&\n    typeof column.title !== 'function' ? (\n      <span className={styles.lightFilterLabel} data-pro-table-light-label=\"\">\n        {column.title as ReactNode}\n      </span>\n    ) : undefined;\n  const labelProps = lightLabel ? { prefix: lightLabel } : {};\n\n  if (column.renderFormItem) {\n    return column.renderFormItem(\n      column,\n      { form, isQuery: !light, onChange, value },\n      form,\n    ) as ReactNode;\n  }\n\n  if (remote.enabled || valueEnum || SELECT_TYPES.has(valueType)) {\n    const options =\n      remote.options ??\n      fieldProps.options ??\n      valueEnumToList(valueEnum).map((item) => ({\n        disabled: item.disabled,\n        label: item.text,\n        value: item.value,\n      }));\n    return (\n      <Select\n        allowClear\n        loading={remote.loading}\n        mode={valueType === 'checkbox' ? 'multiple' : undefined}\n        options={options as any}\n        placeholder={placeholder.select}\n        size={size}\n        {...labelProps}\n        style={{ width: '100%' }}\n        value={value ?? (valueType === 'checkbox' ? [] : null)}\n        variant={variant}\n        {...fieldProps}\n        onChange={(next) => onChange(next ?? undefined)}\n        onSearch={\n          remote.onSearch\n            ? (keyWords: string) => {\n                remote.onSearch!(keyWords);\n                fieldProps.onSearch?.(keyWords);\n              }\n            : fieldProps.onSearch\n        }\n      />\n    );\n  }\n\n  switch (valueType) {\n    case 'digit':\n    case 'money':\n    case 'percent':\n    case 'progress': {\n      return (\n        <InputNumber\n          placeholder={placeholder.input}\n          size={size}\n          {...labelProps}\n          style={{ width: '100%' }}\n          value={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next ?? undefined)}\n        />\n      );\n    }\n    case 'switch': {\n      const control = (\n        <Switch checked={!!value} {...fieldProps} onChange={(next) => onChange(next)} />\n      );\n      return lightLabel ? (\n        <span className={styles.lightFilterSwitch}>\n          {lightLabel}\n          {control}\n        </span>\n      ) : (\n        control\n      );\n    }\n    case 'date':\n    case 'dateTime': {\n      return (\n        <DatePicker\n          allowClear\n          placeholder={placeholder.select}\n          size={size}\n          {...labelProps}\n          style={{ width: '100%' }}\n          value={toDayjs(value)}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(toDate(next) ?? undefined)}\n        />\n      );\n    }\n    case 'dateRange':\n    case 'dateTimeRange': {\n      return (\n        <DateRangePicker\n          allowClear\n          size={size}\n          {...labelProps}\n          style={{ width: '100%' }}\n          value={value ? [toDayjs(value[0]), toDayjs(value[1])] : null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) =>\n            onChange(next && (next[0] || next[1]) ? [toDate(next[0]), toDate(next[1])] : undefined)\n          }\n        />\n      );\n    }\n    default: {\n      return (\n        <Input\n          allowClear\n          placeholder={placeholder.input}\n          size={size}\n          {...labelProps}\n          type={valueType === 'password' ? 'password' : undefined}\n          value={value ?? ''}\n          variant={variant}\n          {...fieldProps}\n          onChange={(event) => onChange(event.target.value === '' ? undefined : event.target.value)}\n          onClear={() => {\n            onChange(undefined);\n            fieldProps.onClear?.();\n          }}\n        />\n      );\n    }\n  }\n};\n\nexport default FieldControl;\n"],"mappings":"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"}