@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/breadcrumb.d.ts

@@ -0,0 +1,421 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import { ReactNode } from "react";
+import * as _$_uds_types0 from "@uds/types";
+import { HtmlAnchorProps } from "@uds/types";
+
+//#region ../components/dist/breadcrumb.d.ts
+//#region src/breadcrumb.d.ts
+interface BreadcrumbItem {
+  /** Text or node to display */
+  label: ReactNode;
+  /** If present, renders as a link; if absent, renders as current page */
+  href?: string;
+}
+/**
+ * @description A navigation aid that shows the user's location within a site hierarchy
+ */
+declare const Breadcrumb: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Breadcrumb: {
+    readonly base: {
+      readonly root: {};
+      readonly list: {
+        readonly display: "flex";
+        readonly flexWrap: "wrap";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly listStyleType: "none";
+        readonly spacing: "0";
+        readonly margin: "0";
+      };
+      readonly item: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+      };
+      readonly link: {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly transition: "colors";
+        readonly _hover: {
+          readonly color: string;
+        };
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly page: {
+        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 separator: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly color: string;
+      };
+      readonly ellipsis: {
+        readonly display: "inline-flex";
+        readonly alignItems: "center";
+        readonly color: string;
+      };
+    };
+  };
+}, {}>, {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+  maxItems?: number;
+  renderEllipsis?: (props: {
+    className: string;
+    collapsedItems: BreadcrumbItem[];
+  }) => ReactNode;
+  renderLink?: (props: HtmlAnchorProps) => ReactNode;
+}, {
+  root: "nav";
+  list: "ol";
+  separator: "li";
+  item: "li";
+  link: "a";
+  page: "span";
+  ellipsis: "span";
+}>>; //#endregion
+//#endregion
+export { Breadcrumb, BreadcrumbItem };

package/dist/components/dist/breadcrumb.js

@@ -0,0 +1,119 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/breadcrumb.js
+const DefaultSeparator = () => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/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("path", { d: "m9 18 6-6-6-6" })
+});
+const DefaultEllipsis = (props) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	...props,
+	role: "presentation",
+	"aria-hidden": "true",
+	children: "…"
+}), /* @__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: "More"
+})] });
+/**
+* @description A navigation aid that shows the user's location within a site hierarchy
+*/
+const Breadcrumb = createComponent(({ props, items, separator, maxItems, renderEllipsis, renderLink }) => {
+	let visibleItems;
+	let collapsedItems = [];
+	if (maxItems != null && items.length > maxItems) {
+		const first = items[0];
+		const tail = items.slice(-(maxItems - 1));
+		collapsedItems = items.slice(1, items.length - (maxItems - 1));
+		visibleItems = [first, ...tail];
+	} else visibleItems = items;
+	const separatorContent = separator ?? /* @__PURE__ */ jsx(DefaultSeparator, {});
+	const showEllipsis = collapsedItems.length > 0;
+	const renderItems = () => {
+		const elements = [];
+		for (let i = 0; i < visibleItems.length; i++) {
+			const item = visibleItems[i];
+			const isLast = i === visibleItems.length - 1;
+			if (showEllipsis && i === 1) {
+				elements.push(/* @__PURE__ */ jsx("li", {
+					role: "presentation",
+					"aria-hidden": "true",
+					...props.separator,
+					children: separatorContent
+				}, "ellipsis-sep"));
+				elements.push(/* @__PURE__ */ jsx("li", {
+					role: "presentation",
+					...props.item,
+					children: renderEllipsis ? renderEllipsis({
+						className: props.ellipsis?.className ?? "",
+						collapsedItems
+					}) : /* @__PURE__ */ jsx(DefaultEllipsis, { ...props.ellipsis })
+				}, "ellipsis"));
+			}
+			if (i > 0) elements.push(/* @__PURE__ */ jsx("li", {
+				role: "presentation",
+				"aria-hidden": "true",
+				...props.separator,
+				children: separatorContent
+			}, `sep-${i}`));
+			if (isLast && !item.href) elements.push(/* @__PURE__ */ jsx("li", {
+				...props.item,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-current": "page",
+					...props.page,
+					children: item.label
+				})
+			}, `item-${i}`));
+			else if (item.href) elements.push(/* @__PURE__ */ jsx("li", {
+				...props.item,
+				children: renderLink ? renderLink({
+					href: item.href,
+					className: props.link?.className,
+					...props.link,
+					children: item.label
+				}) : /* @__PURE__ */ jsx("a", {
+					href: item.href,
+					...props.link,
+					children: item.label
+				})
+			}, `item-${i}`));
+			else elements.push(/* @__PURE__ */ jsx("li", {
+				...props.item,
+				children: /* @__PURE__ */ jsx("span", {
+					...props.page,
+					children: item.label
+				})
+			}, `item-${i}`));
+		}
+		return elements;
+	};
+	return /* @__PURE__ */ jsx("nav", {
+		...props.root,
+		"aria-label": "Breadcrumb",
+		children: /* @__PURE__ */ jsx("ol", {
+			...props.list,
+			children: renderItems()
+		})
+	});
+});
+//#endregion
+export { Breadcrumb };