Text

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"

// The paragraph under a Heading or Subheading, in a hero or a section
// header. No width of its own: give it one with a `max-w-*` class when the
// layout wants it. Inherits the surrounding ink, so it reads over art;
// muted steps it down on a flat ground.
const textVariants = cva("w-full min-w-0 text-pretty", {
  variants: {
    /**
     * The text color. `default` (the default) keeps the inherited color.
     * `muted` uses `muted-foreground`.
     */
    variant: {
      default: "",
      muted: "text-muted-foreground",
    },
    /**
     * The text size: `md` (the default) 16px with 28px lines, `lg` 18px
     * with 32px lines, the lead under a page headline.
     */
    size: {
      md: "text-base/7",
      lg: "text-lg/8",
    },
  },
  defaultVariants: { variant: "default", size: "md" },
})

/**
 * The paragraph under a heading, a `p` by default. For several paragraphs,
 * pass `render={<div />}` and put your own `p` elements inside.
 *
 * `size` sets the text: `md` (the default) 16px with 28px lines, `lg` 18px
 * with 32px lines for the lead under a page headline. `variant="muted"`
 * uses the muted text color; the default inherits the ink around it.
 */
function Text({
  className,
  variant = "default",
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof textVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "text", variant, size },
    props: mergeProps<"p">(
      { className: cn(textVariants({ variant, size }), className) },
      props
    ),
  })
}

export { Text }

import { Text } from "@/components/text/text"

const COPY = {
  md: "Plan the work, share the context and keep decisions close to the people making them.",
  lg: "Orbcore keeps the plan, the review and the handoff in one place, so your team ships without chasing each other.",
}

export default function TextDemo() {
  return (
    <div className="grid w-full max-w-2xl gap-8 p-6">
      <Text>{COPY.md}</Text>
      <Text size="lg" variant="muted">
        {COPY.lg}
      </Text>
    </div>
  )
}