38:I[58715,["/_next/static/immutable/chunks/0m-ud6d21nrwp.js","/_next/static/immutable/chunks/1h-b4l27lciz8.js","/_next/static/immutable/chunks/3y8cybr61yxvv.js","/_next/static/immutable/chunks/3z09e37y-pq2e.js","/_next/static/immutable/chunks/18osjo27s7nr6.js","/_next/static/immutable/chunks/30ak-g_h974fl.js","/_next/static/immutable/chunks/13faqfdblyus9.js","/_next/static/immutable/chunks/3zi-9vbl5dj8-.js","/_next/static/immutable/chunks/3eg8r_f-w3d55.js","/_next/static/immutable/chunks/00h5s_mfz_z0a.js","/_next/static/immutable/chunks/2mxj9ce8hnzxh.js","/_next/static/immutable/chunks/1z8d0-gq--ywx.js","/_next/static/immutable/chunks/1q0rzjij447sg.js","/_next/static/immutable/chunks/1ttnh9n-90xfo.js","/_next/static/immutable/chunks/1p8-tjdoxq_qp.js","/_next/static/immutable/chunks/2g3rkxj5q1792.js","/_next/static/immutable/chunks/2g_6jpjm9d1wy.js","/_next/static/immutable/chunks/0qlv5u6wqxxzu.js","/_next/static/immutable/chunks/1kdw4f9rs02un.js","/_next/static/immutable/chunks/0_o9-rxkbht7h.js","/_next/static/immutable/chunks/0pdq7om71x-ac.js","/_next/static/immutable/chunks/2q1bk6mdo1u5v.js","/_next/static/immutable/chunks/2wqm9b65qyei4.js","/_next/static/immutable/chunks/29f-fic049470.js"],"PreviewTabs"] 36:T7803,

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"

import { cn } from "@/lib/utils"

const Breadcrumb = (props: React.ComponentProps<"nav">) => (
  <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
)

const BreadcrumbList = ({
  className,
  ...props
}: React.ComponentProps<"ol">) => (
  <ol
    data-slot="breadcrumb-list"
    className={cn(
      "flex flex-wrap items-center gap-8 text-compact text-text-tertiary",
      className
    )}
    {...props}
  />
)

const BreadcrumbItem = ({
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    data-slot="breadcrumb-item"
    className={cn("inline-flex items-center gap-8", className)}
    {...props}
  />
)

const BreadcrumbLink = ({
  className,
  render,
  ...props
}: useRender.ComponentProps<"a">) =>
  useRender({
    defaultTagName: "a",
    props: mergeProps<"a">(
      {
        className: cn(
          "transition-colors ease-out hover:text-text-primary",
          className
        ),
      },
      props
    ),
    render,
    state: { slot: "breadcrumb-link" },
  })

const BreadcrumbPage = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    data-slot="breadcrumb-page"
    role="link"
    aria-disabled="true"
    aria-current="page"
    className={cn("text-compact-bold text-text-primary", className)}
    {...props}
  />
)

const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:size-12", className)}
    {...props}
  >
    {children ?? (
      <svg viewBox="0 0 12 12" fill="none">
        <path
          d="M4.5 2.5L8 6l-3.5 3.5"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    )}
  </li>
)

const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    data-slot="breadcrumb-ellipsis"
    role="presentation"
    aria-hidden="true"
    className={cn("flex size-20 items-center justify-center", className)}
    {...props}
  >
    <svg viewBox="0 0 16 16" fill="currentColor" className="size-16">
      <circle cx="3" cy="8" r="1.25" />
      <circle cx="8" cy="8" r="1.25" />
      <circle cx="13" cy="8" r="1.25" />
    </svg>
    <span className="sr-only">More</span>
  </span>
)

export {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
}

35:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$36"}}],"$L37"]}] 25:["$","$L38",null,{"glass":false,"preview":["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-8 text-compact text-text-tertiary","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-8","children":["$","a",null,{"data-slot":"breadcrumb-link","className":"transition-colors ease-out hover:text-text-primary","href":"#","children":"Home"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-12","children":["$","svg",null,{"viewBox":"0 0 12 12","fill":"none","children":["$","path",null,{"d":"M4.5 2.5L8 6l-3.5 3.5","stroke":"currentColor","strokeWidth":"1.5","strokeLinecap":"round","strokeLinejoin":"round"}]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-8","children":["$","span",null,{"data-slot":"breadcrumb-ellipsis","role":"presentation","aria-hidden":"true","className":"flex size-20 items-center justify-center","children":[["$","svg",null,{"viewBox":"0 0 16 16","fill":"currentColor","className":"size-16","children":[["$","circle",null,{"cx":"3","cy":"8","r":"1.25"}],["$","circle",null,{"cx":"8","cy":"8","r":"1.25"}],["$","circle",null,{"cx":"13","cy":"8","r":"1.25"}]]}],["$","span",null,{"className":"sr-only","children":"More"}]]}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-12","children":["$","svg",null,{"viewBox":"0 0 12 12","fill":"none","children":["$","path",null,{"d":"M4.5 2.5L8 6l-3.5 3.5","stroke":"currentColor","strokeWidth":"1.5","strokeLinecap":"round","strokeLinejoin":"round"}]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-8","children":["$","a",null,{"data-slot":"breadcrumb-link","className":"transition-colors ease-out hover:text-text-primary","href":"#","children":"iOS"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-12","children":["$","svg",null,{"viewBox":"0 0 12 12","fill":"none","children":["$","path",null,{"d":"M4.5 2.5L8 6l-3.5 3.5","stroke":"currentColor","strokeWidth":"1.5","strokeLinecap":"round","strokeLinejoin":"round"}]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-8","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"text-compact-bold text-text-primary","children":"Onboarding"}]}]]}]}],"code":"$L39"}]

Installation

Usage