@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,148 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/control-knob.js
+const START_ANGLE = 135;
+const END_ANGLE = 405;
+const ANGLE_RANGE = END_ANGLE - START_ANGLE;
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function valueToAngle(value, min, max) {
+	return START_ANGLE + (max === min ? 0 : (value - min) / (max - min)) * ANGLE_RANGE;
+}
+function polarToCartesian(cx, cy, r, angleDeg) {
+	const rad = (angleDeg - 90) * Math.PI / 180;
+	return {
+		x: cx + r * Math.cos(rad),
+		y: cy + r * Math.sin(rad)
+	};
+}
+function describeArc(cx, cy, r, startAngle, endAngle) {
+	const start = polarToCartesian(cx, cy, r, endAngle);
+	const end = polarToCartesian(cx, cy, r, startAngle);
+	const largeArc = endAngle - startAngle <= 180 ? 0 : 1;
+	return `M ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} 0 ${end.x} ${end.y}`;
+}
+const DIAL_SIZES = {
+	sm: 36,
+	md: 64,
+	lg: 80
+};
+/**
+* @description A rotary dial control for numeric values with visual arc feedback
+*/
+const ControlKnob = createComponent(({ props, value: rawValue, onChange, min = 0, max = 100, step = 1, label, size = "md" }) => {
+	const value = rawValue ?? min;
+	const svgRef = useRef(null);
+	const dragging = useRef(false);
+	const dialSize = DIAL_SIZES[size];
+	const cx = dialSize / 2;
+	const cy = dialSize / 2;
+	const radius = dialSize / 2 - 8;
+	const strokeWidth = Math.max(4, dialSize / 12);
+	const thumbRadius = strokeWidth + 2;
+	const angleFromPointer = useCallback((clientX, clientY) => {
+		const svg = svgRef.current;
+		if (!svg) return START_ANGLE;
+		const rect = svg.getBoundingClientRect();
+		const x = clientX - rect.left - cx;
+		const y = clientY - rect.top - cy;
+		let angle = Math.atan2(y, x) * 180 / Math.PI + 90;
+		if (angle < 0) angle += 360;
+		return angle;
+	}, [cx, cy]);
+	const angleToValue = useCallback((angle) => {
+		let a = angle;
+		if (a < START_ANGLE) a += 360;
+		const raw = min + clamp((a - START_ANGLE) / ANGLE_RANGE, 0, 1) * (max - min);
+		const stepped = Math.round((raw - min) / step) * step + min;
+		const decimals = (String(step).split(".")[1] ?? "").length;
+		return clamp(Number(stepped.toFixed(decimals)), min, max);
+	}, [
+		min,
+		max,
+		step
+	]);
+	const handlePointerDown = useCallback((e) => {
+		e.preventDefault();
+		dragging.current = true;
+		e.currentTarget.setPointerCapture(e.pointerId);
+		onChange(angleToValue(angleFromPointer(e.clientX, e.clientY)));
+	}, [
+		angleFromPointer,
+		angleToValue,
+		onChange
+	]);
+	const handlePointerMove = useCallback((e) => {
+		if (!dragging.current) return;
+		onChange(angleToValue(angleFromPointer(e.clientX, e.clientY)));
+	}, [
+		angleFromPointer,
+		angleToValue,
+		onChange
+	]);
+	const handlePointerUp = useCallback(() => {
+		dragging.current = false;
+	}, []);
+	const currentAngle = valueToAngle(value, min, max);
+	const trackPath = describeArc(cx, cy, radius, START_ANGLE, END_ANGLE);
+	const fillPath = currentAngle > START_ANGLE ? describeArc(cx, cy, radius, START_ANGLE, currentAngle) : "";
+	const thumbPos = polarToCartesian(cx, cy, radius, currentAngle);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [
+			label && /* @__PURE__ */ jsx("span", {
+				...props.label,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "slider",
+				tabIndex: 0,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				"aria-valuenow": value,
+				"aria-label": label ?? "Rotary dial",
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerUp,
+				style: { touchAction: "none" },
+				children: /* @__PURE__ */ jsxs("svg", {
+					ref: svgRef,
+					width: dialSize,
+					height: dialSize,
+					viewBox: `0 0 ${dialSize} ${dialSize}`,
+					children: [
+						/* @__PURE__ */ jsx("path", {
+							d: trackPath,
+							strokeWidth,
+							strokeLinecap: "round",
+							...props.track
+						}),
+						fillPath && /* @__PURE__ */ jsx("path", {
+							d: fillPath,
+							strokeWidth,
+							strokeLinecap: "round",
+							...props.fill
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							cx: thumbPos.x,
+							cy: thumbPos.y,
+							r: thumbRadius,
+							strokeWidth: 2,
+							...props.thumb
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				...props.value,
+				children: value
+			})
+		]
+	});
+});
+//#endregion
+export { ControlKnob };

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

@@ -0,0 +1,403 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/control-panel.config.d.ts
+//#region src/control-panel.config.d.ts
+declare const controlPanelConfig: ComponentConfig<{
+  ControlPanel: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+      readonly title: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly items: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+    };
+    readonly variants: {
+      readonly size: {
+        readonly sm: {
+          readonly root: {
+            readonly gap: string;
+          };
+          readonly title: {
+            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 items: {
+            readonly gap: string;
+          };
+        };
+        readonly md: {
+          readonly root: {};
+        };
+        readonly lg: {
+          readonly root: {
+            readonly gap: string;
+          };
+          readonly title: {
+            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 items: {
+            readonly gap: string;
+          };
+        };
+      };
+    };
+    readonly defaultVariants: {
+      readonly size: "md";
+    };
+  };
+}, {}>;
+type ControlPanelConfig = typeof controlPanelConfig; //#endregion
+//#endregion
+export { ControlPanelConfig, controlPanelConfig };

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

@@ -0,0 +1,38 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/control-panel.config.js
+const controlPanelConfig = defaultFoundationPreset.defineComponent("ControlPanel", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing["3"]
+		},
+		title: {
+			...textVariants.headline,
+			color: tokens.color["on-primary"]
+		},
+		items: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing["3"]
+		}
+	},
+	variants: { size: {
+		sm: {
+			root: { gap: tokens.spacing["2"] },
+			title: { ...textVariants.label1 },
+			items: { gap: tokens.spacing["2"] }
+		},
+		md: { root: {} },
+		lg: {
+			root: { gap: tokens.spacing["4"] },
+			title: { ...textVariants.body },
+			items: { gap: tokens.spacing["4"] }
+		}
+	} },
+	defaultVariants: { size: "md" }
+}));
+//#endregion
+export { controlPanelConfig };