@duro-app/ui 0.35.2 → 0.35.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.35.2",
+  "version": "0.35.3",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.35.2"
+    "@duro-app/tokens": "^0.35.3"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ColorInput/ColorInput.meta.ts

@@ -0,0 +1,22 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A styled native color swatch (<input type="color">) for picking a hex color. Field-context aware like Input.',
+  whenToUse: [
+    'Picking an accent/brand/category color in a form (e.g. a zone or tag color)',
+    'Inside a Field.Root, where it adopts the label, invalid state, and disabled',
+  ],
+  whenNotToUse: [
+    'Free-text hex entry with validation — use Input with a pattern instead',
+    'A full palette/gradient picker — out of scope; this is the native swatch',
+  ],
+  relatedTo: [
+    {component: 'Input', relationship: 'Sibling form control; same Field-context contract'},
+    {component: 'Field', relationship: 'Wrap in Field.Root for label + error wiring'},
+  ],
+  example: `<Field.Root>
+  <Field.Label>Accent</Field.Label>
+  <ColorInput value={accent} onChange={(e) => setAccent(e.target.value)} />
+</Field.Root>`,
+}

package/src/components/ColorInput/ColorInput.tsx

@@ -0,0 +1,73 @@
+import {html} from 'react-strict-dom'
+import {useFieldContext} from '../Field/FieldContext'
+import {styles} from './styles.css'
+
+interface ColorInputProps {
+  /** Hex color, controlled (e.g. "#cfc8ba"). */
+  value?: string
+  defaultValue?: string
+  name?: string
+  /** Explicit id — overrides the Field-context controlId when set. */
+  id?: string
+  disabled?: boolean
+  required?: boolean
+  /** Accessible name when there is no associated <Field.Label>. */
+  'aria-label'?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onBlur?: () => void
+  ref?: React.Ref<HTMLInputElement>
+}
+
+/**
+ * A styled native `<input type="color">` swatch. Mirrors <Input>'s native
+ * surface (value/defaultValue/name/onChange/ref/disabled/required) and adopts
+ * the parent <Field.Root> context (controlId for label association, value/
+ * onChange when bound to a Form, invalid border, disabled) — so it drops into a
+ * <Field> exactly like <Input>. The text <Input> can't render type=color, hence
+ * a dedicated leaf.
+ */
+export function ColorInput({
+  value,
+  defaultValue,
+  name,
+  id,
+  disabled,
+  required,
+  'aria-label': ariaLabel,
+  onChange,
+  onBlur,
+  ref,
+}: ColorInputProps) {
+  const ctx = useFieldContext()
+  const fieldCtx = ctx?.field
+
+  const effectiveName = name ?? fieldCtx?.name
+  const effectiveValue = value ?? (fieldCtx ? String(fieldCtx.value ?? '') : undefined)
+  const effectiveOnChange = onChange ?? fieldCtx?.onChange
+  const effectiveOnBlur = onBlur ?? fieldCtx?.onBlur
+  const effectiveRef = ref ?? fieldCtx?.ref
+  const effectiveDisabled = disabled ?? ctx?.disabled
+
+  return (
+    <html.input
+      type="color"
+      id={id ?? ctx?.controlId}
+      name={effectiveName}
+      value={effectiveValue}
+      defaultValue={defaultValue}
+      disabled={effectiveDisabled}
+      required={required}
+      aria-label={ariaLabel}
+      aria-invalid={ctx?.invalid || undefined}
+      aria-describedby={
+        ctx
+          ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() || undefined
+          : undefined
+      }
+      onChange={effectiveOnChange as React.ComponentProps<typeof html.input>['onChange']}
+      onBlur={effectiveOnBlur as React.ComponentProps<typeof html.input>['onBlur']}
+      ref={effectiveRef as React.Ref<HTMLInputElement>}
+      style={[styles.base, ctx?.invalid && styles.invalid, effectiveDisabled && styles.disabled]}
+    />
+  )
+}

package/src/components/ColorInput/styles.css.ts

@@ -0,0 +1,40 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {radii} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  base: {
+    width: 44,
+    height: 34,
+    padding: 2,
+    backgroundColor: colors.bg,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+    },
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: 1,
+  },
+  invalid: {
+    borderColor: colors.error,
+  },
+  disabled: {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
+})

package/src/components/ConfirmDialog/ConfirmDialog.meta.ts

@@ -0,0 +1,37 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Destructive-confirmation dialog with an optional type-a-phrase gate. DS owns layout + gating; the app owns the submit (confirmSlot) so it composes with form libraries.',
+  whenToUse: [
+    'Confirming an irreversible action (delete org, delete account, drop a record with cascades)',
+    'High-impact actions that should require typing a phrase (the slug/name) before enabling confirm',
+  ],
+  whenNotToUse: [
+    'Routine confirmations — use a Dialog with a plain confirm button',
+    'Non-destructive flows — a Dialog or inline action is enough',
+  ],
+  anatomy: {
+    required: ['title', 'children (warning body)'],
+    optional: ['confirmPhrase', 'promptLabel', 'confirmSlot', 'onConfirm', 'confirmLabel'],
+  },
+  relatedTo: [
+    {component: 'Dialog', relationship: 'Built on Dialog; this adds the phrase gate + footer'},
+    {component: 'Button', relationship: 'The confirm/cancel actions'},
+  ],
+  example: `<ConfirmDialog
+  open={open}
+  onOpenChange={setOpen}
+  title="Delete organization?"
+  confirmPhrase={org.name}
+  promptLabel={<>Type <b>{org.name}</b> to confirm</>}
+  confirmSlot={({satisfied}) => (
+    <fetcher.Form method="post">
+      <input type="hidden" name="intent" value="delete-org" />
+      <Button type="submit" variant="danger" disabled={!satisfied}>Delete</Button>
+    </fetcher.Form>
+  )}
+>
+  This deletes the org and all its landscapes. This cannot be undone.
+</ConfirmDialog>`,
+}

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,99 @@
+import {type ReactNode, useState} from 'react'
+import {Dialog} from '../Dialog/Dialog'
+import {Button} from '../Button/Button'
+import {Input} from '../Input/Input'
+import {Field} from '../Field/Field'
+
+type DialogSize = 'sm' | 'md' | 'lg'
+
+interface ConfirmDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: ReactNode
+  /** Warning / cascade body. */
+  children?: ReactNode
+  /** When set, the confirm action stays DISABLED until the user types this
+   *  exact phrase (org name, slug…). The typed value is a client-side gate
+   *  only — it is never submitted. */
+  confirmPhrase?: string
+  /** Prompt shown above the phrase input. */
+  promptLabel?: ReactNode
+  cancelLabel?: ReactNode
+  /**
+   * App-owned confirm control. Receives whether the phrase gate is satisfied,
+   * so the app can render its OWN <Button type="submit"> INSIDE its form
+   * (e.g. a react-router fetcher.Form with hidden intent fields) — the DS does
+   * NOT own the submit, avoiding a fight with the app's form flow. Takes
+   * precedence over onConfirm/confirmLabel.
+   */
+  confirmSlot?: (gate: {satisfied: boolean}) => ReactNode
+  /** Simple case (no app form): the DS renders a danger Button calling this. */
+  onConfirm?: () => void
+  confirmLabel?: ReactNode
+  size?: DialogSize
+}
+
+/**
+ * Generic destructive-confirmation dialog: layout + an optional type-a-phrase
+ * gate. The DS owns the shell and the gate; the APP owns the actual submit
+ * (via `confirmSlot`) so it composes with form libraries instead of forcing a
+ * callback. Domain warning text goes in `children`.
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  children,
+  confirmPhrase,
+  promptLabel,
+  cancelLabel = 'Cancel',
+  confirmSlot,
+  onConfirm,
+  confirmLabel = 'Confirm',
+  size = 'sm',
+}: ConfirmDialogProps) {
+  const [typed, setTyped] = useState('')
+  const satisfied = !confirmPhrase || typed.trim() === confirmPhrase
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) setTyped('') // reset the gate when the dialog closes
+    onOpenChange(next)
+  }
+
+  return (
+    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
+      <Dialog.Portal size={size}>
+        <Dialog.Header>
+          <Dialog.Title>{title}</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          {children}
+          {confirmPhrase ? (
+            <Field.Root>
+              {promptLabel ? <Field.Label>{promptLabel}</Field.Label> : null}
+              <Input
+                font="mono"
+                value={typed}
+                onChange={(e) => setTyped(e.target.value)}
+                autoFocus
+                aria-label="confirmation phrase"
+              />
+            </Field.Root>
+          ) : null}
+        </Dialog.Body>
+        <Dialog.Footer>
+          <Button variant="secondary" onClick={() => handleOpenChange(false)}>
+            {cancelLabel}
+          </Button>
+          {confirmSlot ? (
+            confirmSlot({satisfied})
+          ) : onConfirm ? (
+            <Button variant="danger" disabled={!satisfied} onClick={onConfirm}>
+              {confirmLabel}
+            </Button>
+          ) : null}
+        </Dialog.Footer>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/components/Input/Input.tsx

@@ -10,11 +10,26 @@ export type InputVariant = 'default' | 'error'
 
 interface InputProps {
   variant?: InputVariant
+  /** Orthogonal to variant — `mono` keeps the error border but uses the
+   *  monospace family (slugs, identifiers, hashes). */
+  font?: 'mono'
   type?: InputType
+  /** Explicit id — overrides the Field-context controlId when set (e.g. a
+   *  control used outside a Field that still needs a stable id). */
+  id?: string
   name?: string
   placeholder?: string
   required?: boolean
+  readOnly?: boolean
   minLength?: number
+  maxLength?: number
+  /** Numeric/range hints — forwarded to the native input (date/number/etc). */
+  min?: string | number
+  max?: string | number
+  step?: string | number
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+  /** id of a <datalist> for native typeahead. */
+  list?: string
   pattern?: string
   autoComplete?:
     | 'on'
@@ -30,6 +45,10 @@ interface InputProps {
   defaultValue?: string
   disabled?: boolean
   autoFocus?: boolean
+  /** Accessible name when there's no associated <Field.Label>. */
+  'aria-label'?: string
+  /** Extra describedby ids (merged with the Field context's, if any). */
+  'aria-describedby'?: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onBlur?: () => void
   ref?: React.Ref<HTMLInputElement>
@@ -37,17 +56,28 @@ interface InputProps {
 
 export function Input({
   variant = 'default',
+  font,
   type = 'text',
+  id,
   name,
   placeholder,
   required,
+  readOnly,
   minLength,
+  maxLength,
+  min,
+  max,
+  step,
+  inputMode,
+  list,
   pattern,
   autoComplete,
   value,
   defaultValue,
   disabled,
   autoFocus,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedby,
   onChange,
   onBlur,
   ref,
@@ -63,16 +93,29 @@ export function Input({
   const effectiveRef = ref ?? fieldCtx?.ref
   const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
+  // Field context owns describedby (description + error); fall back to the
+  // explicit prop only when standalone.
+  const describedBy = ctx
+    ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim()
+    : ariaDescribedby
 
   // react-strict-dom omits some web-only props from its types, but the
   // underlying DOM element supports them. Type-assert to pass them through.
   const extraProps: Record<string, unknown> = {}
   if (pattern !== undefined) extraProps.pattern = pattern
   if (autoFocus) extraProps.autoFocus = true
+  if (readOnly) extraProps.readOnly = true
+  if (maxLength !== undefined) extraProps.maxLength = maxLength
+  if (min !== undefined) extraProps.min = min
+  if (max !== undefined) extraProps.max = max
+  if (step !== undefined) extraProps.step = step
+  if (inputMode !== undefined) extraProps.inputMode = inputMode
+  if (list !== undefined) extraProps.list = list
+  if (ariaLabel !== undefined) extraProps['aria-label'] = ariaLabel
 
   return (
     <html.input
-      id={ctx?.controlId}
+      id={id ?? ctx?.controlId}
       type={type}
       name={effectiveName}
       placeholder={placeholder}
@@ -82,14 +125,17 @@ export function Input({
       value={effectiveValue}
       defaultValue={defaultValue}
       disabled={effectiveDisabled}
-      aria-describedby={
-        ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
-      }
+      aria-describedby={describedBy || undefined}
       aria-invalid={ctx?.invalid || variant === 'error' || undefined}
       onChange={effectiveOnChange as StrictInputProps['onChange']}
       onBlur={effectiveOnBlur as StrictInputProps['onBlur']}
       ref={effectiveRef as React.Ref<HTMLInputElement>}
-      style={[styles.base, styles[effectiveVariant], groupCtx?.inGroup && styles.inGroup]}
+      style={[
+        styles.base,
+        styles[effectiveVariant],
+        font === 'mono' && styles.mono,
+        groupCtx?.inGroup && styles.inGroup,
+      ]}
       {...extraProps}
     />
   )

package/src/components/Input/styles.css.ts

@@ -56,4 +56,9 @@ export const styles = css.create({
     borderRadius: 0,
     outlineWidth: 0,
   },
+  // orthogonal to variant (default/error) — composes on top so a mono field
+  // still shows its error border. For slugs, identifiers, hashes.
+  mono: {
+    fontFamily: typography.fontFamilyMono,
+  },
 })

package/src/components/Select/Select.tsx

@@ -3,6 +3,7 @@ import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {SelectContext, useSelect} from './SelectContext'
 import {useSelectRoot} from './useSelectRoot'
+import {useFieldContext} from '../Field/FieldContext'
 
 // --- Root ---
 interface RootProps {
@@ -37,6 +38,13 @@ function Trigger({
 }) {
   const {open, toggle, listboxId, highlightedId, triggerRef} = useSelect()
   const localRef = useRef<HTMLButtonElement>(null)
+  // Inside a <Field.Root>, adopt its controlId so <Field.Label for={controlId}>
+  // labels the trigger (a labelable <button>) — no manual aria-label needed; and
+  // surface the field's description/error + invalid state, mirroring <Input>.
+  const fieldCtx = useFieldContext()
+  const describedBy = fieldCtx
+    ? `${fieldCtx.descriptionId} ${fieldCtx.invalid ? fieldCtx.errorId : ''}`.trim()
+    : undefined
 
   // Sync local ref to context triggerRef
   useEffect(() => {
@@ -46,6 +54,7 @@ function Trigger({
   return (
     <html.button
       ref={localRef}
+      id={fieldCtx?.controlId}
       type="button"
       role={'combobox' as 'listbox'}
       onClick={toggle}
@@ -54,6 +63,8 @@ function Trigger({
       aria-haspopup="listbox"
       aria-controls={open ? listboxId : undefined}
       aria-activedescendant={highlightedId ?? undefined}
+      aria-describedby={describedBy || undefined}
+      aria-invalid={fieldCtx?.invalid || undefined}
       style={styles.trigger}
     >
       {children}

package/src/index.ts

@@ -13,6 +13,8 @@ export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
 export {CheckboxGroup} from './components/CheckboxGroup/CheckboxGroup'
+export {ColorInput} from './components/ColorInput/ColorInput'
+export {ConfirmDialog} from './components/ConfirmDialog/ConfirmDialog'
 export {Dialog, type DialogSize} from './components/Dialog/Dialog'
 export {DetailPanel, type DetailPanelSize} from './components/DetailPanel/DetailPanel'
 export {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Drawer'