@twoux/ui 0.0.0-stage → 0.1.0

package/src/components/guide-cue.tsx

@@ -0,0 +1,273 @@
+/**
+ * GuideCue: a short guide of one to three popovers, each pointing at a real control. Pulled, never pushed.
+ * TwoUX composition on the @twoux/ui Popover (Radix Popover.Anchor with the target element as its virtual ref).
+ *  - Opens only when the person asks: a SetupChecklist Start, a Help menu entry, a HelpPanel link or a FeatureLabel
+ *    popover's "Show me". Never on page load, on a timer or on hover. This is the only in-product guide TwoUX allows.
+ *  - One to three steps, counted as text ("Step 2 of 3"). A step whose target is missing or hidden is skipped, so the
+ *    cue never points at nothing; if no step has a target, the guide does not open.
+ *  - The target gets the focus ring (outline in the focus colour) drawn above it. No dimmed overlay, no spotlight, no
+ *    beacon: the page stays usable, and nothing pulses (WCAG 2.3.3).
+ *  - Not modal: role="dialog" aria-modal="false", named by its heading, described by its body. Focus moves to the
+ *    heading on open, step changes are announced, Esc or Close ends it and focus returns to what started it.
+ *  - Back (outline), Next or Done (the single primary inside the cue) and Close (ghost icon button).
+ */
+"use client"
+
+import { X } from "lucide-react"
+import * as React from "react"
+import { createPortal } from "react-dom"
+import { cn } from "../lib/cn"
+import { Button } from "./button"
+import { Kbd } from "./kbd"
+import { Popover, PopoverAnchor, PopoverContent } from "./popover"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip"
+
+/* ---------------------------------------------------------------- types */
+
+/** Where a step points: a ref, a CSS selector (prefer a data attribute, e.g. '[data-guide="filters"]') or a function. */
+export type GuideTarget = React.RefObject<HTMLElement | null> | string | (() => HTMLElement | null | undefined)
+
+export type GuideStep = {
+  target: GuideTarget
+  /** Names what the person does here, sentence case: "Filter the list" */
+  title: string
+  /** One or two sentences: what the control does for them. */
+  body: React.ReactNode
+  /** Preferred side of the target. The cue flips when there is no room. */
+  side?: "top" | "right" | "bottom" | "left"
+  align?: "start" | "center" | "end"
+}
+
+export type GuideCueProps = {
+  /** One to three steps. More are dropped (with a warning in development): split the guide or write a help article. */
+  steps: GuideStep[]
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Called when the person presses Done on the last step (not on Close or Esc). */
+  onFinish?: () => void
+  /** Accessible name prefix for the step count and the live announcement, e.g. "Saved views guide". */
+  label?: string
+  /**
+   * Docs and design previews only: the cue is shown open without taking focus or scrolling, because nobody started it.
+   * In a product a guide opens only from something the person pressed; never set this there.
+   */
+  preview?: boolean
+  className?: string
+}
+
+export const GUIDE_MAX_STEPS = 3
+
+/* ---------------------------------------------------------------- helpers */
+
+function resolve(target: GuideTarget): HTMLElement | null {
+  if (typeof document === "undefined") return null
+  if (typeof target === "string") return document.querySelector<HTMLElement>(target)
+  if (typeof target === "function") return target() ?? null
+  return target.current
+}
+
+/** Present, laid out and not hidden from people: a cue never points at nothing. */
+export function isGuideTargetAvailable(el: HTMLElement | null): el is HTMLElement {
+  if (!el || !el.isConnected) return false
+  if (el.getClientRects().length === 0) return false
+  if (el.closest("[hidden],[inert],[aria-hidden='true']")) return false
+  const style = window.getComputedStyle(el)
+  return style.visibility !== "hidden"
+}
+
+const reducedMotion = () => typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+
+/** The focus ring drawn over the target, following it on scroll and resize. Never takes pointer events. */
+function TargetRing({ el }: { el: HTMLElement }) {
+  const [rect, setRect] = React.useState<DOMRect | null>(null)
+  React.useLayoutEffect(() => {
+    let frame = 0
+    const update = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => setRect(el.getBoundingClientRect()))
+    }
+    setRect(el.getBoundingClientRect())
+    const ro = new ResizeObserver(update)
+    ro.observe(el)
+    window.addEventListener("scroll", update, true)
+    window.addEventListener("resize", update)
+    return () => {
+      cancelAnimationFrame(frame)
+      ro.disconnect()
+      window.removeEventListener("scroll", update, true)
+      window.removeEventListener("resize", update)
+    }
+  }, [el])
+  if (!rect) return null
+  const radius = window.getComputedStyle(el).borderRadius
+  return createPortal(
+    <span
+      aria-hidden="true"
+      data-slot="guide-cue-ring"
+      className="pointer-events-none fixed top-(--gy) left-(--gx) z-40 h-(--gh) w-(--gw) rounded-(--gr) outline-2 outline-offset-2 outline-ring"
+      style={{ "--gx": `${rect.left}px`, "--gy": `${rect.top}px`, "--gw": `${rect.width}px`, "--gh": `${rect.height}px`, "--gr": radius || "0px" } as React.CSSProperties}
+    />,
+    document.body,
+  )
+}
+
+/* ---------------------------------------------------------------- component */
+
+export function GuideCue({ steps, open, onOpenChange, onFinish, label = "Guide", preview = false, className }: GuideCueProps) {
+  const id = React.useId()
+  const list = steps.slice(0, GUIDE_MAX_STEPS)
+
+  // Resolved once per opening: the steps whose target is there, with their elements.
+  const [live, setLive] = React.useState<{ step: GuideStep; el: HTMLElement }[]>([])
+  const [index, setIndex] = React.useState(0)
+  const [announce, setAnnounce] = React.useState("")
+  const returnTo = React.useRef<HTMLElement | null>(null)
+  const headingRef = React.useRef<HTMLHeadingElement>(null)
+  const nextRef = React.useRef<HTMLButtonElement>(null)
+  const moved = React.useRef(false)
+
+  const stepsKey = list.map((s) => s.title).join("|")
+  React.useLayoutEffect(() => {
+    if (!open) {
+      setLive([])
+      // Back to what started the guide, unless the person has already moved focus somewhere else on the page.
+      const back = returnTo.current
+      returnTo.current = null
+      if (back?.isConnected) {
+        requestAnimationFrame(() => {
+          const now = document.activeElement
+          if (!now || now === document.body) back.focus()
+        })
+      }
+      return
+    }
+    // Remember what started the guide before anything moves focus. A preview was started by nobody.
+    returnTo.current = !preview && document.activeElement instanceof HTMLElement ? document.activeElement : null
+    const found = list.flatMap((step) => { const el = resolve(step.target); return isGuideTargetAvailable(el) ? [{ step, el }] : [] })
+    if (found.length === 0) {
+      console.warn("GuideCue: no step has a visible target, so the guide did not open.")
+      onOpenChange(false)
+      return
+    }
+    setLive(found)
+    setIndex(0)
+    setAnnounce("")
+    moved.current = false
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, stepsKey])
+
+  const current = live[index]
+  const total = live.length
+  const last = index === total - 1
+
+  // Keep the target in view; respect reduced motion.
+  React.useEffect(() => {
+    if (!open || !current) return
+    // A preview opens in place: no scrolling until the person moves through the steps.
+    if (!preview || moved.current) current.el.scrollIntoView({ block: "nearest", inline: "nearest", behavior: reducedMotion() ? "auto" : "smooth" })
+    // Announce step changes only; on open, focus on the heading already reads the first step.
+    if (moved.current) setAnnounce(`${label}, step ${index + 1} of ${total}: ${current.step.title}`)
+    // On a step change, keep focus inside the cue: if the pressed button went away (Back on step 1), go to Next.
+    if (moved.current) {
+      requestAnimationFrame(() => {
+        const content = headingRef.current?.closest("[data-slot='guide-cue']")
+        if (!content?.contains(document.activeElement)) nextRef.current?.focus()
+      })
+    }
+  }, [open, current, index, total, label])
+
+  // A guide given more than three steps keeps the first three: split it, or write a help article instead.
+  React.useEffect(() => {
+    if (steps.length > GUIDE_MAX_STEPS) console.warn(`GuideCue: ${steps.length} steps given; only the first ${GUIDE_MAX_STEPS} are shown.`)
+  }, [steps.length])
+
+  const close = React.useCallback(() => onOpenChange(false), [onOpenChange])
+  const go = (to: number) => { moved.current = true; setIndex(to) }
+
+  if (!open || !current) return null
+  const { step, el } = current
+  const virtualRef = { current: el }
+
+  return (
+    <>
+      <TargetRing el={el} />
+      <Popover open onOpenChange={(o) => { if (!o) close() }}>
+        <PopoverAnchor virtualRef={virtualRef} />
+        <PopoverContent
+          data-slot="guide-cue"
+          side={step.side ?? "bottom"}
+          align={step.align ?? "start"}
+          sideOffset={8}
+          updatePositionStrategy="always"
+          aria-modal="false"
+          aria-labelledby={`${id}-title`}
+          aria-describedby={`${id}-body`}
+          // Focus goes to the heading, so the title is read first; it returns to what started the guide.
+          onOpenAutoFocus={(e) => { e.preventDefault(); if (!preview) headingRef.current?.focus() }}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          // Not modal: people can try the highlighted control without the guide closing.
+          onInteractOutside={(e) => e.preventDefault()}
+          className={cn("grid w-72 max-w-(--radix-popover-content-available-width) gap-2 text-base", className)}
+        >
+          <div className="flex items-start gap-2">
+            <h2 ref={headingRef} id={`${id}-title`} tabIndex={-1} className="min-w-0 flex-1 pt-0.5 text-base font-semibold text-ink outline-none">
+              {step.title}
+            </h2>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="icon-xs" aria-label="Close guide" onClick={close} className="-mt-0.5 -mr-1 text-ink-3">
+                  <X aria-hidden="true" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Close guide <Kbd>Esc</Kbd></TooltipContent>
+            </Tooltip>
+          </div>
+          <div id={`${id}-body`} className="text-ink-2">{step.body}</div>
+          <div className="flex flex-wrap items-center gap-2 pt-1">
+            {total > 1 && <span className="tabular flex-1 text-sm text-ink-2">Step {index + 1} of {total}</span>}
+            {total === 1 && <span className="flex-1" />}
+            {index > 0 && <Button variant="outline" size="sm" onClick={() => go(index - 1)}>Back</Button>}
+            <Button
+              ref={nextRef}
+              size="sm"
+              onClick={() => { if (last) { onFinish?.(); close() } else go(index + 1) }}
+            >
+              {last ? "Done" : "Next"}
+            </Button>
+          </div>
+          <span className="sr-only" aria-live="polite" aria-atomic="true">{announce}</span>
+        </PopoverContent>
+      </Popover>
+    </>
+  )
+}
+
+/* ---------------------------------------------------------------- hook */
+
+/**
+ * State for one guide. `start` is what a "Show me" or Start button calls; spread `cueProps` on GuideCue.
+ * `finished` turns true once Done is pressed on the last step, so the starting point can say so.
+ */
+export function useGuide(steps: GuideStep[], options: { onFinish?: () => void; label?: string; /** Docs and design previews only: start open, without taking focus. See GuideCue `preview`. */ preview?: boolean } = {}) {
+  const [open, setOpen] = React.useState(!!options.preview)
+  // Quiet only for the first, unrequested opening; once the person starts or closes it, it behaves normally.
+  const [quiet, setQuiet] = React.useState(!!options.preview)
+  const [finished, setFinished] = React.useState(false)
+  const start = React.useCallback(() => { setQuiet(false); setOpen(true) }, [])
+  // A guide given more than three steps keeps the first three: split it, or write a help article instead.
+  React.useEffect(() => {
+    if (steps.length > GUIDE_MAX_STEPS) console.warn(`GuideCue: ${steps.length} steps given; only the first ${GUIDE_MAX_STEPS} are shown.`)
+  }, [steps.length])
+
+  const close = React.useCallback(() => { setQuiet(false); setOpen(false) }, [])
+  const { onFinish, label } = options
+  const cueProps: GuideCueProps = {
+    steps,
+    open,
+    onOpenChange: (o) => { if (!o) setQuiet(false); setOpen(o) },
+    preview: quiet,
+    onFinish: () => { setFinished(true); onFinish?.() },
+    label,
+  }
+  return { open, finished, start, close, cueProps }
+}

package/src/components/inbox.tsx

@@ -0,0 +1,113 @@
+/**
+ * TwoUX composition: the one place for things that need the person. List and detail side by side,
+ * Inbox / Snoozed / Done tabs with counts, items that block an agent first ("Needs you"), J/K to move,
+ * E to mark done, ⇧H to snooze. Acting never leaves the Inbox; the next item opens after Done.
+ */
+import { Check, Clock } from "lucide-react"
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "./dropdown-menu"
+import { Tabs, TabsList, TabsTrigger } from "./tabs"
+
+export type InboxItem = { id: string; title: string; source: string; time: string; needsYou?: boolean; state: "inbox" | "snoozed" | "done"; snoozedUntil?: string }
+export const SNOOZE_TIMES = ["In an hour", "Tomorrow, 9:00", "Next week", "In a month"] as const
+
+export function Inbox({
+  items,
+  onDone,
+  onSnooze,
+  renderDetail,
+  className,
+}: {
+  items: InboxItem[]
+  onDone: (id: string) => void
+  onSnooze: (id: string, until: string) => void
+  renderDetail: (item: InboxItem) => React.ReactNode
+  className?: string
+}) {
+  const [tab, setTab] = React.useState<InboxItem["state"]>("inbox")
+  const list = items.filter((i) => i.state === tab).sort((a, b) => Number(!!b.needsYou) - Number(!!a.needsYou))
+  const [activeId, setActiveId] = React.useState<string | null>(list[0]?.id ?? null)
+  const [snoozeOpen, setSnoozeOpen] = React.useState(false)
+  const active = list.find((i) => i.id === activeId) ?? list[0] ?? null
+  const idx = active ? list.indexOf(active) : -1
+  const count = (s: InboxItem["state"]) => items.filter((i) => i.state === s).length
+  const listRef = React.useRef<HTMLUListElement>(null)
+
+  const next = () => list[idx + 1]?.id ?? list[idx - 1]?.id ?? null
+  const done = () => { if (!active) return; const n = next(); onDone(active.id); setActiveId(n) }
+  const snooze = (until: string) => { if (!active) return; const n = next(); onSnooze(active.id, until); setActiveId(n); setSnoozeOpen(false) }
+
+  const onKey = (e: React.KeyboardEvent) => {
+    if (e.metaKey || e.ctrlKey || e.altKey || (e.target as HTMLElement).closest("input, textarea")) return
+    const k = e.key.toLowerCase()
+    if (k === "j" || e.key === "ArrowDown") { e.preventDefault(); setActiveId(list[Math.min(list.length - 1, idx + 1)]?.id ?? null) }
+    else if (k === "k" || e.key === "ArrowUp") { e.preventDefault(); setActiveId(list[Math.max(0, idx - 1)]?.id ?? null) }
+    else if (k === "e" && tab !== "done") { e.preventDefault(); done() }
+    else if (k === "h" && e.shiftKey && tab === "inbox") { e.preventDefault(); setSnoozeOpen(true) }
+  }
+
+  return (
+    <div data-slot="inbox" className={cn("grid min-h-0 grid-cols-[minmax(0,320px)_minmax(0,1fr)] overflow-hidden rounded-sm border border-line bg-surface max-md:grid-cols-1", className)}>
+      <div className="flex min-h-0 flex-col border-r border-line max-md:border-r-0 max-md:border-b">
+        <Tabs value={tab} onValueChange={(v) => { setTab(v as InboxItem["state"]); setActiveId(null) }} className="px-3 pt-2">
+          <TabsList aria-label="Inbox views">
+            <TabsTrigger value="inbox" count={count("inbox")}>Inbox</TabsTrigger>
+            <TabsTrigger value="snoozed" count={count("snoozed")}>Snoozed</TabsTrigger>
+            <TabsTrigger value="done" count={count("done")}>Done</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        {list.length === 0 ? (
+          <p className="px-4 py-8 text-center text-base text-ink-2">{tab === "inbox" ? "You're all caught up." : tab === "snoozed" ? "Nothing snoozed." : "Nothing done yet."}</p>
+        ) : (
+          <ul ref={listRef} role="listbox" aria-label="Items" aria-activedescendant={active ? `inbox-${active.id}` : undefined} tabIndex={0} onKeyDown={onKey} className="min-h-0 flex-1 overflow-y-auto py-1 outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset">
+            {list.map((it) => (
+              <li
+                key={it.id}
+                id={`inbox-${it.id}`}
+                role="option"
+                aria-selected={active?.id === it.id}
+                onClick={() => setActiveId(it.id)}
+                className={cn("mx-1 grid cursor-default gap-0.5 rounded-xs px-2 py-2", active?.id === it.id ? "bg-selected" : "hover:bg-hover")}
+              >
+                <span className="flex items-center gap-2">
+                  <span className="min-w-0 flex-1 truncate text-base font-medium text-ink">{it.title}</span>
+                  <span className="tabular shrink-0 text-sm text-ink-3">{it.state === "snoozed" && it.snoozedUntil ? it.snoozedUntil : it.time}</span>
+                </span>
+                <span className="flex items-center gap-2">
+                  <span className="min-w-0 flex-1 truncate text-sm text-ink-2">{it.source}</span>
+                  {it.needsYou && it.state === "inbox" && <Badge variant="warning" dot>Needs you</Badge>}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+        <p className="border-t border-line px-3 py-2 text-xs text-ink-3">J K to move · E done · ⇧H snooze</p>
+      </div>
+      <div className="flex min-h-0 flex-col">
+        {active ? (
+          <>
+            <div className="flex items-start gap-2 border-b border-line px-4 py-2">
+              <h2 className="min-w-0 flex-1 pt-1 text-md font-semibold text-ink">{active.title}</h2>
+              {tab === "inbox" && (
+                <DropdownMenu open={snoozeOpen} onOpenChange={setSnoozeOpen}>
+                  <DropdownMenuTrigger asChild><Button variant="ghost" size="sm" shortcut="⇧H"><Clock />Snooze</Button></DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>Snooze until</DropdownMenuLabel>
+                    {SNOOZE_TIMES.map((t) => <DropdownMenuItem key={t} onSelect={() => snooze(t)}>{t}</DropdownMenuItem>)}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+              {tab !== "done" && <Button variant="outline" size="sm" shortcut="E" onClick={done}><Check />Done</Button>}
+            </div>
+            <div className="min-h-0 flex-1 overflow-y-auto p-4">{renderDetail(active)}</div>
+          </>
+        ) : (
+          <div className="grid flex-1 place-items-center p-8 text-base text-ink-3">Select an item to see it here.</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/input-group.tsx

@@ -0,0 +1,176 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "input-group" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - Compact 32px
+ *  - Light edge darkens on hover
+ */
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex w-full items-center rounded-sm border border-input bg-background shadow-xs hover:border-input-hover transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out) outline-none",
+        "h-8 min-w-0 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]:not(:focus-visible)]:border-destructive-edge",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-base font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-xs [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-base shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-xs px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-sm px-2.5 has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-xs p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-base text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

package/src/components/input.tsx

@@ -0,0 +1,26 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "input" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - Compact 32px, light edge that darkens on hover
+ *  - One size on every screen
+ */
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-sm border border-input bg-background px-2.5 py-1 text-base shadow-xs hover:border-input-hover transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out) outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-base file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:not-focus-visible:border-destructive-edge",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/components/kbd.tsx

@@ -0,0 +1,34 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "kbd" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - Inside a primary or destructive button, the key sits on a darker tint so white text keeps 4.5:1
+ */
+import { cn } from "../lib/cn"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs bg-muted px-1 font-sans text-sm font-medium text-muted-foreground select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=button][data-variant=default]_&]:bg-black/20 [[data-slot=button][data-variant=default]_&]:text-primary-foreground [[data-slot=button][data-variant=destructive]_&]:bg-black/20 [[data-slot=button][data-variant=destructive]_&]:text-white",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

package/src/components/label.tsx

@@ -0,0 +1,27 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "label" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes: shared changes only (imports, role tokens for light and dark, type scale).
+ */
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Label as LabelPrimitive } from "radix-ui"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }