haze-ui 1.28.0 → 1.30.0

package/dist/design-tokens/violet-light.json

@@ -0,0 +1,355 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "haze": {
+    "color": {
+      "primary": {
+        "$type": "color",
+        "$value": "oklch(0.541 0.247 293.0)",
+        "$description": "Primary"
+      },
+      "primary-hover": {
+        "$type": "color",
+        "$value": "oklch(0.496 0.247 293.0)",
+        "$description": "Primary Hover"
+      },
+      "primary-active": {
+        "$type": "color",
+        "$value": "oklch(0.451 0.247 293.0)",
+        "$description": "Primary Active"
+      },
+      "primary-subtle": {
+        "$type": "color",
+        "$value": "oklch(0.945 0.029 293.0)",
+        "$description": "Primary Subtle"
+      },
+      "bg": {
+        "$type": "color",
+        "$value": "oklch(1.000 0.000 0.0)",
+        "$description": "Background"
+      },
+      "bg-subtle": {
+        "$type": "color",
+        "$value": "oklch(0.979 0.000 0.0)",
+        "$description": "Background Subtle"
+      },
+      "bg-muted": {
+        "$type": "color",
+        "$value": "oklch(0.955 0.000 0.0)",
+        "$description": "Background Muted"
+      },
+      "text": {
+        "$type": "color",
+        "$value": "oklch(0.218 0.000 0.0)",
+        "$description": "Text"
+      },
+      "text-secondary": {
+        "$type": "color",
+        "$value": "oklch(0.409 0.000 0.0)",
+        "$description": "Text Secondary"
+      },
+      "text-muted": {
+        "$type": "color",
+        "$value": "oklch(0.625 0.000 0.0)",
+        "$description": "Text Muted"
+      },
+      "text-inverse": {
+        "$type": "color",
+        "$value": "oklch(1.000 0.000 0.0)",
+        "$description": "Text Inverse"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "oklch(0.907 0.000 0.0)",
+        "$description": "Border"
+      },
+      "border-hover": {
+        "$type": "color",
+        "$value": "oklch(0.817 0.000 0.0)",
+        "$description": "Border Hover"
+      },
+      "success": {
+        "$type": "color",
+        "$value": "oklch(0.527 0.137 150.1)",
+        "$description": "Success"
+      },
+      "success-hover": {
+        "$type": "color",
+        "$value": "oklch(0.482 0.132 150.1)",
+        "$description": "Success Hover"
+      },
+      "success-active": {
+        "$type": "color",
+        "$value": "oklch(0.437 0.120 150.1)",
+        "$description": "Success Active"
+      },
+      "success-subtle": {
+        "$type": "color",
+        "$value": "oklch(0.945 0.027 150.1)",
+        "$description": "Success Subtle"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "oklch(0.769 0.165 70.1)",
+        "$description": "Warning"
+      },
+      "warning-hover": {
+        "$type": "color",
+        "$value": "oklch(0.724 0.157 70.1)",
+        "$description": "Warning Hover"
+      },
+      "warning-active": {
+        "$type": "color",
+        "$value": "oklch(0.679 0.147 70.1)",
+        "$description": "Warning Active"
+      },
+      "warning-subtle": {
+        "$type": "color",
+        "$value": "oklch(0.945 0.033 70.1)",
+        "$description": "Warning Subtle"
+      },
+      "danger": {
+        "$type": "color",
+        "$value": "oklch(0.577 0.215 27.3)",
+        "$description": "Danger"
+      },
+      "danger-hover": {
+        "$type": "color",
+        "$value": "oklch(0.532 0.215 27.3)",
+        "$description": "Danger Hover"
+      },
+      "danger-active": {
+        "$type": "color",
+        "$value": "oklch(0.487 0.199 27.3)",
+        "$description": "Danger Active"
+      },
+      "danger-subtle": {
+        "$type": "color",
+        "$value": "oklch(0.945 0.028 27.3)",
+        "$description": "Danger Subtle"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "oklch(0.491 0.241 292.6)",
+        "$description": "Info"
+      },
+      "info-hover": {
+        "$type": "color",
+        "$value": "oklch(0.446 0.241 292.6)",
+        "$description": "Info Hover"
+      },
+      "info-active": {
+        "$type": "color",
+        "$value": "oklch(0.401 0.223 292.6)",
+        "$description": "Info Active"
+      },
+      "info-subtle": {
+        "$type": "color",
+        "$value": "oklch(0.945 0.029 292.6)",
+        "$description": "Info Subtle"
+      },
+      "focus-ring": {
+        "$type": "color",
+        "$value": "oklch(0.541 0.247 293.0 / 0.400)",
+        "$description": "Focus Ring"
+      }
+    },
+    "typography": {
+      "font-sans": {
+        "$type": "fontFamily",
+        "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        "$description": "Font Sans"
+      },
+      "font-mono": {
+        "$type": "fontFamily",
+        "$value": "'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace",
+        "$description": "Font Mono"
+      },
+      "text-xs": {
+        "$type": "dimension",
+        "$value": "12px",
+        "$description": "Text XS"
+      },
+      "text-sm": {
+        "$type": "dimension",
+        "$value": "14px",
+        "$description": "Text SM"
+      },
+      "text-base": {
+        "$type": "dimension",
+        "$value": "16px",
+        "$description": "Text Base"
+      },
+      "text-lg": {
+        "$type": "dimension",
+        "$value": "18px",
+        "$description": "Text LG"
+      },
+      "text-xl": {
+        "$type": "dimension",
+        "$value": "20px",
+        "$description": "Text XL"
+      },
+      "text-2xl": {
+        "$type": "dimension",
+        "$value": "24px",
+        "$description": "Text 2XL"
+      },
+      "text-3xl": {
+        "$type": "dimension",
+        "$value": "30px",
+        "$description": "Text 3XL"
+      },
+      "leading-tight": {
+        "$type": "number",
+        "$value": "1.25",
+        "$description": "Leading Tight"
+      },
+      "leading-normal": {
+        "$type": "number",
+        "$value": "1.5",
+        "$description": "Leading Normal"
+      },
+      "leading-relaxed": {
+        "$type": "number",
+        "$value": "1.75",
+        "$description": "Leading Relaxed"
+      },
+      "weight-normal": {
+        "$type": "number",
+        "$value": "400",
+        "$description": "Weight Normal"
+      },
+      "weight-medium": {
+        "$type": "number",
+        "$value": "500",
+        "$description": "Weight Medium"
+      },
+      "weight-semibold": {
+        "$type": "number",
+        "$value": "600",
+        "$description": "Weight Semibold"
+      },
+      "weight-bold": {
+        "$type": "number",
+        "$value": "700",
+        "$description": "Weight Bold"
+      }
+    },
+    "spacing": {
+      "space-0": {
+        "$type": "dimension",
+        "$value": "0",
+        "$description": "Space 0"
+      },
+      "space-1": {
+        "$type": "dimension",
+        "$value": "4px",
+        "$description": "Space 1"
+      },
+      "space-2": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$description": "Space 2"
+      },
+      "space-3": {
+        "$type": "dimension",
+        "$value": "12px",
+        "$description": "Space 3"
+      },
+      "space-4": {
+        "$type": "dimension",
+        "$value": "16px",
+        "$description": "Space 4"
+      },
+      "space-5": {
+        "$type": "dimension",
+        "$value": "20px",
+        "$description": "Space 5"
+      },
+      "space-6": {
+        "$type": "dimension",
+        "$value": "24px",
+        "$description": "Space 6"
+      },
+      "space-8": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "Space 8"
+      },
+      "space-10": {
+        "$type": "dimension",
+        "$value": "40px",
+        "$description": "Space 10"
+      },
+      "space-12": {
+        "$type": "dimension",
+        "$value": "48px",
+        "$description": "Space 12"
+      },
+      "space-16": {
+        "$type": "dimension",
+        "$value": "64px",
+        "$description": "Space 16"
+      }
+    },
+    "radius": {
+      "none": {
+        "$type": "dimension",
+        "$value": "0",
+        "$description": "Radius None"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "4px",
+        "$description": "Radius SM"
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "6px",
+        "$description": "Radius MD"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$description": "Radius LG"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "12px",
+        "$description": "Radius XL"
+      },
+      "2xl": {
+        "$type": "dimension",
+        "$value": "16px",
+        "$description": "Radius 2XL"
+      },
+      "full": {
+        "$type": "dimension",
+        "$value": "9999px",
+        "$description": "Radius Full"
+      }
+    },
+    "shadow": {
+      "sm": {
+        "$type": "shadow",
+        "$value": "0 1px 2px rgba(0, 0, 0, 0.05)",
+        "$description": "Shadow SM"
+      },
+      "md": {
+        "$type": "shadow",
+        "$value": "0 4px 6px rgba(0, 0, 0, 0.07)",
+        "$description": "Shadow MD"
+      },
+      "lg": {
+        "$type": "shadow",
+        "$value": "0 10px 15px rgba(0, 0, 0, 0.1)",
+        "$description": "Shadow LG"
+      },
+      "xl": {
+        "$type": "shadow",
+        "$value": "0 20px 25px rgba(0, 0, 0, 0.1)",
+        "$description": "Shadow XL"
+      }
+    }
+  }
+}

package/dist/form/FormItem.js

@@ -1,71 +1,79 @@
-
 "use client";
 import { classnames as e } from "../utils/classnames.js";
-/* empty css                   */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useContext as r, useId as i } from "react";
-import { FormContext as a, useField as o } from "react-f0rm";
+import { controlColumn as t, item as n, itemHorizontal as r, itemInline as i } from "./form-item-styles.js";
+import { useContext as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { FormContext as l, useField as u } 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, validateDebounce: h, delayError: g, rules: _, className: v, renderError: y, as: b, asProps: x, input: S, eventToValue: C, valueToProps: w, children: T, ...E }) {
-	let D = `haze-field-${i()}`, O = `${D}-error`, k = r(a), A = u ?? k;
-	if (!A) throw Error("FormItem: no form provided — pass `form={form}` or render inside a <FormProvider value={form}>.");
-	let { value: j, onChange: M, onBlur: N, errors: P, focusRef: F } = o({
-		form: A,
-		name: d,
-		validate: p,
-		mode: m,
-		validateDebounce: h,
-		delayError: g,
-		rules: _
-	}), I = P.length > 0, L = S && typeof S == "object" && "element" in S ? S : void 0, R = L?.eventToValue ?? C ?? (L ? (e) => e.target?.value : (e) => e);
-	if (S && typeof T == "function") throw Error("FormItem: `input` and the render-prop `children` are mutually exclusive — the input component is wired declaratively; remove the render-prop.");
-	let z = L ? L.element : S;
-	return /* @__PURE__ */ n("div", {
-		className: e([s, v]),
+function d({ form: d, name: f, label: p, layout: m = "vertical", labelWidth: h, labelAlign: g = "right", validate: _, mode: v, validateDebounce: y, delayError: b, rules: x, className: S, renderError: C, as: w, asProps: T, input: E, eventToValue: D, valueToProps: O, children: k, ...A }) {
+	let j = `haze-field-${o()}`, M = `${j}-error`, N = a(l), P = d ?? N;
+	if (!P) throw Error("FormItem: no form provided — pass `form={form}` or render inside a <FormProvider value={form}>.");
+	let { value: F, onChange: I, onBlur: L, errors: R, focusRef: z } = u({
+		form: P,
+		name: f,
+		validate: _,
+		mode: v,
+		validateDebounce: y,
+		delayError: b,
+		rules: x
+	}), B = R.length > 0, V = E && typeof E == "object" && "element" in E ? E : void 0, H = V?.eventToValue ?? D ?? (V ? (e) => e.target?.value : (e) => e);
+	if (E && typeof k == "function") throw Error("FormItem: `input` and the render-prop `children` are mutually exclusive — the input component is wired declaratively; remove the render-prop.");
+	let U = V ? V.element : E, W = m === "horizontal", G = W ? {
+		width: typeof h == "number" ? `${h}px` : h,
+		textAlign: g
+	} : void 0, K = p !== void 0 && /* @__PURE__ */ s("label", {
+		htmlFor: j,
+		style: G,
+		className: e(["haze-form-item-styles__labelText", W && "haze-form-item-styles__labelColumn"]),
+		children: p
+	}), q = U ? /* @__PURE__ */ s(U, {
+		...A,
+		id: j,
+		"aria-invalid": B || void 0,
+		"aria-describedby": B ? M : void 0,
+		ref: z,
+		onBlur: L,
+		onChange: (e) => I(H(e)),
+		...O ? O(F) : { value: F },
+		children: k
+	}) : w ? /* @__PURE__ */ s(w, {
+		...T,
+		id: j,
+		"aria-invalid": B || void 0,
+		"aria-describedby": B ? M : void 0,
+		ref: z,
+		onBlur: L,
+		onChange: (e) => I(H(e)),
+		...O ? O(F) : { value: F }
+	}) : k({
+		id: j,
+		errorId: M,
+		invalid: B,
+		errors: R,
+		onBlur: L,
+		value: F,
+		onChange: I,
+		focusRef: z
+	}), J = B && /* @__PURE__ */ s("span", {
+		id: M,
+		role: "alert",
+		className: e("haze-form-item-styles__errorText"),
+		children: C ? C(R[0].message, M) : R[0].message
+	});
+	return W ? /* @__PURE__ */ c("div", {
+		className: e([r, S]),
+		children: [K, /* @__PURE__ */ c("div", {
+			className: e(t),
+			children: [q, J]
+		})]
+	}) : /* @__PURE__ */ c("div", {
+		className: e([m === "inline" ? i : n, S]),
 		children: [
-			f !== void 0 && /* @__PURE__ */ t("label", {
-				htmlFor: D,
-				className: e(c),
-				children: f
-			}),
-			z ? /* @__PURE__ */ t(z, {
-				...E,
-				id: D,
-				"aria-invalid": I || void 0,
-				"aria-describedby": I ? O : void 0,
-				ref: F,
-				onBlur: N,
-				onChange: (e) => M(R(e)),
-				...w ? w(j) : { value: j },
-				children: T
-			}) : b ? /* @__PURE__ */ t(b, {
-				...x,
-				id: D,
-				"aria-invalid": I || void 0,
-				"aria-describedby": I ? O : void 0,
-				ref: F,
-				onBlur: N,
-				onChange: (e) => M(R(e)),
-				...w ? w(j) : { value: j }
-			}) : T({
-				id: D,
-				errorId: O,
-				invalid: I,
-				errors: P,
-				onBlur: N,
-				value: j,
-				onChange: M,
-				focusRef: F
-			}),
-			I && /* @__PURE__ */ t("span", {
-				id: O,
-				role: "alert",
-				className: e(l),
-				children: y ? y(P[0].message, O) : P[0].message
-			})
+			K,
+			q,
+			J
 		]
 	});
 }
 //#endregion
-export { u as default };
+export { d as default };

package/dist/form/FormList.js

@@ -1,7 +1,7 @@
 "use client";
 import { classnames as e } from "../utils/classnames.js";
-import { jsx as t } from "react/jsx-runtime";
-import { useCallback as n, useContext as r, useMemo as i } from "react";
+import { useCallback as t, useContext as n, useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 import { FormContext as a, getValue as o, getValues as s, setValue as c, useFieldArray as l } from "react-f0rm";
 //#region src/lib/form/FormList.tsx
 var u = /^-?\d+$/;
@@ -33,7 +33,7 @@ function d(e) {
 	return (n !== "" || t.length === 0) && r(), t;
 }
 function f({ form: u, name: f, keyName: p, rules: m, shouldUnregister: h, className: g, children: _ }) {
-	let v = r(a), y = u ?? v;
+	let v = n(a), y = u ?? v;
 	if (!y) throw Error("FormList: no form provided — pass `form={form}` or render inside a <FormProvider value={form}>.");
 	let b = l({
 		form: y,
@@ -41,10 +41,10 @@ function f({ form: u, name: f, keyName: p, rules: m, shouldUnregister: h, classN
 		keyName: p,
 		rules: m,
 		shouldUnregister: h
-	}), x = n(() => {
+	}), x = t(() => {
 		let e = s(y), t = d(f).reduce((e, t) => typeof e != "object" || !e ? void 0 : e[t], e);
 		Array.isArray(t) && t !== o(y, f) && c(y, f, t);
-	}, [y, f]), S = i(() => {
+	}, [y, f]), S = r(() => {
 		let e = (e) => (...t) => {
 			x(), e(...t);
 		};
@@ -70,7 +70,7 @@ function f({ form: u, name: f, keyName: p, rules: m, shouldUnregister: h, classN
 		b.move,
 		b.update
 	]);
-	return /* @__PURE__ */ t("div", {
+	return /* @__PURE__ */ i("div", {
 		className: e(g),
 		children: _(S)
 	});

package/dist/form/form-item-styles.js

@@ -0,0 +1,7 @@
+
+"use client";
+/* empty css                           */
+//#region src/lib/form/form-item-styles.ts
+var e = "haze-form-item-styles__item", t = "haze-form-item-styles__itemHorizontal", n = "haze-form-item-styles__itemInline", r = "haze-form-item-styles__controlColumn", i = "haze-form-item-styles__labelText", a = "haze-form-item-styles__labelColumn", o = "haze-form-item-styles__errorText";
+//#endregion
+export { r as controlColumn, o as errorText, e as item, t as itemHorizontal, n as itemInline, a as labelColumn, i as labelText };