haze-ui 1.14.0 → 1.16.0

package/README.md

@@ -49,6 +49,42 @@ Component CSS files are kebab-case versions of the component name
 cover that component's rules — tokens (themes, spacing, typography)
 always come from `haze-ui/css/tokens.css`.
 
+## ButtonLink: a real anchor with the Button skin
+
+Navigation that must look like a button should still *be* a link —
+rendering `as={Button}` drops `href` onto a `<button>` (an invalid
+attribute: no ⌘/middle-click new tab, nothing for crawlers or no-JS).
+`ButtonLink` renders a native `<a>` wearing Button's full appearance —
+same `variant`/`size`/`square` props, same hover/active/focus and
+disabled visual states:
+
+```jsx
+import { ButtonLink } from 'haze-ui';
+
+<ButtonLink href='/page/2' variant='outline'>Next page</ButtonLink>
+
+// anchors have no `disabled` attribute — report the state with
+// aria-disabled (+ tabIndex={-1} to leave the focus order); ButtonLink
+// styles it exactly like Button's :disabled
+<ButtonLink href='/prev' aria-disabled tabIndex={-1}>← Previous</ButtonLink>
+```
+
+Everything else extends the native `<a>` attributes and is spread onto
+the anchor (`target`, `rel`, `download`, `aria-*`, …), with the ref
+forwarded — the same composition shape `NavLink` uses, so routers can
+swap their own Link element through an `as` prop:
+
+```jsx
+// with a typed router Link (href + SPA onClick injected by the router):
+<TypedLink to='/articles' search={{offset: 20}} as={ButtonLink}>
+  Next page
+</TypedLink>
+```
+
+Both components share one skin (a styles module), so a theme tweak to
+`Button` re-skins `ButtonLink` in lockstep. CSS: `haze-ui/css/button.css`
+covers both.
+
 ## react-f0rm Integration
 
 react-f0rm owns form field state, and its headless `useField` hook is
@@ -154,6 +190,59 @@ render-prop are mutually exclusive.
 - With a typed form, `validate`'s value argument is the field's actual
   type (`PathValueOf<TValues, P>`), not `any`.
 
+#### `input`: declarative binding for haze-ui cores (typed prop forwarding)
+
+The ergonomic form for the controlled cores — pass the component and the
+rest of the JSX goes straight to it, type-checked against its own props:
+
+```jsx
+<FormItem
+  form={form}
+  name="email"
+  label="Email"
+  input={InputCore}
+  placeholder="you@x.dev"
+  mode="onBlur"
+  validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
+/>
+
+// JSX children forward too — a SelectCore's options:
+<FormItem form={form} name="role" label="Role" input={SelectCore}>
+  <option value="admin">Admin</option>
+  <option value="viewer">Viewer</option>
+</FormItem>
+
+// checkbox-style controls keep the valueToProps adapter:
+<FormItem
+  form={form}
+  name="subscribed"
+  label="Subscribe"
+  input={CheckboxCore}
+  valueToProps={(checked) => ({ checked })}
+/>
+```
+
+`input` wires the same id/aria/`onBlur`/`onChange`/value contract as `as`
+— every haze core (`InputCore`, `TextareaCore`, `SelectCore`,
+`TagInputCore`, `CheckboxCore`, `SwitchCore`, …) speaks the plain
+`{value, onChange}` pair, so the default adapters need nothing
+(`TagInputCore`'s `onChange` already emits the next `string[]`; a
+checkbox-style core pairs with `valueToProps`). The differences from
+`as`:
+
+- Forwarded props are **type-checked against the core's own props** —
+  `input={InputCore} size="xl"` is a compile error, while `asProps` is an
+  untyped bag.
+- JSX **children** forward to the core (a `SelectCore`'s `<option>`s);
+  the render-prop children and `input` are mutually exclusive (a
+  render-prop next to `input` throws — it's a migration leftover).
+- The wiring (`id`, `aria-invalid`, `aria-describedby`, `onBlur`,
+  `onChange`, `value`/`checked`) and FormItem's own prop names are
+  **reserved**: they are excluded from the forwarded type and always win
+  at runtime. A control prop that collides with one (e.g. CheckboxCore's
+  own `label`) is unreachable through `input` — use the render-prop or
+  `as`/`asProps` for it.
+
 #### `mode`: per-field validation timing (react-f0rm ≥ 0.6)
 
 Pass `mode` to validate one field on its own schedule instead of the

package/dist/components/Button/Button.js

@@ -1,33 +1,19 @@
-
 import { classnames as e } from "../../utils/classnames.js";
-/* empty css                 */
-import { jsx as t } from "react/jsx-runtime";
+import { base as t, sizes as n, squareSizes as r, variants as i } from "./styles.js";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/lib/components/Button/Button.tsx
-var n = "haze-Button__base", r = {
-	solid: "haze-Button__solid",
-	outline: "haze-Button__outline",
-	ghost: "haze-Button__ghost"
-}, i = "haze-Button__sizeSm", a = "haze-Button__sizeMd", o = "haze-Button__sizeLg", s = "haze-Button__squareSm", c = "haze-Button__squareMd", l = "haze-Button__squareLg", u = {
-	sm: i,
-	md: a,
-	lg: o
-}, d = {
-	sm: s,
-	md: c,
-	lg: l
-};
-function f({ variant: i = "solid", size: a = "md", square: o = !1, className: s, ...c }) {
-	let l = o ? d[a] : u[a];
-	return /* @__PURE__ */ t("button", {
+function o({ variant: o = "solid", size: s = "md", square: c = !1, className: l, ...u }) {
+	let d = c ? r[s] : n[s];
+	return /* @__PURE__ */ a("button", {
 		type: "button",
-		...c,
+		...u,
 		className: e([
-			n,
-			r[i],
-			l,
-			s
+			t,
+			i[o],
+			d,
+			l
 		])
 	});
 }
 //#endregion
-export { f as default };
+export { o as default };

package/dist/components/Button/ButtonLink.js

@@ -0,0 +1,23 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { base as t, sizes as n, squareSizes as r, variants as i } from "./styles.js";
+/* empty css                     */
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+//#region src/lib/components/Button/ButtonLink.tsx
+var s = "haze-ButtonLink__link", c = o(function({ variant: o = "solid", size: c = "md", square: l = !1, className: u, ...d }, f) {
+	let p = l ? r[c] : n[c];
+	return /* @__PURE__ */ a("a", {
+		ref: f,
+		...d,
+		className: e([
+			t,
+			i[o],
+			p,
+			s,
+			u
+		])
+	});
+});
+//#endregion
+export { c as default };

package/dist/components/Button/styles.js

@@ -0,0 +1,18 @@
+
+/* empty css                 */
+//#region src/lib/components/Button/styles.ts
+var e = "haze-styles__base", t = {
+	solid: "haze-styles__solid",
+	outline: "haze-styles__outline",
+	ghost: "haze-styles__ghost"
+}, n = "haze-styles__sizeSm", r = "haze-styles__sizeMd", i = "haze-styles__sizeLg", a = "haze-styles__squareSm", o = "haze-styles__squareMd", s = "haze-styles__squareLg", c = {
+	sm: n,
+	md: r,
+	lg: i
+}, l = {
+	sm: a,
+	md: o,
+	lg: s
+};
+//#endregion
+export { e as base, i as sizeLg, r as sizeMd, n as sizeSm, c as sizes, s as squareLg, o as squareMd, l as squareSizes, a as squareSm, t as variants };

package/dist/components/Carousel/Carousel.js

@@ -2,13 +2,13 @@
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useControl as i } from "react-use-control";
-import { Children as a, useEffect as o, useRef as s } from "react";
+import { Children as i, useEffect as a, useRef as o } from "react";
+import { useControl as s } from "react-use-control";
 //#region src/lib/components/Carousel/Carousel.tsx
 var c = "haze-Carousel__wrapper", l = "haze-Carousel__track", u = "haze-Carousel__navBtn", d = "haze-Carousel__prevBtn", f = "haze-Carousel__nextBtn", p = "haze-Carousel__indicators", m = "haze-Carousel__dot", h = "haze-Carousel__dotActive";
 function g({ value: g, autoPlay: _ = !1, interval: v = 5e3, className: y, children: b }) {
-	let [x, S] = i(g, 0), C = s(null), w = a.count(b);
-	return o(() => {
+	let [x, S] = s(g, 0), C = o(null), w = i.count(b);
+	return a(() => {
 		let e = C.current;
 		if (!e) return;
 		let t = e.children[x];
@@ -17,7 +17,7 @@ function g({ value: g, autoPlay: _ = !1, interval: v = 5e3, className: y, childr
 			block: "nearest",
 			inline: "start"
 		});
-	}, [x]), o(() => {
+	}, [x]), a(() => {
 		if (!_ || w <= 1) return;
 		let e = setInterval(() => {
 			S((e) => (e + 1) % w);

package/dist/components/ChatInput/ChatInput.js

@@ -2,12 +2,12 @@
 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 { useCallback as i, useRef as a } from "react";
+import { useCallback as r, useRef as i } from "react";
+import { useControl as a } from "react-use-control";
 //#region src/lib/components/ChatInput/ChatInput.tsx
 var o = "haze-ChatInput__wrapper", s = "haze-ChatInput__textarea", c = "haze-ChatInput__sendBtn";
 function l({ value: l, onSend: u, placeholder: d = "Type a message...", disabled: f, maxLength: p, className: m }) {
-	let [h, g] = r(l, ""), _ = a(null), v = i(() => {
+	let [h, g] = a(l, ""), _ = i(null), v = r(() => {
 		let e = h.trim();
 		!e || f || (u?.(e), g(""), _.current && (_.current.style.height = "auto"));
 	}, [

package/dist/components/Collapsible/Collapsible.js

@@ -2,18 +2,18 @@
 import { classnames as e } from "../../utils/classnames.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 } from "react";
+import { createContext as n, useContext as r } from "react";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/Collapsible/Collapsible.tsx
-var a = r(void 0);
+var a = n(void 0);
 function o() {
-	let e = i(a);
+	let e = r(a);
 	if (!e) throw Error("Collapsible sub-components must be used within <Collapsible>");
 	return e;
 }
 var s = "haze-Collapsible__base";
-function c({ open: r, defaultOpen: i = !1, children: o, className: c }) {
-	let [l, u] = n(r, i);
+function c({ open: n, defaultOpen: r = !1, children: o, className: c }) {
+	let [l, u] = i(n, r);
 	return /* @__PURE__ */ t(a.Provider, {
 		value: {
 			open: l,

package/dist/components/Combobox/Combobox.js

@@ -4,18 +4,18 @@ import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
 import r from "./ComboboxOption.js";
 /* empty css                   */
 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";
+import { useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { useControl as u } from "react-use-control";
 //#region src/lib/components/Combobox/Combobox.tsx
 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({
+	let [y, b] = u(m, ""), [x, S] = l(""), [C, w] = u(h, !1), [T, E] = l(-1), D = s(), O = c(null), k = c(null), A = n({
 		open: C,
 		setOpen: w,
 		triggerRef: O,
 		panelRef: k
 	}), j = g.filter((e) => e.label.toLowerCase().includes(x.toLowerCase()));
-	s(() => {
+	o(() => {
 		E(-1);
 	}, [x]);
 	let M = (e) => {

package/dist/components/Command/Command.js

@@ -3,26 +3,26 @@ 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 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";
+import { createContext as a, useContext as o, useId as s, useMemo as c, useRef as l } from "react";
+import { useControl as u } from "react-use-control";
 //#region src/lib/components/Command/Command.tsx
-var d = "[role=\"option\"]", f = o(void 0);
+var d = "[role=\"option\"]", f = a(void 0);
 function p() {
-	let e = s(f);
+	let e = o(f);
 	if (!e) throw Error("Command sub-components must be used within <Command>");
 	return e;
 }
 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,
+	let [a, o] = u(t, ""), d = l(null), p = l(null), h = s(), g = c(() => ({
+		query: a,
+		setQuery: o,
 		inputRef: d,
 		listRef: p,
 		listId: h
 	}), [
+		a,
 		o,
-		s,
 		h
 	]);
 	return /* @__PURE__ */ i(f.Provider, {

package/dist/components/ContextMenu/ContextMenu.js

@@ -4,19 +4,19 @@ import { useFloating as t } from "../../utils/floating.js";
 import { ContextMenuProvider as n } from "./ContextMenuContext.js";
 /* empty css                      */
 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";
+import { useCallback as i, useRef as a, useState as o } from "react";
+import { useControl as s } from "react-use-control";
 //#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] = i(l, !1), [h, g] = s(0), [_, v] = s(0), y = o(null), b = o(null), x = a((e) => {
+	let [p, m] = s(l, !1), [h, g] = o(0), [_, v] = o(0), y = a(null), b = a(null), x = i((e) => {
 		let t = typeof e == "function" ? e(p) : e;
 		m(t), u?.(t);
 	}, [
 		p,
 		m,
 		u
-	]), S = a((e, t) => {
+	]), S = i((e, t) => {
 		g(e), v(t);
 	}, []), C = t({
 		open: p,

package/dist/components/Dialog/Dialog.js

@@ -2,13 +2,13 @@
 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 { useEffect as i, useId as a, useRef as o } from "react";
+import { useEffect as r, useId as i, useRef as a } from "react";
+import { useControl as o } from "react-use-control";
 //#region src/lib/components/Dialog/Dialog.tsx
 var s = "haze-Dialog__overlay", c = "haze-Dialog__titleText";
 function l({ open: l, onClose: u, title: d, className: f, children: p }) {
-	let [m, h] = r(l, !1), g = o(null), _ = o(null), v = `haze-dialog-title-${a()}`;
-	return i(() => {
+	let [m, h] = o(l, !1), g = a(null), _ = a(null), v = `haze-dialog-title-${i()}`;
+	return r(() => {
 		let e = g.current;
 		e && (m && !e.open ? (_.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal()) : !m && e.open && e.close());
 	}, [m]), /* @__PURE__ */ n("dialog", {

package/dist/components/Disclosure/Disclosure.js

@@ -2,13 +2,13 @@
 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 { useEffect as i, useRef as a } from "react";
+import { useEffect as r, useRef as i } from "react";
+import { useControl as a } from "react-use-control";
 //#region src/lib/components/Disclosure/Disclosure.tsx
 var o = "haze-Disclosure__details", s = "haze-Disclosure__summaryStyle", c = "haze-Disclosure__content";
 function l({ open: l, summary: u, className: d, children: f }) {
-	let [p] = r(l, !1), m = a(null);
-	return i(() => {
+	let [p] = a(l, !1), m = i(null);
+	return r(() => {
 		m.current && (m.current.open = p);
 	}, [p]), /* @__PURE__ */ n("details", {
 		ref: m,

package/dist/components/Drawer/Drawer.js

@@ -2,8 +2,8 @@
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
 import { jsx as t } from "react/jsx-runtime";
-import { useControl as n } from "react-use-control";
-import { useEffect as r, useRef as i } from "react";
+import { useEffect as n, useRef as r } from "react";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/Drawer/Drawer.tsx
 var a = "haze-Drawer__overlay", o = {
 	left: "haze-Drawer__left",
@@ -12,8 +12,8 @@ var a = "haze-Drawer__overlay", o = {
 	bottom: "haze-Drawer__bottom"
 };
 function s({ open: s, placement: c = "right", onClose: l, className: u, children: d }) {
-	let [f, p] = n(s, !1), m = i(null);
-	return r(() => {
+	let [f, p] = i(s, !1), m = r(null);
+	return n(() => {
 		let e = m.current;
 		e && (f && !e.open ? e.showModal() : !f && e.open && e.close());
 	}, [f]), /* @__PURE__ */ t("dialog", {

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -4,12 +4,12 @@ import { useFloating as t } from "../../utils/floating.js";
 import { DropdownMenuProvider as n } from "./DropdownMenuContext.js";
 /* empty css                       */
 import { jsx as r } from "react/jsx-runtime";
-import { useControl as i } from "react-use-control";
-import { useCallback as a, useId as o, useRef as s } from "react";
+import { useCallback as i, useId as a, useRef as o } from "react";
+import { useControl as s } from "react-use-control";
 //#region src/lib/components/DropdownMenu/DropdownMenu.tsx
 var c = "haze-DropdownMenu__wrapper";
 function l({ open: l, onOpenChange: u, children: d, className: f }) {
-	let [p, m] = i(l, !1), h = s(null), g = s(null), _ = o(), v = s(null), y = a((e) => {
+	let [p, m] = s(l, !1), h = o(null), g = o(null), _ = a(), v = o(null), y = i((e) => {
 		let t = typeof e == "function" ? e(p) : e;
 		m(t), u?.(t);
 	}, [

package/dist/components/InlineEdit/InlineEdit.js

@@ -2,13 +2,13 @@
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t } from "react/jsx-runtime";
-import { useControl as n } from "react-use-control";
-import { useEffect as r, useRef as i, useState as a } from "react";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { useControl as a } from "react-use-control";
 //#region src/lib/components/InlineEdit/InlineEdit.tsx
 var o = "haze-InlineEdit__display", s = "haze-InlineEdit__editing", c = "haze-InlineEdit__placeholderStyle";
 function l({ value: l, onChange: u, placeholder: d = "Click to edit", disabled: f, className: p }) {
-	let [m, h] = n(l, ""), [g, _] = a(!1), [v, y] = a(m), b = i(null);
-	r(() => {
+	let [m, h] = a(l, ""), [g, _] = i(!1), [v, y] = i(m), b = r(null);
+	n(() => {
 		g && (b.current?.focus(), b.current?.select());
 	}, [g]);
 	let x = () => {

package/dist/components/LogViewer/LogViewer.js

@@ -2,8 +2,8 @@
 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 { useMemo as i } from "react";
+import { useMemo as r } from "react";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/LogViewer/LogViewer.tsx
 var a = "haze-LogViewer__wrapper", o = "haze-LogViewer__toolbar", s = "haze-LogViewer__filterBtn", c = "haze-LogViewer__filterActive", l = "haze-LogViewer__body", u = "haze-LogViewer__entry", d = "haze-LogViewer__timestamp", f = "haze-LogViewer__levelBadge", p = "haze-LogViewer__levelDebug", m = "haze-LogViewer__levelInfo", h = "haze-LogViewer__levelWarn", g = "haze-LogViewer__levelError", _ = "haze-LogViewer__messageStyle", v = {
 	debug: p,
@@ -17,7 +17,7 @@ var a = "haze-LogViewer__wrapper", o = "haze-LogViewer__toolbar", s = "haze-LogV
 	"error"
 ];
 function b({ logs: p, filter: m, className: h }) {
-	let [g, b] = r(m, null), x = i(() => g ? p.filter((e) => e.level === g) : p, [p, g]);
+	let [g, b] = i(m, null), x = r(() => g ? p.filter((e) => e.level === g) : p, [p, g]);
 	return /* @__PURE__ */ n("div", {
 		className: e([a, h]),
 		children: [/* @__PURE__ */ n("div", {

package/dist/components/Menu/Menu.js

@@ -4,12 +4,12 @@ import { FloatingPanel as t, useFloating as n } from "../../utils/floating.js";
 import { useMenuKeyboard as r, useRovingTabindex as i } from "../../utils/menuKeyboard.js";
 /* empty css               */
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useControl as s } from "react-use-control";
-import { useRef as c } from "react";
+import { useRef as s } from "react";
+import { useControl as c } from "react-use-control";
 //#region src/lib/components/Menu/Menu.tsx
 var l = "haze-Menu__container", u = "haze-Menu__panel";
 function d({ open: d, trigger: f, className: p, children: m }) {
-	let [h, g] = s(d, !1), _ = c(null), v = c(null), y = n({
+	let [h, g] = c(d, !1), _ = s(null), v = s(null), y = n({
 		open: h,
 		setOpen: g,
 		triggerRef: _,

package/dist/components/Popover/Popover.js

@@ -2,12 +2,12 @@
 import { FloatingPanel as e, useFloating as t } from "../../utils/floating.js";
 /* empty css                  */
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useControl as i } from "react-use-control";
-import { useId as a, useRef as o } from "react";
+import { useId as i, useRef as a } from "react";
+import { useControl as o } from "react-use-control";
 //#region src/lib/components/Popover/Popover.tsx
 var s = "haze-Popover__container", c = "haze-Popover__panelVisuals";
 function l({ content: l, open: u, className: d, children: f }) {
-	let [p, m] = i(u, !1), h = a(), g = o(null), _ = o(null), v = t({
+	let [p, m] = o(u, !1), h = i(), g = a(null), _ = a(null), v = t({
 		open: p,
 		setOpen: m,
 		triggerRef: g,

package/dist/components/Stepper/Stepper.js

@@ -3,12 +3,12 @@ import { classnames as e } from "../../utils/classnames.js";
 import { StepperProvider as t } from "./StepperContext.js";
 /* empty css                  */
 import { jsx as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
-import { Children as i, cloneElement as a, isValidElement as o } from "react";
+import { Children as r, cloneElement as i, isValidElement as a } from "react";
+import { useControl as o } from "react-use-control";
 //#region src/lib/components/Stepper/Stepper.tsx
 var s = "haze-Stepper__stepper";
 function c({ activeStep: c, children: l, className: u }) {
-	let [d, f] = r(c, 0), p = i.count(l);
+	let [d, f] = o(c, 0), p = r.count(l);
 	return /* @__PURE__ */ n(t, {
 		value: {
 			activeStep: d,
@@ -18,7 +18,7 @@ function c({ activeStep: c, children: l, className: u }) {
 		children: n("div", {
 			role: "list",
 			className: e([s, u]),
-			children: i.map(l, (e, t) => o(e) ? a(e, { index: t }) : e)
+			children: r.map(l, (e, t) => a(e) ? i(e, { index: t }) : e)
 		})
 	});
 }

package/dist/components/Tooltip/Tooltip.js

@@ -3,8 +3,8 @@ import { classnames as e } from "../../utils/classnames.js";
 import { floatingPlacementClasses as t, useFloating as n, useFloatingPosition as r } from "../../utils/floating.js";
 /* empty css                  */
 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 } from "react";
+import { useEffect as o, useId as s, useRef as c } from "react";
+import { useControl as l } from "react-use-control";
 //#region src/lib/components/Tooltip/Tooltip.tsx
 var u = "haze-Tooltip__wrapper", d = "haze-Tooltip__bubble", f = {
 	top: "top",
@@ -13,7 +13,7 @@ var u = "haze-Tooltip__wrapper", d = "haze-Tooltip__bubble", f = {
 	right: "right"
 };
 function p({ content: p, position: m = "top", delay: h = 150, open: g, className: _, children: v }) {
-	let [y, b] = o(g, !1), x = c(), S = l(null), C = l(null), w = f[m], T = n({
+	let [y, b] = l(g, !1), x = s(), S = c(null), C = c(null), w = f[m], T = n({
 		open: y,
 		setOpen: b,
 		triggerRef: S,
@@ -23,8 +23,8 @@ function p({ content: p, position: m = "top", delay: h = 150, open: g, className
 		behavior: T,
 		placement: w
 	});
-	let E = l(0);
-	s(() => () => window.clearTimeout(E.current), []);
+	let E = c(0);
+	o(() => () => window.clearTimeout(E.current), []);
 	let D = () => {
 		window.clearTimeout(E.current), E.current = window.setTimeout(() => b(!0), h);
 	}, O = () => {

package/dist/components/Transfer/Transfer.js

@@ -2,12 +2,12 @@
 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 { useState as i } from "react";
+import { useState as r } from "react";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/Transfer/Transfer.tsx
 var a = "haze-Transfer__container", o = "haze-Transfer__panel", s = "haze-Transfer__panelHeader", c = "haze-Transfer__panelBody", l = "haze-Transfer__itemStyle", u = "haze-Transfer__actions", d = "haze-Transfer__actionBtn";
 function f({ dataSource: f, targetKeys: p, onChange: m, className: h }) {
-	let [g, _] = r(p, []), [v, y] = i([]), [b, x] = i([]), S = f.filter((e) => !g.includes(e.key)), C = f.filter((e) => g.includes(e.key)), w = (e) => {
+	let [g, _] = i(p, []), [v, y] = r([]), [b, x] = r([]), S = f.filter((e) => !g.includes(e.key)), C = f.filter((e) => g.includes(e.key)), w = (e) => {
 		y((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
 	}, T = (e) => {
 		x((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);

package/dist/components/Tree/Tree.js

@@ -4,8 +4,8 @@ import t from "./TreeItem.js";
 import { findNodeByKey as n, getChildKeys as r, getParentKey as i } from "./utils.js";
 /* empty css               */
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useControl as s } from "react-use-control";
-import { useMemo as c } from "react";
+import { useMemo as s } from "react";
+import { useControl as c } from "react-use-control";
 //#region src/lib/components/Tree/Tree.tsx
 var l = "haze-Tree__base", u = "haze-Tree__group";
 function d(e, t, n) {
@@ -26,7 +26,7 @@ function d(e, t, n) {
 	};
 }
 function f({ treeData: f, multiple: p = !1, checkable: m = !1, checkStrictly: h = !1, selectable: g = !0, disabled: _ = !1, blockNode: v = !1, showLine: y = !1, showIcon: b = !1, switcherIcon: x, loadingIcon: S, titleRender: C, iconRender: w, expandedKeys: T, selectedKeys: E, checkedKeys: D, className: O, onExpand: k, onSelect: A, onCheck: j }) {
-	let [M, N] = s(T, []), [P, F] = s(E, []), [I, L] = s(D, []), R = I, z = c(() => d(R, f, h), [
+	let [M, N] = c(T, []), [P, F] = c(E, []), [I, L] = c(D, []), R = I, z = s(() => d(R, f, h), [
 		R,
 		f,
 		h

package/dist/css/button.css

@@ -1,2 +1,3 @@
 /* haze-ui button — generated by scripts/split-css.mjs, do not edit */
-.haze-Button__base{justify-content:center;align-items:center;gap:var(--haze-space-2);border-radius:var(--haze-radius-md);font-family:var(--haze-font-sans);font-weight:var(--haze-weight-medium);line-height:var(--haze-leading-tight);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.haze-Button__base:focus-visible{box-shadow:0 0 0 3px var(--haze-color-focus-ring);outline:none}.haze-Button__base:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.haze-Button__solid{background:var(--haze-color-primary);color:var(--haze-color-text-inverse)}.haze-Button__solid:hover{background:var(--haze-color-primary-hover)}.haze-Button__solid:active{background:var(--haze-color-primary-active)}.haze-Button__outline{border-color:var(--haze-color-border);color:var(--haze-color-text);background:0 0}.haze-Button__outline:hover{border-color:var(--haze-color-border-hover);background:var(--haze-color-bg-subtle)}.haze-Button__outline:active{background:var(--haze-color-bg-muted)}.haze-Button__ghost{color:var(--haze-color-text);background:0 0}.haze-Button__ghost:hover{background:var(--haze-color-bg-subtle)}.haze-Button__ghost:active{background:var(--haze-color-bg-muted)}.haze-Button__sizeSm{padding:var(--haze-space-1) var(--haze-space-3);font-size:var(--haze-text-sm)}.haze-Button__sizeMd{padding:var(--haze-space-2) var(--haze-space-4);font-size:var(--haze-text-sm)}.haze-Button__sizeLg{padding:var(--haze-space-3) var(--haze-space-6);font-size:var(--haze-text-base)}.haze-Button__squareSm{padding:var(--haze-space-1);font-size:var(--haze-text-sm)}.haze-Button__squareMd{padding:var(--haze-space-2);font-size:var(--haze-text-sm)}.haze-Button__squareLg{padding:var(--haze-space-3);font-size:var(--haze-text-base)}
+.haze-ButtonLink__link{-webkit-text-decoration:none;text-decoration:none}.haze-ButtonLink__link[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}
+.haze-styles__base{justify-content:center;align-items:center;gap:var(--haze-space-2);border-radius:var(--haze-radius-md);font-family:var(--haze-font-sans);font-weight:var(--haze-weight-medium);line-height:var(--haze-leading-tight);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;display:inline-flex}.haze-styles__base:focus-visible{box-shadow:0 0 0 3px var(--haze-color-focus-ring);outline:none}.haze-styles__base:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.haze-styles__solid{background:var(--haze-color-primary);color:var(--haze-color-text-inverse)}.haze-styles__solid:hover{background:var(--haze-color-primary-hover)}.haze-styles__solid:active{background:var(--haze-color-primary-active)}.haze-styles__outline{border-color:var(--haze-color-border);color:var(--haze-color-text);background:0 0}.haze-styles__outline:hover{border-color:var(--haze-color-border-hover);background:var(--haze-color-bg-subtle)}.haze-styles__outline:active{background:var(--haze-color-bg-muted)}.haze-styles__ghost{color:var(--haze-color-text);background:0 0}.haze-styles__ghost:hover{background:var(--haze-color-bg-subtle)}.haze-styles__ghost:active{background:var(--haze-color-bg-muted)}.haze-styles__sizeSm{padding:var(--haze-space-1) var(--haze-space-3);font-size:var(--haze-text-sm)}.haze-styles__sizeMd{padding:var(--haze-space-2) var(--haze-space-4);font-size:var(--haze-text-sm)}.haze-styles__sizeLg{padding:var(--haze-space-3) var(--haze-space-6);font-size:var(--haze-text-base)}.haze-styles__squareSm{padding:var(--haze-space-1);font-size:var(--haze-text-sm)}.haze-styles__squareMd{padding:var(--haze-space-2);font-size:var(--haze-text-sm)}.haze-styles__squareLg{padding:var(--haze-space-3);font-size:var(--haze-text-base)}