@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/control-stepper.js

@@ -0,0 +1,109 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/control-stepper.js
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function roundToStep(value, step) {
+	const precision = Math.max(0, -Math.floor(Math.log10(step)));
+	return Number(value.toFixed(precision));
+}
+/**
+* @description A numeric stepper with increment/decrement buttons and direct text editing
+*/
+const ControlStepper = createComponent(({ props, value, onChange, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, label, disabled = false }) => {
+	const handleIncrement = useCallback(() => {
+		if (!disabled) onChange(roundToStep(clamp(value + step, min, max), step));
+	}, [
+		value,
+		step,
+		min,
+		max,
+		disabled,
+		onChange
+	]);
+	const handleDecrement = useCallback(() => {
+		if (!disabled) onChange(roundToStep(clamp(value - step, min, max), step));
+	}, [
+		value,
+		step,
+		min,
+		max,
+		disabled,
+		onChange
+	]);
+	const handleInputChange = useCallback((e) => {
+		const parsed = Number.parseFloat(e.target.value);
+		if (!Number.isNaN(parsed)) onChange(clamp(parsed, min, max));
+	}, [
+		min,
+		max,
+		onChange
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (disabled) return;
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			handleIncrement();
+		} else if (e.key === "ArrowDown") {
+			e.preventDefault();
+			handleDecrement();
+		}
+	}, [
+		disabled,
+		handleIncrement,
+		handleDecrement
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-disabled": disabled || void 0,
+		...props.root,
+		children: [label && /* @__PURE__ */ jsx("span", {
+			...props.label,
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				gap: "1px"
+			},
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleDecrement,
+					disabled: disabled || value <= min,
+					"aria-label": "Decrease value",
+					tabIndex: -1,
+					...props.decrement,
+					children: "-"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					type: "text",
+					inputMode: "decimal",
+					value,
+					onChange: handleInputChange,
+					onKeyDown: handleKeyDown,
+					disabled,
+					"aria-label": label ?? "Numeric value",
+					"aria-valuemin": min === Number.NEGATIVE_INFINITY ? void 0 : min,
+					"aria-valuemax": max === Number.POSITIVE_INFINITY ? void 0 : max,
+					"aria-valuenow": value,
+					role: "spinbutton",
+					...props.input
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: handleIncrement,
+					disabled: disabled || value >= max,
+					"aria-label": "Increase value",
+					tabIndex: -1,
+					...props.increment,
+					children: "+"
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { ControlStepper };

package/dist/components/dist/control-toggle.config.d.ts

@@ -0,0 +1,408 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/control-toggle.config.d.ts
+//#region src/control-toggle.config.d.ts
+declare const controlToggleConfig: ComponentConfig<{
+  ControlToggle: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+      };
+      readonly label: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      };
+    };
+    readonly variants: {
+      readonly size: {
+        readonly sm: {
+          readonly label: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly md: {
+          readonly root: {};
+        };
+        readonly lg: {
+          readonly label: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+      };
+    };
+    readonly defaultVariants: {
+      readonly size: "md";
+    };
+  };
+}, {}>;
+type ControlToggleConfig = typeof controlToggleConfig; //#endregion
+//#endregion
+export { ControlToggleConfig, controlToggleConfig };

package/dist/components/dist/control-toggle.config.js

@@ -0,0 +1,26 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/control-toggle.config.js
+const controlToggleConfig = defaultFoundationPreset.defineComponent("ControlToggle", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing["2"]
+		},
+		label: {
+			flex: "1",
+			...textVariants.label1,
+			color: tokens.color["on-secondary"]
+		}
+	},
+	variants: { size: {
+		sm: { label: { ...textVariants.label3 } },
+		md: { root: {} },
+		lg: { label: { ...textVariants.label1 } }
+	} },
+	defaultVariants: { size: "md" }
+}));
+//#endregion
+export { controlToggleConfig };