@yahoo/uds-v5-wip 1.60.0 → 1.61.0

package/dist/components/dist/sidebar.js

@@ -1,492 +0,0 @@
-"use client";
-import { createComponentStyler } from "../../core/dist/getComponentStyles.js";
-import { createComponent } from "../../core/dist/createComponent.js";
-import { createProvider } from "../../core/dist/createProvider.js";
-import "../../core/dist/index.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region ../components/dist/sidebar.js
-const SIDEBAR_WIDTH = "16rem";
-const SIDEBAR_WIDTH_ICON = "3.5rem";
-const SIDEBAR_WIDTH_MOBILE = "18rem";
-const MOBILE_BREAKPOINT = 1024;
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
-const STORAGE_KEY = "sidebar:state";
-function useIsMobile() {
-	const [isMobile, setIsMobile] = useState(false);
-	useEffect(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-		const onChange = (e) => setIsMobile(e.matches);
-		setIsMobile(mql.matches);
-		mql.addEventListener("change", onChange);
-		return () => mql.removeEventListener("change", onChange);
-	}, []);
-	return isMobile;
-}
-const [SidebarProvider, useSidebar] = createProvider("Sidebar", ({ children, defaultOpen = true, open: controlledOpen, onOpenChange }) => {
-	const isMobile = useIsMobile();
-	const [internalOpen, setInternalOpen] = useState(() => {
-		if (typeof window !== "undefined") try {
-			const stored = localStorage.getItem(STORAGE_KEY);
-			if (stored !== null) return stored === "true";
-		} catch {}
-		return defaultOpen;
-	});
-	const [openMobile, setOpenMobile] = useState(false);
-	const open = controlledOpen ?? internalOpen;
-	const setOpen = useCallback((value) => {
-		if (onOpenChange) onOpenChange(value);
-		else setInternalOpen(value);
-		if (typeof window !== "undefined") localStorage.setItem(STORAGE_KEY, String(value));
-	}, [onOpenChange]);
-	const toggleSidebar = useCallback(() => {
-		if (isMobile) setOpenMobile((prev) => !prev);
-		else setOpen(!open);
-	}, [
-		isMobile,
-		open,
-		setOpen
-	]);
-	useEffect(() => {
-		const handleKeyDown = (e) => {
-			if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey) {
-				e.preventDefault();
-				toggleSidebar();
-			}
-			if (e.key === "Escape" && openMobile) {
-				e.preventDefault();
-				setOpenMobile(false);
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [toggleSidebar, openMobile]);
-	return {
-		context: useMemo(() => ({
-			state: open ? "expanded" : "collapsed",
-			open,
-			setOpen,
-			openMobile,
-			setOpenMobile,
-			isMobile,
-			toggleSidebar
-		}), [
-			open,
-			setOpen,
-			openMobile,
-			isMobile,
-			toggleSidebar
-		]),
-		render: jsx("div", {
-			style: {
-				"--sidebar-width": SIDEBAR_WIDTH,
-				"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-				"--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE,
-				display: "flex",
-				minHeight: "inherit",
-				height: "100%",
-				width: "100%",
-				overflow: "hidden"
-			},
-			"data-sidebar-provider": "",
-			children
-		})
-	};
-});
-function ChevronIcon({ open }) {
-	return jsx("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 16 16",
-		fill: "none",
-		"aria-hidden": "true",
-		style: {
-			transition: "transform 0.2s",
-			transform: open ? "rotate(180deg)" : "rotate(0deg)"
-		},
-		children: jsx("path", {
-			d: "M4 6L8 10L12 6",
-			stroke: "currentColor",
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})
-	});
-}
-function PanelLeftIcon() {
-	return jsxs("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: [jsx("rect", {
-			width: "18",
-			height: "18",
-			x: "3",
-			y: "3",
-			rx: "2"
-		}), jsx("path", { d: "M9 3v18" })]
-	});
-}
-const sidebarStyler = createComponentStyler("Sidebar", [
-	"root",
-	"overlay",
-	"header",
-	"content",
-	"footer",
-	"group",
-	"groupLabel",
-	"groupAction",
-	"menu",
-	"menuItem",
-	"menuButton",
-	"menuAction",
-	"menuBadge",
-	"menuSub",
-	"menuSubItem",
-	"menuSubButton",
-	"skeleton",
-	"rail",
-	"trigger"
-]);
-function SidebarTrigger({ className, children }) {
-	const { toggleSidebar, open } = useSidebar();
-	return jsxs("button", {
-		type: "button",
-		className: `${sidebarStyler().trigger} ${className ?? ""}`,
-		onClick: toggleSidebar,
-		"aria-label": "Toggle Sidebar",
-		"aria-expanded": open,
-		children: [children ?? jsx(PanelLeftIcon, {}), jsx("span", {
-			style: {
-				position: "absolute",
-				width: 1,
-				height: 1,
-				padding: 0,
-				margin: -1,
-				overflow: "hidden",
-				clip: "rect(0,0,0,0)",
-				whiteSpace: "nowrap",
-				borderWidth: 0
-			},
-			children: "Toggle Sidebar"
-		})]
-	});
-}
-function SidebarInset({ className, children }) {
-	return jsx("main", {
-		className,
-		style: {
-			flex: 1,
-			minWidth: 0,
-			overflow: "auto"
-		},
-		children
-	});
-}
-function SidebarHeader({ className, children }) {
-	return jsx("div", {
-		className: `${sidebarStyler().header} ${className ?? ""}`,
-		style: { overflow: "hidden" },
-		children
-	});
-}
-function SidebarContent({ className, children }) {
-	return jsx("div", {
-		className: `${sidebarStyler().content} ${className ?? ""}`,
-		style: {
-			flex: 1,
-			minHeight: 0,
-			overflow: "auto"
-		},
-		children
-	});
-}
-function SidebarFooter({ className, children }) {
-	return jsx("div", {
-		className: `${sidebarStyler().footer} ${className ?? ""}`,
-		style: { overflow: "hidden" },
-		children
-	});
-}
-function SidebarGroup({ className, children, label, action, collapsible = false, defaultOpen = true }) {
-	const classes = sidebarStyler();
-	const [groupOpen, setGroupOpen] = useState(defaultOpen);
-	if (!collapsible) return jsxs("div", {
-		className: `${classes.group} ${className ?? ""}`,
-		children: [label && jsxs("div", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "space-between",
-				whiteSpace: "nowrap"
-			},
-			children: [jsx("span", {
-				className: classes.groupLabel,
-				children: label
-			}), action]
-		}), children]
-	});
-	const state = groupOpen ? "open" : "closed";
-	return jsxs("div", {
-		className: `${classes.group} ${className ?? ""}`,
-		children: [
-			jsxs("button", {
-				type: "button",
-				style: {
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-					width: "100%",
-					background: "none",
-					border: "none",
-					padding: 0,
-					cursor: "pointer",
-					color: "inherit",
-					font: "inherit",
-					whiteSpace: "nowrap"
-				},
-				onClick: () => setGroupOpen(!groupOpen),
-				"aria-expanded": groupOpen,
-				children: [jsx("span", {
-					className: classes.groupLabel,
-					children: label
-				}), jsx(ChevronIcon, { open: groupOpen })]
-			}),
-			action,
-			jsx("div", {
-				"data-state": state,
-				style: {
-					display: "grid",
-					gridTemplateRows: groupOpen ? "1fr" : "0fr",
-					opacity: groupOpen ? 1 : 0,
-					overflow: "hidden",
-					transition: "grid-template-rows 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1)"
-				},
-				children: jsx("div", {
-					style: { overflow: "hidden" },
-					children
-				})
-			})
-		]
-	});
-}
-function SidebarGroupAction({ className, children, onClick, "aria-label": ariaLabel }) {
-	return jsx("button", {
-		type: "button",
-		className: `${sidebarStyler().groupAction} ${className ?? ""}`,
-		onClick: (e) => {
-			e.stopPropagation();
-			onClick?.();
-		},
-		"aria-label": ariaLabel,
-		children
-	});
-}
-function SidebarMenu({ className, children }) {
-	return jsx("ul", {
-		className: `${sidebarStyler().menu} ${className ?? ""}`,
-		children
-	});
-}
-function SidebarMenuItem({ className, children }) {
-	return jsx("li", {
-		className: `${sidebarStyler().menuItem} ${className ?? ""}`,
-		children
-	});
-}
-function SidebarMenuButton({ className, children, href, onClick, isActive }) {
-	const cn = `${sidebarStyler().menuButton} ${className ?? ""}`;
-	if (href) return jsx("a", {
-		href,
-		className: cn,
-		"aria-current": isActive ? "page" : void 0,
-		children
-	});
-	return jsx("button", {
-		type: "button",
-		className: cn,
-		onClick,
-		"aria-current": isActive ? "page" : void 0,
-		children
-	});
-}
-function SidebarMenuAction({ className, children, onClick, "aria-label": ariaLabel }) {
-	return jsx("button", {
-		type: "button",
-		className: `${sidebarStyler().menuAction} ${className ?? ""}`,
-		onClick,
-		"aria-label": ariaLabel,
-		children
-	});
-}
-function SidebarMenuBadge({ className, children }) {
-	return jsx("span", {
-		className: `${sidebarStyler().menuBadge} ${className ?? ""}`,
-		children
-	});
-}
-function SidebarMenuSub({ className, children }) {
-	return jsx("ul", {
-		className: `${sidebarStyler().menuSub} ${className ?? ""}`,
-		children
-	});
-}
-function SidebarMenuSubItem({ className, children }) {
-	return jsx("li", {
-		className: `${sidebarStyler().menuSubItem} ${className ?? ""}`,
-		children
-	});
-}
-function SidebarMenuSubButton({ className, children, href, onClick, isActive }) {
-	const cn = `${sidebarStyler().menuSubButton} ${className ?? ""}`;
-	if (href) return jsx("a", {
-		href,
-		className: cn,
-		"aria-current": isActive ? "page" : void 0,
-		children
-	});
-	return jsx("button", {
-		type: "button",
-		className: cn,
-		onClick,
-		"aria-current": isActive ? "page" : void 0,
-		children
-	});
-}
-function SidebarSkeleton({ count = 5 }) {
-	const classes = sidebarStyler();
-	return jsx("ul", {
-		className: classes.menu,
-		children: Array.from({ length: count }, (_, i) => jsx("li", {
-			className: classes.menuItem,
-			children: jsx("div", {
-				className: classes.skeleton,
-				style: {
-					height: "2rem",
-					borderRadius: "0.375rem",
-					animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-				}
-			})
-		}, i))
-	});
-}
-/**
-* @description A collapsible side navigation panel composed from sub-components
-*/
-const Sidebar = createComponent(({ props, children, collapsible = "offcanvas" }) => {
-	const classes = sidebarStyler();
-	const { open, openMobile, setOpenMobile, isMobile, state, toggleSidebar } = useSidebar();
-	const isCollapsed = !open && collapsible === "icon" && !isMobile;
-	const isHidden = !open && collapsible === "offcanvas";
-	const [canTransition, setCanTransition] = useState(false);
-	useEffect(() => {
-		setCanTransition(true);
-	}, []);
-	const sidebarWidth = isCollapsed ? "var(--sidebar-width-icon)" : isHidden ? "0px" : "var(--sidebar-width)";
-	if (isMobile) {
-		const mobileState = openMobile ? "open" : "closed";
-		return jsxs("div", {
-			style: {
-				position: "fixed",
-				inset: 0,
-				zIndex: 50,
-				display: openMobile ? "flex" : "none"
-			},
-			children: [jsx("button", {
-				type: "button",
-				className: classes.overlay,
-				"data-state": mobileState,
-				onClick: () => setOpenMobile(false),
-				"aria-label": "Close sidebar",
-				style: {
-					position: "absolute",
-					inset: 0
-				},
-				...props.overlay
-			}), jsx("aside", {
-				className: classes.root,
-				"data-state": mobileState,
-				style: {
-					position: "relative",
-					zIndex: 1,
-					width: "var(--sidebar-width-mobile)",
-					height: "100%",
-					display: "flex",
-					flexDirection: "column",
-					transform: openMobile ? "translateX(0)" : "translateX(-100%)",
-					transition: "transform 0.3s cubic-bezier(0.32, 0.72, 0, 1)"
-				},
-				"data-collapsible": collapsible,
-				"data-mobile": "true",
-				...props.root,
-				children
-			})]
-		});
-	}
-	if (collapsible === "none") return jsx("aside", {
-		className: classes.root,
-		style: {
-			width: "var(--sidebar-width)",
-			display: "flex",
-			flexDirection: "column",
-			flexShrink: 0,
-			height: "100%",
-			overflow: "hidden",
-			position: "relative"
-		},
-		"data-state": "expanded",
-		"data-collapsible": "none",
-		...props.root,
-		children
-	});
-	return jsx("div", {
-		style: {
-			flexShrink: 0,
-			overflow: "hidden",
-			height: "100%",
-			width: sidebarWidth,
-			transition: canTransition ? "width 200ms linear" : "none"
-		},
-		children: jsxs("aside", {
-			className: classes.root,
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				height: "100%",
-				overflow: "hidden",
-				position: "relative",
-				width: "var(--sidebar-width)"
-			},
-			"data-state": state,
-			"data-collapsible": collapsible,
-			...props.root,
-			children: [children, jsx("button", {
-				type: "button",
-				className: classes.rail,
-				onClick: toggleSidebar,
-				"aria-label": "Toggle Sidebar",
-				tabIndex: -1,
-				style: {
-					position: "absolute",
-					top: 0,
-					bottom: 0,
-					right: 0,
-					width: "4px",
-					cursor: "col-resize",
-					background: "transparent",
-					border: "none",
-					padding: 0
-				},
-				...props.rail
-			})]
-		})
-	});
-});
-//#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarSkeleton, SidebarTrigger, useSidebar };

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

@@ -1,16 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-//#region ../components/dist/skeleton.config.d.ts
-declare const skeletonConfig: ComponentConfig<{
-  Skeleton: {
-    readonly base: {
-      readonly block: {
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-        readonly animation: "pulse 1.5s ease-in-out infinite";
-      };
-    };
-  };
-}, {}>;
-type SkeletonConfig = typeof skeletonConfig;
-//#endregion
-export { SkeletonConfig, skeletonConfig };

package/dist/components/dist/skeleton.config.js

@@ -1,10 +0,0 @@
-import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
-import "../../foundational-presets/dist/index.js";
-//#region ../components/dist/skeleton.config.js
-const skeletonConfig = defaultFoundationPreset.defineComponent("Skeleton", ({ tokens }) => ({ base: { block: {
-	borderRadius: tokens.radius.md,
-	backgroundColor: tokens.bg.secondary,
-	animation: "pulse 1.5s ease-in-out infinite"
-} } }));
-//#endregion
-export { skeletonConfig };

package/dist/components/dist/skeleton.d.ts

@@ -1,27 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-import * as _$react from "react";
-import * as _$_uds_types0 from "@uds/types";
-
-//#region ../components/dist/skeleton.d.ts
-/**
- * @description A placeholder that indicates content is loading
- */
-declare const Skeleton: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
-  Skeleton: {
-    readonly base: {
-      readonly block: {
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-        readonly animation: "pulse 1.5s ease-in-out infinite";
-      };
-    };
-  };
-}, {}>, {
-  width?: string;
-  height?: string;
-}, {
-  block: "div";
-}>>;
-type SkeletonProps = React.ComponentProps<typeof Skeleton>;
-//#endregion
-export { Skeleton, SkeletonProps };

package/dist/components/dist/skeleton.js

@@ -1,16 +0,0 @@
-import { createComponent } from "../../core/dist/createComponent.js";
-import "../../core/dist/index.js";
-import { jsx } from "react/jsx-runtime";
-//#region ../components/dist/skeleton.js
-/**
-* @description A placeholder that indicates content is loading
-*/
-const Skeleton = createComponent(({ props, width, height }) => jsx("div", {
-	...props.block,
-	style: {
-		width,
-		height
-	}
-}));
-//#endregion
-export { Skeleton };

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

@@ -1,44 +0,0 @@
-import { ComponentConfig } from "../../config/dist/createConfig.js";
-//#region ../components/dist/slider.config.d.ts
-declare const sliderConfig: ComponentConfig<{
-  Slider: {
-    readonly base: {
-      readonly root: {
-        readonly width: "100%";
-        readonly padding: `${string} 0`;
-      };
-      readonly track: {
-        readonly height: "0.5rem";
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-        readonly overflow: "visible";
-        readonly width: "100%";
-      };
-      readonly range: {
-        readonly height: "100%";
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-      };
-      readonly thumb: {
-        readonly width: "1.25rem";
-        readonly height: "1.25rem";
-        readonly borderRadius: string;
-        readonly backgroundColor: string;
-        readonly borderWidth: string;
-        readonly borderColor: string;
-        readonly boxShadow: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)";
-        readonly cursor: "pointer";
-        readonly _hover: {
-          readonly borderColor: string;
-        };
-        readonly _focus: {
-          readonly borderColor: string;
-          readonly boxShadow: `0 0 0 3px ${string}`;
-        };
-      };
-    };
-  };
-}, {}>;
-type SliderConfig = typeof sliderConfig;
-//#endregion
-export { SliderConfig, sliderConfig };

package/dist/components/dist/slider.config.js

@@ -1,40 +0,0 @@
-import { darker } from "../../config/dist/createConfig.js";
-import "../../config/dist/index.js";
-import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
-import "../../foundational-presets/dist/index.js";
-//#region ../components/dist/slider.config.js
-const sliderConfig = defaultFoundationPreset.defineComponent("Slider", ({ tokens }) => ({ base: {
-	root: {
-		width: "100%",
-		padding: `${tokens.spacing["1"]} 0`
-	},
-	track: {
-		height: "0.5rem",
-		borderRadius: tokens.radius.full,
-		backgroundColor: tokens.bg.secondary,
-		overflow: "visible",
-		width: "100%"
-	},
-	range: {
-		height: "100%",
-		borderRadius: tokens.radius.full,
-		backgroundColor: tokens.bg.brand
-	},
-	thumb: {
-		width: "1.25rem",
-		height: "1.25rem",
-		borderRadius: tokens.radius.full,
-		backgroundColor: tokens.bg.primary,
-		borderWidth: tokens.borderWidth.medium,
-		borderColor: tokens.borderColor.brand,
-		boxShadow: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)",
-		cursor: "pointer",
-		_hover: { borderColor: darker(tokens.borderColor.brand, 10) },
-		_focus: {
-			borderColor: tokens.borderColor.brand,
-			boxShadow: `0 0 0 3px ${tokens.bg["brand-wash"]}`
-		}
-	}
-} }));
-//#endregion
-export { sliderConfig };