@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,440 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/control-spring.d.ts
+//#region src/control-spring.d.ts
+interface SpringConfig {
+  stiffness: number;
+  damping: number;
+  mass: number;
+  visualDuration?: number;
+  bounce?: number;
+}
+/**
+ * @description A dual-mode spring editor (Time: duration+bounce / Physics: stiffness+damping+mass)
+ */
+declare const ControlSpring: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  ControlSpring: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+      readonly header: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+      };
+      readonly label: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+        readonly flex: "1";
+      };
+      readonly fields: {
+        readonly display: "grid";
+        readonly gridTemplateColumns: "1fr";
+        readonly gap: string;
+      };
+    };
+    readonly variants: {
+      readonly size: {
+        readonly sm: {
+          readonly label: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+        readonly md: {
+          readonly root: {};
+        };
+        readonly lg: {
+          readonly label: {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: "1";
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: "450";
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          } | {
+            readonly fontSize: string;
+            readonly fontWeight: string;
+            readonly lineHeight: string;
+            readonly fontFamily: string;
+          };
+        };
+      };
+    };
+    readonly defaultVariants: {
+      readonly size: "md";
+    };
+  };
+}, {}>, {
+  value: SpringConfig;
+  onChange: (value: SpringConfig) => void;
+  label: string;
+}, {
+  root: "div";
+  header: "div";
+  label: "span";
+  fields: "div";
+}>>;
+type ControlSpringProps = React.ComponentProps<typeof ControlSpring>; //#endregion
+//#endregion
+export { ControlSpring, ControlSpringProps, SpringConfig };

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

@@ -0,0 +1,136 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { ControlCurve } from "./control-curve.js";
+import { ControlGroup } from "./control-group.js";
+import { ControlSlider } from "./control-slider.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/control-spring.js
+const MODE_OPTIONS = [{
+	id: "simple",
+	label: "Time"
+}, {
+	id: "advanced",
+	label: "Physics"
+}];
+function toPhysics(visualDuration, bounce) {
+	return {
+		stiffness: (2 * Math.PI / visualDuration) ** 2,
+		damping: 4 * Math.PI * bounce / visualDuration,
+		mass: 1,
+		visualDuration,
+		bounce
+	};
+}
+function toSimple(config) {
+	const { stiffness, damping, mass } = config;
+	const visualDuration = 2 * Math.PI / Math.sqrt(stiffness / mass);
+	return {
+		visualDuration,
+		bounce: damping * visualDuration / (4 * Math.PI * mass)
+	};
+}
+/**
+* @description A dual-mode spring editor (Time: duration+bounce / Physics: stiffness+damping+mass)
+*/
+const ControlSpring = createComponent(({ props, label, value, onChange }) => {
+	const [mode, setMode] = useState("simple");
+	const safeValue = value ?? {
+		stiffness: 100,
+		damping: 10,
+		mass: 1
+	};
+	const simple = toSimple(safeValue);
+	const handleVisualDuration = useCallback((val) => {
+		onChange(toPhysics(val, simple.bounce));
+	}, [onChange, simple.bounce]);
+	const handleBounce = useCallback((val) => {
+		onChange(toPhysics(simple.visualDuration, val));
+	}, [onChange, simple.visualDuration]);
+	const handleStiffness = useCallback((val) => {
+		onChange({
+			...safeValue,
+			stiffness: val
+		});
+	}, [onChange, value]);
+	const handleDamping = useCallback((val) => {
+		onChange({
+			...safeValue,
+			damping: val
+		});
+	}, [onChange, value]);
+	const handleMass = useCallback((val) => {
+		onChange({
+			...safeValue,
+			mass: val
+		});
+	}, [onChange, value]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				...props.header,
+				children: [/* @__PURE__ */ jsx("span", {
+					...props.label,
+					children: label
+				}), /* @__PURE__ */ jsx(ControlGroup, {
+					options: MODE_OPTIONS,
+					value: mode,
+					onChange: (id) => setMode(id),
+					size: "sm"
+				})]
+			}),
+			mode === "simple" ? /* @__PURE__ */ jsxs("div", {
+				...props.fields,
+				children: [/* @__PURE__ */ jsx(ControlSlider, {
+					label: "Duration",
+					value: Math.round(simple.visualDuration * 100) / 100,
+					onChange: handleVisualDuration,
+					min: .1,
+					max: 5,
+					step: .05,
+					unit: "s"
+				}), /* @__PURE__ */ jsx(ControlSlider, {
+					label: "Bounce",
+					value: Math.round(simple.bounce * 100) / 100,
+					onChange: handleBounce,
+					min: 0,
+					max: 1,
+					step: .05
+				})]
+			}) : /* @__PURE__ */ jsxs("div", {
+				...props.fields,
+				children: [
+					/* @__PURE__ */ jsx(ControlSlider, {
+						label: "Stiffness",
+						value: Math.round(safeValue.stiffness),
+						onChange: handleStiffness,
+						min: 1,
+						max: 1e3,
+						step: 1
+					}),
+					/* @__PURE__ */ jsx(ControlSlider, {
+						label: "Damping",
+						value: Math.round(safeValue.damping * 10) / 10,
+						onChange: handleDamping,
+						min: .1,
+						max: 100,
+						step: .5
+					}),
+					/* @__PURE__ */ jsx(ControlSlider, {
+						label: "Mass",
+						value: Math.round(safeValue.mass * 10) / 10,
+						onChange: handleMass,
+						min: .1,
+						max: 10,
+						step: .1
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(ControlCurve, { config: safeValue })
+		]
+	});
+});
+//#endregion
+export { ControlSpring };