Eyebrow

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 "cn"

// default is the mono label: 12px uppercase at weight 400. sans is a 14px
// semibold line in sentence case, a shade lighter than the heading.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 12px uppercase mono
     * label in `muted-foreground` with wide letter spacing. `sans` is a 14px
     * semibold line, cased as written, in `foreground` at 80% opacity.
     */
    variant: {
      default:
        "font-mono text-xs/5 font-normal tracking-widest text-muted-foreground uppercase",
      sans: "text-sm/7 font-semibold text-foreground/80",
    },
  },
  defaultVariants: { variant: "default" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Pass `render` to use another element.
 *
 * `default` is a 12px uppercase mono label in the muted color with wide
 * letter spacing. `sans` is a 14px semibold line, cased as written, in the
 * text color at 80% opacity.
 */
function Eyebrow({
  className,
  variant = "default",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

pnpm dlx shadcn add @01orbital/eyebrow

npx shadcn add @01orbital/eyebrow

yarn shadcn add @01orbital/eyebrow

bunx --bun shadcn add @01orbital/eyebrow