@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/toast.js

@@ -0,0 +1,159 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import { createProvider } from "../../core/dist/createProvider.js";
+import "../../core/dist/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/toast.js
+const AUTO_DISMISS_MS = 4e3;
+let toastId = 0;
+/**
+* @description A brief notification that appears temporarily to provide feedback.
+* Supports sonner-style stacking, expand-on-hover, and swipe-to-dismiss.
+*/
+const Toast = createComponent(({ props, children, toastId, index, expanded, onDismiss, onDragEnd, onMeasure, renderMessage }) => {
+	const dismiss = useCallback(() => {
+		onDismiss?.(toastId);
+	}, [toastId, onDismiss]);
+	const handleDragEnd = useCallback((_event, info) => {
+		onDragEnd?.(toastId, info);
+	}, [toastId, onDragEnd]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: (el) => onMeasure?.(toastId, el),
+		style: {
+			position: index === 0 ? "relative" : "absolute",
+			bottom: 0,
+			right: 0,
+			zIndex: toastId
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			...props.item,
+			"data-state": expanded ? "expanded" : "collapsed",
+			"data-motion-index": index,
+			onDragEnd: handleDragEnd,
+			children: [renderMessage ? renderMessage(({ children: c }) => /* @__PURE__ */ jsx("span", {
+				...props.text,
+				children: c
+			})) : /* @__PURE__ */ jsx("span", {
+				...props.text,
+				children
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: dismiss,
+				...props.dismiss,
+				children: "✕"
+			})]
+		})
+	});
+});
+const [ToastProvider, useToast] = createProvider("Toast", ({ children }) => {
+	const [toasts, setToasts] = useState([]);
+	const [expanded, setExpanded] = useState(false);
+	const heightsRef = useRef(/* @__PURE__ */ new Map());
+	const timersRef = useRef(/* @__PURE__ */ new Map());
+	const leaveTimerRef = useRef(null);
+	const dismiss = useCallback((id) => {
+		heightsRef.current.delete(id);
+		setToasts((prev) => prev.filter((t) => t.id !== id));
+		const timer = timersRef.current.get(id);
+		if (timer) {
+			clearTimeout(timer);
+			timersRef.current.delete(id);
+		}
+	}, []);
+	const startDismissTimer = useCallback((id) => {
+		const timer = setTimeout(() => {
+			timersRef.current.delete(id);
+			dismiss(id);
+		}, AUTO_DISMISS_MS);
+		timersRef.current.set(id, timer);
+	}, [dismiss]);
+	const addToast = useCallback((message, options) => {
+		const id = ++toastId;
+		const { duration, ...rest } = options ?? {};
+		setToasts((prev) => [{
+			id,
+			message,
+			...rest
+		}, ...prev]);
+		if (duration !== Number.POSITIVE_INFINITY) startDismissTimer(id);
+		return id;
+	}, [startDismissTimer]);
+	const updateToast = useCallback((id, message, options) => {
+		const { duration, ...rest } = options ?? {};
+		setToasts((prev) => prev.map((t) => t.id === id ? {
+			...t,
+			message,
+			...rest
+		} : t));
+		if (duration != null && duration !== Number.POSITIVE_INFINITY) {
+			const existing = timersRef.current.get(id);
+			if (existing) clearTimeout(existing);
+			startDismissTimer(id);
+		}
+	}, [startDismissTimer]);
+	const handleMouseEnter = useCallback(() => {
+		if (leaveTimerRef.current) {
+			clearTimeout(leaveTimerRef.current);
+			leaveTimerRef.current = null;
+		}
+		setExpanded(true);
+		for (const [id, timer] of timersRef.current) {
+			clearTimeout(timer);
+			timersRef.current.delete(id);
+		}
+	}, []);
+	const handleMouseLeave = useCallback(() => {
+		leaveTimerRef.current = setTimeout(() => {
+			leaveTimerRef.current = null;
+			setExpanded(false);
+			for (const toast of toasts) if (!timersRef.current.has(toast.id)) startDismissTimer(toast.id);
+		}, 100);
+	}, [toasts, startDismissTimer]);
+	const measureHeight = useCallback((id, el) => {
+		if (el) heightsRef.current.set(id, el.offsetHeight);
+	}, []);
+	const handleDragEnd = useCallback((id, info) => {
+		const swipedX = Math.abs(info.offset.x) > 150 || Math.abs(info.velocity.x) > 500;
+		const swipedDown = info.offset.y > 100 || info.velocity.y > 500;
+		if (swipedX || swipedDown) dismiss(id);
+	}, [dismiss]);
+	useEffect(() => {
+		return () => {
+			for (const timer of timersRef.current.values()) clearTimeout(timer);
+			if (leaveTimerRef.current) clearTimeout(leaveTimerRef.current);
+		};
+	}, []);
+	return {
+		context: {
+			addToast,
+			updateToast,
+			dismissToast: dismiss
+		},
+		render: /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsx("div", {
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			style: {
+				position: "fixed",
+				bottom: "1rem",
+				right: "1rem",
+				zIndex: 100,
+				pointerEvents: toasts.length > 0 ? "auto" : "none"
+			},
+			children: toasts.map(({ id, message, variant }, index) => /* @__PURE__ */ jsx(Toast, {
+				toastId: id,
+				index,
+				expanded,
+				variant,
+				toastCount: toasts.length,
+				onDismiss: dismiss,
+				onDragEnd: handleDragEnd,
+				onMeasure: measureHeight,
+				...typeof message === "function" ? { renderMessage: message } : {},
+				children: typeof message === "function" ? null : message
+			}, id))
+		})] })
+	};
+});
+//#endregion
+export { Toast, ToastProvider, useToast };

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

@@ -0,0 +1,194 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/tooltip.config.d.ts
+//#region src/tooltip.config.d.ts
+declare const tooltipConfig: ComponentConfig<{
+  Tooltip: {
+    readonly base: {
+      readonly trigger: {
+        readonly position: "relative";
+        readonly display: "inline-flex";
+      };
+      readonly content: {
+        readonly position: "absolute";
+        readonly bottom: "100%";
+        readonly left: "50%";
+        readonly marginBottom: "6px";
+        readonly pointerEvents: "none";
+        readonly backgroundColor: string;
+        readonly borderRadius: string;
+        readonly padding: `${string} ${string}`;
+        readonly opacity: "0";
+        readonly display: "none";
+        readonly transform: "translateX(-50%) translateY(4px)";
+        readonly transition: "opacity 0.15s, transform 0.15s, display 0.15s allow-discrete";
+        readonly _dataStateOpen: {
+          readonly opacity: "1";
+          readonly display: "block";
+          readonly transform: "translateX(-50%) translateY(0)";
+          readonly _startingStyle: {
+            readonly opacity: "0";
+            readonly transform: "translateX(-50%) translateY(4px)";
+          };
+        };
+      };
+      readonly text: {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+    };
+  };
+}, {}>;
+type TooltipConfig = typeof tooltipConfig; //#endregion
+//#endregion
+export { TooltipConfig, tooltipConfig };

package/dist/components/dist/tooltip.config.js

@@ -0,0 +1,40 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/tooltip.config.js
+const tooltipConfig = defaultFoundationPreset.defineComponent("Tooltip", ({ tokens }) => ({ base: {
+	trigger: {
+		position: "relative",
+		display: "inline-flex"
+	},
+	content: {
+		position: "absolute",
+		bottom: "100%",
+		left: "50%",
+		marginBottom: "6px",
+		pointerEvents: "none",
+		backgroundColor: tokens.bg.inverse,
+		borderRadius: tokens.borderRadius.md,
+		padding: `${tokens.spacing["1.5"]} ${tokens.spacing["3"]}`,
+		opacity: "0",
+		display: "none",
+		transform: "translateX(-50%) translateY(4px)",
+		transition: "opacity 0.15s, transform 0.15s, display 0.15s allow-discrete",
+		_dataStateOpen: {
+			opacity: "1",
+			display: "block",
+			transform: "translateX(-50%) translateY(0)",
+			_startingStyle: {
+				opacity: "0",
+				transform: "translateX(-50%) translateY(4px)"
+			}
+		}
+	},
+	text: {
+		...textVariants.label4,
+		color: tokens.color["on-inverse"],
+		whiteSpace: "nowrap"
+	}
+} }));
+//#endregion
+export { tooltipConfig };

package/dist/components/dist/tooltip.d.ts

@@ -0,0 +1,207 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/tooltip.d.ts
+//#region src/tooltip.d.ts
+/**
+ * @description A popup that displays additional information when hovering over an element
+ */
+declare const Tooltip: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Tooltip: {
+    readonly base: {
+      readonly trigger: {
+        readonly position: "relative";
+        readonly display: "inline-flex";
+      };
+      readonly content: {
+        readonly position: "absolute";
+        readonly bottom: "100%";
+        readonly left: "50%";
+        readonly marginBottom: "6px";
+        readonly pointerEvents: "none";
+        readonly backgroundColor: string;
+        readonly borderRadius: string;
+        readonly padding: `${string} ${string}`;
+        readonly opacity: "0";
+        readonly display: "none";
+        readonly transform: "translateX(-50%) translateY(4px)";
+        readonly transition: "opacity 0.15s, transform 0.15s, display 0.15s allow-discrete";
+        readonly _dataStateOpen: {
+          readonly opacity: "1";
+          readonly display: "block";
+          readonly transform: "translateX(-50%) translateY(0)";
+          readonly _startingStyle: {
+            readonly opacity: "0";
+            readonly transform: "translateX(-50%) translateY(4px)";
+          };
+        };
+      };
+      readonly text: {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly whiteSpace: "nowrap";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+    };
+  };
+}, {}>, {
+  label: string;
+  children?: React.ReactNode;
+}, {
+  trigger: "span";
+  content: "div";
+  text: "span";
+}>>;
+type TooltipProps = React.ComponentProps<typeof Tooltip>; //#endregion
+//#endregion
+export { Tooltip, TooltipProps };

package/dist/components/dist/tooltip.js

@@ -0,0 +1,28 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/tooltip.js
+/**
+* @description A popup that displays additional information when hovering over an element
+*/
+const Tooltip = createComponent(({ props, children, label }) => {
+	const [show, setShow] = useState(false);
+	const state = show ? "open" : "closed";
+	return /* @__PURE__ */ jsxs("span", {
+		onMouseEnter: () => setShow(true),
+		onMouseLeave: () => setShow(false),
+		...props.trigger,
+		children: [children, /* @__PURE__ */ jsx("div", {
+			"data-state": state,
+			...props.content,
+			children: /* @__PURE__ */ jsx("span", {
+				...props.text,
+				children: label
+			})
+		})]
+	});
+});
+//#endregion
+export { Tooltip };

package/dist/components/dist/vstack.d.ts

@@ -0,0 +1,16 @@
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+import { BoxAsTag, HtmlDivProps, StyleAndModifierProps } from "@uds/types";
+
+//#region ../components/dist/vstack.d.ts
+//#region src/vstack.d.ts
+interface VStackOwnProps extends HtmlDivProps, StyleAndModifierProps {
+  /** Render as a different semantic HTML element. Defaults to `div`. */
+  as?: BoxAsTag;
+}
+/**
+ * @description A primitive that arranges its children vertically
+ */
+declare const VStack: _$react.FC<_$_uds_types0.CreateComponentProps<string, VStackOwnProps, "div">>; //#endregion
+//#endregion
+export { VStack, VStackOwnProps };

package/dist/components/dist/vstack.js

@@ -0,0 +1,20 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { Box } from "./box.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../components/dist/vstack.js
+/**
+* @description A primitive that arranges its children vertically
+*/
+const VStack = createComponent(({ children, as, gap, gapY, display = "flex", flexDirection = display === "flex" ? "col" : void 0, ...rest }) => {
+	return /* @__PURE__ */ jsx(Box, {
+		as,
+		display,
+		flexDirection,
+		gapY: gapY ?? gap,
+		...rest,
+		children
+	});
+});
+//#endregion
+export { VStack };

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

@@ -0,0 +1,2 @@
+import { DropdownConfig, dropdownConfig } from "./dist/dropdown.config.js";
+export { DropdownConfig, dropdownConfig };

package/dist/components/dropdown.config.js

@@ -0,0 +1,2 @@
+import { dropdownConfig } from "./dist/dropdown.config.js";
+export { dropdownConfig };

package/dist/components/dropdown.d.ts

@@ -0,0 +1,2 @@
+import { Dropdown, DropdownEntry, DropdownItem, DropdownSeparator } from "./dist/dropdown.js";
+export { Dropdown, DropdownEntry, DropdownItem, DropdownSeparator };

package/dist/components/dropdown.js

@@ -0,0 +1,2 @@
+import { Dropdown } from "./dist/dropdown.js";
+export { Dropdown };

package/dist/components/empty-state.config.d.ts

@@ -0,0 +1,2 @@
+import { EmptyStateConfig, emptyStateConfig } from "./dist/empty-state.config.js";
+export { EmptyStateConfig, emptyStateConfig };

package/dist/components/empty-state.config.js

@@ -0,0 +1,2 @@
+import { emptyStateConfig } from "./dist/empty-state.config.js";
+export { emptyStateConfig };