{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "member-item", "type": "registry:block", "title": "Member item", "description": "Identity, contact and role in one compact row.", "dependencies": [ "@base-ui/react@^1.8.0", "class-variance-authority@^0.7.1", "cn@^0.2.6" ], "files": [ { "path": "components/ui/avatar.tsx", "type": "registry:ui", "content": "\"use client\";\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"cn\";\nimport type * as React from \"react\";\nfunction Avatar({ className, size = \"default\", ...props }: AvatarPrimitive.Root.Props & {\n size?: \"default\" | \"sm\" | \"lg\";\n}) {\n return ();\n}\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n return ();\n}\nfunction AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {\n return ();\n}\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (svg]:hidden\", \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\", \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\", className)} {...props}/>);\n}\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (
);\n}\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps<\"div\">) {\n return (
svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\", className)} {...props}/>);\n}\nexport { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, };\n" }, { "path": "components/ui/badge.tsx", "type": "registry:ui", "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\n\nconst badgeVariants = cva(\n \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n secondary:\n \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n destructive:\n \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n outline:\n \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n ghost:\n \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps) {\n return useRender({\n defaultTagName: \"span\",\n props: mergeProps<\"span\">(\n {\n className: cn(badgeVariants({ variant }), className),\n },\n props\n ),\n render,\n state: {\n slot: \"badge\",\n variant,\n },\n })\n}\n\nexport { Badge, badgeVariants }\n" }, { "path": "components/ui/member-item.tsx", "type": "registry:ui", "content": "import { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nexport function MemberItem({\n name,\n memberRole = \"Member\",\n email,\n}: {\n name: string;\n memberRole?: string;\n email: string;\n}) {\n return (\n
\n \n \n {name\n .split(\" \")\n .map((n) => n[0])\n .slice(0, 2)\n .join(\"\")}\n \n \n
\n

{name}

\n

{email}

\n
\n {memberRole}\n
\n );\n}\n" } ], "cssVars": { "light": { "background": "#ffffff", "foreground": "#141414", "card": "#ffffff", "card-foreground": "#141414", "popover": "#ffffff", "popover-foreground": "#141414", "secondary": "#f5f5f5", "secondary-foreground": "#141414", "muted": "#f5f5f5", "muted-foreground": "#6b6b6b", "accent": "#f0f0f0", "accent-foreground": "#141414", "border": "#e6e6e6", "input": "#cccccc", "destructive": "#b91c1c", "syntax-text": "#242424", "syntax-keyword": "#754399", "syntax-string": "#326348", "syntax-function": "#315d89", "syntax-number": "#86551f", "syntax-comment": "#6b6b6b", "syntax-punctuation": "#616161", "syntax-type": "#7c464c", "syntax-background": "#f8f8f8", "sidebar": "#f5f5f5", "sidebar-foreground": "#141414", "sidebar-primary": "#141414", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#f0f0f0", "sidebar-accent-foreground": "#141414", "sidebar-border": "#e6e6e6", "sidebar-ring": "#141414", "chart-1": "#141414", "chart-2": "#525252", "chart-3": "#737373", "chart-4": "#a3a3a3", "chart-5": "#d4d4d4", "primary": "#141414", "primary-foreground": "#ffffff", "ring": "#141414", "radius": "0rem", "font-sans": "ui-sans-serif, system-ui, sans-serif", "control-height": "2rem" }, "dark": { "background": "#141414", "foreground": "#fafafa", "card": "#1c1c1c", "card-foreground": "#fafafa", "popover": "#1c1c1c", "popover-foreground": "#fafafa", "secondary": "#262626", "secondary-foreground": "#fafafa", "muted": "#262626", "muted-foreground": "#a3a3a3", "accent": "#303030", "accent-foreground": "#fafafa", "border": "#404040", "input": "#404040", "destructive": "#ff9d9d", "syntax-text": "#ededed", "syntax-keyword": "#c6a3df", "syntax-string": "#98c4a4", "syntax-function": "#9cbedf", "syntax-number": "#d7b27d", "syntax-comment": "#a3a3a3", "syntax-punctuation": "#b0b0b0", "syntax-type": "#dda2aa", "syntax-background": "#1b1b1b", "sidebar": "#262626", "sidebar-foreground": "#fafafa", "sidebar-primary": "#fafafa", "sidebar-primary-foreground": "#141414", "sidebar-accent": "#303030", "sidebar-accent-foreground": "#fafafa", "sidebar-border": "#404040", "sidebar-ring": "#fafafa", "chart-1": "#fafafa", "chart-2": "#d4d4d4", "chart-3": "#a3a3a3", "chart-4": "#737373", "chart-5": "#525252", "primary": "#fafafa", "primary-foreground": "#141414", "ring": "#fafafa", "radius": "0rem", "font-sans": "ui-sans-serif, system-ui, sans-serif", "control-height": "2rem" } } }