@yahoo/uds-v5-wip 1.60.0 → 1.61.0

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

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

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

@@ -1,99 +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/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.radius.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

@@ -1,267 +0,0 @@
-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
-/**
- * @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
-export { Sheet, SheetProps };

package/dist/components/dist/sheet.js

@@ -1,53 +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/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 jsxs("div", {
-		"data-state": state,
-		...props.root,
-		children: [jsx("button", {
-			type: "button",
-			"data-state": state,
-			onClick: () => setOpen(false),
-			"aria-label": "Close sheet",
-			...props.overlay
-		}), jsxs("div", {
-			"data-state": state,
-			...props.panel,
-			children: [
-				jsxs("div", {
-					...props.header,
-					children: [title && jsx("div", {
-						...props.title,
-						children: title
-					}), jsx("button", {
-						type: "button",
-						onClick: () => setOpen(false),
-						...props.close,
-						children: "✕"
-					})]
-				}),
-				jsx("div", {
-					...props.content,
-					children
-				}),
-				footer && jsx("div", {
-					...props.footer,
-					children: footer
-				})
-			]
-		})]
-	});
-});
-//#endregion
-export { Sheet };