@meith/web 0.35.0 → 0.36.0

package/src/components/account/usercp-forms.tsx

@@ -3,6 +3,7 @@
 import { useActionState } from 'react'
 
 import type { SubscriptionMode } from '@meith/subscriptions'
+import { buttonVariants, controlVariants, surfaceVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
@@ -14,20 +15,18 @@ import {
   saveSignatureAction,
 } from '@/server/usercp-actions'
 
-import { FormError, PendingButton } from '../auth/form-controls'
+import { Field, FormError, PendingButton } from '../auth/form-controls'
 import { MarkdownEditor } from '../content/markdown-editor'
 import { CustomField, type CustomFieldInput } from '../profile/custom-field'
 import { type Copy, fromCopy } from '../shell/copy'
 
 export type { CustomFieldInput }
 
-const FIELD =
-  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD = controlVariants()
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
-const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
 export function ProfileForm({
   location,
@@ -48,12 +47,12 @@ export function ProfileForm({
     <form action={action} className={CARD}>
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.profile.location')}</span>
         <input name="location" defaultValue={location} className={FIELD} maxLength={100} />
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.profile.website')}</span>
         <input
           name="website"
@@ -64,7 +63,7 @@ export function ProfileForm({
         />
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.profile.bio')}</span>
         <textarea name="bio" defaultValue={bio} className={FIELD} rows={5} maxLength={1000} />
         <span className="text-xs text-muted-foreground">
@@ -103,7 +102,7 @@ export function DisplayGroupForm({
       </h2>
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.displayGroup.label')}</span>
         <select name="displayGroupId" defaultValue={selected} className={FIELD}>
           {choices.map((choice) => (
@@ -157,7 +156,7 @@ export function OptionsForm({
     <form action={action} className={CARD}>
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.options.timezone')}</span>
         <select name="timezone" defaultValue={timezone} className={FIELD}>
           {timezones.map((zone) => (
@@ -171,7 +170,7 @@ export function OptionsForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.options.locale')}</span>
         <select name="locale" defaultValue={locale} className={FIELD}>
           {locales.map((choice) => (
@@ -185,7 +184,7 @@ export function OptionsForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.options.postsPerPage')}</span>
         <input
           name="postsPerPage"
@@ -196,7 +195,7 @@ export function OptionsForm({
         />
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.options.threadsPerPage')}</span>
         <input
           name="threadsPerPage"
@@ -221,7 +220,7 @@ export function OptionsForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">
           {fromCopy(copy, 'accountForm.options.autoWatchOwnThreads')}
         </span>
@@ -237,7 +236,7 @@ export function OptionsForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">
           {fromCopy(copy, 'accountForm.options.autoWatchRepliedThreads')}
         </span>
@@ -276,40 +275,32 @@ export function PasswordForm({ minLength, copy }: { minLength: number; copy: Cop
       </h2>
       <FormError message={state.error} />
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'accountForm.password.current')}</span>
-        <input
-          type="password"
-          name="currentPassword"
-          className={FIELD}
-          autoComplete="current-password"
-          required
-        />
-      </label>
+      <Field
+        label={fromCopy(copy, 'accountForm.password.current')}
+        type="password"
+        name="currentPassword"
+        autoComplete="current-password"
+        required
+        id="password-currentPassword"
+      />
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'accountForm.password.new')}</span>
-        <input
-          type="password"
-          name="newPassword"
-          className={FIELD}
-          autoComplete="new-password"
-          minLength={minLength}
-          required
-        />
-      </label>
+      <Field
+        label={fromCopy(copy, 'accountForm.password.new')}
+        type="password"
+        name="newPassword"
+        autoComplete="new-password"
+        minLength={minLength}
+        required
+      />
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'accountForm.password.confirm')}</span>
-        <input
-          type="password"
-          name="confirmPassword"
-          className={FIELD}
-          autoComplete="new-password"
-          minLength={minLength}
-          required
-        />
-      </label>
+      <Field
+        label={fromCopy(copy, 'accountForm.password.confirm')}
+        type="password"
+        name="confirmPassword"
+        autoComplete="new-password"
+        minLength={minLength}
+        required
+      />
 
       <p className="text-xs text-muted-foreground">{fromCopy(copy, 'accountForm.password.note')}</p>
 
@@ -338,18 +329,16 @@ export function EmailForm({ email, copy }: { email: string; copy: Copy }) {
         {copy['accountForm.email.currentTail']}
       </p>
 
-      <label className="flex flex-col gap-1 text-sm">
-        <span className="font-medium">{fromCopy(copy, 'accountForm.password.current')}</span>
-        <input
-          type="password"
-          name="currentPassword"
-          className={FIELD}
-          autoComplete="current-password"
-          required
-        />
-      </label>
+      <Field
+        label={fromCopy(copy, 'accountForm.password.current')}
+        type="password"
+        name="currentPassword"
+        autoComplete="current-password"
+        required
+        id="email-currentPassword"
+      />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'accountForm.email.new')}</span>
         <input type="email" name="newEmail" className={FIELD} autoComplete="email" required />
       </label>

package/src/components/admin/admin-forms.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, cn, controlVariants, PageTitle, surfaceVariants } from '@meith/ui'
+
 import {
   adminAbandonSecondFactorAction,
   adminSignInAction,
@@ -30,9 +32,9 @@ export function AdminSignInForm({
   return (
     <form
       action={action}
-      className="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-card p-6"
+      className={cn(surfaceVariants({ padded: true }), 'w-full max-w-md gap-6 p-6 sm:p-8')}
     >
-      <h1 className="text-xl font-semibold tracking-tight">{fromCopy(copy, 'adminPanel.title')}</h1>
+      <PageTitle className="sm:text-2xl">{fromCopy(copy, 'adminPanel.title')}</PageTitle>
 
       <p className="text-sm text-muted-foreground">
         {reason === 'reauth'
@@ -52,14 +54,11 @@ export function AdminSignInForm({
           name="password"
           autoComplete="current-password"
           required
-          className="h-10 rounded-md border border-input bg-background px-3 text-sm outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40"
+          className={controlVariants()}
         />
       </label>
 
-      <PendingButton
-        showWorking
-        className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-      >
+      <PendingButton showWorking className={buttonVariants({ variant: 'primary' })}>
         {fromCopy(copy, 'adminPanel.enter')}
       </PendingButton>
 
@@ -80,10 +79,8 @@ export function AdminSecondFactorForm({
   const [state, action] = useActionState(adminVerifySecondFactorAction, EMPTY_STATE)
 
   return (
-    <div className="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-card p-6">
-      <h1 className="text-xl font-semibold tracking-tight">
-        {fromCopy(copy, 'adminPanel.twoFactor.title')}
-      </h1>
+    <div className={cn(surfaceVariants({ padded: true }), 'w-full max-w-md gap-6 p-6 sm:p-8')}>
+      <PageTitle className="sm:text-2xl">{fromCopy(copy, 'adminPanel.twoFactor.title')}</PageTitle>
 
       <p className="text-sm text-muted-foreground">{fromCopy(copy, 'adminPanel.twoFactor.lede')}</p>
 
@@ -101,10 +98,7 @@ export function AdminSecondFactorForm({
           recovery={otpRecoveryFromCopy(copy)}
         />
 
-        <PendingButton
-          showWorking
-          className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-        >
+        <PendingButton showWorking className={buttonVariants({ variant: 'primary' })}>
           {fromCopy(copy, 'adminPanel.twoFactor.submit')}
         </PendingButton>
       </form>
@@ -125,10 +119,25 @@ export function AdminSignOutForm({ copy }: { copy: Copy }) {
   return (
     <form action={adminSignOutAction}>
       <PendingButton
-        showWorking
-        className="text-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        title={fromCopy(copy, 'adminPanel.leave')}
+        className={cn(
+          buttonVariants({ variant: 'ghost', size: 'icon' }),
+          'size-11 sm:w-auto sm:px-3',
+        )}
       >
-        {fromCopy(copy, 'adminPanel.leave')}
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-5 sm:hidden"
+        >
+          <path d="M9 5H5v14h4M14 8l4 4-4 4M9 12h9" />
+        </svg>
+        <span className="sr-only sm:not-sr-only">{fromCopy(copy, 'adminPanel.leave')}</span>
       </PendingButton>
     </form>
   )

package/src/components/admin/form-bits.tsx

@@ -1,7 +1,6 @@
-import { Alert, AlertDescription } from '@meith/ui'
+import { Alert, AlertDescription, controlVariants } from '@meith/ui'
 
-export const INPUT =
-  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+export const INPUT = controlVariants()
 
 export function Saved({ when = true, children }: { when?: boolean; children: React.ReactNode }) {
   if (!when) return null

package/src/components/admin/mail-test-card.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants } from '@meith/ui'
+
 import { PANEL_CARD } from '@/components/shell/panel-list'
 import { EMPTY_STATE, type FormState } from '@/server/auth-form-state'
 import { sendTestMailAction } from '@/server/mail-test-actions'
@@ -69,7 +71,7 @@ export function MailTestCard({
         <div>
           <PendingButton
             disabled={pending || !sends}
-            className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-60"
+            className={buttonVariants({ variant: 'primary', size: 'default' })}
           >
             {pending
               ? fromCopy(copy, 'adminPanel.mail.sending')

package/src/components/admin/theme-forms.tsx

@@ -2,7 +2,7 @@
 
 import { useActionState, useEffect, useState } from 'react'
 
-import { textLinkVariants } from '@meith/ui'
+import { buttonVariants, textLinkVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import {
@@ -42,8 +42,7 @@ import { ThemePreview, ValidatedSample } from './theme-preview'
 const INPUT =
   'w-full rounded-md border border-input bg-card px-3 py-2 font-mono text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
-const GHOST_BUTTON =
-  'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const GHOST_BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
 
 const LINK = `${textLinkVariants({ tone: 'inherit', size: 'xs' })} focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`
 
@@ -437,7 +436,7 @@ export function ThemeEditorForm({
             )
           })}
 
-          <label className="flex flex-col gap-1 text-sm">
+          <label className="flex min-w-0 flex-col gap-2 text-sm">
             <span className="font-medium">{fromCopy(copy, 'adminTheme.css.label')}</span>
             <textarea
               name="customCss"
@@ -552,7 +551,7 @@ export function ImportThemeForm({ themeKey, copy }: { themeKey: string; copy: Co
       <Saved when={state.notice === 'imported'}>{fromCopy(copy, 'adminTheme.import.done')}</Saved>
       <input type="hidden" name="key" value={themeKey} />
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'adminTheme.import.label')}</span>
         <textarea name="document" rows={8} className={INPUT} required />
         <span className="text-xs text-muted-foreground">

package/src/components/auth/form-controls.tsx

@@ -5,6 +5,7 @@ import { useFormStatus } from 'react-dom'
 
 import { Alert, AlertDescription, AlertTitle, cn, Input, Field as UiField } from '@meith/ui'
 import { Button } from '@meith/ui/button'
+import { PasswordInput } from '@meith/ui/password-input'
 
 import { fromCopy, useCopy } from '../shell/copy'
 
@@ -115,6 +116,15 @@ export function Field({
   error,
   id,
 }: FieldProps) {
+  const copy = useCopy()
+  const inputProps = {
+    required,
+    ...(autoComplete === undefined ? {} : { autoComplete }),
+    ...(defaultValue === undefined ? {} : { defaultValue }),
+    ...(minLength === undefined ? {} : { minLength }),
+    ...(maxLength === undefined ? {} : { maxLength }),
+  }
+
   return (
     <UiField
       name={name}
@@ -123,17 +133,18 @@ export function Field({
       {...(id === undefined ? {} : { id })}
       {...(hint === undefined ? {} : { description: hint })}
     >
-      {(control) => (
-        <Input
-          {...control}
-          type={type}
-          required={required}
-          {...(autoComplete === undefined ? {} : { autoComplete })}
-          {...(defaultValue === undefined ? {} : { defaultValue })}
-          {...(minLength === undefined ? {} : { minLength })}
-          {...(maxLength === undefined ? {} : { maxLength })}
-        />
-      )}
+      {(control) =>
+        type === 'password' ? (
+          <PasswordInput
+            {...control}
+            {...inputProps}
+            showLabel={fromCopy(copy, 'form.showPassword')}
+            hideLabel={fromCopy(copy, 'form.hidePassword')}
+          />
+        ) : (
+          <Input {...control} {...inputProps} type={type} />
+        )
+      }
     </UiField>
   )
 }

package/src/components/content/edit-post-form.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react'
 import { useActionState } from 'react'
 
 import type { UploadLimits } from '@meith/attachments/limits'
+import { buttonVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { deletePostAction, editPostAction, restorePostAction } from '@/server/content-actions'
@@ -131,7 +132,7 @@ export function EditPostForm({
           name="intent"
           value="preview"
           showWorking
-          className="inline-flex h-10 items-center justify-center rounded-md border border-border px-4 text-sm font-medium transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'outline', size: 'default' })}
         >
           {fromCopy(copy, 'composer.preview')}
         </PendingButton>
@@ -160,7 +161,7 @@ export function DeletePostForm({
       <div>
         <PendingButton
           showWorking
-          className="inline-flex h-10 items-center justify-center rounded-md border border-destructive/40 px-4 text-sm font-medium text-destructive transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'destructive', size: 'default' })}
         >
           {fromCopy(copy, 'composer.edit.delete')}
         </PendingButton>

package/src/components/content/new-thread-form.tsx

@@ -6,7 +6,7 @@ import { useActionState, useEffect, useState } from 'react'
 import type { UploadLimits } from '@meith/attachments/limits'
 import type { Draft } from '@meith/drafts'
 import { POLL_OPTION_MAX } from '@meith/polls/limits'
-import { buttonVariants, Disclosure } from '@meith/ui'
+import { buttonVariants, controlVariants, Disclosure } from '@meith/ui'
 
 import type { PollDraftValues } from '@/server/auth-form-state'
 import { EMPTY_STATE } from '@/server/auth-form-state'
@@ -128,7 +128,7 @@ export function NewThreadForm({
           <select
             name="prefixId"
             defaultValue={state.values?.prefixId ?? draft?.prefixId?.toString() ?? ''}
-            className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            className={controlVariants()}
           >
             <option value="">
               {requiresPrefix
@@ -183,7 +183,7 @@ export function NewThreadForm({
               min={0}
               step={1}
               defaultValue={pollDraft?.maxOptions ?? '1'}
-              className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              className={controlVariants()}
             />
             <span className="text-xs text-muted-foreground">
               {fromCopy(copy, 'composer.newThread.pollChoicesHint')}
@@ -215,7 +215,7 @@ export function NewThreadForm({
               type="datetime-local"
               name="pollClosesAt"
               defaultValue={pollDraft?.closesAt ?? ''}
-              className="h-10 rounded-md border border-input bg-card px-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+              className={controlVariants()}
             />
             <span className="text-xs text-muted-foreground">
               {fromCopy(copy, 'pollEdit.closesAtHint')}

package/src/components/messages/message-forms.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, controlVariants, surfaceVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { messageBulkAction, sendMessageAction } from '@/server/message-actions'
 
@@ -11,16 +13,13 @@ import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 import { RecipientField } from './recipient-field'
 
-const FIELD =
-  'w-full rounded-md border border-input bg-card px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const FIELD = controlVariants()
 
-const BUTTON =
-  'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'primary', size: 'default' })
 
-const SECONDARY =
-  'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const SECONDARY = buttonVariants({ variant: 'outline', size: 'sm' })
 
-const CARD = 'flex flex-col gap-4 rounded-lg border border-border bg-card p-5'
+const CARD = surfaceVariants({ padded: true })
 
 export function ComposeForm({
   to,
@@ -44,7 +43,7 @@ export function ComposeForm({
       <FormError message={state.error} />
       {replyToId === null ? null : <input type="hidden" name="replyTo" value={replyToId} />}
 
-      <label htmlFor="message-to" className="flex flex-col gap-1 text-sm">
+      <label htmlFor="message-to" className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'messageForm.to')}</span>
         <RecipientField
           id="message-to"
@@ -58,7 +57,7 @@ export function ComposeForm({
         </span>
       </label>
 
-      <label htmlFor="message-bcc" className="flex flex-col gap-1 text-sm">
+      <label htmlFor="message-bcc" className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'messageForm.bcc')}</span>
         <RecipientField
           id="message-bcc"
@@ -71,7 +70,7 @@ export function ComposeForm({
         </span>
       </label>
 
-      <label className="flex flex-col gap-1 text-sm">
+      <label className="flex min-w-0 flex-col gap-2 text-sm">
         <span className="font-medium">{fromCopy(copy, 'messageForm.subject')}</span>
         <input
           name="subject"

package/src/components/moderation/inline-moderation-form.tsx

@@ -2,6 +2,8 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants } from '@meith/ui'
+
 import { BOARD_MEASURE } from '@/components/shell/measure'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { inlineModerateAction } from '@/server/inline-moderation-actions'
@@ -11,8 +13,7 @@ import { FormError, PendingButton } from '../auth/form-controls'
 import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 
-const BUTTON =
-  'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
 
 export interface InlineMoveOption {
   readonly id: number

package/src/components/moderation/queue-form.tsx

@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { TextLink } from '@meith/ui'
+import { buttonVariants, TextLink } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { moderateQueueAction } from '@/server/moderation-actions'
@@ -74,14 +74,14 @@ export function QueueForm({ rows, copy }: { rows: readonly QueueFormRow[]; copy:
         <PendingButton
           name="decision"
           value="approve"
-          className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'primary', size: 'default' })}
         >
           {fromCopy(copy, 'moderationForm.queue.approve')}
         </PendingButton>
         <PendingButton
           name="decision"
           value="reject"
-          className="inline-flex h-10 items-center justify-center rounded-md border border-destructive/40 px-4 text-sm font-medium text-destructive transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'destructive', size: 'default' })}
         >
           {fromCopy(copy, 'moderationForm.queue.reject')}
         </PendingButton>

package/src/components/moderation/report-forms.tsx

@@ -2,7 +2,7 @@
 
 import { useActionState } from 'react'
 
-import { Card, CardContent, Field, Textarea, textLinkVariants } from '@meith/ui'
+import { buttonVariants, Card, CardContent, Field, Textarea, textLinkVariants } from '@meith/ui'
 
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { assignReportAction, closeReportAction, fileReportAction } from '@/server/report-actions'
@@ -120,14 +120,14 @@ export function CloseReportForm({ reportId, copy }: { reportId: number; copy: Co
         <PendingButton
           name="status"
           value="resolved"
-          className="inline-flex h-8 items-center rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'primary', size: 'sm' })}
         >
           {fromCopy(copy, 'moderationForm.report.resolve')}
         </PendingButton>
         <PendingButton
           name="status"
           value="rejected"
-          className="inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          className={buttonVariants({ variant: 'outline', size: 'sm' })}
         >
           {fromCopy(copy, 'moderationForm.report.dismiss')}
         </PendingButton>

package/src/components/moderation/thread-surgery-form.tsx

@@ -2,16 +2,16 @@
 
 import { useActionState } from 'react'
 
+import { buttonVariants, controlVariants } from '@meith/ui'
+
 import { EMPTY_STATE } from '@/server/auth-form-state'
 import { mergeThreadAction, splitThreadAction } from '@/server/surgery-actions'
 
 import { FormError, PendingButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 
-const BUTTON =
-  'inline-flex h-8 items-center rounded-md border border-border px-3 text-xs font-medium hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
-const FIELD =
-  'h-8 min-w-0 max-w-full rounded-md border border-border bg-background px-2 text-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+const BUTTON = buttonVariants({ variant: 'outline', size: 'sm' })
+const FIELD = controlVariants({ size: 'sm', className: 'w-auto max-w-full' })
 const LABEL = 'flex min-w-0 max-w-full items-center text-xs'
 
 export interface SplitPoint {