affora 0.1.0

package/src/patterns/persistentfeedback.tsx

@@ -0,0 +1,106 @@
+import type React from "react"
+import { useId, useState } from "react"
+
+export type PersistentFeedbackProps = {
+  confirmationCode?: string
+  onCommit?: (code: string) => void
+}
+
+/** Action feedback that remains in the document until it is superseded. */
+export const PersistentFeedback: React.FC<PersistentFeedbackProps> = ({
+  confirmationCode = "ORD-7788",
+  onCommit,
+}) => {
+  const [placed, setPlaced] = useState(false)
+  const [value, setValue] = useState("")
+  const [error, setError] = useState("")
+  const [confirmed, setConfirmed] = useState(false)
+  const statusId = useId()
+  const inputId = useId()
+  const errorId = useId()
+
+  const place = () => {
+    setPlaced(true)
+    setConfirmed(false)
+    setError("")
+  }
+
+  const confirm = (event: React.FormEvent) => {
+    event.preventDefault()
+    const entered = value.trim()
+    if (!placed) {
+      setError("Place the order first. The confirmation code will remain in the status below.")
+      return
+    }
+    if (entered !== confirmationCode) {
+      setError(`The code does not match. Enter ${confirmationCode}, shown in the persistent order status.`)
+      return
+    }
+    setError("")
+    setConfirmed(true)
+    onCommit?.(entered)
+  }
+
+  return (
+    <section className="apf-root" aria-labelledby={`${statusId}-title`}>
+      <style>{css}</style>
+      <header>
+        <h3 id={`${statusId}-title`}>Place order</h3>
+        <p>The result and confirmation code remain available after the action.</p>
+      </header>
+
+      <button type="button" className="apf-place" onClick={place}>Place order</button>
+
+      <output id={statusId} className="apf-result" aria-live="polite">
+        <strong>Order status</strong>
+        {placed ? (
+          <span>Order placed. Confirmation code: <code>{confirmationCode}</code>.</span>
+        ) : (
+          <span>No order placed yet.</span>
+        )}
+      </output>
+
+      <form className="apf-confirm" onSubmit={confirm} noValidate>
+        <label htmlFor={inputId}>Confirmation code</label>
+        <div>
+          <input
+            id={inputId}
+            value={value}
+            onChange={(event) => { setValue(event.target.value); setError(""); setConfirmed(false) }}
+            aria-invalid={error ? "true" : undefined}
+            aria-describedby={`${statusId}${error ? ` ${errorId}` : ""}`}
+            autoComplete="off"
+          />
+          <button type="submit">Confirm order</button>
+        </div>
+        {error && <p id={errorId} className="apf-error" role="alert">{error}</p>}
+      </form>
+
+      <output className="apf-status" aria-live="polite">
+        {confirmed ? `Confirmed order with code ${confirmationCode}.` : "Order not confirmed yet."}
+      </output>
+    </section>
+  )
+}
+
+export const css = `
+.apf-root { box-sizing: border-box; display: grid; gap: var(--gap); width: 100%; max-width: 34rem; padding: var(--pad-loose); color: var(--fg); background: var(--glass-bg, var(--surface)); border: 1px solid var(--glass-border, var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-family: var(--font); font-size: var(--text-base); line-height: var(--leading); }
+.apf-root * { box-sizing: border-box; }
+.apf-root h3 { margin: 0; font-family: var(--font-display); font-size: calc(var(--text-base) * 1.15); font-weight: var(--weight-display); letter-spacing: var(--tracking-tight); }
+.apf-root header p, .apf-status { margin: 0; color: var(--fg-muted); font-size: calc(var(--text-base) * 0.9); }
+.apf-root button { min-height: calc(var(--text-base) * 2.75); padding: var(--pad-tight) var(--pad); border-radius: var(--radius); font: inherit; font-weight: var(--weight-medium); cursor: pointer; }
+.apf-place { color: var(--accent-fg); background: var(--accent); border: 1px solid var(--accent); }
+.apf-result { display: grid; gap: calc(var(--gap) * 0.5); padding: var(--pad); color: var(--fg); background: var(--accent-weak); border: 1px solid var(--accent); border-radius: var(--radius); }
+.apf-result code { padding: calc(var(--pad-tight) * 0.25) calc(var(--pad-tight) * 0.5); color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: var(--weight-medium); }
+.apf-confirm { display: grid; gap: calc(var(--gap) * 0.5); }
+.apf-confirm > label { font-weight: var(--weight-medium); }
+.apf-confirm > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap); }
+.apf-confirm input { min-width: 0; min-height: calc(var(--text-base) * 2.75); padding: var(--pad-tight) var(--pad); color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); font: inherit; }
+.apf-confirm button { color: var(--accent); background: var(--bg); border: 1px solid var(--accent); }
+.apf-confirm input[aria-invalid='true'] { border-color: var(--danger); }
+.apf-error { margin: 0; padding: var(--pad-tight) var(--pad); color: var(--danger); background: var(--surface-2); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); font-size: calc(var(--text-base) * 0.9); }
+.apf-root input:focus-visible, .apf-root button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
+@media (max-width: 28rem) { .apf-confirm > div { grid-template-columns: 1fr; } }
+`
+
+export default PersistentFeedback

package/src/primitives/actionbutton.tsx

@@ -0,0 +1,64 @@
+import type React from "react"
+import { useId } from "react"
+
+type CommonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+  children: React.ReactNode
+  loading?: boolean
+  loadingLabel?: string
+}
+
+export type ActionButtonProps = CommonProps & (
+  | { tone?: "primary" | "secondary"; consequence?: never }
+  | { tone: "destructive"; consequence: string }
+)
+
+/** A named native action that keeps loading state and destructive consequences in text. */
+export const ActionButton: React.FC<ActionButtonProps> = ({
+  children,
+  tone = "primary",
+  consequence,
+  loading = false,
+  loadingLabel = "Working",
+  disabled,
+  type = "button",
+  className = "",
+  ...props
+}) => {
+  const consequenceId = useId()
+  const statusId = useId()
+  const describedBy = [props["aria-describedby"], consequence ? consequenceId : null, statusId].filter(Boolean).join(" ")
+
+  return (
+    <span className={`aab-root ${className}`}>
+      <style>{css}</style>
+      <button
+        {...props}
+        type={type}
+        className="aab-button"
+        data-tone={tone}
+        disabled={disabled || loading}
+        aria-busy={loading || undefined}
+        aria-describedby={describedBy}
+      >
+        <span>{children}</span>
+        <span id={statusId} className="aab-progress" role="status" aria-live="polite">
+          {loading ? `${loadingLabel}…` : ""}
+        </span>
+      </button>
+      {consequence && <small id={consequenceId} className="aab-consequence">{consequence}</small>}
+    </span>
+  )
+}
+
+export const css = `
+.aab-root { display: inline-grid; gap: calc(var(--gap) * 0.5); color: var(--fg); font-family: var(--font); font-size: var(--text-base); line-height: var(--leading); }
+.aab-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--pad-tight); min-height: calc(var(--text-base) * 2.75); padding: var(--pad-tight) var(--pad); color: var(--accent-fg); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); font: inherit; font-weight: var(--weight-medium); cursor: pointer; transition: opacity var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
+.aab-button[data-tone='secondary'] { color: var(--fg); background: var(--surface); border-color: var(--border-strong); }
+.aab-button[data-tone='destructive'] { color: var(--danger); background: var(--surface); border-color: var(--danger); }
+.aab-button:disabled { cursor: not-allowed; opacity: 0.68; }
+.aab-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
+.aab-progress:empty { display: none; }
+.aab-consequence { max-width: 32rem; color: var(--fg-muted); font-size: calc(var(--text-base) * 0.82); }
+`
+
+export default ActionButton

package/src/primitives/textfield.tsx

@@ -0,0 +1,57 @@
+import type React from "react"
+import { useId } from "react"
+
+export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "id"> & {
+  label: string
+  description?: string
+  constraint?: string
+  error?: string
+  id?: string
+}
+
+/** A native text field whose name, constraints, and remedy stay in the document. */
+export const TextField: React.FC<TextFieldProps> = ({
+  label,
+  description,
+  constraint,
+  error,
+  id,
+  className = "",
+  ...inputProps
+}) => {
+  const generatedId = useId()
+  const inputId = id || generatedId
+  const descriptionId = `${inputId}-description`
+  const constraintId = `${inputId}-constraint`
+  const errorId = `${inputId}-error`
+  const describedBy = [description && descriptionId, constraint && constraintId, error && errorId, inputProps["aria-describedby"]].filter(Boolean).join(" ")
+
+  return (
+    <span className={`atf-root ${className}`}>
+      <style>{css}</style>
+      <label htmlFor={inputId}>{label}</label>
+      {description && <small id={descriptionId} className="atf-description">{description}</small>}
+      {constraint && <small id={constraintId} className="atf-constraint">Requirement: {constraint}</small>}
+      <input
+        {...inputProps}
+        id={inputId}
+        className="atf-input"
+        aria-invalid={error ? "true" : inputProps["aria-invalid"]}
+        aria-describedby={describedBy || undefined}
+      />
+      {error && <small id={errorId} className="atf-error" role="alert">{error}</small>}
+    </span>
+  )
+}
+
+export const css = `
+.atf-root { display: grid; gap: calc(var(--gap) * 0.5); color: var(--fg); font-family: var(--font); font-size: var(--text-base); line-height: var(--leading); }
+.atf-root > label { font-weight: var(--weight-medium); }
+.atf-description, .atf-constraint { color: var(--fg-muted); font-size: calc(var(--text-base) * 0.86); }
+.atf-input { width: 100%; min-height: calc(var(--text-base) * 2.75); padding: var(--pad-tight) var(--pad); color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); font: inherit; }
+.atf-input[aria-invalid='true'] { border-color: var(--danger); }
+.atf-input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
+.atf-error { padding: var(--pad-tight) var(--pad); color: var(--danger); background: var(--surface-2); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); font-size: calc(var(--text-base) * 0.86); }
+`
+
+export default TextField