@podoba/react 0.0.24 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.24",
+	"version": "0.0.26",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -25,8 +25,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.24",
-		"@podoba/tailwind": "^0.0.24",
+		"@podoba/tokens": "^0.0.26",
+		"@podoba/tailwind": "^0.0.26",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/avatar.tsx

@@ -0,0 +1,88 @@
+/**
+ * Avatar + AvatarGroup — user avatars (port of gs `GSTeamAvatarGroup`, extended with
+ * image support). A single `Avatar` shows the user's photo, falling back to initials
+ * on the brand surface. It is inline-friendly (`inline-flex align-middle`) so it drops
+ * straight into a line of text — "Agáta Zapotilová <Avatar/> created project". Overlap a
+ * set with `AvatarGroup` (trailing "+N" overflow, optional dashed add affordance).
+ *
+ * Presentational only (hard rule #1): names/urls arrive via props.
+ */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg'
+
+const SIZE: Record<AvatarSize, string> = {
+	xs: 'h-5 w-5 text-micro',
+	sm: 'h-6 w-6 text-caption',
+	md: 'h-7 w-7 text-caption',
+	lg: 'h-9 w-9 text-compact',
+}
+
+/** First + last initial (single word → first two letters). */
+function initials(name: string): string {
+	const parts = name.trim().split(/\s+/).filter(Boolean)
+	const first = parts[0] ?? ''
+	if (parts.length === 0) return '?'
+	if (parts.length === 1) return first.slice(0, 2).toUpperCase()
+	const last = parts[parts.length - 1] ?? ''
+	return ((first[0] ?? '') + (last[0] ?? '')).toUpperCase()
+}
+
+export interface AvatarProps {
+	/** Person's name — drives the initials fallback + the tooltip/alt text. */
+	name: string
+	/** Avatar image URL. Falls back to initials when omitted. */
+	src?: string
+	size?: AvatarSize
+	/** On a dark surface → light ring so avatars separate cleanly. */
+	onDark?: boolean
+	/** Ring/border around the avatar (default true — needed when they overlap). */
+	ring?: boolean
+	className?: string
+}
+
+export function Avatar({ name, src, size = 'md', onDark = false, ring = true, className }: AvatarProps) {
+	const ringClass = ring ? `border-2 ${onDark ? 'border-surface-inverted' : 'border-surface'}` : ''
+	const base = `${SIZE[size]} ${ringClass} inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle`
+	if (src) {
+		return <img src={src} alt={name} title={name} className={[base, 'object-cover', className].filter(Boolean).join(' ')} />
+	}
+	return (
+		<span title={name} className={[base, 'bg-brand-primary font-medium text-fg-inverted', className].filter(Boolean).join(' ')}>
+			{initials(name)}
+		</span>
+	)
+}
+
+export interface AvatarPerson {
+	name: string
+	src?: string
+}
+
+export interface AvatarGroupProps {
+	/** People to show (with optional image). Prefer this over `names`. */
+	people?: AvatarPerson[]
+	/** Names-only convenience (initials avatars). */
+	names?: string[]
+	max?: number
+	size?: AvatarSize
+	onDark?: boolean
+	/** Trailing dashed "+" add affordance. */
+	showAdd?: boolean
+}
+
+export function AvatarGroup({ people, names, max = 3, size = 'md', onDark = false, showAdd = false }: AvatarGroupProps) {
+	const all: AvatarPerson[] = people ?? (names ?? []).map((name) => ({ name }))
+	const visible = all.slice(0, max)
+	const overflow = all.length - visible.length
+	const chip = `${SIZE[size]} border-2 ${onDark ? 'border-surface-inverted' : 'border-surface'} -ml-1.5 inline-flex items-center justify-center rounded-full`
+	return (
+		<div className="flex items-center">
+			{visible.map((p, i) => (
+				<Avatar key={`${p.name}-${i}`} name={p.name} src={p.src} size={size} onDark={onDark} className="-ml-1.5 first:ml-0" />
+			))}
+			{overflow > 0 ? <span className={`${chip} bg-surface-muted font-medium text-fg-muted`}>+{overflow}</span> : null}
+			{showAdd ? (
+				<span className={`${chip} border-dashed bg-transparent ${onDark ? 'text-white/70' : 'text-fg-muted'}`}>+</span>
+			) : null}
+		</div>
+	)
+}

package/src/components/brand-page-header.tsx

@@ -94,8 +94,8 @@ export function BrandPageHeader({
 				.filter(Boolean)
 				.join(' ')}
 		>
-			<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
-				<div className="flex min-w-0 flex-col gap-1">
+			<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:gap-4">
+				<div className="flex min-w-0 flex-1 flex-col gap-1">
 					{breadcrumbs && breadcrumbs.length > 0 ? (
 						<nav aria-label="Breadcrumb" className="flex flex-wrap items-center gap-1 text-compact text-fg-muted">
 							{breadcrumbs.map((crumb, i) => (
@@ -133,7 +133,8 @@ export function BrandPageHeader({
 				</div>
 
 				{cta ? (
-					<div className="w-full shrink-0 sm:w-auto sm:min-w-[360px]">{cta}</div>
+					// Hero CTA spans 4 of 12 columns (one third) — the greeting takes the rest.
+					<div className="w-full shrink-0 sm:w-1/3">{cta}</div>
 				) : ctaLabel ? (
 					<div className="shrink-0">
 						{hasExpandable ? (

package/src/components/cta-pill.tsx

@@ -26,8 +26,8 @@ export interface CtaPillProps {
 
 export function CtaPill({ lead, emphasis, tail, children }: CtaPillProps) {
 	return (
-		<div className="flex min-w-[560px] items-center justify-between gap-4 rounded-lg bg-brand-secondary px-6 py-4">
-			<p className="text-heading4 font-medium leading-[22px] tracking-normal text-fg">
+		<div className="flex w-full items-center justify-between gap-4 rounded-lg bg-brand-secondary px-6 py-4">
+			<p className="min-w-0 text-heading4 font-medium leading-[22px] tracking-normal text-fg">
 				{lead} <span className="font-semibold text-white">{emphasis}</span> {tail}
 			</p>
 			<div className="shrink-0">{children}</div>

package/src/components/tile.tsx

@@ -152,6 +152,10 @@ function TileBands({
 		)
 	}
 
+	// Footer defaults to 14px muted (gs supporting text); self-styled footer content
+	// (links, buttons) overrides both size and colour.
+	const footerTone = theme === 'dark' ? 'text-white/50' : theme === 'light' ? 'text-fg-muted' : 'text-fg/70'
+
 	return (
 		<>
 			{eyebrow != null || badge != null ? (
@@ -161,7 +165,7 @@ function TileBands({
 				</div>
 			) : null}
 			{content}
-			{footer != null ? <div className="min-w-0">{footer}</div> : null}
+			{footer != null ? <div className={`min-w-0 text-small leading-5 ${footerTone}`}>{footer}</div> : null}
 		</>
 	)
 }

package/src/index.ts

@@ -51,6 +51,7 @@ export * from "./layout/topbar";
 export * from "./layout/persistent-page-shell";
 
 // --- product patterns (label-driven; no domain coupling) ---
+export * from "./components/avatar";
 export * from "./components/brand-page-header";
 export * from "./components/count-up";
 export * from "./components/cta-pill";