@studiolxd/brand 49.19.0 → 49.20.0

package/dist/number-input-field.js

@@ -8,21 +8,21 @@ import { n as i } from "./_shared/field-labels.js";
 import { forwardRef as a, useId as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/stories/molecules/NumberInputField/NumberInputField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f, min: p, max: m, step: h = 1, decimal: g, disabled: _, readOnly: v, size: y, error: b = !1, errorMessage: x, helperText: S, className: C, onChange: w, onEmpty: T, ...E }, D) {
-	let O = i(u), k = e(y), A = o(), j = a ?? A, M = x ? `${j}-error` : void 0, N = S ? `${j}-helper` : void 0, P = [M, N].filter(Boolean).join(" ") || void 0, F = b || !!x;
+var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f, min: p, max: m, step: h = 1, decimal: g, disabled: _, readOnly: v, size: y, compact: b, commitMode: x, error: S = !1, errorMessage: C, helperText: w, className: T, onChange: E, onEmpty: D, ...O }, k) {
+	let A = i(u), j = e(y), M = o(), N = a ?? M, P = C ? `${N}-error` : void 0, F = w ? `${N}-helper` : void 0, I = [P, F].filter(Boolean).join(" ") || void 0, L = S || !!C;
 	return /* @__PURE__ */ c("div", {
-		className: ["number-input-field", C].filter(Boolean).join(" "),
+		className: ["number-input-field", T].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ s(n, {
-				htmlFor: j,
-				hidden: O,
-				size: k,
+				htmlFor: N,
+				hidden: A,
+				size: j,
 				children: l
 			}),
 			/* @__PURE__ */ s(r, {
-				ref: D,
-				...E,
-				id: j,
+				ref: k,
+				...O,
+				id: N,
 				value: d,
 				defaultValue: f,
 				min: p,
@@ -31,20 +31,22 @@ var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f,
 				decimal: g,
 				disabled: _,
 				readOnly: v,
-				size: k,
-				error: F,
-				"aria-describedby": P,
-				onChange: w,
-				onEmpty: T
+				size: j,
+				compact: b,
+				commitMode: x,
+				error: L,
+				"aria-describedby": I,
+				onChange: E,
+				onEmpty: D
 			}),
-			x && /* @__PURE__ */ s(t, {
-				id: M,
-				children: x
+			C && /* @__PURE__ */ s(t, {
+				id: P,
+				children: C
 			}),
-			S && /* @__PURE__ */ s("span", {
-				id: N,
+			w && /* @__PURE__ */ s("span", {
+				id: F,
 				className: "number-input-field__helper",
-				children: S
+				children: w
 			})
 		]
 	});

package/dist/number-input.css

@@ -1 +1 @@
-.number-input{min-block-size:var(--number-input-height);border-radius:var(--number-input-border-radius);border-width:var(--number-input-border-width);border-style:var(--number-input-border-style);border-color:var(--number-input-border-color);background-color:var(--number-input-bg);transition:border-color var(--number-input-transition-duration) var(--number-input-transition-easing);box-sizing:border-box;align-items:stretch;display:inline-flex;overflow:hidden}.number-input.number-input--focused{box-shadow:inset 0 0 0 calc(var(--number-input-focus-ring-width) + var(--number-input-focus-ring-inset-offset)) var(--number-input-focus-ring-color), inset 0 0 0 var(--number-input-focus-ring-inset-offset) var(--number-input-bg);border-color:var(--number-input-focus-border-color);outline:none}.number-input__field{min-width:0;padding-block:0;padding-inline:var(--number-input-padding-inline);color:var(--number-input-color);font-family:var(--number-input-font-family);font-size:var(--number-input-font-size);font-weight:var(--number-input-font-weight);line-height:var(--number-input-line-height);text-align:center;-moz-appearance:textfield;background-color:#0000;border:none;outline:none;flex:1}.number-input__field::-webkit-inner-spin-button{appearance:none;margin:0}.number-input__field::-webkit-outer-spin-button{appearance:none;margin:0}.number-input__btn{width:var(--number-input-btn-width);background-color:var(--number-input-btn-bg);color:var(--number-input-btn-color);cursor:pointer;transition:box-shadow var(--number-input-transition-duration) var(--number-input-transition-easing);border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.number-input__btn:hover:not(:disabled){box-shadow:inset 0 calc(-1 * var(--number-input-btn-hover-line-width)) 0 0 var(--number-input-btn-hover-line-color)}.number-input__btn--decrement{border-inline-end-width:var(--number-input-border-width);border-inline-end-style:var(--number-input-border-style);border-inline-end-color:var(--number-input-btn-separator-color)}.number-input__btn--increment{border-inline-start-width:var(--number-input-border-width);border-inline-start-style:var(--number-input-border-style);border-inline-start-color:var(--number-input-btn-separator-color)}.number-input.number-input--error{border-color:var(--number-input-error-border-color);background-color:var(--number-input-error-bg)}.number-input.number-input--error .number-input__field{color:var(--number-input-error-color)}.number-input.number-input--error.number-input--focused{box-shadow:inset 0 0 0 calc(var(--number-input-focus-ring-width) + var(--number-input-focus-ring-inset-offset)) var(--number-input-error-focus-ring-color), inset 0 0 0 var(--number-input-focus-ring-inset-offset) var(--number-input-error-bg);border-color:var(--number-input-error-focus-border-color);outline:none}.number-input.number-input--disabled{cursor:var(--number-input-disabled-cursor);background-color:var(--number-input-disabled-bg);border-color:var(--number-input-disabled-border-color);pointer-events:none}.number-input.number-input--disabled .number-input__field{color:var(--number-input-disabled-color)}.number-input.number-input--disabled .number-input__btn{color:var(--number-input-disabled-btn-color)}.number-input.number-input--sm{--number-input-height:var(--number-input-sm-height);--number-input-padding-inline:var(--number-input-sm-padding-inline);--number-input-font-size:var(--number-input-sm-font-size)}.number-input.number-input--lg{--number-input-height:var(--number-input-lg-height);--number-input-padding-inline:var(--number-input-lg-padding-inline);--number-input-font-size:var(--number-input-lg-font-size)}
+.number-input{min-block-size:var(--number-input-height);border-radius:var(--number-input-border-radius);border-width:var(--number-input-border-width);border-style:var(--number-input-border-style);border-color:var(--number-input-border-color);background-color:var(--number-input-bg);transition:border-color var(--number-input-transition-duration) var(--number-input-transition-easing);box-sizing:border-box;align-items:stretch;display:inline-flex;overflow:hidden}.number-input.number-input--focused{box-shadow:inset 0 0 0 calc(var(--number-input-focus-ring-width) + var(--number-input-focus-ring-inset-offset)) var(--number-input-focus-ring-color), inset 0 0 0 var(--number-input-focus-ring-inset-offset) var(--number-input-bg);border-color:var(--number-input-focus-border-color);outline:none}.number-input__field{min-width:0;padding-block:0;padding-inline:var(--number-input-padding-inline);color:var(--number-input-color);font-family:var(--number-input-font-family);font-size:var(--number-input-font-size);font-weight:var(--number-input-font-weight);line-height:var(--number-input-line-height);text-align:center;-moz-appearance:textfield;background-color:#0000;border:none;outline:none;flex:1}.number-input__field::-webkit-inner-spin-button{appearance:none;margin:0}.number-input__field::-webkit-outer-spin-button{appearance:none;margin:0}.number-input__btn{width:var(--number-input-btn-width);background-color:var(--number-input-btn-bg);color:var(--number-input-btn-color);cursor:pointer;transition:box-shadow var(--number-input-transition-duration) var(--number-input-transition-easing);border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.number-input__btn:hover:not(:disabled){box-shadow:inset 0 calc(-1 * var(--number-input-btn-hover-line-width)) 0 0 var(--number-input-btn-hover-line-color)}.number-input__btn--decrement{border-inline-end-width:var(--number-input-border-width);border-inline-end-style:var(--number-input-border-style);border-inline-end-color:var(--number-input-btn-separator-color)}.number-input__btn--increment{border-inline-start-width:var(--number-input-border-width);border-inline-start-style:var(--number-input-border-style);border-inline-start-color:var(--number-input-btn-separator-color)}.number-input.number-input--error{border-color:var(--number-input-error-border-color);background-color:var(--number-input-error-bg)}.number-input.number-input--error .number-input__field{color:var(--number-input-error-color)}.number-input.number-input--error.number-input--focused{box-shadow:inset 0 0 0 calc(var(--number-input-focus-ring-width) + var(--number-input-focus-ring-inset-offset)) var(--number-input-error-focus-ring-color), inset 0 0 0 var(--number-input-focus-ring-inset-offset) var(--number-input-error-bg);border-color:var(--number-input-error-focus-border-color);outline:none}.number-input.number-input--disabled{cursor:var(--number-input-disabled-cursor);background-color:var(--number-input-disabled-bg);border-color:var(--number-input-disabled-border-color);pointer-events:none}.number-input.number-input--disabled .number-input__field{color:var(--number-input-disabled-color)}.number-input.number-input--disabled .number-input__btn{color:var(--number-input-disabled-btn-color)}.number-input.number-input--sm{--number-input-height:var(--number-input-sm-height);--number-input-padding-inline:var(--number-input-sm-padding-inline);--number-input-font-size:var(--number-input-sm-font-size)}.number-input.number-input--lg{--number-input-height:var(--number-input-lg-height);--number-input-padding-inline:var(--number-input-lg-padding-inline);--number-input-font-size:var(--number-input-lg-font-size)}.number-input.number-input--compact{--number-input-height:var(--number-input-compact-height);--number-input-padding-inline:var(--number-input-compact-padding-inline);--number-input-font-size:var(--number-input-compact-font-size);--number-input-btn-width:var(--number-input-compact-btn-width)}.number-input.number-input--compact .number-input__field{width:var(--number-input-compact-field-width);flex:none}

package/dist/number-input.js

@@ -5,47 +5,56 @@ import { Icon as t } from "./icon.js";
 import { forwardRef as n, useCallback as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/atoms/NumberInput/NumberInput.tsx
-var s = n(function({ value: n, defaultValue: s = 0, min: c, max: l, step: u = 1, decimal: d = !1, disabled: f = !1, readOnly: p = !1, size: m = "md", error: h = !1, id: g, name: _, describedBy: v, ariaLabel: y, decrementLabel: b, incrementLabel: x, className: S, onChange: C, onEmpty: w, onBlur: T, onFocus: E, ...D }, O) {
-	let k = e("numberInput"), A = n !== void 0, [j, M] = i(s), [N, P] = i(!1), [F, I] = i(null), L = A ? n : j, R = F === null ? L === null ? "" : String(L) : F, z = L ?? 0, B = r((e) => {
+var s = n(function({ value: n, defaultValue: s = 0, min: c, max: l, step: u = 1, decimal: d = !1, disabled: f = !1, readOnly: p = !1, size: m = "md", compact: h = !1, commitMode: g = "change", error: _ = !1, id: v, name: y, describedBy: b, ariaLabel: x, decrementLabel: S, incrementLabel: C, className: w, onChange: T, onEmpty: E, onBlur: D, onFocus: O, onKeyDown: k, ...A }, j) {
+	let M = e("numberInput"), N = n !== void 0, [P, F] = i(s), [I, L] = i(!1), [R, z] = i(null), B = N ? n : P, V = R === null ? B === null ? "" : String(B) : R, H = B ?? 0, U = r((e) => {
 		let t = e;
 		return c !== void 0 && (t = Math.max(c, t)), l !== void 0 && (t = Math.min(l, t)), t;
-	}, [c, l]), V = r((e) => {
-		let t = B(e);
-		A || M(t), C?.(t);
+	}, [c, l]), W = r((e) => {
+		let t = U(e);
+		N || F(t), T?.(t);
 	}, [
-		B,
-		A,
-		C
-	]), H = () => {
-		f || p || (I(null), V(z - u));
-	}, U = () => {
-		f || p || (I(null), V(z + u));
-	}, W = (e) => {
+		U,
+		N,
+		T
+	]), G = () => {
+		f || p || (z(null), W(H - u));
+	}, K = () => {
+		f || p || (z(null), W(H + u));
+	}, q = (e) => {
+		let t = d ? e.replace(",", ".") : e, n = parseFloat(t);
+		if (!isNaN(n)) {
+			if (g === "blur" && U(n) === B) return;
+			W(n);
+		} else if (E && e.trim() === "") {
+			if (g === "blur" && B === null) return;
+			N || F(null), E();
+		}
+	}, J = (e) => {
 		let t = e.target.value;
-		I(t);
-		let n = d ? t.replace(",", ".") : t, r = parseFloat(n);
-		isNaN(r) ? w && t.trim() === "" && (A || M(null), w()) : V(r);
-	}, G = (e) => {
-		P(!0), E?.(e);
-	}, K = (e) => {
-		P(!1), I(null), T?.(e);
-	}, q = [
+		z(t), g === "change" && q(t);
+	}, Y = (e) => {
+		k?.(e), !(e.defaultPrevented || g !== "blur" || R === null) && (e.key === "Enter" ? (q(R), z(null)) : e.key === "Escape" && (e.preventDefault(), z(null)));
+	}, X = (e) => {
+		L(!0), O?.(e);
+	}, Z = (e) => {
+		L(!1), g === "blur" && R !== null && q(R), z(null), D?.(e);
+	}, Q = [
 		"number-input",
-		m === "md" ? "" : `number-input--${m}`,
-		h ? "number-input--error" : "",
+		h ? "number-input--compact" : m === "md" ? "" : `number-input--${m}`,
+		_ ? "number-input--error" : "",
 		f ? "number-input--disabled" : "",
-		N ? "number-input--focused" : "",
-		S ?? ""
-	].filter(Boolean).join(" "), J = f || p || L !== null && c !== void 0 && L <= c, Y = f || p || L !== null && l !== void 0 && L >= l;
+		I ? "number-input--focused" : "",
+		w ?? ""
+	].filter(Boolean).join(" "), $ = f || p || B !== null && c !== void 0 && B <= c, ee = f || p || B !== null && l !== void 0 && B >= l;
 	return /* @__PURE__ */ o("div", {
-		className: q,
+		className: Q,
 		children: [
 			/* @__PURE__ */ a("button", {
 				className: "number-input__btn number-input__btn--decrement",
 				type: "button",
-				onClick: H,
-				disabled: J,
-				"aria-label": k("decrement", b),
+				onClick: G,
+				disabled: $,
+				"aria-label": M("decrement", S),
 				tabIndex: -1,
 				children: /* @__PURE__ */ a(t, {
 					name: "minus",
@@ -53,30 +62,31 @@ var s = n(function({ value: n, defaultValue: s = 0, min: c, max: l, step: u = 1,
 				})
 			}),
 			/* @__PURE__ */ a("input", {
-				ref: O,
+				ref: j,
 				className: "number-input__field",
 				type: "text",
 				inputMode: d ? "decimal" : "numeric",
 				pattern: d ? "[0-9]*[.,]?[0-9]*" : "[0-9]*",
-				"aria-invalid": h || void 0,
-				"aria-describedby": v,
-				"aria-label": y,
-				...D,
-				id: g,
-				name: _,
-				value: R,
+				"aria-invalid": _ || void 0,
+				"aria-describedby": b,
+				"aria-label": x,
+				...A,
+				id: v,
+				name: y,
+				value: V,
 				disabled: f,
 				readOnly: p,
-				onChange: W,
-				onFocus: G,
-				onBlur: K
+				onChange: J,
+				onKeyDown: Y,
+				onFocus: X,
+				onBlur: Z
 			}),
 			/* @__PURE__ */ a("button", {
 				className: "number-input__btn number-input__btn--increment",
 				type: "button",
-				onClick: U,
-				disabled: Y,
-				"aria-label": k("increment", x),
+				onClick: K,
+				disabled: ee,
+				"aria-label": M("increment", C),
 				tabIndex: -1,
 				children: /* @__PURE__ */ a(t, {
 					name: "plus",

package/dist/text.css

@@ -1 +1 @@
-.text{color:inherit;font:inherit}strong.text{font-weight:var(--text-inline-emphasis-font-weight)}.text.text--muted{color:var(--text-inline-muted-color)}.text.text--destructive{color:var(--text-inline-destructive-color)}.text.text--success{color:var(--text-inline-success-color)}
+.text{color:inherit;font:inherit}strong.text{font-weight:var(--text-inline-emphasis-font-weight)}.text.text--strikethrough{color:var(--text-inline-strikethrough-color);text-decoration-line:line-through;text-decoration-thickness:var(--text-inline-strikethrough-thickness)}.text.text--muted{color:var(--text-inline-muted-color)}.text.text--destructive{color:var(--text-inline-destructive-color)}.text.text--success{color:var(--text-inline-success-color)}

package/dist/text.js

@@ -2,16 +2,17 @@ import './text.css';
 import { forwardRef as e } from "react";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/Text/Text.tsx
-var n = e(function({ as: e = "span", tone: n = "default", className: r, children: i, ...a }, o) {
+var n = e(function({ as: e = "span", tone: n = "default", strikethrough: r = !1, className: i, children: a, ...o }, s) {
 	return /* @__PURE__ */ t(e, {
-		ref: o,
+		ref: s,
 		className: [
 			"text",
+			r || e === "del" || e === "s" ? "text--strikethrough" : "",
 			n === "default" ? "" : `text--${n}`,
-			r ?? ""
+			i ?? ""
 		].filter(Boolean).join(" "),
-		...a,
-		children: i
+		...o,
+		children: a
 	});
 }), r = e(function({ className: e, ...n }, r) {
 	return /* @__PURE__ */ t("br", {