haze-ui 1.11.0 → 1.12.0

package/dist/components/Resizable/Resizable.js

@@ -1,4 +1,4 @@
-import "./Resizable.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/ScrollArea/ScrollArea.js

@@ -1,4 +1,4 @@
-import "./ScrollArea.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/Segmented/Segmented.js

@@ -1,4 +1,4 @@
-import "./Segmented.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/Select/Select.js

@@ -1,4 +1,4 @@
-import "./Select.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/Skeleton/Skeleton.js

@@ -1,4 +1,4 @@
-import "./Skeleton.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/Slider/Slider.js

@@ -1,4 +1,4 @@
-import "./Slider.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/Spinner/Spinner.js

@@ -1,4 +1,4 @@
-import "./Spinner.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/Stat/Stat.js

@@ -1,4 +1,4 @@
-import "./Stat.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/StepTimeline/StepTimeline.js

@@ -1,4 +1,4 @@
-import "./StepTimeline.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/Stepper/Step.js

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

package/dist/components/Stepper/Stepper.js

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

package/dist/components/StreamingText/StreamingText.js

@@ -1,4 +1,4 @@
-import "./StreamingText.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/SwipeAction/SwipeAction.js

@@ -1,4 +1,4 @@
-import "./SwipeAction.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/Switch/Switch.js

@@ -1,4 +1,4 @@
-import "./Switch.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/Table/Table.js

@@ -1,4 +1,4 @@
-import "./Table.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/Table/TableBody.js

@@ -1,4 +1,4 @@
-import "./TableBody.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/Table/TableHead.js

@@ -1,4 +1,4 @@
-import "./TableHead.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/Tabs/Tab.js

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

package/dist/components/Tabs/TabList.js

@@ -1,4 +1,4 @@
-import "./TabList.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/Tabs/TabPanel.js

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

package/dist/components/Tabs/Tabs.js

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

package/dist/components/Tag/Tag.js

@@ -1,4 +1,4 @@
-import "./Tag.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/TagGroup/TagGroup.js

@@ -1,4 +1,4 @@
-import "./TagGroup.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/TagGroup/TagGroupItem.js

@@ -1,4 +1,4 @@
-import "./TagGroupItem.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/TagInput/TagInput.js

@@ -1,4 +1,4 @@
-import "./TagInput.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/Textarea/Textarea.js

@@ -1,4 +1,4 @@
-import "./Textarea.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/ThinkingIndicator/ThinkingIndicator.js

@@ -1,4 +1,4 @@
-import "./ThinkingIndicator.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/TimePicker/TimePicker.js

@@ -1,4 +1,4 @@
-import "./TimePicker.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/Timeline/Timeline.js

@@ -1,4 +1,4 @@
-import "./Timeline.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/Toast/Toast.js

@@ -1,4 +1,4 @@
-import "./Toast.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/Toast/ToastContainer.js

@@ -1,4 +1,4 @@
-import "./ToastContainer.wyw-in-js.css";
+
 import e from "./Toast.js";
 import { ToastProvider as t } from "./ToastContext.js";
 /* empty css                         */

package/dist/components/TokenCounter/TokenCounter.js

@@ -1,4 +1,4 @@
-import "./TokenCounter.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/ToolCallCard/ToolCallCard.js

@@ -1,4 +1,4 @@
-import "./ToolCallCard.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/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-import "./Tooltip.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/Transfer/Transfer.js

@@ -1,4 +1,4 @@
-import "./Transfer.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/Tree/Tree.js

@@ -1,4 +1,4 @@
-import "./Tree.wyw-in-js.css";
+
 import { classnames as e } from "../../utils/classnames.js";
 import t from "./TreeItem.js";
 import { findNodeByKey as n, getChildKeys as r, getParentKey as i } from "./utils.js";

package/dist/components/Tree/TreeItem.js

@@ -1,4 +1,4 @@
-import "./TreeItem.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/Typography/Typography.js

@@ -1,4 +1,4 @@
-import "./Typography.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/Upload/Upload.js

@@ -1,4 +1,4 @@
-import "./Upload.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/VirtualList/VirtualList.js

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

package/dist/form/FormItem.js

@@ -1,43 +1,46 @@
-import "./FormItem.wyw-in-js.css";
+
 import { classnames as e } from "../utils/classnames.js";
 import { useFormControl as t } from "./useFormControl.js";
 /* empty css                   */
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { useId as i } from "react";
-import { useField as a, useFieldErrors as o } from "react-f0rm";
+import { useField as a } from "react-f0rm";
 //#region src/lib/form/FormItem.tsx
-var s = "haze-FormItem__item", c = "haze-FormItem__labelText", l = "haze-FormItem__errorText";
-function u({ form: u, name: d, label: f, validate: p, mode: m, className: h, children: g }) {
-	let _ = `haze-field-${i()}`, v = `${_}-error`, { onBlur: y } = a({
-		form: u,
-		name: d,
-		validate: p,
-		mode: m
-	}), b = o(u, d), x = t(u, d), S = b.length > 0;
+var o = "haze-FormItem__item", s = "haze-FormItem__labelText", c = "haze-FormItem__errorText";
+function l({ form: l, name: u, label: d, validate: f, mode: p, validateDebounce: m, delayError: h, rules: g, className: _, children: v }) {
+	let y = `haze-field-${i()}`, b = `${y}-error`, { onBlur: x, errors: S } = a({
+		form: l,
+		name: u,
+		validate: f,
+		mode: p,
+		validateDebounce: m,
+		delayError: h,
+		rules: g
+	}), C = t(l, u), w = S.length > 0;
 	return /* @__PURE__ */ r("div", {
-		className: e([s, h]),
+		className: e([o, _]),
 		children: [
-			f !== void 0 && /* @__PURE__ */ n("label", {
-				htmlFor: _,
-				className: e(c),
-				children: f
+			d !== void 0 && /* @__PURE__ */ n("label", {
+				htmlFor: y,
+				className: e(s),
+				children: d
 			}),
-			g({
-				id: _,
-				errorId: v,
-				invalid: S,
-				errors: b,
-				onBlur: y,
-				control: x
+			v({
+				id: y,
+				errorId: b,
+				invalid: w,
+				errors: S,
+				onBlur: x,
+				control: C
 			}),
-			S && /* @__PURE__ */ n("span", {
-				id: v,
+			w && /* @__PURE__ */ n("span", {
+				id: b,
 				role: "alert",
-				className: e(l),
-				children: b[0].message
+				className: e(c),
+				children: S[0].message
 			})
 		]
 	});
 }
 //#endregion
-export { u as default };
+export { l as default };

package/dist/tokens/colors.js

@@ -1,4 +1,4 @@
-import "./colors.wyw-in-js.css";
+
 /* empty css                 */
 //#region src/lib/tokens/colors.ts
 var e = "haze-colors__lightTheme", t = "haze-colors__darkTheme";

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-import "./spacing.wyw-in-js.css";
+
 /* empty css                  */
 //#region src/lib/tokens/spacing.ts
 var e = "haze-spacing__spacing";

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-import "./typography.wyw-in-js.css";
+
 /* empty css                     */
 //#region src/lib/tokens/typography.ts
 var e = "haze-typography__typography";

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { FieldError, FieldPath, Name, ValidationMode } from 'react-f0rm';
+import type { FieldError, FieldPath, FieldRules, Name, ValidationMode } from 'react-f0rm';
 import type { Control } from 'react-use-control';
 import type { FormInstance, PathValueOf } from './useFormControl';
 /**
@@ -41,6 +41,23 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
      * of the form's `mode`; other fields are unaffected. Omit to keep the
      * form-wide behavior. */
     mode?: ValidationMode;
+    /** Milliseconds to debounce this field's validation kicks (react-f0rm
+     * ≥0.6): only the last kick inside the window runs the validator — e.g.
+     * `300` keeps a fast typist from firing a per-keystroke async validator.
+     * While the timer is pending the field counts as validating. Omit for
+     * immediate validation (react-f0rm's default). */
+    validateDebounce?: number;
+    /** Milliseconds to delay *showing* a newly appearing error in the render
+     * layer (react-f0rm ≥0.6): the form's error state stays immediate —
+     * submit/trigger still gate on it — only the rendered error span and
+     * `invalid` wait out the window. An error that clears inside the window
+     * never shows. Omit for immediate display. */
+    delayError?: number;
+    /** Declarative rules (required/min/max/minLength/maxLength/pattern;
+     * react-f0rm ≥0.6), compiled into a validator that runs *before*
+     * `validate` — both sources' errors merge, rules errors ahead. Omit for
+     * `validate`-only validation. */
+    rules?: FieldRules;
     className?: string;
     children: (binding: FormItemBinding<TValues, P>) => ReactNode;
 };
@@ -61,4 +78,4 @@ export type FormItemProps<TValues extends Record<string, any> = any, P extends F
  * `<span id={errorId} role='alert'>` next to the children; with no errors
  * no extra element is rendered.
  */
-export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, className, children }: FormItemProps<TValues, P>): import("react").JSX.Element;
+export default function FormItem<TValues extends Record<string, any> = any, P extends FieldPath<TValues> | Name = Name>({ form, name, label, validate, mode, validateDebounce, delayError, rules, className, children }: FormItemProps<TValues, P>): import("react").JSX.Element;

package/package.json

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