haze-ui 1.12.2 → 1.13.0

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,9 +1,13 @@
 import type { ReactNode } from 'react';
+import type { Control } from 'react-use-control';
 type TooltipProps = {
     content: ReactNode;
     position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Milliseconds of hover/focus before the tooltip appears. */
+    delay?: number;
+    open?: Control<boolean> | boolean;
     className?: string;
     children: ReactNode;
 };
-export default function Tooltip({ content, position, className, children, }: TooltipProps): import("react").JSX.Element;
+export default function Tooltip({ content, position, delay, open: openControl, className, children, }: TooltipProps): import("react").JSX.Element;
 export type { TooltipProps };

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

@@ -1,12 +1,18 @@
-import type { ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import type { FieldError, FieldPath, FieldRules, Name, ValidationMode, FormInstance, PathValueOf } from 'react-f0rm';
 /**
  * Field-level validator, structurally compatible with react-f0rm's
  * `Validator`: return an error (string, FieldError, or an array mixing
  * both) or `undefined` when valid; return a Promise for async validation.
  * `meta.signal` aborts as soon as the round is superseded.
+ *
+ * Generic like react-f0rm's own `useField` `validate`: with `form` (a
+ * `FormInstance<TValues>`) and `name` (a `FieldPath<TValues>`) in scope,
+ * the value argument is `PathValueOf<TValues, P>` — the field's actual
+ * type — instead of `any`. The bare defaults keep untyped call sites
+ * exactly as permissive as before.
  */
-export type FieldValidator = (value: any, meta: {
+export type FieldValidator<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name> = (value: PathValueOf<TValues, P>, meta: {
     form: FormInstance;
     signal: AbortSignal;
 }) => string | FieldError | (string | FieldError)[] | undefined | Promise<string | FieldError | (string | FieldError)[] | undefined>;
@@ -32,13 +38,38 @@ export type FormItemBinding<TValues, P extends FieldPath<TValues> | Name> = {
      * react-f0rm's built-in Field/Checkbox/Select. */
     onChange: (next: PathValueOf<TValues, P>) => void;
 };
+/**
+ * Declarative `as` binding for `FormItem` — the same props shape as
+ * react-f0rm `Field`'s `as` (deliberately *not* Radix's `asChild`): pass
+ * any component as the field control and `FormItem` wires the id, aria
+ * attributes, `onBlur` and `onChange` itself.
+ */
+export type FormItemAsProps = {
+    /** Component rendered as the field control. When provided it takes
+     * precedence over the children render-prop. */
+    as?: ComponentType<any>;
+    /** Extra props spread onto the `as` component. They land before the
+     * value props, so `value`/`valueToProps` win conflicts — the same
+     * precedence react-f0rm's `Field` uses. */
+    asProps?: Record<string, any>;
+    /** Converts what the `as` component passes to its `onChange` into the
+     * field value. Defaults to identity — haze cores' `onChange` emits the
+     * next plain value; pass `(e) => e.target.value` when `as` is a raw
+     * DOM-element component. */
+    eventToValue?: (e: any) => any;
+    /** Derives the value props for the `as` component from the field value —
+     * e.g. `(checked) => ({checked})` for `CheckboxCore`. Defaults to
+     * passing `{value}`. */
+    valueToProps?: (value: any) => Record<string, any>;
+};
 export type FormItemProps<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name> = {
     form: FormInstance<TValues>;
     name: P;
     label?: ReactNode;
     /** Field-level validator, registered through react-f0rm's own
-     * `useField` channel — validated per the form's `mode` and on submit. */
-    validate?: FieldValidator;
+     * `useField` channel — validated per the form's `mode` and on submit.
+     * With a typed form the value argument is `PathValueOf<TValues, P>`. */
+    validate?: FieldValidator<TValues, P>;
     /** Per-field validation mode override (react-f0rm ≥0.6): when given,
      * this field validates on its own schedule — e.g. `'onBlur'` — instead
      * of the form's `mode`; other fields are unaffected. Omit to keep the
@@ -61,9 +92,19 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
      * `validate` — both sources' errors merge, rules errors ahead. Omit for
      * `validate`-only validation. */
     rules?: FieldRules;
+    /** Custom error renderer: when provided and the field has errors, the
+     * built-in error span renders `renderError(errors[0].message, errorId)`
+     * instead of the bare message. The span itself — id, `role='alert'`,
+     * styling — stays FormItem's, in both the `as` and children modes. */
+    renderError?: (error: string, id: string) => ReactNode;
     className?: string;
+} & FormItemAsProps & ({
+    as: ComponentType<any>;
+    children?: never;
+} | {
+    as?: undefined;
     children: (binding: FormItemBinding<TValues, P>) => ReactNode;
-};
+});
 /**
  * Glue a single field of a react-f0rm form to a haze-ui controlled core.
  * The binding layer is react-f0rm's own headless `useField` hook — the
@@ -85,8 +126,23 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
  * </FormItem>
  * ```
  *
+ * Or declaratively, react-f0rm `Field`-style (`as` and children are
+ * mutually exclusive — pick one):
+ *
+ * ```tsx
+ * <FormItem form={form} name='email' label='Email' as={InputCore} />
+ * ```
+ *
+ * With `as`, the id/aria/onBlur/onChange wiring happens here: the control
+ * gets `id`, `aria-invalid`/`aria-describedby` while the field errors,
+ * and `onChange={(v) => onChange(toValue(v))}` where `toValue` defaults
+ * to identity (haze cores emit plain values — pass
+ * `eventToValue={(e) => e.target.value}` for a raw DOM element) and the
+ * value lands as `{value}` or, with `valueToProps`, whatever props the
+ * control wants (e.g. `{checked}` for CheckboxCore).
+ *
  * When the field has errors, the first error's message is rendered into a
- * `<span id={errorId} role='alert'>` next to the children; with no errors
+ * `<span id={errorId} role='alert'>` next to the control; with no errors
  * no extra element is rendered.
  */
-export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, validateDebounce, delayError, rules, className, children }: FormItemProps<TValues, P>): import("react").JSX.Element;
+export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, validateDebounce, delayError, rules, className, renderError, as: As, asProps, eventToValue, valueToProps, children }: FormItemProps<TValues, P>): import("react").JSX.Element;

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

@@ -1,3 +1,3 @@
 export { default as FormItem } from './FormItem';
-export type { FieldValidator, FormItemBinding, FormItemProps } from './FormItem';
+export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemProps } from './FormItem';
 export type { FormInstance, PathValueOf } from 'react-f0rm';

package/dist/types/index.d.ts

@@ -182,5 +182,5 @@ export type { DiffViewerProps, DiffLine } from './components/DiffViewer';
 export { LogViewer } from './components/LogViewer';
 export type { LogViewerProps, LogEntry, LogLevel } from './components/LogViewer';
 export { FormItem } from './form';
-export type { FieldValidator, FormItemBinding, FormItemProps, FormInstance, PathValueOf, } from './form';
+export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemProps, FormInstance, PathValueOf, } from './form';
 export { useControl } from 'react-use-control';

package/dist/types/utils/floating.d.ts

@@ -0,0 +1,99 @@
+import type { ComponentProps, CSSProperties, Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
+/** Lazy feature detection so tests can flip between native and fallback. */
+export declare function supportsNativePopover(): boolean;
+/**
+ * Anchor positioning requires the popover API first: jsdom's
+ * `CSS.supports` returns true for arbitrary declarations, so it must never
+ * be trusted on its own.
+ */
+export declare function supportsAnchorPositioning(): boolean;
+declare const anchoredPlacements: {
+    readonly bottom: import("@linaria/core").LinariaClassName;
+    readonly 'bottom-span': import("@linaria/core").LinariaClassName;
+    readonly 'bottom-center': import("@linaria/core").LinariaClassName;
+    readonly 'bottom-end': import("@linaria/core").LinariaClassName;
+    readonly top: import("@linaria/core").LinariaClassName;
+    readonly left: import("@linaria/core").LinariaClassName;
+    readonly right: import("@linaria/core").LinariaClassName;
+};
+type AnchorablePlacement = keyof typeof anchoredPlacements;
+/**
+ * Panel placement relative to the trigger. `point` leaves positioning
+ * entirely to the consumer (e.g. ContextMenu at the pointer coordinates).
+ */
+export type FloatingPlacement = AnchorablePlacement | 'point';
+type UseFloatingOptions = {
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    /** Element the panel is anchored to; also the outside-close boundary. */
+    triggerRef: RefObject<HTMLElement | null>;
+    /** The floating panel element. */
+    panelRef: RefObject<HTMLElement | null>;
+};
+export type FloatingBehavior = {
+    open: boolean;
+    native: boolean;
+    anchored: boolean;
+    /**
+     * Whether the panel element is actually shown right now (native path:
+     * mirrored from `toggle` events; fallback path: identical to `open`).
+     * Differs from `open` across the commit→effect gap: `open` flips when
+     * React commits, while the popover only becomes focusable/paintable
+     * after the effect calls showPopover(). Consumers that move focus into
+     * the panel on open must gate on `shown`, or the focus call lands on a
+     * display:none element and is silently dropped (Chromium).
+     */
+    shown: boolean;
+    /** Unique CSS anchor name for this instance (anchored path). */
+    anchorName: string;
+    /** Inline style for the trigger: declares `anchor-name`. */
+    triggerStyle: CSSProperties | undefined;
+    /** Spread on the trigger: records pointerdown for race attribution. */
+    onTriggerPointerDown: () => void;
+    /** Spread as the trigger's click handler: suppression-aware toggle. */
+    onTriggerClick: () => void;
+    /** Spread on the panel: popover attribute + anchor custom property. */
+    panelAttrs: {
+        popover: 'auto' | undefined;
+        style: CSSProperties | undefined;
+    };
+    /** Positioning-skeleton entries for the panel's x-class array. */
+    panelClasses: (string | false)[];
+    triggerRef: RefObject<HTMLElement | null>;
+    panelRef: RefObject<HTMLElement | null>;
+};
+export declare function useFloating({ open, setOpen, triggerRef, panelRef, }: UseFloatingOptions): FloatingBehavior;
+/** x-class entries placing the panel relative to the trigger, per tier. */
+export declare function floatingPlacementClasses(behavior: Pick<FloatingBehavior, 'native' | 'anchored'>, placement: FloatingPlacement): (string | false)[];
+/**
+ * Tier 2 positioning: place the panel under/over/beside the trigger and
+ * re-place on scroll/resize while open. No-op on the anchored and
+ * fallback tiers.
+ */
+export declare function useFloatingPosition({ behavior, placement, }: {
+    behavior: FloatingBehavior;
+    placement: FloatingPlacement;
+}): void;
+type FloatingPanelProps = {
+    /** Behavior record produced by `useFloating` at the floating root. */
+    behavior: FloatingBehavior;
+    /**
+     * Placement relative to the trigger. Omit (or pass 'point') when the
+     * consumer positions the panel itself, e.g. ContextMenu at the pointer.
+     */
+    placement?: FloatingPlacement;
+    /** Consumer visual skin: border, background, shadow, padding. */
+    visualClass?: string;
+    className?: string;
+    children?: ReactNode;
+    /** Merged with the anchor custom property the behavior may set. */
+    style?: CSSProperties;
+} & Omit<ComponentProps<'div'>, 'className' | 'children' | 'style'>;
+/**
+ * The panel element of a floating pair: applies the popover attribute,
+ * the anchor custom property and the tier/placement classes, and runs the
+ * tier-2 position effect. Everything else (id, role, handlers, ref) is
+ * passed through to the underlying div.
+ */
+export declare function FloatingPanel({ behavior, placement, visualClass, className, style, children, ...rest }: FloatingPanelProps): import("react").JSX.Element;
+export {};

package/dist/types/utils/menuKeyboard.d.ts

@@ -0,0 +1,43 @@
+import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react';
+/** Enabled items inside a container, in DOM order. */
+export declare function getEnabledMenuItems(container: HTMLElement | null, selector?: string): HTMLElement[];
+type UseMenuKeyboardOptions = {
+    /** Element containing the item children (`[role=menuitem]` by default). */
+    menuRef: RefObject<HTMLElement | null>;
+    /**
+     * Called when the menu should close via keyboard; the caller returns
+     * focus to the trigger.
+     */
+    onClose: () => void;
+    /**
+     * Item selector for containers that are not a `role="menu"` — e.g. the
+     * `[role=option]` list of a Command palette.
+     */
+    selector?: string;
+};
+/**
+ * Keyboard behavior for a roving-tabindex item container (WAI-ARIA menu
+ * button / listbox pattern): ↑/↓ move focus (wrapping, skipping disabled
+ * items), Home/End jump to the ends, Escape closes (returning focus to
+ * the trigger), Tab closes, and printable characters run typeahead.
+ */
+export declare function useMenuKeyboard({ menuRef, onClose, selector, }: UseMenuKeyboardOptions): (event: ReactKeyboardEvent) => void;
+type UseRovingTabindexOptions = {
+    menuRef: RefObject<HTMLElement | null>;
+    /**
+     * While false the effect is inert — panels that stay mounted when
+     * closed (Menu, Combobox-style listboxes) manage the tab stops only
+     * while open.
+     */
+    active: boolean;
+    selector?: string;
+};
+/**
+ * Roving tabindex for a menu/listbox container: exactly one item is a tab
+ * stop at any time. On activation the current stop is kept (first item
+ * initially); a `focusin` listener moves the stop with focus, and a
+ * MutationObserver re-syncs when the item set changes (e.g. a filtered
+ * Command list).
+ */
+export declare function useRovingTabindex({ menuRef, active, selector, }: UseRovingTabindexOptions): void;
+export {};

package/dist/utils/floating.js

@@ -0,0 +1,181 @@
+
+import { classnames as e } from "./classnames.js";
+/* empty css                   */
+import { jsx as t } from "react/jsx-runtime";
+import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
+//#region src/lib/utils/floating.tsx
+var s = 500;
+function c() {
+	return typeof HTMLElement < "u" && "popover" in HTMLElement.prototype;
+}
+function l() {
+	return c() && typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("anchor-name: --haze-floating-probe");
+}
+var u = "haze-floating__floatingNative", d = "haze-floating__floatingAnchored", f = "haze-floating__floatingFixed", p = "haze-floating__floatingHidden", m = "haze-floating__anchoredBottom", h = "haze-floating__anchoredBottomSpan", g = "haze-floating__anchoredBottomCenter", _ = "haze-floating__anchoredBottomEnd", v = "haze-floating__anchoredTop", y = "haze-floating__anchoredLeft", b = "haze-floating__anchoredRight", x = "haze-floating__fallbackBottom", S = x, C = "haze-floating__fallbackBottomCenter", w = "haze-floating__fallbackBottomEnd", T = "haze-floating__fallbackTop", E = "haze-floating__fallbackLeft", D = "haze-floating__fallbackRight", O = "haze-floating__gapBelow", k = "haze-floating__gapAbove", A = "haze-floating__gapBefore", j = "haze-floating__gapAfter", M = {
+	bottom: m,
+	"bottom-span": h,
+	"bottom-center": g,
+	"bottom-end": _,
+	top: v,
+	left: y,
+	right: b
+}, N = {
+	bottom: x,
+	"bottom-span": S,
+	"bottom-center": C,
+	"bottom-end": w,
+	top: T,
+	left: E,
+	right: D
+}, P = {
+	bottom: O,
+	"bottom-span": O,
+	"bottom-center": O,
+	"bottom-end": O,
+	top: k,
+	left: A,
+	right: j
+};
+function F({ open: e, setOpen: t, triggerRef: m, panelRef: h }) {
+	let g = `--haze-floating-${i().replace(/[^a-zA-Z0-9]/g, "")}`, _ = c(), v = l(), y = a(!1), [b, x] = o(!1), S = a(null), C = a(-Infinity), w = a(-Infinity);
+	r(() => {
+		let n = h.current;
+		if (!n || !_) return;
+		n !== S.current && (S.current = n, y.current = !1, x(!1));
+		let r = (n) => {
+			let r = n.newState;
+			y.current = r === "open", x(y.current), r === "closed" && e ? (performance.now() - C.current < s && (w.current = performance.now()), C.current = -Infinity, t(!1)) : r === "open" && !e && t(!0);
+		};
+		return n.addEventListener("toggle", r), e && !y.current ? n.showPopover() : !e && y.current && n.hidePopover(), () => n.removeEventListener("toggle", r);
+	}, [
+		_,
+		e,
+		t,
+		h
+	]), r(() => {
+		if (_ || !e) return;
+		let n = (e) => e instanceof Node && !!(m.current?.contains(e) || h.current?.contains(e)), r = (e) => {
+			n(e.target) || t(!1);
+		}, i = (e) => {
+			e.key === "Escape" && t(!1);
+		};
+		return document.addEventListener("pointerdown", r), document.addEventListener("keydown", i), () => {
+			document.removeEventListener("pointerdown", r), document.removeEventListener("keydown", i);
+		};
+	}, [
+		_,
+		e,
+		t,
+		m,
+		h
+	]);
+	let T = n(() => {
+		e && (C.current = performance.now());
+	}, [e]), E = n(() => {
+		if (performance.now() - w.current < s) {
+			w.current = -Infinity;
+			return;
+		}
+		t((e) => !e);
+	}, [t]);
+	return {
+		open: e,
+		native: _,
+		anchored: v,
+		shown: _ ? b : e,
+		anchorName: g,
+		triggerStyle: v ? { anchorName: g } : void 0,
+		onTriggerPointerDown: T,
+		onTriggerClick: E,
+		panelAttrs: {
+			popover: _ ? "auto" : void 0,
+			style: v ? { "--haze-floating-anchor": g } : void 0
+		},
+		panelClasses: [
+			_ && u,
+			_ && v && d,
+			_ && !v && f,
+			!_ && !e && p
+		],
+		triggerRef: m,
+		panelRef: h
+	};
+}
+function I(e, t) {
+	return t === "point" ? [] : [
+		e.native && e.anchored && M[t],
+		e.native && !e.anchored && P[t],
+		!e.native && N[t]
+	];
+}
+function L(e, t) {
+	return parseFloat(getComputedStyle(e)[t]) || 0;
+}
+function R(e, t, n) {
+	if (n === "point") return;
+	let r = t.getBoundingClientRect(), i = e.getBoundingClientRect(), a = r.left + r.width / 2 - i.width / 2, o = r.top + r.height / 2 - i.height / 2;
+	switch (n) {
+		case "bottom":
+		case "bottom-span":
+			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${r.left}px`;
+			return;
+		case "bottom-center":
+			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${a}px`;
+			return;
+		case "bottom-end":
+			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${r.right - i.width}px`;
+			return;
+		case "top":
+			e.style.top = `${r.top - i.height - L(e, "marginBottom")}px`, e.style.left = `${a}px`;
+			return;
+		case "left":
+			e.style.top = `${o}px`, e.style.left = `${r.left - i.width - L(e, "marginRight")}px`;
+			return;
+		case "right":
+			e.style.top = `${o}px`, e.style.left = `${r.right + L(e, "marginLeft")}px`;
+			return;
+	}
+}
+function z({ behavior: e, placement: t }) {
+	let { native: n, anchored: i, open: a, triggerRef: o, panelRef: s } = e;
+	r(() => {
+		if (!n || i || t === "point" || !a) return;
+		let e = s.current, r = o.current;
+		if (!e || !r) return;
+		let c = () => R(e, r, t);
+		return c(), window.addEventListener("scroll", c, !0), window.addEventListener("resize", c), () => {
+			window.removeEventListener("scroll", c, !0), window.removeEventListener("resize", c);
+		};
+	}, [
+		n,
+		i,
+		a,
+		t,
+		o,
+		s
+	]);
+}
+function B({ behavior: n, placement: r, visualClass: i, className: a, style: o, children: s, ...c }) {
+	z({
+		behavior: n,
+		placement: r ?? "point"
+	});
+	let l = n.panelAttrs.style || o ? {
+		...n.panelAttrs.style,
+		...o
+	} : void 0;
+	return /* @__PURE__ */ t("div", {
+		...c,
+		...n.panelAttrs,
+		style: l,
+		className: e([
+			i,
+			...n.panelClasses,
+			...r ? I(n, r) : [],
+			a
+		]),
+		children: s
+	});
+}
+//#endregion
+export { B as FloatingPanel, I as floatingPlacementClasses, l as supportsAnchorPositioning, c as supportsNativePopover, F as useFloating, z as useFloatingPosition };

package/dist/utils/menuKeyboard.js

@@ -0,0 +1,88 @@
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+//#region src/lib/utils/menuKeyboard.ts
+var r = 500, i = "[role=\"menuitem\"]:not([disabled])";
+function a(e, t = i) {
+	return e ? Array.from(e.querySelectorAll(t)) : [];
+}
+function o({ menuRef: i, onClose: o, selector: s }) {
+	let c = n(""), l = n(0);
+	return t(() => () => window.clearTimeout(l.current), []), e((e) => {
+		let t = a(i.current, s);
+		if (t.length === 0) return;
+		let n = t.indexOf(document.activeElement), u = (e) => t[e]?.focus();
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), u((n + 1) % t.length);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), u((n - 1 + t.length) % t.length);
+				return;
+			case "Home":
+				e.preventDefault(), u(0);
+				return;
+			case "End":
+				e.preventDefault(), u(t.length - 1);
+				return;
+			case "Escape":
+				e.preventDefault(), o();
+				return;
+			case "Tab":
+				e.preventDefault(), o();
+				return;
+			default: {
+				if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+				e.preventDefault();
+				let i = (c.current + e.key).toLowerCase();
+				c.current = i, window.clearTimeout(l.current), l.current = window.setTimeout(() => {
+					c.current = "";
+				}, r);
+				let a = n + 1;
+				for (let e = 0; e < t.length; e++) {
+					let n = (a + e) % t.length;
+					if (t[n].textContent.toLowerCase().startsWith(i)) {
+						u(n);
+						return;
+					}
+				}
+			}
+		}
+	}, [
+		i,
+		o,
+		s
+	]);
+}
+function s({ menuRef: e, active: n, selector: r = i }) {
+	t(() => {
+		let t = e.current;
+		if (!n || !t) return;
+		let i = () => {
+			let e = a(t, r);
+			if (e.length === 0) return;
+			let n = e.findIndex((e) => e.tabIndex === 0), i = n >= 0 ? n : 0;
+			e.forEach((e, t) => {
+				e.tabIndex = t === i ? 0 : -1;
+			});
+		};
+		i();
+		let o = new MutationObserver(i);
+		o.observe(t, {
+			childList: !0,
+			subtree: !0
+		});
+		let s = (e) => {
+			a(t, r).forEach((t) => {
+				t.tabIndex = t === e.target ? 0 : -1;
+			});
+		};
+		return t.addEventListener("focusin", s), () => {
+			o.disconnect(), t.removeEventListener("focusin", s);
+		};
+	}, [
+		e,
+		n,
+		r
+	]);
+}
+//#endregion
+export { a as getEnabledMenuItems, o as useMenuKeyboard, s as useRovingTabindex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -9,7 +9,8 @@
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./styles.css": "./dist/haze-ui.css",
     "./css/*": "./dist/css/*"
@@ -29,9 +30,11 @@
     "lint": "eslint --fix src *.mjs",
     "deploy": "npm run build:demo && gh-pages -d dist",
     "test": "vitest run --passWithNoTests",
+    "test:e2e": "playwright test --config e2e/playwright.config.ts",
     "test:watch": "vitest",
     "prepublishOnly": "npm run build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "size": "size-limit"
   },
   "repository": {
     "type": "git",
@@ -49,11 +52,10 @@
   "peerDependencies": {
     "@linaria/core": "^7.0.0 || ^8.0.0",
     "react": "^19.0.0",
-    "react-f0rm": ">=0.7.0"
+    "react-f0rm": ">=0.7.0 <0.9.0"
   },
   "dependencies": {
-    "react-toolroom": "^0.18.4",
-    "react-use-control": "^1.3.2"
+    "react-use-control": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^8.0.1",
@@ -64,6 +66,8 @@
     "@linaria/core": "^8.2.0",
     "@native-router/core": "^1.10.0",
     "@native-router/react": "^1.9.0",
+    "@playwright/test": "^1.62.1",
+    "@size-limit/file": "^13.0.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.6",
@@ -95,15 +99,37 @@
     "ramda": "^0.32.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-f0rm": "^0.7.0",
+    "react-f0rm": "^0.8.0",
     "react-icons": "^5.7.0",
+    "react-toolroom": "^0.18.4",
     "rollup-plugin-type-as-json-schema": "^0.2.6",
     "semantic-release": "^25.0.9",
+    "size-limit": "^13.0.3",
     "terser": "^5.51.2",
     "tools-config": "^0.3.1",
     "tsc-alias": "^1.9.2",
     "typescript": "^6.0.3",
     "vite": "^8.2.2",
     "vitest": "^4.1.11"
-  }
+  },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "16 KB"
+    },
+    {
+      "path": "dist/index.js",
+      "limit": "4 KB",
+      "gzip": true
+    },
+    {
+      "path": "dist/haze-ui.css",
+      "limit": "136 KB"
+    },
+    {
+      "path": "dist/haze-ui.css",
+      "limit": "19 KB",
+      "gzip": true
+    }
+  ]
 }