@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,63 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/control-select.js
+/**
+* @description A labeled dropdown select with click-outside-to-close
+*/
+const ControlSelect = createComponent(({ props, label, value, options, onChange }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const containerRef = useRef(null);
+	const toggleOpen = useCallback(() => {
+		setIsOpen((prev) => !prev);
+	}, []);
+	const handleSelect = useCallback((id) => {
+		onChange(id);
+		setIsOpen(false);
+	}, [onChange]);
+	useEffect(() => {
+		if (!isOpen) return;
+		function handleClickOutside(e) {
+			if (containerRef.current && !containerRef.current.contains(e.target)) setIsOpen(false);
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [isOpen]);
+	const activeLabel = options.find((o) => o.id === value)?.label ?? value;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		...props.root,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...props.header,
+			children: [/* @__PURE__ */ jsx("span", {
+				...props.label,
+				children: label
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: toggleOpen,
+				"aria-expanded": isOpen,
+				...props.trigger,
+				children: /* @__PURE__ */ jsx("span", {
+					...props.triggerLabel,
+					children: activeLabel
+				})
+			})]
+		}), isOpen && /* @__PURE__ */ jsx("div", {
+			...props.dropdown,
+			children: options.map((option) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => handleSelect(option.id),
+				style: { backgroundColor: option.id === value ? "var(--uds-bg-tertiary)" : void 0 },
+				...props.option,
+				children: /* @__PURE__ */ jsx("span", {
+					...props.optionLabel,
+					children: option.label
+				})
+			}, option.id))
+		})]
+	});
+});
+//#endregion
+export { ControlSelect };

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

@@ -0,0 +1,105 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/control-slider.config.d.ts
+//#region src/control-slider.config.d.ts
+declare const controlSliderConfig: ComponentConfig<{
+  ControlSlider: {
+    readonly base: {
+      readonly root: {
+        readonly position: "relative";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly height: string;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly cursor: "ew-resize";
+        readonly userSelect: "none";
+        readonly touchAction: "none";
+        readonly overflow: "hidden";
+        readonly transition: "background-color 0.2s";
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly lane: {
+        readonly position: "absolute";
+        readonly left: string;
+        readonly right: string;
+        readonly top: string;
+        readonly bottom: string;
+        readonly borderRadius: string;
+        readonly cursor: "ew-resize";
+      };
+      readonly markers: {
+        readonly position: "absolute";
+        readonly left: "25%";
+        readonly right: "25%";
+        readonly top: "50%";
+        readonly height: string;
+        readonly transform: "translateY(-50%)";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly pointerEvents: "none";
+        readonly opacity: "0.2";
+      };
+      readonly marker: {
+        readonly width: string;
+        readonly height: string;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+      };
+      readonly fill: {
+        readonly position: "absolute";
+        readonly left: string;
+        readonly top: string;
+        readonly bottom: string;
+        readonly width: string;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly opacity: "0.05";
+        readonly transition: "width 0.1s linear";
+        readonly pointerEvents: "none";
+      };
+      readonly thumb: {
+        readonly position: "absolute";
+        readonly top: "50%";
+        readonly left: string;
+        readonly transform: "translate(-50%, -50%)";
+        readonly width: string;
+        readonly height: string;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly opacity: "0.5";
+        readonly transition: "left 0.1s linear";
+        readonly pointerEvents: "auto";
+        readonly cursor: "ew-resize";
+      };
+      readonly label: {
+        readonly position: "relative";
+        readonly zIndex: "2";
+        readonly paddingLeft: string;
+        readonly fontSize: "0.8125rem";
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly pointerEvents: "none";
+      };
+      readonly value: {
+        readonly position: "absolute";
+        readonly right: string;
+        readonly top: "0";
+        readonly bottom: "0";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "flex-end";
+        readonly fontSize: "0.8125rem";
+        readonly fontWeight: string;
+        readonly fontVariantNumeric: "tabular-nums";
+        readonly color: string;
+        readonly pointerEvents: "none";
+      };
+    };
+  };
+}, {}>;
+type ControlSliderConfig = typeof controlSliderConfig; //#endregion
+//#endregion
+export { ControlSliderConfig, controlSliderConfig };

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

@@ -0,0 +1,98 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+//#region ../components/dist/control-slider.config.js
+const controlSliderConfig = defaultFoundationPreset.defineComponent("ControlSlider", ({ tokens }) => ({ base: {
+	root: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		height: tokens.spacing["8"],
+		borderRadius: tokens.borderRadius.md,
+		backgroundColor: tokens.bg.secondary,
+		cursor: "ew-resize",
+		userSelect: "none",
+		touchAction: "none",
+		overflow: "hidden",
+		transition: "background-color 0.2s",
+		_hover: { backgroundColor: tokens.bg.tertiary }
+	},
+	lane: {
+		position: "absolute",
+		left: tokens.spacing["0"],
+		right: tokens.spacing["0"],
+		top: tokens.spacing["0"],
+		bottom: tokens.spacing["0"],
+		borderRadius: tokens.borderRadius.md,
+		cursor: "ew-resize"
+	},
+	markers: {
+		position: "absolute",
+		left: "25%",
+		right: "25%",
+		top: "50%",
+		height: tokens.spacing["1"],
+		transform: "translateY(-50%)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		pointerEvents: "none",
+		opacity: "0.2"
+	},
+	marker: {
+		width: tokens.spacing["0.5"],
+		height: tokens.spacing["0.5"],
+		borderRadius: tokens.borderRadius.full,
+		backgroundColor: tokens.color["on-secondary"]
+	},
+	fill: {
+		position: "absolute",
+		left: tokens.spacing["0"],
+		top: tokens.spacing["0"],
+		bottom: tokens.spacing["0"],
+		width: tokens.spacing["0"],
+		borderRadius: tokens.borderRadius.md,
+		backgroundColor: tokens.color["always/black"],
+		opacity: "0.05",
+		transition: "width 0.1s linear",
+		pointerEvents: "none"
+	},
+	thumb: {
+		position: "absolute",
+		top: "50%",
+		left: tokens.spacing["0"],
+		transform: "translate(-50%, -50%)",
+		width: tokens.spacing["1"],
+		height: tokens.spacing["3"],
+		borderRadius: tokens.borderRadius.full,
+		backgroundColor: tokens.color["on-secondary"],
+		opacity: "0.5",
+		transition: "left 0.1s linear",
+		pointerEvents: "auto",
+		cursor: "ew-resize"
+	},
+	label: {
+		position: "relative",
+		zIndex: "2",
+		paddingLeft: tokens.spacing["3"],
+		fontSize: "0.8125rem",
+		fontWeight: tokens.fontWeight.medium,
+		color: tokens.color["on-secondary"],
+		pointerEvents: "none"
+	},
+	value: {
+		position: "absolute",
+		right: tokens.spacing["3"],
+		top: "0",
+		bottom: "0",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		fontSize: "0.8125rem",
+		fontWeight: tokens.fontWeight.normal,
+		fontVariantNumeric: "tabular-nums",
+		color: tokens.color["on-secondary"],
+		pointerEvents: "none"
+	}
+} }));
+//#endregion
+export { controlSliderConfig };

package/dist/components/dist/control-slider.d.ts

@@ -0,0 +1,128 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/control-slider.d.ts
+//#region src/control-slider.d.ts
+/**
+ * @description A scrub-style slider for precise numeric value selection
+ */
+declare const ControlSlider: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  ControlSlider: {
+    readonly base: {
+      readonly root: {
+        readonly position: "relative";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly height: string;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly cursor: "ew-resize";
+        readonly userSelect: "none";
+        readonly touchAction: "none";
+        readonly overflow: "hidden";
+        readonly transition: "background-color 0.2s";
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly lane: {
+        readonly position: "absolute";
+        readonly left: string;
+        readonly right: string;
+        readonly top: string;
+        readonly bottom: string;
+        readonly borderRadius: string;
+        readonly cursor: "ew-resize";
+      };
+      readonly markers: {
+        readonly position: "absolute";
+        readonly left: "25%";
+        readonly right: "25%";
+        readonly top: "50%";
+        readonly height: string;
+        readonly transform: "translateY(-50%)";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly pointerEvents: "none";
+        readonly opacity: "0.2";
+      };
+      readonly marker: {
+        readonly width: string;
+        readonly height: string;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+      };
+      readonly fill: {
+        readonly position: "absolute";
+        readonly left: string;
+        readonly top: string;
+        readonly bottom: string;
+        readonly width: string;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly opacity: "0.05";
+        readonly transition: "width 0.1s linear";
+        readonly pointerEvents: "none";
+      };
+      readonly thumb: {
+        readonly position: "absolute";
+        readonly top: "50%";
+        readonly left: string;
+        readonly transform: "translate(-50%, -50%)";
+        readonly width: string;
+        readonly height: string;
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly opacity: "0.5";
+        readonly transition: "left 0.1s linear";
+        readonly pointerEvents: "auto";
+        readonly cursor: "ew-resize";
+      };
+      readonly label: {
+        readonly position: "relative";
+        readonly zIndex: "2";
+        readonly paddingLeft: string;
+        readonly fontSize: "0.8125rem";
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly pointerEvents: "none";
+      };
+      readonly value: {
+        readonly position: "absolute";
+        readonly right: string;
+        readonly top: "0";
+        readonly bottom: "0";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "flex-end";
+        readonly fontSize: "0.8125rem";
+        readonly fontWeight: string;
+        readonly fontVariantNumeric: "tabular-nums";
+        readonly color: string;
+        readonly pointerEvents: "none";
+      };
+    };
+  };
+}, {}>, {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  onChange: (v: number) => void;
+  unit?: string;
+}, {
+  root: "div";
+  lane: "div";
+  markers: "div";
+  marker: "span";
+  fill: "div";
+  thumb: "div";
+  label: "span";
+  value: "span";
+}>>;
+type ControlSliderProps = React.ComponentProps<typeof ControlSlider>; //#endregion
+//#endregion
+export { ControlSlider, ControlSliderProps };

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

@@ -0,0 +1,87 @@
+"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-slider.js
+function clamp(v, lo, hi) {
+	return Math.min(hi, Math.max(lo, v));
+}
+function quantize(v, step) {
+	return Math.round(v / step) * step;
+}
+/**
+* @description A scrub-style slider for precise numeric value selection
+*/
+const ControlSlider = createComponent(({ props, label, value, min, max, step, onChange, unit = "" }) => {
+	const trackRef = useRef(null);
+	const dragging = useRef(false);
+	const pct = (value - min) / (max - min) * 100;
+	const rawSegments = (max - min) / step;
+	const isDiscrete = Number.isFinite(step) && step > 0 && Number.isFinite(rawSegments) && rawSegments > 1 && rawSegments <= 200 && Math.abs(rawSegments - Math.round(rawSegments)) < 1e-6;
+	const interiorSnapCount = isDiscrete ? Math.max(Math.round(rawSegments) - 1, 0) : 0;
+	const dotCount = isDiscrete ? Math.min(interiorSnapCount, 5) : 0;
+	const resolve = useCallback((clientX) => {
+		const el = trackRef.current;
+		if (!el) return;
+		const rect = el.getBoundingClientRect();
+		const interactiveWidth = Math.max(rect.width, 1);
+		const clamped = clamp(quantize(min + clamp((clientX - rect.left) / interactiveWidth, 0, 1) * (max - min), step), min, max);
+		const decimals = step < 1 ? String(step).split(".")[1]?.length ?? 0 : 0;
+		onChange(Number(clamped.toFixed(decimals)));
+	}, [
+		min,
+		max,
+		step,
+		onChange
+	]);
+	const onPointerDown = useCallback((e) => {
+		e.preventDefault();
+		e.currentTarget.setPointerCapture(e.pointerId);
+		dragging.current = true;
+		resolve(e.clientX);
+	}, [resolve]);
+	const onPointerMove = useCallback((e) => {
+		if (!dragging.current) return;
+		resolve(e.clientX);
+	}, [resolve]);
+	const onPointerUp = useCallback(() => {
+		dragging.current = false;
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				...props.lane,
+				ref: trackRef,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				children: [
+					dotCount > 0 && /* @__PURE__ */ jsx("div", {
+						...props.markers,
+						children: Array.from({ length: dotCount }, (_, i) => i + 1).map((n) => /* @__PURE__ */ jsx("span", { ...props.marker }, n))
+					}),
+					/* @__PURE__ */ jsx("div", {
+						...props.fill,
+						style: { width: `${pct}%` }
+					}),
+					/* @__PURE__ */ jsx("div", {
+						...props.thumb,
+						style: { left: `${pct}%` }
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				...props.label,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				...props.value,
+				children: [value, unit]
+			})
+		]
+	});
+});
+//#endregion
+export { ControlSlider };