dawn-ui-react 1.0.0-alpha.15 → 1.0.0-alpha.17

package/dist/components/number-field/number-field.d.ts

@@ -1,2 +1,2 @@
 import { NumberFieldTypesProps } from './number-field.types';
-export declare const NumberField: ({ label, size, className, ref, ...props }: NumberFieldTypesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberField: ({ children, label, size, className, ref, ...props }: NumberFieldTypesProps) => import("react/jsx-runtime").JSX.Element;

package/dist/dawn-ui-react.js

@@ -27712,7 +27712,7 @@ var LH = ({ content: e, ...t }) => /* @__PURE__ */ X(IH, {
 		})
 	}) : /* @__PURE__ */ Z(ar, {
 		variant: t,
-		className: "flex h-full! max-w-[500px] flex-wrap py-xs [&:has([data-chips]:empty)>[role=separator]]:hidden [&:has([data-chips]:not(:empty))]:rounded-xl [&:not(:has([data-chips]))>[role=separator]]:hidden",
+		className: J("flex flex-wrap py-xs [&:has([data-chips]:empty)>[role=separator]]:hidden [&:has([data-chips]:not(:empty))]:rounded-xl [&:not(:has([data-chips]))>[role=separator]]:hidden", n),
 		children: [
 			r,
 			/* @__PURE__ */ X(qU, { weight: "thinnest" }),
@@ -27725,7 +27725,6 @@ var LH = ({ content: e, ...t }) => /* @__PURE__ */ X(IH, {
 					...a
 				}), /* @__PURE__ */ Z(GU, { children: [/* @__PURE__ */ X(Ws, {
 					"aria-label": "Clear selection",
-					className: J(n),
 					keepMounted: !0,
 					render: (e) => /* @__PURE__ */ X(P, {
 						onClick: e.onClick,
@@ -33335,19 +33334,19 @@ var M2 = ({ row: e, className: t, children: n, ref: r, ...i }) => /* @__PURE__ *
 	ref: n,
 	...r,
 	children: t
-}), u4 = y("flex flex-col gap-3xs data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_[role=\"group\"]]:rounded-full [&_[role=\"group\"]]:bg-surface [&_[role=\"group\"]]:p-3xs [&_[role=\"group\"]]:shadow-2xs [&_[role=\"group\"]]:outline [&_[role=\"group\"]]:outline-transparent [&_[role=\"group\"]]:transition-all aria-invalid:[&_[role=\"group\"]]:bg-error-container aria-invalid:[&_[role=\"group\"]]:outline-error-border aria-invalid:[&_[role=\"group\"]]:focus-within:outline-error-border-strong aria-invalid:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border data-[disabled]:[&_[role=\"group\"]]:cursor-not-allowed data-[invalid]:[&_[role=\"group\"]]:bg-error-container data-[invalid]:[&_[role=\"group\"]]:outline-error-border data-[invalid]:[&_[role=\"group\"]]:focus-within:outline-error-border-strong data-[invalid]:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border aria-invalid:[&_input]:text-error-on-container aria-invalid:[&_input]:caret-error-border-strong data-[invalid]:[&_input]:text-error-on-container data-[invalid]:[&_input]:caret-error-border-strong", {
+}), u4 = y("flex flex-col gap-3xs data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_[role=\"group\"]]:rounded-full [&_[role=\"group\"]]:bg-surface [&_[role=\"group\"]]:shadow-2xs [&_[role=\"group\"]]:outline [&_[role=\"group\"]]:outline-transparent [&_[role=\"group\"]]:transition-all aria-invalid:[&_[role=\"group\"]]:bg-error-container aria-invalid:[&_[role=\"group\"]]:outline-error-border aria-invalid:[&_[role=\"group\"]]:focus-within:outline-error-border-strong aria-invalid:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border data-[disabled]:[&_[role=\"group\"]]:cursor-not-allowed data-[invalid]:[&_[role=\"group\"]]:bg-error-container data-[invalid]:[&_[role=\"group\"]]:outline-error-border data-[invalid]:[&_[role=\"group\"]]:focus-within:outline-error-border-strong data-[invalid]:[&_[role=\"group\"]]:not-focus-within:hover:outline-error-border aria-invalid:[&_input]:text-error-on-container aria-invalid:[&_input]:caret-error-border-strong data-[invalid]:[&_input]:text-error-on-container data-[invalid]:[&_input]:caret-error-border-strong", {
 	variants: { size: {
-		small: "[&_input]:style-text-default-0",
-		medium: "[&_input]:style-text-default-1",
-		large: "[&_input]:style-text-default-2"
+		small: "h-lg [&_input]:style-text-default--1",
+		medium: "h-xl [&_input]:style-text-default-0",
+		large: "h-2xl [&_input]:style-text-default-1"
 	} },
 	defaultVariants: { size: "medium" }
-}), d4 = ({ label: e, size: t, className: n, ref: r, ...i }) => {
-	let a = sr.useId(), { min: o, max: s, value: c, defaultValue: l, onValueChange: u, "aria-invalid": d, ...f } = i, [p, m] = sr.useState(() => typeof l == "number" ? l : null), h = typeof c == "number" || c === null ? c : p, g = !!(d || typeof h == "number" && (typeof o == "number" && h < o || typeof s == "number" && h > s)), _ = (...e) => {
+}), d4 = ({ children: e, label: t, size: n, className: r, ref: i, ...a }) => {
+	let o = sr.useId(), { min: s, max: c, value: l, defaultValue: u, onValueChange: d, "aria-invalid": f, ...p } = a, [m, h] = sr.useState(() => typeof u == "number" ? u : null), g = typeof l == "number" || l === null ? l : m, _ = !!(f || typeof g == "number" && (typeof s == "number" && g < s || typeof c == "number" && g > c)), v = (...e) => {
 		let [t] = e;
-		typeof c != "number" && c !== null && m(t), u?.(...e);
-	}, v = () => {
-		switch (t) {
+		typeof l != "number" && l !== null && h(t), d?.(...e);
+	}, y = () => {
+		switch (n) {
 			case "small": return "iconSmall";
 			case "medium": return "iconMedium";
 			case "large": return "iconLarge";
@@ -33356,43 +33355,47 @@ var M2 = ({ row: e, className: t, children: n, ref: r, ...i }) => /* @__PURE__ *
 	};
 	return /* @__PURE__ */ Z(lp, {
 		className: J(u4({
-			size: t,
-			className: n
+			size: n,
+			className: r
 		})),
-		ref: r,
-		"aria-invalid": g,
-		"data-invalid": g ? "" : void 0,
-		defaultValue: l,
-		id: a,
-		max: s,
-		min: o,
-		onValueChange: _,
-		value: c,
-		...f,
+		ref: i,
+		"aria-invalid": _,
+		"data-invalid": _ ? "" : void 0,
+		defaultValue: u,
+		id: o,
+		max: c,
+		min: s,
+		onValueChange: v,
+		value: l,
+		...p,
 		children: [/* @__PURE__ */ Z(Np, {
 			className: "cursor-ew-resize",
 			children: [/* @__PURE__ */ X("label", {
 				className: "cursor-ew-resize style-text-default--1",
-				htmlFor: a,
-				children: e
+				htmlFor: o,
+				children: t
 			}), /* @__PURE__ */ X(Pp, { children: /* @__PURE__ */ X(f4, {}) })]
 		}), /* @__PURE__ */ Z(dp, {
-			className: "flex w-full items-center",
+			className: "relative flex w-full items-center gap-3xs",
 			children: [
 				/* @__PURE__ */ X(Tp, { render: (e) => /* @__PURE__ */ X(P, {
 					...e,
 					tone: "error",
 					variant: "ghost",
-					size: v(),
+					size: y(),
 					className: "shrink-0",
 					children: /* @__PURE__ */ X(Vy, { weight: "bold" })
 				}) }),
 				/* @__PURE__ */ X(Op, { className: "w-full text-center style-text-default-0 focus:outline-none" }),
+				/* @__PURE__ */ X("div", {
+					className: "absolute right-2xl style-text-default-0 text-on-surface-variant",
+					children: e
+				}),
 				/* @__PURE__ */ X(wp, { render: (e) => /* @__PURE__ */ X(P, {
 					...e,
 					tone: "success",
 					variant: "ghost",
-					size: v(),
+					size: y(),
 					className: "shrink-0",
 					children: /* @__PURE__ */ X(Hy, { weight: "bold" })
 				}) })