@yahoo/uds-v5-wip 1.60.0 → 1.62.0

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

@@ -1,63 +0,0 @@
-"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 jsxs("div", {
-		ref: containerRef,
-		...props.root,
-		children: [jsxs("div", {
-			...props.header,
-			children: [jsx("span", {
-				...props.label,
-				children: label
-			}), jsx("button", {
-				type: "button",
-				onClick: toggleOpen,
-				"aria-expanded": isOpen,
-				...props.trigger,
-				children: jsx("span", {
-					...props.triggerLabel,
-					children: activeLabel
-				})
-			})]
-		}), isOpen && jsx("div", {
-			...props.dropdown,
-			children: options.map((option) => jsx("button", {
-				type: "button",
-				onClick: () => handleSelect(option.id),
-				style: { backgroundColor: option.id === value ? "var(--uds-bg-tertiary)" : void 0 },
-				...props.option,
-				children: jsx("span", {
-					...props.optionLabel,
-					children: option.label
-				})
-			}, option.id))
-		})]
-	});
-});
-//#endregion
-export { ControlSelect };

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

@@ -1,104 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-//#region ../components/dist/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
-export { ControlSliderConfig, controlSliderConfig };

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

@@ -1,98 +0,0 @@
-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.radius.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.radius.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.radius.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.radius.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.radius.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

@@ -1,127 +0,0 @@
-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
-/**
- * @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
-export { ControlSlider, ControlSliderProps };

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

@@ -1,87 +0,0 @@
-"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 jsxs("div", {
-		...props.root,
-		children: [
-			jsxs("div", {
-				...props.lane,
-				ref: trackRef,
-				onPointerDown,
-				onPointerMove,
-				onPointerUp,
-				children: [
-					dotCount > 0 && jsx("div", {
-						...props.markers,
-						children: Array.from({ length: dotCount }, (_, i) => i + 1).map((n) => jsx("span", { ...props.marker }, n))
-					}),
-					jsx("div", {
-						...props.fill,
-						style: { width: `${pct}%` }
-					}),
-					jsx("div", {
-						...props.thumb,
-						style: { left: `${pct}%` }
-					})
-				]
-			}),
-			jsx("span", {
-				...props.label,
-				children: label
-			}),
-			jsxs("span", {
-				...props.value,
-				children: [value, unit]
-			})
-		]
-	});
-});
-//#endregion
-export { ControlSlider };