@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,71 @@
+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
+//#region src/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
+//#endregion
+export { Slider, SliderProps };

package/dist/components/dist/slider.js

@@ -0,0 +1,247 @@
+"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 /* @__PURE__ */ jsxs("div", {
+		style: rootStyle,
+		"data-orientation": orientation,
+		"data-disabled": disabled || void 0,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		...props.root,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: trackRef,
+				style: trackStyle,
+				"data-orientation": orientation,
+				"data-disabled": disabled || void 0,
+				...props.track,
+				children: /* @__PURE__ */ 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 /* @__PURE__ */ 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) => /* @__PURE__ */ 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

@@ -0,0 +1,35 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/spinner.config.d.ts
+//#region src/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
+//#endregion
+export { SpinnerConfig, spinnerConfig };

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,43 @@
+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
+//#region src/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
+//#endregion
+export { Spinner, SpinnerProps };

package/dist/components/dist/spinner.js

@@ -0,0 +1,29 @@
+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 /* @__PURE__ */ jsx("svg", {
+		role: "status",
+		"aria-label": "Loading",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		...props.root,
+		children: /* @__PURE__ */ 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

@@ -0,0 +1,22 @@
+import * as _$react from "react";
+import { HtmlSvgPathProps, HtmlSvgProps, HtmlSvgTextProps, StyleAndModifierProps } from "@uds/types";
+
+//#region ../components/dist/svg.d.ts
+//#region src/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
+//#endregion
+export { Svg, SvgPath, SvgPathProps, SvgProps, SvgText, SvgTextProps };

package/dist/components/dist/svg.js

@@ -0,0 +1,17 @@
+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 };