@yahoo/uds-v5-wip 1.60.0 → 1.61.0

package/dist/components/dist/toast.js

@@ -1,159 +0,0 @@
-"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 jsx("div", {
-		ref: (el) => onMeasure?.(toastId, el),
-		style: {
-			position: index === 0 ? "relative" : "absolute",
-			bottom: 0,
-			right: 0,
-			zIndex: toastId
-		},
-		children: jsxs("div", {
-			...props.item,
-			"data-state": expanded ? "expanded" : "collapsed",
-			"data-motion-index": index,
-			onDragEnd: handleDragEnd,
-			children: [renderMessage ? renderMessage(({ children: c }) => jsx("span", {
-				...props.text,
-				children: c
-			})) : jsx("span", {
-				...props.text,
-				children
-			}), 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: jsxs(Fragment, { children: [children, 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) => 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

@@ -1,193 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-//#region ../components/dist/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
-export { TooltipConfig, tooltipConfig };

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

@@ -1,40 +0,0 @@
-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.radius.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

@@ -1,206 +0,0 @@
-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
-/**
- * @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
-export { Tooltip, TooltipProps };

package/dist/components/dist/tooltip.js

@@ -1,28 +0,0 @@
-"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 jsxs("span", {
-		onMouseEnter: () => setShow(true),
-		onMouseLeave: () => setShow(false),
-		...props.trigger,
-		children: [children, jsx("div", {
-			"data-state": state,
-			...props.content,
-			children: jsx("span", {
-				...props.text,
-				children: label
-			})
-		})]
-	});
-});
-//#endregion
-export { Tooltip };

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

@@ -1,15 +0,0 @@
-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
-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
-export { VStack, VStackOwnProps };

package/dist/components/dist/vstack.js

@@ -1,20 +0,0 @@
-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 jsx(Box, {
-		as,
-		display,
-		flexDirection,
-		gapY: gapY ?? gap,
-		...rest,
-		children
-	});
-});
-//#endregion
-export { VStack };

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

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

package/dist/components/dropdown.config.js

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

package/dist/components/dropdown.d.ts

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

package/dist/components/dropdown.js

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

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

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

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

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

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

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