haze-ui 1.33.0 → 1.34.0

package/dist/types/form/FormItem.d.ts

@@ -98,6 +98,36 @@ export type FormItemRawElementBinding<TRawElement extends FormItemRawElement = F
     element: TRawElement;
     eventToValue: (e: any) => any;
 };
+/**
+ * Semantic slot classes (AntD v6 `classNames` shape) for FormItem's own
+ * structural nodes: keys mirror the data-slot each node carries. The
+ * `control` slot is the odd one out — it has no FormItem-owned node in
+ * the render-prop channel (the consumer renders the control), so it
+ * only wires in the declarative `input`/`as` channels, landing as the
+ * control element's own `className` (merged with any `asProps.className`).
+ * Consumer classes are appended after the component defaults; `root`
+ * composes with FormItem's own `className`.
+ */
+export type FormItemClassNames = {
+    /** The item's root `<div>` (`data-slot='form-item'`) in every layout. */
+    root?: string;
+    /** The `<label>` element (`data-slot='label'`); omitted when no label. */
+    label?: string;
+    /**
+     * The field control element itself — wired in the `input` and `as`
+     * channels as the control's `className`; in the render-prop channel
+     * the consumer owns the element and applies the class itself.
+     */
+    control?: string;
+    /**
+     * Horizontal layout only: the column `<div>` (`data-slot='control-column'`)
+     * wrapping control + error beside the label rail.
+     */
+    controlColumn?: string;
+    /** The error `<span role='alert'>` (`data-slot='error'`); rendered
+     * only while the field has errors. */
+    error?: string;
+};
 /** FormItem's own, non-polymorphic props — everything the item itself
  * consumes regardless of how the control is bound (render-prop, `as`
  * or `input`). */
@@ -164,6 +194,10 @@ export type FormItemOwnProps<TValues extends Record<string, any> = any, P extend
      * instead of the bare message. The span itself — id, `role='alert'`,
      * styling — stays FormItem's, in every control-binding mode. */
     renderError?: (error: string, id: string) => ReactNode;
+    /** Slot classes (see {@link FormItemClassNames}); each key lands on
+     * the structural node carrying the matching data-slot, after the
+     * component defaults. */
+    classNames?: FormItemClassNames;
     className?: string;
 };
 /**
@@ -177,6 +211,9 @@ type FormItemWiredProps = {
     /** the focus channel: react-f0rm's `focusRef` rides the control's
      * `ref` — `setFocus` and failed-submit auto-focus depend on it */
     ref?: unknown;
+    /** the control slot: `classNames.control` (merged with any
+     * `asProps.className`) lands as the control's own className */
+    className?: unknown;
     onBlur?: unknown;
     onChange?: unknown;
     /** the value channel: `value` directly, or the prop `valueToProps`
@@ -339,5 +376,5 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
  * error on one row with an automatic inter-item `margin-inline-end`.
  * The id/label/aria wiring is identical in all three layouts.
  */
-export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name, TInputProps extends Record<string, any> = Record<never, never>, TRawElement extends FormItemRawElement = never>({ form, name, label, layout, labelWidth, labelAlign, validate, mode, validateDebounce, delayError, rules, className, renderError, as: As, asProps, input: Input, eventToValue, valueToProps, children, ...inputProps }: FormItemProps<TValues, P, TInputProps, TRawElement>): import("react").JSX.Element;
+export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name, TInputProps extends Record<string, any> = Record<never, never>, TRawElement extends FormItemRawElement = never>({ form, name, label, layout, labelWidth, labelAlign, validate, mode, validateDebounce, delayError, rules, className, classNames, renderError, as: As, asProps, input: Input, eventToValue, valueToProps, children, ...inputProps }: FormItemProps<TValues, P, TInputProps, TRawElement>): import("react").JSX.Element;
 export {};

package/dist/types/form/index.d.ts

@@ -1,15 +1,25 @@
-export { default as FormItem } from './FormItem';
-export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemOwnProps, FormItemProps, FormItemRawElement, FormItemRawElementBinding } from './FormItem';
-export { default as FormList } from './FormList';
-export type { FormListBinding, FormListField, FormListProps } from './FormList';
+export { default as FormItem } from './FormItem.js';
+export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemClassNames, FormItemOwnProps, FormItemProps, FormItemRawElement, FormItemRawElementBinding } from './FormItem.js';
+export { default as FormList } from './FormList.js';
+export type { FormListBinding, FormListField, FormListProps } from './FormList.js';
 export type { FormInstance, PathValueOf } from 'react-f0rm';
 /**
  * react-f0rm 的上下文与命令式 API —— haze-ui form 层的官方透传出口。
  * react-f0rm 是 haze-ui 的普通依赖，从这里 import 即可，无需再直接
  * 依赖 react-f0rm。`<FormProvider value={form}>` 挂 context 后，子树里的
  * `FormItem`/`FormList` 可以省略 `form` prop。
+ *
+ * - `Form`：react-f0rm 的 `<form>` 组件封装 —— 挂 context、串提交链
+ *   （onSubmit/onValidSubmit/onInvalidSubmit）与 native validation 开关。
+ * - `useForm`：antd 风格命名的表单实例 hook。react-f0rm 自带组件生命周期
+ *   绑定版的 `useForm`，直接透传即可 —— 不做 `useForm = createForm`
+ *   别名，那会用生命周期语义不同的工厂版遮蔽同名 hook。
+ * - `createForm`：手动生命周期的实例工厂（模块级单例、测试、桥接层等
+ *   非 hook 场景）。
+ * - `useValue`/`useValues`：字段级订阅 hook（响应式读取单个/整个表单值）
+ *   ——同样透传，消费者无需直接依赖 react-f0rm。
  */
-export { FormProvider, useFormContext, useFieldArray, useFieldArrayItem, useWatch, trigger, setFocus, setServerErrors, setValue, getValue, getValues, reset } from 'react-f0rm';
+export { Form, useForm, createForm, FormProvider, useFormContext, useFieldArray, useFieldArrayItem, useWatch, useValue, useValues, trigger, setFocus, setServerErrors, setValue, getValue, getValues, reset } from 'react-f0rm';
 /**
  * Standard Schema v1 适配器（react-f0rm/resolvers/standard-schema）：
  * 任何实现 `~standard` 的 schema 库通用 —— zod v3.24+/v4、valibot v1、
@@ -20,8 +30,8 @@ export { FormProvider, useFormContext, useFieldArray, useFieldArrayItem, useWatc
  * 品牌符号打包缺陷）。`hasStandardProps` 运行时探测 schema 是否实现了
  * Standard Schema。
  */
-export { hasStandardProps, standardSchemaFormValidator, standardSchemaResolver } from './standard-schema';
-export type { StandardSchemaV1 } from './standard-schema';
+export { hasStandardProps, standardSchemaFormValidator, standardSchemaResolver } from './standard-schema.js';
+export type { StandardSchemaV1 } from './standard-schema.js';
 /**
  * zod 专用字段级适配器（react-f0rm/resolvers/zod）：schema 实现了
  * Standard Schema 时直接走通用通道，否则走 zod 的 safeParseAsync。

package/dist/types/headless/index.d.ts

@@ -17,24 +17,24 @@
  * major version. The primitives still evolve alongside the library's
  * own components, within that contract.
  */
-import { useBusyPressable } from '../hooks/useBusyPressable';
-import { useClickOutside } from '../hooks/useClickOutside';
-import { hotkey, useHotkeys } from '../hooks/useHotkeys';
-import { useInView } from '../hooks/useInView';
-import { useLocalStorage } from '../hooks/useLocalStorage';
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import { usePrevious } from '../hooks/usePrevious';
-import { useSessionStorage } from '../hooks/useSessionStorage';
-import { computeFloatingPosition, resolvePadding } from '../utils/collision';
-import { getDirection, localeDirection, useDirection } from '../utils/direction';
-import { FloatingPanel, floatingPlacementClasses, placeFloatingPanel, supportsAnchorPositioning, supportsNativePopover, useFloating, useFloatingPosition } from '../utils/floating';
-import { focusFirst, getTabbables, isTabbable, TABBABLE_SELECTOR } from '../utils/focus';
-import { useFocusScope } from '../utils/focus-scope';
-import { getEnabledMenuItems, useMenuKeyboard, useRovingTabindex } from '../utils/menuKeyboard';
-import { Presence, whenExitSettles } from '../utils/presence';
-import { mergeRefs } from '../utils/refs';
-import { SUBMENU_CLOSE_GRACE_MS, SUBMENU_OPEN_DELAY_MS, SubmenuProvider, useSubmenu, useSubmenuContext } from '../utils/submenu';
-import { useViewTransitionFlip } from '../utils/view-transition';
+import { useBusyPressable } from '../hooks/useBusyPressable.js';
+import { useClickOutside } from '../hooks/useClickOutside.js';
+import { hotkey, useHotkeys } from '../hooks/useHotkeys.js';
+import { useInView } from '../hooks/useInView.js';
+import { useLocalStorage } from '../hooks/useLocalStorage.js';
+import { useMediaQuery } from '../hooks/useMediaQuery.js';
+import { usePrevious } from '../hooks/usePrevious.js';
+import { useSessionStorage } from '../hooks/useSessionStorage.js';
+import { computeFloatingPosition, resolvePadding } from '../utils/collision.js';
+import { getDirection, localeDirection, useDirection } from '../utils/direction.js';
+import { FloatingPanel, floatingPlacementClasses, placeFloatingPanel, supportsAnchorPositioning, supportsNativePopover, useFloating, useFloatingPosition } from '../utils/floating.js';
+import { focusFirst, getTabbables, isTabbable, TABBABLE_SELECTOR } from '../utils/focus.js';
+import { useFocusScope } from '../utils/focus-scope.js';
+import { getEnabledMenuItems, useMenuKeyboard, useRovingTabindex } from '../utils/menuKeyboard.js';
+import { Presence, whenExitSettles } from '../utils/presence.js';
+import { mergeRefs } from '../utils/refs.js';
+import { SUBMENU_CLOSE_GRACE_MS, SUBMENU_OPEN_DELAY_MS, SubmenuProvider, useSubmenu, useSubmenuContext } from '../utils/submenu.js';
+import { useViewTransitionFlip } from '../utils/view-transition.js';
 /**
  * Detects the native Popover API (`popover` attribute, top layer,
  * light-dismiss). The floating primitives use this to choose their
@@ -65,7 +65,7 @@ export type UseFloatingOptions = Parameters<typeof useFloating>[0];
  * phases (`shown`/`dataState`/`exited`), and the props/class entries to
  * spread on the trigger and panel elements.
  */
-export type { FloatingBehavior } from '../utils/floating';
+export type { FloatingBehavior } from '../utils/floating.js';
 /**
  * Panel placement relative to the trigger (`'bottom' | 'bottom-span' |
  * 'bottom-center' | 'bottom-end' | 'top' | 'left' | 'right'`, or
@@ -73,7 +73,7 @@ export type { FloatingBehavior } from '../utils/floating';
  * Logical, not physical: under `dir="rtl"` the horizontal placements and
  * the start/end alignments mirror automatically.
  */
-export type { FloatingPlacement } from '../utils/floating';
+export type { FloatingPlacement } from '../utils/floating.js';
 /**
  * x-class entries placing a panel element relative to its trigger, per
  * engine tier — for consumers composing their own panel instead of using
@@ -109,15 +109,19 @@ export type FloatingPanelProps = Parameters<typeof FloatingPanel>[0];
 /**
  * Keeps a single child mounted while its exit animation runs: the child
  * receives `data-state="open" | "closed"` (render your enter/exit
- * transitions on it) and unmounts only after the exit settles. This is
- * the engine behind haze-ui's animated panels, modals and collapsibles.
+ * transitions on it) and unmounts only after the exit settles — or,
+ * with `keepMounted`, stays mounted dormant behind `hidden` + `inert`.
+ * This is the engine behind haze-ui's animated panels, modals and
+ * collapsibles.
  */
 export { Presence };
 /**
  * Props accepted by {@link Presence}: `present`, a single-element
- * `children`, and an optional `onExited` callback.
+ * `children`, an optional `onExited` callback, and `keepMounted` to
+ * keep the child mounted (dormant behind `hidden` + `inert`) after the
+ * exit settles.
  */
-export type { PresenceProps } from '../utils/presence';
+export type { PresenceProps } from '../utils/presence.js';
 /**
  * Wait for an element's exit animation/transition to finish. Resolves
  * immediately when no positive duration is declared, `null` for an
@@ -137,7 +141,7 @@ export { useFocusScope };
  * `autoFocus`, `returnFocus`, and the mount/unmount auto-focus event
  * callbacks (preventable via `event.preventDefault()`).
  */
-export type { FocusScopeOptions } from '../utils/focus-scope';
+export type { FocusScopeOptions } from '../utils/focus-scope.js';
 /**
  * Tab-order candidate selector (structural filter only; runtime state —
  * disabled, hidden, visibility — is filtered by {@link isTabbable}).
@@ -186,18 +190,18 @@ export { resolvePadding };
 /**
  * Viewport edge a collision measurement applies to.
  */
-export type { CollisionSide } from '../utils/collision';
+export type { CollisionSide } from '../utils/collision.js';
 /**
  * Viewport inset for collision checks: a number applies to all four
  * sides, an object per side.
  */
-export type { CollisionPadding } from '../utils/collision';
+export type { CollisionPadding } from '../utils/collision.js';
 /**
  * Collision knobs: `flip` to the opposite side and `shift` along the
  * cross axis when the panel overflows the padded viewport (both default
  * on), plus `collisionPadding`. Consumers may pass any subset.
  */
-export type { CollisionStrategy } from '../utils/collision';
+export type { CollisionStrategy } from '../utils/collision.js';
 /**
  * Enabled menu items inside a container, in DOM order. `role="menu"`
  * containers scope each item to its nearest menu ancestor, so a nested
@@ -257,7 +261,7 @@ export type UseSubmenuOptions = Parameters<typeof useSubmenu>[0];
  * handlers to spread on the trigger (`onPointerEnter`, `onKeyDown`)
  * and the panel (`onKeyDown`).
  */
-export type { SubmenuBehavior } from '../utils/submenu';
+export type { SubmenuBehavior } from '../utils/submenu.js';
 /**
  * Context provider carrying a {@link SubmenuBehavior} from a Sub
  * container to its trigger/content parts — for authors composing their
@@ -283,7 +287,7 @@ export { SUBMENU_CLOSE_GRACE_MS };
 /**
  * Writing direction of a subtree: `'ltr'` or `'rtl'`.
  */
-export type { Direction } from '../utils/direction';
+export type { Direction } from '../utils/direction.js';
 /**
  * Direction implied by a BCP 47 tag — RTL primary language subtags
  * (`ar`, `fa`, `he`, `ur`, …) resolve to `'rtl'`, everything else to
@@ -334,7 +338,7 @@ export { useClickOutside };
  * `true`) and the `ignore` ref list — elements whose hits do not count
  * as outside.
  */
-export type { UseClickOutsideOptions } from '../hooks/useClickOutside';
+export type { UseClickOutsideOptions } from '../hooks/useClickOutside.js';
 /**
  * Declarative keyboard shortcuts: a map of spec strings (`'mod+k'`,
  * `'ctrl+shift+p'`, `'?'`, named keys, whitespace-joined sequences like
@@ -355,12 +359,12 @@ export { hotkey };
  * Handler signature {@link useHotkeys} calls with the raw KeyboardEvent
  * (already `preventDefault`-ed and stopped when it fires).
  */
-export type { HotkeyHandler } from '../hooks/useHotkeys';
+export type { HotkeyHandler } from '../hooks/useHotkeys.js';
 /**
  * Options accepted by {@link useHotkeys}: `enabled`, `target` (element
  * ref or `window`), `eventName`, `allowInInput` and `sequenceTimeout`.
  */
-export type { UseHotkeysOptions } from '../hooks/useHotkeys';
+export type { UseHotkeysOptions } from '../hooks/useHotkeys.js';
 /**
  * Observe whether an element is in the viewport: attach the returned
  * callback ref and read the `inView` flag. `once: true` freezes after
@@ -372,7 +376,7 @@ export { useInView };
  * Options accepted by {@link useInView}: the IntersectionObserver init
  * members plus the `once` freeze flag.
  */
-export type { UseInViewOptions } from '../hooks/useInView';
+export type { UseInViewOptions } from '../hooks/useInView.js';
 /**
  * Subscribe to a CSS media query and return whether it currently
  * matches; the query can change per render. SSR and hydration snapshots

package/dist/types/hooks/index.d.ts

@@ -1,33 +1,33 @@
-export { useBusyPressable } from './useBusyPressable';
-export { useClipboard } from './useClipboard';
-export type { UseClipboardResult } from './useClipboard';
-export { useClickOutside } from './useClickOutside';
-export type { UseClickOutsideOptions } from './useClickOutside';
-export { useDarkMode } from './useDarkMode';
-export type { ColorMode, UseDarkModeOptions, UseDarkModeResult } from './useDarkMode';
-export { useDebouncedCallback } from './useDebouncedCallback';
-export { useDebouncedValue } from './useDebouncedValue';
-export { useFullscreen } from './useFullscreen';
-export type { FullscreenTarget, UseFullscreenHandle } from './useFullscreen';
-export { useHotkeys, hotkey } from './useHotkeys';
-export type { HotkeyHandler, UseHotkeysOptions } from './useHotkeys';
-export { useInView } from './useInView';
-export type { UseInViewOptions } from './useInView';
-export { useLocalStorage } from './useLocalStorage';
-export { useMediaQuery } from './useMediaQuery';
-export { useElementSize } from './useElementSize';
-export type { ElementSize, UseElementSizeOptions, UseElementSizeResult, } from './useElementSize';
-export { useIdle } from './useIdle';
-export type { UseIdleOptions, UseIdleResult } from './useIdle';
-export { useMutationObserver } from './useMutationObserver';
-export type { UseMutationObserverOptions, UseMutationObserverResult, } from './useMutationObserver';
-export { useNetwork } from './useNetwork';
-export type { NetworkSnapshot } from './useNetwork';
-export { useOrientation } from './useOrientation';
-export type { OrientationSnapshot } from './useOrientation';
-export { useResizeObserver } from './useResizeObserver';
-export type { UseResizeObserverOptions, UseResizeObserverResult, } from './useResizeObserver';
-export { usePrefersReducedMotion } from './usePrefersReducedMotion';
-export { usePrevious } from './usePrevious';
-export { useSessionStorage } from './useSessionStorage';
-export { useTitle } from './useTitle';
+export { useBusyPressable } from './useBusyPressable.js';
+export { useClipboard } from './useClipboard.js';
+export type { UseClipboardResult } from './useClipboard.js';
+export { useClickOutside } from './useClickOutside.js';
+export type { UseClickOutsideOptions } from './useClickOutside.js';
+export { useDarkMode } from './useDarkMode.js';
+export type { ColorMode, UseDarkModeOptions, UseDarkModeResult } from './useDarkMode.js';
+export { useDebouncedCallback } from './useDebouncedCallback.js';
+export { useDebouncedValue } from './useDebouncedValue.js';
+export { useFullscreen } from './useFullscreen.js';
+export type { FullscreenTarget, UseFullscreenHandle } from './useFullscreen.js';
+export { useHotkeys, hotkey } from './useHotkeys.js';
+export type { HotkeyHandler, UseHotkeysOptions } from './useHotkeys.js';
+export { useInView } from './useInView.js';
+export type { UseInViewOptions } from './useInView.js';
+export { useLocalStorage } from './useLocalStorage.js';
+export { useMediaQuery } from './useMediaQuery.js';
+export { useElementSize } from './useElementSize.js';
+export type { ElementSize, UseElementSizeOptions, UseElementSizeResult, } from './useElementSize.js';
+export { useIdle } from './useIdle.js';
+export type { UseIdleOptions, UseIdleResult } from './useIdle.js';
+export { useMutationObserver } from './useMutationObserver.js';
+export type { UseMutationObserverOptions, UseMutationObserverResult, } from './useMutationObserver.js';
+export { useNetwork } from './useNetwork.js';
+export type { NetworkSnapshot } from './useNetwork.js';
+export { useOrientation } from './useOrientation.js';
+export type { OrientationSnapshot } from './useOrientation.js';
+export { useResizeObserver } from './useResizeObserver.js';
+export type { UseResizeObserverOptions, UseResizeObserverResult, } from './useResizeObserver.js';
+export { usePrefersReducedMotion } from './usePrefersReducedMotion.js';
+export { usePrevious } from './usePrevious.js';
+export { useSessionStorage } from './useSessionStorage.js';
+export { useTitle } from './useTitle.js';