@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/sidebar.js

@@ -0,0 +1,496 @@
+"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: /* @__PURE__ */ 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 /* @__PURE__ */ 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: /* @__PURE__ */ jsx("path", {
+			d: "M4 6L8 10L12 6",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function PanelLeftIcon() {
+	return /* @__PURE__ */ 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: [/* @__PURE__ */ jsx("rect", {
+			width: "18",
+			height: "18",
+			x: "3",
+			y: "3",
+			rx: "2"
+		}), /* @__PURE__ */ 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 /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: `${sidebarStyler().trigger} ${className ?? ""}`,
+		onClick: toggleSidebar,
+		"aria-label": "Toggle Sidebar",
+		"aria-expanded": open,
+		children: [children ?? /* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ 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 /* @__PURE__ */ jsx("main", {
+		className,
+		style: {
+			flex: 1,
+			minWidth: 0,
+			overflow: "auto"
+		},
+		children
+	});
+}
+function SidebarHeader({ className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `${sidebarStyler().header} ${className ?? ""}`,
+		style: { overflow: "hidden" },
+		children
+	});
+}
+function SidebarContent({ className, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `${sidebarStyler().content} ${className ?? ""}`,
+		style: {
+			flex: 1,
+			minHeight: 0,
+			overflow: "auto"
+		},
+		children
+	});
+}
+function SidebarFooter({ className, children }) {
+	return /* @__PURE__ */ 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 /* @__PURE__ */ jsxs("div", {
+		className: `${classes.group} ${className ?? ""}`,
+		children: [label && /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				whiteSpace: "nowrap"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				className: classes.groupLabel,
+				children: label
+			}), action]
+		}), children]
+	});
+	const state = groupOpen ? "open" : "closed";
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${classes.group} ${className ?? ""}`,
+		children: [
+			/* @__PURE__ */ 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: [/* @__PURE__ */ jsx("span", {
+					className: classes.groupLabel,
+					children: label
+				}), /* @__PURE__ */ jsx(ChevronIcon, { open: groupOpen })]
+			}),
+			action,
+			/* @__PURE__ */ 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: /* @__PURE__ */ jsx("div", {
+					style: { overflow: "hidden" },
+					children
+				})
+			})
+		]
+	});
+}
+function SidebarGroupAction({ className, children, onClick, "aria-label": ariaLabel }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: `${sidebarStyler().groupAction} ${className ?? ""}`,
+		onClick: (e) => {
+			e.stopPropagation();
+			onClick?.();
+		},
+		"aria-label": ariaLabel,
+		children
+	});
+}
+function SidebarMenu({ className, children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: `${sidebarStyler().menu} ${className ?? ""}`,
+		children
+	});
+}
+function SidebarMenuItem({ className, children }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: `${sidebarStyler().menuItem} ${className ?? ""}`,
+		children
+	});
+}
+function SidebarMenuButton({ className, children, href, onClick, isActive }) {
+	const cn = `${sidebarStyler().menuButton} ${className ?? ""}`;
+	if (href) return /* @__PURE__ */ jsx("a", {
+		href,
+		className: cn,
+		"data-active": isActive || void 0,
+		"aria-current": isActive ? "page" : void 0,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn,
+		onClick,
+		"data-active": isActive || void 0,
+		"aria-current": isActive ? "page" : void 0,
+		children
+	});
+}
+function SidebarMenuAction({ className, children, onClick, "aria-label": ariaLabel }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: `${sidebarStyler().menuAction} ${className ?? ""}`,
+		onClick,
+		"aria-label": ariaLabel,
+		children
+	});
+}
+function SidebarMenuBadge({ className, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: `${sidebarStyler().menuBadge} ${className ?? ""}`,
+		children
+	});
+}
+function SidebarMenuSub({ className, children }) {
+	return /* @__PURE__ */ jsx("ul", {
+		className: `${sidebarStyler().menuSub} ${className ?? ""}`,
+		children
+	});
+}
+function SidebarMenuSubItem({ className, children }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: `${sidebarStyler().menuSubItem} ${className ?? ""}`,
+		children
+	});
+}
+function SidebarMenuSubButton({ className, children, href, onClick, isActive }) {
+	const cn = `${sidebarStyler().menuSubButton} ${className ?? ""}`;
+	if (href) return /* @__PURE__ */ jsx("a", {
+		href,
+		className: cn,
+		"data-active": isActive || void 0,
+		"aria-current": isActive ? "page" : void 0,
+		children
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn,
+		onClick,
+		"data-active": isActive || void 0,
+		"aria-current": isActive ? "page" : void 0,
+		children
+	});
+}
+function SidebarSkeleton({ count = 5 }) {
+	const classes = sidebarStyler();
+	return /* @__PURE__ */ jsx("ul", {
+		className: classes.menu,
+		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("li", {
+			className: classes.menuItem,
+			children: /* @__PURE__ */ 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 /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "fixed",
+				inset: 0,
+				zIndex: 50,
+				display: openMobile ? "flex" : "none"
+			},
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: classes.overlay,
+				"data-state": mobileState,
+				onClick: () => setOpenMobile(false),
+				"aria-label": "Close sidebar",
+				style: {
+					position: "absolute",
+					inset: 0
+				},
+				...props.overlay
+			}), /* @__PURE__ */ 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 /* @__PURE__ */ 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 /* @__PURE__ */ jsx("div", {
+		style: {
+			flexShrink: 0,
+			overflow: "hidden",
+			height: "100%",
+			width: sidebarWidth,
+			transition: canTransition ? "width 200ms linear" : "none"
+		},
+		children: /* @__PURE__ */ 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, /* @__PURE__ */ 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

@@ -0,0 +1,17 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/skeleton.config.d.ts
+//#region src/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
+//#endregion
+export { SkeletonConfig, skeletonConfig };

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

@@ -0,0 +1,10 @@
+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.borderRadius.md,
+	backgroundColor: tokens.bg.secondary,
+	animation: "pulse 1.5s ease-in-out infinite"
+} } }));
+//#endregion
+export { skeletonConfig };

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

@@ -0,0 +1,28 @@
+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
+//#region src/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
+//#endregion
+export { Skeleton, SkeletonProps };

package/dist/components/dist/skeleton.js

@@ -0,0 +1,16 @@
+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 }) => /* @__PURE__ */ jsx("div", {
+	...props.block,
+	style: {
+		width,
+		height
+	}
+}));
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,45 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/slider.config.d.ts
+//#region src/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
+//#endregion
+export { SliderConfig, sliderConfig };

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

@@ -0,0 +1,40 @@
+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.borderRadius.full,
+		backgroundColor: tokens.bg.secondary,
+		overflow: "visible",
+		width: "100%"
+	},
+	range: {
+		height: "100%",
+		borderRadius: tokens.borderRadius.full,
+		backgroundColor: tokens.bg.brand
+	},
+	thumb: {
+		width: "1.25rem",
+		height: "1.25rem",
+		borderRadius: tokens.borderRadius.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 };