@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/tabs.d.ts

@@ -0,0 +1,633 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/tabs.d.ts
+//#region src/tabs.d.ts
+interface TabItem {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+}
+/**
+ * @description A set of content panels that are displayed one at a time via tab navigation
+ */
+declare const Tabs: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Tabs: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly gap: string;
+      };
+      readonly tabList: {
+        readonly display: "flex";
+        readonly gap: string;
+        readonly backgroundColor: string;
+        readonly padding: string;
+        readonly borderRadius: string;
+      };
+      readonly tab: {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly activeTab: {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly position: "relative";
+        readonly flex: "1";
+        readonly textAlign: "center";
+        readonly padding: string;
+        readonly borderRadius: string;
+        readonly color: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly indicator: {
+        readonly backgroundColor: string;
+        readonly borderRadius: string;
+        readonly boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        readonly transition: "left 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1)";
+      };
+      readonly content: {
+        readonly padding: string;
+        readonly backgroundColor: string;
+        readonly borderRadius: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+        readonly minHeight: "4rem";
+      };
+    };
+  };
+}, {}>, {
+  tabs: TabItem[];
+  defaultTab?: string;
+}, {
+  root: "div";
+  tabList: "div";
+  tab: "button";
+  activeTab: "button";
+  indicator: "div";
+  content: "div";
+}>>;
+type TabsProps = React.ComponentProps<typeof Tabs>; //#endregion
+//#endregion
+export { TabItem, Tabs, TabsProps };

package/dist/components/dist/tabs.js

@@ -0,0 +1,77 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/tabs.js
+/**
+* @description A set of content panels that are displayed one at a time via tab navigation
+*/
+const Tabs = createComponent(({ props, tabs, defaultTab }) => {
+	const [active, setActive] = useState(defaultTab ?? tabs[0]?.id ?? "");
+	const tabListRef = useRef(null);
+	const [indicatorStyle, setIndicatorStyle] = useState(null);
+	useEffect(() => {
+		const tabList = tabListRef.current;
+		if (!tabList) return;
+		const activeButton = tabList.querySelector(`[data-tab-id="${active}"]`);
+		if (!activeButton) return;
+		requestAnimationFrame(() => {
+			const listRect = tabList.getBoundingClientRect();
+			const buttonRect = activeButton.getBoundingClientRect();
+			setIndicatorStyle({
+				left: buttonRect.left - listRect.left,
+				width: buttonRect.width
+			});
+		});
+	}, [active]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: tabListRef,
+			style: { position: "relative" },
+			...props.tabList,
+			children: [indicatorStyle && /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					top: 0,
+					bottom: 0,
+					left: indicatorStyle.left,
+					width: indicatorStyle.width,
+					borderRadius: "inherit",
+					pointerEvents: "none"
+				},
+				...props.indicator
+			}), tabs.map((tab) => active === tab.id ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-tab-id": tab.id,
+				onClick: () => setActive(tab.id),
+				...props.activeTab,
+				children: /* @__PURE__ */ jsx("span", {
+					style: {
+						position: "relative",
+						zIndex: 1
+					},
+					children: tab.label
+				})
+			}, tab.id) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-tab-id": tab.id,
+				onClick: () => setActive(tab.id),
+				...props.tab,
+				children: /* @__PURE__ */ jsx("span", {
+					style: {
+						position: "relative",
+						zIndex: 1
+					},
+					children: tab.label
+				})
+			}, tab.id))]
+		}), /* @__PURE__ */ jsx("div", {
+			...props.content,
+			children: tabs.find((t) => t.id === active)?.content
+		})]
+	});
+});
+//#endregion
+export { Tabs };