banhaten 0.3.0 → 0.5.0

package/registry/components/inline-citations.css

@@ -0,0 +1,126 @@
+[data-slot="inline-citations"],
+[data-slot="citation-prose"] {
+  color: var(--bh-content-default);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-sm-regular-font-size);
+  font-weight: var(--bh-text-body-sm-regular-font-weight);
+  letter-spacing: var(--bh-text-body-sm-regular-letter-spacing);
+  line-height: var(--bh-text-body-sm-regular-line-height);
+  overflow-wrap: anywhere;
+}
+
+/* Numbered chip. Sits as a superscript in prose and flush in the list. */
+[data-slot="citation-mark"] {
+  align-items: center;
+  background-color: var(--bh-interactive-soft-default);
+  block-size: var(--bh-citation-mark-size);
+  border-radius: var(--bh-radius-sm-4);
+  color: var(--bh-content-subtle);
+  display: inline-flex;
+  flex: none;
+  font-size: var(--bh-text-body-3xs-semibold-font-size);
+  font-weight: var(--bh-text-body-3xs-semibold-font-weight);
+  justify-content: center;
+  letter-spacing: var(--bh-text-body-3xs-semibold-letter-spacing);
+  line-height: 1;
+  margin-inline: var(--bh-space-xxxs-1);
+  min-inline-size: var(--bh-citation-mark-size);
+  outline: none;
+  padding-inline: var(--bh-space-xxs-2);
+  transition: background-color var(--bh-duration-fast) var(--bh-easing-standard),
+    color var(--bh-duration-fast) var(--bh-easing-standard);
+  vertical-align: super;
+}
+
+a[data-slot="citation-mark"]:hover {
+  background-color: var(--bh-interactive-soft-hover);
+  color: var(--bh-content-default);
+}
+
+a[data-slot="citation-mark"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="citation-list"] {
+  border-block-start: var(--bh-border-width-default) solid var(--bh-border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: var(--bh-space-sm-6);
+  margin-block-start: var(--bh-space-xl-12);
+  padding-block-start: var(--bh-space-lg-10);
+}
+
+[data-slot="citation-item"] {
+  align-items: center;
+  border-radius: var(--bh-radius-sm-4);
+  color: var(--bh-content-subtle);
+  display: flex;
+  font-size: var(--bh-text-body-2xs-regular-font-size);
+  font-weight: var(--bh-text-body-2xs-regular-font-weight);
+  gap: var(--bh-space-sm-6);
+  letter-spacing: var(--bh-text-body-2xs-regular-letter-spacing);
+  line-height: var(--bh-text-body-2xs-regular-line-height);
+  min-inline-size: 0;
+  outline: none;
+}
+
+[data-slot="citation-item"]:focus-visible {
+  box-shadow: var(--elevation-component-focus-ring);
+}
+
+[data-slot="citation-item"] [data-slot="citation-mark"] {
+  margin-inline: 0;
+  vertical-align: baseline;
+}
+
+[data-slot="citation-item-label"] {
+  color: var(--bh-content-default);
+  flex: 0 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-slot="citation-item-separator"],
+[data-slot="citation-item-host"] {
+  color: var(--bh-content-subtle);
+  flex: none;
+  white-space: nowrap;
+}
+
+[data-slot="citation-item-host"] {
+  transition: color var(--bh-duration-fast) var(--bh-easing-standard);
+}
+
+/* Only rows that link react to hover; a source without a web address is text. */
+[data-slot="citation-item"][href]:hover [data-slot="citation-item-host"] {
+  color: var(--bh-content-default);
+}
+
+/* The external arrow only appears on hover and settles into place. */
+[data-slot="citation-item-arrow"] {
+  --citation-item-arrow-scale: 1;
+
+  block-size: var(--bh-space-lg-10);
+  color: var(--bh-content-subtle);
+  flex: none;
+  inline-size: var(--bh-space-lg-10);
+  margin-inline-start: calc(-1 * var(--bh-space-xxs-2));
+  opacity: var(--bh-opacity-0);
+  pointer-events: none;
+  transform: translateY(var(--bh-space-xxs-2))
+    scaleX(var(--citation-item-arrow-scale));
+  transition: opacity var(--bh-duration-fast) var(--bh-easing-standard),
+    transform var(--bh-duration-default) var(--bh-easing-standard);
+}
+
+[dir="rtl"] [data-slot="citation-item-arrow"] {
+  --citation-item-arrow-scale: -1;
+}
+
+[data-slot="citation-item"][href]:hover [data-slot="citation-item-arrow"],
+[data-slot="citation-item"][href]:focus-visible [data-slot="citation-item-arrow"] {
+  opacity: var(--bh-opacity-100);
+  transform: translateY(0) scaleX(var(--citation-item-arrow-scale));
+}

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-content.ts

@@ -1,107 +1,107 @@
-import type * as React from "react"
-
-type InputVisualState = "default" | "filled" | "error" | "disabled"
-type InputKind =
-  | "default"
-  | "shortcut"
-  | "add-on"
-  | "inline-add-on"
-  | "tags"
-  | "inline-tags"
-  | "trailing-dropdown"
-  | "leading-dropdown"
-  | "quantity"
-  | "quantity-2"
-  | "trailing-button"
-  | "leading-button"
-
-type InputTag = {
-  id?: string
-  label: React.ReactNode
-}
-
-const inputCopy = {
-  shortcut: "\u2318K",
-  shortcutKeys: ["Mod", "K"] as const,
-} as const
-
-function getInputPlaceholder({
-  placeholder,
-}: {
-  placeholder?: string
-}) {
-  return placeholder
-}
-
-function getInputHelperText({
-  errorMessage,
-  isInvalid,
-  message,
-}: {
-  errorMessage?: React.ReactNode
-  isInvalid: boolean
-  message?: React.ReactNode
-}) {
-  if (isInvalid) return errorMessage
-
-  return message
-}
-
-function getInputTags({
-  kind,
-  tags,
-}: {
-  kind: InputKind
-  tags?: InputTag[]
-}) {
-  const shouldShow = Boolean(tags?.length)
-
-  if (!shouldShow) {
-    return { inline: [], inside: [] }
-  }
-
-  if (kind === "tags") {
-    return {
-      inline: [],
-      inside: tags ?? [],
-    }
-  }
-
-  if (kind === "inline-tags") {
-    return {
-      inline: tags ?? [],
-      inside: [],
-    }
-  }
-
-  return { inline: [], inside: [] }
-}
-
-function getInputDefaultValue({
-  defaultValue,
-  isTagInput,
-  state,
-  value,
-  valueText,
-}: {
-  defaultValue?: string | number | readonly string[]
-  isTagInput: boolean
-  state: InputVisualState
-  value?: string | number | readonly string[]
-  valueText?: string
-}) {
-  if (value !== undefined || defaultValue !== undefined) return defaultValue
-  if (isTagInput) return undefined
-  if (state !== "filled") return undefined
-
-  return valueText
-}
-
-export {
-  getInputDefaultValue,
-  getInputHelperText,
-  getInputPlaceholder,
-  getInputTags,
-  inputCopy,
-}
-export type { InputKind, InputTag, InputVisualState }
+import type * as React from "react"
+
+type InputVisualState = "default" | "filled" | "error" | "disabled"
+type InputKind =
+  | "default"
+  | "shortcut"
+  | "add-on"
+  | "inline-add-on"
+  | "tags"
+  | "inline-tags"
+  | "trailing-dropdown"
+  | "leading-dropdown"
+  | "quantity"
+  | "quantity-2"
+  | "trailing-button"
+  | "leading-button"
+
+type InputTag = {
+  id?: string
+  label: React.ReactNode
+}
+
+const inputCopy = {
+  shortcut: "\u2318K",
+  shortcutKeys: ["Mod", "K"] as const,
+} as const
+
+function getInputPlaceholder({
+  placeholder,
+}: {
+  placeholder?: string
+}) {
+  return placeholder
+}
+
+function getInputHelperText({
+  errorMessage,
+  isInvalid,
+  message,
+}: {
+  errorMessage?: React.ReactNode
+  isInvalid: boolean
+  message?: React.ReactNode
+}) {
+  if (isInvalid) return errorMessage
+
+  return message
+}
+
+function getInputTags({
+  kind,
+  tags,
+}: {
+  kind: InputKind
+  tags?: InputTag[]
+}) {
+  const shouldShow = Boolean(tags?.length)
+
+  if (!shouldShow) {
+    return { inline: [], inside: [] }
+  }
+
+  if (kind === "tags") {
+    return {
+      inline: [],
+      inside: tags ?? [],
+    }
+  }
+
+  if (kind === "inline-tags") {
+    return {
+      inline: tags ?? [],
+      inside: [],
+    }
+  }
+
+  return { inline: [], inside: [] }
+}
+
+function getInputDefaultValue({
+  defaultValue,
+  isTagInput,
+  state,
+  value,
+  valueText,
+}: {
+  defaultValue?: string | number | readonly string[]
+  isTagInput: boolean
+  state: InputVisualState
+  value?: string | number | readonly string[]
+  valueText?: string
+}) {
+  if (value !== undefined || defaultValue !== undefined) return defaultValue
+  if (isTagInput) return undefined
+  if (state !== "filled") return undefined
+
+  return valueText
+}
+
+export {
+  getInputDefaultValue,
+  getInputHelperText,
+  getInputPlaceholder,
+  getInputTags,
+  inputCopy,
+}
+export type { InputKind, InputTag, InputVisualState }