Input Group

"use client"

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Text } from "@/components/text/text"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
import { Label } from "@/components/ui/label"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Hypatia · Publish",
  badge: "Draft",
  label: "Search result title",
  help: "Give your article a title that fits on a search results page. Aim for 60 characters or fewer.",
  caption: "Article / Oyster mushrooms on a kitchen counter",
  value: "A field guide to growing oyster mushrooms",
  count: "41/60",
} as const

/** An InputGroup with a live character counter for a search-result title. */
export default function InputGroupTitleCounter() {
  return (
    <div className="flex w-full items-center justify-center rounded-xl border bg-background px-3 py-8 text-foreground [--radius:1.125rem] dark:[--radius:1.125rem]">
      <Card className="w-full max-w-lg rounded-2xl shadow-none ring-0 sm:mx-3">
        <CardHeader className="flex items-center justify-between gap-4">
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <Badge variant="outline">{COPY.badge}</Badge>
        </CardHeader>
        <CardContent className="flex flex-col gap-2">
          <Label htmlFor="hypatia-title" className="block text-lg leading-7">
            {COPY.label}
          </Label>
          <Text id="hypatia-title-help" variant="muted" className="text-sm/6">
            {COPY.help}
          </Text>
          <InputGroup className="mt-2 h-12 rounded-lg">
            <InputGroupInput
              id="hypatia-title"
              aria-describedby="hypatia-title-help"
              defaultValue={COPY.value}
              maxLength={60}
              onInput={(event) => {
                const output = event.currentTarget
                  .closest("[data-slot=card]")
                  ?.querySelector("output")
                if (output)
                  output.textContent = `${event.currentTarget.value.length}/60`
              }}
            />
            <InputGroupAddon align="inline-end">
              <InputGroupText>
                <output aria-live="polite" className="font-mono text-xs">
                  {COPY.count}
                </output>
              </InputGroupText>
            </InputGroupAddon>
          </InputGroup>
          <p className="mt-2 text-xs text-muted-foreground">{COPY.caption}</p>
        </CardContent>
      </Card>
    </div>
  )
}

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 a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

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 }