@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/dropdown.js

@@ -0,0 +1,92 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/dropdown.js
+/**
+* @description A menu that appears on trigger interaction, presenting a list of actions
+*/
+const Dropdown = createComponent(({ props, children, trigger, items = [], align = "left" }) => {
+	const [open, setOpen] = useState(false);
+	const ref = useRef(null);
+	const state = open ? "open" : "closed";
+	const menuStyle = align === "right" ? {
+		left: "auto",
+		right: 0
+	} : void 0;
+	useEffect(() => {
+		function handleClick(e) {
+			if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+		}
+		document.addEventListener("mousedown", handleClick);
+		return () => document.removeEventListener("mousedown", handleClick);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...props.trigger,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "button",
+			tabIndex: 0,
+			onClick: () => setOpen(!open),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") setOpen(!open);
+			},
+			style: {
+				display: "inline-block",
+				cursor: "pointer",
+				userSelect: "none",
+				WebkitUserSelect: "none"
+			},
+			children: trigger
+		}), open && /* @__PURE__ */ jsx("div", {
+			"data-state": state,
+			...props.menu,
+			style: menuStyle,
+			children: [...items.map((entry, i) => {
+				if ("type" in entry && entry.type === "separator") return /* @__PURE__ */ jsx("div", { ...props.separator }, `sep-${i}`);
+				const item = entry;
+				const handleClick = () => {
+					item.onClick?.();
+					setOpen(false);
+				};
+				const handleKeyDown = (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						item.onClick?.();
+						setOpen(false);
+					}
+				};
+				if (item.destructive) return /* @__PURE__ */ jsxs("div", {
+					...props.destructiveItem,
+					role: "menuitem",
+					tabIndex: 0,
+					onClick: handleClick,
+					onKeyDown: handleKeyDown,
+					children: [/* @__PURE__ */ jsx("span", {
+						...props.itemText,
+						children: item.label
+					}), item.shortcut && /* @__PURE__ */ jsx("span", {
+						...props.shortcut,
+						children: item.shortcut
+					})]
+				}, item.label);
+				return /* @__PURE__ */ jsxs("div", {
+					...props.item,
+					role: "menuitem",
+					tabIndex: 0,
+					onClick: handleClick,
+					onKeyDown: handleKeyDown,
+					children: [/* @__PURE__ */ jsx("span", {
+						...props.itemText,
+						children: item.label
+					}), item.shortcut && /* @__PURE__ */ jsx("span", {
+						...props.shortcut,
+						children: item.shortcut
+					})]
+				}, item.label);
+			}), children]
+		})]
+	});
+});
+//#endregion
+export { Dropdown };

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

@@ -0,0 +1,397 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/empty-state.config.d.ts
+//#region src/empty-state.config.d.ts
+declare const emptyStateConfig: ComponentConfig<{
+  EmptyState: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly gap: string;
+        readonly padding: string;
+        readonly flex: "1";
+      };
+      readonly icon: {
+        readonly width: "36px";
+        readonly height: "36px";
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly color: string;
+        readonly flexShrink: "0";
+      };
+      readonly content: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly alignItems: "center";
+        readonly gap: string;
+      };
+      readonly title: {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontWeight: string;
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly description: {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly textAlign: "center";
+        readonly fontSize: "12px";
+        readonly maxInlineSize: "40ch";
+        readonly textWrap: "pretty";
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly actions: {
+        readonly display: "flex";
+        readonly gap: string;
+        readonly paddingTop: string;
+      };
+    };
+  };
+}, {}>;
+type EmptyStateConfig = typeof emptyStateConfig; //#endregion
+//#endregion
+export { EmptyStateConfig, emptyStateConfig };

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

@@ -0,0 +1,53 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/empty-state.config.js
+const emptyStateConfig = defaultFoundationPreset.defineComponent("EmptyState", ({ tokens }) => ({ base: {
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: tokens.spacing["3"],
+		padding: tokens.spacing["6"],
+		flex: "1"
+	},
+	icon: {
+		width: "36px",
+		height: "36px",
+		borderRadius: tokens.borderRadius.full,
+		backgroundColor: tokens.bg.tertiary,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		color: tokens.color["on-secondary"],
+		flexShrink: "0"
+	},
+	content: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		gap: tokens.spacing["1"]
+	},
+	title: {
+		...textVariants.caption,
+		fontWeight: tokens.fontWeight.bold,
+		color: tokens.color["on-primary"],
+		textAlign: "center"
+	},
+	description: {
+		...textVariants.caption,
+		color: tokens.color["on-secondary"],
+		textAlign: "center",
+		fontSize: "12px",
+		maxInlineSize: "40ch",
+		textWrap: "pretty"
+	},
+	actions: {
+		display: "flex",
+		gap: tokens.spacing["2"],
+		paddingTop: tokens.spacing["1"]
+	}
+} }));
+//#endregion
+export { emptyStateConfig };