{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "careers51",
  "title": "Filterable Open Roles List",
  "description": "A light editorial careers section with a monospace eyebrow over a hairline rule, a two-column heading, and a sticky culture photo with a gradient caption beside team filter pills and hairline job rows showing location, contract type, and a hover arrow.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/careers51/careers51.tsx",
      "content": "\"use client\";\n\nimport { ArrowUpRight } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { useState } from \"react\";\nimport { Badge23 } from \"@/components/beste/component/badge23\";\nimport { Button21 } from \"@/components/beste/component/button21\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Badge {\n  label: string;\n}\n\ninterface ActionLink {\n  label: string;\n  href: string;\n}\n\ninterface Role {\n  title: string;\n  team: string;\n  location: string;\n  type: string;\n  href: string;\n}\n\ninterface MediaImage {\n  src: string;\n  alt: string;\n}\n\ninterface Media {\n  image: MediaImage;\n  title?: string;\n  description?: string;\n}\n\ninterface Footnote {\n  label: string;\n  button: ActionLink;\n}\n\ninterface Careers51Props {\n  badge?: Badge;\n  heading?: string;\n  description?: string;\n  media?: Media;\n  allLabel?: string;\n  items?: Role[];\n  footnote?: Footnote;\n  className?: string;\n}\n\nexport const careers51Demo: Careers51Props = {\n  badge: { label: \"Careers\" },\n  heading: \"Open roles at Sirius\",\n  description:\n    \"We are building the surface care teams live in all day. Small teams, long horizons, and work you can point at a year from now.\",\n  media: {\n    image: {\n      src: \"https://images.unsplash.com/photo-1678380003465-e8b1b9e3877c?q=80&w=2228&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n      alt: \"A small team talking around a laptop\",\n    },\n    title: \"42 people, 9 countries\",\n    description:\n      \"Four-day summer weeks, a real budget for craft, and quiet hours the whole company keeps.\",\n  },\n  allLabel: \"All roles\",\n  items: [\n    {\n      title: \"Senior Product Designer\",\n      team: \"Design\",\n      location: \"Remote, Europe\",\n      type: \"Full-time\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Design Engineer\",\n      team: \"Design\",\n      location: \"Lisbon or remote\",\n      type: \"Full-time\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Backend Engineer, Records\",\n      team: \"Engineering\",\n      location: \"Remote, Europe\",\n      type: \"Full-time\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Infrastructure Engineer\",\n      team: \"Engineering\",\n      location: \"Berlin, hybrid\",\n      type: \"Full-time\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Implementation Specialist\",\n      team: \"Customer\",\n      location: \"Remote, Americas\",\n      type: \"Full-time\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Clinical Support Lead\",\n      team: \"Customer\",\n      location: \"London, hybrid\",\n      type: \"Contract\",\n      href: \"https://beste.co\",\n    },\n    {\n      title: \"Revenue Operations Analyst\",\n      team: \"Operations\",\n      location: \"Remote, Europe\",\n      type: \"Part-time\",\n      href: \"https://beste.co\",\n    },\n  ],\n  footnote: {\n    label: \"Nothing here fits, but you think you belong with us?\",\n    button: { label: \"Send an open application\", href: \"https://beste.co\" },\n  },\n};\n\nexport function Careers51({\n  badge,\n  heading,\n  description,\n  media,\n  allLabel,\n  items = [],\n  footnote,\n  className,\n}: Careers51Props) {\n  const [activeTeam, setActiveTeam] = useState(\"\");\n\n  const teams = Array.from(new Set(items.map((role) => role.team)));\n  const filtered = activeTeam ? items.filter((role) => role.team === activeTeam) : items;\n\n  const filters = [{ value: \"\", label: allLabel ?? \"\", count: items.length }].concat(\n    teams.map((team) => ({\n      value: team,\n      label: team,\n      count: items.filter((role) => role.team === team).length,\n    }))\n  );\n\n  return (\n    <section className={cn(\"bg-background py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-7xl px-4 md:px-6\">\n        {badge && <Badge23 label={badge.label} />}\n\n        <div className=\"mt-6 border-t border-border pt-8 md:pt-10\">\n          <div className=\"grid gap-6 md:grid-cols-2 md:gap-12\">\n            {heading && (\n              <h2 className=\"text-3xl font-light leading-[1.1] tracking-tight text-foreground md:text-5xl\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <div className=\"flex md:justify-end\">\n                <p className=\"max-w-md text-base leading-relaxed text-muted-foreground\">\n                  {description}\n                </p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div className=\"mt-10 grid gap-8 md:mt-14 lg:grid-cols-[minmax(0,22rem)_1fr] lg:gap-16\">\n          {media && (\n            <div className=\"relative flex h-64 flex-col justify-end overflow-hidden rounded-md sm:h-80 lg:sticky lg:top-24 lg:h-[32rem] lg:self-start\">\n              <img\n                className=\"absolute inset-0 size-full object-cover\"\n                src={media.image.src}\n                alt={media.image.alt}\n              />\n              {(media.title || media.description) && (\n                <>\n                  <div\n                    className=\"absolute inset-0 bg-gradient-to-t from-foreground/85 via-foreground/30 to-transparent\"\n                    aria-hidden=\"true\"\n                  />\n                  <div className=\"relative z-10 p-6 md:p-8\">\n                    {media.title && (\n                      <p className=\"text-xl font-light tracking-tight text-background md:text-2xl\">\n                        {media.title}\n                      </p>\n                    )}\n                    {media.description && (\n                      <p className=\"mt-2 text-sm leading-relaxed text-background/70\">\n                        {media.description}\n                      </p>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          )}\n\n          <div>\n            <div className=\"flex flex-wrap gap-2\">\n              {filters.map((filter, index) => {\n                const active = activeTeam === filter.value;\n                return (\n                  <button\n                    key={index}\n                    type=\"button\"\n                    onClick={() => setActiveTeam(filter.value)}\n                    aria-pressed={active}\n                    className={cn(\n                      \"flex cursor-pointer items-center gap-2 rounded-full border px-4 py-1.5 text-sm leading-none transition-colors\",\n                      active\n                        ? \"border-foreground bg-foreground text-background\"\n                        : \"border-border text-muted-foreground hover:border-foreground/40 hover:text-foreground\"\n                    )}\n                  >\n                    {filter.label}\n                    <span\n                      className={cn(active ? \"text-background/60\" : \"text-muted-foreground/70\")}\n                    >\n                      {filter.count}\n                    </span>\n                  </button>\n                );\n              })}\n            </div>\n\n            <div className=\"mt-8 border-t border-border\">\n              {filtered.map((role, index) => (\n                <Link\n                  key={index}\n                  href={role.href}\n                  className=\"group/careers51 flex flex-col gap-3 border-b border-border py-6 md:flex-row md:items-center md:justify-between md:gap-8\"\n                >\n                  <div className=\"flex flex-col gap-2\">\n                    <span className=\"text-xl font-light tracking-tight text-foreground transition-colors group-hover/careers51:text-primary md:text-2xl\">\n                      {role.title}\n                    </span>\n                    <span className=\"text-sm text-muted-foreground\">\n                      {role.team}\n                    </span>\n                  </div>\n\n                  <div className=\"flex items-center gap-6\">\n                    <div className=\"flex flex-col gap-1 text-sm text-muted-foreground md:items-end\">\n                      <span className=\"text-foreground\">{role.location}</span>\n                      <span>{role.type}</span>\n                    </div>\n                    <span className=\"flex size-9 shrink-0 items-center justify-center rounded-full border border-border transition-colors group-hover/careers51:border-foreground\">\n                      <ArrowUpRight\n                        className=\"size-4 text-muted-foreground transition-transform motion-safe:group-hover/careers51:translate-x-0.5 motion-safe:group-hover/careers51:-translate-y-0.5\"\n                        aria-hidden=\"true\"\n                      />\n                    </span>\n                  </div>\n                </Link>\n              ))}\n            </div>\n\n            {footnote && (\n              <div className=\"mt-10 flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between\">\n                <p className=\"max-w-md text-base leading-relaxed text-muted-foreground\">\n                  {footnote.label}\n                </p>\n                <Button21 asChild label={footnote.button.label} tone=\"outline\">\n                  <Link href={footnote.button.href} />\n                </Button21>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/careers51.tsx"
    },
    {
      "path": "registry-components/badge23/badge23.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype Tone = \"muted\" | \"foreground\" | \"primary\";\n\ninterface Badge23Props {\n  /** Eyebrow label (rendered uppercase) */\n  label: string;\n  /** Text/border tone */\n  tone?: Tone;\n  /** Additional classes merged onto the root */\n  className?: string;\n}\n\nconst toneStyles: Record<Tone, string> = {\n  muted: \"border-border text-muted-foreground\",\n  foreground: \"border-foreground/30 text-foreground\",\n  primary: \"border-primary/40 text-primary\",\n};\n\nexport const badge23Demo: Badge23Props = {\n  label: \"Product\",\n};\n\nexport function Badge23({ label, tone = \"muted\", className }: Badge23Props) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-md border bg-transparent px-2.5 py-1 font-mono text-sm uppercase leading-none tracking-widest\",\n        toneStyles[tone],\n        className\n      )}\n    >\n      {label}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/component/badge23.tsx"
    },
    {
      "path": "registry-components/button21/button21.tsx",
      "content": "\"use client\";\n\nimport type { LucideIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ntype Tone = \"primary\" | \"neutral\" | \"outline\";\n\ninterface Button21Props {\n  /** Button label */\n  label: string;\n  /**\n   * Compose the rendered element shadcn-style (radix asChild): your element\n   * (e.g. a router Link) becomes the root and the button content is injected\n   * as its children. Pass the element without children of its own.\n   */\n  asChild?: boolean;\n  /** The element to render when `asChild` is set (e.g. your framework's Link) */\n  children?: React.ReactElement;\n  /**\n   * Fallback link: renders a plain `<a>`. Prefer `asChild` with your\n   * framework's Link component for client-side navigation.\n   */\n  href?: string;\n  /** Optional trailing icon */\n  icon?: LucideIcon;\n  /** Surface tone: solid accent (default), soft neutral pill, or hairline outline */\n  tone?: Tone;\n  /** Click handler (used when there is no href and no asChild) */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Additional classes merged onto the button */\n  className?: string;\n}\n\nconst toneStyles: Record<Tone, string> = {\n  primary: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n  neutral: \"bg-muted text-foreground hover:bg-muted/70\",\n  outline: \"border border-border bg-transparent text-foreground hover:bg-muted\",\n};\n\nexport const button21Demo: Button21Props = {\n  label: \"Book a demo\",\n};\n\nexport function Button21({\n  label,\n  asChild = false,\n  children,\n  href,\n  icon: Icon,\n  tone = \"primary\",\n  onClick,\n  className,\n}: Button21Props) {\n  const classes = cn(\n    \"group/button21 h-auto w-fit gap-2 rounded-md px-5 py-2.5 text-sm font-medium tracking-tight transition-colors\",\n    toneStyles[tone],\n    className\n  );\n\n  const inner = (\n    <>\n      {label}\n      {Icon && (\n        <Icon className=\"size-4 transition-transform motion-safe:group-hover/button21:translate-x-0.5\" />\n      )}\n    </>\n  );\n\n  if (asChild && React.isValidElement(children)) {\n    return (\n      <Button asChild className={classes}>\n        {React.cloneElement(children, undefined, inner)}\n      </Button>\n    );\n  }\n\n  if (href) {\n    return (\n      <Button asChild className={classes}>\n        <a href={href}>{inner}</a>\n      </Button>\n    );\n  }\n\n  return (\n    <Button type=\"button\" className={classes} onClick={onClick}>\n      {inner}\n    </Button>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/component/button21.tsx"
    }
  ],
  "type": "registry:block"
}