haze-ui 1.14.0 → 1.16.0

package/dist/form/FormItem.js

@@ -6,8 +6,8 @@ import { useId as r } from "react";
 import { useField as i } from "react-f0rm";
 //#region src/lib/form/FormItem.tsx
 var a = "haze-FormItem__item", o = "haze-FormItem__labelText", s = "haze-FormItem__errorText";
-function c({ form: c, name: l, label: u, validate: d, mode: f, validateDebounce: p, delayError: m, rules: h, className: g, renderError: _, as: v, asProps: y, eventToValue: b, valueToProps: x, children: S }) {
-	let C = `haze-field-${r()}`, w = `${C}-error`, { value: T, onChange: E, onBlur: D, errors: O } = i({
+function c({ form: c, name: l, label: u, validate: d, mode: f, validateDebounce: p, delayError: m, rules: h, className: g, renderError: _, as: v, asProps: y, input: b, eventToValue: x, valueToProps: S, children: C, ...w }) {
+	let T = `haze-field-${r()}`, E = `${T}-error`, { value: D, onChange: O, onBlur: k, errors: A } = i({
 		form: c,
 		name: l,
 		validate: d,
@@ -15,37 +15,48 @@ function c({ form: c, name: l, label: u, validate: d, mode: f, validateDebounce:
 		validateDebounce: p,
 		delayError: m,
 		rules: h
-	}), k = O.length > 0, A = b ?? ((e) => e);
+	}), j = A.length > 0, M = x ?? ((e) => e);
+	if (b && typeof C == "function") throw Error("FormItem: `input` and the render-prop `children` are mutually exclusive — the input component is wired declaratively; remove the render-prop.");
+	let N = b;
 	return /* @__PURE__ */ n("div", {
 		className: e([a, g]),
 		children: [
 			u !== void 0 && /* @__PURE__ */ t("label", {
-				htmlFor: C,
+				htmlFor: T,
 				className: e(o),
 				children: u
 			}),
-			v ? /* @__PURE__ */ t(v, {
-				id: C,
-				"aria-invalid": k || void 0,
-				"aria-describedby": k ? w : void 0,
-				onBlur: D,
-				onChange: (e) => E(A(e)),
+			N ? /* @__PURE__ */ t(N, {
+				...w,
+				id: T,
+				"aria-invalid": j || void 0,
+				"aria-describedby": j ? E : void 0,
+				onBlur: k,
+				onChange: (e) => O(M(e)),
+				...S ? S(D) : { value: D },
+				children: C
+			}) : v ? /* @__PURE__ */ t(v, {
+				id: T,
+				"aria-invalid": j || void 0,
+				"aria-describedby": j ? E : void 0,
+				onBlur: k,
+				onChange: (e) => O(M(e)),
 				...y,
-				...x ? x(T) : { value: T }
-			}) : S({
-				id: C,
-				errorId: w,
-				invalid: k,
-				errors: O,
-				onBlur: D,
-				value: T,
-				onChange: E
+				...S ? S(D) : { value: D }
+			}) : C({
+				id: T,
+				errorId: E,
+				invalid: j,
+				errors: A,
+				onBlur: k,
+				value: D,
+				onChange: O
 			}),
-			k && /* @__PURE__ */ t("span", {
-				id: w,
+			j && /* @__PURE__ */ t("span", {
+				id: E,
 				role: "alert",
 				className: e(s),
-				children: _ ? _(O[0].message, w) : O[0].message
+				children: _ ? _(A[0].message, E) : A[0].message
 			})
 		]
 	});

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/form/FormItem.d.ts

@@ -62,7 +62,10 @@ export type FormItemAsProps = {
      * passing `{value}`. */
     valueToProps?: (value: any) => Record<string, any>;
 };
-export type FormItemProps<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name> = {
+/** FormItem's own, non-polymorphic props — everything the item itself
+ * consumes regardless of how the control is bound (render-prop, `as`
+ * or `input`). */
+export type FormItemOwnProps<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name> = {
     form: FormInstance<TValues>;
     name: P;
     label?: ReactNode;
@@ -95,14 +98,56 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
     /** Custom error renderer: when provided and the field has errors, the
      * built-in error span renders `renderError(errors[0].message, errorId)`
      * instead of the bare message. The span itself — id, `role='alert'`,
-     * styling — stays FormItem's, in both the `as` and children modes. */
+     * styling — stays FormItem's, in every control-binding mode. */
     renderError?: (error: string, id: string) => ReactNode;
     className?: string;
-} & FormItemAsProps & ({
+};
+/**
+ * Props FormItem wires itself onto an `input`/`as` control — the bridge's
+ * own contract. Used to keep them out of `input`'s forwarded rest props
+ * (type level) and to document that they always win (runtime level):
+ * passing one anyway is a compile error, never a silent override.
+ */
+type FormItemWiredProps = {
+    id?: unknown;
+    onBlur?: unknown;
+    onChange?: unknown;
+    /** the value channel: `value` directly, or the prop `valueToProps`
+     * derives (e.g. `checked` for CheckboxCore) — either way FormItem's */
+    value?: unknown;
+    checked?: unknown;
+    'aria-invalid'?: unknown;
+    'aria-describedby'?: unknown;
+};
+export type FormItemProps<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name, TInputProps extends Record<string, any> = Record<never, never>> = FormItemOwnProps<TValues, P> & FormItemAsProps & {
+    /**
+     * Declarative binding for haze-ui cores: pass the component
+     * (`InputCore`, `TextareaCore`, `TagInputCore`, `SelectCore`,
+     * `CheckboxCore`, …) and FormItem wires `id`, `aria-invalid`,
+     * `aria-describedby`, `onBlur`, `onChange` and the value channel
+     * itself. Every other prop — and JSX children (a `SelectCore`'s
+     * `<option>`s) — is forwarded to the component, fully type-checked
+     * against its own props. Cores' `onChange` emits the next plain value
+     * (identity `eventToValue`); checkbox-style controls pair with
+     * `valueToProps={(checked) => ({checked})}`. Props FormItem owns or
+     * wires (label, className, id, aria-*, onBlur, onChange, value,
+     * checked, …) are reserved and cannot be forwarded — use the
+     * render-prop or `as`/`asProps` for a colliding control prop.
+     */
+    input?: ComponentType<TInputProps>;
+} & Omit<TInputProps, keyof FormItemOwnProps<TValues, P> | keyof FormItemAsProps | keyof FormItemWiredProps | 'input'> & ({
     as: ComponentType<any>;
+    input?: never;
     children?: never;
 } | {
     as?: undefined;
+    input: ComponentType<TInputProps>;
+    /** JSX children forward to the control (SelectCore's options);
+     * the render-prop form is mutually exclusive with `input`. */
+    children?: 'children' extends keyof TInputProps ? TInputProps['children'] : undefined;
+} | {
+    as?: undefined;
+    input?: undefined;
     children: (binding: FormItemBinding<TValues, P>) => ReactNode;
 });
 /**
@@ -141,8 +186,29 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
  * value lands as `{value}` or, with `valueToProps`, whatever props the
  * control wants (e.g. `{checked}` for CheckboxCore).
  *
+ * The ergonomic form for haze-ui cores is `input`: the rest of the JSX
+ * props — and JSX children, e.g. a `SelectCore`'s `<option>`s — are
+ * forwarded to the component, type-checked against its own props
+ * (`input` and the render-prop children are mutually exclusive):
+ *
+ * ```tsx
+ * <FormItem
+ *   form={form}
+ *   name='email'
+ *   input={InputCore}
+ *   placeholder='Email'
+ *   mode='onBlur'
+ * />
+ * ```
+ *
+ * The same wiring as `as` applies (id, aria, onBlur, onChange, value);
+ * wired and FormItem-owned prop names are reserved — a control prop that
+ * collides (CheckboxCore's `label`) needs the render-prop or
+ * `as`/`asProps` channel.
+ *
  * When the field has errors, the first error's message is rendered into a
  * `<span id={errorId} role='alert'>` next to the control; with no errors
  * no extra element is rendered.
  */
-export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, validateDebounce, delayError, rules, className, renderError, as: As, asProps, eventToValue, valueToProps, children }: FormItemProps<TValues, P>): import("react").JSX.Element;
+export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name, TInputProps extends Record<string, any> = Record<never, never>>({ form, name, label, validate, mode, validateDebounce, delayError, rules, className, renderError, as: As, asProps, input: Input, eventToValue, valueToProps, children, ...inputProps }: FormItemProps<TValues, P, TInputProps>): import("react").JSX.Element;
+export {};

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

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

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';
@@ -182,6 +182,6 @@ export type { DiffViewerProps, DiffLine } from './components/DiffViewer';
 export { LogViewer } from './components/LogViewer';
 export type { LogViewerProps, LogEntry, LogLevel } from './components/LogViewer';
 export { FormItem } from './form';
-export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemProps, FormInstance, PathValueOf, } from './form';
+export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemOwnProps, FormItemProps, FormInstance, PathValueOf, } from './form';
 export { useControl } from 'react-use-control';
 export type { Control, ControlOrValue } from 'react-use-control';

package/package.json

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