{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "role-map", "title": "Role Map", "description": "Who did what on a project: panels, quiet rows or a table of people against areas, with one person in the accent.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "registry/miseui/ui/role-map.tsx", "content": "import type * as React from \"react\"\r\nimport { useState } from \"react\"\r\nimport { RoleMatrix, RolePanels, RoleRows, collectAreas, type RoleFocus, type RoleMapVariant, type RoleMember } from \"@/registry/miseui/ui/role-map-views\"\r\nimport { cn } from \"@/registry/miseui/lib/utils\"\r\n\r\ntype RoleMapEffect = \"focus\"\r\n\r\n/** Hovering previews and pressing pins. On touch only the pin exists, which is why there are two states. */\r\nfunction useRoleFocus(enabled: boolean): RoleFocus {\r\n const [hovered, setHovered] = useState(null)\r\n const [pinned, setPinned] = useState(null)\r\n return {\r\n enabled,\r\n active: enabled ? (hovered ?? pinned) : null,\r\n pinned,\r\n hover: setHovered,\r\n toggle: (name) => setPinned(pinned === name ? null : name),\r\n }\r\n}\r\n\r\ntype RoleMapProps = Omit, \"children\"> & {\r\n /** Who did what. Mark at most one as `lead`: it is the focal point of the map. */\r\n members: readonly RoleMember[]\r\n /** `panels` a surface per person, `rows` one quiet line per person, `matrix` a table of who touched which area. */\r\n variant?: RoleMapVariant\r\n /** `focus` dims everyone else when a person is pointed at or pressed, to trace one person's share. */\r\n effect?: RoleMapEffect\r\n /** Shown for someone with nothing listed, so an empty share reads as a fact and not as a bug. */\r\n emptyText?: string\r\n /** Names the matrix table and the first column. */\r\n label?: string\r\n}\r\n\r\nfunction RoleMap({ members, variant = \"panels\", effect, emptyText = \"Nothing recorded\", label = \"Who did what\", className, ...props }: RoleMapProps) {\r\n const focus = useRoleFocus(effect === \"focus\")\r\n const shared = { members, focus, emptyText }\r\n return (\r\n
\r\n {variant === \"panels\" ? : null}\r\n {variant === \"rows\" ? : null}\r\n {variant === \"matrix\" ? : null}\r\n
\r\n )\r\n}\r\n\r\nexport { RoleMap, collectAreas, type RoleMapProps, type RoleMapVariant, type RoleMapEffect, type RoleMember }\r\n", "type": "registry:ui" }, { "path": "registry/miseui/ui/role-map-views.tsx", "content": "import type * as React from \"react\"\nimport { Check } from \"lucide-react\"\nimport { cn } from \"@/registry/miseui/lib/utils\"\n\ntype RoleMapVariant = \"panels\" | \"rows\" | \"matrix\"\n\ninterface RoleMember {\n name: string\n /** What they are, such as \"Product design\". */\n role?: string\n /** The areas they took on. */\n owns: readonly string[]\n /** The person this map is about. Gets the accent. */\n lead?: boolean\n}\n\ninterface RoleFocus {\n enabled: boolean\n active: string | null\n pinned: string | null\n hover: (name: string | null) => void\n toggle: (name: string) => void\n}\n\ninterface ViewProps {\n members: readonly RoleMember[]\n focus: RoleFocus\n emptyText: string\n}\n\n/** First appearance sets the order, so the table reads in the order the data was written. */\nfunction collectAreas(members: readonly RoleMember[]) {\n return [...new Set(members.flatMap((member) => member.owns))]\n}\n\nconst DIM = \"transition-opacity duration-(--duration-base) ease-(--ease-mise) motion-reduce:transition-none\"\n\nfunction dimmed(focus: RoleFocus, name: string) {\n return focus.active !== null && focus.active !== name\n}\n\nfunction MemberName({ member, focus, className }: { member: RoleMember; focus: RoleFocus; className?: string }) {\n const base = cn(\"min-w-0 text-start text-sm leading-5 font-medium wrap-break-word\", className)\n if (!focus.enabled) return {member.name}\n return (\n focus.toggle(member.name)}\n >\n {member.name}\n \n )\n}\n\n/** Mouse only: a tap also fires enter and leave, which would fight the pin it is about to set. */\nfunction hoverProps(focus: RoleFocus, name: string): React.HTMLAttributes {\n if (!focus.enabled) return {}\n return {\n onPointerEnter: (event: React.PointerEvent) => {\n if (event.pointerType !== \"touch\") focus.hover(name)\n },\n onPointerLeave: () => focus.hover(null),\n }\n}\n\nfunction RolePanels({ members, focus, emptyText }: ViewProps) {\n return (\n
    \n {members.map((member) => (\n \n \n {member.role ?

    {member.role}

    : null}\n {member.owns.length > 0 ? (\n
      \n {member.owns.map((area) => (\n
    • \n {area}\n
      • \n ))}\n
    \n ) : (\n

    {emptyText}

    \n )}\n \n ))}\n
\n )\n}\n\nfunction RoleRows({ members, focus, emptyText }: ViewProps) {\n return (\n
    \n {members.map((member) => (\n \n \n \n {member.role ? {member.role} : null}\n \n \n {member.owns.length > 0 ? member.owns.join(\", \") : emptyText}\n \n \n ))}\n
\n )\n}\n\nfunction MatrixCell({ member, area, focus }: { member: RoleMember; area: string; focus: RoleFocus }) {\n const owned = member.owns.includes(area)\n return (\n \n {owned ? : null}\n {owned ? `${member.name}: yes` : `${member.name}: no`}\n \n )\n}\n\nfunction RoleMatrix({ members, focus, label }: Omit & { label: string }) {\n const areas = collectAreas(members)\n return (\n // Fixed layout makes the columns share the width, so a narrow cell squeezes the names instead of overflowing.\n \n \n \n \n \n {members.map((member) => (\n \n ))}\n \n \n \n {areas.map((area) => (\n \n \n {members.map((member) => (\n \n ))}\n \n ))}\n \n
{label}
\n Area\n \n \n
\n {area}\n
\n )\n}\n\nexport { RoleMatrix, RolePanels, RoleRows, collectAreas, type RoleFocus, type RoleMapVariant, type RoleMember }\n", "type": "registry:ui" } ], "categories": [ "display" ], "type": "registry:ui" }