banhaten 0.4.0 → 0.6.0

package/registry/components/inline-citations.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+import "./inline-citations.css"
+
+type CitationSource = {
+  /** Domain shown next to the label in the reference list. */
+  host?: string
+  label: string
+  /** Marker number. Defaults to the position in the list, starting at 1. */
+  n?: number
+  url: string
+}
+
+type InlineCitationsLabels = {
+  /** Accessible name for a marker, for example "Citation 1: Attention Is All You Need". */
+  citation: (n: number, label: string) => string
+  /** Accessible name of the reference list. */
+  sources: string
+}
+
+const defaultLabels: InlineCitationsLabels = {
+  citation: (n, label) => `Citation ${n}: ${label}`,
+  sources: "Sources",
+}
+
+type ResolvedSource = CitationSource & { n: number }
+
+function resolveSources(sources: readonly CitationSource[]): ResolvedSource[] {
+  return sources.map((source, index) => ({
+    ...source,
+    n: source.n ?? index + 1,
+  }))
+}
+
+/**
+ * Citation URLs often come from model output or search results, so only web
+ * addresses become links. Anything else, such as a `javascript:` URL that
+ * React 18 would still render, counts as no link at all. Relative links
+ * resolve against the page, which is always a web address, so they pass.
+ */
+function linkableUrl(url: string | undefined) {
+  if (!url) return undefined
+  try {
+    const { protocol } = new URL(url, "https://citation.invalid")
+    return protocol === "http:" || protocol === "https:" ? url : undefined
+  } catch {
+    return undefined
+  }
+}
+
+type CitationContextValue = {
+  labels: InlineCitationsLabels
+  sources: readonly ResolvedSource[]
+}
+
+/** The sources InlineCitations shares with the marks composed inside it. */
+const CitationContext = React.createContext<CitationContextValue | null>(null)
+
+type CitationMarkProps = Omit<React.ComponentProps<"a">, "children"> & {
+  /** Reference name revealed in a tooltip. Defaults to the source's label. */
+  label?: string
+  /** Marker number, matched against the `n` of the InlineCitations sources. */
+  n: number
+}
+
+/**
+ * Superscript numbered chip that links to its source. Inside InlineCitations it
+ * finds the source by number; elsewhere pass `href` and `label`. A mark with
+ * no web address to link to renders nothing rather than a dead chip.
+ */
+const CitationMark = React.forwardRef<HTMLAnchorElement, CitationMarkProps>(
+  function CitationMark(
+    { "aria-label": ariaLabel, className, href, label, n, ...props },
+    ref
+  ) {
+    const context = React.useContext(CitationContext)
+    const source = context?.sources.find((item) => item.n === n)
+    const url = linkableUrl(href ?? source?.url)
+    const name = label ?? source?.label
+    if (!url) return null
+
+    const labels = context?.labels ?? defaultLabels
+    const mark = (
+      <a
+        aria-label={ariaLabel ?? (name ? labels.citation(n, name) : undefined)}
+        data-slot="citation-mark"
+        href={url}
+        ref={ref}
+        rel="noreferrer"
+        target="_blank"
+        className={cn("no-underline", className)}
+        {...props}
+      >
+        {n}
+      </a>
+    )
+
+    if (!name) return mark
+
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{mark}</TooltipTrigger>
+          <TooltipContent
+            pointerPosition="bottom-center"
+            showShortcut={false}
+            variant="dark"
+          >
+            {name}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    )
+  }
+)
+
+type CitationProseProps = React.ComponentProps<"p">
+
+/** Paragraph of cited prose. Place CitationMark where a claim needs support. */
+function CitationProse({ className, ...props }: CitationProseProps) {
+  return (
+    <p
+      data-slot="citation-prose"
+      className={cn("m-0 min-w-0", className)}
+      {...props}
+    />
+  )
+}
+
+type CitationItemProps = Omit<React.ComponentProps<"a">, "children"> & {
+  host?: string
+  label: string
+  n: number
+}
+
+/**
+ * One row of the reference list: number, label, host, and an external arrow.
+ * Without a web address the row stays readable but is not a link.
+ */
+const CitationItem = React.forwardRef<HTMLAnchorElement, CitationItemProps>(
+  function CitationItem({ className, host, href, label, n, ...props }, ref) {
+    const url = linkableUrl(href)
+
+    return (
+      <a
+        data-slot="citation-item"
+        href={url}
+        ref={ref}
+        rel={url ? "noreferrer" : undefined}
+        target={url ? "_blank" : undefined}
+        className={cn("no-underline", className)}
+        {...props}
+      >
+        <span data-slot="citation-mark">{n}</span>
+        <span data-slot="citation-item-label" dir="auto">
+          {label}
+        </span>
+        {host ? (
+          <>
+            <span aria-hidden="true" data-slot="citation-item-separator">
+              ·
+            </span>
+            <span data-slot="citation-item-host" dir="ltr">
+              {host}
+            </span>
+          </>
+        ) : null}
+        {url ? (
+          <ArrowUpRightIcon
+            aria-hidden="true"
+            data-slot="citation-item-arrow"
+            strokeWidth="var(--bh-icon-stroke-180)"
+          />
+        ) : null}
+      </a>
+    )
+  }
+)
+
+type CitationListProps = React.ComponentProps<"nav"> & {
+  sources?: readonly CitationSource[]
+}
+
+/** Compact source list rendered under cited prose. */
+function CitationList({
+  "aria-label": ariaLabel = defaultLabels.sources,
+  children,
+  className,
+  sources = [],
+  ...props
+}: CitationListProps) {
+  return (
+    <nav
+      aria-label={ariaLabel}
+      data-slot="citation-list"
+      className={cn("min-w-0", className)}
+      {...props}
+    >
+      {resolveSources(sources).map((source) => (
+        <CitationItem
+          host={source.host}
+          href={source.url}
+          key={source.n}
+          label={source.label}
+          n={source.n}
+        />
+      ))}
+      {children}
+    </nav>
+  )
+}
+
+type InlineCitationsProps = Omit<React.ComponentProps<"div">, "children"> & {
+  /** Cited prose: CitationProse paragraphs with CitationMark markers. */
+  children?: React.ReactNode
+  labels?: Partial<InlineCitationsLabels>
+  /** Hides the reference list under the prose. */
+  showSources?: boolean
+  sources: readonly CitationSource[]
+}
+
+/**
+ * Prose with superscript citation chips plus a compact reference list. Marks
+ * inside it link straight to their numbered source and reveal its name on
+ * hover.
+ */
+const InlineCitations = React.forwardRef<HTMLDivElement, InlineCitationsProps>(
+  function InlineCitations(
+    {
+      children,
+      className,
+      labels: labelOverrides,
+      showSources = true,
+      sources,
+      ...props
+    },
+    ref
+  ) {
+    const context = React.useMemo<CitationContextValue>(
+      () => ({
+        labels: { ...defaultLabels, ...labelOverrides },
+        sources: resolveSources(sources),
+      }),
+      [labelOverrides, sources]
+    )
+
+    return (
+      <CitationContext.Provider value={context}>
+        <div
+          data-slot="inline-citations"
+          ref={ref}
+          className={cn("min-w-0 max-w-full", className)}
+          {...props}
+        >
+          {children}
+          {/* An empty list would only draw its divider. */}
+          {showSources && sources.length > 0 ? (
+            <CitationList aria-label={context.labels.sources} sources={sources} />
+          ) : null}
+        </div>
+      </CitationContext.Provider>
+    )
+  }
+)
+
+export {
+  CitationItem,
+  CitationList,
+  CitationMark,
+  CitationProse,
+  InlineCitations,
+}
+export type {
+  CitationItemProps,
+  CitationListProps,
+  CitationMarkProps,
+  CitationProseProps,
+  CitationSource,
+  InlineCitationsLabels,
+  InlineCitationsProps,
+}

package/registry/components/input-group.tsx

@@ -10,9 +10,9 @@ import { cn } from "@/lib/utils"
 const inputGroupVariants = cva(
   [
     "group/input-group relative flex w-[var(--bh-input-width)] max-w-full items-stretch overflow-hidden rounded-[var(--bh-input-radius)]",
-    "[--bh-input-border:var(--bh-border-input)] [--shadow-input:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),var(--shadow-component-default)]",
-    "bg-[var(--bh-interactive-input-default)] shadow-[var(--shadow-input)] transition-[background-color,box-shadow]",
-    "focus-within:shadow-[var(--shadow-input-focus-ring)] data-[disabled=true]:bg-[var(--bh-interactive-input-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+    "[--bh-input-border:var(--bh-border-input)] [--elevation-input:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),var(--elevation-component-default)]",
+    "bg-[var(--bh-interactive-input-default)] shadow-[var(--elevation-input)] transition-[background-color,box-shadow]",
+    "focus-within:shadow-[var(--elevation-input-focus-ring)] data-[disabled=true]:bg-[var(--bh-interactive-input-disabled)] data-[disabled=true]:shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
   ],
   {
     variants: {
@@ -23,7 +23,7 @@ const inputGroupVariants = cva(
       state: {
         default: "",
         error:
-          "[--bh-input-border:var(--bh-border-danger-strong)] focus-within:shadow-[var(--shadow-input)]",
+          "[--bh-input-border:var(--bh-border-danger-strong)] focus-within:shadow-[var(--elevation-input)]",
       },
       variant: {
         default: "",