@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/modal.d.ts

@@ -0,0 +1,434 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import { ReactNode } from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/modal.d.ts
+//#region src/modal.d.ts
+/**
+ * @description A modal overlay that requires user interaction before returning to the main content. Controlled via open prop bound to state; use on.openChange with setState (value: false) to close, and a Button on.press with setState (value: true) to open. Must be placed in a parent element's children array to render.
+ */
+declare const Modal: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Modal: {
+    readonly base: {
+      readonly overlay: {
+        readonly position: "fixed";
+        readonly inset: "0";
+        readonly zIndex: "50";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly backgroundColor: "rgba(0,0,0,0.5)";
+        readonly motion: {
+          readonly initial: {
+            readonly opacity: 0;
+          };
+          readonly animate: {
+            readonly opacity: 1;
+          };
+          readonly exit: {
+            readonly opacity: 0;
+          };
+          readonly transition: {
+            readonly duration: 0.15;
+          };
+        };
+      };
+      readonly trigger: {
+        readonly display: "inline-block";
+        readonly cursor: "pointer";
+      };
+      readonly dismiss: {
+        readonly position: "absolute";
+        readonly inset: "0";
+        readonly background: "none";
+        readonly border: "none";
+        readonly padding: "0";
+        readonly cursor: "default";
+      };
+      readonly panel: {
+        readonly position: "relative";
+        readonly zIndex: "1";
+        readonly backgroundColor: string;
+        readonly borderRadius: string;
+        readonly padding: string;
+        readonly minWidth: "24rem";
+        readonly maxWidth: "32rem";
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly motion: {
+          readonly initial: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+            readonly y: 10;
+          };
+          readonly animate: {
+            readonly opacity: 1;
+            readonly scale: 1;
+            readonly y: 0;
+          };
+          readonly exit: {
+            readonly opacity: 0;
+            readonly scale: 0.95;
+            readonly y: 10;
+          };
+          readonly transition: {
+            readonly duration: 0.2;
+            readonly ease: [0.16, 1, 0.3, 1];
+          };
+        };
+      };
+      readonly title: {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly fontSize: "1.125rem";
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly description: {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly maxInlineSize: "65ch";
+        readonly textWrap: "pretty";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly actions: {
+        readonly display: "flex";
+        readonly justifyContent: "flex-end";
+        readonly gap: string;
+        readonly paddingTop: string;
+      };
+    };
+  };
+}, {}>, {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  trigger?: ReactNode;
+  children?: ReactNode;
+}, {
+  trigger: "div";
+  overlay: "div";
+  dismiss: "button";
+  panel: "div";
+  title: "div";
+  description: "div";
+  actions: "div";
+}>>;
+interface ImperativeModalOptions {
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  onClose?: () => void;
+}
+interface ModalContextValue {
+  open: (content?: ReactNode, options?: ImperativeModalOptions) => string;
+  close: (id?: string) => void;
+  closeAll: () => void;
+}
+declare const ModalProvider: _$react.FC<{
+    children: React.ReactNode;
+  } & Record<never, never>>, useModal: () => ModalContextValue; //#endregion
+//#endregion
+export { Modal, ModalContextValue, ModalProvider, useModal };

package/dist/components/dist/modal.js

@@ -0,0 +1,125 @@
+"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/modal.js
+let modalIdCounter = 0;
+/**
+* @description A modal overlay that requires user interaction before returning to the main content. Controlled via open prop bound to state; use on.openChange with setState (value: false) to close, and a Button on.press with setState (value: true) to open. Must be placed in a parent element's children array to render.
+*/
+const Modal = createComponent(({ props, children, open: controlledOpen, onOpenChange, title, description, actions, trigger }) => {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const open = controlledOpen ?? internalOpen;
+	const setOpen = onOpenChange ?? setInternalOpen;
+	const panelRef = useRef(null);
+	const setOpenRef = useRef(setOpen);
+	setOpenRef.current = setOpen;
+	useEffect(() => {
+		if (!open) return;
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") setOpenRef.current(false);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		document.body.style.overflow = "hidden";
+		panelRef.current?.focus();
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.body.style.overflow = "";
+		};
+	}, [open]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [trigger && /* @__PURE__ */ jsx("div", {
+		role: "button",
+		tabIndex: 0,
+		onClick: () => setOpen(true),
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") setOpen(true);
+		},
+		...props.trigger,
+		children: trigger
+	}), open && /* @__PURE__ */ jsxs("div", {
+		...props.overlay,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Close modal",
+			tabIndex: -1,
+			onClick: () => setOpen(false),
+			...props.dismiss
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: panelRef,
+			role: "dialog",
+			"aria-modal": "true",
+			tabIndex: -1,
+			...props.panel,
+			children: [
+				title ? /* @__PURE__ */ jsx("div", {
+					...props.title,
+					children: title
+				}) : null,
+				description ? /* @__PURE__ */ jsx("div", {
+					...props.description,
+					children: description
+				}) : null,
+				children ?? null,
+				actions ? /* @__PURE__ */ jsx("div", {
+					...props.actions,
+					children: actions
+				}) : null
+			]
+		})]
+	})] });
+});
+const [ModalProvider, useModal] = createProvider("Modal", ({ children }) => {
+	const [modals, setModals] = useState([]);
+	const onCloseCallbacks = useRef(/* @__PURE__ */ new Map());
+	const close = useCallback((id) => {
+		setModals((prev) => {
+			if (!id) {
+				const last = prev[prev.length - 1];
+				if (last) {
+					onCloseCallbacks.current.get(last.id)?.();
+					onCloseCallbacks.current.delete(last.id);
+					return prev.slice(0, -1);
+				}
+				return prev;
+			}
+			onCloseCallbacks.current.get(id)?.();
+			onCloseCallbacks.current.delete(id);
+			return prev.filter((m) => m.id !== id);
+		});
+	}, []);
+	const closeAll = useCallback(() => {
+		for (const cb of onCloseCallbacks.current.values()) cb();
+		onCloseCallbacks.current.clear();
+		setModals([]);
+	}, []);
+	return {
+		context: {
+			open: useCallback((content, options) => {
+				const id = `modal-${++modalIdCounter}`;
+				if (options?.onClose) onCloseCallbacks.current.set(id, options.onClose);
+				setModals((prev) => [...prev, {
+					id,
+					content,
+					...options
+				}]);
+				return id;
+			}, []),
+			close,
+			closeAll
+		},
+		render: /* @__PURE__ */ jsxs(Fragment, { children: [children, modals.map(({ id, content, title, description, actions }) => /* @__PURE__ */ jsx(Modal, {
+			open: true,
+			onOpenChange: (isOpen) => {
+				if (!isOpen) close(id);
+			},
+			title,
+			description,
+			actions,
+			children: content
+		}, id))] })
+	};
+});
+//#endregion
+export { Modal, ModalProvider, useModal };