{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "directory-1", "title": "Directory 1: people directory", "author": "Ballmac ", "description": "A people directory: search across names, roles, teams and cities, department chips with live counts, a location filter, a grid and a compact list, each person with availability and their local time right now.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/cover-art.json", "https://ui.ballmac.com/r/match-highlight.json", "https://ui.ballmac.com/r/segmented-control.json", "https://ui.ballmac.com/r/select.json", "https://ui.ballmac.com/r/skeleton.json", "https://ui.ballmac.com/r/state-view.json" ], "files": [ { "path": "registry/ballmac/components/blocks/directory-1/directory-1.tsx", "content": "// Ballmac UI: Directory 1. https://ui.ballmac.com/blocks/directory-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { Clock, LayoutGrid, List, Mail, MapPin, Search, UsersRound, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ballmac/button\"\nimport { CoverArt } from \"@/components/ballmac/cover-art\"\nimport { MatchHighlight, matchesAll, queryTokens } from \"@/components/ballmac/match-highlight\"\nimport { SegmentedControl, SegmentedControlItem } from \"@/components/ballmac/segmented-control\"\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ballmac/select\"\nimport { Skeleton } from \"@/components/ballmac/skeleton\"\nimport { frameProps, StateView, type StateProps } from \"@/components/ballmac/state-view\"\nimport { cn } from \"@/lib/utils\"\n\ntype Directory1Person = {\n id: string\n name: string\n title: string\n department: string\n location: string\n /** Hours from UTC, such as 1 or -5 or 5.5. Used to show their local time. */\n utcOffset: number\n email?: string\n /** \"she/her\", shown beside the name when given. */\n pronouns?: string\n status?: \"available\" | \"away\" | \"out\"\n}\n\ntype Directory1Props = Omit, \"title\"> &\n StateProps & {\n people?: Directory1Person[]\n title?: string\n description?: string\n /** An ISO date and time in UTC for \"now\". The block never reads the clock. */\n now?: string\n locale?: string\n defaultView?: \"grid\" | \"list\"\n onSelect?: (person: Directory1Person) => void\n }\n\nconst sample: Directory1Person[] = [\n { id: \"1\", name: \"Mara Ellison\", title: \"Chief Executive\", department: \"Leadership\", location: \"Lisbon\", utcOffset: 1, email: \"mara@acme.com\", pronouns: \"she/her\", status: \"available\" },\n { id: \"2\", name: \"Theo Nakamura\", title: \"Chief Technology Officer\", department: \"Engineering\", location: \"Osaka\", utcOffset: 9, email: \"theo@acme.com\", status: \"away\" },\n { id: \"3\", name: \"Priya Shah\", title: \"Head of Platform\", department: \"Engineering\", location: \"Lisbon\", utcOffset: 1, email: \"priya@acme.com\", pronouns: \"she/her\", status: \"available\" },\n { id: \"4\", name: \"Diego Marín\", title: \"Staff Engineer\", department: \"Engineering\", location: \"Madrid\", utcOffset: 2, email: \"diego@acme.com\", status: \"available\" },\n { id: \"5\", name: \"Kofi Mensah\", title: \"Senior Engineer\", department: \"Engineering\", location: \"Accra\", utcOffset: 0, email: \"kofi@acme.com\", status: \"out\" },\n { id: \"6\", name: \"Noor Haddad\", title: \"Head of Design\", department: \"Design\", location: \"Porto\", utcOffset: 1, email: \"noor@acme.com\", pronouns: \"she/they\", status: \"available\" },\n { id: \"7\", name: \"Amara Okoye\", title: \"Product Designer\", department: \"Design\", location: \"Lagos\", utcOffset: 1, email: \"amara@acme.com\", status: \"available\" },\n { id: \"8\", name: \"Jordan Lee\", title: \"Design Systems Lead\", department: \"Design\", location: \"New York\", utcOffset: -4, email: \"jordan@acme.com\", status: \"away\" },\n { id: \"9\", name: \"Sam Okafor\", title: \"Head of Support\", department: \"Support\", location: \"Dublin\", utcOffset: 1, email: \"sam@acme.com\", status: \"available\" },\n { id: \"10\", name: \"Mia Laurent\", title: \"Support Specialist\", department: \"Support\", location: \"Paris\", utcOffset: 2, email: \"mia@acme.com\", status: \"available\" },\n { id: \"11\", name: \"Alex Kim\", title: \"Support Lead\", department: \"Support\", location: \"Seoul\", utcOffset: 9, email: \"alex@acme.com\", status: \"out\" },\n { id: \"12\", name: \"Ana Souza\", title: \"Head of Operations\", department: \"Operations\", location: \"Lisbon\", utcOffset: 1, email: \"ana@acme.com\", status: \"available\" },\n { id: \"13\", name: \"Oliver Reed\", title: \"Finance Manager\", department: \"Operations\", location: \"London\", utcOffset: 1, email: \"oliver@acme.com\", pronouns: \"he/him\", status: \"away\" },\n { id: \"14\", name: \"Yuki Tanaka\", title: \"Frontend Engineer\", department: \"Engineering\", location: \"Tokyo\", utcOffset: 9, email: \"yuki@acme.com\", status: \"available\" },\n]\n\nconst statusMeta = { available: { label: \"Available\", dot: \"bg-chart-2\" }, away: { label: \"Away\", dot: \"bg-amber-400\" }, out: { label: \"Out of office\", dot: \"bg-muted-foreground/50\" } }\nconst initials = (n: string) => n.split(\" \").map((w) => w[0]).join(\"\").slice(0, 2)\n\nfunction Avatar({ p, size }: { p: Directory1Person; size: \"md\" | \"lg\" }) {\n const s = p.status ? statusMeta[p.status] : null\n return (\n \n \n \n \n {initials(p.name)}\n {s ? : null}\n \n )\n}\n\nfunction Skel() {\n return (\n
\n {Array.from({ length: 6 }, (_, i) => (\n
\n
\n \n
\n \n \n
\n
\n \n
\n ))}\n
\n )\n}\n\n/**\n * A people directory: search across names, roles and departments, department chips with counts, a location filter, a grid and a compact list,\n * each person with availability and their local time right now. The time is worked out from the moment you pass, never from the clock.\n */\nfunction Directory1({\n people = sample,\n title = \"Our people\",\n description = \"Find who does what, where they are, and whether it is a good time to write.\",\n now = \"2026-10-18T10:42:00Z\",\n locale = \"en\",\n defaultView = \"grid\",\n onSelect,\n state = \"ready\",\n onRetry,\n emptyState,\n errorState,\n className,\n ...props\n}: Directory1Props) {\n const id = React.useId()\n const all = state === \"empty\" ? [] : people\n const [query, setQuery] = React.useState(\"\")\n const [dept, setDept] = React.useState(null)\n const [place, setPlace] = React.useState(\"all\")\n const [view, setView] = React.useState<\"grid\" | \"list\">(defaultView)\n const tokens = queryTokens(query)\n const fmt = React.useMemo(() => new Intl.DateTimeFormat(locale, { hour: \"2-digit\", minute: \"2-digit\", timeZone: \"UTC\" }), [locale])\n const nowMs = Date.parse(now)\n const localTime = (p: Directory1Person) => fmt.format(nowMs + p.utcOffset * 3_600_000)\n const localHour = (p: Directory1Person) => new Date(nowMs + p.utcOffset * 3_600_000).getUTCHours()\n\n const matches = (p: Directory1Person) => !tokens.length || matchesAll(`${p.name} ${p.title} ${p.department} ${p.location}`, tokens)\n const departments = [...new Set(all.map((p) => p.department))]\n const places = [...new Set(all.map((p) => p.location))].sort()\n const inPlace = (p: Directory1Person) => place === \"all\" || p.location === place\n const shown = all.filter((p) => matches(p) && inPlace(p) && (!dept || p.department === dept)).sort((a, b) => a.name.localeCompare(b.name, locale))\n const countFor = (d: string | null) => all.filter((p) => matches(p) && inPlace(p) && (d ? p.department === d : true)).length\n const filtered = !!(tokens.length || dept || place !== \"all\")\n\n const card = (p: Directory1Person) => {\n const night = localHour(p) < 7 || localHour(p) >= 21\n const s = p.status ? statusMeta[p.status] : null\n const body = (\n <>\n \n \n \n \n {p.pronouns ? {p.pronouns} : null}\n \n \n \n \n {view === \"grid\" ? (\n \n \n \n ) : null}\n \n \n )\n return view === \"grid\" ? (\n
  • \n
    \n \n
    \n
    \n
    Location
    \n \n
    \n \n
    \n
    \n
    \n
    Their time
    \n \n
    \n {localTime(p)}\n {night ? · probably offline : null}\n
    \n
    \n {s ? (\n
    \n
    Status
    \n \n
    {s.label}
    \n
    \n ) : null}\n
    \n {p.email ? (\n \n \n \n ) : null}\n
    \n
    • \n ) : (\n
  • \n \n \n \n \n Their time: \n {localTime(p)}\n \n
    • \n )\n }\n\n const content = !all.length ? (\n
    \n \n \n \n

    {emptyState?.title ?? \"Nobody is listed yet\"}

    \n

    {emptyState?.description ?? \"People appear here once they are added to the directory.\"}

    \n {emptyState?.action}\n
    \n ) : (\n <>\n
    \n
    \n \n setQuery(e.target.value)} className=\"placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-sm outline-none\" />\n
    \n
    \n \n setView(v as \"grid\" | \"list\")} aria-label=\"View\" size=\"sm\">\n \n \n \n \n \n \n \n
    \n
    \n
    \n {[null, ...departments].map((d) => (\n setDept(d)}\n className={cn(\"focus-visible:ring-ring/50 shrink-0 rounded-full border px-3.5 py-1.5 text-sm font-medium outline-none transition-colors focus-visible:ring-[3px] motion-reduce:transition-none\", dept === d ? \"bg-foreground text-background border-foreground\" : \"hover:bg-accent\")}\n >\n {d ?? \"Everyone\"} {countFor(d)}\n \n ))}\n
    \n\n

    \n {shown.length} {shown.length === 1 ? \"person\" : \"people\"}\n {filtered ? \" match\" : \"\"}\n

    \n\n {shown.length ? (\n view === \"grid\" ? (\n
      {shown.map(card)}
    \n ) : (\n
      {shown.map(card)}
    \n )\n ) : (\n
    \n

    Nobody matches

    \n

    Try fewer words, or look across every team and city.

    \n {\n setQuery(\"\")\n setDept(null)\n setPlace(\"all\")\n }}\n >\n \n Clear filters\n \n
    \n )}\n \n )\n\n return (\n
    \n
    \n

    \n {title}\n

    \n

    {description}

    \n
    \n } error={{ title: errorState?.title ?? \"The directory could not be loaded\", description: errorState?.description ?? \"Check your connection and try again.\", ...errorState }}>\n {content}\n \n
    \n )\n}\n\nexport { Directory1, type Directory1Props, type Directory1Person }\n", "type": "registry:component", "target": "@components/ballmac/blocks/directory-1/directory-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "directory", "people", "team", "employees", "contacts", "company", "who is who", "time zones", "staff" ], "version": "1.0.0", "updated": "2026-10-18", "tests": true, "ai": { "summary": "A people directory. . Local times are worked out from now plus each utcOffset; pass now yourself, the block never reads the clock. Department chips and the location menu come from the data.", "whenToUse": [ "An internal company directory or a team page with filters", "Remote teams that need to see where people are and what time it is for them" ], "whenNotToUse": [ "A reporting hierarchy (use orgchart-1)", "A marketing team section with photos (use team-1)" ], "composesWith": [ "orgchart-1", "app-shell-1", "about-1" ], "a11y": [ { "keys": "Tab", "action": "Search, location, view, department buttons (pressed state announced), then one button per person; the email shortcut is its own link" }, { "keys": "Count", "action": "'7 people match' is announced politely as filters change" }, { "keys": "Availability", "action": "Written as a word (Available, Away, Out of office) beside the dot, never by color alone" } ], "customization": [ "Local time uses each person's utcOffset, so half-hour zones work", "A person between 21:00 and 07:00 locally is marked probably offline", "Pictures are drawn from the name, so identical on server and client" ] }, "states": [ { "id": "loading", "title": "Loading", "example": "directory-1-loading", "trigger": "state=\"loading\"", "note": "Skeleton cards under the real heading, announced as loading." }, { "id": "empty", "title": "Nobody listed", "example": "directory-1-empty", "trigger": "state=\"empty\" (or people={[]})", "note": "Says people appear once added; emptyState sets the copy. A search with no match says so with Clear filters." }, { "id": "error", "title": "Could not load", "example": "directory-1-error", "trigger": "state=\"error\"", "note": "An alert with Try again (onRetry)." } ], "examples": [ "directory-1-demo", "directory-1-list", "directory-1-loading", "directory-1-empty", "directory-1-error" ], "url": "https://ui.ballmac.com/components/directory-1" }, "categories": [ "blocks", "directory" ], "type": "registry:block" }