@yahoo/uds-v5-wip 0.0.1

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

@@ -0,0 +1,246 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/sheet.config.d.ts
+//#region src/sheet.config.d.ts
+declare const sheetConfig: ComponentConfig<{
+  Sheet: {
+    readonly base: {
+      readonly root: {
+        readonly position: "fixed";
+        readonly inset: "0";
+        readonly zIndex: "50";
+        readonly display: "flex";
+        readonly justifyContent: "flex-end";
+        readonly pointerEvents: "none";
+        readonly _dataStateOpen: {
+          readonly pointerEvents: "auto";
+        };
+      };
+      readonly overlay: {
+        readonly position: "absolute";
+        readonly inset: "0";
+        readonly backgroundColor: "rgba(0,0,0,0.5)";
+        readonly opacity: "0";
+        readonly display: "none";
+        readonly transition: "opacity 0.2s, display 0.2s allow-discrete";
+        readonly _dataStateOpen: {
+          readonly opacity: "1";
+          readonly display: "block";
+          readonly _startingStyle: {
+            readonly opacity: "0";
+          };
+        };
+      };
+      readonly panel: {
+        readonly position: "relative";
+        readonly zIndex: "1";
+        readonly backgroundColor: string;
+        readonly height: "100%";
+        readonly width: "20rem";
+        readonly display: "none";
+        readonly flexDirection: "column";
+        readonly borderLeftWidth: string;
+        readonly borderColor: string;
+        readonly transform: "translateX(100%)";
+        readonly transition: "transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), display 0.3s allow-discrete";
+        readonly _dataStateOpen: {
+          readonly transform: "translateX(0)";
+          readonly display: "flex";
+          readonly _startingStyle: {
+            readonly transform: "translateX(100%)";
+          };
+        };
+      };
+      readonly header: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly padding: `${string} ${string}`;
+        readonly borderBottomWidth: string;
+        readonly borderColor: string;
+      };
+      readonly title: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly close: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "2rem";
+        readonly height: "2rem";
+        readonly borderRadius: string;
+        readonly cursor: "pointer";
+        readonly color: string;
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly content: {
+        readonly flex: "1";
+        readonly padding: string;
+        readonly overflow: "auto";
+      };
+      readonly footer: {
+        readonly padding: `${string} ${string}`;
+        readonly borderTopWidth: string;
+        readonly borderColor: string;
+      };
+    };
+    readonly variants: {
+      readonly side: {
+        readonly left: {
+          readonly root: {
+            readonly justifyContent: "flex-start";
+          };
+          readonly panel: {
+            readonly borderLeftWidth: "0";
+            readonly borderRightWidth: string;
+            readonly borderColor: string;
+            readonly transform: "translateX(-100%)";
+            readonly _dataStateOpen: {
+              readonly transform: "translateX(0)";
+              readonly _startingStyle: {
+                readonly transform: "translateX(-100%)";
+              };
+            };
+          };
+        };
+        readonly right: {
+          readonly panel: {};
+        };
+      };
+    };
+  };
+}, {}>;
+type SheetConfig = typeof sheetConfig; //#endregion
+//#endregion
+export { SheetConfig, sheetConfig };

package/dist/components/dist/sheet.config.js

@@ -0,0 +1,99 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/sheet.config.js
+const sheetConfig = defaultFoundationPreset.defineComponent("Sheet", ({ tokens }) => ({
+	base: {
+		root: {
+			position: "fixed",
+			inset: "0",
+			zIndex: "50",
+			display: "flex",
+			justifyContent: "flex-end",
+			pointerEvents: "none",
+			_dataStateOpen: { pointerEvents: "auto" }
+		},
+		overlay: {
+			position: "absolute",
+			inset: "0",
+			backgroundColor: "rgba(0,0,0,0.5)",
+			opacity: "0",
+			display: "none",
+			transition: "opacity 0.2s, display 0.2s allow-discrete",
+			_dataStateOpen: {
+				opacity: "1",
+				display: "block",
+				_startingStyle: { opacity: "0" }
+			}
+		},
+		panel: {
+			position: "relative",
+			zIndex: "1",
+			backgroundColor: tokens.bg["elevation-2"],
+			height: "100%",
+			width: "20rem",
+			display: "none",
+			flexDirection: "column",
+			borderLeftWidth: tokens.borderWidth.thin,
+			borderColor: tokens.borderColor.secondary,
+			transform: "translateX(100%)",
+			transition: "transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), display 0.3s allow-discrete",
+			_dataStateOpen: {
+				transform: "translateX(0)",
+				display: "flex",
+				_startingStyle: { transform: "translateX(100%)" }
+			}
+		},
+		header: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			padding: `${tokens.spacing["4"]} ${tokens.spacing["5"]}`,
+			borderBottomWidth: tokens.borderWidth.thin,
+			borderColor: tokens.borderColor.secondary
+		},
+		title: {
+			...textVariants.headline,
+			color: tokens.color["on-primary"]
+		},
+		close: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "2rem",
+			height: "2rem",
+			borderRadius: tokens.borderRadius.sm,
+			cursor: "pointer",
+			color: tokens.color["on-secondary"],
+			_hover: { backgroundColor: tokens.bg.tertiary }
+		},
+		content: {
+			flex: "1",
+			padding: tokens.spacing["5"],
+			overflow: "auto"
+		},
+		footer: {
+			padding: `${tokens.spacing["4"]} ${tokens.spacing["5"]}`,
+			borderTopWidth: tokens.borderWidth.thin,
+			borderColor: tokens.borderColor.secondary
+		}
+	},
+	variants: { side: {
+		left: {
+			root: { justifyContent: "flex-start" },
+			panel: {
+				borderLeftWidth: "0",
+				borderRightWidth: tokens.borderWidth.thin,
+				borderColor: tokens.borderColor.secondary,
+				transform: "translateX(-100%)",
+				_dataStateOpen: {
+					transform: "translateX(0)",
+					_startingStyle: { transform: "translateX(-100%)" }
+				}
+			}
+		},
+		right: { panel: {} }
+	} }
+}));
+//#endregion
+export { sheetConfig };

package/dist/components/dist/sheet.d.ts

@@ -0,0 +1,268 @@
+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/sheet.d.ts
+//#region src/sheet.d.ts
+/**
+ * @description A panel that slides in from the edge of the screen
+ */
+declare const Sheet: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Sheet: {
+    readonly base: {
+      readonly root: {
+        readonly position: "fixed";
+        readonly inset: "0";
+        readonly zIndex: "50";
+        readonly display: "flex";
+        readonly justifyContent: "flex-end";
+        readonly pointerEvents: "none";
+        readonly _dataStateOpen: {
+          readonly pointerEvents: "auto";
+        };
+      };
+      readonly overlay: {
+        readonly position: "absolute";
+        readonly inset: "0";
+        readonly backgroundColor: "rgba(0,0,0,0.5)";
+        readonly opacity: "0";
+        readonly display: "none";
+        readonly transition: "opacity 0.2s, display 0.2s allow-discrete";
+        readonly _dataStateOpen: {
+          readonly opacity: "1";
+          readonly display: "block";
+          readonly _startingStyle: {
+            readonly opacity: "0";
+          };
+        };
+      };
+      readonly panel: {
+        readonly position: "relative";
+        readonly zIndex: "1";
+        readonly backgroundColor: string;
+        readonly height: "100%";
+        readonly width: "20rem";
+        readonly display: "none";
+        readonly flexDirection: "column";
+        readonly borderLeftWidth: string;
+        readonly borderColor: string;
+        readonly transform: "translateX(100%)";
+        readonly transition: "transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), display 0.3s allow-discrete";
+        readonly _dataStateOpen: {
+          readonly transform: "translateX(0)";
+          readonly display: "flex";
+          readonly _startingStyle: {
+            readonly transform: "translateX(100%)";
+          };
+        };
+      };
+      readonly header: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
+        readonly padding: `${string} ${string}`;
+        readonly borderBottomWidth: string;
+        readonly borderColor: string;
+      };
+      readonly title: {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly close: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "2rem";
+        readonly height: "2rem";
+        readonly borderRadius: string;
+        readonly cursor: "pointer";
+        readonly color: string;
+        readonly _hover: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly content: {
+        readonly flex: "1";
+        readonly padding: string;
+        readonly overflow: "auto";
+      };
+      readonly footer: {
+        readonly padding: `${string} ${string}`;
+        readonly borderTopWidth: string;
+        readonly borderColor: string;
+      };
+    };
+    readonly variants: {
+      readonly side: {
+        readonly left: {
+          readonly root: {
+            readonly justifyContent: "flex-start";
+          };
+          readonly panel: {
+            readonly borderLeftWidth: "0";
+            readonly borderRightWidth: string;
+            readonly borderColor: string;
+            readonly transform: "translateX(-100%)";
+            readonly _dataStateOpen: {
+              readonly transform: "translateX(0)";
+              readonly _startingStyle: {
+                readonly transform: "translateX(-100%)";
+              };
+            };
+          };
+        };
+        readonly right: {
+          readonly panel: {};
+        };
+      };
+    };
+  };
+}, {}>, {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+}, {
+  root: "div";
+  overlay: "button";
+  panel: "div";
+  header: "div";
+  title: "div";
+  close: "button";
+  content: "div";
+  footer: "div";
+}>>;
+type SheetProps = React.ComponentProps<typeof Sheet>; //#endregion
+//#endregion
+export { Sheet, SheetProps };

package/dist/components/dist/sheet.js

@@ -0,0 +1,53 @@
+"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/sheet.js
+/**
+* @description A panel that slides in from the edge of the screen
+*/
+const Sheet = createComponent(({ props, children, open: controlledOpen, onOpenChange, title, footer }) => {
+	const [internalOpen, setInternalOpen] = useState(false);
+	const open = controlledOpen ?? internalOpen;
+	const setOpen = onOpenChange ?? setInternalOpen;
+	const state = open ? "open" : "closed";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-state": state,
+		...props.root,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-state": state,
+			onClick: () => setOpen(false),
+			"aria-label": "Close sheet",
+			...props.overlay
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-state": state,
+			...props.panel,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					...props.header,
+					children: [title && /* @__PURE__ */ jsx("div", {
+						...props.title,
+						children: title
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setOpen(false),
+						...props.close,
+						children: "✕"
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					...props.content,
+					children
+				}),
+				footer && /* @__PURE__ */ jsx("div", {
+					...props.footer,
+					children: footer
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { Sheet };