haze-ui 1.11.0 → 1.12.0

package/README.md

@@ -137,6 +137,45 @@ submit needed. `mode` accepts `'onSubmit'`, `'onBlur'`, `'onChange'`,
 `'onTouched'` or `'all'`; only this field's schedule changes, the rest
 of the form keeps its own `mode`.
 
+#### `validateDebounce` / `delayError` / `rules` (react-f0rm ≥ 0.6)
+
+`FormItem` passes these field-level options straight through to
+react-f0rm's `useField`:
+
+- `validateDebounce={300}` — debounce this field's validation kicks:
+  only the last kick inside the window runs the validator (e.g. keeps a
+  per-keystroke async validator from firing while the user types fast).
+  While the timer is pending the field counts as validating, so
+  `trigger`/submit wait it out.
+- `delayError={500}` — delay *showing* a newly appearing error in the
+  rendered error span (and the binding's `invalid`/`errors`). The form's
+  error state stays immediate — submit and `getError` still gate on it.
+  An error that clears inside the window never shows.
+- `rules={{ required: 'Email is required', minLength: 4, pattern: { value: /@/, message: 'Must be an email' } }}`
+  — declarative constraints (a subset of react-hook-form's `register`
+  rules) compiled into a validator that runs *before* `validate`; both
+  sources' errors merge into the field's error list, rules errors ahead.
+
+```jsx
+<FormItem
+  form={form}
+  name="email"
+  label="Email"
+  validateDebounce={300}
+  delayError={500}
+  rules={{ required: 'Email is required' }}
+  validate={(v) => (v.includes('@') ? undefined : 'must be an email')}
+>
+  {({ id, errorId, invalid, control }) => (
+    <Input id={id} value={control} aria-invalid={invalid} aria-describedby={errorId} />
+  )}
+</FormItem>
+```
+
+All three are optional; omit them and the field behaves exactly as
+before (immediate validation per the form's `mode`, immediate error
+display, `validate`-only).
+
 ## Related Projects
 
 - [react-use-control](https://github.com/wmzy/react-use-control)

package/dist/components/Accordion/Accordion.js

@@ -1,4 +1,4 @@
-import "./Accordion.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Accordion/AccordionItem.js

@@ -1,4 +1,4 @@
-import "./AccordionItem.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Affix/Affix.js

@@ -1,4 +1,4 @@
-import "./Affix.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Alert/Alert.js

@@ -1,4 +1,4 @@
-import "./Alert.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/ApprovalCard/ApprovalCard.js

@@ -1,4 +1,4 @@
-import "./ApprovalCard.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                       */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/AspectRatio/AspectRatio.js

@@ -1,4 +1,4 @@
-import "./AspectRatio.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Avatar/Avatar.js

@@ -1,4 +1,4 @@
-import "./Avatar.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/BackToTop/BackToTop.js

@@ -1,4 +1,4 @@
-import "./BackToTop.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Badge/Badge.js

@@ -1,4 +1,4 @@
-import "./Badge.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Banner/Banner.js

@@ -1,4 +1,4 @@
-import "./Banner.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,4 +1,4 @@
-import "./BottomSheet.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,4 @@
-import "./Breadcrumb.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -1,4 +1,4 @@
-import "./BreadcrumbItem.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                         */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Button/Button.js

@@ -1,4 +1,4 @@
-import "./Button.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Card/Card.js

@@ -1,4 +1,4 @@
-import "./Card.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Carousel/Carousel.js

@@ -1,4 +1,4 @@
-import "./Carousel.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";

package/dist/components/Carousel/CarouselSlide.js

@@ -1,4 +1,4 @@
-import "./CarouselSlide.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ChatContainer/ChatContainer.js

@@ -1,4 +1,4 @@
-import "./ChatContainer.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ChatInput/ChatInput.js

@@ -1,4 +1,4 @@
-import "./ChatInput.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/ChatMessage/ChatMessage.js

@@ -1,4 +1,4 @@
-import "./ChatMessage.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import "./Checkbox.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Chip/Chip.js

@@ -1,4 +1,4 @@
-import "./Chip.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/CodeBlock/CodeBlock.js

@@ -1,4 +1,4 @@
-import "./CodeBlock.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Collapsible/Collapsible.js

@@ -1,4 +1,4 @@
-import "./Collapsible.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,4 +1,4 @@
-import "./ColorPicker.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Combobox/Combobox.js

@@ -1,4 +1,4 @@
-import "./Combobox.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import t from "./ComboboxOption.js";
 /* empty css                   */

package/dist/components/Combobox/ComboboxOption.js

@@ -1,4 +1,4 @@
-import "./ComboboxOption.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                         */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Command/Command.js

@@ -1,4 +1,4 @@
-import "./Command.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                  */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -1,4 +1,4 @@
-import "./ConfirmDialog.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Container/Container.js

@@ -1,4 +1,4 @@
-import "./Container.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,4 +1,4 @@
-import "./ContextMenu.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { ContextMenuProvider as t } from "./ContextMenuContext.js";
 /* empty css                      */

package/dist/components/ContextMenu/ContextMenuContent.js

@@ -1,4 +1,4 @@
-import "./ContextMenuContent.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { useContextMenuContext as t } from "./ContextMenuContext.js";
 /* empty css                             */

package/dist/components/ContextMenu/ContextMenuItem.js

@@ -1,4 +1,4 @@
-import "./ContextMenuItem.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { useContextMenuContext as t } from "./ContextMenuContext.js";
 /* empty css                          */

package/dist/components/ContextMenu/ContextMenuSeparator.js

@@ -1,4 +1,4 @@
-import "./ContextMenuSeparator.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ContextMenu/ContextMenuTrigger.js

@@ -1,4 +1,4 @@
-import "./ContextMenuTrigger.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { useContextMenuContext as t } from "./ContextMenuContext.js";
 /* empty css                             */

package/dist/components/ConversationList/ConversationItem.js

@@ -1,4 +1,4 @@
-import "./ConversationItem.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                           */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/ConversationList/ConversationList.js

@@ -1,4 +1,4 @@
-import "./ConversationList.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                           */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,4 +1,4 @@
-import "./DateRangePicker.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                          */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Datepicker/Calendar.js

@@ -1,4 +1,4 @@
-import "./Calendar.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Datepicker/Datepicker.js

@@ -1,4 +1,4 @@
-import "./Datepicker.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import t from "./Calendar.js";
 /* empty css                     */

package/dist/components/Dialog/Dialog.js

@@ -1,4 +1,4 @@
-import "./Dialog.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/DiffViewer/DiffViewer.js

@@ -1,4 +1,4 @@
-import "./DiffViewer.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Disclosure/Disclosure.js

@@ -1,4 +1,4 @@
-import "./Disclosure.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Divider/Divider.js

@@ -1,4 +1,4 @@
-import "./Divider.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                  */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Drawer/Drawer.js

@@ -1,4 +1,4 @@
-import "./Drawer.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,4 +1,4 @@
-import "./DropdownMenu.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { DropdownMenuProvider as t } from "./DropdownMenuContext.js";
 /* empty css                       */

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -1,4 +1,4 @@
-import "./DropdownMenuContent.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { useDropdownMenuContext as t } from "./DropdownMenuContext.js";
 import { getEnabledMenuItems as n, useMenuKeyboard as r } from "./useMenuKeyboard.js";

package/dist/components/DropdownMenu/DropdownMenuItem.js

@@ -1,4 +1,4 @@
-import "./DropdownMenuItem.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { useDropdownMenuContext as t } from "./DropdownMenuContext.js";
 /* empty css                           */

package/dist/components/DropdownMenu/DropdownMenuSeparator.js

@@ -1,4 +1,4 @@
-import "./DropdownMenuSeparator.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                                */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/DropdownMenu/DropdownMenuTrigger.js

@@ -1,4 +1,4 @@
-import "./DropdownMenuTrigger.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { useDropdownMenuContext as t } from "./DropdownMenuContext.js";
 import { getEnabledMenuItems as n } from "./useMenuKeyboard.js";

package/dist/components/Empty/Empty.js

@@ -1,4 +1,4 @@
-import "./Empty.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/FileInput/FileInput.js

@@ -1,4 +1,4 @@
-import "./FileInput.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Flex/Flex.js

@@ -1,4 +1,4 @@
-import "./Flex.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Grid/Grid.js

@@ -1,4 +1,4 @@
-import "./Grid.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Icon/Icon.js

@@ -1,4 +1,4 @@
-import "./Icon.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Image/Image.js

@@ -1,4 +1,4 @@
-import "./Image.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/InlineEdit/InlineEdit.js

@@ -1,4 +1,4 @@
-import "./InlineEdit.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Input/Input.js

@@ -1,4 +1,4 @@
-import "./Input.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/List/List.js

@@ -1,4 +1,4 @@
-import "./List.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/List/ListItem.js

@@ -1,4 +1,4 @@
-import "./ListItem.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/LogViewer/LogViewer.js

@@ -1,4 +1,4 @@
-import "./LogViewer.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/MarkdownRenderer/MarkdownRenderer.js

@@ -1,4 +1,4 @@
-import "./MarkdownRenderer.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                           */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Menu/Menu.js

@@ -1,4 +1,4 @@
-import "./Menu.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Menu/MenuDivider.js

@@ -1,4 +1,4 @@
-import "./MenuDivider.wyw-in-js.css";
+
 /* empty css                      */
 import { jsx as e } from "react/jsx-runtime";
 //#region src/lib/components/Menu/MenuDivider.tsx

package/dist/components/Menu/MenuItem.js

@@ -1,4 +1,4 @@
-import "./MenuItem.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/ModelPicker/ModelPicker.js

@@ -1,4 +1,4 @@
-import "./ModelPicker.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/NavigationBar/NavLink.js

@@ -1,4 +1,4 @@
-import "./NavLink.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                  */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/NavigationBar/NavigationBar.js

@@ -1,4 +1,4 @@
-import "./NavigationBar.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-import "./NumberInput.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/OTPInput/OTPInput.js

@@ -1,4 +1,4 @@
-import "./OTPInput.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Pagination/Pagination.js

@@ -1,4 +1,4 @@
-import "./Pagination.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/PasswordInput/PasswordInput.js

@@ -1,4 +1,4 @@
-import "./PasswordInput.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Popover/Popover.js

@@ -1,4 +1,4 @@
-import "./Popover.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                  */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Progress/Progress.js

@@ -1,4 +1,4 @@
-import "./Progress.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                   */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Radio/Radio.js

@@ -1,4 +1,4 @@
-import "./Radio.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { useRadioContext as t } from "./RadioContext.js";
 /* empty css                */

package/dist/components/Radio/RadioGroup.js

@@ -1,4 +1,4 @@
-import "./RadioGroup.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import { RadioProvider as t } from "./RadioContext.js";
 /* empty css                     */

package/dist/components/Rating/Rating.js

@@ -1,4 +1,4 @@
-import "./Rating.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";