@yahoo/uds-v5-wip 1.60.0 → 1.61.0

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

@@ -1,70 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-import * as _$react from "react";
-import * as _$_uds_types0 from "@uds/types";
-
-//#region ../components/dist/slider.d.ts
-/**
- * @description A draggable control for selecting a numeric value within a range
- */
-declare const Slider: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
-  Slider: {
-    readonly base: {
-      readonly root: {
-        readonly width: "100%";
-        readonly padding: `${string} 0`;
-      };
-      readonly track: {
-        readonly height: "0.5rem";
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-        readonly overflow: "visible";
-        readonly width: "100%";
-      };
-      readonly range: {
-        readonly height: "100%";
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-      };
-      readonly thumb: {
-        readonly width: "1.25rem";
-        readonly height: "1.25rem";
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-        readonly borderWidth: string;
-        readonly borderColor: string;
-        readonly boxShadow: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)";
-        readonly cursor: "pointer";
-        readonly _hover: {
-          readonly borderColor: string;
-        };
-        readonly _focus: {
-          readonly borderColor: string;
-          readonly boxShadow: `0 0 0 3px ${string}`;
-        };
-      };
-    };
-  };
-}, {}>, {
-  defaultValue?: number[];
-  value?: number[];
-  onValueChange?: (value: number[]) => void;
-  onValueCommit?: (value: number[]) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  minStepsBetweenThumbs?: number;
-  orientation?: "horizontal" | "vertical";
-  disabled?: boolean;
-  name?: string;
-  form?: string;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-}, {
-  root: "div";
-  track: "div";
-  range: "div";
-  thumb: "div";
-}>>;
-type SliderProps = React.ComponentProps<typeof Slider>;
-//#endregion
-export { Slider, SliderProps };

package/dist/components/dist/slider.js

@@ -1,247 +0,0 @@
-"use client";
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-import { useCallback, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../components/dist/slider.js
-function clamp(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-function snapToStep(value, min, step) {
-	return min + Math.round((value - min) / step) * step;
-}
-function getPercent(value, min, max) {
-	if (max === min) return 0;
-	return (value - min) / (max - min) * 100;
-}
-function toNumberArray(value, fallback) {
-	if (Array.isArray(value)) return value.map(Number);
-	if (typeof value === "number") return [value];
-	if (typeof value === "string" && value !== "") return [Number(value)];
-	return fallback;
-}
-/**
-* @description A draggable control for selecting a numeric value within a range
-*/
-const Slider = createComponent(({ props, defaultValue = [0], value: controlledValue, onValueChange, onValueCommit, min = 0, max = 100, step = 1, minStepsBetweenThumbs = 0, orientation = "horizontal", disabled = false, name, form, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const [internalValue, setInternalValue] = useState(toNumberArray(defaultValue, [0]));
-	const values = controlledValue != null ? toNumberArray(controlledValue, [0]) : internalValue;
-	const trackRef = useRef(null);
-	const draggingIndex = useRef(null);
-	const isHorizontal = orientation === "horizontal";
-	const updateValue = useCallback((index, newVal) => {
-		const snapped = snapToStep(clamp(newVal, min, max), min, step);
-		const next = [...values];
-		next[index] = snapped;
-		const minGap = minStepsBetweenThumbs * step;
-		if (index > 0 && next[index] < next[index - 1] + minGap) next[index] = next[index - 1] + minGap;
-		if (index < next.length - 1 && next[index] > next[index + 1] - minGap) next[index] = next[index + 1] - minGap;
-		next[index] = clamp(next[index], min, max);
-		if (!controlledValue) setInternalValue(next);
-		onValueChange?.(next);
-		return next;
-	}, [
-		values,
-		min,
-		max,
-		step,
-		minStepsBetweenThumbs,
-		controlledValue,
-		onValueChange
-	]);
-	const getValueFromPointer = useCallback((clientX, clientY) => {
-		const track = trackRef.current;
-		if (!track) return min;
-		const rect = track.getBoundingClientRect();
-		let percent;
-		if (isHorizontal) percent = (clientX - rect.left) / rect.width;
-		else percent = 1 - (clientY - rect.top) / rect.height;
-		percent = clamp(percent, 0, 1);
-		return min + percent * (max - min);
-	}, [
-		min,
-		max,
-		isHorizontal
-	]);
-	const findClosestThumb = useCallback((pointerValue) => {
-		let closestIndex = 0;
-		let closestDist = Math.abs(values[0] - pointerValue);
-		for (let i = 1; i < values.length; i++) {
-			const dist = Math.abs(values[i] - pointerValue);
-			if (dist < closestDist) {
-				closestDist = dist;
-				closestIndex = i;
-			}
-		}
-		return closestIndex;
-	}, [values]);
-	const handlePointerDown = useCallback((e) => {
-		if (disabled) return;
-		e.preventDefault();
-		const val = getValueFromPointer(e.clientX, e.clientY);
-		const index = findClosestThumb(val);
-		draggingIndex.current = index;
-		updateValue(index, val);
-		e.currentTarget.setPointerCapture(e.pointerId);
-	}, [
-		disabled,
-		getValueFromPointer,
-		findClosestThumb,
-		updateValue
-	]);
-	const handlePointerMove = useCallback((e) => {
-		if (draggingIndex.current === null) return;
-		const val = getValueFromPointer(e.clientX, e.clientY);
-		updateValue(draggingIndex.current, val);
-	}, [getValueFromPointer, updateValue]);
-	const handlePointerUp = useCallback(() => {
-		if (draggingIndex.current === null) return;
-		draggingIndex.current = null;
-		onValueCommit?.(controlledValue ?? internalValue);
-	}, [
-		controlledValue,
-		internalValue,
-		onValueCommit
-	]);
-	const handleKeyDown = useCallback((index, e) => {
-		if (disabled) return;
-		const largeStep = Math.max(step * 10, (max - min) / 10);
-		let newVal = values[index];
-		let handled = true;
-		switch (e.key) {
-			case "ArrowRight":
-			case "ArrowUp":
-				newVal += step;
-				break;
-			case "ArrowLeft":
-			case "ArrowDown":
-				newVal -= step;
-				break;
-			case "PageUp":
-				newVal += largeStep;
-				break;
-			case "PageDown":
-				newVal -= largeStep;
-				break;
-			case "Home":
-				newVal = min;
-				break;
-			case "End":
-				newVal = max;
-				break;
-			default: handled = false;
-		}
-		if (handled) {
-			e.preventDefault();
-			const next = updateValue(index, newVal);
-			onValueCommit?.(next);
-		}
-	}, [
-		disabled,
-		values,
-		min,
-		max,
-		step,
-		updateValue,
-		onValueCommit
-	]);
-	const percents = values.map((v) => getPercent(v, min, max));
-	const rangeStart = values.length === 1 ? 0 : Math.min(...percents);
-	const rangeEnd = values.length === 1 ? percents[0] : Math.max(...percents);
-	const rangeStyle = isHorizontal ? {
-		left: `${rangeStart}%`,
-		width: `${rangeEnd - rangeStart}%`
-	} : {
-		bottom: `${rangeStart}%`,
-		height: `${rangeEnd - rangeStart}%`
-	};
-	const rootStyle = isHorizontal ? {
-		position: "relative",
-		display: "flex",
-		alignItems: "center",
-		width: "100%",
-		touchAction: "none",
-		userSelect: "none"
-	} : {
-		position: "relative",
-		display: "flex",
-		justifyContent: "center",
-		height: "100%",
-		touchAction: "none",
-		userSelect: "none"
-	};
-	const trackStyle = isHorizontal ? {
-		position: "relative",
-		width: "100%",
-		cursor: disabled ? "default" : "pointer"
-	} : {
-		position: "relative",
-		height: "100%",
-		cursor: disabled ? "default" : "pointer"
-	};
-	return jsxs("div", {
-		style: rootStyle,
-		"data-orientation": orientation,
-		"data-disabled": disabled || void 0,
-		onPointerDown: handlePointerDown,
-		onPointerMove: handlePointerMove,
-		onPointerUp: handlePointerUp,
-		...props.root,
-		children: [
-			jsx("div", {
-				ref: trackRef,
-				style: trackStyle,
-				"data-orientation": orientation,
-				"data-disabled": disabled || void 0,
-				...props.track,
-				children: jsx("div", {
-					style: {
-						position: "absolute",
-						...rangeStyle
-					},
-					"data-orientation": orientation,
-					"data-disabled": disabled || void 0,
-					...props.range
-				})
-			}),
-			values.map((value, index) => {
-				const percent = getPercent(value, min, max);
-				const thumbStyle = isHorizontal ? {
-					position: "absolute",
-					left: `${percent}%`,
-					top: "50%",
-					translate: "-50% -50%"
-				} : {
-					position: "absolute",
-					bottom: `${percent}%`,
-					left: "50%",
-					translate: "-50% 50%"
-				};
-				return jsx("div", {
-					role: "slider",
-					tabIndex: disabled ? -1 : 0,
-					style: thumbStyle,
-					"aria-valuemin": min,
-					"aria-valuemax": max,
-					"aria-valuenow": value,
-					"aria-orientation": orientation,
-					"aria-disabled": disabled || void 0,
-					"aria-label": values.length === 1 ? ariaLabel : void 0,
-					"aria-labelledby": values.length === 1 ? ariaLabelledBy : void 0,
-					"data-orientation": orientation,
-					"data-disabled": disabled || void 0,
-					onKeyDown: (e) => handleKeyDown(index, e),
-					...props.thumb
-				}, index);
-			}),
-			name && values.map((value, index) => jsx("input", {
-				type: "hidden",
-				name: values.length > 1 ? `${name}[]` : name,
-				value,
-				form
-			}, `input-${index}`))
-		]
-	});
-});
-//#endregion
-export { Slider };

package/dist/components/dist/spinner.config.d.ts

@@ -1,34 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-//#region ../components/dist/spinner.config.d.ts
-declare const spinnerConfig: ComponentConfig<{
-  Spinner: {
-    readonly base: {
-      readonly root: {
-        readonly width: "1rem";
-        readonly height: "1rem";
-        readonly color: "currentColor";
-        readonly animation: "spin 1s linear infinite";
-        readonly flexShrink: "0";
-      };
-    };
-    readonly variants: {
-      readonly size: {
-        readonly sm: {
-          readonly root: {
-            readonly width: "0.75rem";
-            readonly height: "0.75rem";
-          };
-        };
-        readonly lg: {
-          readonly root: {
-            readonly width: "1.5rem";
-            readonly height: "1.5rem";
-          };
-        };
-      };
-    };
-  };
-}, {}>;
-type SpinnerConfig = typeof spinnerConfig;
-//#endregion
-export { SpinnerConfig, spinnerConfig };

package/dist/components/dist/spinner.config.js

@@ -1,24 +0,0 @@
-import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
-import "../../foundational-presets/dist/index.js";
-//#region ../components/dist/spinner.config.js
-const spinnerConfig = defaultFoundationPreset.defineComponent("Spinner", () => ({
-	base: { root: {
-		width: "1rem",
-		height: "1rem",
-		color: "currentColor",
-		animation: "spin 1s linear infinite",
-		flexShrink: "0"
-	} },
-	variants: { size: {
-		sm: { root: {
-			width: "0.75rem",
-			height: "0.75rem"
-		} },
-		lg: { root: {
-			width: "1.5rem",
-			height: "1.5rem"
-		} }
-	} }
-}));
-//#endregion
-export { spinnerConfig };

package/dist/components/dist/spinner.d.ts

@@ -1,42 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-import * as _$react from "react";
-import * as _$_uds_types0 from "@uds/types";
-
-//#region ../components/dist/spinner.d.ts
-/**
- * @description An animated indicator that signals an ongoing process
- */
-declare const Spinner: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
-  Spinner: {
-    readonly base: {
-      readonly root: {
-        readonly width: "1rem";
-        readonly height: "1rem";
-        readonly color: "currentColor";
-        readonly animation: "spin 1s linear infinite";
-        readonly flexShrink: "0";
-      };
-    };
-    readonly variants: {
-      readonly size: {
-        readonly sm: {
-          readonly root: {
-            readonly width: "0.75rem";
-            readonly height: "0.75rem";
-          };
-        };
-        readonly lg: {
-          readonly root: {
-            readonly width: "1.5rem";
-            readonly height: "1.5rem";
-          };
-        };
-      };
-    };
-  };
-}, {}>, {}, {
-  root: "svg";
-}>>;
-type SpinnerProps = React.ComponentProps<typeof Spinner>;
-//#endregion
-export { Spinner, SpinnerProps };

package/dist/components/dist/spinner.js

@@ -1,29 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-import { jsx } from "react/jsx-runtime";
-//#region ../components/dist/spinner.js
-/**
-* @description An animated indicator that signals an ongoing process
-*/
-const Spinner = createComponent(({ props }) => {
-	return jsx("svg", {
-		role: "status",
-		"aria-label": "Loading",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		xmlns: "http://www.w3.org/2000/svg",
-		...props.root,
-		children: jsx("circle", {
-			cx: "12",
-			cy: "12",
-			r: "10",
-			stroke: "currentColor",
-			strokeWidth: "2.5",
-			strokeLinecap: "round",
-			strokeDasharray: "56",
-			strokeDashoffset: "14"
-		})
-	});
-});
-//#endregion
-export { Spinner };

package/dist/components/dist/svg.d.ts

@@ -1,21 +0,0 @@
-import * as _$react from "react";
-import { HtmlSvgPathProps, HtmlSvgProps, HtmlSvgTextProps, StyleAndModifierProps } from "@uds/types";
-
-//#region ../components/dist/svg.d.ts
-interface SvgProps extends HtmlSvgProps, StyleAndModifierProps {}
-interface SvgPathProps extends HtmlSvgPathProps, StyleAndModifierProps {}
-interface SvgTextProps extends HtmlSvgTextProps, StyleAndModifierProps {}
-/**
- * @description A container that defines a new coordinate system and viewport
- */
-declare const Svg: _$react.FC<SvgProps>;
-/**
- * @description A primitive that defines a path to be rendered
- */
-declare const SvgPath: _$react.FC<SvgPathProps>;
-/**
- * @description A text element rendered within an SVG
- */
-declare const SvgText: _$react.FC<SvgTextProps>;
-//#endregion
-export { Svg, SvgPath, SvgPathProps, SvgProps, SvgText, SvgTextProps };

package/dist/components/dist/svg.js

@@ -1,17 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-//#region ../components/dist/svg.js
-/**
-* @description A container that defines a new coordinate system and viewport
-*/
-const Svg = createComponent("svg");
-/**
-* @description A primitive that defines a path to be rendered
-*/
-const SvgPath = createComponent("path");
-/**
-* @description A text element rendered within an SVG
-*/
-const SvgText = createComponent("text");
-//#endregion
-export { Svg, SvgPath, SvgText };