@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/avatar-group.js

@@ -0,0 +1,39 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/avatar-group.js
+/**
+* @description A row of overlapping avatars representing a group of users
+*/
+const AvatarGroup = createComponent(({ props, children, maxVisible, label }) => {
+	const childArray = React.Children.toArray(children);
+	const total = childArray.length;
+	const visible = maxVisible != null ? childArray.slice(0, maxVisible) : childArray;
+	const overflow = maxVisible != null ? total - maxVisible : 0;
+	return /* @__PURE__ */ jsxs("div", {
+		...props.root,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "center"
+			},
+			children: [visible.map((child, i) => /* @__PURE__ */ jsx("div", {
+				style: { marginLeft: i > 0 ? "-8px" : void 0 },
+				children: child
+			}, i)), overflow > 0 && /* @__PURE__ */ jsx("div", {
+				...props.overflow,
+				style: { marginLeft: "-8px" },
+				children: /* @__PURE__ */ jsxs("span", {
+					...props.overflowText,
+					children: ["+", overflow]
+				})
+			})]
+		}), label && /* @__PURE__ */ jsx("span", {
+			...props.label,
+			children: label
+		})]
+	});
+});
+//#endregion
+export { AvatarGroup };

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

@@ -0,0 +1,198 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+//#region ../components/dist/avatar.config.d.ts
+//#region src/avatar.config.d.ts
+declare const avatarConfig: ComponentConfig<{
+  Avatar: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "2.5rem";
+        readonly height: "2.5rem";
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+      };
+      readonly image: {
+        readonly width: "100%";
+        readonly height: "100%";
+        readonly objectFit: "cover";
+        readonly borderRadius: string;
+      };
+      readonly fallbackText: {
+        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 variants: {
+      readonly variant: {
+        readonly brand: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly fallbackText: {
+            readonly color: string;
+          };
+        };
+        readonly positive: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly fallbackText: {
+            readonly color: string;
+          };
+        };
+        readonly alert: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly fallbackText: {
+            readonly color: string;
+          };
+        };
+        readonly accent: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly fallbackText: {
+            readonly color: string;
+          };
+        };
+      };
+    };
+  };
+}, {}>;
+type AvatarConfig = typeof avatarConfig; //#endregion
+//#endregion
+export { AvatarConfig, avatarConfig };

package/dist/components/dist/avatar.config.js

@@ -0,0 +1,49 @@
+import { defaultFoundationPreset } from "../../foundational-presets/dist/defaultPreset.js";
+import "../../foundational-presets/dist/index.js";
+import { textVariants } from "./text.config.js";
+//#region ../components/dist/avatar.config.js
+const avatarConfig = defaultFoundationPreset.defineComponent("Avatar", ({ tokens }) => ({
+	base: {
+		root: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: "2.5rem",
+			height: "2.5rem",
+			borderRadius: tokens.borderRadius.full,
+			backgroundColor: tokens.bg.brand,
+			borderWidth: tokens.borderWidth.medium,
+			borderColor: tokens.borderColor.primary
+		},
+		image: {
+			width: "100%",
+			height: "100%",
+			objectFit: "cover",
+			borderRadius: tokens.borderRadius.full
+		},
+		fallbackText: {
+			...textVariants.label2,
+			color: tokens.color["on-brand"]
+		}
+	},
+	variants: { variant: {
+		brand: {
+			root: { backgroundColor: tokens.bg.brand },
+			fallbackText: { color: tokens.color["on-brand"] }
+		},
+		positive: {
+			root: { backgroundColor: tokens.bg.positive },
+			fallbackText: { color: tokens.color["on-positive"] }
+		},
+		alert: {
+			root: { backgroundColor: tokens.bg.alert },
+			fallbackText: { color: tokens.color["on-alert"] }
+		},
+		accent: {
+			root: { backgroundColor: tokens.bg.accent },
+			fallbackText: { color: tokens.color["on-accent"] }
+		}
+	} }
+}));
+//#endregion
+export { avatarConfig };

package/dist/components/dist/avatar.d.ts

@@ -0,0 +1,212 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/avatar.d.ts
+//#region src/avatar.d.ts
+/**
+ * @description A circular representation of a user, displaying an image or initials as fallback
+ */
+declare const Avatar: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Avatar: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+        readonly width: "2.5rem";
+        readonly height: "2.5rem";
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly borderWidth: string;
+        readonly borderColor: string;
+      };
+      readonly image: {
+        readonly width: "100%";
+        readonly height: "100%";
+        readonly objectFit: "cover";
+        readonly borderRadius: string;
+      };
+      readonly fallbackText: {
+        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 variants: {
+      readonly variant: {
+        readonly brand: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly fallbackText: {
+            readonly color: string;
+          };
+        };
+        readonly positive: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly fallbackText: {
+            readonly color: string;
+          };
+        };
+        readonly alert: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly fallbackText: {
+            readonly color: string;
+          };
+        };
+        readonly accent: {
+          readonly root: {
+            readonly backgroundColor: string;
+          };
+          readonly fallbackText: {
+            readonly color: string;
+          };
+        };
+      };
+    };
+  };
+}, {}>, {
+  /** Image URL for the avatar */src?: string; /** Alt text for the image */
+  alt?: string; /** Initials to display as fallback when no src is provided or image fails to load */
+  initials?: string;
+}, {
+  root: "div";
+  image: "img";
+  fallbackText: "span";
+}>>;
+type AvatarProps = React.ComponentProps<typeof Avatar>; //#endregion
+//#endregion
+export { Avatar, AvatarProps };

package/dist/components/dist/avatar.js

@@ -0,0 +1,20 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+//#region ../components/dist/avatar.js
+/**
+* @description A circular representation of a user, displaying an image or initials as fallback
+*/
+const Avatar = createComponent(({ props, src, alt, initials }) => /* @__PURE__ */ jsx("div", {
+	...props.root,
+	children: src ? /* @__PURE__ */ jsx("img", {
+		...props.image,
+		src,
+		alt: alt ?? initials ?? ""
+	}) : /* @__PURE__ */ jsx("span", {
+		...props.fallbackText,
+		children: initials
+	})
+}));
+//#endregion
+export { Avatar };