@lobehub/ui 5.64.2 → 5.64.3

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/Form/Form.mjs

@@ -10,7 +10,9 @@ import { cx, useResponsive } from "antd-style";
 import { isUndefined } from "es-toolkit/compat";
 import { Form } from "antd";
 //#region src/Form/Form.tsx
-const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], children, itemsType = "group", itemVariant, variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, ref, layout, ...rest }) => {
+const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], children, itemsType = "group", itemVariant, variant = "borderless", classNames, styles: customStyles, gap, style, collapsible, defaultActiveKey, initialValues, activeKey, onCollapse, onFinish, ref, layout, itemPadding, compact, ...rest }) => {
+	const resolvedGap = gap ?? (compact ? 12 : void 0);
+	const resolvedItemPadding = itemPadding ?? (compact ? 10 : void 0);
 	const { mobile } = useResponsive();
 	const [submitLoading, setSubmitLoading] = useState(false);
 	const mapFlat = useCallback((item, itemIndex) => /* @__PURE__ */ jsx(FormItem, {
@@ -72,7 +74,9 @@ const Form$1 = memo(({ className, itemMinWidth, footer, form, items = [], childr
 			ref,
 			variant: itemVariant,
 			style: {
-				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
 			},
 			onFinish: async (...finishProps) => {

package/es/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","names":["Form","AntForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as AntForm } from 'antd';\nimport { cx, useResponsive } from 'antd-style';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useState } from 'react';\n\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport FormItem from './components/FormItem';\nimport { FormProvider } from './components/FormProvider';\nimport { variants } from './style';\nimport type { FormGroupItemType, FormItemProps, FormProps } from './type';\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    form,\n    items = [],\n    children,\n    itemsType = 'group',\n    itemVariant,\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    ref,\n    layout,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const [submitLoading, setSubmitLoading] = useState(false);\n\n    const mapFlat = useCallback(\n      (item: FormItemProps, itemIndex: number) => (\n        <FormItem\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          minWidth={itemMinWidth}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [itemMinWidth, 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            classNames={classNames}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            keyValue={key}\n            style={customStyles?.group}\n            styles={customStyles}\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      [activeKey, collapsible, defaultActiveKey, onCollapse, variant, classNames, customStyles],\n    );\n\n    return (\n      <FormProvider\n        config={{\n          form,\n          initialValues,\n          submitLoading,\n        }}\n      >\n        <AntForm\n          className={cx(variants({ variant }), className)}\n          colon={false}\n          form={form}\n          initialValues={initialValues}\n          layout={layout || (mobile ? 'vertical' : 'horizontal')}\n          ref={ref}\n          variant={itemVariant}\n          style={{\n            gap,\n            ...style,\n          }}\n          onFinish={async (...finishProps) => {\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            await onFinish(...finishProps);\n            setSubmitLoading(false);\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 FormItemProps[])\n                  ?.filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </AntForm>\n      </FormProvider>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":";;;;;;;;;;;;AAcA,MAAMA,SAAO,MACV,EACC,WACA,cACA,QACA,MACA,QAAQ,CAAC,GACT,UACA,YAAY,SACZ,aACA,UAAU,cACV,YACA,QAAQ,cACR,KACA,OACA,aACA,kBACA,eACA,WACA,YACA,UACA,KACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAExD,MAAM,UAAU,aACb,MAAqB,cACpB,oBAAC,UAAD;EACE,WAAW,YAAY;EACvB,SAAS,cAAc;EAEvB,UAAU;EACV,OAAO,cAAc;EACZ;EACT,GAAI;CACL,GALM,SAKN,GAEH;EAAC;EAAc;EAAS;EAAY;CAAY,CAClD;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;GACX;GACZ,aAAa,YAAY,MAAM,WAAW,IAAI,cAAc,MAAM;GAClE,OAAO,OAAO;GACd,MAAM,OAAO;GAEb,UAAU;GACV,OAAO,cAAc;GACrB,QAAQ;GACR,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,GAlBJ,GAkBI;CAEf,GACA;EAAC;EAAW;EAAa;EAAkB;EAAY;EAAS;EAAY;CAAY,CAC1F;CAEA,OACE,oBAAC,cAAD;EACE,QAAQ;GACN;GACA;GACA;EACF;EAEA,UAAA,qBAACC,MAAD;GACE,WAAW,GAAG,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS;GAC9C,OAAO;GACD;GACS;GACf,QAAQ,WAAW,SAAS,aAAa;GACpC;GACL,SAAS;GACT,OAAO;IACL;IACA,GAAG;GACL;GACA,UAAU,OAAO,GAAG,gBAAgB;IAClC,IAAI,CAAC,UAAU;IACf,iBAAiB,IAAI;IACrB,MAAM,SAAS,GAAG,WAAW;IAC7B,iBAAiB,KAAK;GACxB;GACA,GAAI;GAlBN,UAAA;IAoBG,SAAS,OAAO,SAAS,IACxB,cAAc,UACX,OAA+B,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC,IAEjE,oBAAC,eAAD;KACE,WAAW,YAAY;KACvB,OAAO,cAAc;KACZ;KAEP,UAAA,OACE,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAC/B,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC;IACvB,CAAA,IAEf,KAAA;IACH;IACA;GACM;;CACG,CAAA;AAElB,CACF;AAEA,OAAK,cAAc"}
+{"version":3,"file":"Form.mjs","names":["Form","AntForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as AntForm } from 'antd';\nimport { cx, useResponsive } from 'antd-style';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useState } from 'react';\n\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport FormItem from './components/FormItem';\nimport { FormProvider } from './components/FormProvider';\nimport { variants } from './style';\nimport type { FormGroupItemType, FormItemProps, FormProps } from './type';\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    form,\n    items = [],\n    children,\n    itemsType = 'group',\n    itemVariant,\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    ref,\n    layout,\n    itemPadding,\n    compact,\n    ...rest\n  }) => {\n    const resolvedGap = gap ?? (compact ? 12 : undefined);\n    const resolvedItemPadding = itemPadding ?? (compact ? 10 : undefined);\n    const { mobile } = useResponsive();\n    const [submitLoading, setSubmitLoading] = useState(false);\n\n    const mapFlat = useCallback(\n      (item: FormItemProps, itemIndex: number) => (\n        <FormItem\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          minWidth={itemMinWidth}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [itemMinWidth, 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            classNames={classNames}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            keyValue={key}\n            style={customStyles?.group}\n            styles={customStyles}\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      [activeKey, collapsible, defaultActiveKey, onCollapse, variant, classNames, customStyles],\n    );\n\n    return (\n      <FormProvider\n        config={{\n          form,\n          initialValues,\n          submitLoading,\n        }}\n      >\n        <AntForm\n          className={cx(variants({ variant }), className)}\n          colon={false}\n          form={form}\n          initialValues={initialValues}\n          layout={layout || (mobile ? 'vertical' : 'horizontal')}\n          ref={ref}\n          variant={itemVariant}\n          style={{\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          onFinish={async (...finishProps) => {\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            await onFinish(...finishProps);\n            setSubmitLoading(false);\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 FormItemProps[])\n                  ?.filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </AntForm>\n      </FormProvider>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}

package/es/Form/style.mjs

@@ -67,8 +67,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       border-radius: ${cssVar.borderRadius} !important;
     }
 
+    /* Mobile stacks flush, unless the Form sets gap / compact (--lobe-form-gap). */
     ${responsive.sm} {
-      gap: 0 !important;
+      gap: var(--lobe-form-gap, 0) !important;
     }
   `
 }));
@@ -168,7 +169,7 @@ const itemStyles = createStaticStyles(({ css }) => ({
   `,
 	root: css`
     &.${prefixCls}-form-item {
-      padding-block: 16px;
+      padding-block: var(--lobe-form-item-padding-block, 16px);
       padding-inline: 0;
 
       .${prefixCls}-form-item-label {

package/es/Form/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  borderless: css`\n    gap: 48px;\n    .${prefixCls}-collapse .${prefixCls}-collapse-header {\n      padding-block-end: 16px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    }\n\n    .${prefixCls}-collapse-body {\n      padding-inline: 0 !important;\n    }\n  `,\n  filled: css`\n    .${prefixCls}-collapse-body {\n      padding-block: 0 !important;\n    }\n  `,\n  outlined: css`\n    .${prefixCls}-collapse-body {\n      padding-block: 0 !important;\n    }\n  `,\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    .${prefixCls}-form-item {\n      margin: 0 !important;\n    }\n\n    .${prefixCls}-form-item .${prefixCls}-form-item-label > label {\n      height: unset;\n    }\n\n    .${prefixCls}-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .${prefixCls}-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .${prefixCls}-form-item-row {\n      align-items: center;\n    }\n\n    .${prefixCls}-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .${prefixCls}-collapse-item {\n      border-radius: ${cssVar.borderRadius} !important;\n    }\n\n    ${responsive.sm} {\n      gap: 0 !important;\n    }\n  `,\n}));\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => {\n  return {\n    borderless: cx(\n      lobeStaticStylish.variantBorderlessWithoutHover,\n      css`\n        padding-inline: 0;\n      `,\n    ),\n    filled: cx(\n      lobeStaticStylish.variantFilledWithoutHover,\n      css`\n        background: ${cssVar.colorFillQuaternary};\n      `,\n    ),\n    mobile: css`\n      padding-block: 0;\n      padding-inline: 16px;\n      border-radius: 0;\n      background: ${cssVar.colorBgContainer};\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      padding-inline: 16px;\n      border-radius: ${cssVar.borderRadiusLG};\n    `,\n  };\n});\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n\n  variants: {\n    variant: {\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n      borderless: flatGroupStyles.borderless,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    root: css`\n      ${responsive.sm} {\n        padding: 16px;\n        border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n        background: ${cssVar.colorBgContainer};\n      }\n    `,\n  };\n});\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    mobileGroupBody: css`\n      padding-block: 0;\n      padding-inline: 16px;\n      background: ${cssVar.colorBgContainer};\n    `,\n    mobileGroupHeader: css`\n      padding: 16px;\n      background: ${cssVar.colorBgLayout};\n    `,\n    title: css`\n      align-items: center;\n      font-size: 16px;\n      font-weight: bold;\n    `,\n    titleBorderless: css`\n      font-size: 18px;\n      font-weight: bold;\n    `,\n    titleMobile: css`\n      ${responsive.sm} {\n        font-size: 14px;\n        font-weight: 400;\n        opacity: 0.5;\n      }\n    `,\n  };\n});\n\nexport const titleVariants = cva(groupStyles.title, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n\n  variants: {\n    variant: {\n      filled: null,\n      outlined: null,\n      borderless: groupStyles.titleBorderless,\n    },\n  },\n});\n\nexport const itemStyles = createStaticStyles(({ css }) => ({\n  itemMinWidth: css`\n    &.${prefixCls}-form-item .${prefixCls}-form-item-control {\n      width: var(--form-item-min-width) !important;\n    }\n  `,\n  itemNoDivider: css`\n    &:not(:first-child) {\n      padding-block-start: 0;\n    }\n  `,\n  root: css`\n    &.${prefixCls}-form-item {\n      padding-block: 16px;\n      padding-inline: 0;\n\n      .${prefixCls}-form-item-label {\n        text-align: start;\n      }\n\n      .${prefixCls}-row {\n        gap: 12px;\n        justify-content: space-between;\n\n        > div {\n          flex: unset;\n          flex-grow: unset;\n        }\n      }\n\n      .${prefixCls}-form-item-required::before {\n        align-self: flex-start;\n      }\n\n      ${responsive.sm} {\n        &.${prefixCls}-form-item-horizontal {\n          .${prefixCls}-form-item-label {\n            flex: 1 !important;\n          }\n          .${prefixCls}-form-item-control {\n            flex: none !important;\n          }\n        }\n      }\n    }\n  `,\n  verticalLayout: css`\n    &.${prefixCls}-form-item {\n      .${prefixCls}-row {\n        align-items: stretch;\n      }\n    }\n  `,\n}));\n\nexport const itemVariants = cva(itemStyles.root, {\n  defaultVariants: {\n    divider: false,\n    itemMinWidth: false,\n    layout: 'vertical',\n  },\n\n  variants: {\n    itemMinWidth: {\n      true: itemStyles.itemMinWidth,\n      false: null,\n    },\n    divider: {\n      true: null,\n      false: itemStyles.itemNoDivider,\n    },\n    layout: {\n      vertical: itemStyles.verticalLayout,\n      horizontal: null,\n    },\n  },\n});\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n\n  desc: css`\n    display: block;\n\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n  `,\n}));\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nconst prefixCls = 'ant';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  borderless: css`\n    gap: 48px;\n    .${prefixCls}-collapse .${prefixCls}-collapse-header {\n      padding-block-end: 16px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n    }\n\n    .${prefixCls}-collapse-body {\n      padding-inline: 0 !important;\n    }\n  `,\n  filled: css`\n    .${prefixCls}-collapse-body {\n      padding-block: 0 !important;\n    }\n  `,\n  outlined: css`\n    .${prefixCls}-collapse-body {\n      padding-block: 0 !important;\n    }\n  `,\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    .${prefixCls}-form-item {\n      margin: 0 !important;\n    }\n\n    .${prefixCls}-form-item .${prefixCls}-form-item-label > label {\n      height: unset;\n    }\n\n    .${prefixCls}-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .${prefixCls}-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .${prefixCls}-form-item-row {\n      align-items: center;\n    }\n\n    .${prefixCls}-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .${prefixCls}-collapse-item {\n      border-radius: ${cssVar.borderRadius} !important;\n    }\n\n    /* Mobile stacks flush, unless the Form sets gap / compact (--lobe-form-gap). */\n    ${responsive.sm} {\n      gap: var(--lobe-form-gap, 0) !important;\n    }\n  `,\n}));\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => {\n  return {\n    borderless: cx(\n      lobeStaticStylish.variantBorderlessWithoutHover,\n      css`\n        padding-inline: 0;\n      `,\n    ),\n    filled: cx(\n      lobeStaticStylish.variantFilledWithoutHover,\n      css`\n        background: ${cssVar.colorFillQuaternary};\n      `,\n    ),\n    mobile: css`\n      padding-block: 0;\n      padding-inline: 16px;\n      border-radius: 0;\n      background: ${cssVar.colorBgContainer};\n    `,\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n    root: css`\n      padding-inline: 16px;\n      border-radius: ${cssVar.borderRadiusLG};\n    `,\n  };\n});\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n\n  variants: {\n    variant: {\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n      borderless: flatGroupStyles.borderless,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    root: css`\n      ${responsive.sm} {\n        padding: 16px;\n        border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n        background: ${cssVar.colorBgContainer};\n      }\n    `,\n  };\n});\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    mobileGroupBody: css`\n      padding-block: 0;\n      padding-inline: 16px;\n      background: ${cssVar.colorBgContainer};\n    `,\n    mobileGroupHeader: css`\n      padding: 16px;\n      background: ${cssVar.colorBgLayout};\n    `,\n    title: css`\n      align-items: center;\n      font-size: 16px;\n      font-weight: bold;\n    `,\n    titleBorderless: css`\n      font-size: 18px;\n      font-weight: bold;\n    `,\n    titleMobile: css`\n      ${responsive.sm} {\n        font-size: 14px;\n        font-weight: 400;\n        opacity: 0.5;\n      }\n    `,\n  };\n});\n\nexport const titleVariants = cva(groupStyles.title, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n\n  variants: {\n    variant: {\n      filled: null,\n      outlined: null,\n      borderless: groupStyles.titleBorderless,\n    },\n  },\n});\n\nexport const itemStyles = createStaticStyles(({ css }) => ({\n  itemMinWidth: css`\n    &.${prefixCls}-form-item .${prefixCls}-form-item-control {\n      width: var(--form-item-min-width) !important;\n    }\n  `,\n  itemNoDivider: css`\n    &:not(:first-child) {\n      padding-block-start: 0;\n    }\n  `,\n  root: css`\n    &.${prefixCls}-form-item {\n      padding-block: var(--lobe-form-item-padding-block, 16px);\n      padding-inline: 0;\n\n      .${prefixCls}-form-item-label {\n        text-align: start;\n      }\n\n      .${prefixCls}-row {\n        gap: 12px;\n        justify-content: space-between;\n\n        > div {\n          flex: unset;\n          flex-grow: unset;\n        }\n      }\n\n      .${prefixCls}-form-item-required::before {\n        align-self: flex-start;\n      }\n\n      ${responsive.sm} {\n        &.${prefixCls}-form-item-horizontal {\n          .${prefixCls}-form-item-label {\n            flex: 1 !important;\n          }\n          .${prefixCls}-form-item-control {\n            flex: none !important;\n          }\n        }\n      }\n    }\n  `,\n  verticalLayout: css`\n    &.${prefixCls}-form-item {\n      .${prefixCls}-row {\n        align-items: stretch;\n      }\n    }\n  `,\n}));\n\nexport const itemVariants = cva(itemStyles.root, {\n  defaultVariants: {\n    divider: false,\n    itemMinWidth: false,\n    layout: 'vertical',\n  },\n\n  variants: {\n    itemMinWidth: {\n      true: itemStyles.itemMinWidth,\n      false: null,\n    },\n    divider: {\n      true: null,\n      false: itemStyles.itemNoDivider,\n    },\n    layout: {\n      vertical: itemStyles.verticalLayout,\n      horizontal: null,\n    },\n  },\n});\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n\n  desc: css`\n    display: block;\n\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n  `,\n}));\n"],"mappings":"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"}

package/es/Form/type.d.mts

@@ -23,10 +23,20 @@ interface FormProps$1 extends Omit<FormProps, 'variant' | 'styles' | 'classNames
     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;
   itemMinWidth?: FormItemProps$1['minWidth'];
+  /**
+   * Block padding (top / bottom) of every Form.Item. Default `16px`.
+   * Use a smaller value for compact forms in Drawers / Modals.
+   */
+  itemPadding?: number | string;
   items?: FormGroupItemType[] | FormItemProps$1[];
   itemsType?: ItemsType;
   itemVariant?: FormProps['variant'];

package/es/base-ui/Form/Form.mjs

@@ -15,7 +15,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);
@@ -119,7 +121,9 @@ const Form$1 = memo(({ className, itemMinWidth, footer, items = [], children, it
 			className: cx(rootVariants({ variant }), className),
 			ref: mergedRef,
 			style: {
-				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/base-ui/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../../src/base-ui/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { cx, useResponsive } from 'antd-style';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { rootVariants } 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          className={cx(rootVariants({ variant }), className)}\n          ref={mergedRef}\n          style={{ gap, ...style }}\n          onFormSubmit={async (values, eventDetails) => {\n            onFormSubmit?.(values, eventDetails);\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            try {\n              await onFinish(values, eventDetails);\n              snapshotRef.current = serializeForm(formRef.current);\n              syncUnsaved();\n            } finally {\n              setSubmitLoading(false);\n            }\n          }}\n          {...rest}\n        >\n          {items && items.length > 0 ? (\n            itemsType === 'group' ? (\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n            ) : (\n              <FormFlatGroup\n                className={classNames?.group}\n                style={customStyles?.group}\n                variant={variant}\n              >\n                {(items as FormFieldProps[])\n                  .filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </BaseForm>\n      </FormContext>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}
+{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../../src/base-ui/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { cx, useResponsive } from 'antd-style';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { rootVariants } 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          className={cx(rootVariants({ variant }), className)}\n          ref={mergedRef}\n          style={{\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          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":";;;;;;;;;;;;AAcA,MAAM,iBAAiB,SAAiC;CACtD,IAAI,CAAC,MAAM,OAAO;CAClB,MAAM,UAAU,CAAC,GAAG,IAAI,SAAS,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAC/C,GAAG,WAAW,OAAO,UAAU,QAClC;CACA,OAAO,KAAK,UAAU,QAAQ,MAAM,GAAG,MAAM,EAAE,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;AACxE;AAEA,MAAMA,SAAO,MACV,EACC,WACA,cACA,QACA,QAAQ,CAAC,GACT,UACA,YAAY,SACZ,UAAU,cACV,YACA,QAAQ,cACR,KACA,OACA,aACA,kBACA,eACA,WACA,YACA,UACA,cACA,QACA,KACA,SACA,aACA,GAAG,WACC;CACJ,MAAM,cAAc,QAAQ,UAAU,KAAK,KAAA;CAC3C,MAAM,sBAAsB,gBAAgB,UAAU,KAAK,KAAA;CAC3D,MAAM,EAAE,WAAW,cAAc;CACjC,MAAM,UAAU,OAAwB,IAAI;CAC5C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CACxD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,cAAc,OAAO,EAAE;CAE7B,MAAM,cAAc,kBAAkB;EACpC,qBAAqB,cAAc,QAAQ,OAAO,MAAM,YAAY,OAAO;CAC7E,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,MAAM;EACX,YAAY,UAAU,cAAc,IAAI;EACxC,IAAI;EACJ,MAAM,uBAAuB,YAAY;EACzC,MAAM,oBAAoB;GACxB,aAAa,iBAAiB;IAC5B,YAAY,UAAU,cAAc,QAAQ,OAAO;IACnD,YAAY;GACd,GAAG,CAAC;EACN;EACA,KAAK,iBAAiB,SAAS,cAAc;EAC7C,KAAK,iBAAiB,UAAU,cAAc;EAC9C,KAAK,iBAAiB,SAAS,WAAW;EAC1C,aAAa;GACX,aAAa,UAAU;GACvB,KAAK,oBAAoB,SAAS,cAAc;GAChD,KAAK,oBAAoB,UAAU,cAAc;GACjD,KAAK,oBAAoB,SAAS,WAAW;EAC/C;CACF,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,eAAe,kBAAkB;EACrC,QAAQ,SAAS,MAAM;CACzB,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,aACf,SAAiC;EAChC,QAAQ,UAAU;EAClB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAI;OAClC,IAAI,KAAK,IAAI,UAAU;CAC9B,GACA,CAAC,GAAG,CACN;CAEA,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA,QAAQ,WAAW,SAAU,aAAwB;EACrD;EACA;EACA;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,UAAU,aACb,MAAsB,cACrB,oBAAC,WAAD;EACE,WAAW,YAAY;EACvB,SAAS,cAAc;EAEvB,OAAO,cAAc;EACZ;EACT,GAAI;CACL,GAJM,SAIN,GAEH;EAAC;EAAS;EAAY;CAAY,CACpC;CAEA,MAAM,UAAU,aACb,OAA0B,eAAuB;EAChD,MAAM,MAAM,OAAO,OAAO;EAC1B,OACE,oBAAC,WAAD;GACE,QAAQ,aAAa,OAAO,MAAM,UAAU,SAAS,GAAG,IAAI,KAAA;GAC5D,WAAW,YAAY;GACvB,aAAa,YAAY,MAAM,WAAW,IAAI,cAAc,MAAM;GAClE,MAAM,OAAO;GACb,OAAO,OAAO;GACd,MAAM,OAAO;GAEb,OAAO,cAAc;GACrB,OAAO,MAAM;GACb,SAAS,OAAO,WAAW;GAC3B,eACE,oBAAoB,OAAO,MAAM,iBAAiB,SAAS,GAAG,IAAI,OAAO;GAE3E,aAAa,WAAW;IACtB,IAAI,OAA4B,aAAa,oBAAoB,CAAC;IAClE,OAAO,KAAK,QAAQ,MAAM,MAAM,GAAG;IACnC,aAAa,SAAS,CAAC,GAAG,MAAM,GAAG,IAAI,IAAI;GAC7C;GAEC,UAAA,MAAM,QAAQ,MAAM,QAAQ,IACzB,MAAM,SAAS,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC,IAC/E,MAAM;EACD,GAhBJ,GAgBI;CAEf,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,OACE,oBAAC,aAAD;EAAa,OAAO;EAClB,UAAA,qBAACC,MAAD;GACE,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;GAClD,KAAK;GACL,OAAO;IACL,KAAK;IACL,GAAI,gBAAgB,KAAA,IAChB,KAAA,IACA,EACE,mBACE,OAAO,gBAAgB,WAAW,GAAG,YAAY,MAAM,YAC3D;IACJ,GAAI,wBAAwB,KAAA,IACxB,KAAA,IACA,EACE,kCACE,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACR;IACJ,GAAG;GACL;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;GAjCN,UAAA;IAmCG,SAAS,MAAM,SAAS,IACvB,cAAc,UACX,MAA8B,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC,IAEhE,oBAAC,eAAD;KACE,WAAW,YAAY;KACvB,OAAO,cAAc;KACZ;KAEP,UAAA,MACC,QAAQ,SAAS,CAAC,KAAK,MAAM,CAAC,CAC9B,KAAK,MAAM,MAAM,QAAQ,MAAM,CAAC,CAAC;IACvB,CAAA,IAEf,KAAA;IACH;IACA;GACO;;CACC,CAAA;AAEjB,CACF;AAEA,OAAK,cAAc"}

package/es/base-ui/Form/style.mjs

@@ -17,8 +17,9 @@ const styles = createStaticStyles(({ css }) => ({
       padding-block: 0;
     }
 
+    /* Mobile stacks flush, unless the Form sets gap / compact (--lobe-form-gap). */
     ${responsive.sm} {
-      gap: 0 !important;
+      gap: var(--lobe-form-gap, 0) !important;
     }
   `,
 	rootBorderless: css`
@@ -67,7 +68,7 @@ const fieldStyles = createStaticStyles(({ css, cssVar }) => ({
 
     box-sizing: border-box;
     width: 100%;
-    padding-block: 16px;
+    padding-block: var(--lobe-form-item-padding-block, 16px);
   `,
 	vertical: css`
     flex-direction: column;

package/es/base-ui/Form/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    [data-form-group-body] {\n      padding-block: 0;\n    }\n\n    ${responsive.sm} {\n      gap: 0 !important;\n    }\n  `,\n  rootBorderless: css`\n    gap: 48px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      filled: null,\n      outlined: null,\n    },\n  },\n});\n\nexport const fieldStyles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    align-items: flex-end;\n\n    min-width: var(--form-field-min-width, unset);\n  `,\n  controlVertical: css`\n    align-items: stretch;\n    width: 100%;\n  `,\n  error: css`\n    font-size: 12px;\n    color: ${cssVar.colorError};\n  `,\n  horizontal: css`\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  `,\n  label: css`\n    display: block;\n    flex: 1;\n    max-width: 100%;\n    text-align: start;\n  `,\n  root: css`\n    display: flex;\n    gap: 12px;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-block: 16px;\n  `,\n  vertical: css`\n    flex-direction: column;\n    gap: 8px;\n    align-items: stretch;\n  `,\n}));\n\nexport const fieldVariants = cva(fieldStyles.root, {\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n  variants: {\n    layout: {\n      horizontal: fieldStyles.horizontal,\n      vertical: fieldStyles.vertical,\n    },\n  },\n});\n\nexport const dividerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    width: 100%;\n    height: 1px;\n    margin: 0;\n    border: none;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n}));\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  bodyBoxed: css`\n    padding-block: 16px;\n    padding-inline: 16px;\n  `,\n  chevron: css`\n    flex: none;\n    color: ${cssVar.colorTextDescription};\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  desc: css`\n    font-size: 12px;\n    font-weight: 400;\n    color: ${cssVar.colorTextDescription};\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n  `,\n  headerBorderless: css`\n    padding-block-end: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerBoxed: css`\n    padding: 16px;\n  `,\n  mobileBody: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    background: ${cssVar.colorBgContainer};\n  `,\n  mobileHeader: css`\n    padding: 16px;\n    background: ${cssVar.colorBgLayout};\n  `,\n  mobileTitle: css`\n    font-size: 14px;\n    font-weight: 400;\n    opacity: 0.5;\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--collapsible-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  bodyFilled: css`\n    margin-block-end: 3px;\n    margin-inline: 3px;\n    border-radius: ${cssVar.borderRadius};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  bodyFilledLight: lobeStaticStylish.shadow,\n  rootFilled: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  rootFilledDark: css`\n    background: ${cssVar.colorBgLayout};\n  `,\n  rootOutlined: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  title: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n\n    font-size: 16px;\n    font-weight: bold;\n    color: ${cssVar.colorText};\n  `,\n  titleBorderless: css`\n    font-size: 18px;\n  `,\n  trigger: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\n  `,\n}));\n\nexport const groupVariants = cva(null, {\n  compoundVariants: [\n    {\n      class: groupStyles.rootFilledDark,\n      isDarkMode: true,\n      variant: 'filled',\n    },\n  ],\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: groupStyles.rootFilled,\n      outlined: groupStyles.rootOutlined,\n    },\n    isDarkMode: {\n      false: null,\n      true: null,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({\n  borderless: cx(\n    lobeStaticStylish.variantBorderlessWithoutHover,\n    css`\n      padding-inline: 0;\n    `,\n  ),\n  filled: cx(\n    lobeStaticStylish.variantFilledWithoutHover,\n    css`\n      background: ${cssVar.colorFillQuaternary};\n    `,\n  ),\n  mobile: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    border-radius: 0;\n    background: ${cssVar.colorBgContainer};\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n}));\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: flatGroupStyles.borderless,\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    ${responsive.sm} {\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n  desc: css`\n    display: block;\n\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":"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"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../../src/base-ui/Form/style.ts"],"sourcesContent":["import { createStaticStyles, responsive } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { focusRing } from '@/base-ui/focusRing';\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => ({\n  root: css`\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    [data-form-group-body] {\n      padding-block: 0;\n    }\n\n    /* Mobile stacks flush, unless the Form sets gap / compact (--lobe-form-gap). */\n    ${responsive.sm} {\n      gap: var(--lobe-form-gap, 0) !important;\n    }\n  `,\n  rootBorderless: css`\n    gap: 48px;\n  `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: styles.rootBorderless,\n      filled: null,\n      outlined: null,\n    },\n  },\n});\n\nexport const fieldStyles = createStaticStyles(({ css, cssVar }) => ({\n  control: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    align-items: flex-end;\n\n    min-width: var(--form-field-min-width, unset);\n  `,\n  controlVertical: css`\n    align-items: stretch;\n    width: 100%;\n  `,\n  error: css`\n    font-size: 12px;\n    color: ${cssVar.colorError};\n  `,\n  horizontal: css`\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  `,\n  label: css`\n    display: block;\n    flex: 1;\n    max-width: 100%;\n    text-align: start;\n  `,\n  root: css`\n    display: flex;\n    gap: 12px;\n\n    box-sizing: border-box;\n    width: 100%;\n    padding-block: var(--lobe-form-item-padding-block, 16px);\n  `,\n  vertical: css`\n    flex-direction: column;\n    gap: 8px;\n    align-items: stretch;\n  `,\n}));\n\nexport const fieldVariants = cva(fieldStyles.root, {\n  defaultVariants: {\n    layout: 'horizontal',\n  },\n  variants: {\n    layout: {\n      horizontal: fieldStyles.horizontal,\n      vertical: fieldStyles.vertical,\n    },\n  },\n});\n\nexport const dividerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    width: 100%;\n    height: 1px;\n    margin: 0;\n    border: none;\n\n    background: ${cssVar.colorBorderSecondary};\n  `,\n}));\n\nexport const groupStyles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    display: flex;\n    flex-direction: column;\n  `,\n  bodyBoxed: css`\n    padding-block: 16px;\n    padding-inline: 16px;\n  `,\n  chevron: css`\n    flex: none;\n    color: ${cssVar.colorTextDescription};\n    transition: transform 200ms ${cssVar.motionEaseOut};\n\n    [data-panel-open] & {\n      transform: rotate(180deg);\n    }\n  `,\n  desc: css`\n    font-size: 12px;\n    font-weight: 400;\n    color: ${cssVar.colorTextDescription};\n  `,\n  header: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 100%;\n  `,\n  headerBorderless: css`\n    padding-block-end: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerBoxed: css`\n    padding: 16px;\n  `,\n  mobileBody: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    background: ${cssVar.colorBgContainer};\n  `,\n  mobileHeader: css`\n    padding: 16px;\n    background: ${cssVar.colorBgLayout};\n  `,\n  mobileTitle: css`\n    font-size: 14px;\n    font-weight: 400;\n    opacity: 0.5;\n  `,\n  panel: css`\n    overflow: hidden;\n    height: var(--collapsible-panel-height);\n    transition: height 200ms ${cssVar.motionEaseOut};\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      height: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition-duration: 0s;\n    }\n  `,\n  bodyFilled: css`\n    margin-block-end: 3px;\n    margin-inline: 3px;\n    border-radius: ${cssVar.borderRadius};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  bodyFilledLight: lobeStaticStylish.shadow,\n  rootFilled: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    background: ${cssVar.colorFillQuaternary};\n  `,\n  rootFilledDark: css`\n    background: ${cssVar.colorBgLayout};\n  `,\n  rootOutlined: css`\n    border-radius: ${cssVar.borderRadiusLG};\n    ${lobeStaticStylish.variantOutlinedWithoutHover}\n  `,\n  title: css`\n    display: flex;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n\n    font-size: 16px;\n    font-weight: bold;\n    color: ${cssVar.colorText};\n  `,\n  titleBorderless: css`\n    font-size: 18px;\n  `,\n  trigger: css`\n    cursor: pointer;\n\n    display: flex;\n    flex: 1;\n    gap: 12px;\n    align-items: center;\n\n    margin: 0;\n    padding: 0;\n    border: none;\n\n    text-align: start;\n\n    background: none;\n    outline: none;\n\n    border-radius: ${cssVar.borderRadius};\n    ${focusRing};\n  `,\n}));\n\nexport const groupVariants = cva(null, {\n  compoundVariants: [\n    {\n      class: groupStyles.rootFilledDark,\n      isDarkMode: true,\n      variant: 'filled',\n    },\n  ],\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: null,\n      filled: groupStyles.rootFilled,\n      outlined: groupStyles.rootOutlined,\n    },\n    isDarkMode: {\n      false: null,\n      true: null,\n    },\n  },\n});\n\nexport const flatGroupStyles = createStaticStyles(({ cx, css, cssVar }) => ({\n  borderless: cx(\n    lobeStaticStylish.variantBorderlessWithoutHover,\n    css`\n      padding-inline: 0;\n    `,\n  ),\n  filled: cx(\n    lobeStaticStylish.variantFilledWithoutHover,\n    css`\n      background: ${cssVar.colorFillQuaternary};\n    `,\n  ),\n  mobile: css`\n    padding-block: 0;\n    padding-inline: 16px;\n    border-radius: 0;\n    background: ${cssVar.colorBgContainer};\n  `,\n  outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n  root: css`\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n}));\n\nexport const flatGroupVariants = cva(flatGroupStyles.root, {\n  defaultVariants: {\n    variant: 'borderless',\n  },\n  variants: {\n    variant: {\n      borderless: flatGroupStyles.borderless,\n      filled: flatGroupStyles.filled,\n      outlined: flatGroupStyles.outlined,\n    },\n  },\n});\n\nexport const footerStyles = createStaticStyles(({ css, cssVar }) => ({\n  root: css`\n    ${responsive.sm} {\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const submitFooterStyles = createStaticStyles(({ css, cssVar }) => ({\n  floatFooter: css`\n    position: fixed;\n    z-index: 1000;\n    inset-block-end: 24px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 48px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadowSecondary};\n  `,\n  footer: css`\n    ${responsive.sm} {\n      margin-block-start: calc(-1 * ${cssVar.borderRadius});\n      padding: 16px;\n      border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n      background: ${cssVar.colorBgContainer};\n    }\n  `,\n}));\n\nexport const titleStyles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    position: relative;\n    text-align: start;\n  `,\n  desc: css`\n    display: block;\n\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 1.44;\n    color: ${cssVar.colorTextDescription};\n    word-wrap: break-word;\n    white-space: pre-wrap;\n  `,\n  title: css`\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":"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"}

package/es/base-ui/Form/type.d.mts

@@ -24,6 +24,11 @@ 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 @@ 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/base-ui/Input/style.d.mts

@@ -30,7 +30,7 @@ declare const styles: {
 };
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
-  size?: "large" | "middle" | "small" | null | undefined;
+  size?: "small" | "middle" | "large" | null | undefined;
   variant?: "filled" | "outlined" | "borderless" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/es/base-ui/ProTable/FieldControl.mjs

@@ -4,9 +4,10 @@ import InputNumber_default from "../Input/InputNumber.mjs";
 import Select from "../Select/Select.mjs";
 import DayjsDatePicker from "../DatePicker/DayjsDatePicker.mjs";
 import DayjsDateRangePicker from "../DatePicker/DayjsDateRangePicker.mjs";
+import { styles } from "./style.mjs";
 import { useColumnRequest } from "./useColumnRequest.mjs";
 import { resolveValueEnum, resolveValueType, valueEnumToList } from "./utils.mjs";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useThemeMode } from "antd-style";
 //#region src/base-ui/ProTable/FieldControl.tsx
 const SELECT_TYPES = /* @__PURE__ */ new Set([
@@ -19,11 +20,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,
@@ -41,8 +47,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,
@@ -59,24 +66,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: value ?? null,
 			variant,
@@ -87,6 +102,7 @@ const FieldControl = ({ column, form, light, onChange, placeholder, value }) =>
 		case "dateTimeRange": return /* @__PURE__ */ jsx(DayjsDateRangePicker, {
 			allowClear: true,
 			size,
+			...labelProps,
 			style: { width: "100%" },
 			value: value ?? [null, null],
 			variant,
@@ -95,8 +111,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/base-ui/ProTable/FieldControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldControl.mjs","names":["InputNumber","DatePicker","DateRangePicker","Input"],"sources":["../../../src/base-ui/ProTable/FieldControl.tsx"],"sourcesContent":["import { useThemeMode } from 'antd-style';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/base-ui/DatePicker/DayjsDatePicker';\nimport DateRangePicker from '@/base-ui/DatePicker/DayjsDateRangePicker';\nimport Input from '@/base-ui/Input/Input';\nimport InputNumber from '@/base-ui/Input/InputNumber';\nimport Select from '@/base-ui/Select';\nimport Switch from '@/base-ui/Switch';\n\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from './type';\nimport { useColumnRequest } from './useColumnRequest';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from './utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  /** Light filter bar: small controls, outlined in light mode and filled in dark mode. */\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/** The search-form control of a column (Pro \"edit\" mode, query flavor). */\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={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(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 ?? [null, null]}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next && (next[0] || next[1]) ? next : undefined)}\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":";;;;;;;;;;;AAwBA,MAAM,+BAAe,IAAI,IAAuB;CAAC;CAAU;CAAS;AAAU,CAAC;;AAG/E,MAAM,gBAAgB,EAAE,QAAQ,MAAM,OAAO,UAAU,aAAa,YAA+B;CACjG,MAAM,YAAY,iBAAiB,MAAM,KAAK;CAC9C,MAAM,YAAY,iBAAiB,MAAM;CACzC,MAAM,EAAE,aAAa,CAAC,MAAM;CAC5B,MAAM,QAAQ,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,KAAA;CAChE,MAAM,OAAO,QAAQ,UAAU,KAAA;CAC/B,MAAM,EAAE,eAAe,aAAa;CAEpC,MAAM,UAAU,QAAS,aAAa,WAAW,aAAc,KAAA;CAC/D,MAAM,SAAS,iBAAiB,MAAM;CAEtC,IAAI,OAAO,gBACT,OAAO,OAAO,eACZ,QACA;EAAE;EAAM,SAAS,CAAC;EAAO;EAAU;CAAM,GACzC,IACF;CAGF,IAAI,OAAO,WAAW,aAAa,aAAa,IAAI,SAAS,GAAG;EAC9D,MAAM,UACJ,OAAO,WACP,WAAW,WACX,gBAAgB,SAAS,CAAC,CAAC,KAAK,UAAU;GACxC,UAAU,KAAK;GACf,OAAO,KAAK;GACZ,OAAO,KAAK;EACd,EAAE;EACJ,OACE,oBAAC,QAAD;GACE,YAAA;GACA,SAAS,OAAO;GAChB,MAAM,cAAc,aAAa,aAAa,KAAA;GACrC;GACT,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,UAAU,cAAc,aAAa,CAAC,IAAI;GACxC;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;GAC9C,UACE,OAAO,YACF,aAAqB;IACpB,OAAO,SAAU,QAAQ;IACzB,WAAW,WAAW,QAAQ;GAChC,IACA,WAAW;EAElB,CAAA;CAEL;CAEA,QAAQ,WAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,YACH,OACE,oBAACA,qBAAD;GACE,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;EAGL,KAAK,UACH,OAAO,oBAAC,QAAD;GAAQ,SAAS,CAAC,CAAC;GAAO,GAAI;GAAY,WAAW,SAAS,SAAS,IAAI;EAAI,CAAA;EAExF,KAAK;EACL,KAAK,YACH,OACE,oBAACC,iBAAD;GACE,YAAA;GACA,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,QAAQ,KAAA,CAAS;EAC/C,CAAA;EAGL,KAAK;EACL,KAAK,iBACH,OACE,oBAACC,sBAAD;GACE,YAAA;GACM;GACN,OAAO,EAAE,OAAO,OAAO;GACvB,OAAO,SAAS,CAAC,MAAM,IAAI;GAClB;GACT,GAAI;GACJ,WAAW,SAAS,SAAS,SAAS,KAAK,MAAM,KAAK,MAAM,OAAO,KAAA,CAAS;EAC7E,CAAA;EAGL,SACE,OACE,oBAACC,eAAD;GACE,YAAA;GACA,aAAa,QAAQ,QAAQ,YAAY;GACnC;GACN,MAAM,cAAc,aAAa,aAAa,KAAA;GAC9C,OAAO,SAAS;GACP;GACT,GAAI;GACJ,WAAW,UAAU,SAAS,MAAM,OAAO,UAAU,KAAK,KAAA,IAAY,MAAM,OAAO,KAAK;GACxF,eAAe;IACb,SAAS,KAAA,CAAS;IAClB,WAAW,UAAU;GACvB;EACD,CAAA;CAGP;AACF"}
+{"version":3,"file":"FieldControl.mjs","names":["InputNumber","DatePicker","DateRangePicker","Input"],"sources":["../../../src/base-ui/ProTable/FieldControl.tsx"],"sourcesContent":["import { useThemeMode } from 'antd-style';\nimport { type ReactNode } from 'react';\n\nimport DatePicker from '@/base-ui/DatePicker/DayjsDatePicker';\nimport DateRangePicker from '@/base-ui/DatePicker/DayjsDateRangePicker';\nimport Input from '@/base-ui/Input/Input';\nimport InputNumber from '@/base-ui/Input/InputNumber';\nimport Select from '@/base-ui/Select';\nimport Switch from '@/base-ui/Switch';\n\nimport { styles } from './style';\nimport type { ProColumnType, ProTableFormInstance, ProTableValueType } from './type';\nimport { useColumnRequest } from './useColumnRequest';\nimport { resolveValueEnum, resolveValueType, valueEnumToList } from './utils';\n\nexport interface FieldControlProps {\n  column: ProColumnType<any>;\n  form: ProTableFormInstance;\n  /** Light filter bar: small controls, outlined in light mode and filled in dark mode. */\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/** The search-form control of a column (Pro \"edit\" mode, query flavor). */\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={value ?? null}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(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 ?? [null, null]}\n          variant={variant}\n          {...fieldProps}\n          onChange={(next) => onChange(next && (next[0] || next[1]) ? next : undefined)}\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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"}

package/es/base-ui/ProTable/style.mjs

@@ -134,16 +134,29 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     display: inline-flex;
     flex: none;
     align-items: center;
-    width: 160px;
+
+    width: auto;
+    min-width: 160px;
+    max-width: 320px;
 
     & > * {
       width: 100%;
     }
   `,
 	lightFilterLabel: css`
+    flex: none;
     font-size: ${cssVar.fontSizeSM};
     color: ${cssVar.colorTextSecondary};
     white-space: nowrap;
+
+    &::after {
+      content: ':';
+    }
+  `,
+	lightFilterSwitch: css`
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
   `,
 	optionCell: css`
     display: flex;

package/es/base-ui/ProTable/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ProTable/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const PRO_PREFIX_CLS = 'lobe-pro-table';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  alert: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 40px;\n    margin-block-end: 12px;\n    padding-block: 6px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: ${cssVar.fontSize};\n    color: ${cssVar.colorText};\n\n    background: color-mix(in srgb, ${cssVar.colorPrimary} 8%, transparent);\n  `,\n  alertInfo: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: center;\n\n    min-width: 0;\n  `,\n  alertOption: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n  `,\n  part: css`\n    min-width: 0;\n  `,\n  partBordered: css`\n    padding: 16px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  code: css`\n    padding-block: 1px;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-family: ${cssVar.fontFamilyCode};\n    font-size: 0.9em;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  copyable: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    max-width: 100%;\n  `,\n  copyableText: css`\n    overflow: hidden;\n    min-width: 0;\n    text-overflow: ellipsis;\n  `,\n  density: css`\n    display: flex;\n    flex-direction: column;\n    min-width: 140px;\n    padding: 4px;\n  `,\n  densityItem: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    height: 32px;\n    padding-inline: 8px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font: inherit;\n    color: ${cssVar.colorText};\n    text-align: start;\n\n    background: transparent;\n\n    &:hover,\n    &:focus-visible {\n      background: ${cssVar.colorFillTertiary};\n      outline: none;\n    }\n\n    &[aria-checked='true'] {\n      font-weight: 500;\n    }\n  `,\n  enumList: css`\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  `,\n  indexBorder: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: 18px;\n    height: 18px;\n    padding-inline: 4px;\n    border-radius: 9px;\n\n    font-size: 12px;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillSecondary};\n\n    &[data-top] {\n      color: ${cssVar.colorTextLightSolid};\n      background: ${cssVar.colorPrimary};\n    }\n  `,\n  lightFilter: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n  `,\n  lightFilterItem: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    width: 160px;\n\n    & > * {\n      width: 100%;\n    }\n  `,\n  lightFilterLabel: css`\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n  `,\n  optionCell: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n    justify-content: flex-end;\n  `,\n  root: css`\n    --lobe-pro-table-status-default: ${cssVar.colorTextQuaternary};\n    --lobe-pro-table-status-error: ${cssVar.colorError};\n    --lobe-pro-table-status-processing: ${cssVar.colorPrimary};\n    --lobe-pro-table-status-success: ${cssVar.colorSuccess};\n    --lobe-pro-table-status-warning: ${cssVar.colorWarning};\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    min-width: 0;\n\n    /* Query form → toolbar / table: 24px (16px gap + 8px), parts below keep 16px. */\n    & > :has(> [data-pro-table-search]) {\n      margin-block-end: 8px;\n    }\n\n    &[data-fullscreen] {\n      overflow: auto;\n      padding: 16px;\n      background: ${cssVar.colorBgLayout};\n    }\n  `,\n  search: css`\n    display: grid;\n    gap: 16px 24px;\n    align-items: center;\n  `,\n  searchActions: css`\n    display: flex;\n    grid-column-end: -1;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    /* Vertical: buttons sit on the control line of the last row (Pro adds a blank label). */\n    &[data-layout='vertical'] {\n      align-self: end;\n    }\n  `,\n  /* Ellipsis lives on the element that holds the text (Form wraps labels in flex boxes). */\n  searchLabelText: css`\n    overflow: hidden;\n    display: block;\n\n    min-width: 0;\n    max-width: 100%;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  searchField: css`\n    min-width: 0;\n\n    /* The base-ui Form.Field row: no list padding, fixed-width label column, full-width control. */\n    & > div {\n      gap: 8px;\n      padding-block: 0;\n    }\n\n    & > div > label {\n      overflow: hidden;\n      flex: none;\n\n      width: var(--lobe-pro-table-label-width, auto);\n\n      color: ${cssVar.colorTextSecondary};\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &[data-layout='horizontal'] > div > label {\n      text-align: end;\n    }\n\n    /* A long label never leaves the form: a block label clips and ellipsizes at the END of\n       the text (text-align only moves short labels; it never shifts overflow to the start). */\n    && > div > label {\n      min-width: 0;\n      max-width: 100%;\n    }\n\n    && > div > label * {\n      min-width: 0;\n      max-width: 100%;\n    }\n\n    /* Vertical (Pro QueryFilter vertical): label on its own line, full-width control. */\n    &[data-layout='vertical'] > div > label {\n      width: 100%;\n      text-align: start;\n    }\n\n    & > div > div {\n      flex: 1;\n      align-items: stretch;\n      min-width: 0;\n    }\n  `,\n  searchFieldControl: css`\n    flex: 1;\n    min-width: 0;\n  `,\n  searchLabel: css`\n    overflow: hidden;\n    flex: none;\n\n    color: ${cssVar.colorTextSecondary};\n    text-align: end;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    &[data-layout='vertical'] {\n      text-align: start;\n    }\n  `,\n  setting: css`\n    display: flex;\n    flex-direction: column;\n\n    width: 260px;\n    max-height: 420px;\n    padding-block: 4px;\n  `,\n  settingGroupTitle: css`\n    padding-block: 6px 2px;\n    padding-inline: 12px;\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextDescription};\n  `,\n  settingHeader: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 4px 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorSplit};\n  `,\n  settingItem: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n\n    min-height: 32px;\n    padding-inline: 12px 8px;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:hover [data-setting-actions] {\n      opacity: 1;\n    }\n  `,\n  settingItemActions: css`\n    display: flex;\n    flex: none;\n    gap: 2px;\n    opacity: 0;\n\n    &:focus-within {\n      opacity: 1;\n    }\n  `,\n  settingItemTitle: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-width: 0;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  settingList: css`\n    overflow: auto;\n    flex: 1;\n    padding-block: 4px;\n  `,\n  status: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n  `,\n  statusDot: css`\n    flex: none;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n  `,\n  statusProcessing: css`\n    @keyframes lobe-pro-table-status-pulse {\n      0% {\n        box-shadow: 0 0 0 0 color-mix(in srgb, currentcolor 40%, transparent);\n      }\n\n      100% {\n        box-shadow: 0 0 0 4px transparent;\n      }\n    }\n\n    color: ${cssVar.colorPrimary};\n    animation: lobe-pro-table-status-pulse 1.2s ease-out infinite;\n  `,\n  title: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    font-size: ${cssVar.fontSizeLG};\n    font-weight: 600;\n    color: ${cssVar.colorText};\n  `,\n  titleSub: css`\n    font-size: ${cssVar.fontSize};\n    font-weight: normal;\n    color: ${cssVar.colorTextDescription};\n  `,\n  titleTooltip: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n  `,\n  toolbar: css`\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    margin-block-end: 16px;\n  `,\n  toolbarActions: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    min-width: 0;\n    margin-inline-start: auto;\n  `,\n  toolbarOptions: css`\n    display: flex;\n    flex: none;\n    gap: 2px;\n    align-items: center;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,iBAAiB;AAE9B,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;qBAUS,OAAO,aAAa;;iBAExB,OAAO,SAAS;aACpB,OAAO,UAAU;;qCAEO,OAAO,aAAa;;CAEvD,WAAW,GAAG;;;;;;;;;CASd,aAAa,GAAG;;;;;;CAMhB,MAAM,GAAG;;;CAGT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,MAAM,GAAG;;;qBAGU,OAAO,eAAe;;mBAExB,OAAO,eAAe;;;kBAGvB,OAAO,kBAAkB;;CAEzC,UAAU,GAAG;;;;;;CAMb,cAAc,GAAG;;;;;CAKjB,SAAS,GAAG;;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,eAAe;;;aAG9B,OAAO,UAAU;;;;;;;oBAOV,OAAO,kBAAkB;;;;;;;;CAQ3C,UAAU,GAAG;;;;;CAKb,aAAa,GAAG;;;;;;;;;;;;aAYL,OAAO,UAAU;;kBAEZ,OAAO,mBAAmB;;;eAG7B,OAAO,oBAAoB;oBACtB,OAAO,aAAa;;;CAGtC,aAAa,GAAG;;;;;;CAMhB,iBAAiB,GAAG;;;;;;;;;;CAUpB,kBAAkB,GAAG;iBACN,OAAO,WAAW;aACtB,OAAO,mBAAmB;;;CAGrC,YAAY,GAAG;;;;;;;CAOf,MAAM,GAAG;uCAC4B,OAAO,oBAAoB;qCAC7B,OAAO,WAAW;0CACb,OAAO,aAAa;uCACvB,OAAO,aAAa;uCACpB,OAAO,aAAa;;;;;;;;;;;;;;;oBAevC,OAAO,cAAc;;;CAGvC,QAAQ,GAAG;;;;;CAKX,eAAe,GAAG;;;;;;;;;;;;;CAclB,iBAAiB,GAAG;;;;;;;;;;CAUpB,aAAa,GAAG;;;;;;;;;;;;;;;eAeH,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCvC,oBAAoB,GAAG;;;;CAIvB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;;;;;;;;CASrC,SAAS,GAAG;;;;;;;;CAQZ,mBAAmB,GAAG;;;iBAGP,OAAO,WAAW;aACtB,OAAO,qBAAqB;;CAEvC,eAAe,GAAG;;;;;;;kCAOc,OAAO,WAAW;;CAElD,aAAa,GAAG;;;;;;;;;oBASE,OAAO,kBAAkB;;;;;;;CAO3C,oBAAoB,GAAG;;;;;;;;;;CAUvB,kBAAkB,GAAG;;;;;;;;;CASrB,aAAa,GAAG;;;;;CAKhB,QAAQ,GAAG;;;;;CAKX,WAAW,GAAG;;;;;;CAMd,kBAAkB,GAAG;;;;;;;;;;;aAWV,OAAO,aAAa;;;CAG/B,OAAO,GAAG;;;;;;;;iBAQK,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAE5B,UAAU,GAAG;iBACE,OAAO,SAAS;;aAEpB,OAAO,qBAAqB;;CAEvC,cAAc,GAAG;;;;;CAKjB,SAAS,GAAG;;;;;;;;;CASZ,gBAAgB,GAAG;;;;;;;;;;;CAWnB,gBAAgB,GAAG;;;;;;AAMrB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ProTable/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const PRO_PREFIX_CLS = 'lobe-pro-table';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  alert: css`\n    display: flex;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    min-height: 40px;\n    margin-block-end: 12px;\n    padding-block: 6px;\n    padding-inline: 12px;\n    border-radius: ${cssVar.borderRadius};\n\n    font-size: ${cssVar.fontSize};\n    color: ${cssVar.colorText};\n\n    background: color-mix(in srgb, ${cssVar.colorPrimary} 8%, transparent);\n  `,\n  alertInfo: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: center;\n\n    min-width: 0;\n  `,\n  alertOption: css`\n    display: flex;\n    flex: none;\n    gap: 8px;\n    align-items: center;\n  `,\n  part: css`\n    min-width: 0;\n  `,\n  partBordered: css`\n    padding: 16px;\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadiusLG};\n  `,\n  code: css`\n    padding-block: 1px;\n    padding-inline: 6px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-family: ${cssVar.fontFamilyCode};\n    font-size: 0.9em;\n\n    background: ${cssVar.colorFillTertiary};\n  `,\n  copyable: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    max-width: 100%;\n  `,\n  copyableText: css`\n    overflow: hidden;\n    min-width: 0;\n    text-overflow: ellipsis;\n  `,\n  density: css`\n    display: flex;\n    flex-direction: column;\n    min-width: 140px;\n    padding: 4px;\n  `,\n  densityItem: css`\n    cursor: pointer;\n\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: space-between;\n\n    height: 32px;\n    padding-inline: 8px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font: inherit;\n    color: ${cssVar.colorText};\n    text-align: start;\n\n    background: transparent;\n\n    &:hover,\n    &:focus-visible {\n      background: ${cssVar.colorFillTertiary};\n      outline: none;\n    }\n\n    &[aria-checked='true'] {\n      font-weight: 500;\n    }\n  `,\n  enumList: css`\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 8px;\n  `,\n  indexBorder: css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    min-width: 18px;\n    height: 18px;\n    padding-inline: 4px;\n    border-radius: 9px;\n\n    font-size: 12px;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorFillSecondary};\n\n    &[data-top] {\n      color: ${cssVar.colorTextLightSolid};\n      background: ${cssVar.colorPrimary};\n    }\n  `,\n  lightFilter: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n  `,\n  lightFilterItem: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n\n    width: auto;\n    min-width: 160px;\n    max-width: 320px;\n\n    & > * {\n      width: 100%;\n    }\n  `,\n  lightFilterLabel: css`\n    flex: none;\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextSecondary};\n    white-space: nowrap;\n\n    &::after {\n      content: ':';\n    }\n  `,\n  lightFilterSwitch: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n  `,\n  optionCell: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    align-items: center;\n    justify-content: flex-end;\n  `,\n  root: css`\n    --lobe-pro-table-status-default: ${cssVar.colorTextQuaternary};\n    --lobe-pro-table-status-error: ${cssVar.colorError};\n    --lobe-pro-table-status-processing: ${cssVar.colorPrimary};\n    --lobe-pro-table-status-success: ${cssVar.colorSuccess};\n    --lobe-pro-table-status-warning: ${cssVar.colorWarning};\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    min-width: 0;\n\n    /* Query form → toolbar / table: 24px (16px gap + 8px), parts below keep 16px. */\n    & > :has(> [data-pro-table-search]) {\n      margin-block-end: 8px;\n    }\n\n    &[data-fullscreen] {\n      overflow: auto;\n      padding: 16px;\n      background: ${cssVar.colorBgLayout};\n    }\n  `,\n  search: css`\n    display: grid;\n    gap: 16px 24px;\n    align-items: center;\n  `,\n  searchActions: css`\n    display: flex;\n    grid-column-end: -1;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    /* Vertical: buttons sit on the control line of the last row (Pro adds a blank label). */\n    &[data-layout='vertical'] {\n      align-self: end;\n    }\n  `,\n  /* Ellipsis lives on the element that holds the text (Form wraps labels in flex boxes). */\n  searchLabelText: css`\n    overflow: hidden;\n    display: block;\n\n    min-width: 0;\n    max-width: 100%;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  searchField: css`\n    min-width: 0;\n\n    /* The base-ui Form.Field row: no list padding, fixed-width label column, full-width control. */\n    & > div {\n      gap: 8px;\n      padding-block: 0;\n    }\n\n    & > div > label {\n      overflow: hidden;\n      flex: none;\n\n      width: var(--lobe-pro-table-label-width, auto);\n\n      color: ${cssVar.colorTextSecondary};\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &[data-layout='horizontal'] > div > label {\n      text-align: end;\n    }\n\n    /* A long label never leaves the form: a block label clips and ellipsizes at the END of\n       the text (text-align only moves short labels; it never shifts overflow to the start). */\n    && > div > label {\n      min-width: 0;\n      max-width: 100%;\n    }\n\n    && > div > label * {\n      min-width: 0;\n      max-width: 100%;\n    }\n\n    /* Vertical (Pro QueryFilter vertical): label on its own line, full-width control. */\n    &[data-layout='vertical'] > div > label {\n      width: 100%;\n      text-align: start;\n    }\n\n    & > div > div {\n      flex: 1;\n      align-items: stretch;\n      min-width: 0;\n    }\n  `,\n  searchFieldControl: css`\n    flex: 1;\n    min-width: 0;\n  `,\n  searchLabel: css`\n    overflow: hidden;\n    flex: none;\n\n    color: ${cssVar.colorTextSecondary};\n    text-align: end;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    &[data-layout='vertical'] {\n      text-align: start;\n    }\n  `,\n  setting: css`\n    display: flex;\n    flex-direction: column;\n\n    width: 260px;\n    max-height: 420px;\n    padding-block: 4px;\n  `,\n  settingGroupTitle: css`\n    padding-block: 6px 2px;\n    padding-inline: 12px;\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextDescription};\n  `,\n  settingHeader: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 4px 8px;\n    padding-inline: 12px;\n    border-block-end: 1px solid ${cssVar.colorSplit};\n  `,\n  settingItem: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n\n    min-height: 32px;\n    padding-inline: 12px 8px;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:hover [data-setting-actions] {\n      opacity: 1;\n    }\n  `,\n  settingItemActions: css`\n    display: flex;\n    flex: none;\n    gap: 2px;\n    opacity: 0;\n\n    &:focus-within {\n      opacity: 1;\n    }\n  `,\n  settingItemTitle: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-width: 0;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  settingList: css`\n    overflow: auto;\n    flex: 1;\n    padding-block: 4px;\n  `,\n  status: css`\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n  `,\n  statusDot: css`\n    flex: none;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n  `,\n  statusProcessing: css`\n    @keyframes lobe-pro-table-status-pulse {\n      0% {\n        box-shadow: 0 0 0 0 color-mix(in srgb, currentcolor 40%, transparent);\n      }\n\n      100% {\n        box-shadow: 0 0 0 4px transparent;\n      }\n    }\n\n    color: ${cssVar.colorPrimary};\n    animation: lobe-pro-table-status-pulse 1.2s ease-out infinite;\n  `,\n  title: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n\n    min-width: 0;\n\n    font-size: ${cssVar.fontSizeLG};\n    font-weight: 600;\n    color: ${cssVar.colorText};\n  `,\n  titleSub: css`\n    font-size: ${cssVar.fontSize};\n    font-weight: normal;\n    color: ${cssVar.colorTextDescription};\n  `,\n  titleTooltip: css`\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n  `,\n  toolbar: css`\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 12px;\n    align-items: center;\n    justify-content: space-between;\n\n    margin-block-end: 16px;\n  `,\n  toolbarActions: css`\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    min-width: 0;\n    margin-inline-start: auto;\n  `,\n  toolbarOptions: css`\n    display: flex;\n    flex: none;\n    gap: 2px;\n    align-items: center;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,iBAAiB;AAE9B,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;qBAUS,OAAO,aAAa;;iBAExB,OAAO,SAAS;aACpB,OAAO,UAAU;;qCAEO,OAAO,aAAa;;CAEvD,WAAW,GAAG;;;;;;;;;CASd,aAAa,GAAG;;;;;;CAMhB,MAAM,GAAG;;;CAGT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,MAAM,GAAG;;;qBAGU,OAAO,eAAe;;mBAExB,OAAO,eAAe;;;kBAGvB,OAAO,kBAAkB;;CAEzC,UAAU,GAAG;;;;;;CAMb,cAAc,GAAG;;;;;CAKjB,SAAS,GAAG;;;;;;CAMZ,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,eAAe;;;aAG9B,OAAO,UAAU;;;;;;;oBAOV,OAAO,kBAAkB;;;;;;;;CAQ3C,UAAU,GAAG;;;;;CAKb,aAAa,GAAG;;;;;;;;;;;;aAYL,OAAO,UAAU;;kBAEZ,OAAO,mBAAmB;;;eAG7B,OAAO,oBAAoB;oBACtB,OAAO,aAAa;;;CAGtC,aAAa,GAAG;;;;;;CAMhB,iBAAiB,GAAG;;;;;;;;;;;;;CAapB,kBAAkB,GAAG;;iBAEN,OAAO,WAAW;aACtB,OAAO,mBAAmB;;;;;;;CAOrC,mBAAmB,GAAG;;;;;CAKtB,YAAY,GAAG;;;;;;;CAOf,MAAM,GAAG;uCAC4B,OAAO,oBAAoB;qCAC7B,OAAO,WAAW;0CACb,OAAO,aAAa;uCACvB,OAAO,aAAa;uCACpB,OAAO,aAAa;;;;;;;;;;;;;;;oBAevC,OAAO,cAAc;;;CAGvC,QAAQ,GAAG;;;;;CAKX,eAAe,GAAG;;;;;;;;;;;;;CAclB,iBAAiB,GAAG;;;;;;;;;;CAUpB,aAAa,GAAG;;;;;;;;;;;;;;;eAeH,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCvC,oBAAoB,GAAG;;;;CAIvB,aAAa,GAAG;;;;aAIL,OAAO,mBAAmB;;;;;;;;;CASrC,SAAS,GAAG;;;;;;;;CAQZ,mBAAmB,GAAG;;;iBAGP,OAAO,WAAW;aACtB,OAAO,qBAAqB;;CAEvC,eAAe,GAAG;;;;;;;kCAOc,OAAO,WAAW;;CAElD,aAAa,GAAG;;;;;;;;;oBASE,OAAO,kBAAkB;;;;;;;CAO3C,oBAAoB,GAAG;;;;;;;;;;CAUvB,kBAAkB,GAAG;;;;;;;;;CASrB,aAAa,GAAG;;;;;CAKhB,QAAQ,GAAG;;;;;CAKX,WAAW,GAAG;;;;;;CAMd,kBAAkB,GAAG;;;;;;;;;;;aAWV,OAAO,aAAa;;;CAG/B,OAAO,GAAG;;;;;;;;iBAQK,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAE5B,UAAU,GAAG;iBACE,OAAO,SAAS;;aAEpB,OAAO,qBAAqB;;CAEvC,cAAc,GAAG;;;;;CAKjB,SAAS,GAAG;;;;;;;;;CASZ,gBAAgB,GAAG;;;;;;;;;;;CAWnB,gBAAgB,GAAG;;;;;;AAMrB,EAAE"}

package/es/base-ui/ProTable/type.d.mts

@@ -185,13 +185,16 @@ interface ProTableRequestData<T> {
 type ProTableRequestSort = Record<string, SortOrder>;
 /** `filter` argument of `request`: column key → selected filter values (ProComponents shape). */
 type ProTableRequestFilter = Record<string, (string | number)[] | null>;
-/** `request(params, sort, filter)`; resolves `{ data, total, success }` (all optional). */
+/**
+ * `request(params, sort, filter)`; resolves `{ data, total, success }` (all optional). A `null` /
+ * `undefined` result is treated as empty data.
+ */
 type ProTableRequest<T, Params = Record<string, any>> = (params: Params & {
   [key: string]: any;
   current?: number;
   keyword?: string;
   pageSize?: number;
-}, sort: ProTableRequestSort, filter: ProTableRequestFilter) => Promise<Partial<ProTableRequestData<T>>>;
+}, sort: ProTableRequestSort, filter: ProTableRequestFilter) => Promise<Partial<ProTableRequestData<T>> | null | undefined>;
 /**
  * `loading` as an object: Spin options of the table overlay (`tip`, `variant`, …) plus `delay`
  * (ms before the overlay shows). Without `spinning` the overlay follows the `request` state.

package/es/base-ui/ProTable/useFetchData.mjs

@@ -25,7 +25,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 ?? [];