haze-ui 1.20.0 → 1.22.0

package/README.md

@@ -49,6 +49,25 @@ Component CSS files are kebab-case versions of the component name
 cover that component's rules — tokens (themes, spacing, typography)
 always come from `haze-ui/css/tokens.css`.
 
+Don't hardcode that kebab-case rule in tooling: sub-components and cores
+share their directory's family file (`InputCore` → `input.css`,
+`ButtonLink` → `button.css`, `Title`/`Text` → `typography.css`). The
+authoritative export → css-file mapping ships as data:
+`haze-ui/css-manifest.json`, generated at build time by
+`scripts/split-css.mjs` from the actual CSS output (never hand-edited):
+
+```json
+{
+  "families": { "Button": "button", "ButtonLink": "button", "InputCore": "input", "useToast": "toast" },
+  "noCss": ["COMPONENT_TOKENS", "TOKEN_REGISTRY", "useControl", "useTitle"]
+}
+```
+
+`families` covers every named export that has styles (family absorption
+included); `noCss` lists pure-logic exports with no css of their own.
+Bundler plugins and codemods should read this manifest instead of
+re-deriving file names — the mapping changes in lockstep with the build.
+
 ## ButtonLink: a real anchor with the Button skin
 
 Navigation that must look like a button should still *be* a link —
@@ -106,6 +125,26 @@ import { AsyncSection } from 'haze-ui';
 </AsyncSection>
 ```
 
+## useTitle: view-level document.title
+
+`useTitle(title)` sets `document.title` while the view is mounted and
+restores the pre-entry title (the static `<title>` from the host page) on
+unmount. Two timing pitfalls are baked into the implementation: the write
+and the restore are two separate effects (a single `[title]` effect would
+restore the *previous round's* title, not the entry default, on every prop
+change), and the entry snapshot is taken at effect time, not render time —
+a route swap is one commit, so at render time the old view's cleanup has
+not run yet and `document.title` still holds the previous page.
+
+```jsx
+import { useTitle } from 'haze-ui';
+
+function SettingsView() {
+  useTitle('Settings');
+  // ...
+}
+```
+
 ## react-f0rm Integration
 
 react-f0rm owns form field state, and its headless `useField` hook is

package/dist/css-manifest.json

@@ -0,0 +1,167 @@
+{
+  "families": {
+    "Accordion": "accordion",
+    "AccordionItem": "accordion",
+    "Affix": "affix",
+    "Alert": "alert",
+    "ApprovalCard": "approval-card",
+    "AspectRatio": "aspect-ratio",
+    "AsyncSection": "async-section",
+    "Avatar": "avatar",
+    "BackToTop": "back-to-top",
+    "Badge": "badge",
+    "Banner": "banner",
+    "BottomSheet": "bottom-sheet",
+    "Breadcrumb": "breadcrumb",
+    "BreadcrumbItem": "breadcrumb",
+    "Button": "button",
+    "ButtonLink": "button",
+    "Card": "card",
+    "Carousel": "carousel",
+    "CarouselSlide": "carousel",
+    "ChatContainer": "chat-container",
+    "ChatInput": "chat-input",
+    "ChatMessage": "chat-message",
+    "Checkbox": "checkbox",
+    "CheckboxCore": "checkbox",
+    "Chip": "chip",
+    "CodeBlock": "code-block",
+    "Collapsible": "collapsible",
+    "CollapsibleContent": "collapsible",
+    "CollapsibleTrigger": "collapsible",
+    "ColorPicker": "color-picker",
+    "ColorPickerCore": "color-picker",
+    "Combobox": "combobox",
+    "Command": "command",
+    "CommandInput": "command",
+    "CommandItem": "command",
+    "CommandList": "command",
+    "ConfirmDialog": "confirm-dialog",
+    "Container": "container",
+    "ContextMenu": "context-menu",
+    "ContextMenuContent": "context-menu",
+    "ContextMenuItem": "context-menu",
+    "ContextMenuSeparator": "context-menu",
+    "ContextMenuTrigger": "context-menu",
+    "ConversationItem": "conversation-list",
+    "ConversationList": "conversation-list",
+    "DateRangePicker": "date-range-picker",
+    "DateRangePickerCore": "date-range-picker",
+    "Datepicker": "datepicker",
+    "DatepickerCore": "datepicker",
+    "Dialog": "dialog",
+    "DiffViewer": "diff-viewer",
+    "Disclosure": "disclosure",
+    "Divider": "divider",
+    "Drawer": "drawer",
+    "DropdownMenu": "dropdown-menu",
+    "DropdownMenuContent": "dropdown-menu",
+    "DropdownMenuItem": "dropdown-menu",
+    "DropdownMenuSeparator": "dropdown-menu",
+    "DropdownMenuTrigger": "dropdown-menu",
+    "Empty": "empty",
+    "FileInput": "file-input",
+    "Flex": "flex",
+    "FormItem": "form",
+    "Grid": "grid",
+    "GridItem": "grid",
+    "Icon": "icon",
+    "Image": "image",
+    "InlineEdit": "inline-edit",
+    "Input": "input",
+    "InputCore": "input",
+    "List": "list",
+    "ListItem": "list",
+    "LogViewer": "log-viewer",
+    "MarkdownRenderer": "markdown-renderer",
+    "Menu": "menu",
+    "MenuDivider": "menu",
+    "MenuItem": "menu",
+    "ModelPicker": "model-picker",
+    "NavLink": "navigation-bar",
+    "NavigationBar": "navigation-bar",
+    "NumberInput": "number-input",
+    "NumberInputCore": "number-input",
+    "OTPInput": "otp-input",
+    "OTPInputCore": "otp-input",
+    "Option": "select",
+    "Pagination": "pagination",
+    "Paragraph": "typography",
+    "PasswordInput": "password-input",
+    "PasswordInputCore": "password-input",
+    "Popover": "popover",
+    "Progress": "progress",
+    "Radio": "radio",
+    "RadioGroup": "radio",
+    "RadioGroupCore": "radio",
+    "Rating": "rating",
+    "RatingCore": "rating",
+    "ResizableGroup": "resizable",
+    "ResizableHandle": "resizable",
+    "ResizablePanel": "resizable",
+    "ScrollArea": "scroll-area",
+    "Segmented": "segmented",
+    "SegmentedCore": "segmented",
+    "Select": "select",
+    "SelectCore": "select",
+    "Skeleton": "skeleton",
+    "Slider": "slider",
+    "SliderCore": "slider",
+    "Spinner": "spinner",
+    "Stat": "stat",
+    "StatGroup": "stat",
+    "Step": "stepper",
+    "StepTimeline": "step-timeline",
+    "StepTimelineItem": "step-timeline",
+    "Stepper": "stepper",
+    "StreamingText": "streaming-text",
+    "SwipeAction": "swipe-action",
+    "Switch": "switch",
+    "SwitchCore": "switch",
+    "Tab": "tabs",
+    "TabList": "tabs",
+    "TabPanel": "tabs",
+    "Table": "table",
+    "TableBody": "table",
+    "TableCell": "table",
+    "TableHead": "table",
+    "TableRow": "table",
+    "Tabs": "tabs",
+    "Tag": "tag",
+    "TagGroup": "tag-group",
+    "TagGroupItem": "tag-group",
+    "TagInput": "tag-input",
+    "TagInputCore": "tag-input",
+    "Text": "typography",
+    "Textarea": "textarea",
+    "TextareaCore": "textarea",
+    "ThinkingIndicator": "thinking-indicator",
+    "TimePicker": "time-picker",
+    "TimePickerCore": "time-picker",
+    "Timeline": "timeline",
+    "TimelineItem": "timeline",
+    "Title": "typography",
+    "Toast": "toast",
+    "ToastContainer": "toast",
+    "TokenCounter": "token-counter",
+    "ToolCallCard": "tool-call-card",
+    "Tooltip": "tooltip",
+    "Transfer": "transfer",
+    "TransferCore": "transfer",
+    "Tree": "tree",
+    "Upload": "upload",
+    "UploadCore": "upload",
+    "VirtualList": "virtual-list",
+    "darkTheme": "tokens",
+    "lightTheme": "tokens",
+    "spacing": "tokens",
+    "typography": "tokens",
+    "useToast": "toast"
+  },
+  "noCss": [
+    "COMPONENT_TOKENS",
+    "TOKEN_REGISTRY",
+    "useControl",
+    "useTitle"
+  ]
+}

package/dist/hooks/useTitle.js

@@ -0,0 +1,12 @@
+import { useEffect as e, useRef as t } from "react";
+//#region src/lib/hooks/useTitle.ts
+function n(n) {
+	let r = t(null);
+	e(() => {
+		r.current === null && (r.current = document.title), document.title = n;
+	}, [n]), e(() => () => {
+		r.current !== null && (document.title = r.current);
+	}, []);
+}
+//#endregion
+export { n as useTitle };

package/dist/index.js

@@ -142,6 +142,7 @@ import Kt from "./components/ConversationList/ConversationItem.js";
 import qt from "./components/DiffViewer/DiffViewer.js";
 import Jt from "./components/LogViewer/LogViewer.js";
 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 };
+import { useTitle as Xt } from "./hooks/useTitle.js";
+import Zt from "./form/FormItem.js";
+import { useControl as Qt } 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, Zt 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, Qt as useControl, Xt as useTitle, $ as useToast };

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

@@ -0,0 +1 @@
+export { useTitle } from './useTitle';

package/dist/types/hooks/useTitle.d.ts

@@ -0,0 +1 @@
+export declare function useTitle(title: string): void;

package/dist/types/index.d.ts

@@ -183,6 +183,7 @@ 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 { useTitle } from './hooks';
 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.20.0",
+  "version": "1.22.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -28,7 +28,8 @@
       "default": "./dist/tokens/index.js"
     },
     "./styles.css": "./dist/haze-ui.css",
-    "./css/*": "./dist/css/*"
+    "./css/*": "./dist/css/*",
+    "./css-manifest.json": "./dist/css-manifest.json"
   },
   "files": [
     "dist"