haze-ui 1.18.2 → 1.19.0

package/dist/components/Accordion/index.js

@@ -0,0 +1,3 @@
+import e from "./Accordion.js";
+import t from "./AccordionItem.js";
+export { e as Accordion, t as AccordionItem };

package/dist/components/Affix/index.js

@@ -0,0 +1,2 @@
+import e from "./Affix.js";
+export { e as Affix };

package/dist/components/Alert/index.js

@@ -0,0 +1,2 @@
+import e from "./Alert.js";
+export { e as Alert };

package/dist/components/ApprovalCard/index.js

@@ -0,0 +1,2 @@
+import e from "./ApprovalCard.js";
+export { e as ApprovalCard };

package/dist/components/AspectRatio/index.js

@@ -0,0 +1,2 @@
+import e from "./AspectRatio.js";
+export { e as AspectRatio };

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+import e from "./Avatar.js";
+export { e as Avatar };

package/dist/components/BackToTop/index.js

@@ -0,0 +1,2 @@
+import e from "./BackToTop.js";
+export { e as BackToTop };

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+import e from "./Badge.js";
+export { e as Badge };

package/dist/components/Banner/index.js

@@ -0,0 +1,2 @@
+import e from "./Banner.js";
+export { e as Banner };

package/dist/components/BottomSheet/index.js

@@ -0,0 +1,2 @@
+import e from "./BottomSheet.js";
+export { e as BottomSheet };

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,3 @@
+import e from "./Breadcrumb.js";
+import t from "./BreadcrumbItem.js";
+export { e as Breadcrumb, t as BreadcrumbItem };

package/dist/components/Button/index.js

@@ -0,0 +1,3 @@
+import e from "./Button.js";
+import t from "./ButtonLink.js";
+export { e as Button, t as ButtonLink };

package/dist/components/Card/index.js

@@ -0,0 +1,2 @@
+import e from "./Card.js";
+export { e as Card };

package/dist/components/Carousel/index.js

@@ -0,0 +1,3 @@
+import e from "./Carousel.js";
+import t from "./CarouselSlide.js";
+export { e as Carousel, t as CarouselSlide };

package/dist/components/ChatContainer/index.js

@@ -0,0 +1,2 @@
+import e from "./ChatContainer.js";
+export { e as ChatContainer };

package/dist/components/ChatInput/index.js

@@ -0,0 +1,2 @@
+import e from "./ChatInput.js";
+export { e as ChatInput };

package/dist/components/ChatMessage/index.js

@@ -0,0 +1,2 @@
+import e from "./ChatMessage.js";
+export { e as ChatMessage };

package/dist/components/Checkbox/index.js

@@ -0,0 +1,3 @@
+import e from "./CheckboxCore.js";
+import t from "./Checkbox.js";
+export { t as Checkbox, e as CheckboxCore };

package/dist/components/Chip/index.js

@@ -0,0 +1,2 @@
+import e from "./Chip.js";
+export { e as Chip };

package/dist/components/CodeBlock/index.js

@@ -0,0 +1,2 @@
+import e from "./CodeBlock.js";
+export { e as CodeBlock };

package/dist/components/Collapsible/index.js

@@ -0,0 +1,2 @@
+import { Collapsible as e, CollapsibleContent as t, CollapsibleTrigger as n } from "./Collapsible.js";
+export { e as Collapsible, t as CollapsibleContent, n as CollapsibleTrigger };

package/dist/components/ColorPicker/index.js

@@ -0,0 +1,3 @@
+import e from "./ColorPickerCore.js";
+import t from "./ColorPicker.js";
+export { t as ColorPicker, e as ColorPickerCore };

package/dist/components/Combobox/index.js

@@ -0,0 +1,3 @@
+import e from "./ComboboxOption.js";
+import t from "./Combobox.js";
+export { t as Combobox, e as ComboboxOption };

package/dist/components/Command/index.js

@@ -0,0 +1,2 @@
+import e, { CommandInput as t, CommandItem as n, CommandList as r } from "./Command.js";
+export { e as Command, t as CommandInput, n as CommandItem, r as CommandList };

package/dist/components/ConfirmDialog/index.js

@@ -0,0 +1,2 @@
+import e from "./ConfirmDialog.js";
+export { e as ConfirmDialog };

package/dist/components/Container/index.js

@@ -0,0 +1,2 @@
+import e from "./Container.js";
+export { e as Container };

package/dist/components/ContextMenu/index.js

@@ -0,0 +1,6 @@
+import e from "./ContextMenu.js";
+import t from "./ContextMenuTrigger.js";
+import n from "./ContextMenuContent.js";
+import r from "./ContextMenuItem.js";
+import i from "./ContextMenuSeparator.js";
+export { e as ContextMenu, n as ContextMenuContent, r as ContextMenuItem, i as ContextMenuSeparator, t as ContextMenuTrigger };

package/dist/components/ConversationList/index.js

@@ -0,0 +1,3 @@
+import e from "./ConversationList.js";
+import t from "./ConversationItem.js";
+export { t as ConversationItem, e as ConversationList };

package/dist/components/DateRangePicker/index.js

@@ -0,0 +1,3 @@
+import e from "./DateRangePickerCore.js";
+import t from "./DateRangePicker.js";
+export { t as DateRangePicker, e as DateRangePickerCore };

package/dist/components/Datepicker/index.js

@@ -0,0 +1,3 @@
+import e from "./DatepickerCore.js";
+import t from "./Datepicker.js";
+export { t as Datepicker, e as DatepickerCore };

package/dist/components/Dialog/index.js

@@ -0,0 +1,2 @@
+import e from "./Dialog.js";
+export { e as Dialog };

package/dist/components/DiffViewer/index.js

@@ -0,0 +1,2 @@
+import e from "./DiffViewer.js";
+export { e as DiffViewer };

package/dist/components/Disclosure/index.js

@@ -0,0 +1,2 @@
+import e from "./Disclosure.js";
+export { e as Disclosure };

package/dist/components/Divider/index.js

@@ -0,0 +1,2 @@
+import e from "./Divider.js";
+export { e as Divider };

package/dist/components/Drawer/index.js

@@ -0,0 +1,2 @@
+import e from "./Drawer.js";
+export { e as Drawer };

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1,6 @@
+import e from "./DropdownMenu.js";
+import t from "./DropdownMenuTrigger.js";
+import n from "./DropdownMenuContent.js";
+import r from "./DropdownMenuItem.js";
+import i from "./DropdownMenuSeparator.js";
+export { e as DropdownMenu, n as DropdownMenuContent, r as DropdownMenuItem, i as DropdownMenuSeparator, t as DropdownMenuTrigger };

package/dist/components/Empty/index.js

@@ -0,0 +1,2 @@
+import e from "./Empty.js";
+export { e as Empty };

package/dist/components/FileInput/index.js

@@ -0,0 +1,2 @@
+import e from "./FileInput.js";
+export { e as FileInput };

package/dist/components/Flex/index.js

@@ -0,0 +1,2 @@
+import e from "./Flex.js";
+export { e as Flex };

package/dist/components/Grid/index.js

@@ -0,0 +1,3 @@
+import e from "./Grid.js";
+import t from "./GridItem.js";
+export { e as Grid, t as GridItem };

package/dist/components/Icon/index.js

@@ -0,0 +1,2 @@
+import e from "./Icon.js";
+export { e as Icon };

package/dist/components/Image/index.js

@@ -0,0 +1,2 @@
+import e from "./Image.js";
+export { e as Image };

package/dist/components/InlineEdit/index.js

@@ -0,0 +1,2 @@
+import e from "./InlineEdit.js";
+export { e as InlineEdit };

package/dist/components/Input/index.js

@@ -0,0 +1,3 @@
+import e from "./InputCore.js";
+import t from "./Input.js";
+export { t as Input, e as InputCore };

package/dist/components/List/index.js

@@ -0,0 +1,3 @@
+import e from "./List.js";
+import t from "./ListItem.js";
+export { e as List, t as ListItem };

package/dist/components/LogViewer/index.js

@@ -0,0 +1,2 @@
+import e from "./LogViewer.js";
+export { e as LogViewer };

package/dist/components/MarkdownRenderer/index.js

@@ -0,0 +1,2 @@
+import e from "./MarkdownRenderer.js";
+export { e as MarkdownRenderer };

package/dist/components/Menu/index.js

@@ -0,0 +1,4 @@
+import e from "./Menu.js";
+import t from "./MenuItem.js";
+import n from "./MenuDivider.js";
+export { e as Menu, n as MenuDivider, t as MenuItem };

package/dist/components/ModelPicker/index.js

@@ -0,0 +1,2 @@
+import e from "./ModelPicker.js";
+export { e as ModelPicker };

package/dist/components/NavigationBar/index.js

@@ -0,0 +1,3 @@
+import e from "./NavigationBar.js";
+import t from "./NavLink.js";
+export { t as NavLink, e as NavigationBar };

package/dist/components/NumberInput/index.js

@@ -0,0 +1,3 @@
+import e from "./NumberInputCore.js";
+import t from "./NumberInput.js";
+export { t as NumberInput, e as NumberInputCore };

package/dist/components/OTPInput/index.js

@@ -0,0 +1,3 @@
+import e from "./OTPInputCore.js";
+import t from "./OTPInput.js";
+export { t as OTPInput, e as OTPInputCore };

package/dist/components/Pagination/index.js

@@ -0,0 +1,2 @@
+import e from "./Pagination.js";
+export { e as Pagination };

package/dist/components/PasswordInput/index.js

@@ -0,0 +1,3 @@
+import e from "./PasswordInputCore.js";
+import t from "./PasswordInput.js";
+export { t as PasswordInput, e as PasswordInputCore };

package/dist/components/Popover/Popover.js

@@ -19,10 +19,15 @@ function l({ content: l, open: u, className: d, children: f }) {
 			ref: g,
 			style: v.triggerStyle,
 			role: "button",
+			tabIndex: 0,
+			"aria-haspopup": "true",
 			"aria-expanded": p,
 			"aria-controls": h,
 			onPointerDown: v.onTriggerPointerDown,
 			onClick: v.onTriggerClick,
+			onKeyDown: (e) => {
+				(e.key === "Enter" || e.key === " ") && (e.preventDefault(), v.onTriggerClick());
+			},
 			children: f
 		}), /* @__PURE__ */ n(e, {
 			ref: _,

package/dist/components/Popover/index.js

@@ -0,0 +1,2 @@
+import e from "./Popover.js";
+export { e as Popover };

package/dist/components/Progress/index.js

@@ -0,0 +1,2 @@
+import e from "./Progress.js";
+export { e as Progress };

package/dist/components/Radio/index.js

@@ -0,0 +1,4 @@
+import e from "./Radio.js";
+import t from "./RadioGroupCore.js";
+import n from "./RadioGroup.js";
+export { e as Radio, n as RadioGroup, t as RadioGroupCore };

package/dist/components/Rating/index.js

@@ -0,0 +1,3 @@
+import e from "./RatingCore.js";
+import t from "./Rating.js";
+export { t as Rating, e as RatingCore };

package/dist/components/Resizable/index.js

@@ -0,0 +1,2 @@
+import { ResizableGroup as e, ResizableHandle as t, ResizablePanel as n } from "./Resizable.js";
+export { e as ResizableGroup, t as ResizableHandle, n as ResizablePanel };

package/dist/components/ScrollArea/index.js

@@ -0,0 +1,2 @@
+import e from "./ScrollArea.js";
+export { e as ScrollArea };

package/dist/components/Segmented/index.js

@@ -0,0 +1,3 @@
+import e from "./SegmentedCore.js";
+import t from "./Segmented.js";
+export { t as Segmented, e as SegmentedCore };

package/dist/components/Select/index.js

@@ -0,0 +1,4 @@
+import e from "./SelectCore.js";
+import t from "./Select.js";
+import n from "./Option.js";
+export { n as Option, t as Select, e as SelectCore };

package/dist/components/Skeleton/index.js

@@ -0,0 +1,2 @@
+import e from "./Skeleton.js";
+export { e as Skeleton };

package/dist/components/Slider/index.js

@@ -0,0 +1,3 @@
+import e from "./SliderCore.js";
+import t from "./Slider.js";
+export { t as Slider, e as SliderCore };

package/dist/components/Spinner/index.js

@@ -0,0 +1,2 @@
+import e from "./Spinner.js";
+export { e as Spinner };

package/dist/components/Stat/index.js

@@ -0,0 +1,2 @@
+import { Stat as e, StatGroup as t } from "./Stat.js";
+export { e as Stat, t as StatGroup };

package/dist/components/StepTimeline/index.js

@@ -0,0 +1,2 @@
+import e, { StepTimelineItem as t } from "./StepTimeline.js";
+export { e as StepTimeline, t as StepTimelineItem };

package/dist/components/Stepper/index.js

@@ -0,0 +1,3 @@
+import e from "./Stepper.js";
+import t from "./Step.js";
+export { t as Step, e as Stepper };

package/dist/components/StreamingText/index.js

@@ -0,0 +1,2 @@
+import e from "./StreamingText.js";
+export { e as StreamingText };

package/dist/components/SwipeAction/index.js

@@ -0,0 +1,2 @@
+import e from "./SwipeAction.js";
+export { e as SwipeAction };

package/dist/components/Switch/index.js

@@ -0,0 +1,3 @@
+import e from "./SwitchCore.js";
+import t from "./Switch.js";
+export { t as Switch, e as SwitchCore };

package/dist/components/Table/index.js

@@ -0,0 +1,6 @@
+import e from "./Table.js";
+import t from "./TableHead.js";
+import n from "./TableBody.js";
+import r from "./TableRow.js";
+import i from "./TableCell.js";
+export { e as Table, n as TableBody, i as TableCell, t as TableHead, r as TableRow };

package/dist/components/Tabs/index.js

@@ -0,0 +1,5 @@
+import e from "./Tabs.js";
+import t from "./TabList.js";
+import n from "./Tab.js";
+import r from "./TabPanel.js";
+export { n as Tab, t as TabList, r as TabPanel, e as Tabs };

package/dist/components/Tag/index.js

@@ -0,0 +1,2 @@
+import e from "./Tag.js";
+export { e as Tag };

package/dist/components/TagGroup/index.js

@@ -0,0 +1,3 @@
+import e from "./TagGroup.js";
+import t from "./TagGroupItem.js";
+export { e as TagGroup, t as TagGroupItem };

package/dist/components/TagInput/index.js

@@ -0,0 +1,3 @@
+import e from "./TagInputCore.js";
+import t from "./TagInput.js";
+export { t as TagInput, e as TagInputCore };

package/dist/components/Textarea/index.js

@@ -0,0 +1,3 @@
+import e from "./TextareaCore.js";
+import t from "./Textarea.js";
+export { t as Textarea, e as TextareaCore };

package/dist/components/ThinkingIndicator/index.js

@@ -0,0 +1,2 @@
+import e from "./ThinkingIndicator.js";
+export { e as ThinkingIndicator };

package/dist/components/TimePicker/index.js

@@ -0,0 +1,3 @@
+import e from "./TimePickerCore.js";
+import t from "./TimePicker.js";
+export { t as TimePicker, e as TimePickerCore };

package/dist/components/Timeline/index.js

@@ -0,0 +1,2 @@
+import { Timeline as e, TimelineItem as t } from "./Timeline.js";
+export { e as Timeline, t as TimelineItem };

package/dist/components/Toast/Toast.js

@@ -2,33 +2,60 @@
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useEffect as r } from "react";
+import { useCallback as r, useEffect as i, useRef as a } from "react";
 //#region src/lib/components/Toast/Toast.tsx
-var i = "haze-Toast__base", a = {
+var o = "haze-Toast__base", s = {
 	info: "haze-Toast__info",
 	success: "haze-Toast__success",
 	warning: "haze-Toast__warning",
 	danger: "haze-Toast__danger"
-}, o = "haze-Toast__contentStyle", s = "haze-Toast__closeBtn";
-function c({ variant: c = "info", onClose: l, duration: u, children: d }) {
-	return r(() => {
-		if (u <= 0) return;
-		let e = setTimeout(l, u);
-		return () => clearTimeout(e);
-	}, [u, l]), /* @__PURE__ */ n("div", {
+}, c = "haze-Toast__contentStyle", l = "haze-Toast__closeBtn";
+function u({ variant: u = "info", onClose: d, duration: f, children: p }) {
+	let m = a(f), h = a(0), g = a(null), _ = a(!1), v = a(!1), y = a(d);
+	i(() => {
+		y.current = d;
+	}, [d]);
+	let b = r(() => {
+		g.current !== null && (clearTimeout(g.current), g.current = null, m.current = Math.max(0, m.current - (Date.now() - h.current)));
+	}, []), x = r(() => {
+		g.current !== null || m.current <= 0 || (h.current = Date.now(), g.current = setTimeout(() => {
+			g.current = null, y.current();
+		}, m.current));
+	}, []), S = r(() => {
+		_.current || v.current ? b() : x();
+	}, [b, x]);
+	return i(() => {
+		if (!(f <= 0)) return m.current = f, !_.current && !v.current && x(), b;
+	}, [
+		f,
+		x,
+		b
+	]), /* @__PURE__ */ n("div", {
 		role: "alert",
-		className: e([i, a[c]]),
+		onPointerEnter: () => {
+			_.current = !0, S();
+		},
+		onPointerLeave: () => {
+			_.current = !1, S();
+		},
+		onFocus: () => {
+			v.current = !0, S();
+		},
+		onBlur: () => {
+			v.current = !1, S();
+		},
+		className: e([o, s[u]]),
 		children: [/* @__PURE__ */ t("div", {
-			className: o,
-			children: d
+			className: c,
+			children: p
 		}), /* @__PURE__ */ t("button", {
 			type: "button",
-			className: s,
+			className: l,
 			"aria-label": "Close",
-			onClick: l,
+			onClick: d,
 			children: "×"
 		})]
 	});
 }
 //#endregion
-export { c as default };
+export { u as default };

package/dist/components/Toast/ToastContainer.js

@@ -1,36 +1,45 @@
 
-import e from "./Toast.js";
-import { ToastProvider as t } from "./ToastContext.js";
+import { classnames as e } from "../../utils/classnames.js";
+import t from "./Toast.js";
+import { ToastProvider as n } from "./ToastContext.js";
 /* empty css                         */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useCallback as i, useRef as a, useState as o } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCallback as a, useRef as o, useState as s } from "react";
 //#region src/lib/components/Toast/ToastContainer.tsx
-var s = "haze-ToastContainer__container";
-function c({ children: c }) {
-	let [l, u] = o([]), d = a(0), f = i((e) => {
-		d.current += 1, u((t) => [...t, {
-			...e,
-			id: d.current
-		}]);
-	}, []), p = i((e) => {
-		u((t) => t.filter((t) => t.id !== e));
+var c = "haze-ToastContainer__containerBase", l = {
+	"top-left": "haze-ToastContainer__top-left",
+	"top-right": "haze-ToastContainer__top-right",
+	"bottom-left": "haze-ToastContainer__bottom-left",
+	"bottom-right": "haze-ToastContainer__bottom-right"
+};
+function u({ children: u, maxCount: d, placement: f = "bottom-right" }) {
+	let [p, m] = s([]), h = o(0), g = a((e) => {
+		h.current += 1, m((t) => {
+			let n = [...t, {
+				...e,
+				id: h.current
+			}];
+			return d === void 0 || n.length <= d ? n : n.slice(n.length - d);
+		});
+	}, [d]), _ = a((e) => {
+		m((t) => t.filter((t) => t.id !== e));
 	}, []);
-	return /* @__PURE__ */ r(t, {
+	return /* @__PURE__ */ i(n, {
 		value: {
-			toasts: l,
-			addToast: f,
-			removeToast: p
+			toasts: p,
+			addToast: g,
+			removeToast: _
 		},
-		children: [c, /* @__PURE__ */ n("div", {
-			className: s,
-			children: l.map((t) => /* @__PURE__ */ n(e, {
-				variant: t.variant,
-				duration: t.duration,
-				onClose: () => p(t.id),
-				children: t.content
-			}, t.id))
+		children: [u, /* @__PURE__ */ r("div", {
+			className: e([c, l[f]]),
+			children: p.map((e) => /* @__PURE__ */ r(t, {
+				variant: e.variant,
+				duration: e.duration,
+				onClose: () => _(e.id),
+				children: e.content
+			}, e.id))
 		})]
 	});
 }
 //#endregion
-export { c as default };
+export { u as default, l as toastPlacements };

package/dist/components/Toast/index.js

@@ -0,0 +1,4 @@
+import e from "./Toast.js";
+import t from "./ToastContainer.js";
+import n from "./useToast.js";
+export { e as Toast, t as ToastContainer, n as useToast };

package/dist/components/TokenCounter/index.js

@@ -0,0 +1,2 @@
+import e from "./TokenCounter.js";
+export { e as TokenCounter };

package/dist/components/ToolCallCard/index.js

@@ -0,0 +1,2 @@
+import e from "./ToolCallCard.js";
+export { e as ToolCallCard };

package/dist/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+import e from "./Tooltip.js";
+export { e as Tooltip };

package/dist/components/Transfer/index.js

@@ -0,0 +1,3 @@
+import e from "./TransferCore.js";
+import t from "./Transfer.js";
+export { t as Transfer, e as TransferCore };

package/dist/components/Tree/index.js

@@ -0,0 +1,2 @@
+import e from "./Tree.js";
+export { e as Tree };

package/dist/components/Typography/index.js

@@ -0,0 +1,2 @@
+import { Paragraph as e, Text as t, Title as n } from "./Typography.js";
+export { e as Paragraph, t as Text, n as Title };

package/dist/components/Upload/index.js

@@ -0,0 +1,3 @@
+import e from "./UploadCore.js";
+import t from "./Upload.js";
+export { t as Upload, e as UploadCore };

package/dist/components/VirtualList/index.js

@@ -0,0 +1,2 @@
+import e from "./VirtualList.js";
+export { e as VirtualList };

package/dist/css/toast.css

@@ -1,3 +1,3 @@
 /* haze-ui toast — generated by scripts/split-css.mjs, do not edit */
-.haze-Toast__base{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--haze-space-3);padding:var(--haze-space-3) var(--haze-space-4);border-radius:var(--haze-radius-md);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);line-height:var(--haze-leading-normal);box-shadow:var(--haze-shadow-lg);pointer-events:auto;animation:.2s ease-out toastIn-haze-Toast__base;display:flex}@keyframes toastIn-haze-Toast__base{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.haze-Toast__info{background:var(--haze-color-bg);color:var(--haze-color-text);border:1px solid var(--haze-color-border)}.haze-Toast__success{background:color-mix(in srgb, var(--haze-color-success) 10%, var(--haze-color-bg));color:var(--haze-color-success);border:1px solid color-mix(in srgb, var(--haze-color-success) 25%, transparent)}.haze-Toast__warning{background:color-mix(in srgb, var(--haze-color-warning) 10%, var(--haze-color-bg));color:var(--haze-color-warning);border:1px solid color-mix(in srgb, var(--haze-color-warning) 25%, transparent)}.haze-Toast__danger{background:color-mix(in srgb, var(--haze-color-danger) 10%, var(--haze-color-bg));color:var(--haze-color-danger);border:1px solid color-mix(in srgb, var(--haze-color-danger) 25%, transparent)}.haze-Toast__contentStyle{flex:1}.haze-Toast__closeBtn{appearance:none;color:inherit;cursor:pointer;font-size:var(--haze-text-lg);opacity:.6;background:0 0;border:none;padding:0;line-height:1;transition:opacity .15s}.haze-Toast__closeBtn:hover{opacity:1}
-.haze-ToastContainer__container{bottom:calc(var(--haze-space-4) + env(safe-area-inset-bottom));right:calc(var(--haze-space-4) + env(safe-area-inset-right));z-index:9999;gap:var(--haze-space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}
+.haze-Toast__base{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--haze-space-3);padding:var(--haze-space-3) var(--haze-space-4);border-radius:var(--haze-radius-md);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);line-height:var(--haze-leading-normal);box-shadow:var(--haze-shadow-lg);pointer-events:auto;animation:.2s ease-out toastIn-haze-Toast__base;display:flex}@keyframes toastIn-haze-Toast__base{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.haze-Toast__info{background:var(--haze-color-bg);color:var(--haze-color-text);border:1px solid var(--haze-color-border)}.haze-Toast__success{background:color-mix(in srgb, var(--haze-color-success) 10%, var(--haze-color-bg));color:var(--haze-color-text);border:1px solid color-mix(in srgb, var(--haze-color-success) 25%, transparent)}.haze-Toast__warning{background:color-mix(in srgb, var(--haze-color-warning) 10%, var(--haze-color-bg));color:var(--haze-color-text);border:1px solid color-mix(in srgb, var(--haze-color-warning) 25%, transparent)}.haze-Toast__danger{background:color-mix(in srgb, var(--haze-color-danger) 10%, var(--haze-color-bg));color:var(--haze-color-text);border:1px solid color-mix(in srgb, var(--haze-color-danger) 25%, transparent)}.haze-Toast__contentStyle{flex:1}.haze-Toast__closeBtn{appearance:none;color:inherit;cursor:pointer;font-size:var(--haze-text-lg);opacity:.6;background:0 0;border:none;justify-content:center;align-items:center;min-width:24px;min-height:24px;padding:0;line-height:1;transition:opacity .15s;display:inline-flex}.haze-Toast__closeBtn:hover{opacity:1}
+.haze-ToastContainer__containerBase{z-index:9999;gap:var(--haze-space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}.haze-ToastContainer__top-left{top:calc(var(--haze-space-4) + env(safe-area-inset-top));left:calc(var(--haze-space-4) + env(safe-area-inset-left))}.haze-ToastContainer__top-right{top:calc(var(--haze-space-4) + env(safe-area-inset-top));right:calc(var(--haze-space-4) + env(safe-area-inset-right))}.haze-ToastContainer__bottom-left{bottom:calc(var(--haze-space-4) + env(safe-area-inset-bottom));left:calc(var(--haze-space-4) + env(safe-area-inset-left))}.haze-ToastContainer__bottom-right{bottom:calc(var(--haze-space-4) + env(safe-area-inset-bottom));right:calc(var(--haze-space-4) + env(safe-area-inset-right))}

package/dist/form/FormItem.js

@@ -36,12 +36,12 @@ function c({ form: c, name: l, label: u, validate: d, mode: f, validateDebounce:
 				...S ? S(D) : { value: D },
 				children: C
 			}) : v ? /* @__PURE__ */ t(v, {
+				...y,
 				id: T,
 				"aria-invalid": j || void 0,
 				"aria-describedby": j ? E : void 0,
 				onBlur: k,
 				onChange: (e) => O(N(e)),
-				...y,
 				...S ? S(D) : { value: D }
 			}) : C({
 				id: T,

package/dist/form/index.js

@@ -0,0 +1,2 @@
+import e from "./FormItem.js";
+export { e as FormItem };

package/dist/haze-ui.css

@@ -115,8 +115,8 @@
 .haze-ThinkingIndicator__wrapper{align-items:center;gap:var(--haze-space-2);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);color:var(--haze-color-text-muted);padding:var(--haze-space-2) 0;display:inline-flex}.haze-ThinkingIndicator__dots{gap:var(--haze-space-1);display:inline-flex}@keyframes bounce-haze-ThinkingIndicator__dots{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-.375rem)}}.haze-ThinkingIndicator__dot{border-radius:var(--haze-radius-full);background:var(--haze-color-text-muted);width:.375rem;height:.375rem;animation:1.4s ease-in-out infinite bounce}.haze-ThinkingIndicator__dot2{animation-delay:.16s}.haze-ThinkingIndicator__dot3{animation-delay:.32s}
 .haze-TimePickerCore__input{width:100%;padding:var(--haze-space-2) var(--haze-space-3);border:1px solid var(--haze-color-border);border-radius:var(--haze-radius-md);background:var(--haze-color-bg);color:var(--haze-color-text);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);outline:none;transition:border-color .15s,box-shadow .15s}.haze-TimePickerCore__input:focus{border-color:var(--haze-color-primary);box-shadow:0 0 0 3px var(--haze-color-focus-ring)}.haze-TimePickerCore__input:disabled{opacity:.5;cursor:not-allowed}.haze-TimePickerCore__input::-webkit-input-placeholder{color:var(--haze-color-text-muted)}.haze-TimePickerCore__input::placeholder{color:var(--haze-color-text-muted)}.haze-TimePickerCore__input:-ms-placeholder-shown{color:var(--haze-color-text-muted)}.haze-TimePickerCore__input::placeholder{color:var(--haze-color-text-muted)}
 .haze-Timeline__base{font-family:var(--haze-font-sans);flex-direction:column;display:flex}.haze-Timeline__item{gap:var(--haze-space-3);padding-bottom:var(--haze-space-6);display:flex;position:relative}.haze-Timeline__item:last-child{padding-bottom:0}.haze-Timeline__dotWrapper{flex-direction:column;flex-shrink:0;align-items:center;display:flex}.haze-Timeline__dot{border-radius:var(--haze-radius-full);background:var(--haze-color-border);z-index:1;flex-shrink:0;width:12px;height:12px}.haze-Timeline__primary{background:var(--haze-color-primary)}.haze-Timeline__success{background:var(--haze-color-success)}.haze-Timeline__warning{background:var(--haze-color-warning)}.haze-Timeline__danger{background:var(--haze-color-danger)}.haze-Timeline__line{background:var(--haze-color-border);width:2px;margin-top:var(--haze-space-1);flex:1}.haze-Timeline__content{flex:1;min-width:0}.haze-Timeline__titleStyle{font-size:var(--haze-text-sm);font-weight:var(--haze-weight-medium);color:var(--haze-color-text)}.haze-Timeline__descStyle,.haze-Timeline__timeStyle{font-size:var(--haze-text-xs);color:var(--haze-color-text-muted);margin-top:var(--haze-space-1)}
-.haze-Toast__base{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--haze-space-3);padding:var(--haze-space-3) var(--haze-space-4);border-radius:var(--haze-radius-md);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);line-height:var(--haze-leading-normal);box-shadow:var(--haze-shadow-lg);pointer-events:auto;animation:.2s ease-out toastIn-haze-Toast__base;display:flex}@keyframes toastIn-haze-Toast__base{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.haze-Toast__info{background:var(--haze-color-bg);color:var(--haze-color-text);border:1px solid var(--haze-color-border)}.haze-Toast__success{background:color-mix(in srgb, var(--haze-color-success) 10%, var(--haze-color-bg));color:var(--haze-color-success);border:1px solid color-mix(in srgb, var(--haze-color-success) 25%, transparent)}.haze-Toast__warning{background:color-mix(in srgb, var(--haze-color-warning) 10%, var(--haze-color-bg));color:var(--haze-color-warning);border:1px solid color-mix(in srgb, var(--haze-color-warning) 25%, transparent)}.haze-Toast__danger{background:color-mix(in srgb, var(--haze-color-danger) 10%, var(--haze-color-bg));color:var(--haze-color-danger);border:1px solid color-mix(in srgb, var(--haze-color-danger) 25%, transparent)}.haze-Toast__contentStyle{flex:1}.haze-Toast__closeBtn{appearance:none;color:inherit;cursor:pointer;font-size:var(--haze-text-lg);opacity:.6;background:0 0;border:none;padding:0;line-height:1;transition:opacity .15s}.haze-Toast__closeBtn:hover{opacity:1}
-.haze-ToastContainer__container{bottom:calc(var(--haze-space-4) + env(safe-area-inset-bottom));right:calc(var(--haze-space-4) + env(safe-area-inset-right));z-index:9999;gap:var(--haze-space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}
+.haze-Toast__base{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--haze-space-3);padding:var(--haze-space-3) var(--haze-space-4);border-radius:var(--haze-radius-md);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);line-height:var(--haze-leading-normal);box-shadow:var(--haze-shadow-lg);pointer-events:auto;animation:.2s ease-out toastIn-haze-Toast__base;display:flex}@keyframes toastIn-haze-Toast__base{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.haze-Toast__info{background:var(--haze-color-bg);color:var(--haze-color-text);border:1px solid var(--haze-color-border)}.haze-Toast__success{background:color-mix(in srgb, var(--haze-color-success) 10%, var(--haze-color-bg));color:var(--haze-color-text);border:1px solid color-mix(in srgb, var(--haze-color-success) 25%, transparent)}.haze-Toast__warning{background:color-mix(in srgb, var(--haze-color-warning) 10%, var(--haze-color-bg));color:var(--haze-color-text);border:1px solid color-mix(in srgb, var(--haze-color-warning) 25%, transparent)}.haze-Toast__danger{background:color-mix(in srgb, var(--haze-color-danger) 10%, var(--haze-color-bg));color:var(--haze-color-text);border:1px solid color-mix(in srgb, var(--haze-color-danger) 25%, transparent)}.haze-Toast__contentStyle{flex:1}.haze-Toast__closeBtn{appearance:none;color:inherit;cursor:pointer;font-size:var(--haze-text-lg);opacity:.6;background:0 0;border:none;justify-content:center;align-items:center;min-width:24px;min-height:24px;padding:0;line-height:1;transition:opacity .15s;display:inline-flex}.haze-Toast__closeBtn:hover{opacity:1}
+.haze-ToastContainer__containerBase{z-index:9999;gap:var(--haze-space-2);pointer-events:none;flex-direction:column;display:flex;position:fixed}.haze-ToastContainer__top-left{top:calc(var(--haze-space-4) + env(safe-area-inset-top));left:calc(var(--haze-space-4) + env(safe-area-inset-left))}.haze-ToastContainer__top-right{top:calc(var(--haze-space-4) + env(safe-area-inset-top));right:calc(var(--haze-space-4) + env(safe-area-inset-right))}.haze-ToastContainer__bottom-left{bottom:calc(var(--haze-space-4) + env(safe-area-inset-bottom));left:calc(var(--haze-space-4) + env(safe-area-inset-left))}.haze-ToastContainer__bottom-right{bottom:calc(var(--haze-space-4) + env(safe-area-inset-bottom));right:calc(var(--haze-space-4) + env(safe-area-inset-right))}
 .haze-TokenCounter__wrapper{font-family:var(--haze-font-sans);font-size:var(--haze-text-xs);color:var(--haze-color-text-muted)}.haze-TokenCounter__bar{background:var(--haze-color-muted);border-radius:var(--haze-radius-full);height:.25rem;margin-top:var(--haze-space-1);overflow:hidden}.haze-TokenCounter__fill{border-radius:var(--haze-radius-full);height:100%;transition:width .3s}.haze-TokenCounter__fillNormal{background:var(--haze-color-primary)}.haze-TokenCounter__fillWarning{background:var(--haze-color-warning,#eab308)}.haze-TokenCounter__fillDanger{background:var(--haze-color-danger,#dc2626)}.haze-TokenCounter__info{-webkit-box-pack:justify;-ms-flex-pack:space-between;justify-content:space-between;align-items:baseline;display:flex}.haze-TokenCounter__count{font-variant-numeric:tabular-nums}
 .haze-ToolCallCard__card{border:1px solid var(--haze-color-border);border-radius:var(--haze-radius-md);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);overflow:hidden}.haze-ToolCallCard__header{align-items:center;gap:var(--haze-space-2);padding:var(--haze-space-2) var(--haze-space-3);background:var(--haze-color-muted);font-family:var(--haze-font-mono);font-size:var(--haze-text-xs);display:flex}.haze-ToolCallCard__statusIcon{border-radius:var(--haze-radius-full);flex-shrink:0;width:.5rem;height:.5rem}.haze-ToolCallCard__statusPending{background:var(--haze-color-text-muted)}.haze-ToolCallCard__statusRunning{background:var(--haze-color-primary);animation:1.5s infinite pulse}.haze-ToolCallCard__statusDone{background:var(--haze-color-success,#16a34a)}.haze-ToolCallCard__statusError{background:var(--haze-color-danger,#dc2626)}.haze-ToolCallCard__body{padding:var(--haze-space-3)}.haze-ToolCallCard__section{margin-bottom:var(--haze-space-2)}.haze-ToolCallCard__sectionLabel{font-size:var(--haze-text-xs);color:var(--haze-color-text-muted);margin-bottom:var(--haze-space-1);text-transform:uppercase;letter-spacing:.05em}.haze-ToolCallCard__content{font-family:var(--haze-font-mono);font-size:var(--haze-text-xs);white-space:pre-wrap;word-break:break-all;color:var(--haze-color-text)}
 .haze-Tooltip__wrapper{display:inline-flex;position:relative}.haze-Tooltip__bubble{padding:var(--haze-space-1) var(--haze-space-2);border-radius:var(--haze-radius-md);background:var(--haze-color-text);color:var(--haze-color-text-inverse);font-family:var(--haze-font-sans);font-size:var(--haze-text-xs);line-height:var(--haze-leading-normal);white-space:nowrap;pointer-events:none}

package/dist/tokens/index.js

@@ -0,0 +1,4 @@
+import { darkTheme as e, lightTheme as t } from "./colors.js";
+import { spacing as n } from "./spacing.js";
+import { typography as r } from "./typography.js";
+export { e as darkTheme, t as lightTheme, n as spacing, r as typography };

package/dist/types/components/Toast/ToastContainer.d.ts

@@ -1,6 +1,17 @@
 import type { ReactNode } from 'react';
+type ToastPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 type ToastContainerProps = {
     children: ReactNode;
+    /** Max simultaneous toasts; the oldest one is dropped on overflow. */
+    maxCount?: number;
+    /** Viewport edge the stack is pinned to. */
+    placement?: ToastPlacement;
 };
-export default function ToastContainer({ children }: ToastContainerProps): import("react").JSX.Element;
-export type { ToastContainerProps };
+export declare const toastPlacements: {
+    readonly 'top-left': import("@linaria/core").LinariaClassName;
+    readonly 'top-right': import("@linaria/core").LinariaClassName;
+    readonly 'bottom-left': import("@linaria/core").LinariaClassName;
+    readonly 'bottom-right': import("@linaria/core").LinariaClassName;
+};
+export default function ToastContainer({ children, maxCount, placement, }: ToastContainerProps): import("react").JSX.Element;
+export type { ToastContainerProps, ToastPlacement };

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

@@ -49,8 +49,9 @@ export type FormItemAsProps = {
      * precedence over the children render-prop. */
     as?: ComponentType<any>;
     /** Extra props spread onto the `as` component. They land before the
-     * value props, so `value`/`valueToProps` win conflicts — the same
-     * precedence react-f0rm's `Field` uses. */
+     * bridge wiring and the value props, so `id`, `aria-*`, `onBlur`,
+     * `onChange` and `value`/`valueToProps` win conflicts — the same
+     * precedence as the input channel and react-f0rm's `Field`. */
     asProps?: Record<string, any>;
     /** Converts what the control passes to its `onChange` into the field
      * value. Defaults to identity — haze cores' `onChange` emits the next

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

@@ -65,6 +65,19 @@ export type FloatingBehavior = {
 export declare function useFloating({ open, setOpen, triggerRef, panelRef, }: UseFloatingOptions): FloatingBehavior;
 /** x-class entries placing the panel relative to the trigger, per tier. */
 export declare function floatingPlacementClasses(behavior: Pick<FloatingBehavior, 'native' | 'anchored'>, placement: FloatingPlacement): (string | false)[];
+/**
+ * Place a fixed panel from the trigger's rect (tier 2). Centers compute
+ * from the panel's own rect, so this needs layout — fine in real engines,
+ * and unreachable in jsdom where the fallback tier renders instead.
+ *
+ * Viewport awareness: a placement that would push the panel past the
+ * viewport edge flips to the opposite side when that side has room for
+ * it (bottom↔top, left↔right — the secondary-axis alignment stays as
+ * chosen); when neither side fits, the position is clamped into the
+ * viewport instead. Exported for direct testing like
+ * `supportsNativePopover` above.
+ */
+export declare function placeFloatingPanel(panel: HTMLElement, trigger: HTMLElement, placement: FloatingPlacement): void;
 /**
  * Tier 2 positioning: place the panel under/over/beside the trigger and
  * re-place on scroll/resize while open. No-op on the anchored and

package/dist/utils/floating.js

@@ -113,28 +113,50 @@ function L(e, t) {
 }
 function R(e, t, n) {
 	if (n === "point") return;
-	let r = t.getBoundingClientRect(), i = e.getBoundingClientRect(), a = r.left + r.width / 2 - i.width / 2, o = r.top + r.height / 2 - i.height / 2;
-	switch (n) {
-		case "bottom":
-		case "bottom-span":
-			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${r.left}px`;
-			return;
-		case "bottom-center":
-			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${a}px`;
-			return;
-		case "bottom-end":
-			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${r.right - i.width}px`;
-			return;
-		case "top":
-			e.style.top = `${r.top - i.height - L(e, "marginBottom")}px`, e.style.left = `${a}px`;
-			return;
-		case "left":
-			e.style.top = `${o}px`, e.style.left = `${r.left - i.width - L(e, "marginRight")}px`;
-			return;
-		case "right":
-			e.style.top = `${o}px`, e.style.left = `${r.right + L(e, "marginLeft")}px`;
-			return;
+	let r = t.getBoundingClientRect(), i = e.getBoundingClientRect(), a = {
+		width: window.innerWidth,
+		height: window.innerHeight
+	}, o = r.left + r.width / 2 - i.width / 2, s = r.top + r.height / 2 - i.height / 2, c = {
+		below: L(e, "marginTop"),
+		above: L(e, "marginBottom"),
+		after: L(e, "marginLeft"),
+		before: L(e, "marginRight")
+	}, l = (e, t) => ({
+		top: e === "bottom" ? r.bottom + c.below : r.top - i.height - c.above,
+		left: t === "start" ? r.left : t === "end" ? r.right - i.width : o
+	}), u = (e) => ({
+		top: s,
+		left: e === "right" ? r.right + c.after : r.left - i.width - c.before
+	}), d = {
+		bottom: {
+			side: "bottom",
+			align: "start"
+		},
+		"bottom-span": {
+			side: "bottom",
+			align: "start"
+		},
+		"bottom-center": {
+			side: "bottom",
+			align: "center"
+		},
+		"bottom-end": {
+			side: "bottom",
+			align: "end"
+		},
+		top: {
+			side: "top",
+			align: "center"
+		}
+	}, { top: f, left: p } = n === "left" || n === "right" ? u(n) : l(d[n].side, d[n].align);
+	if (n === "left" || n === "right") {
+		let e = n === "right" ? p + i.width > a.width : p < 0, t = n === "right" ? r.left - i.width - c.before >= 0 : r.right + i.width + c.after <= a.width;
+		e && t && ({top: f, left: p} = u(n === "right" ? "left" : "right"));
+	} else {
+		let { side: e, align: t } = d[n], o = e === "bottom" ? f + i.height > a.height : f < 0, s = e === "bottom" ? r.top - i.height - c.above >= 0 : r.bottom + i.height + c.below <= a.height;
+		o && s && ({top: f, left: p} = l(e === "bottom" ? "top" : "bottom", t));
 	}
+	f = Math.min(Math.max(f, 0), Math.max(0, a.height - i.height)), p = Math.min(Math.max(p, 0), Math.max(0, a.width - i.width)), e.style.top = `${f}px`, e.style.left = `${p}px`;
 }
 function z({ behavior: e, placement: t }) {
 	let { native: n, anchored: i, open: a, triggerRef: o, panelRef: s } = e;
@@ -178,4 +200,4 @@ function B({ behavior: n, placement: r, visualClass: i, className: a, style: o,
 	});
 }
 //#endregion
-export { B as FloatingPanel, I as floatingPlacementClasses, l as supportsAnchorPositioning, c as supportsNativePopover, F as useFloating, z as useFloatingPosition };
+export { B as FloatingPanel, I as floatingPlacementClasses, R as placeFloatingPanel, l as supportsAnchorPositioning, c as supportsNativePopover, F as useFloating, z as useFloatingPosition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.18.2",
+  "version": "1.19.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -12,6 +12,21 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./components/*": {
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js",
+      "default": "./dist/components/*/index.js"
+    },
+    "./form": {
+      "types": "./dist/types/form/index.d.ts",
+      "import": "./dist/form/index.js",
+      "default": "./dist/form/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/types/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js",
+      "default": "./dist/tokens/index.js"
+    },
     "./styles.css": "./dist/haze-ui.css",
     "./css/*": "./dist/css/*"
   },
@@ -59,6 +74,7 @@
     "react-use-control": "^1.5.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@babel/core": "^8.0.1",
     "@babel/preset-env": "^8.0.2",
     "@babel/preset-typescript": "^8.0.1",