haze-ui 1.15.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

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)}

package/dist/haze-ui.css

@@ -14,7 +14,8 @@
 .haze-BottomSheet__overlay{z-index:100;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;background:#0006;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.haze-BottomSheet__sheet{background:var(--haze-color-bg);border-radius:var(--haze-radius-xl) var(--haze-radius-xl) 0 0;padding:var(--haze-space-4) var(--haze-space-6) calc(var(--haze-space-4) + env(safe-area-inset-bottom));width:100%;max-width:640px;max-height:80vh;font-family:var(--haze-font-sans);color:var(--haze-color-text);box-shadow:var(--haze-shadow-xl);overflow-y:auto}.haze-BottomSheet__handle{background:var(--haze-color-border);border-radius:var(--haze-radius-full);width:2rem;height:.25rem;margin:0 auto var(--haze-space-4)}
 .haze-Breadcrumb__nav{font-family:var(--haze-font-sans);font-size:var(--haze-text-sm)}.haze-Breadcrumb__list{align-items:center;gap:var(--haze-space-2);white-space:nowrap;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.haze-Breadcrumb__sep{color:var(--haze-color-text-muted);-webkit-user-select:none;user-select:none}
 .haze-BreadcrumbItem__link{color:var(--haze-color-primary);-webkit-text-decoration:none;text-decoration:none;transition:color .15s}.haze-BreadcrumbItem__link:hover{color:var(--haze-color-primary-hover);-webkit-text-decoration:underline;text-decoration:underline}.haze-BreadcrumbItem__link:focus-visible{box-shadow:0 0 0 3px var(--haze-color-focus-ring);border-radius:var(--haze-radius-sm);outline:none}.haze-BreadcrumbItem__current{color:var(--haze-color-text);font-weight:var(--haze-weight-medium)}
-.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)}
 .haze-Card__base{border-radius:var(--haze-radius-lg);padding:var(--haze-space-5);font-family:var(--haze-font-sans);color:var(--haze-color-text)}.haze-Card__elevated{background:var(--haze-color-bg);box-shadow:var(--haze-shadow-md)}.haze-Card__outlined{background:var(--haze-color-bg);border:1px solid var(--haze-color-border)}.haze-Card__filled{background:var(--haze-color-bg-subtle)}
 .haze-Carousel__wrapper{border-radius:var(--haze-radius-lg);position:relative;overflow:hidden}.haze-Carousel__track{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;display:flex;overflow-x:auto}.haze-Carousel__track::-webkit-scrollbar{display:none}.haze-Carousel__navBtn{z-index:1;appearance:none;border-radius:var(--haze-radius-full);background:var(--haze-color-bg);width:2.5rem;height:2.5rem;color:var(--haze-color-text);font-size:var(--haze-text-lg);cursor:pointer;box-shadow:var(--haze-shadow-md);border:none;justify-content:center;align-items:center;transition:background .15s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.haze-Carousel__navBtn:hover{background:var(--haze-color-bg-subtle)}.haze-Carousel__navBtn:focus-visible{box-shadow:var(--haze-shadow-md),0 0 0 3px var(--haze-color-focus-ring);outline:none}.haze-Carousel__prevBtn{left:var(--haze-space-2)}.haze-Carousel__nextBtn{right:var(--haze-space-2)}.haze-Carousel__indicators{justify-content:center;gap:var(--haze-space-1);padding:var(--haze-space-2) 0;display:flex}.haze-Carousel__dot{border-radius:var(--haze-radius-full);background:var(--haze-color-bg-muted);cursor:pointer;border:none;width:.625rem;height:.625rem;padding:.375rem;transition:background .15s}.haze-Carousel__dotActive{background:var(--haze-color-primary)}
 .haze-CarouselSlide__slide{scroll-snap-snap-align:start;scroll-snap-align:start;flex:0 0 100%;min-width:0}

package/dist/index.js

@@ -3,141 +3,142 @@ import { spacing as n } from "./tokens/spacing.js";
 import { typography as r } from "./tokens/typography.js";
 import { COMPONENT_TOKENS as i, TOKEN_REGISTRY as a } from "./tokens/registry.js";
 import o from "./components/Button/Button.js";
-import s from "./components/Input/InputCore.js";
-import c from "./components/Input/Input.js";
-import l from "./components/Select/SelectCore.js";
-import u from "./components/Select/Select.js";
-import d from "./components/Select/Option.js";
-import f from "./components/Checkbox/CheckboxCore.js";
-import p from "./components/Checkbox/Checkbox.js";
-import m from "./components/Switch/SwitchCore.js";
-import h from "./components/Switch/Switch.js";
-import g from "./components/Badge/Badge.js";
-import _ from "./components/Dialog/Dialog.js";
-import v from "./components/Tooltip/Tooltip.js";
-import y from "./components/Popover/Popover.js";
-import b from "./components/Card/Card.js";
-import x from "./components/Radio/Radio.js";
-import S from "./components/Radio/RadioGroupCore.js";
-import C from "./components/Radio/RadioGroup.js";
-import w from "./components/Textarea/TextareaCore.js";
-import T from "./components/Textarea/Textarea.js";
-import E from "./components/Slider/SliderCore.js";
-import D from "./components/Slider/Slider.js";
-import O from "./components/Tabs/Tabs.js";
-import k from "./components/Tabs/TabList.js";
-import A from "./components/Tabs/Tab.js";
-import j from "./components/Tabs/TabPanel.js";
-import M from "./components/Accordion/Accordion.js";
-import N from "./components/Accordion/AccordionItem.js";
-import P from "./components/Alert/Alert.js";
-import F from "./components/Avatar/Avatar.js";
-import I from "./components/Tag/Tag.js";
-import L from "./components/Skeleton/Skeleton.js";
-import R from "./components/Icon/Icon.js";
-import z from "./components/Image/Image.js";
-import B from "./components/Flex/Flex.js";
-import V from "./components/Breadcrumb/Breadcrumb.js";
-import H from "./components/Breadcrumb/BreadcrumbItem.js";
-import U from "./components/Disclosure/Disclosure.js";
-import W from "./components/Menu/Menu.js";
-import G from "./components/Menu/MenuItem.js";
-import K from "./components/Menu/MenuDivider.js";
-import q from "./components/NumberInput/NumberInputCore.js";
-import J from "./components/NumberInput/NumberInput.js";
-import Y from "./components/FileInput/FileInput.js";
-import X from "./components/Toast/Toast.js";
-import Z from "./components/Toast/ToastContainer.js";
-import Q from "./components/Toast/useToast.js";
-import $ from "./components/List/List.js";
-import ee from "./components/List/ListItem.js";
-import te from "./components/Combobox/Combobox.js";
-import ne from "./components/Table/Table.js";
-import re from "./components/Table/TableHead.js";
-import ie from "./components/Table/TableBody.js";
-import ae from "./components/Table/TableRow.js";
-import oe from "./components/Table/TableCell.js";
-import se from "./components/Carousel/Carousel.js";
-import ce from "./components/Carousel/CarouselSlide.js";
-import le from "./components/Datepicker/DatepickerCore.js";
-import ue from "./components/Datepicker/Datepicker.js";
-import de from "./components/Tree/Tree.js";
-import fe from "./components/Divider/Divider.js";
-import pe from "./components/Spinner/Spinner.js";
-import me from "./components/Empty/Empty.js";
-import he from "./components/Progress/Progress.js";
-import ge from "./components/Pagination/Pagination.js";
-import _e from "./components/Grid/Grid.js";
-import ve from "./components/Grid/GridItem.js";
-import ye from "./components/Drawer/Drawer.js";
-import be from "./components/Stepper/Stepper.js";
-import xe from "./components/Stepper/Step.js";
-import Se, { CommandInput as Ce, CommandItem as we, CommandList as Te } from "./components/Command/Command.js";
-import { ResizableGroup as Ee, ResizableHandle as De, ResizablePanel as Oe } from "./components/Resizable/Resizable.js";
-import { Collapsible as ke, CollapsibleContent as Ae, CollapsibleTrigger as je } from "./components/Collapsible/Collapsible.js";
-import Me from "./components/Transfer/Transfer.js";
-import Ne from "./components/Upload/Upload.js";
-import Pe from "./components/ColorPicker/ColorPickerCore.js";
-import Fe from "./components/ColorPicker/ColorPicker.js";
-import Ie from "./components/Rating/RatingCore.js";
-import Le from "./components/Rating/Rating.js";
-import { Timeline as Re, TimelineItem as ze } from "./components/Timeline/Timeline.js";
-import { Paragraph as Be, Text as Ve, Title as He } from "./components/Typography/Typography.js";
-import { Stat as Ue, StatGroup as We } from "./components/Stat/Stat.js";
-import Ge from "./components/Segmented/SegmentedCore.js";
-import Ke from "./components/Segmented/Segmented.js";
-import qe from "./components/Chip/Chip.js";
-import Je from "./components/ScrollArea/ScrollArea.js";
-import Ye from "./components/TimePicker/TimePickerCore.js";
-import Xe from "./components/TimePicker/TimePicker.js";
-import Ze from "./components/DateRangePicker/DateRangePickerCore.js";
-import Qe from "./components/DateRangePicker/DateRangePicker.js";
-import $e from "./components/OTPInput/OTPInputCore.js";
-import et from "./components/OTPInput/OTPInput.js";
-import tt from "./components/PasswordInput/PasswordInputCore.js";
-import nt from "./components/PasswordInput/PasswordInput.js";
-import rt from "./components/TagInput/TagInputCore.js";
-import it from "./components/TagInput/TagInput.js";
-import at from "./components/InlineEdit/InlineEdit.js";
-import ot from "./components/DropdownMenu/DropdownMenu.js";
-import st from "./components/DropdownMenu/DropdownMenuTrigger.js";
-import ct from "./components/DropdownMenu/DropdownMenuContent.js";
-import lt from "./components/DropdownMenu/DropdownMenuItem.js";
-import ut from "./components/DropdownMenu/DropdownMenuSeparator.js";
-import dt from "./components/ContextMenu/ContextMenu.js";
-import ft from "./components/ContextMenu/ContextMenuTrigger.js";
-import pt from "./components/ContextMenu/ContextMenuContent.js";
-import mt from "./components/ContextMenu/ContextMenuItem.js";
-import ht from "./components/ContextMenu/ContextMenuSeparator.js";
-import gt from "./components/NavigationBar/NavigationBar.js";
-import _t from "./components/NavigationBar/NavLink.js";
-import vt from "./components/BackToTop/BackToTop.js";
-import yt from "./components/Affix/Affix.js";
-import bt from "./components/Container/Container.js";
-import xt from "./components/Banner/Banner.js";
-import St from "./components/ConfirmDialog/ConfirmDialog.js";
-import Ct from "./components/CodeBlock/CodeBlock.js";
-import wt from "./components/AspectRatio/AspectRatio.js";
-import Tt from "./components/VirtualList/VirtualList.js";
-import Et from "./components/TagGroup/TagGroup.js";
-import Dt from "./components/TagGroup/TagGroupItem.js";
-import Ot from "./components/BottomSheet/BottomSheet.js";
-import kt from "./components/SwipeAction/SwipeAction.js";
-import At from "./components/ChatMessage/ChatMessage.js";
-import jt from "./components/ChatContainer/ChatContainer.js";
-import Mt from "./components/ChatInput/ChatInput.js";
-import Nt from "./components/StreamingText/StreamingText.js";
-import Pt from "./components/MarkdownRenderer/MarkdownRenderer.js";
-import Ft from "./components/ToolCallCard/ToolCallCard.js";
-import It from "./components/ThinkingIndicator/ThinkingIndicator.js";
-import Lt, { StepTimelineItem as Rt } from "./components/StepTimeline/StepTimeline.js";
-import zt from "./components/ApprovalCard/ApprovalCard.js";
-import Bt from "./components/TokenCounter/TokenCounter.js";
-import Vt from "./components/ModelPicker/ModelPicker.js";
-import Ht from "./components/ConversationList/ConversationList.js";
-import Ut from "./components/ConversationList/ConversationItem.js";
-import Wt from "./components/DiffViewer/DiffViewer.js";
-import Gt from "./components/LogViewer/LogViewer.js";
-import Kt from "./form/FormItem.js";
-import { useControl as qt } from "react-use-control";
-export { M as Accordion, N as AccordionItem, yt as Affix, P as Alert, zt as ApprovalCard, wt as AspectRatio, F as Avatar, vt as BackToTop, g as Badge, xt as Banner, Ot as BottomSheet, V as Breadcrumb, H as BreadcrumbItem, o as Button, i as COMPONENT_TOKENS, b as Card, se as Carousel, ce as CarouselSlide, jt as ChatContainer, Mt as ChatInput, At as ChatMessage, p as Checkbox, f as CheckboxCore, qe as Chip, Ct as CodeBlock, ke as Collapsible, Ae as CollapsibleContent, je as CollapsibleTrigger, Fe as ColorPicker, Pe as ColorPickerCore, te as Combobox, Se as Command, Ce as CommandInput, we as CommandItem, Te as CommandList, St as ConfirmDialog, bt as Container, dt as ContextMenu, pt as ContextMenuContent, mt as ContextMenuItem, ht as ContextMenuSeparator, ft as ContextMenuTrigger, Ut as ConversationItem, Ht as ConversationList, Qe as DateRangePicker, Ze as DateRangePickerCore, ue as Datepicker, le as DatepickerCore, _ as Dialog, Wt as DiffViewer, U as Disclosure, fe as Divider, ye as Drawer, ot as DropdownMenu, ct as DropdownMenuContent, lt as DropdownMenuItem, ut as DropdownMenuSeparator, st as DropdownMenuTrigger, me as Empty, Y as FileInput, B as Flex, Kt as FormItem, _e as Grid, ve as GridItem, R as Icon, z as Image, at as InlineEdit, c as Input, s as InputCore, $ as List, ee as ListItem, Gt as LogViewer, Pt as MarkdownRenderer, W as Menu, K as MenuDivider, G as MenuItem, Vt as ModelPicker, _t as NavLink, gt as NavigationBar, J as NumberInput, q as NumberInputCore, et as OTPInput, $e as OTPInputCore, d as Option, ge as Pagination, Be as Paragraph, nt as PasswordInput, tt as PasswordInputCore, y as Popover, he as Progress, x as Radio, C as RadioGroup, S as RadioGroupCore, Le as Rating, Ie as RatingCore, Ee as ResizableGroup, De as ResizableHandle, Oe as ResizablePanel, Je as ScrollArea, Ke as Segmented, Ge as SegmentedCore, u as Select, l as SelectCore, L as Skeleton, D as Slider, E as SliderCore, pe as Spinner, Ue as Stat, We as StatGroup, xe as Step, Lt as StepTimeline, Rt as StepTimelineItem, be as Stepper, Nt as StreamingText, kt as SwipeAction, h as Switch, m as SwitchCore, a as TOKEN_REGISTRY, A as Tab, k as TabList, j as TabPanel, ne as Table, ie as TableBody, oe as TableCell, re as TableHead, ae as TableRow, O as Tabs, I as Tag, Et as TagGroup, Dt as TagGroupItem, it as TagInput, rt as TagInputCore, Ve as Text, T as Textarea, w as TextareaCore, It as ThinkingIndicator, Xe as TimePicker, Ye as TimePickerCore, Re as Timeline, ze as TimelineItem, He as Title, X as Toast, Z as ToastContainer, Bt as TokenCounter, Ft as ToolCallCard, v as Tooltip, Me as Transfer, de as Tree, Ne as Upload, Tt as VirtualList, e as darkTheme, t as lightTheme, n as spacing, r as typography, qt as useControl, Q as useToast };
+import s from "./components/Button/ButtonLink.js";
+import c from "./components/Input/InputCore.js";
+import l from "./components/Input/Input.js";
+import u from "./components/Select/SelectCore.js";
+import d from "./components/Select/Select.js";
+import f from "./components/Select/Option.js";
+import p from "./components/Checkbox/CheckboxCore.js";
+import m from "./components/Checkbox/Checkbox.js";
+import h from "./components/Switch/SwitchCore.js";
+import g from "./components/Switch/Switch.js";
+import _ from "./components/Badge/Badge.js";
+import v from "./components/Dialog/Dialog.js";
+import y from "./components/Tooltip/Tooltip.js";
+import b from "./components/Popover/Popover.js";
+import x from "./components/Card/Card.js";
+import S from "./components/Radio/Radio.js";
+import C from "./components/Radio/RadioGroupCore.js";
+import w from "./components/Radio/RadioGroup.js";
+import T from "./components/Textarea/TextareaCore.js";
+import E from "./components/Textarea/Textarea.js";
+import D from "./components/Slider/SliderCore.js";
+import O from "./components/Slider/Slider.js";
+import k from "./components/Tabs/Tabs.js";
+import A from "./components/Tabs/TabList.js";
+import j from "./components/Tabs/Tab.js";
+import M from "./components/Tabs/TabPanel.js";
+import N from "./components/Accordion/Accordion.js";
+import P from "./components/Accordion/AccordionItem.js";
+import F from "./components/Alert/Alert.js";
+import I from "./components/Avatar/Avatar.js";
+import L from "./components/Tag/Tag.js";
+import R from "./components/Skeleton/Skeleton.js";
+import z from "./components/Icon/Icon.js";
+import B from "./components/Image/Image.js";
+import V from "./components/Flex/Flex.js";
+import H from "./components/Breadcrumb/Breadcrumb.js";
+import U from "./components/Breadcrumb/BreadcrumbItem.js";
+import W from "./components/Disclosure/Disclosure.js";
+import G from "./components/Menu/Menu.js";
+import K from "./components/Menu/MenuItem.js";
+import q from "./components/Menu/MenuDivider.js";
+import J from "./components/NumberInput/NumberInputCore.js";
+import Y from "./components/NumberInput/NumberInput.js";
+import X from "./components/FileInput/FileInput.js";
+import Z from "./components/Toast/Toast.js";
+import Q from "./components/Toast/ToastContainer.js";
+import $ from "./components/Toast/useToast.js";
+import ee from "./components/List/List.js";
+import te from "./components/List/ListItem.js";
+import ne from "./components/Combobox/Combobox.js";
+import re from "./components/Table/Table.js";
+import ie from "./components/Table/TableHead.js";
+import ae from "./components/Table/TableBody.js";
+import oe from "./components/Table/TableRow.js";
+import se from "./components/Table/TableCell.js";
+import ce from "./components/Carousel/Carousel.js";
+import le from "./components/Carousel/CarouselSlide.js";
+import ue from "./components/Datepicker/DatepickerCore.js";
+import de from "./components/Datepicker/Datepicker.js";
+import fe from "./components/Tree/Tree.js";
+import pe from "./components/Divider/Divider.js";
+import me from "./components/Spinner/Spinner.js";
+import he from "./components/Empty/Empty.js";
+import ge from "./components/Progress/Progress.js";
+import _e from "./components/Pagination/Pagination.js";
+import ve from "./components/Grid/Grid.js";
+import ye from "./components/Grid/GridItem.js";
+import be from "./components/Drawer/Drawer.js";
+import xe from "./components/Stepper/Stepper.js";
+import Se from "./components/Stepper/Step.js";
+import Ce, { CommandInput as we, CommandItem as Te, CommandList as Ee } from "./components/Command/Command.js";
+import { ResizableGroup as De, ResizableHandle as Oe, ResizablePanel as ke } from "./components/Resizable/Resizable.js";
+import { Collapsible as Ae, CollapsibleContent as je, CollapsibleTrigger as Me } from "./components/Collapsible/Collapsible.js";
+import Ne from "./components/Transfer/Transfer.js";
+import Pe from "./components/Upload/Upload.js";
+import Fe from "./components/ColorPicker/ColorPickerCore.js";
+import Ie from "./components/ColorPicker/ColorPicker.js";
+import Le from "./components/Rating/RatingCore.js";
+import Re from "./components/Rating/Rating.js";
+import { Timeline as ze, TimelineItem as Be } from "./components/Timeline/Timeline.js";
+import { Paragraph as Ve, Text as He, Title as Ue } from "./components/Typography/Typography.js";
+import { Stat as We, StatGroup as Ge } from "./components/Stat/Stat.js";
+import Ke from "./components/Segmented/SegmentedCore.js";
+import qe from "./components/Segmented/Segmented.js";
+import Je from "./components/Chip/Chip.js";
+import Ye from "./components/ScrollArea/ScrollArea.js";
+import Xe from "./components/TimePicker/TimePickerCore.js";
+import Ze from "./components/TimePicker/TimePicker.js";
+import Qe from "./components/DateRangePicker/DateRangePickerCore.js";
+import $e from "./components/DateRangePicker/DateRangePicker.js";
+import et from "./components/OTPInput/OTPInputCore.js";
+import tt from "./components/OTPInput/OTPInput.js";
+import nt from "./components/PasswordInput/PasswordInputCore.js";
+import rt from "./components/PasswordInput/PasswordInput.js";
+import it from "./components/TagInput/TagInputCore.js";
+import at from "./components/TagInput/TagInput.js";
+import ot from "./components/InlineEdit/InlineEdit.js";
+import st from "./components/DropdownMenu/DropdownMenu.js";
+import ct from "./components/DropdownMenu/DropdownMenuTrigger.js";
+import lt from "./components/DropdownMenu/DropdownMenuContent.js";
+import ut from "./components/DropdownMenu/DropdownMenuItem.js";
+import dt from "./components/DropdownMenu/DropdownMenuSeparator.js";
+import ft from "./components/ContextMenu/ContextMenu.js";
+import pt from "./components/ContextMenu/ContextMenuTrigger.js";
+import mt from "./components/ContextMenu/ContextMenuContent.js";
+import ht from "./components/ContextMenu/ContextMenuItem.js";
+import gt from "./components/ContextMenu/ContextMenuSeparator.js";
+import _t from "./components/NavigationBar/NavigationBar.js";
+import vt from "./components/NavigationBar/NavLink.js";
+import yt from "./components/BackToTop/BackToTop.js";
+import bt from "./components/Affix/Affix.js";
+import xt from "./components/Container/Container.js";
+import St from "./components/Banner/Banner.js";
+import Ct from "./components/ConfirmDialog/ConfirmDialog.js";
+import wt from "./components/CodeBlock/CodeBlock.js";
+import Tt from "./components/AspectRatio/AspectRatio.js";
+import Et from "./components/VirtualList/VirtualList.js";
+import Dt from "./components/TagGroup/TagGroup.js";
+import Ot from "./components/TagGroup/TagGroupItem.js";
+import kt from "./components/BottomSheet/BottomSheet.js";
+import At from "./components/SwipeAction/SwipeAction.js";
+import jt from "./components/ChatMessage/ChatMessage.js";
+import Mt from "./components/ChatContainer/ChatContainer.js";
+import Nt from "./components/ChatInput/ChatInput.js";
+import Pt from "./components/StreamingText/StreamingText.js";
+import Ft from "./components/MarkdownRenderer/MarkdownRenderer.js";
+import It from "./components/ToolCallCard/ToolCallCard.js";
+import Lt from "./components/ThinkingIndicator/ThinkingIndicator.js";
+import Rt, { StepTimelineItem as zt } from "./components/StepTimeline/StepTimeline.js";
+import Bt from "./components/ApprovalCard/ApprovalCard.js";
+import Vt from "./components/TokenCounter/TokenCounter.js";
+import Ht from "./components/ModelPicker/ModelPicker.js";
+import Ut from "./components/ConversationList/ConversationList.js";
+import Wt from "./components/ConversationList/ConversationItem.js";
+import Gt from "./components/DiffViewer/DiffViewer.js";
+import Kt from "./components/LogViewer/LogViewer.js";
+import qt from "./form/FormItem.js";
+import { useControl as Jt } from "react-use-control";
+export { N as Accordion, P as AccordionItem, bt as Affix, F as Alert, Bt as ApprovalCard, Tt as AspectRatio, I as Avatar, yt as BackToTop, _ as Badge, St as Banner, kt as BottomSheet, H as Breadcrumb, U as BreadcrumbItem, o as Button, s as ButtonLink, i as COMPONENT_TOKENS, x as Card, ce as Carousel, le as CarouselSlide, Mt as ChatContainer, Nt as ChatInput, jt as ChatMessage, m as Checkbox, p as CheckboxCore, Je as Chip, wt as CodeBlock, Ae as Collapsible, je as CollapsibleContent, Me as CollapsibleTrigger, Ie as ColorPicker, Fe as ColorPickerCore, ne as Combobox, Ce as Command, we as CommandInput, Te as CommandItem, Ee as CommandList, Ct as ConfirmDialog, xt as Container, ft as ContextMenu, mt as ContextMenuContent, ht as ContextMenuItem, gt as ContextMenuSeparator, pt as ContextMenuTrigger, Wt as ConversationItem, Ut as ConversationList, $e as DateRangePicker, Qe as DateRangePickerCore, de as Datepicker, ue as DatepickerCore, v as Dialog, Gt as DiffViewer, W as Disclosure, pe as Divider, be as Drawer, st as DropdownMenu, lt as DropdownMenuContent, ut as DropdownMenuItem, dt as DropdownMenuSeparator, ct as DropdownMenuTrigger, he as Empty, X as FileInput, V as Flex, qt as FormItem, ve as Grid, ye as GridItem, z as Icon, B as Image, ot as InlineEdit, l as Input, c as InputCore, ee as List, te as ListItem, Kt as LogViewer, Ft as MarkdownRenderer, G as Menu, q as MenuDivider, K as MenuItem, Ht as ModelPicker, vt as NavLink, _t as NavigationBar, Y as NumberInput, J as NumberInputCore, tt as OTPInput, et as OTPInputCore, f as Option, _e as Pagination, Ve as Paragraph, rt as PasswordInput, nt as PasswordInputCore, b as Popover, ge as Progress, S as Radio, w as RadioGroup, C as RadioGroupCore, Re as Rating, Le as RatingCore, De as ResizableGroup, Oe as ResizableHandle, ke as ResizablePanel, Ye as ScrollArea, qe as Segmented, Ke as SegmentedCore, d as Select, u as SelectCore, R as Skeleton, O as Slider, D as SliderCore, me as Spinner, We as Stat, Ge as StatGroup, Se as Step, Rt as StepTimeline, zt as StepTimelineItem, xe as Stepper, Pt as StreamingText, At as SwipeAction, g as Switch, h as SwitchCore, a as TOKEN_REGISTRY, j as Tab, A as TabList, M as TabPanel, re as Table, ae as TableBody, se as TableCell, ie as TableHead, oe as TableRow, k as Tabs, L as Tag, Dt as TagGroup, Ot as TagGroupItem, at as TagInput, it as TagInputCore, He as Text, E as Textarea, T as TextareaCore, Lt as ThinkingIndicator, Ze as TimePicker, Xe as TimePickerCore, ze as Timeline, Be as TimelineItem, Ue as Title, Z as Toast, Q as ToastContainer, Vt as TokenCounter, It as ToolCallCard, y as Tooltip, Ne as Transfer, fe as Tree, Pe as Upload, Et as VirtualList, e as darkTheme, t as lightTheme, n as spacing, r as typography, Jt as useControl, $ as useToast };

package/dist/types/components/Button/ButtonLink.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentPropsWithoutRef } from 'react';
+/**
+ * A real `<a>` with the full Button appearance — for navigation that
+ * must look like a button. Rendering `as={Button}` puts `href` on a
+ * `<button>` (an invalid attribute: no ⌘/middle-click, no crawlable
+ * link); ButtonLink keeps the anchor semantics and wears Button's skin
+ * (same `variant`/`size`/`square` props, same focus/disabled visual
+ * states).
+ *
+ * Extends the native `<a>` attributes — everything not listed below is
+ * spread onto the anchor, so routers composing their own `Link` through
+ * an `as` prop can inject `href`, `onClick`, `target`, `rel` and
+ * friends (NavLink-style).
+ *
+ * Anchors have no `disabled` attribute: report the state with
+ * `aria-disabled` (and `tabIndex={-1}` to drop it from the focus
+ * order) — ButtonLink styles `aria-disabled` exactly like Button's
+ * `:disabled`.
+ */
+type ButtonLinkProps = {
+    variant?: 'solid' | 'outline' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    square?: boolean;
+} & ComponentPropsWithoutRef<'a'>;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    variant?: "solid" | "outline" | "ghost";
+    size?: "sm" | "md" | "lg";
+    square?: boolean;
+} & Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export default _default;
+export type { ButtonLinkProps };

package/dist/types/components/Button/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Button } from './Button';
 export type { ButtonProps } from './Button';
+export { default as ButtonLink } from './ButtonLink';
+export type { ButtonLinkProps } from './ButtonLink';

package/dist/types/components/Button/styles.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Shared Button skin — the base, variant and size classes `Button` and
+ * `ButtonLink` both wear. Living in their own module keeps the two
+ * components' visual contract in one place (one edit re-skins both) and
+ * keeps component files free of style internals; split-css groups the
+ * emitted CSS into `haze-ui/css/button.css` with them.
+ */
+export declare const base: import("@linaria/core").LinariaClassName;
+export declare const variants: {
+    readonly solid: import("@linaria/core").LinariaClassName;
+    readonly outline: import("@linaria/core").LinariaClassName;
+    readonly ghost: import("@linaria/core").LinariaClassName;
+};
+export declare const sizeSm: import("@linaria/core").LinariaClassName;
+export declare const sizeMd: import("@linaria/core").LinariaClassName;
+export declare const sizeLg: import("@linaria/core").LinariaClassName;
+export declare const squareSm: import("@linaria/core").LinariaClassName;
+export declare const squareMd: import("@linaria/core").LinariaClassName;
+export declare const squareLg: import("@linaria/core").LinariaClassName;
+export declare const sizes: {
+    readonly sm: import("@linaria/core").LinariaClassName;
+    readonly md: import("@linaria/core").LinariaClassName;
+    readonly lg: import("@linaria/core").LinariaClassName;
+};
+export declare const squareSizes: {
+    readonly sm: import("@linaria/core").LinariaClassName;
+    readonly md: import("@linaria/core").LinariaClassName;
+    readonly lg: import("@linaria/core").LinariaClassName;
+};

package/dist/types/index.d.ts

@@ -3,8 +3,8 @@ export { spacing } from './tokens/spacing';
 export { typography } from './tokens/typography';
 export { TOKEN_REGISTRY, COMPONENT_TOKENS } from './tokens/registry';
 export type { TokenDef } from './tokens/registry';
-export { Button } from './components/Button';
-export type { ButtonProps } from './components/Button';
+export { Button, ButtonLink } from './components/Button';
+export type { ButtonProps, ButtonLinkProps } from './components/Button';
 export { Input, InputCore } from './components/Input';
 export type { InputProps, InputCoreProps } from './components/Input';
 export { Select, Option, SelectCore } from './components/Select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",