{
  "schemaVersion": 1,
  "name": "marker",
  "useFor": "Use to mark time or state in a conversation or a log: separator for a day (Today), unread for where new messages start, border for a heading over a group. Put a lucide glyph in MarkerIcon and the words in MarkerContent.",
  "constraints": [
    "Caps or bold labels",
    "Colors other than muted ink and the blue",
    "Markers between every message"
  ],
  "documentation": "",
  "source": "Extrapolated from opencommerce (window bar and chart labels in the platform mono)",
  "exports": [
    "Marker",
    "MarkerContent",
    "MarkerIcon",
    "markerVariants"
  ],
  "client": false,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/marker",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/marker.md",
  "examples": [
    {
      "path": "examples/marker.tsx",
      "content": "import { Clock, Inbox } from \"lucide-react\";\n\nimport { Marker, MarkerContent, MarkerIcon } from \"@/components/ui/marker\";\n\nexport function Site() {\n  return (\n    <div className=\"mx-auto grid w-full max-w-xl gap-5\">\n      <Marker variant=\"separator\">\n        <MarkerContent>Today</MarkerContent>\n      </Marker>\n      <Marker variant=\"unread\">\n        <MarkerContent>3 new updates</MarkerContent>\n      </Marker>\n      <Marker variant=\"border\">\n        <MarkerIcon>\n          <Inbox strokeWidth={1.5} />\n        </MarkerIcon>\n        <MarkerContent>Order #A-10293</MarkerContent>\n      </Marker>\n      <Marker>\n        <MarkerIcon>\n          <Clock strokeWidth={1.5} />\n        </MarkerIcon>\n        <MarkerContent>\n          Checkout took 9s. <a href=\"#route\">See the route</a>\n        </MarkerContent>\n      </Marker>\n    </div>\n  );\n}\n",
      "exports": [
        "Site"
      ],
      "requires": [
        "marker"
      ],
      "packages": [
        "lucide-react"
      ],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/marker/Site"
        }
      ]
    }
  ],
  "type": "ui",
  "title": "Marker",
  "description": "A small mono label in a conversation or list: plain, centered between rules, ruled underneath, or the blue unread rule.",
  "surface": "site",
  "kinds": [],
  "requires": [
    "theme",
    "utils"
  ],
  "packages": [
    "@radix-ui/react-slot",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "components/ui/marker.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\n// A marker in a conversation or a list, in the site's small print (the window bar and the chart's axis labels; computed):\n// the 11.5px platform mono at 64 percent ink. `separator` centers it between two 9 percent rules (\"Today\"), `border`\n// rules it underneath, and `unread` is the blue rule where new messages begin.\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left font-mono text-bar leading-tight text-fg-muted [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [a]:underline [a]:underline-offset-3 [a]:hover:text-fg\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        separator: \"before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-line after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-line\",\n        border: \"border-b border-line pb-2\",\n        unread: \"text-fg-brand before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-brand after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-brand\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\nfunction Marker({ className, variant = \"default\", asChild = false, ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof markerVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"div\";\n  return <Comp data-slot=\"marker\" data-variant={variant} role={variant === \"default\" ? undefined : \"separator\"} className={cn(markerVariants({ variant }), className)} {...props} />;\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"marker-icon\" aria-hidden=\"true\" className={cn(\"inline-flex size-3.5 shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-3.5\", className)} {...props} />;\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"marker-content\" className={cn(\"min-w-0 break-words group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center group-data-[variant=unread]/marker:flex-none *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-fg\", className)} {...props} />;\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants };\n"
    }
  ]
}