@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,421 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/control-toggle.d.ts
+//#region src/control-toggle.d.ts
+/**
+ * @description A labeled on/off toggle using a segmented control
+ */
+declare const ControlToggle: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  ControlToggle: {
+    readonly base: {
+      readonly root: {
+        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 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: boolean;
+  onChange: (value: boolean) => void;
+  label: string;
+}, {
+  root: "div";
+  label: "span";
+}>>;
+type ControlToggleProps = React.ComponentProps<typeof ControlToggle>; //#endregion
+//#endregion
+export { ControlToggle, ControlToggleProps };

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

@@ -0,0 +1,36 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { ControlGroup } from "./control-group.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/control-toggle.js
+const OPTIONS = [{
+	id: "off",
+	label: "Off"
+}, {
+	id: "on",
+	label: "On"
+}];
+/**
+* @description A labeled on/off toggle using a segmented control
+*/
+const ControlToggle = createComponent(({ props, label, value, onChange }) => {
+	const handleChange = useCallback((id) => {
+		onChange(id === "on");
+	}, [onChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [/* @__PURE__ */ jsx("span", {
+			...props.label,
+			children: label
+		}), /* @__PURE__ */ jsx(ControlGroup, {
+			options: OPTIONS,
+			value: value ? "on" : "off",
+			onChange: handleChange,
+			size: "sm"
+		})]
+	});
+});
+//#endregion
+export { ControlToggle };

package/dist/components/dist/createSlot.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType, ReactNode } from "react";
+
+//#region ../components/dist/createSlot.d.ts
+//#region src/createSlot.d.ts
+declare function createSlot<T extends ComponentType<{
+  children?: ReactNode;
+}>>(): T; //#endregion
+//#endregion
+export { createSlot };

package/dist/components/dist/createSlot.js

@@ -0,0 +1,89 @@
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region ../components/dist/createSlot.js
+/**
+* Set a given ref to a given value
+* This utility takes care of different types of refs: callback refs and RefObject(s)
+*/
+function setRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+/**
+* A utility to compose multiple refs together
+* Accepts callback refs and RefObject(s)
+*/
+function composeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) setRef(ref, node);
+	};
+}
+function createSlot() {
+	const Slot = ({ ref, ...props }) => {
+		const { children, ...slotProps } = props;
+		const childrenArray = Children.toArray(children);
+		const slottable = childrenArray.find(isSlottable);
+		if (slottable) {
+			const newElement = slottable.props.children;
+			const hasChildren = isValidElement(newElement);
+			const newChildren = hasChildren && childrenArray.map((child) => {
+				if (child === slottable) {
+					if (Children.count(newElement) > 1) return Children.only(null);
+					if (isValidElement(newElement)) return newElement.props.children;
+					return null;
+				}
+				return child;
+			});
+			return /* @__PURE__ */ jsx(SlotClone, {
+				...slotProps,
+				ref,
+				children: hasChildren ? cloneElement(newElement, void 0, newChildren) : null
+			});
+		}
+		return /* @__PURE__ */ jsx(SlotClone, {
+			...slotProps,
+			ref,
+			children
+		});
+	};
+	Slot.displayName = "Slot";
+	const SlotClone = ({ ref, ...props }) => {
+		const { children, ...slotProps } = props;
+		if (isValidElement(children)) return cloneElement(children, {
+			...mergeProps(slotProps, children.props),
+			ref: ref ? composeRefs(ref, children.props?.ref) : children.props?.ref
+		});
+		return Children.count(children) > 1 ? Children.only(null) : null;
+	};
+	SlotClone.displayName = "SlotClone";
+	const Slottable = ({ children }) => {
+		return children;
+	};
+	function isSlottable(child) {
+		return isValidElement(child) && child.type === Slottable;
+	}
+	function mergeProps(slotProps, childProps) {
+		const overrideProps = { ...childProps };
+		for (const propName in childProps) {
+			const slotPropValue = slotProps[propName];
+			const childPropValue = childProps[propName];
+			if (/^on[A-Z]/.test(propName)) {
+				if (slotPropValue && childPropValue) overrideProps[propName] = (...args) => {
+					childPropValue(...args);
+					slotPropValue(...args);
+				};
+				else if (slotPropValue) overrideProps[propName] = slotPropValue;
+			} else if (propName === "style") overrideProps[propName] = {
+				...slotPropValue,
+				...childPropValue
+			};
+		}
+		return {
+			...slotProps,
+			...overrideProps
+		};
+	}
+	return Slot;
+}
+//#endregion
+export { createSlot };