minka-ds 0.3.11 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minka-ds",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
   "files": [

package/src/components/ui/avatar.tsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+const SIZE: Record<NonNullable<AvatarProps["size"]>, string> = {
+  sm: "size-7 text-caption-serif",
+  md: "size-9 text-body-sm-serif",
+  lg: "size-12 text-body-serif",
+}
+
+interface AvatarProps {
+  /** Image URL. When absent, initials (or a fallback) are shown. */
+  src?: string
+  /** Full name — used for alt text and to derive initials. */
+  name?: string
+  /** Explicit initials override; otherwise derived from `name`. */
+  initials?: string
+  size?: "sm" | "md" | "lg"
+  /** Background for the initials state. Defaults to a brand color. */
+  background?: string
+  className?: string
+}
+
+function deriveInitials(name?: string): string {
+  if (!name) return "?"
+  return name.trim().split(/\s+/).map(p => p[0]).join("").slice(0, 2).toUpperCase()
+}
+
+function Avatar({ src, name, initials, size = "md", background, className }: AvatarProps) {
+  return (
+    <div
+      data-slot="avatar"
+      className={cn(
+        "shrink-0 rounded-full flex items-center justify-center overflow-hidden text-[var(--color-text-inverse)]",
+        SIZE[size],
+        className
+      )}
+      style={{ background: src ? undefined : (background ?? "var(--color-brand-blue)") }}
+    >
+      {src
+        ? <img src={src} alt={name ?? ""} className="size-full object-cover" />
+        : <span className="leading-none">{initials ?? deriveInitials(name)}</span>}
+    </div>
+  )
+}
+
+export { Avatar }
+export type { AvatarProps }

package/src/components/ui/sidebar.tsx

@@ -7,6 +7,7 @@ import { Slot } from "radix-ui"
 
 import { useIsMobile } from "../../hooks/use-mobile"
 import { cn } from "../../lib/utils"
+import { Avatar } from "./avatar"
 import { Button } from "./button"
 import { Input } from "./input"
 import { Separator } from "./separator"
@@ -368,6 +369,38 @@ function SidebarSeparator({
   )
 }
 
+// Footer user block: avatar + name/role, with an optional trailing action
+// (e.g. a kebab dropdown trigger). Composed for the sidebar footer.
+function SidebarUser({
+  name,
+  role,
+  avatarSrc,
+  avatarBackground,
+  action,
+  className,
+}: {
+  name: string
+  role?: string
+  avatarSrc?: string
+  avatarBackground?: string
+  action?: React.ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      data-slot="sidebar-user"
+      className={cn("flex items-center gap-2.5 px-2 py-1.5", className)}
+    >
+      <Avatar name={name} src={avatarSrc} background={avatarBackground} />
+      <div className="flex flex-col gap-0.5 flex-1 min-w-0">
+        <span className="text-body-sm text-[var(--color-text-default)] truncate">{name}</span>
+        {role && <span className="text-caption-light text-[var(--color-text-muted)] truncate">{role}</span>}
+      </div>
+      {action}
+    </div>
+  )
+}
+
 function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
@@ -722,5 +755,6 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
+  SidebarUser,
   useSidebar,
 }

package/src/index.ts

@@ -6,6 +6,7 @@ export { usePlatform } from "./hooks/use-platform"
 
 // Components
 export * from "./components/ui/alert"
+export * from "./components/ui/avatar"
 export * from "./components/ui/badge"
 export * from "./components/ui/breadcrumb"
 export * from "./components/ui/calendar"