haze-ui 1.9.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -5
- package/dist/components/Accordion/Accordion.js +1 -0
- package/dist/components/Accordion/AccordionItem.js +1 -0
- package/dist/components/Affix/Affix.js +1 -0
- package/dist/components/Alert/Alert.js +1 -0
- package/dist/components/ApprovalCard/ApprovalCard.js +1 -0
- package/dist/components/AspectRatio/AspectRatio.js +1 -0
- package/dist/components/Avatar/Avatar.js +1 -0
- package/dist/components/BackToTop/BackToTop.js +1 -0
- package/dist/components/Badge/Badge.js +1 -0
- package/dist/components/Banner/Banner.js +1 -0
- package/dist/components/BottomSheet/BottomSheet.js +1 -0
- package/dist/components/Breadcrumb/Breadcrumb.js +1 -0
- package/dist/components/Breadcrumb/BreadcrumbItem.js +1 -0
- package/dist/components/Button/Button.js +1 -0
- package/dist/components/Card/Card.js +1 -0
- package/dist/components/Carousel/Carousel.js +1 -0
- package/dist/components/Carousel/CarouselSlide.js +1 -0
- package/dist/components/ChatContainer/ChatContainer.js +1 -0
- package/dist/components/ChatInput/ChatInput.js +1 -0
- package/dist/components/ChatMessage/ChatMessage.js +1 -0
- package/dist/components/Checkbox/Checkbox.js +1 -0
- package/dist/components/Chip/Chip.js +1 -0
- package/dist/components/CodeBlock/CodeBlock.js +1 -0
- package/dist/components/Collapsible/Collapsible.js +1 -0
- package/dist/components/ColorPicker/ColorPicker.js +1 -0
- package/dist/components/Combobox/Combobox.js +1 -0
- package/dist/components/Combobox/ComboboxOption.js +1 -0
- package/dist/components/Command/Command.js +1 -0
- package/dist/components/ConfirmDialog/ConfirmDialog.js +1 -0
- package/dist/components/Container/Container.js +1 -0
- package/dist/components/ContextMenu/ContextMenu.js +1 -0
- package/dist/components/ContextMenu/ContextMenuContent.js +1 -0
- package/dist/components/ContextMenu/ContextMenuItem.js +1 -0
- package/dist/components/ContextMenu/ContextMenuSeparator.js +1 -0
- package/dist/components/ContextMenu/ContextMenuTrigger.js +1 -0
- package/dist/components/ConversationList/ConversationItem.js +1 -0
- package/dist/components/ConversationList/ConversationList.js +1 -0
- package/dist/components/DateRangePicker/DateRangePicker.js +1 -0
- package/dist/components/Datepicker/Calendar.js +1 -0
- package/dist/components/Datepicker/Datepicker.js +1 -0
- package/dist/components/Dialog/Dialog.js +1 -0
- package/dist/components/DiffViewer/DiffViewer.js +1 -0
- package/dist/components/Disclosure/Disclosure.js +1 -0
- package/dist/components/Divider/Divider.js +1 -0
- package/dist/components/Drawer/Drawer.js +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +1 -0
- package/dist/components/DropdownMenu/DropdownMenuContent.js +1 -0
- package/dist/components/DropdownMenu/DropdownMenuItem.js +1 -0
- package/dist/components/DropdownMenu/DropdownMenuSeparator.js +1 -0
- package/dist/components/DropdownMenu/DropdownMenuTrigger.js +1 -0
- package/dist/components/Empty/Empty.js +1 -0
- package/dist/components/FileInput/FileInput.js +1 -0
- package/dist/components/Flex/Flex.js +1 -0
- package/dist/components/Grid/Grid.js +1 -0
- package/dist/components/Icon/Icon.js +1 -0
- package/dist/components/Image/Image.js +1 -0
- package/dist/components/InlineEdit/InlineEdit.js +1 -0
- package/dist/components/Input/Input.js +1 -0
- package/dist/components/List/List.js +1 -0
- package/dist/components/List/ListItem.js +1 -0
- package/dist/components/LogViewer/LogViewer.js +1 -0
- package/dist/components/MarkdownRenderer/MarkdownRenderer.js +1 -0
- package/dist/components/Menu/Menu.js +1 -0
- package/dist/components/Menu/MenuDivider.js +1 -0
- package/dist/components/Menu/MenuItem.js +1 -0
- package/dist/components/ModelPicker/ModelPicker.js +1 -0
- package/dist/components/NavigationBar/NavLink.js +13 -9
- package/dist/components/NavigationBar/NavigationBar.js +1 -0
- package/dist/components/NumberInput/NumberInput.js +1 -0
- package/dist/components/OTPInput/OTPInput.js +1 -0
- package/dist/components/Pagination/Pagination.js +1 -0
- package/dist/components/PasswordInput/PasswordInput.js +1 -0
- package/dist/components/Popover/Popover.js +1 -0
- package/dist/components/Progress/Progress.js +1 -0
- package/dist/components/Radio/Radio.js +1 -0
- package/dist/components/Radio/RadioGroup.js +1 -0
- package/dist/components/Rating/Rating.js +1 -0
- package/dist/components/Resizable/Resizable.js +1 -0
- package/dist/components/ScrollArea/ScrollArea.js +1 -0
- package/dist/components/Segmented/Segmented.js +1 -0
- package/dist/components/Select/Select.js +1 -0
- package/dist/components/Skeleton/Skeleton.js +1 -0
- package/dist/components/Slider/Slider.js +1 -0
- package/dist/components/Spinner/Spinner.js +1 -0
- package/dist/components/Stat/Stat.js +1 -0
- package/dist/components/StepTimeline/StepTimeline.js +1 -0
- package/dist/components/Stepper/Step.js +1 -0
- package/dist/components/Stepper/Stepper.js +1 -0
- package/dist/components/StreamingText/StreamingText.js +1 -0
- package/dist/components/SwipeAction/SwipeAction.js +1 -0
- package/dist/components/Switch/Switch.js +1 -0
- package/dist/components/Table/Table.js +1 -0
- package/dist/components/Table/TableBody.js +1 -0
- package/dist/components/Table/TableHead.js +1 -0
- package/dist/components/Tabs/Tab.js +1 -0
- package/dist/components/Tabs/TabList.js +1 -0
- package/dist/components/Tabs/TabPanel.js +1 -0
- package/dist/components/Tabs/Tabs.js +1 -0
- package/dist/components/Tag/Tag.js +1 -0
- package/dist/components/TagGroup/TagGroup.js +1 -0
- package/dist/components/TagGroup/TagGroupItem.js +1 -0
- package/dist/components/TagInput/TagInput.js +1 -0
- package/dist/components/Textarea/Textarea.js +1 -0
- package/dist/components/ThinkingIndicator/ThinkingIndicator.js +1 -0
- package/dist/components/TimePicker/TimePicker.js +1 -0
- package/dist/components/Timeline/Timeline.js +1 -0
- package/dist/components/Toast/Toast.js +1 -0
- package/dist/components/Toast/ToastContainer.js +1 -0
- package/dist/components/TokenCounter/TokenCounter.js +1 -0
- package/dist/components/ToolCallCard/ToolCallCard.js +1 -0
- package/dist/components/Tooltip/Tooltip.js +1 -0
- package/dist/components/Transfer/Transfer.js +1 -0
- package/dist/components/Tree/Tree.js +1 -0
- package/dist/components/Tree/TreeItem.js +1 -0
- package/dist/components/Typography/Typography.js +1 -0
- package/dist/components/Upload/Upload.js +1 -0
- package/dist/components/VirtualList/VirtualList.js +1 -0
- package/dist/css/accordion.css +3 -0
- package/dist/css/affix.css +2 -0
- package/dist/css/alert.css +2 -0
- package/dist/css/approval-card.css +2 -0
- package/dist/css/aspect-ratio.css +2 -0
- package/dist/css/avatar.css +2 -0
- package/dist/css/back-to-top.css +2 -0
- package/dist/css/badge.css +2 -0
- package/dist/css/banner.css +2 -0
- package/dist/css/bottom-sheet.css +2 -0
- package/dist/css/breadcrumb.css +3 -0
- package/dist/css/button.css +2 -0
- package/dist/css/card.css +2 -0
- package/dist/css/carousel.css +3 -0
- package/dist/css/chat-container.css +2 -0
- package/dist/css/chat-input.css +2 -0
- package/dist/css/chat-message.css +2 -0
- package/dist/css/checkbox.css +2 -0
- package/dist/css/chip.css +2 -0
- package/dist/css/code-block.css +2 -0
- package/dist/css/collapsible.css +2 -0
- package/dist/css/color-picker.css +2 -0
- package/dist/css/combobox.css +3 -0
- package/dist/css/command.css +2 -0
- package/dist/css/confirm-dialog.css +2 -0
- package/dist/css/container.css +2 -0
- package/dist/css/context-menu.css +6 -0
- package/dist/css/conversation-list.css +3 -0
- package/dist/css/date-range-picker.css +2 -0
- package/dist/css/datepicker.css +3 -0
- package/dist/css/dialog.css +2 -0
- package/dist/css/diff-viewer.css +2 -0
- package/dist/css/disclosure.css +2 -0
- package/dist/css/divider.css +2 -0
- package/dist/css/drawer.css +2 -0
- package/dist/css/dropdown-menu.css +6 -0
- package/dist/css/empty.css +2 -0
- package/dist/css/file-input.css +2 -0
- package/dist/css/flex.css +2 -0
- package/dist/css/form.css +2 -0
- package/dist/css/grid.css +2 -0
- package/dist/css/icon.css +2 -0
- package/dist/css/image.css +2 -0
- package/dist/css/inline-edit.css +2 -0
- package/dist/css/input.css +2 -0
- package/dist/css/list.css +3 -0
- package/dist/css/log-viewer.css +2 -0
- package/dist/css/markdown-renderer.css +2 -0
- package/dist/css/menu.css +4 -0
- package/dist/css/model-picker.css +2 -0
- package/dist/css/navigation-bar.css +3 -0
- package/dist/css/number-input.css +2 -0
- package/dist/css/otp-input.css +2 -0
- package/dist/css/pagination.css +2 -0
- package/dist/css/password-input.css +2 -0
- package/dist/css/popover.css +2 -0
- package/dist/css/progress.css +2 -0
- package/dist/css/radio.css +3 -0
- package/dist/css/rating.css +2 -0
- package/dist/css/resizable.css +2 -0
- package/dist/css/scroll-area.css +2 -0
- package/dist/css/segmented.css +2 -0
- package/dist/css/select.css +2 -0
- package/dist/css/skeleton.css +2 -0
- package/dist/css/slider.css +2 -0
- package/dist/css/spinner.css +2 -0
- package/dist/css/stat.css +2 -0
- package/dist/css/step-timeline.css +2 -0
- package/dist/css/stepper.css +3 -0
- package/dist/css/streaming-text.css +2 -0
- package/dist/css/swipe-action.css +2 -0
- package/dist/css/switch.css +2 -0
- package/dist/css/table.css +4 -0
- package/dist/css/tabs.css +5 -0
- package/dist/css/tag-group.css +3 -0
- package/dist/css/tag-input.css +2 -0
- package/dist/css/tag.css +2 -0
- package/dist/css/textarea.css +2 -0
- package/dist/css/thinking-indicator.css +2 -0
- package/dist/css/time-picker.css +2 -0
- package/dist/css/timeline.css +2 -0
- package/dist/css/toast.css +3 -0
- package/dist/css/token-counter.css +2 -0
- package/dist/css/tokens.css +4 -0
- package/dist/css/tool-call-card.css +2 -0
- package/dist/css/tooltip.css +2 -0
- package/dist/css/transfer.css +2 -0
- package/dist/css/tree.css +3 -0
- package/dist/css/typography.css +2 -0
- package/dist/css/upload.css +2 -0
- package/dist/css/virtual-list.css +2 -0
- package/dist/form/FormItem.js +1 -0
- package/dist/haze-ui.css +121 -2
- package/dist/index.js +4 -2
- package/dist/tokens/colors.js +1 -0
- package/dist/tokens/spacing.js +1 -0
- package/dist/tokens/typography.js +1 -0
- package/dist/types/components/NavigationBar/NavLink.d.ts +36 -4
- package/dist/types/index.d.ts +2 -0
- package/package.json +14 -17
- package/dist/form.js +0 -3
package/README.md
CHANGED
|
@@ -26,7 +26,17 @@ pnpm add haze-ui
|
|
|
26
26
|
|
|
27
27
|
### Usage
|
|
28
28
|
|
|
29
|
+
Import the component and its CSS. Two CSS loading modes:
|
|
30
|
+
|
|
29
31
|
```jsx
|
|
32
|
+
// Full stylesheet (simplest, ~12kB gzipped)
|
|
33
|
+
import 'haze-ui/styles.css';
|
|
34
|
+
import { lightTheme, spacing, typography, Button } from 'haze-ui';
|
|
35
|
+
|
|
36
|
+
// …or per-component CSS (pay only for what you render).
|
|
37
|
+
// Always load tokens.css once, then each component you use:
|
|
38
|
+
import 'haze-ui/css/tokens.css';
|
|
39
|
+
import 'haze-ui/css/button.css';
|
|
30
40
|
import { Button } from 'haze-ui';
|
|
31
41
|
|
|
32
42
|
export default function MyComponent() {
|
|
@@ -34,9 +44,15 @@ export default function MyComponent() {
|
|
|
34
44
|
}
|
|
35
45
|
```
|
|
36
46
|
|
|
47
|
+
Component CSS files are kebab-case versions of the component name
|
|
48
|
+
(`OTPInput` → `haze-ui/css/otp-input.css`). Per-component files only
|
|
49
|
+
cover that component's rules — tokens (themes, spacing, typography)
|
|
50
|
+
always come from `haze-ui/css/tokens.css`.
|
|
51
|
+
|
|
37
52
|
## react-f0rm Integration
|
|
38
53
|
|
|
39
|
-
The
|
|
54
|
+
The form layer (`FormItem`, `useFormControl`; peer dependency
|
|
55
|
+
`react-f0rm`) is exported from the main barrel and glues react-f0rm
|
|
40
56
|
form state to haze-ui's control-prop system, so any control-prop
|
|
41
57
|
component (`Input`, `Select`, `Switch`, `Textarea`, `TagInput`, ...)
|
|
42
58
|
binds to a form field with zero adapters.
|
|
@@ -45,8 +61,7 @@ binds to a form field with zero adapters.
|
|
|
45
61
|
|
|
46
62
|
```jsx
|
|
47
63
|
import { useForm, setValue } from 'react-f0rm';
|
|
48
|
-
import { Input } from 'haze-ui';
|
|
49
|
-
import { useFormControl } from 'haze-ui/form';
|
|
64
|
+
import { Input, useFormControl } from 'haze-ui';
|
|
50
65
|
|
|
51
66
|
function NameField({ form }) {
|
|
52
67
|
const name = useFormControl(form, 'name');
|
|
@@ -63,8 +78,7 @@ re-seeds every bridged control with no remounting.
|
|
|
63
78
|
|
|
64
79
|
```jsx
|
|
65
80
|
import { Form, useForm } from 'react-f0rm';
|
|
66
|
-
import { Input } from 'haze-ui';
|
|
67
|
-
import { FormItem } from 'haze-ui/form';
|
|
81
|
+
import { FormItem, Input } from 'haze-ui';
|
|
68
82
|
|
|
69
83
|
function ProfileForm() {
|
|
70
84
|
const form = useForm({ initialValues: { email: '' } });
|
|
@@ -1,22 +1,26 @@
|
|
|
1
|
+
import "./NavLink.wyw-in-js.css";
|
|
1
2
|
import { classnames as e } from "../../utils/classnames.js";
|
|
2
3
|
/* empty css */
|
|
3
4
|
import { jsx as t } from "react/jsx-runtime";
|
|
5
|
+
import { forwardRef as n } from "react";
|
|
4
6
|
//#region src/lib/components/NavigationBar/NavLink.tsx
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
+
var r = "haze-NavLink__link", i = "haze-NavLink__activeLink", a = n(function({ href: n = "#", active: a, children: o, onClick: s, className: c, "aria-current": l, ...u }, d) {
|
|
8
|
+
let f = a ?? l === "page";
|
|
7
9
|
return /* @__PURE__ */ t("a", {
|
|
8
|
-
|
|
10
|
+
ref: d,
|
|
11
|
+
href: n,
|
|
12
|
+
"aria-current": f ? "page" : l,
|
|
9
13
|
onClick: (e) => {
|
|
10
|
-
|
|
14
|
+
n === "#" && e.preventDefault(), s?.(e);
|
|
11
15
|
},
|
|
12
|
-
|
|
16
|
+
...u,
|
|
13
17
|
className: e([
|
|
14
|
-
|
|
15
|
-
|
|
18
|
+
r,
|
|
19
|
+
f && i,
|
|
16
20
|
c
|
|
17
21
|
]),
|
|
18
22
|
children: o
|
|
19
23
|
});
|
|
20
|
-
}
|
|
24
|
+
});
|
|
21
25
|
//#endregion
|
|
22
|
-
export {
|
|
26
|
+
export { a as default };
|