37:T1a14,

import { Marker, MarkerContent, MarkerIcon } from "@/components/ui/marker"

const Demo = () => (
  <div className="flex max-w-480 flex-col gap-16">
    <Marker variant="separator">
      <MarkerContent>Today</MarkerContent>
    </Marker>
    <Marker variant="border" className="w-fit self-center">
      <MarkerIcon>
        <svg viewBox="0 0 12 12" fill="currentColor">
          <circle cx="6" cy="6" r="3" />
        </svg>
      </MarkerIcon>
      <MarkerContent>Unread messages</MarkerContent>
    </Marker>
  </div>
)

export default Demo

34:["$","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":"$37"}}],"$L38"]}] 39:T3678,

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"

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

const markerVariants = cva(
  "group/marker relative flex w-full items-center gap-8 text-caption-bold text-text-tertiary",
  {
    variants: {
      variant: {
        default: "",
        separator:
          "before:h-px before:flex-1 before:bg-divider after:h-px after:flex-1 after:bg-divider",
        border:
          "rounded-full bg-glass-background-control px-12 py-4 shadow-glass-control backdrop-glass-thin",
      },
    },
    defaultVariants: { variant: "default" },
  }
)

const Marker = ({
  className,
  variant = "default",
  render,
  ...props
}: useRender.ComponentProps<"div"> & VariantProps<typeof markerVariants>) =>
  useRender({
    defaultTagName: "div",
    props: mergeProps<"div">(
      { className: cn(markerVariants({ variant, className })) },
      props
    ),
    render,
    state: { slot: "marker", variant },
  })

const MarkerIcon = ({ className, ...props }: React.ComponentProps<"span">) => (
  <span
    data-slot="marker-icon"
    aria-hidden="true"
    className={cn("flex shrink-0 [&_svg]:size-12", className)}
    {...props}
  />
)

const MarkerContent = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    data-slot="marker-content"
    className={cn("min-w-0 wrap-break-word", className)}
    {...props}
  />
)

export { Marker, MarkerContent, MarkerIcon, markerVariants }

36:["$","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":"$39"}}],"$L3a"]}]

Installation

Usage