@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,64 @@
+"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-color.js
+const HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;
+const DEFAULT_HEX = "#000000";
+/**
+* @description A hex color input with preview swatch and text field
+*/
+const ControlColor = createComponent(({ props, value, onChange, label }) => {
+	const nativeInputRef = useRef(null);
+	const handleSwatchClick = useCallback(() => {
+		nativeInputRef.current?.click();
+	}, []);
+	const handleNativeChange = useCallback((e) => {
+		onChange(e.target.value);
+	}, [onChange]);
+	const handleTextChange = useCallback((e) => {
+		const val = e.target.value;
+		if (HEX_PATTERN.test(val)) onChange(val);
+	}, [onChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [label && /* @__PURE__ */ jsx("span", {
+			...props.label,
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			...props.endContent,
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleSwatchClick,
+				style: { backgroundColor: value },
+				...props.swatch,
+				children: /* @__PURE__ */ jsx("input", {
+					ref: nativeInputRef,
+					type: "color",
+					value: HEX_PATTERN.test(value) ? value : DEFAULT_HEX,
+					onChange: handleNativeChange,
+					style: {
+						opacity: 0,
+						position: "absolute",
+						width: 0,
+						height: 0,
+						pointerEvents: "none"
+					},
+					tabIndex: -1,
+					"aria-hidden": true
+				})
+			}), /* @__PURE__ */ jsx("input", {
+				type: "text",
+				defaultValue: value,
+				onBlur: handleTextChange,
+				placeholder: "#000000",
+				maxLength: 7,
+				"aria-label": label ?? "Color value",
+				...props.input
+			})]
+		})]
+	});
+});
+//#endregion
+export { ControlColor };

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

@@ -0,0 +1,19 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/control-curve.config.d.ts
+//#region src/control-curve.config.d.ts
+declare const controlCurveConfig: ComponentConfig<{
+  ControlCurve: {
+    readonly base: {
+      readonly root: {
+        readonly borderRadius: string;
+        readonly overflow: "hidden";
+        readonly backgroundColor: string;
+      };
+    };
+    readonly variants: {};
+    readonly defaultVariants: {};
+  };
+}, {}>;
+type ControlCurveConfig = typeof controlCurveConfig; //#endregion
+//#endregion
+export { ControlCurveConfig, controlCurveConfig };

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

@@ -0,0 +1,14 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+//#region ../components/dist/control-curve.config.js
+const controlCurveConfig = defaultFoundationPreset.defineComponent("ControlCurve", ({ tokens }) => ({
+	base: { root: {
+		borderRadius: tokens.borderRadius.md,
+		overflow: "hidden",
+		backgroundColor: tokens.bg.secondary
+	} },
+	variants: {},
+	defaultVariants: {}
+}));
+//#endregion
+export { controlCurveConfig };

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

@@ -0,0 +1,36 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/control-curve.d.ts
+//#region src/control-curve.d.ts
+interface ControlCurveInput {
+  stiffness: number;
+  damping: number;
+  mass: number;
+}
+/**
+ * @description SVG spring curve visualization using Euler integration
+ */
+declare const ControlCurve: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  ControlCurve: {
+    readonly base: {
+      readonly root: {
+        readonly borderRadius: string;
+        readonly overflow: "hidden";
+        readonly backgroundColor: string;
+      };
+    };
+    readonly variants: {};
+    readonly defaultVariants: {};
+  };
+}, {}>, {
+  config: ControlCurveInput;
+  width?: number;
+  height?: number;
+}, {
+  root: "div";
+}>>;
+type ControlCurveProps = React.ComponentProps<typeof ControlCurve>; //#endregion
+//#endregion
+export { ControlCurve, ControlCurveInput, ControlCurveProps };

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

@@ -0,0 +1,81 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/control-curve.js
+function simulateSpring(config, totalSteps, dt) {
+	const stiffness = Number(config.stiffness) || 100;
+	const damping = Number(config.damping) || 10;
+	const mass = Number(config.mass) || 1;
+	const target = 1;
+	let pos = 0;
+	let vel = 0;
+	const positions = [pos];
+	for (let i = 0; i < totalSteps; i++) {
+		const acc = (stiffness * (target - pos) - damping * vel) / mass;
+		vel += acc * dt;
+		pos += vel * dt;
+		positions.push(pos);
+		if (Math.abs(pos - target) < .001 && Math.abs(vel) < .001) {
+			while (positions.length <= totalSteps) positions.push(target);
+			break;
+		}
+	}
+	return positions;
+}
+/**
+* @description SVG spring curve visualization using Euler integration
+*/
+const ControlCurve = createComponent(({ props, config, width: rawWidth = 280, height: rawHeight = 80 }) => {
+	const width = typeof rawWidth === "number" ? rawWidth : 280;
+	const height = typeof rawHeight === "number" ? rawHeight : 80;
+	const path = useMemo(() => {
+		const dt = 1 / 120;
+		const totalSteps = 360;
+		const positions = simulateSpring(config, totalSteps, dt);
+		const scaleY = height * .7;
+		return `M${positions.map((pos, i) => {
+			return `${i / totalSteps * width},${height - pos * scaleY}`;
+		}).join(" L")}`;
+	}, [
+		config.stiffness,
+		config.damping,
+		config.mass,
+		width,
+		height
+	]);
+	const targetY = height - height * .7;
+	return /* @__PURE__ */ jsx("div", {
+		...props.root,
+		children: /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			viewBox: `0 0 ${width} ${height}`,
+			style: {
+				display: "block",
+				width: "100%",
+				height: "auto"
+			},
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: 0,
+				y1: targetY,
+				x2: width,
+				y2: targetY,
+				stroke: "var(--uds-color-on-secondary)",
+				strokeWidth: .5,
+				strokeDasharray: "4 2",
+				opacity: .3
+			}), /* @__PURE__ */ jsx("path", {
+				d: path,
+				fill: "none",
+				stroke: "var(--uds-bg-brand)",
+				strokeWidth: 1.5,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})]
+		})
+	});
+});
+//#endregion
+export { ControlCurve };

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

@@ -0,0 +1,178 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/control-folder.config.d.ts
+//#region src/control-folder.config.d.ts
+declare const controlFolderConfig: ComponentConfig<{
+  ControlFolder: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+      };
+      readonly header: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly padding: `${string} 0`;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly width: "100%";
+      };
+      readonly chevron: {
+        readonly fontSize: "10px";
+        readonly lineHeight: "1";
+        readonly transition: "transform 0.15s ease";
+        readonly color: string;
+      };
+      readonly label: {
+        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 content: {
+        readonly overflow: "hidden";
+        readonly transition: "max-height 0.25s ease";
+      };
+      readonly children: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+        readonly paddingLeft: string;
+        readonly padding: `${string} 0 ${string} ${string}`;
+      };
+    };
+    readonly variants: {};
+    readonly defaultVariants: {};
+  };
+}, {}>;
+type ControlFolderConfig = typeof controlFolderConfig; //#endregion
+//#endregion
+export { ControlFolderConfig, controlFolderConfig };

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

@@ -0,0 +1,47 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/control-folder.config.js
+const controlFolderConfig = defaultFoundationPreset.defineComponent("ControlFolder", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		header: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing["2"],
+			padding: `${tokens.spacing["2"]} 0`,
+			cursor: "pointer",
+			backgroundColor: "transparent",
+			borderWidth: "0",
+			width: "100%"
+		},
+		chevron: {
+			fontSize: "10px",
+			lineHeight: "1",
+			transition: "transform 0.15s ease",
+			color: tokens.color["on-primary"]
+		},
+		label: {
+			...textVariants.label1,
+			color: tokens.color["on-primary"]
+		},
+		content: {
+			overflow: "hidden",
+			transition: "max-height 0.25s ease"
+		},
+		children: {
+			display: "flex",
+			flexDirection: "column",
+			gap: tokens.spacing["2"],
+			paddingLeft: tokens.spacing["4"],
+			padding: `${tokens.spacing["1"]} 0 ${tokens.spacing["1"]} ${tokens.spacing["4"]}`
+		}
+	},
+	variants: {},
+	defaultVariants: {}
+}));
+//#endregion
+export { controlFolderConfig };

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

@@ -0,0 +1,195 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/control-folder.d.ts
+//#region src/control-folder.d.ts
+/**
+ * @description A collapsible folder section with animated expand/collapse
+ */
+declare const ControlFolder: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  ControlFolder: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+      };
+      readonly header: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly padding: `${string} 0`;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly borderWidth: "0";
+        readonly width: "100%";
+      };
+      readonly chevron: {
+        readonly fontSize: "10px";
+        readonly lineHeight: "1";
+        readonly transition: "transform 0.15s ease";
+        readonly color: string;
+      };
+      readonly label: {
+        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 content: {
+        readonly overflow: "hidden";
+        readonly transition: "max-height 0.25s ease";
+      };
+      readonly children: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+        readonly paddingLeft: string;
+        readonly padding: `${string} 0 ${string} ${string}`;
+      };
+    };
+    readonly variants: {};
+    readonly defaultVariants: {};
+  };
+}, {}>, {
+  label: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}, {
+  root: "div";
+  header: "button";
+  chevron: "span";
+  label: "span";
+  content: "div";
+  children: "div";
+}>>;
+type ControlFolderProps = React.ComponentProps<typeof ControlFolder>; //#endregion
+//#endregion
+export { ControlFolder, ControlFolderProps };

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

@@ -0,0 +1,41 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/control-folder.js
+/**
+* @description A collapsible folder section with animated expand/collapse
+*/
+const ControlFolder = createComponent(({ props, label, defaultOpen = false, children }) => {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	const toggle = useCallback(() => {
+		setIsOpen((prev) => !prev);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: toggle,
+			"aria-expanded": isOpen,
+			...props.header,
+			children: [/* @__PURE__ */ jsx("span", {
+				style: { transform: isOpen ? "rotate(90deg)" : "rotate(0deg)" },
+				...props.chevron,
+				children: "▶"
+			}), /* @__PURE__ */ jsx("span", {
+				...props.label,
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: { maxHeight: isOpen ? 1e3 : 0 },
+			...props.content,
+			children: /* @__PURE__ */ jsx("div", {
+				...props.children,
+				children
+			})
+		})]
+	});
+});
+//#endregion
+export { ControlFolder };