@twoux/ui 0.0.0-stage → 0.1.0

package/src/components/empty.tsx

@@ -0,0 +1,114 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "empty" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - Dashed container sized to the region it replaces, compact spacing
+ *  - 32px neutral icon tile, no illustration; adds the error tile for the error state
+ *  - The title is a real heading for screen readers (level 2 by default, set level to fit the page)
+ *  - Description at most 36 characters wide, readable grey
+ */
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-sm border border-dashed border-line-strong p-6 text-center text-balance md:p-10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-1 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-sm bg-muted text-ink-2 [&_svg:not([class*='size-'])]:size-4",
+        error: "flex size-8 shrink-0 items-center justify-center rounded-sm bg-bad-bg text-bad [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, level = 2, ...props }: React.ComponentProps<"div"> & { level?: 1 | 2 | 3 | 4 | 5 | 6 }) {
+  return (
+    <div
+      role="heading"
+      aria-level={level}
+      data-slot="empty-title"
+      className={cn("text-md font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "max-w-[36ch] text-base text-ink-2 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-3 text-base text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

package/src/components/feedback-prompt.tsx

@@ -0,0 +1,80 @@
+/**
+ * TwoUX composition: “Was this helpful?” with Yes / No, one vote, an optional follow-up, and every state
+ * (sending, sent, failed with Try again). One per page or panel.
+ */
+import { Check, ThumbsDown, ThumbsUp } from "lucide-react"
+import * as React from "react"
+import { Button } from "./button"
+import { Textarea } from "./textarea"
+
+type Vote = "yes" | "no"
+
+export function FeedbackPrompt({
+  question = "Was this helpful?",
+  description,
+  onVote,
+  onFollowUp,
+  privacy = "Don't include personal information about candidates.",
+}: {
+  question?: string
+  description?: string
+  /** Sends the vote. Reject to show the failed state. */
+  onVote: (vote: Vote) => Promise<void>
+  /** Optional: sends what they typed after voting. */
+  onFollowUp?: (text: string, vote: Vote) => Promise<void>
+  privacy?: string
+}) {
+  const [vote, setVote] = React.useState<Vote | null>(null)
+  const [state, setState] = React.useState<"idle" | "sending" | "sent" | "failed">("idle")
+  const [text, setText] = React.useState("")
+  const [followState, setFollowState] = React.useState<"idle" | "sending" | "sent" | "failed">("idle")
+  const id = React.useId()
+
+  const send = async (v: Vote) => {
+    setVote(v)
+    setState("sending")
+    try { await onVote(v); setState("sent") } catch { setState("failed") }
+  }
+  const sendFollow = async () => {
+    if (!vote || !onFollowUp) return
+    setFollowState("sending")
+    try { await onFollowUp(text, vote); setFollowState("sent") } catch { setFollowState("failed") }
+  }
+
+  return (
+    <section aria-labelledby={`${id}-q`} data-slot="feedback-prompt" className="grid gap-2">
+      <h3 id={`${id}-q`} className="text-base font-medium text-ink">{question}</h3>
+      {description && <p className="text-sm text-ink-2">{description}</p>}
+      {state === "sent" && vote ? (
+        <p role="status" className="flex items-center gap-control text-base text-ink-2">
+          <Check className="size-3.5 text-ok" aria-hidden="true" />
+          You answered {vote === "yes" ? "Yes" : "No"}. Thanks for telling us.
+        </p>
+      ) : (
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" loading={state === "sending" && vote === "yes"} disabled={state === "sending"} onClick={() => send("yes")}><ThumbsUp />Yes</Button>
+          <Button variant="outline" size="sm" loading={state === "sending" && vote === "no"} disabled={state === "sending"} onClick={() => send("no")}><ThumbsDown />No</Button>
+        </div>
+      )}
+      {state === "failed" && (
+        <p role="alert" className="flex items-center gap-2 text-sm text-bad">
+          Your answer wasn't sent.
+          <Button variant="ghost" size="xs" onClick={() => vote && send(vote)}>Try again</Button>
+        </p>
+      )}
+      {state === "sent" && onFollowUp && followState !== "sent" && (
+        <div className="grid gap-2">
+          <label htmlFor={`${id}-f`} className="text-sm font-medium text-ink">{vote === "no" ? "What was missing or wrong? (optional)" : "Anything else? (optional)"}</label>
+          <Textarea id={`${id}-f`} value={text} maxLength={500} onChange={(e) => setText(e.target.value)} aria-describedby={`${id}-p ${id}-c`} />
+          <div className="flex items-center justify-between gap-2 text-sm text-ink-3">
+            <span id={`${id}-p`}>{privacy}</span>
+            <span id={`${id}-c`} className="tabular">{text.length} / 500</span>
+          </div>
+          {followState === "failed" && <p role="alert" className="text-sm text-bad">Your comment wasn't sent. It's still here; try again.</p>}
+          <Button size="sm" variant="outline" className="justify-self-start" disabled={!text.trim()} loading={followState === "sending"} onClick={sendFollow}>Send</Button>
+        </div>
+      )}
+      {followState === "sent" && <p role="status" className="text-sm text-ink-2">Comment sent.</p>}
+    </section>
+  )
+}

package/src/components/field.tsx

@@ -0,0 +1,254 @@
+/**
+ * Generated from shadcn/ui new-york-v4 "field" by scripts/tailor-shadcn.mjs. Do not edit by hand.
+ * TwoUX changes:
+ *  - TwoUX spacing between fields is tighter (compact density)
+ *  - An invalid field keeps its label and value in normal text; only the edge and the message turn red (less alarming, still clear)
+ */
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+import { Label } from "./label"
+import { Separator } from "./separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-md",
+        "data-[variant=label]:text-base",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-3",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-sm has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-base leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-base leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-base group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-base font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

package/src/components/fields.tsx

@@ -0,0 +1,112 @@
+/**
+ * TwoUX compositions on shadcn Field, Label, Input, Checkbox, RadioGroup and Switch.
+ * They wire label, hint and error to the control (htmlFor, aria-describedby, aria-invalid) so every field is accessible by default.
+ */
+import { AlertCircle, CheckCircle2 } from "lucide-react"
+import * as React from "react"
+import { cn } from "../lib/cn"
+import { Checkbox } from "./checkbox"
+import { Field, FieldDescription, FieldLabel } from "./field"
+import { Input } from "./input"
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "./input-group"
+import { RadioGroupItem } from "./radio-group"
+import { Switch } from "./switch"
+
+type TextFieldProps = Omit<React.ComponentProps<"input">, "prefix"> & {
+	label: string
+	hint?: string
+	error?: string
+	/** Confirms the value meets the rules, e.g. a password. Shown in place of the hint. */
+	success?: string
+	optional?: boolean
+	/** Inside the field, before the value: £, a search icon. */
+	prefix?: React.ReactNode
+	/** Inside the field, after the value: a unit or a shortcut. */
+	suffix?: React.ReactNode
+}
+
+export function TextField({ label, hint, error, success, optional, required, prefix, suffix, id, className, ...props }: TextFieldProps) {
+	const auto = React.useId()
+	const fid = id ?? auto
+	const describedBy = error ? `${fid}-error` : success ? `${fid}-ok` : hint ? `${fid}-hint` : undefined
+	const control = { id: fid, required, "aria-invalid": error ? true : undefined, "aria-describedby": describedBy, ...props }
+	return (
+		<Field data-invalid={!!error || undefined} className={cn("gap-2", className)}>
+			<FieldLabel htmlFor={fid}>
+				{label}
+				{required && <span aria-hidden="true" className="text-bad">*</span>}
+				{optional && <span className="font-normal text-ink-3">(optional)</span>}
+			</FieldLabel>
+			{prefix || suffix ? (
+				<InputGroup>
+					{prefix && <InputGroupAddon><InputGroupText>{prefix}</InputGroupText></InputGroupAddon>}
+					<InputGroupInput {...control} />
+					{suffix && <InputGroupAddon align="inline-end"><InputGroupText>{suffix}</InputGroupText></InputGroupAddon>}
+				</InputGroup>
+			) : (
+				<Input {...control} />
+			)}
+			{error ? (
+				<p id={`${fid}-error`} className="flex items-start gap-control text-sm text-bad">
+					<AlertCircle className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+					{error}
+				</p>
+			) : success ? (
+				<p id={`${fid}-ok`} className="flex items-start gap-control text-sm text-ok">
+					<CheckCircle2 className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+					{success}
+				</p>
+			) : hint ? (
+				<FieldDescription id={`${fid}-hint`}>{hint}</FieldDescription>
+			) : null}
+		</Field>
+	)
+}
+
+function Choice({ id, label, hint, control }: { id: string; label: string; hint?: string; control: React.ReactNode }) {
+	return (
+		<div className="grid grid-cols-[16px_1fr] gap-x-2">
+			<span className="flex h-6 items-center">{control}</span>
+			<label htmlFor={id} className="flex min-h-6 cursor-pointer items-center text-base text-ink">{label}</label>
+			{hint && <span id={`${id}-hint`} className="col-start-2 text-sm text-ink-3">{hint}</span>}
+		</div>
+	)
+}
+
+export function CheckboxField({ id, label, hint, ...props }: React.ComponentProps<typeof Checkbox> & { id: string; label: string; hint?: string }) {
+	return <Choice id={id} label={label} hint={hint} control={<Checkbox id={id} aria-describedby={hint ? `${id}-hint` : undefined} {...props} />} />
+}
+
+export function RadioField({ id, value, label, hint, disabled }: { id: string; value: string; label: string; hint?: string; disabled?: boolean }) {
+	return <Choice id={id} label={label} hint={hint} control={<RadioGroupItem id={id} value={value} disabled={disabled} aria-describedby={hint ? `${id}-hint` : undefined} />} />
+}
+
+export function SwitchField({ id, label, hint, ...props }: React.ComponentProps<typeof Switch> & { id: string; label: string; hint?: string }) {
+	return (
+		<div className="flex items-start justify-between gap-6">
+			<div className="grid gap-0.5">
+				<label htmlFor={id} className="cursor-pointer text-base text-ink">{label}</label>
+				{hint && <span id={`${id}-hint`} className="text-sm text-ink-3">{hint}</span>}
+			</div>
+			<span className="flex h-5 items-center"><Switch id={id} aria-describedby={hint ? `${id}-hint` : undefined} {...props} /></span>
+		</div>
+	)
+}
+
+/** Shown above a form after a failed submit. Each link moves focus to its field. */
+export function ErrorSummary({ errors, className }: { errors: { field: string; message: string; href: string }[]; className?: string }) {
+	if (!errors.length) return null
+	return (
+		<div role="alert" tabIndex={-1} className={cn("grid gap-2 rounded-md border border-bad-line bg-bad-bg/60 px-3 py-2", className)}>
+			<p className="flex items-center gap-control text-base font-medium text-bad">
+				<AlertCircle className="size-3.5" aria-hidden="true" />
+				{errors.length === 1 ? "1 field needs fixing" : `${errors.length} fields need fixing`}
+			</p>
+			<ul className="grid gap-0.5 pl-5.5 text-sm">
+				{errors.map((e) => (
+					<li key={e.href}><a href={e.href} className="text-ink underline decoration-bad-line underline-offset-3 transition-colors duration-(--duration-fast) hover:decoration-bad"><span className="font-medium">{e.field}</span>: {e.message}</a></li>
+				))}
+			</ul>
+		</div>
+	)
+}