haze-ui 1.12.1 → 1.13.0

package/README.md

@@ -51,41 +51,45 @@ always come from `haze-ui/css/tokens.css`.
 
 ## react-f0rm Integration
 
-The form layer (`FormItem`, `useFormControl`; peer dependency
-`react-f0rm`) is exported from the main barrel and glues react-f0rm
-form state to haze-ui's control-prop system, so any control-prop
-component (`Input`, `Select`, `Switch`, `Textarea`, `TagInput`, ...)
-binds to a form field with zero adapters.
+react-f0rm owns form field state, and its headless `useField` hook is
+the single binding layer — the same channel its built-in
+`Field`/`Checkbox`/`Select` components use. haze-ui contributes the
+views: controlled cores (`InputCore`, `SelectCore`, `SwitchCore`,
+`TextareaCore`, `TagInputCore`, ...) take the plain `{value, onChange}`
+pair with zero adapters, and `FormItem` wraps the hook's state in label,
+error and aria wiring. The sugar components (`Input`, `Select`, ...)
+keep their `Control<T> | T` API for standalone use outside forms.
 
-### useFormControl(form, name): field → Control
+### useField: field → {value, onChange}
 
 ```jsx
-import { useForm, setValue } from 'react-f0rm';
-import { Input, useFormControl } from 'haze-ui';
+import { useForm, useField } from 'react-f0rm';
+import { InputCore } from 'haze-ui';
 
 function NameField({ form }) {
-  const name = useFormControl(form, 'name');
-  return <Input value={name} />; // two-way bound, no onChange wiring
+  const { value, onChange } = useField({ form, name: 'name' });
+  return <InputCore value={value} onChange={onChange} />; // two-way bound
 }
 ```
 
-The handle is a real `Control`: reads subscribe to the field (sibling
-fields stay isolated), and writes go through react-f0rm's user-change
-channel (`changeValueByPath`, ≥ 0.7) — a control write fires exactly the
-validation a user typing into the field would fire: the field's effective
-`mode` (a `FormItem`/`useField` per-field override included) and the
-form's `reValidateMode`. With the default `mode: 'onSubmit'` +
-`reValidateMode: 'onChange'`, typing through a bridged control after a
-failed submit re-validates per keystroke and clears the error as soon as
-the value is valid — no blur, no resubmit. Functional updates evaluate
-against the live form value. `reset(form, newValues)` re-seeds every
-bridged control with no remounting.
+The hook subscribes to the field (sibling fields stay isolated), and
+`onChange` writes through react-f0rm's user-change channel — a write
+fires exactly the validation a user typing into the field would fire:
+the field's effective `mode` (a `FormItem`/`useField` per-field override
+included) and the form's `reValidateMode`. With the default
+`mode: 'onSubmit'` + `reValidateMode: 'onChange'`, typing through a bound
+core after a failed submit re-validates per keystroke and clears the
+error as soon as the value is valid — no blur, no resubmit. `onChange`
+accepts plain values only (controlled cores emit the next value, never
+functional updaters; read the previous value from `value` on the next
+render). `reset(form, newValues)` re-seeds every binding with no
+remounting.
 
 ### FormItem: label, errors and aria wiring
 
 ```jsx
 import { Form, useForm } from 'react-f0rm';
-import { FormItem, Input } from 'haze-ui';
+import { FormItem, InputCore } from 'haze-ui';
 
 function ProfileForm() {
   const form = useForm({ initialValues: { email: '' } });
@@ -97,8 +101,8 @@ function ProfileForm() {
         label="Email"
         validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
       >
-        {({ id, errorId, invalid, control }) => (
-          <Input id={id} value={control} aria-invalid={invalid} aria-describedby={errorId} />
+        {({ id, errorId, invalid, value, onChange }) => (
+          <InputCore id={id} value={value} onChange={onChange} aria-invalid={invalid} aria-describedby={errorId} />
         )}
       </FormItem>
     </Form>
@@ -110,6 +114,46 @@ function ProfileForm() {
 surfaces the first error in a `role="alert"` element — no manual
 `FieldError` wiring.
 
+#### `as`: declarative binding (react-f0rm Field-style)
+
+Skip the render-prop: pass any component as `as` and `FormItem` wires the
+id, aria attributes, `onBlur` and `onChange` itself — the same props shape
+as react-f0rm's `Field`, not Radix's `asChild`. `as` and the children
+render-prop are mutually exclusive.
+
+```jsx
+// text field: nothing else to wire
+<FormItem form={form} name="email" label="Email" as={InputCore} />
+
+// checkbox-style control: value lives in `checked`
+<FormItem
+  form={form}
+  name="subscribed"
+  label="Subscribe"
+  as={CheckboxCore}
+  valueToProps={(checked) => ({ checked: !!checked })}
+/>
+
+// DOM-element-shaped control: adapt event and value in one line each
+<FormItem
+  form={form}
+  name="email"
+  as={NativeInput}
+  eventToValue={(e) => e.target.value}
+  renderError={(error, id) => <em id={id}>{error}</em>}
+/>
+```
+
+- `eventToValue` defaults to identity — haze cores' `onChange` emits the
+  next plain value; pass `(e) => e.target.value` when `as` is a raw DOM
+  element component.
+- `asProps` spreads extra props onto the control before the value props,
+  so `value`/`valueToProps` win conflicts (Field.tsx precedence).
+- `renderError(error, id)` replaces the built-in error span's content;
+  the span itself (`id`, `role="alert"`, styling) stays FormItem's.
+- With a typed form, `validate`'s value argument is the field's actual
+  type (`PathValueOf<TValues, P>`), not `any`.
+
 #### `mode`: per-field validation timing (react-f0rm ≥ 0.6)
 
 Pass `mode` to validate one field on its own schedule instead of the
@@ -126,10 +170,11 @@ keep the form's mode.
   mode="onBlur"
   validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
 >
-  {({ id, errorId, invalid, onBlur, control }) => (
-    <Input
+  {({ id, errorId, invalid, onBlur, value, onChange }) => (
+    <InputCore
       id={id}
-      value={control}
+      value={value}
+      onChange={onChange}
       aria-invalid={invalid}
       aria-describedby={errorId}
       onBlur={onBlur}
@@ -138,8 +183,8 @@ keep the form's mode.
 </FormItem>
 ```
 
-With `mode="onBlur"` (and the binding's `onBlur` passed to the control,
-as above) the email field is validated the moment it loses focus — no
+With `mode="onBlur"` (and the binding's `onBlur` passed to the core, as
+above) the email field is validated the moment it loses focus — no
 submit needed. `mode` accepts `'onSubmit'`, `'onBlur'`, `'onChange'`,
 `'onTouched'` or `'all'`; only this field's schedule changes, the rest
 of the form keeps its own `mode`.
@@ -173,8 +218,8 @@ react-f0rm's `useField`:
   rules={{ required: 'Email is required' }}
   validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
 >
-  {({ id, errorId, invalid, control }) => (
-    <Input id={id} value={control} aria-invalid={invalid} aria-describedby={errorId} />
+  {({ id, errorId, invalid, value, onChange }) => (
+    <InputCore id={id} value={value} onChange={onChange} aria-invalid={invalid} aria-describedby={errorId} />
   )}
 </FormItem>
 ```
@@ -194,3 +239,26 @@ Anyone and everyone is welcome to contribute.
 ## License
 
 [MIT](https://choosealicense.com/licenses/mit/)
+
+## FAQ
+
+### Components render without any styles
+
+haze-ui ships styles as separate CSS subpaths — the JS entry does not
+import any stylesheet. Import the full bundle once:
+
+```js
+import 'haze-ui/styles.css';
+```
+
+or import the tokens plus each component's own rules:
+
+```js
+import 'haze-ui/css/tokens.css';
+import 'haze-ui/css/button.css';
+```
+
+### Is there a CommonJS build?
+
+No — haze-ui is ESM-only (`"type": "module"`). Use a bundler or runtime
+with ESM support (Vite, webpack 5, Next.js, Node ≥ 18, …).

package/dist/components/Checkbox/Checkbox.js

@@ -1,24 +1,17 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                   */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import e from "./CheckboxCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/Checkbox/Checkbox.tsx
-var i = "haze-Checkbox__base", a = "haze-Checkbox__labelText";
-function o({ checked: o, className: s, label: c, onChange: l, ...u }) {
-	let [d, f] = r(o, !1), p = /* @__PURE__ */ t("input", {
-		type: "checkbox",
-		checked: d,
-		onChange: (e) => {
-			f(e.target.checked), l?.(e);
-		},
-		...u,
-		className: e([i, s])
-	});
-	return c === void 0 ? p : /* @__PURE__ */ n("label", {
-		className: e(a),
-		children: [p, c]
+function r({ checked: r, className: i, label: a, onChange: o, ...s }) {
+	let [c, l] = n(r, !1);
+	return /* @__PURE__ */ t(e, {
+		checked: c,
+		onChange: l,
+		onNativeChange: o,
+		className: i,
+		label: a,
+		...s
 	});
 }
 //#endregion
-export { o as default };
+export { r as default };

package/dist/components/Checkbox/CheckboxCore.js

@@ -0,0 +1,23 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/Checkbox/CheckboxCore.tsx
+var r = "haze-CheckboxCore__base", i = "haze-CheckboxCore__labelText";
+function a({ checked: a, onChange: o, onNativeChange: s, className: c, label: l, ...u }) {
+	let d = /* @__PURE__ */ t("input", {
+		type: "checkbox",
+		checked: a,
+		onChange: (e) => {
+			o(e.target.checked), s?.(e);
+		},
+		...u,
+		className: e([r, c])
+	});
+	return l === void 0 ? d : /* @__PURE__ */ n("label", {
+		className: e(i),
+		children: [d, l]
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,46 +1,17 @@
-
-import { classnames as e } from "../../utils/classnames.js";
-/* empty css                      */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import e from "./ColorPickerCore.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useControl as n } from "react-use-control";
 //#region src/lib/components/ColorPicker/ColorPicker.tsx
-var i = "haze-ColorPicker__container", a = "haze-ColorPicker__previewRow", o = "haze-ColorPicker__colorInput", s = "haze-ColorPicker__textInput", c = "haze-ColorPicker__presetsRow", l = "haze-ColorPicker__presetBtn", u = "haze-ColorPicker__activePreset";
-function d({ value: d, presets: f, onChange: p, className: m }) {
-	let [h, g] = r(d, "#000000"), _ = (e) => {
-		let t = e.target.value;
-		g(t), p?.(t);
-	}, v = (e) => {
-		let t = e.target.value;
-		g(t), p?.(t);
-	}, y = (e) => {
-		g(e), p?.(e);
-	};
-	return /* @__PURE__ */ n("div", {
-		className: e([i, m]),
-		children: [/* @__PURE__ */ n("div", {
-			className: e([a]),
-			children: [/* @__PURE__ */ t("input", {
-				type: "color",
-				value: h,
-				onChange: v,
-				className: e([o])
-			}), /* @__PURE__ */ t("input", {
-				type: "text",
-				value: h,
-				onChange: _,
-				className: e([s])
-			})]
-		}), f && f.length > 0 && /* @__PURE__ */ t("div", {
-			className: e([c]),
-			children: f.map((n) => /* @__PURE__ */ t("button", {
-				type: "button",
-				style: { background: n },
-				"aria-label": n,
-				onClick: () => y(n),
-				className: e([l, h === n && u])
-			}, n))
-		})]
+function r({ value: r, presets: i, onChange: a, className: o }) {
+	let [s, c] = n(r, "#000000");
+	return /* @__PURE__ */ t(e, {
+		value: s,
+		onChange: (e) => {
+			c(e), a?.(e);
+		},
+		presets: i,
+		className: o
 	});
 }
 //#endregion
-export { d as default };
+export { r as default };

package/dist/components/ColorPicker/ColorPickerCore.js

@@ -0,0 +1,38 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                          */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/ColorPicker/ColorPickerCore.tsx
+var r = "haze-ColorPickerCore__container", i = "haze-ColorPickerCore__previewRow", a = "haze-ColorPickerCore__colorInput", o = "haze-ColorPickerCore__textInput", s = "haze-ColorPickerCore__presetsRow", c = "haze-ColorPickerCore__presetBtn", l = "haze-ColorPickerCore__activePreset";
+function u({ value: u, onChange: d, presets: f, className: p }) {
+	return /* @__PURE__ */ n("div", {
+		className: e([r, p]),
+		children: [/* @__PURE__ */ n("div", {
+			className: e([i]),
+			children: [/* @__PURE__ */ t("input", {
+				type: "color",
+				value: u,
+				"aria-label": "Pick color",
+				onChange: (e) => d(e.target.value),
+				className: e([a])
+			}), /* @__PURE__ */ t("input", {
+				type: "text",
+				value: u,
+				"aria-label": "Hex color",
+				onChange: (e) => d(e.target.value),
+				className: e([o])
+			})]
+		}), f && f.length > 0 && /* @__PURE__ */ t("div", {
+			className: e([s]),
+			children: f.map((n) => /* @__PURE__ */ t("button", {
+				type: "button",
+				style: { background: n },
+				"aria-label": n,
+				onClick: () => d(n),
+				className: e([c, u === n && l])
+			}, n))
+		})]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/Combobox/Combobox.js

@@ -1,53 +1,64 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import t from "./ComboboxOption.js";
+import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
+import r from "./ComboboxOption.js";
 /* empty css                   */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useControl as i } from "react-use-control";
-import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useControl as o } from "react-use-control";
+import { useEffect as s, useId as c, useRef as l, useState as u } from "react";
 //#region src/lib/components/Combobox/Combobox.tsx
-var l = "haze-Combobox__wrapper", u = "haze-Combobox__input", d = "haze-Combobox__listbox", f = "haze-Combobox__hidden";
-function p({ value: p, open: m, options: h, placeholder: g, className: _ }) {
-	let [v, y] = i(p, ""), [b, x] = c(""), [S, C] = i(m, !1), [w, T] = c(-1), E = o(), D = s(null), O = h.filter((e) => e.label.toLowerCase().includes(b.toLowerCase()));
-	a(() => {
-		T(-1);
-	}, [b]);
-	let k = (e) => {
-		y(e);
-		let t = h.find((t) => t.value === e)?.label ?? e;
-		x(t), C(!1), D.current?.focus();
+var d = "haze-Combobox__wrapper", f = "haze-Combobox__input", p = "haze-Combobox__listbox";
+function m({ value: m, open: h, options: g, placeholder: _, className: v }) {
+	let [y, b] = o(m, ""), [x, S] = u(""), [C, w] = o(h, !1), [T, E] = u(-1), D = c(), O = l(null), k = l(null), A = n({
+		open: C,
+		setOpen: w,
+		triggerRef: O,
+		panelRef: k
+	}), j = g.filter((e) => e.label.toLowerCase().includes(x.toLowerCase()));
+	s(() => {
+		E(-1);
+	}, [x]);
+	let M = (e) => {
+		b(e);
+		let t = g.find((t) => t.value === e)?.label ?? e;
+		S(t), w(!1), O.current?.focus();
 	};
-	return /* @__PURE__ */ r("div", {
-		className: e([l, _]),
-		children: [/* @__PURE__ */ n("input", {
-			ref: D,
+	return /* @__PURE__ */ a("div", {
+		className: e([d, v]),
+		children: [/* @__PURE__ */ i("input", {
+			ref: O,
 			role: "combobox",
-			"aria-expanded": S,
-			"aria-controls": E,
+			style: A.triggerStyle,
+			"aria-expanded": C,
+			"aria-controls": D,
 			"aria-autocomplete": "list",
-			className: u,
-			value: b,
-			placeholder: g,
+			className: f,
+			value: x,
+			placeholder: _,
 			onChange: (e) => {
-				x(e.target.value), C(!0);
+				S(e.target.value), w(!0);
 			},
-			onFocus: () => C(!0),
+			onFocus: () => w(!0),
+			onClick: () => w(!0),
 			onKeyDown: (e) => {
-				e.key === "ArrowDown" ? (e.preventDefault(), T((e) => Math.min(e + 1, O.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), T((e) => Math.max(e - 1, 0))) : e.key === "Enter" && w >= 0 && O[w] ? (e.preventDefault(), k(O[w].value)) : e.key === "Escape" && C(!1);
+				e.key === "ArrowDown" ? (e.preventDefault(), E((e) => Math.min(e + 1, j.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), E((e) => Math.max(e - 1, 0))) : e.key === "Enter" && T >= 0 && j[T] ? (e.preventDefault(), M(j[T].value)) : e.key === "Escape" && w(!1);
 			}
-		}), /* @__PURE__ */ n("div", {
-			id: E,
+		}), /* @__PURE__ */ i(t, {
+			ref: k,
+			behavior: A,
+			placement: "bottom-span",
+			id: D,
 			role: "listbox",
-			className: e([d, !S && f]),
-			children: O.map((e, r) => /* @__PURE__ */ n(t, {
+			visualClass: p,
+			children: j.map((e, t) => /* @__PURE__ */ i(r, {
 				value: e.value,
-				highlighted: r === w,
-				selected: e.value === v,
-				onSelect: k,
+				highlighted: t === T,
+				selected: e.value === y,
+				onSelect: M,
 				children: e.label
 			}, e.value))
 		})]
 	});
 }
 //#endregion
-export { p as default };
+export { m as default };

package/dist/components/Command/Command.js

@@ -1,59 +1,94 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { getEnabledMenuItems as t, useMenuKeyboard as n, useRovingTabindex as r } from "../../utils/menuKeyboard.js";
 /* empty css                  */
-import { jsx as t } from "react/jsx-runtime";
-import { useControl as n } from "react-use-control";
-import { createContext as r, useContext as i, useMemo as a } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { useControl as a } from "react-use-control";
+import { createContext as o, useContext as s, useId as c, useMemo as l, useRef as u } from "react";
 //#region src/lib/components/Command/Command.tsx
-var o = r(void 0);
-function s() {
-	let e = i(o);
+var d = "[role=\"option\"]", f = o(void 0);
+function p() {
+	let e = s(f);
 	if (!e) throw Error("Command sub-components must be used within <Command>");
 	return e;
 }
-var c = "haze-Command__base";
-function l({ query: r, children: i, className: s }) {
-	let [l, u] = n(r, ""), d = a(() => ({
-		query: l,
-		setQuery: u
-	}), [l, u]);
-	return /* @__PURE__ */ t(o.Provider, {
-		value: d,
-		children: t("div", {
+var m = "haze-Command__base";
+function h({ query: t, children: n, className: r }) {
+	let [o, s] = a(t, ""), d = u(null), p = u(null), h = c(), g = l(() => ({
+		query: o,
+		setQuery: s,
+		inputRef: d,
+		listRef: p,
+		listId: h
+	}), [
+		o,
+		s,
+		h
+	]);
+	return /* @__PURE__ */ i(f.Provider, {
+		value: g,
+		children: i("div", {
 			role: "combobox",
-			className: e([c, s]),
-			children: i
+			"aria-expanded": !0,
+			"aria-controls": h,
+			className: e([m, r]),
+			children: n
 		})
 	});
 }
-var u = "haze-Command__inputStyle";
-function d({ placeholder: n, className: r }) {
-	let { query: i, setQuery: a } = s();
-	return /* @__PURE__ */ t("input", {
+var g = "haze-Command__inputStyle";
+function _({ placeholder: n, className: r }) {
+	let { query: a, setQuery: o, inputRef: s, listRef: c } = p();
+	return /* @__PURE__ */ i("input", {
+		ref: s,
 		type: "text",
 		placeholder: n,
-		value: i,
-		onChange: (e) => a(e.target.value),
-		className: e([u, r])
+		value: a,
+		onChange: (e) => o(e.target.value),
+		onKeyDown: (e) => {
+			if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+			e.preventDefault();
+			let n = t(c.current, d);
+			(e.key === "ArrowDown" ? n[0] : n[n.length - 1])?.focus();
+		},
+		className: e([g, r])
 	});
 }
-var f = "haze-Command__listStyle";
-function p({ children: n, className: r }) {
-	return /* @__PURE__ */ t("div", {
+var v = "haze-Command__listStyle";
+function y({ children: t, className: a }) {
+	let { inputRef: o, listRef: s, listId: c } = p();
+	r({
+		menuRef: s,
+		active: !0,
+		selector: d
+	});
+	let l = n({
+		menuRef: s,
+		selector: d,
+		onClose: () => o.current?.focus()
+	});
+	return /* @__PURE__ */ i("div", {
+		ref: s,
 		role: "listbox",
-		className: e([f, r]),
-		children: n
+		id: c,
+		onKeyDown: l,
+		className: e([v, a]),
+		children: t
 	});
 }
-var m = "haze-Command__itemStyle";
-function h({ children: n, className: r, onSelect: i }) {
-	let { query: a } = s();
-	return !a || (typeof n == "string" ? n : "").toLowerCase().includes(a.toLowerCase()) ? /* @__PURE__ */ t("div", {
+var b = "haze-Command__itemStyle";
+function x({ children: t, className: n, onSelect: r }) {
+	let { query: a } = p();
+	return !a || (typeof t == "string" ? t : "").toLowerCase().includes(a.toLowerCase()) ? /* @__PURE__ */ i("div", {
 		role: "option",
-		onClick: i,
-		className: e([m, r]),
-		children: n
+		tabIndex: -1,
+		onClick: r,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), r?.());
+		},
+		className: e([b, n]),
+		children: t
 	}) : null;
 }
 //#endregion
-export { d as CommandInput, h as CommandItem, p as CommandList, l as default };
+export { _ as CommandInput, x as CommandItem, y as CommandList, h as default };

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,38 +1,40 @@
 
 import { classnames as e } from "../../utils/classnames.js";
-import { ContextMenuProvider as t } from "./ContextMenuContext.js";
+import { useFloating as t } from "../../utils/floating.js";
+import { ContextMenuProvider as n } from "./ContextMenuContext.js";
 /* empty css                      */
-import { jsx as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
+import { useCallback as a, useRef as o, useState as s } from "react";
 //#region src/lib/components/ContextMenu/ContextMenu.tsx
 var c = "haze-ContextMenu__wrapper";
 function l({ open: l, onOpenChange: u, children: d, className: f }) {
-	let [p, m] = r(l, !1), [h, g] = s(0), [_, v] = s(0), y = o(null), b = i((e) => {
+	let [p, m] = i(l, !1), [h, g] = s(0), [_, v] = s(0), y = o(null), b = o(null), x = a((e) => {
 		let t = typeof e == "function" ? e(p) : e;
 		m(t), u?.(t);
 	}, [
 		p,
 		m,
 		u
-	]), x = i((e, t) => {
+	]), S = a((e, t) => {
 		g(e), v(t);
-	}, []);
-	return a(() => {
-		if (!p) return;
-		let e = (e) => {
-			y.current && !y.current.contains(e.target) && b(!1);
-		};
-		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [p, b]), /* @__PURE__ */ n(t, {
+	}, []), C = t({
+		open: p,
+		setOpen: x,
+		triggerRef: y,
+		panelRef: b
+	});
+	return /* @__PURE__ */ r(n, {
 		value: {
 			open: p,
-			setOpen: b,
+			setOpen: x,
 			x: h,
 			y: _,
-			setPosition: x
+			setPosition: S,
+			contentRef: b,
+			floating: C
 		},
-		children: n("div", {
+		children: r("div", {
 			ref: y,
 			className: e([c, f]),
 			children: d