haze-ui 1.19.0 → 1.20.0

package/README.md

@@ -85,6 +85,27 @@ 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.
 
+## AsyncSection: loading / error / content in one place
+
+`AsyncSection` collapses the three states every async view hand-rolls into
+one component: `loading` renders the spinner placeholder, a non-null
+`error` renders an alert box with an optional `Retry` button (an `Error`
+instance contributes its `message`; `errorText` overrides), and otherwise
+the children render. `loading` wins when both are set — the retry path
+(loading again before the old error clears) shows the placeholder, not
+the stale error. All copy is configurable; the retry button only renders
+when `onRetry` is provided.
+
+```jsx
+import 'haze-ui/css/tokens.css';
+import 'haze-ui/css/async-section.css';
+import { AsyncSection } from 'haze-ui';
+
+<AsyncSection loading={loading} error={error} onRetry={refetch}>
+  {data}
+</AsyncSection>
+```
+
 ## react-f0rm Integration
 
 react-f0rm owns form field state, and its headless `useField` hook is

package/dist/components/AsyncSection/AsyncSection.js

@@ -0,0 +1,62 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+/* empty css                       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/components/AsyncSection/AsyncSection.tsx
+var r = "haze-AsyncSection__base", i = "haze-AsyncSection__placeholder", a = "haze-AsyncSection__spin", o = "haze-AsyncSection__errorBox", s = "haze-AsyncSection__errorMessage", c = "haze-AsyncSection__retryButton";
+function l({ loading: l = !1, error: u, onRetry: d, loadingText: f = "Loading…", errorText: p, retryText: m = "Retry", className: h, children: g }) {
+	if (l) return /* @__PURE__ */ t("section", {
+		"aria-busy": "true",
+		className: e([r, h]),
+		children: n("div", {
+			role: "status",
+			className: e([i]),
+			children: [/* @__PURE__ */ t("span", {
+				"aria-hidden": "true",
+				className: e([a]),
+				children: /* @__PURE__ */ n("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					xmlns: "http://www.w3.org/2000/svg",
+					children: [/* @__PURE__ */ t("circle", {
+						cx: "12",
+						cy: "12",
+						r: "10",
+						stroke: "var(--haze-color-border)",
+						strokeWidth: "3"
+					}), /* @__PURE__ */ t("path", {
+						d: "M12 2a10 10 0 0 1 10 10",
+						stroke: "var(--haze-color-primary)",
+						strokeWidth: "3",
+						strokeLinecap: "round"
+					})]
+				})
+			}), f]
+		})
+	});
+	if (u != null) {
+		let i = p ?? (u instanceof Error && u.message ? u.message : void 0) ?? "Something went wrong";
+		return /* @__PURE__ */ t("section", {
+			className: e([r, h]),
+			children: n("div", {
+				role: "alert",
+				className: e([o]),
+				children: [/* @__PURE__ */ t("p", {
+					className: e([s]),
+					children: i
+				}), d && /* @__PURE__ */ t("button", {
+					type: "button",
+					onClick: d,
+					className: e([c]),
+					children: m
+				})]
+			})
+		});
+	}
+	return /* @__PURE__ */ t("section", {
+		className: e([r, h]),
+		children: g
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/AsyncSection/index.js

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

package/dist/components/Dialog/Dialog.js

@@ -18,7 +18,7 @@ function l({ open: l, onClose: u, title: d, className: f, children: p }) {
 			h(!1), _.current?.focus(), _.current = null, u?.();
 		},
 		onClick: (e) => {
-			e.target === g.current && (h(!1), u?.());
+			e.target === g.current && h(!1);
 		},
 		className: e([s, f]),
 		children: [d !== void 0 && /* @__PURE__ */ t("h2", {

package/dist/css/async-section.css

@@ -0,0 +1,2 @@
+/* haze-ui async-section — generated by scripts/split-css.mjs, do not edit */
+.haze-AsyncSection__base{font-family:var(--haze-font-sans);color:var(--haze-color-text)}.haze-AsyncSection__placeholder{align-items:center;gap:var(--haze-space-3);padding:var(--haze-space-8) var(--haze-space-4);color:var(--haze-color-text-muted);font-size:var(--haze-text-sm);flex-direction:column;display:flex}.haze-AsyncSection__spin{width:24px;height:24px;animation:.8s linear infinite spin-haze-AsyncSection__spin;display:inline-flex}@keyframes spin-haze-AsyncSection__spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.haze-AsyncSection__errorBox{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--haze-space-4);padding:var(--haze-space-3) var(--haze-space-4);border-radius:var(--haze-radius-md);background:color-mix(in srgb, var(--haze-color-danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--haze-color-danger) 25%, transparent);font-size:var(--haze-text-sm);line-height:var(--haze-leading-normal);flex-direction:column;display:flex}.haze-AsyncSection__errorMessage{color:var(--haze-color-danger);margin:0}.haze-AsyncSection__retryButton{align-items:center;gap:var(--haze-space-2);padding:var(--haze-space-1) var(--haze-space-3);border:1px solid var(--haze-color-border);border-radius:var(--haze-radius-md);color:var(--haze-color-text);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);font-weight:var(--haze-weight-medium);line-height:var(--haze-leading-tight);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;transition:background .15s,border-color .15s;display:inline-flex}.haze-AsyncSection__retryButton:hover{border-color:var(--haze-color-border-hover);background:var(--haze-color-bg-subtle)}.haze-AsyncSection__retryButton:focus-visible{box-shadow:0 0 0 3px var(--haze-color-focus-ring);outline:none}

package/dist/haze-ui.css

@@ -7,6 +7,7 @@
 .haze-Alert__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);display:flex}.haze-Alert__info{background:color-mix(in srgb, var(--haze-color-info) 10%, transparent);color:var(--haze-color-info);border:1px solid color-mix(in srgb, var(--haze-color-info) 25%, transparent)}.haze-Alert__success{background:color-mix(in srgb, var(--haze-color-success) 10%, transparent);color:var(--haze-color-success);border:1px solid color-mix(in srgb, var(--haze-color-success) 25%, transparent)}.haze-Alert__warning{background:color-mix(in srgb, var(--haze-color-warning) 10%, transparent);color:var(--haze-color-warning);border:1px solid color-mix(in srgb, var(--haze-color-warning) 25%, transparent)}.haze-Alert__danger{background:color-mix(in srgb, var(--haze-color-danger) 10%, transparent);color:var(--haze-color-danger);border:1px solid color-mix(in srgb, var(--haze-color-danger) 25%, transparent)}.haze-Alert__contentStyle{flex:1}.haze-Alert__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-Alert__closeBtn:hover{opacity:1}.haze-Alert__closeBtn:focus-visible{box-shadow:0 0 0 3px var(--haze-color-focus-ring);border-radius:var(--haze-radius-sm);outline:none}
 .haze-ApprovalCard__card{border:1px solid var(--haze-color-warning,#eab308);border-radius:var(--haze-radius-md);font-family:var(--haze-font-sans);background:var(--haze-color-bg);overflow:hidden}.haze-ApprovalCard__header{padding:var(--haze-space-3) var(--haze-space-4);background:var(--haze-color-warning-light,#fef9c3);font-size:var(--haze-text-sm);font-weight:var(--haze-weight-medium);color:var(--haze-color-text)}.haze-ApprovalCard__body{padding:var(--haze-space-3) var(--haze-space-4)}.haze-ApprovalCard__desc{font-size:var(--haze-text-sm);color:var(--haze-color-text-muted);margin-bottom:var(--haze-space-3)}.haze-ApprovalCard__content{margin-bottom:var(--haze-space-3)}.haze-ApprovalCard__actions{gap:var(--haze-space-2);padding:var(--haze-space-3) var(--haze-space-4);border-top:1px solid var(--haze-color-border);display:flex}.haze-ApprovalCard__btn{padding:var(--haze-space-2) var(--haze-space-4);border-radius:var(--haze-radius-md);font-size:var(--haze-text-sm);font-family:var(--haze-font-sans);font-weight:var(--haze-weight-medium);cursor:pointer;flex:1;transition:background .15s}.haze-ApprovalCard__denyBtn{background:var(--haze-color-bg);border:1px solid var(--haze-color-border);color:var(--haze-color-text)}.haze-ApprovalCard__denyBtn:hover{background:var(--haze-color-muted)}.haze-ApprovalCard__approveBtn{background:var(--haze-color-primary);border:1px solid var(--haze-color-primary);color:var(--haze-color-bg)}.haze-ApprovalCard__approveBtn:hover{opacity:.9}
 .haze-AspectRatio__wrapper{width:100%;position:relative}.haze-AspectRatio__inner{justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}
+.haze-AsyncSection__base{font-family:var(--haze-font-sans);color:var(--haze-color-text)}.haze-AsyncSection__placeholder{align-items:center;gap:var(--haze-space-3);padding:var(--haze-space-8) var(--haze-space-4);color:var(--haze-color-text-muted);font-size:var(--haze-text-sm);flex-direction:column;display:flex}.haze-AsyncSection__spin{width:24px;height:24px;animation:.8s linear infinite spin-haze-AsyncSection__spin;display:inline-flex}@keyframes spin-haze-AsyncSection__spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.haze-AsyncSection__errorBox{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:var(--haze-space-4);padding:var(--haze-space-3) var(--haze-space-4);border-radius:var(--haze-radius-md);background:color-mix(in srgb, var(--haze-color-danger) 10%, transparent);border:1px solid color-mix(in srgb, var(--haze-color-danger) 25%, transparent);font-size:var(--haze-text-sm);line-height:var(--haze-leading-normal);flex-direction:column;display:flex}.haze-AsyncSection__errorMessage{color:var(--haze-color-danger);margin:0}.haze-AsyncSection__retryButton{align-items:center;gap:var(--haze-space-2);padding:var(--haze-space-1) var(--haze-space-3);border:1px solid var(--haze-color-border);border-radius:var(--haze-radius-md);color:var(--haze-color-text);font-family:var(--haze-font-sans);font-size:var(--haze-text-sm);font-weight:var(--haze-weight-medium);line-height:var(--haze-leading-tight);cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;transition:background .15s,border-color .15s;display:inline-flex}.haze-AsyncSection__retryButton:hover{border-color:var(--haze-color-border-hover);background:var(--haze-color-bg-subtle)}.haze-AsyncSection__retryButton:focus-visible{box-shadow:0 0 0 3px var(--haze-color-focus-ring);outline:none}
 .haze-Avatar__base{border-radius:var(--haze-radius-full);background:var(--haze-color-bg-muted);color:var(--haze-color-text-secondary);font-family:var(--haze-font-sans);font-weight:var(--haze-weight-medium);-webkit-user-select:none;user-select:none;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.haze-Avatar__sm{width:32px;height:32px;font-size:var(--haze-text-xs)}.haze-Avatar__md{width:40px;height:40px;font-size:var(--haze-text-sm)}.haze-Avatar__lg{width:56px;height:56px;font-size:var(--haze-text-lg)}.haze-Avatar__imgStyle{object-fit:cover;width:100%;height:100%}
 .haze-BackToTop__button{bottom:calc(var(--haze-space-6) + env(safe-area-inset-bottom));right:calc(var(--haze-space-6) + env(safe-area-inset-right));border-radius:var(--haze-radius-full);background:var(--haze-color-primary);width:2.5rem;height:2.5rem;color:var(--haze-color-bg);cursor:pointer;box-shadow:var(--haze-shadow-lg);font-size:var(--haze-text-lg);-webkit-transition:opacity .2s,-webkit-transform .2s;border:none;justify-content:center;align-items:center;transition:opacity .2s,transform .2s;display:flex;position:fixed}.haze-BackToTop__button:hover{transform:translateY(-2px)}.haze-BackToTop__hidden{opacity:0;pointer-events:none;transform:translateY(1rem)}
 .haze-Badge__base{border-radius:var(--haze-radius-full);font-family:var(--haze-font-sans);font-weight:var(--haze-weight-medium);line-height:var(--haze-leading-tight);white-space:nowrap;align-items:center;display:inline-flex}.haze-Badge__default{background:var(--haze-color-bg-muted);color:var(--haze-color-text-secondary)}.haze-Badge__success{background:color-mix(in srgb, var(--haze-color-success) 15%, transparent);color:var(--haze-color-success)}.haze-Badge__warning{background:color-mix(in srgb, var(--haze-color-warning) 15%, transparent);color:var(--haze-color-warning)}.haze-Badge__danger{background:color-mix(in srgb, var(--haze-color-danger) 15%, transparent);color:var(--haze-color-danger)}.haze-Badge__info{background:color-mix(in srgb, var(--haze-color-info) 15%, transparent);color:var(--haze-color-info)}.haze-Badge__sm{padding:var(--haze-space-0) var(--haze-space-2);font-size:var(--haze-text-xs)}.haze-Badge__md{padding:var(--haze-space-1) var(--haze-space-3);font-size:var(--haze-text-sm)}

package/dist/index.js

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

package/dist/types/components/AsyncSection/AsyncSection.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+type AsyncSectionProps = {
+    /**
+     * 为真时渲染加载占位（Spinner + loadingText）。优先级最高：错误未
+     * 清除时点重试（loading 与 error 同时为真）显示的是加载态。
+     */
+    loading?: boolean;
+    /**
+     * 非空值（null/undefined 之外）时渲染错误态（Alert 样式框 + Retry）。
+     * Error 实例自动取 message 作为文案，其余值落在通用兜底文案上。
+     */
+    error?: unknown;
+    /** Retry 按钮回调；不传时不渲染按钮，只显示错误信息。 */
+    onRetry?: () => void;
+    loadingText?: string;
+    errorText?: string;
+    retryText?: string;
+    className?: string;
+    children: ReactNode;
+};
+export default function AsyncSection({ loading, error, onRetry, loadingText, errorText, retryText, className, children, }: AsyncSectionProps): import("react").JSX.Element;
+export type { AsyncSectionProps };

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

@@ -0,0 +1,2 @@
+export { default as AsyncSection } from './AsyncSection';
+export type { AsyncSectionProps } from './AsyncSection';

package/dist/types/index.d.ts

@@ -181,6 +181,8 @@ export { DiffViewer } from './components/DiffViewer';
 export type { DiffViewerProps, DiffLine } from './components/DiffViewer';
 export { LogViewer } from './components/LogViewer';
 export type { LogViewerProps, LogEntry, LogLevel } from './components/LogViewer';
+export { AsyncSection } from './components/AsyncSection';
+export type { AsyncSectionProps } from './components/AsyncSection';
 export { FormItem } from './form';
 export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemOwnProps, FormItemProps, FormItemRawElement, FormItemRawElementBinding, FormInstance, PathValueOf, } from './form';
 export { useControl } from 'react-use-control';

package/package.json

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