@lobehub/ui 6.0.0-beta.8 → 6.0.0

package/es/DatePicker/type.d.mts

@@ -47,11 +47,11 @@ export type PickerLocaleInput = Omit<Partial<PickerLocale>, 'lang' | 'timePicker
   timePickerLocale?: TimePickerLocale;
 };
 /** A `presets` entry: `value` may be a function, evaluated when the preset is hovered or picked. */
-export type PresetDate<T = Dayjs> = ValueDate<T>;
+export type PresetDate<T = Date> = ValueDate<T>;
 /** `components`: replace a panel (`date` / `week` / … / `time`), the `input` or the OK `button`. */
-export type PickerComponents = Components<Dayjs>;
+export type PickerComponents = Components<Date>;
 /** Props a custom panel in `components` receives (`value`, `onSelect`, `onHover`, …). */
-export type PickerPanelProps = SharedPanelProps<Dayjs>;
+export type PickerPanelProps<DateType extends object = Date> = SharedPanelProps<DateType>;
 export type PickerSize = 'large' | 'medium' | 'small';
 export type PickerVariant = 'outlined' | 'borderless' | 'filled' | 'underlined';
 export type PickerStatus = 'error' | 'warning';
@@ -107,7 +107,7 @@ interface LobePickerProps {
   variant?: PickerVariant;
 }
 /** Props `tagRender` receives for each picked date in `multiple` mode. */
-export interface PickerTagProps<DateType extends object = Dayjs> {
+export interface PickerTagProps<DateType extends object = Date> {
   closable: boolean;
   disabled: boolean;
   /** The date formatted with `format`. */
@@ -118,25 +118,39 @@ export interface PickerTagProps<DateType extends object = Dayjs> {
 }
 /** `dateString` of a value: a string per date in `multiple` mode. */
 export type PickerDateStrings<ValueType> = ValueType extends readonly unknown[] ? string[] : string | null;
+/**
+ * Date inputs the previous lobe DatePicker took (native `Date`), plus date strings and
+ * timestamps. On the dayjs pickers they are converted to `Dayjs`; callbacks always get `Dayjs`.
+ */
+export type LegacyDateInput = Date | string | number;
+/** A date prop value: `Dayjs` or a `LegacyDateInput` on the dayjs pickers, else `DateType`. */
+export type PickerDateInput<DateType> = DateType extends Dayjs ? Dayjs | LegacyDateInput : DateType extends Date ? Dayjs | LegacyDateInput : DateType;
+/** Range `onChange` dates: never `null` on the default (native `Date`) picker, as before. */
+export type RangeChangeDates<DateType extends object> = DateType extends Date ? DateRangeValue<DateType> : DateRangeValue<DateType> | null;
+export type RangeChangeStrings<DateType extends object> = DateType extends Date ? [string, string] : [string, string] | null;
+/** `PickerDateInput` for a single value or each date of a `multiple` array. */
+export type PickerValueInput<ValueType> = ValueType extends readonly (infer D)[] ? PickerDateInput<D>[] : PickerDateInput<ValueType>;
 /**
  * antd's `PickerPropsWithMultiple`: `InnerPickerProps` with the value props typed by
  * `ValueType` — `DateType` for one date, `DateType[]` with `multiple`.
  */
 export type PickerPropsWithMultiple<DateType, InnerPickerProps, ValueType = DateType> = Omit<InnerPickerProps, 'defaultValue' | 'onCalendarChange' | 'onChange' | 'onOk' | 'value'> & {
-  defaultValue?: ValueType | null;
-  onCalendarChange?: (date: ValueType | null, dateString: PickerDateStrings<ValueType>, info: BaseInfo) => void;
+  /** Also takes a native `Date`, date string or timestamp (converted to `Dayjs`). */
+  defaultValue?: PickerValueInput<ValueType> | null;
+  onCalendarChange?(date: ValueType | null, dateString: PickerDateStrings<ValueType>, info: BaseInfo): void;
   /** Cleared: `null` for one date, `[]` with `multiple`. */
-  onChange?: (date: ValueType | null, dateString: PickerDateStrings<ValueType>) => void;
-  onOk?: (date?: ValueType | null) => void;
-  value?: ValueType | null;
+  onChange?(date: ValueType | null, dateString: PickerDateStrings<ValueType>): void;
+  onOk?(date?: ValueType | null): void;
+  /** Also takes a native `Date`, date string or timestamp (converted to `Dayjs`). */
+  value?: PickerValueInput<ValueType> | null;
 };
 /**
  * DatePicker props other than the value ones, which `PickerPropsWithMultiple` adds.
  * `DateType` is the date library's type (`Dayjs`, or another one with `generatePicker`).
  */
-export interface DatePickerBaseProps<DateType extends object = Dayjs> extends Omit<PickerProps$1<DateType>, InternalRcProps | MultipleRcProps | ValueRcProps>, LobePickerProps {
+export interface DatePickerBaseProps<DateType extends object = Date> extends Omit<PickerProps$1<DateType>, InternalRcProps | MultipleRcProps | ValueRcProps>, LobePickerProps {
   /** Semantic DOM class names: `root` / `prefix` / `input` / `suffix` and `popup.*`. */
-  classNames?: PickerClassNames<DatePickerProps<any>>;
+  classNames?: PickerClassNames<DatePickerBaseProps<DateType>>;
   /**
    * antd `PickerLocale`: `lang` texts and formats (`fieldDateFormat`, `yearFormat`,
    * `shortWeekDays`, …) and `timePickerLocale`. Defaults to the locale generated from the
@@ -165,7 +179,7 @@ export interface DatePickerBaseProps<DateType extends object = Dayjs> extends Om
   /** `multiple`: the remove icon of each tag. */
   removeIcon?: ReactNode;
   /** Semantic DOM styles: `root` / `prefix` / `input` / `suffix` and `popup.*`. */
-  styles?: PickerStyles<DatePickerProps<any>>;
+  styles?: PickerStyles<DatePickerBaseProps<DateType>>;
   /** `multiple`: render each picked date's tag, e.g. with base-ui `Tag`. */
   tagRender?: (props: PickerTagProps<DateType>) => ReactNode;
 }
@@ -173,19 +187,19 @@ export interface DatePickerBaseProps<DateType extends object = Dayjs> extends Om
  * `ValueType` is `Dayjs` (default) or `Dayjs[]` with `multiple`; `<DatePicker multiple>`
  * infers `Dayjs[]` by itself.
  */
-export type DatePickerProps<ValueType = Dayjs> = PickerPropsWithMultiple<Dayjs, DatePickerBaseProps, ValueType>;
-export type DateRangeValue<DateType extends object = Dayjs> = [DateType | null, DateType | null];
+export type DatePickerProps<ValueType = Date> = PickerPropsWithMultiple<Date, DatePickerBaseProps, ValueType>;
+export type DateRangeValue<DateType extends object = Date> = [DateType | null, DateType | null];
 /** Which end of a range an event belongs to. */
 export interface RangeInfo {
   range: 'start' | 'end';
 }
 /** `info.from` is the end picked first in the current range selection. */
-export type RangeDisabledDate<DateType extends object = Dayjs> = (current: DateType, info: {
+export type RangeDisabledDate<DateType extends object = Date> = (current: DateType, info: {
   from?: DateType;
   type: PanelMode;
 }) => boolean;
 type RangeRcProps = 'allowEmpty' | 'disabled' | 'disabledDate' | 'id' | 'onBlur' | 'onFocus' | 'order';
-export interface DateRangePickerProps<DateType extends object = Dayjs> extends Omit<RangePickerProps$1<DateType>, InternalRcProps | RangeRcProps | ValueRcProps>, LobePickerProps {
+export interface DateRangePickerProps<DateType extends object = Date> extends Omit<RangePickerProps$1<DateType>, InternalRcProps | RangeRcProps | ValueRcProps>, LobePickerProps {
   /**
    * Allow leaving the start / end empty; `true` applies to both ends.
    * @default [false, false]
@@ -193,7 +207,8 @@ export interface DateRangePickerProps<DateType extends object = Dayjs> extends O
   allowEmpty?: boolean | [boolean, boolean];
   /** Semantic DOM class names, see `DatePickerProps['classNames']`. */
   classNames?: PickerClassNames<DateRangePickerProps<DateType>>;
-  defaultValue?: [DateType | null | undefined, DateType | null | undefined];
+  /** Each end also takes a native `Date`, date string or timestamp (converted to `Dayjs`). */
+  defaultValue?: [PickerDateInput<DateType> | null | undefined, PickerDateInput<DateType> | null | undefined];
   /** Disable the whole picker, or each end separately with `[start, end]`. */
   disabled?: boolean | [boolean, boolean];
   /** Receives `info.from` once one end is picked, e.g. to limit the range length. */
@@ -206,10 +221,12 @@ export interface DateRangePickerProps<DateType extends object = Dayjs> extends O
   /** antd `PickerLocale`, see `DatePickerProps['locale']`. */
   locale?: PickerLocaleInput;
   onBlur?: (event: FocusEvent<HTMLElement>, info: RangeInfo) => void;
-  onCalendarChange?: (dates: DateRangeValue<DateType>, dateStrings: [string, string], info: RangeInfo) => void;
-  onChange?: (dates: DateRangeValue<DateType> | null, dateStrings: [string, string] | null) => void;
+  onCalendarChange?(dates: DateRangeValue<DateType>, dateStrings: [string, string], info: RangeInfo): void;
+  /** Cleared: `null` (antd). */
+  /** Cleared: `[null, null]` on the default (native `Date`) picker, `null` on the dayjs one (antd). */
+  onChange?(dates: RangeChangeDates<DateType>, dateStrings: RangeChangeStrings<DateType>): void;
   onFocus?: (event: FocusEvent<HTMLElement>, info: RangeInfo) => void;
-  onOk?: (dates: DateRangeValue<DateType>) => void;
+  onOk?(dates: DateRangeValue<DateType>): void;
   /**
    * Swap the ends when the end is earlier than the start; `false` keeps them as entered.
    * @default true
@@ -220,21 +237,22 @@ export interface DateRangePickerProps<DateType extends object = Dayjs> extends O
   ref?: Ref<RangePickerRef>;
   /** Semantic DOM styles, see `DatePickerProps['styles']`. */
   styles?: PickerStyles<DateRangePickerProps<DateType>>;
-  value?: [DateType | null | undefined, DateType | null | undefined] | null;
+  /** Each end also takes a native `Date`, date string or timestamp (converted to `Dayjs`). */
+  value?: [PickerDateInput<DateType> | null | undefined, PickerDateInput<DateType> | null | undefined] | null;
 }
 /** antd `PickerProps<DateType>`: DatePicker props over any date library's type. */
-export type PickerProps<DateType extends object = Dayjs, ValueType = DateType> = PickerPropsWithMultiple<DateType, DatePickerBaseProps<DateType>, ValueType>;
+export type PickerProps<DateType extends object = Date, ValueType = DateType> = PickerPropsWithMultiple<DateType, DatePickerBaseProps<DateType>, ValueType>;
 /** Props of `DatePicker.WeekPicker` / `MonthPicker` / … : `picker` is fixed. */
-export type PresetPickerProps<DateType extends object = Dayjs, ValueType = DateType> = Omit<PickerProps<DateType, ValueType>, 'picker'>;
-export type WeekPickerProps<ValueType = Dayjs> = PresetPickerProps<Dayjs, ValueType>;
-export type MonthPickerProps<ValueType = Dayjs> = PresetPickerProps<Dayjs, ValueType>;
-export type YearPickerProps<ValueType = Dayjs> = PresetPickerProps<Dayjs, ValueType>;
-export type QuarterPickerProps<ValueType = Dayjs> = PresetPickerProps<Dayjs, ValueType>;
+export type PresetPickerProps<DateType extends object = Date, ValueType = DateType> = Omit<PickerProps<DateType, ValueType>, 'picker'>;
+export type WeekPickerProps<ValueType = Date> = PresetPickerProps<Date, ValueType>;
+export type MonthPickerProps<ValueType = Date> = PresetPickerProps<Date, ValueType>;
+export type YearPickerProps<ValueType = Date> = PresetPickerProps<Date, ValueType>;
+export type QuarterPickerProps<ValueType = Date> = PresetPickerProps<Date, ValueType>;
 /** antd `GenericTimePickerProps`: `DatePicker.TimePicker` has no `picker` / `showTime`. */
-export type GenericTimePickerProps<DateType extends object = Dayjs, ValueType = DateType> = Omit<PickerProps<DateType, ValueType>, 'picker' | 'showTime'>;
-export type TimePickerProps<ValueType = Dayjs> = GenericTimePickerProps<Dayjs, ValueType>;
+export type GenericTimePickerProps<DateType extends object = Date, ValueType = DateType> = Omit<PickerProps<DateType, ValueType>, 'picker' | 'showTime'>;
+export type TimePickerProps<ValueType = Date> = GenericTimePickerProps<Date, ValueType>;
 /** antd-style alias of `DateRangePickerProps`. */
-export type RangePickerProps<DateType extends object = Dayjs> = DateRangePickerProps<DateType>;
+export type RangePickerProps<DateType extends object = Date> = DateRangePickerProps<DateType>;
 /** antd `DatePickerSemanticType`: the Semantic DOM `classNames` / `styles` shapes. */
 export interface DatePickerSemanticType {
   classNames?: PickerSemanticClassNames;
@@ -263,14 +281,22 @@ export interface GeneratedDatePicker<DateType extends object> extends SinglePick
   WeekPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
   YearPicker: SinglePickerComponent<DateType, Omit<DatePickerBaseProps<DateType>, 'picker'>>;
 }
-/** The default `DatePicker` (Dayjs), with antd's pure panels and `generatePicker`. */
-export interface DatePickerType extends GeneratedDatePicker<Dayjs> {
+/** The default `DatePicker` (native `Date`) or `DayjsDatePicker`, with antd's pure panels and `generatePicker`. */
+export interface DatePickerType<D extends object = Date> extends GeneratedDatePicker<D> {
   /** Debug only: the popup panel rendered inline, always open (antd `render-panel`). */
-  _InternalPanelDoNotUseOrYouWillBeFired: ComponentType<DatePickerProps<any>>;
+  _InternalPanelDoNotUseOrYouWillBeFired: ComponentType<PickerPropsWithMultiple<D, DatePickerBaseProps<D>, any>>;
   /** Debug only: the RangePicker popup panel rendered inline, always open. */
-  _InternalRangePanelDoNotUseOrYouWillBeFired: ComponentType<DateRangePickerProps>;
+  _InternalRangePanelDoNotUseOrYouWillBeFired: ComponentType<DateRangePickerProps<D>>;
   generatePicker: <DateType extends object>(generateConfig: GenerateConfig<DateType>) => GeneratedDatePicker<DateType>;
 }
+/** `DayjsDatePicker`: the antd-aligned DatePicker over `Dayjs`. */
+export type DayjsDatePickerType = DatePickerType<Dayjs>;
+/** `DayjsDatePicker` props: values and callbacks use `Dayjs` (`Dayjs[]` with `multiple`). */
+export type DayjsDatePickerProps<ValueType = Dayjs> = PickerPropsWithMultiple<Dayjs, DatePickerBaseProps<Dayjs>, ValueType>;
+/** `DayjsDateRangePicker` props. */
+export type DayjsDateRangePickerProps = DateRangePickerProps<Dayjs>;
+/** `DayjsDateRangePicker` value: `[Dayjs | null, Dayjs | null]`. */
+export type DayjsDateRangeValue = DateRangeValue<Dayjs>;
 //#endregion
 export type { CellRender, CellRenderInfo, GenerateConfig, PanelMode, PickerMode, PickerRef, RangePickerRef };
 //# sourceMappingURL=type.d.mts.map

package/es/DatePicker/usePresetActive.mjs

@@ -5,6 +5,7 @@ import { jsx } from "react/jsx-runtime";
 const sameDay = (a, b) => {
 	if (!a || !b) return !a && !b;
 	if (typeof a.isSame === "function") return a.isSame(b, "day");
+	if (a instanceof Date && b instanceof Date) return a.toDateString() === b.toDateString();
 	return a === b;
 };
 const sameValue = (a, b) => {

package/es/DatePicker/usePresetActive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePresetActive.mjs","names":[],"sources":["../../src/DatePicker/usePresetActive.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { PREFIX_CLS } from './style';\n\ninterface Preset {\n  label: ReactNode;\n  value: unknown;\n}\n\nconst sameDay = (a: any, b: any): boolean => {\n  if (!a || !b) return !a && !b;\n  if (typeof a.isSame === 'function') return a.isSame(b, 'day');\n  return a === b;\n};\n\nconst sameValue = (a: any, b: any): boolean => {\n  if (Array.isArray(a) || Array.isArray(b)) {\n    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;\n    return a.every((item, i) => sameDay(item, b[i]));\n  }\n  return sameDay(a, b);\n};\n\nexport const PRESET_ACTIVE_CLS = `${PREFIX_CLS}-preset-active`;\n\n/**\n * rc-picker renders `presets` as the popup sidebar but has no \"current preset\" state.\n * Mirror the picked value (controlled or not) and wrap the matching preset's label so the\n * sidebar can show it as selected (`li:has(> .lobe-picker-preset-active)`).\n */\nexport const usePresetActive = <P extends Preset>(\n  presets: P[] | undefined,\n  value: unknown,\n  defaultValue: unknown,\n) => {\n  const [inner, setInner] = useState<unknown>(defaultValue);\n  const current = value !== undefined ? value : inner;\n\n  const track = useCallback((next: unknown) => setInner(next), []);\n\n  const mapped = useMemo(() => {\n    if (!presets?.length || !current) return presets;\n    return presets.map((preset) => {\n      const v =\n        typeof preset.value === 'function' ? (preset.value as () => unknown)() : preset.value;\n      if (!sameValue(v, current)) return preset;\n      return { ...preset, label: <span className={PRESET_ACTIVE_CLS}>{preset.label}</span> };\n    });\n  }, [presets, current]);\n\n  return { presets: mapped, track };\n};\n"],"mappings":";;;;AASA,MAAM,WAAW,GAAQ,MAAoB;CAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC;CAC5B,IAAI,OAAO,EAAE,WAAW,YAAY,OAAO,EAAE,OAAO,GAAG,KAAK;CAC5D,OAAO,MAAM;AACf;AAEA,MAAM,aAAa,GAAQ,MAAoB;CAC7C,IAAI,MAAM,QAAQ,CAAC,KAAK,MAAM,QAAQ,CAAC,GAAG;EACxC,IAAI,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,OAAO;EAC5E,OAAO,EAAE,OAAO,MAAM,MAAM,QAAQ,MAAM,EAAE,EAAE,CAAC;CACjD;CACA,OAAO,QAAQ,GAAG,CAAC;AACrB;AAEA,MAAa,oBAAoB,GAAG,WAAW;;;;;;AAO/C,MAAa,mBACX,SACA,OACA,iBACG;CACH,MAAM,CAAC,OAAO,YAAY,SAAkB,YAAY;CACxD,MAAM,UAAU,UAAU,KAAA,IAAY,QAAQ;CAE9C,MAAM,QAAQ,aAAa,SAAkB,SAAS,IAAI,GAAG,CAAC,CAAC;CAY/D,OAAO;EAAE,SAVM,cAAc;GAC3B,IAAI,CAAC,SAAS,UAAU,CAAC,SAAS,OAAO;GACzC,OAAO,QAAQ,KAAK,WAAW;IAC7B,MAAM,IACJ,OAAO,OAAO,UAAU,aAAc,OAAO,MAAwB,IAAI,OAAO;IAClF,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,OAAO;IACnC,OAAO;KAAE,GAAG;KAAQ,OAAO,oBAAC,QAAD;MAAM,WAAW;MAAoB,UAAA,OAAO;KAAY,CAAA;IAAE;GACvF,CAAC;EACH,GAAG,CAAC,SAAS,OAAO,CAEG;EAAG;CAAM;AAClC"}
+{"version":3,"file":"usePresetActive.mjs","names":[],"sources":["../../src/DatePicker/usePresetActive.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useMemo, useState } from 'react';\n\nimport { PREFIX_CLS } from './style';\n\ninterface Preset {\n  label: ReactNode;\n  value: unknown;\n}\n\nconst sameDay = (a: any, b: any): boolean => {\n  if (!a || !b) return !a && !b;\n  if (typeof a.isSame === 'function') return a.isSame(b, 'day');\n  if (a instanceof Date && b instanceof Date) return a.toDateString() === b.toDateString();\n  return a === b;\n};\n\nconst sameValue = (a: any, b: any): boolean => {\n  if (Array.isArray(a) || Array.isArray(b)) {\n    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;\n    return a.every((item, i) => sameDay(item, b[i]));\n  }\n  return sameDay(a, b);\n};\n\nexport const PRESET_ACTIVE_CLS = `${PREFIX_CLS}-preset-active`;\n\n/**\n * rc-picker renders `presets` as the popup sidebar but has no \"current preset\" state.\n * Mirror the picked value (controlled or not) and wrap the matching preset's label so the\n * sidebar can show it as selected (`li:has(> .lobe-picker-preset-active)`).\n */\nexport const usePresetActive = <P extends Preset>(\n  presets: P[] | undefined,\n  value: unknown,\n  defaultValue: unknown,\n) => {\n  const [inner, setInner] = useState<unknown>(defaultValue);\n  const current = value !== undefined ? value : inner;\n\n  const track = useCallback((next: unknown) => setInner(next), []);\n\n  const mapped = useMemo(() => {\n    if (!presets?.length || !current) return presets;\n    return presets.map((preset) => {\n      const v =\n        typeof preset.value === 'function' ? (preset.value as () => unknown)() : preset.value;\n      if (!sameValue(v, current)) return preset;\n      return { ...preset, label: <span className={PRESET_ACTIVE_CLS}>{preset.label}</span> };\n    });\n  }, [presets, current]);\n\n  return { presets: mapped, track };\n};\n"],"mappings":";;;;AASA,MAAM,WAAW,GAAQ,MAAoB;CAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC;CAC5B,IAAI,OAAO,EAAE,WAAW,YAAY,OAAO,EAAE,OAAO,GAAG,KAAK;CAC5D,IAAI,aAAa,QAAQ,aAAa,MAAM,OAAO,EAAE,aAAa,MAAM,EAAE,aAAa;CACvF,OAAO,MAAM;AACf;AAEA,MAAM,aAAa,GAAQ,MAAoB;CAC7C,IAAI,MAAM,QAAQ,CAAC,KAAK,MAAM,QAAQ,CAAC,GAAG;EACxC,IAAI,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,OAAO;EAC5E,OAAO,EAAE,OAAO,MAAM,MAAM,QAAQ,MAAM,EAAE,EAAE,CAAC;CACjD;CACA,OAAO,QAAQ,GAAG,CAAC;AACrB;AAEA,MAAa,oBAAoB,GAAG,WAAW;;;;;;AAO/C,MAAa,mBACX,SACA,OACA,iBACG;CACH,MAAM,CAAC,OAAO,YAAY,SAAkB,YAAY;CACxD,MAAM,UAAU,UAAU,KAAA,IAAY,QAAQ;CAE9C,MAAM,QAAQ,aAAa,SAAkB,SAAS,IAAI,GAAG,CAAC,CAAC;CAY/D,OAAO;EAAE,SAVM,cAAc;GAC3B,IAAI,CAAC,SAAS,UAAU,CAAC,SAAS,OAAO;GACzC,OAAO,QAAQ,KAAK,WAAW;IAC7B,MAAM,IACJ,OAAO,OAAO,UAAU,aAAc,OAAO,MAAwB,IAAI,OAAO;IAClF,IAAI,CAAC,UAAU,GAAG,OAAO,GAAG,OAAO;IACnC,OAAO;KAAE,GAAG;KAAQ,OAAO,oBAAC,QAAD;MAAM,WAAW;MAAoB,UAAA,OAAO;KAAY,CAAA;IAAE;GACvF,CAAC;EACH,GAAG,CAAC,SAAS,OAAO,CAEG;EAAG;CAAM;AAClC"}

package/es/Drawer/style.mjs.map

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

package/es/FloatingPanel/style.mjs

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

package/es/FloatingPanel/style.mjs.map

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

package/es/Form/Form.mjs

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

package/es/Form/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n  if (!form) return '';\n  const entries = [...new FormData(form).entries()].filter(\n    ([, value]) => typeof value === 'string',\n  ) as [string, string][];\n  return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    items = [],\n    children,\n    itemsType = 'group',\n    variant = 'borderless',\n    classNames,\n    styles: customStyles,\n    gap,\n    style,\n    collapsible,\n    defaultActiveKey,\n    initialValues,\n    activeKey,\n    onCollapse,\n    onFinish,\n    onFormSubmit,\n    layout,\n    ref,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const formRef = useRef<HTMLFormElement>(null);\n    const [submitLoading, setSubmitLoading] = useState(false);\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const snapshotRef = useRef('');\n\n    const syncUnsaved = useCallback(() => {\n      setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n    }, []);\n\n    useEffect(() => {\n      const form = formRef.current;\n      if (!form) return;\n      snapshotRef.current = serializeForm(form);\n      let resetTimer: ReturnType<typeof setTimeout>;\n      const handleMutation = () => syncUnsaved();\n      const handleReset = () => {\n        resetTimer = setTimeout(() => {\n          snapshotRef.current = serializeForm(formRef.current);\n          syncUnsaved();\n        }, 0);\n      };\n      form.addEventListener('input', handleMutation);\n      form.addEventListener('change', handleMutation);\n      form.addEventListener('reset', handleReset);\n      return () => {\n        clearTimeout(resetTimer);\n        form.removeEventListener('input', handleMutation);\n        form.removeEventListener('change', handleMutation);\n        form.removeEventListener('reset', handleReset);\n      };\n    }, [syncUnsaved]);\n\n    const requestReset = useCallback(() => {\n      formRef.current?.reset();\n    }, []);\n\n    const mergedRef = useCallback(\n      (node: HTMLFormElement | null) => {\n        formRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const context = useMemo(\n      () => ({\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n        requestReset,\n        submitLoading,\n        variant,\n      }),\n      [\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout,\n        mobile,\n        requestReset,\n        submitLoading,\n        variant,\n      ],\n    );\n\n    const mapFlat = useCallback(\n      (item: FormFieldProps, itemIndex: number) => (\n        <FormField\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [variant, classNames, customStyles],\n    );\n\n    const mapTree = useCallback(\n      (group: FormGroupItemType, groupIndex: number) => {\n        const key = group?.key || groupIndex;\n        return (\n          <FormGroup\n            active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n            className={classNames?.group}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            desc={group?.desc}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            style={customStyles?.group}\n            title={group.title}\n            variant={group?.variant || variant}\n            defaultActive={\n              defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n            }\n            onCollapse={(active) => {\n              let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n              keys = keys.filter((k) => k !== key);\n              onCollapse?.(active ? [...keys, key] : keys);\n            }}\n          >\n            {Array.isArray(group.children)\n              ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n              : group.children}\n          </FormGroup>\n        );\n      },\n      [\n        activeKey,\n        collapsible,\n        defaultActiveKey,\n        onCollapse,\n        variant,\n        classNames,\n        customStyles,\n        mapFlat,\n      ],\n    );\n\n    return (\n      <FormContext value={context}>\n        <BaseForm\n          ref={mergedRef}\n          {...styleProps(\n            [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n            className,\n            { gap, ...style },\n          )}\n          onFormSubmit={async (values, eventDetails) => {\n            onFormSubmit?.(values, eventDetails);\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            try {\n              await onFinish(values, eventDetails);\n              snapshotRef.current = serializeForm(formRef.current);\n              syncUnsaved();\n            } finally {\n              setSubmitLoading(false);\n            }\n          }}\n          {...rest}\n        >\n          {items && items.length > 0 ? (\n            itemsType === 'group' ? (\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n            ) : (\n              <FormFlatGroup\n                className={classNames?.group}\n                style={customStyles?.group}\n                variant={variant}\n              >\n                {(items as FormFieldProps[])\n                  .filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </BaseForm>\n      </FormContext>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}
+{"version":3,"file":"Form.mjs","names":["Form","BaseForm"],"sources":["../../src/Form/Form.tsx"],"sourcesContent":["'use client';\n\nimport { Form as BaseForm } from '@base-ui/react/form';\nimport { isUndefined } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport FormField from './components/FormField';\nimport FormFlatGroup from './components/FormFlatGroup';\nimport FormGroup from './components/FormGroup';\nimport { FormContext } from './context';\nimport { formMarker } from './marker.stylex';\nimport { rootStyles } from './style';\nimport type { FormFieldProps, FormGroupItemType, FormProps } from './type';\n\nconst serializeForm = (form: HTMLFormElement | null) => {\n  if (!form) return '';\n  const entries = [...new FormData(form).entries()].filter(\n    ([, value]) => typeof value === 'string',\n  ) as [string, string][];\n  return JSON.stringify(entries.sort((a, b) => a[0].localeCompare(b[0])));\n};\n\nconst Form = memo<FormProps>(\n  ({\n    className,\n    itemMinWidth,\n    footer,\n    items = [],\n    children,\n    itemsType = 'group',\n    variant = 'borderless',\n    classNames,\n    styles: customStyles,\n    gap,\n    style,\n    collapsible,\n    defaultActiveKey,\n    initialValues,\n    activeKey,\n    onCollapse,\n    onFinish,\n    onFormSubmit,\n    layout,\n    ref,\n    compact,\n    itemPadding,\n    ...rest\n  }) => {\n    const resolvedGap = gap ?? (compact ? 12 : undefined);\n    const resolvedItemPadding = itemPadding ?? (compact ? 10 : undefined);\n    const { mobile } = useResponsive();\n    const formRef = useRef<HTMLFormElement>(null);\n    const [submitLoading, setSubmitLoading] = useState(false);\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const snapshotRef = useRef('');\n\n    const syncUnsaved = useCallback(() => {\n      setHasUnsavedChanges(serializeForm(formRef.current) !== snapshotRef.current);\n    }, []);\n\n    useEffect(() => {\n      const form = formRef.current;\n      if (!form) return;\n      snapshotRef.current = serializeForm(form);\n      let resetTimer: ReturnType<typeof setTimeout>;\n      const handleMutation = () => syncUnsaved();\n      const handleReset = () => {\n        resetTimer = setTimeout(() => {\n          snapshotRef.current = serializeForm(formRef.current);\n          syncUnsaved();\n        }, 0);\n      };\n      form.addEventListener('input', handleMutation);\n      form.addEventListener('change', handleMutation);\n      form.addEventListener('reset', handleReset);\n      return () => {\n        clearTimeout(resetTimer);\n        form.removeEventListener('input', handleMutation);\n        form.removeEventListener('change', handleMutation);\n        form.removeEventListener('reset', handleReset);\n      };\n    }, [syncUnsaved]);\n\n    const requestReset = useCallback(() => {\n      formRef.current?.reset();\n    }, []);\n\n    const mergedRef = useCallback(\n      (node: HTMLFormElement | null) => {\n        formRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) ref.current = node;\n      },\n      [ref],\n    );\n\n    const context = useMemo(\n      () => ({\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout: layout || (mobile ? ('vertical' as const) : ('horizontal' as const)),\n        requestReset,\n        submitLoading,\n        variant,\n      }),\n      [\n        hasUnsavedChanges,\n        initialValues,\n        itemMinWidth,\n        layout,\n        mobile,\n        requestReset,\n        submitLoading,\n        variant,\n      ],\n    );\n\n    const mapFlat = useCallback(\n      (item: FormFieldProps, itemIndex: number) => (\n        <FormField\n          className={classNames?.item}\n          divider={itemIndex !== 0}\n          key={itemIndex}\n          style={customStyles?.item}\n          variant={variant}\n          {...item}\n        />\n      ),\n      [variant, classNames, customStyles],\n    );\n\n    const mapTree = useCallback(\n      (group: FormGroupItemType, groupIndex: number) => {\n        const key = group?.key || groupIndex;\n        return (\n          <FormGroup\n            active={activeKey && group?.key ? activeKey.includes(key) : undefined}\n            className={classNames?.group}\n            collapsible={isUndefined(group.collapsible) ? collapsible : group.collapsible}\n            desc={group?.desc}\n            extra={group?.extra}\n            icon={group?.icon}\n            key={key}\n            style={customStyles?.group}\n            title={group.title}\n            variant={group?.variant || variant}\n            defaultActive={\n              defaultActiveKey && group?.key ? defaultActiveKey.includes(key) : group?.defaultActive\n            }\n            onCollapse={(active) => {\n              let keys: (string | number)[] = activeKey || defaultActiveKey || [];\n              keys = keys.filter((k) => k !== key);\n              onCollapse?.(active ? [...keys, key] : keys);\n            }}\n          >\n            {Array.isArray(group.children)\n              ? group.children.filter((item) => !item.hidden).map((item, i) => mapFlat(item, i))\n              : group.children}\n          </FormGroup>\n        );\n      },\n      [\n        activeKey,\n        collapsible,\n        defaultActiveKey,\n        onCollapse,\n        variant,\n        classNames,\n        customStyles,\n        mapFlat,\n      ],\n    );\n\n    return (\n      <FormContext value={context}>\n        <BaseForm\n          ref={mergedRef}\n          {...styleProps(\n            [formMarker, rootStyles.root, variant === 'borderless' && rootStyles.borderless],\n            className,\n            {\n              gap: resolvedGap,\n              ...(resolvedGap === undefined\n                ? undefined\n                : {\n                    '--lobe-form-gap':\n                      typeof resolvedGap === 'number' ? `${resolvedGap}px` : resolvedGap,\n                  }),\n              ...(resolvedItemPadding === undefined\n                ? undefined\n                : {\n                    '--lobe-form-item-padding-block':\n                      typeof resolvedItemPadding === 'number'\n                        ? `${resolvedItemPadding}px`\n                        : resolvedItemPadding,\n                  }),\n              ...style,\n            },\n          )}\n          onFormSubmit={async (values, eventDetails) => {\n            onFormSubmit?.(values, eventDetails);\n            if (!onFinish) return;\n            setSubmitLoading(true);\n            try {\n              await onFinish(values, eventDetails);\n              snapshotRef.current = serializeForm(formRef.current);\n              syncUnsaved();\n            } finally {\n              setSubmitLoading(false);\n            }\n          }}\n          {...rest}\n        >\n          {items && items.length > 0 ? (\n            itemsType === 'group' ? (\n              (items as FormGroupItemType[]).map((item, i) => mapTree(item, i))\n            ) : (\n              <FormFlatGroup\n                className={classNames?.group}\n                style={customStyles?.group}\n                variant={variant}\n              >\n                {(items as FormFieldProps[])\n                  .filter((item) => !item.hidden)\n                  .map((item, i) => mapFlat(item, i))}\n              </FormFlatGroup>\n            )\n          ) : undefined}\n          {children}\n          {footer}\n        </BaseForm>\n      </FormContext>\n    );\n  },\n);\n\nForm.displayName = 'Form';\n\nexport default Form;\n"],"mappings":"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"}

package/es/Form/style.mjs

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

package/es/Form/style.mjs.map

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

package/es/Form/type.d.mts

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

package/es/Popover/style.mjs

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

package/es/Popover/style.mjs.map

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

package/es/ProTable/hooks/useFetchData.mjs

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

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

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