{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "careers-job-board",
  "title": "Careers Job Board",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/careers-job-board/CareersJobBoard.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component } from 'svelte'\n\n  export interface CareerPerk {\n    icon: Component\n    title: string\n    description: string\n  }\n\n  export interface JobOpening {\n    id: string\n    title: string\n    department: 'Engineering' | 'Design' | 'Product' | 'Marketing'\n    location: 'Remote' | 'San Francisco, CA' | 'London, UK'\n    type: string\n    level: string\n    salary: string\n    description: string\n  }\n\n  export interface CareersJobBoardProps {\n    title?: string\n    subtitle?: string\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import {\n    ArrowRight,\n    Briefcase,\n    Coins,\n    Globe,\n    GraduationCap,\n    HeartHandshake,\n    MapPin,\n    Search,\n    SearchX,\n    TrendingUp,\n  } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Input } from '$lib/components/ui/input'\n  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '$lib/components/ui/select'\n\n  let {\n    title = 'Join our team',\n    subtitle = 'Help us build the open-source UI infrastructure of tomorrow',\n    class: className,\n  }: CareersJobBoardProps = $props()\n\n  const PERKS: CareerPerk[] = [\n    {\n      icon: Globe,\n      title: 'Remote-first',\n      description: 'Work from anywhere in the world with flexible hours.',\n    },\n    {\n      icon: GraduationCap,\n      title: '$5k learning budget',\n      description: 'Annual stipend for courses, books, tools, and conferences.',\n    },\n    {\n      icon: HeartHandshake,\n      title: '100% health coverage',\n      description: 'Comprehensive medical, dental, and vision for you and dependents.',\n    },\n    {\n      icon: TrendingUp,\n      title: 'Equity packages',\n      description: 'Meaningful ownership stake with transparent vesting schedules.',\n    },\n  ]\n\n  const DEPARTMENTS = [\n    { id: 'all', label: 'All', count: 12 },\n    { id: 'Engineering', label: 'Engineering', count: 6 },\n    { id: 'Design', label: 'Design', count: 2 },\n    { id: 'Product', label: 'Product', count: 2 },\n    { id: 'Marketing', label: 'Marketing', count: 2 },\n  ] as const\n\n  const LOCATIONS = [\n    { id: 'all', label: 'All Locations' },\n    { id: 'Remote', label: 'Remote' },\n    { id: 'San Francisco, CA', label: 'San Francisco, CA' },\n    { id: 'London, UK', label: 'London, UK' },\n  ] as const\n\n  const JOBS: JobOpening[] = [\n    {\n      id: 'eng-1',\n      title: 'Staff Frontend Engineer',\n      department: 'Engineering',\n      location: 'Remote',\n      type: 'Full-time',\n      level: 'Staff',\n      salary: '$190k - $240k · 0.3% - 0.6%',\n      description:\n        'Lead the architecture of our high-performance UI components, compiler toolchains, and multi-framework design systems.',\n    },\n    {\n      id: 'eng-2',\n      title: 'Senior Full-Stack Engineer',\n      department: 'Engineering',\n      location: 'San Francisco, CA',\n      type: 'Full-time',\n      level: 'Senior',\n      salary: '$160k - $210k · 0.25% - 0.5%',\n      description:\n        'Build end-to-end features spanning serverless edge runtimes, component registries, and developer tooling.',\n    },\n    {\n      id: 'eng-3',\n      title: 'Systems & Performance Engineer',\n      department: 'Engineering',\n      location: 'Remote',\n      type: 'Full-time',\n      level: 'Senior',\n      salary: '$170k - $220k · 0.25% - 0.5%',\n      description:\n        'Optimize bundling pipelines, AST transformers, and static site generation latency across large workspaces.',\n    },\n    {\n      id: 'eng-4',\n      title: 'Design Systems Engineer',\n      department: 'Engineering',\n      location: 'London, UK',\n      type: 'Full-time',\n      level: 'Mid-Senior',\n      salary: '£110k - £140k · 0.2% - 0.4%',\n      description:\n        'Bridge design and code by maintaining tokens, accessible headless primitives, and fluid interaction standards.',\n    },\n    {\n      id: 'eng-5',\n      title: 'Developer Experience Engineer',\n      department: 'Engineering',\n      location: 'Remote',\n      type: 'Full-time',\n      level: 'Mid-Senior',\n      salary: '$150k - $190k · 0.2% - 0.4%',\n      description:\n        'Craft exceptional CLI workflows, interactive documentation playgrounds, and starter template engines.',\n    },\n    {\n      id: 'eng-6',\n      title: 'QA & Automation Engineer',\n      department: 'Engineering',\n      location: 'London, UK',\n      type: 'Full-time',\n      level: 'Mid-Senior',\n      salary: '£95k - £125k · 0.15% - 0.3%',\n      description:\n        'Expand cross-browser visual regression testing suites, accessibility audits, and automated release checks.',\n    },\n    {\n      id: 'des-1',\n      title: 'Senior Product Designer',\n      department: 'Design',\n      location: 'San Francisco, CA',\n      type: 'Full-time',\n      level: 'Senior',\n      salary: '$155k - $195k · 0.25% - 0.45%',\n      description:\n        'Define micro-interactions, responsive dashboard workflows, and layout ergonomics across our block catalog.',\n    },\n    {\n      id: 'des-2',\n      title: 'Brand & Motion Designer',\n      department: 'Design',\n      location: 'Remote',\n      type: 'Full-time',\n      level: 'Mid-Senior',\n      salary: '$140k - $180k · 0.2% - 0.35%',\n      description:\n        'Create fluid motion principles, brand identity assets, and polished launch visuals for major releases.',\n    },\n    {\n      id: 'prd-1',\n      title: 'Staff Technical Product Manager',\n      department: 'Product',\n      location: 'Remote',\n      type: 'Full-time',\n      level: 'Staff',\n      salary: '$180k - $230k · 0.3% - 0.5%',\n      description:\n        'Drive product roadmap for developer workflows, unbundled registry distribution, and monorepo orchestration.',\n    },\n    {\n      id: 'prd-2',\n      title: 'Product Operations Lead',\n      department: 'Product',\n      location: 'San Francisco, CA',\n      type: 'Full-time',\n      level: 'Senior',\n      salary: '$145k - $185k · 0.2% - 0.35%',\n      description: 'Manage release triage, community feature requests, and cross-team execution cadences.',\n    },\n    {\n      id: 'mkt-1',\n      title: 'Developer Advocate / Technical Writer',\n      department: 'Marketing',\n      location: 'Remote',\n      type: 'Full-time',\n      level: 'Mid-Senior',\n      salary: '$140k - $180k · 0.2% - 0.4%',\n      description:\n        'Author technical deep-dives, create interactive video tutorials, and engage with the open-source community.',\n    },\n    {\n      id: 'mkt-2',\n      title: 'Growth Marketing Lead',\n      department: 'Marketing',\n      location: 'London, UK',\n      type: 'Full-time',\n      level: 'Senior',\n      salary: '£105k - £135k · 0.2% - 0.4%',\n      description:\n        'Lead developer-focused growth experiments, SEO architecture, launch campaigns, and analytics instrumentation.',\n    },\n  ]\n\n  let selectedDepartment: string = $state('all')\n  let selectedLocation: string = $state('all')\n  let searchQuery = $state('')\n\n  const filteredJobs = $derived.by(() => {\n    const q = searchQuery.trim().toLowerCase()\n    return JOBS.filter((job) => {\n      const matchDept = selectedDepartment === 'all' || job.department === selectedDepartment\n      const matchLoc = selectedLocation === 'all' || job.location === selectedLocation\n      if (!matchDept || !matchLoc) return false\n      if (!q) return true\n      return (\n        job.title.toLowerCase().includes(q) ||\n        job.description.toLowerCase().includes(q) ||\n        job.department.toLowerCase().includes(q) ||\n        job.level.toLowerCase().includes(q) ||\n        job.location.toLowerCase().includes(q) ||\n        job.type.toLowerCase().includes(q) ||\n        job.salary.toLowerCase().includes(q)\n      )\n    })\n  })\n\n  const departmentGroups = $derived.by(() => {\n    const allDepts = ['Engineering', 'Design', 'Product', 'Marketing'] as const\n    const targetDepartments =\n      selectedDepartment === 'all' ? allDepts : allDepts.filter((dept) => dept === selectedDepartment)\n\n    return targetDepartments\n      .map((dept) => ({\n        name: dept,\n        jobs: filteredJobs.filter((job) => job.department === dept),\n      }))\n      .filter((group) => group.jobs.length > 0)\n  })\n\n  const isFiltered = $derived(\n    selectedDepartment !== 'all' || selectedLocation !== 'all' || searchQuery.trim() !== '',\n  )\n\n  function resetFilters() {\n    selectedDepartment = 'all'\n    selectedLocation = 'all'\n    searchQuery = ''\n  }\n</script>\n\n<section data-slot=\"careers-job-board\" class={cn('w-full space-y-12 py-6', className)}>\n  <!-- Hero / Header -->\n  <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n    <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 text-xs font-medium\">\n      <Briefcase class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n      We're hiring\n    </Badge>\n    <h1 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n      {title}\n    </h1>\n    <p class=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n      {subtitle}\n    </p>\n  </div>\n\n  <!-- Perks summary row -->\n  <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n    {#each PERKS as perk (perk.title)}\n      <div class=\"bg-card border-border flex flex-col gap-3 rounded-xl border p-4 shadow-xs\">\n        <div class=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-lg\">\n          <perk.icon class=\"size-4.5\" aria-hidden=\"true\" />\n        </div>\n        <div class=\"space-y-1\">\n          <p class=\"text-foreground text-sm font-semibold\">{perk.title}</p>\n          <p class=\"text-muted-foreground text-xs leading-relaxed\">{perk.description}</p>\n        </div>\n      </div>\n    {/each}\n  </div>\n\n  <!-- Filter Toolbar -->\n  <div class=\"bg-card border-border space-y-4 rounded-xl border p-4 shadow-xs\">\n    <div class=\"flex flex-wrap items-center gap-1.5\">\n      {#each DEPARTMENTS as dept (dept.id)}\n        <Button\n          variant={selectedDepartment === dept.id ? 'default' : 'outline'}\n          size=\"sm\"\n          class=\"h-8 rounded-lg text-xs\"\n          onclick={() => (selectedDepartment = dept.id)}\n        >\n          {dept.label}\n          <span\n            class={cn(\n              'ml-1.5 rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums',\n              selectedDepartment === dept.id\n                ? 'bg-primary-foreground/20 text-primary-foreground'\n                : 'bg-muted text-muted-foreground',\n            )}\n          >\n            {dept.count}\n          </span>\n        </Button>\n      {/each}\n    </div>\n\n    <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n      <div class=\"relative flex-1\">\n        <Search\n          class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n        <Input\n          bind:value={searchQuery}\n          placeholder=\"Search roles, technologies, or keywords...\"\n          class=\"pl-9 text-sm\"\n          aria-label=\"Search open positions\"\n        />\n      </div>\n\n      <div class=\"w-full shrink-0 sm:w-56\">\n        <Select value={selectedLocation} onValueChange={(v) => (selectedLocation = v)}>\n          <SelectTrigger class=\"w-full text-xs sm:text-sm\" aria-label=\"Filter by location\">\n            <SelectValue placeholder=\"All Locations\" />\n          </SelectTrigger>\n          <SelectContent>\n            {#each LOCATIONS as loc (loc.id)}\n              <SelectItem value={loc.id}>\n                {loc.label}\n              </SelectItem>\n            {/each}\n          </SelectContent>\n        </Select>\n      </div>\n\n      {#if isFiltered}\n        <Button variant=\"ghost\" size=\"sm\" class=\"text-muted-foreground hover:text-foreground text-xs\" onclick={resetFilters}>\n          Reset filters\n        </Button>\n      {/if}\n    </div>\n  </div>\n\n  <!-- Grouped Job Openings list -->\n  {#if departmentGroups.length > 0}\n    <div class=\"space-y-10\">\n      {#each departmentGroups as group (group.name)}\n        <div class=\"space-y-4\">\n          <div class=\"border-border flex items-center justify-between border-b pb-3\">\n            <div class=\"flex items-center gap-2.5\">\n              <h2 class=\"text-foreground text-lg font-semibold tracking-tight\">{group.name}</h2>\n              <Badge variant=\"secondary\" class=\"text-xs font-normal\">\n                {group.jobs.length} {group.jobs.length === 1 ? 'opening' : 'openings'}\n              </Badge>\n            </div>\n          </div>\n\n          <div class=\"space-y-3\">\n            {#each group.jobs as job (job.id)}\n              <article\n                class=\"group bg-card border-border hover:border-primary/40 relative flex flex-col justify-between gap-4 rounded-xl border p-5 shadow-xs transition-colors duration-150 hover:shadow-sm md:flex-row md:items-center\"\n              >\n                <div class=\"min-w-0 flex-1 space-y-2\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <h3\n                      class=\"group-hover:text-primary text-foreground text-base font-semibold tracking-tight transition-colors sm:text-lg\"\n                    >\n                      {job.title}\n                    </h3>\n                    <Badge variant=\"outline\" class=\"text-xs\">{job.level}</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground line-clamp-2 text-sm leading-relaxed\">\n                    {job.description}\n                  </p>\n                  <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-2 pt-1 text-xs\">\n                    <span class=\"inline-flex items-center gap-1.5\">\n                      <MapPin class=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                      {job.location}\n                    </span>\n                    <span class=\"inline-flex items-center gap-1.5\">\n                      <Briefcase class=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                      {job.type}\n                    </span>\n                    <span class=\"text-foreground inline-flex items-center gap-1.5 font-medium\">\n                      <Coins class=\"text-muted-foreground size-3.5 shrink-0\" aria-hidden=\"true\" />\n                      {job.salary}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"shrink-0 pt-2 md:pt-0\">\n                  <Button class=\"w-full gap-1.5 md:w-auto\" size=\"sm\">\n                    Apply now\n                    <ArrowRight class=\"size-3.5 transition-transform group-hover:translate-x-0.5\" aria-hidden=\"true\" />\n                  </Button>\n                </div>\n              </article>\n            {/each}\n          </div>\n        </div>\n      {/each}\n    </div>\n\n    <!-- Empty State -->\n  {:else}\n    <div\n      class=\"border-border flex flex-col items-center justify-center rounded-xl border border-dashed p-12 text-center\"\n    >\n      <div class=\"bg-muted text-muted-foreground mb-4 flex size-12 items-center justify-center rounded-full\">\n        <SearchX class=\"size-6\" aria-hidden=\"true\" />\n      </div>\n      <h3 class=\"text-foreground text-base font-semibold\">No matching positions found</h3>\n      <p class=\"text-muted-foreground mt-1 mb-4 max-w-sm text-sm leading-normal\">\n        We could not find any roles matching your current search or filters. Try adjusting your criteria.\n      </p>\n      <Button variant=\"outline\" size=\"sm\" onclick={resetFilters}>Clear all filters</Button>\n    </div>\n  {/if}\n\n  <!-- Don't see your role? CTA Card -->\n  <div\n    class=\"bg-card border-border flex flex-col items-start justify-between gap-6 rounded-2xl border p-6 shadow-xs sm:flex-row sm:items-center sm:p-8\"\n  >\n    <div class=\"max-w-xl space-y-1.5\">\n      <h3 class=\"text-foreground text-lg font-semibold tracking-tight\">Don't see your role?</h3>\n      <p class=\"text-muted-foreground text-sm leading-relaxed\">\n        We are always looking for curious, high-craft engineers, designers, and thinkers. Send us an open application\n        and tell us what you'd love to build with us.\n      </p>\n    </div>\n    <Button variant=\"outline\" class=\"shrink-0 gap-2\">\n      Send open application\n      <ArrowRight class=\"size-4\" aria-hidden=\"true\" />\n    </Button>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/careers-job-board/CareersJobBoard.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/select.json"
  ],
  "description": "Careers page and job openings board with perks overview, live department & location filtering, keyword search, grouped department openings, and general application CTA.",
  "categories": [
    "marketing"
  ]
}