@modern-admin/ui 0.1.0

package/src/components/combobox.tsx

@@ -0,0 +1,264 @@
+// Combobox — free-text autocomplete input.
+//
+// Distinct from `ReferenceCombobox` (in @modern-admin/react) which strictly
+// constrains the value to an existing referenced record. This primitive is
+// permissive: the user may type any string, and the suggestion list is
+// purely advisory. Suggestions can be:
+//   • static (declared per field, e.g. enum-like hints), or
+//   • dynamic (loaded by the parent — e.g. distinct values pulled from a
+//     resource's column). The component itself is i18n-unaware and does
+//     no fetching: callers feed `suggestions` and toggle `loading`.
+//
+// Behaviour:
+//   • The input is fully controlled (`value` / `onChange`).
+//   • Suggestions filter as you type: case-insensitive substring match
+//     against label and value.
+//   • Down/Up cycle highlight; Enter commits the highlighted item or
+//     keeps the typed value if none is highlighted.
+//   • Escape closes the panel; click-outside closes it (handled by Radix
+//     Popover). Selecting an item sets the input value and closes.
+//
+// Mobile-first: the panel matches the input width via the
+// `--radix-popover-trigger-width` CSS var.
+//
+// i18n: optional `labels` prop with English defaults. The React layer is
+// expected to translate and feed them in.
+
+import * as React from 'react'
+import { ChevronDown, Loader2 } from 'lucide-react'
+import { cn } from '../lib/utils.js'
+import { Input } from './input.js'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from './popover.js'
+
+/** Each suggestion may be a bare string (used as both value + label) or
+ *  an explicit `{ value, label }` pair. */
+export type ComboboxSuggestion = string | { value: string; label: string }
+
+export interface ComboboxLabels {
+  /** Shown while `loading` is true and the panel is open. Default: 'Loading…'. */
+  loading?: string
+  /**
+   * Shown when the panel is open, the user has typed something, but no
+   * suggestion matches. Default: 'No matches — press Enter to keep what
+   * you typed.' Use `{value}` to interpolate the current input value.
+   */
+  noMatches?: string
+  /** Visually-hidden trigger label for screen readers. Default: 'Toggle suggestions'. */
+  toggleSuggestions?: string
+}
+
+export interface ComboboxProps {
+  /** Current input value. */
+  value: string
+  /** Called on every keystroke and on suggestion pick. */
+  onChange(next: string): void
+  /** Called when the input loses focus (after the picker closes). */
+  onBlur?(): void
+  /** Static or pre-loaded suggestion list. May change while `loading`. */
+  suggestions?: ReadonlyArray<ComboboxSuggestion>
+  /** When true and the panel is open, render a small spinner. */
+  loading?: boolean
+  /** Disables the input and prevents the panel from opening. */
+  disabled?: boolean
+  placeholder?: string
+  /** Forwarded to the `<input>` for accessibility (paired with a `<label>`). */
+  id?: string
+  'aria-label'?: string
+  className?: string
+  /**
+   * Maximum suggestions to render after filtering. Default: 50. Keeps the
+   * panel snappy when callers pass thousands of distinct values.
+   */
+  maxItems?: number
+  labels?: ComboboxLabels
+}
+
+const defaultLabels: Required<ComboboxLabels> = {
+  loading: 'Loading…',
+  noMatches: 'No matches — press Enter to keep "{value}".',
+  toggleSuggestions: 'Toggle suggestions',
+}
+
+/** Normalise a `ComboboxSuggestion` into `{ value, label }`. */
+const normalise = (s: ComboboxSuggestion): { value: string; label: string } =>
+  typeof s === 'string' ? { value: s, label: s } : s
+
+/** Case-insensitive substring match on label OR value. */
+const matchesQuery = (
+  s: { value: string; label: string },
+  q: string,
+): boolean => {
+  if (!q) return true
+  const needle = q.toLowerCase()
+  return (
+    s.label.toLowerCase().includes(needle) ||
+    s.value.toLowerCase().includes(needle)
+  )
+}
+
+export function Combobox({
+  value,
+  onChange,
+  onBlur,
+  suggestions,
+  loading,
+  disabled,
+  placeholder,
+  id,
+  'aria-label': ariaLabel,
+  className,
+  maxItems = 50,
+  labels,
+}: ComboboxProps): React.ReactElement {
+  const l = { ...defaultLabels, ...labels }
+  const [focused, setFocused] = React.useState(false)
+  const [highlight, setHighlight] = React.useState(0)
+
+  const items = React.useMemo(() => {
+    const all = (suggestions ?? []).map(normalise)
+    return all.filter((s) => matchesQuery(s, value)).slice(0, maxItems)
+  }, [suggestions, value, maxItems])
+
+  // Reset highlight whenever the filtered set changes — otherwise the
+  // index can point past the end after typing a more specific query.
+  React.useEffect(() => {
+    setHighlight(0)
+  }, [items.length])
+
+  // Open whenever the input is focused AND there's something to show
+  // (either matching items or a loading spinner). Empty + non-loading =
+  // no panel, so the component degrades to a plain input.
+  const open =
+    !disabled && focused && (items.length > 0 || Boolean(loading))
+
+  const commit = (s: { value: string; label: string }): void => {
+    onChange(s.value)
+    setFocused(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (!open) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlight((h) => Math.min(h + 1, items.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlight((h) => Math.max(h - 1, 0))
+    } else if (e.key === 'Enter') {
+      const picked = items[highlight]
+      if (picked) {
+        e.preventDefault()
+        commit(picked)
+      }
+    } else if (e.key === 'Escape') {
+      setFocused(false)
+    }
+  }
+
+  return (
+    <Popover open={open}>
+      <PopoverAnchor asChild>
+        <div className={cn('relative', className)}>
+          <Input
+            id={id}
+            type="text"
+            value={value}
+            placeholder={placeholder}
+            disabled={disabled}
+            aria-label={ariaLabel}
+            aria-autocomplete="list"
+            aria-expanded={open}
+            autoComplete="off"
+            className="pr-8"
+            onFocus={() => setFocused(true)}
+            onBlur={() => {
+              // Defer so a click on a suggestion (which fires after blur)
+              // can still commit before we close the panel.
+              setTimeout(() => {
+                setFocused(false)
+                onBlur?.()
+              }, 120)
+            }}
+            onChange={(e) => onChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+          {/* Trailing affordance: spinner while loading, otherwise a chevron
+              hint that suggestions exist. Pure decoration — focusing the
+              input is what opens the panel. */}
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-y-0 right-2 flex items-center text-muted-foreground"
+          >
+            {loading ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <ChevronDown className="size-4 opacity-50" />
+            )}
+          </span>
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        align="start"
+        sideOffset={4}
+        // Prevent Radix from stealing focus from the input when the panel
+        // opens — otherwise typing would move focus to the popover root.
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        // Allow clicks inside the panel without closing the popover before
+        // the click handler on the option fires.
+        onInteractOutside={(e) => {
+          // The blur handler closes the panel; nothing more to do here.
+          // Preventing the default keeps Radix from re-toggling internal state.
+          e.preventDefault()
+        }}
+        className="w-[var(--radix-popover-trigger-width)] p-1"
+      >
+        {loading && items.length === 0 ? (
+          <div className="px-2 py-2 text-sm text-muted-foreground">
+            {l.loading}
+          </div>
+        ) : items.length === 0 ? (
+          <div className="px-2 py-2 text-sm text-muted-foreground">
+            {l.noMatches.replace('{value}', value)}
+          </div>
+        ) : (
+          <ul role="listbox" className="max-h-60 overflow-y-auto">
+            {items.map((s, i) => {
+              const active = i === highlight
+              return (
+                <li
+                  key={s.value}
+                  role="option"
+                  aria-selected={active}
+                  // Use mousedown (fires before input blur) so the click
+                  // commits the value before the panel closes.
+                  onMouseDown={(e) => {
+                    e.preventDefault()
+                    commit(s)
+                  }}
+                  onMouseEnter={() => setHighlight(i)}
+                  className={cn(
+                    'cursor-pointer rounded-sm px-2 py-1.5 text-sm',
+                    active
+                      ? 'bg-accent text-accent-foreground'
+                      : 'text-foreground',
+                  )}
+                >
+                  <span className="truncate">{s.label}</span>
+                  {s.label !== s.value ? (
+                    <span className="ml-2 text-xs text-muted-foreground">
+                      {s.value}
+                    </span>
+                  ) : null}
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/command.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import { cn } from '../lib/utils.js'
+import { Dialog, DialogContent } from './dialog.js'
+
+export const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+export const CommandDialog = ({
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog>): React.ReactElement => (
+  <Dialog {...props}>
+    <DialogContent className="overflow-hidden p-0 shadow-lg">
+      <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        {children}
+      </Command>
+    </DialogContent>
+  </Dialog>
+)
+
+export const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b border-border px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+))
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+export const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+))
+CommandList.displayName = CommandPrimitive.List.displayName
+
+export const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+export const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+export const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border/40', className)} {...props} />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+export const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      className,
+    )}
+    {...props}
+  />
+))
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+export const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>): React.ReactElement => (
+  <span
+    className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+    {...props}
+  />
+)
+CommandShortcut.displayName = 'CommandShortcut'

package/src/components/date-picker.tsx

@@ -0,0 +1,221 @@
+// Popover-driven date / datetime input. Single picker handles both modes:
+// pass `mode="datetime"` to surface an HH:MM time input below the calendar.
+//
+// Value is an ISO-ish string (`yyyy-MM-dd` for dates, `yyyy-MM-ddTHH:mm` for
+// datetime — same shape <input type="date">/<input type="datetime-local">
+// produce, so callers can stay format-stable). The trigger is a real text
+// input so users can also type the date manually; clicks on the trailing
+// calendar icon open the popover with the inline picker.
+
+import * as React from 'react'
+import { format, isValid, parse, parseISO } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+import { cn } from '../lib/utils.js'
+import { Button } from './button.js'
+import { Calendar } from './calendar.js'
+import { Input } from './input.js'
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js'
+
+export type DatePickerMode = 'date' | 'datetime'
+
+export interface DatePickerProps {
+  value: string | null | undefined
+  onChange(next: string): void
+  mode?: DatePickerMode
+  disabled?: boolean
+  placeholder?: string
+  /** Applied to the outer wrapper div (controls width, etc.). */
+  className?: string
+  /** Applied to the inner text Input — use to override height / font size. */
+  inputClassName?: string
+  /** ARIA label forwarded to the trigger input (mobile users / screen readers). */
+  ariaLabel?: string
+  /** ARIA label for the calendar icon button. Default: "Open calendar". */
+  openCalendarLabel?: string
+  /** Label for the time input shown in datetime mode. Default: "Time". */
+  timeLabel?: string
+}
+
+const DATE_FMT = 'yyyy-MM-dd'
+const DATETIME_FMT = "yyyy-MM-dd'T'HH:mm"
+// Friendlier display format for the datetime input — space instead of `T`.
+const DATETIME_DISPLAY_FMT = 'yyyy-MM-dd HH:mm'
+
+function parseValue(value: string | null | undefined): Date | undefined {
+  if (!value) return undefined
+  const direct = value.length <= 10 ? parse(value, DATE_FMT, new Date()) : parseISO(value)
+  return Number.isNaN(direct.getTime()) ? undefined : direct
+}
+
+/**
+ * Try to parse a manually-typed string in any of the supported shapes.
+ * Returns `undefined` on blank, `null` on invalid (non-blank) input so the
+ * caller can distinguish "cleared" from "typo".
+ */
+function parseTyped(raw: string, mode: DatePickerMode): Date | undefined | null {
+  const trimmed = raw.trim()
+  if (trimmed === '') return undefined
+  const candidates =
+    mode === 'datetime'
+      ? [DATETIME_FMT, DATETIME_DISPLAY_FMT, "yyyy-MM-dd'T'HH:mm:ss", DATE_FMT]
+      : [DATE_FMT]
+  for (const fmt of candidates) {
+    const parsed = parse(trimmed, fmt, new Date())
+    if (isValid(parsed)) return parsed
+  }
+  // Last resort: ISO with timezone, etc.
+  const iso = parseISO(trimmed)
+  return isValid(iso) ? iso : null
+}
+
+function formatForInput(date: Date | undefined, mode: DatePickerMode): string {
+  if (!date) return ''
+  return format(date, mode === 'datetime' ? DATETIME_DISPLAY_FMT : DATE_FMT)
+}
+
+function formatForApi(date: Date, mode: DatePickerMode): string {
+  return format(date, mode === 'datetime' ? DATETIME_FMT : DATE_FMT)
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  mode = 'date',
+  disabled,
+  placeholder,
+  className,
+  inputClassName,
+  ariaLabel,
+  openCalendarLabel = 'Open calendar',
+  timeLabel = 'Time',
+}: DatePickerProps): React.ReactElement {
+  const [open, setOpen] = React.useState(false)
+  const date = parseValue(value)
+  // Local draft for the text input — keeps user typing intact even when
+  // intermediate strings don't yet parse.
+  const [draft, setDraft] = React.useState(() => formatForInput(date, mode))
+  // Re-sync draft whenever the canonical value changes from outside (e.g.
+  // calendar selection or form reset). Compare via formatted shape so a noop
+  // update doesn't clobber what the user is typing.
+  const lastFormatted = React.useRef(formatForInput(date, mode))
+  React.useEffect(() => {
+    const next = formatForInput(date, mode)
+    if (next !== lastFormatted.current) {
+      lastFormatted.current = next
+      setDraft(next)
+    }
+  }, [value, mode]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const time = date ? format(date, 'HH:mm') : '00:00'
+
+  const commitDate = (next: Date | undefined): void => {
+    if (!next) {
+      lastFormatted.current = ''
+      setDraft('')
+      onChange('')
+      return
+    }
+    if (mode === 'datetime') {
+      const [h, m] = time.split(':').map(Number)
+      next.setHours(h ?? 0, m ?? 0, 0, 0)
+    }
+    const formatted = formatForInput(next, mode)
+    lastFormatted.current = formatted
+    setDraft(formatted)
+    onChange(formatForApi(next, mode))
+  }
+
+  const setTime = (raw: string): void => {
+    if (!date) return
+    const [h, m] = raw.split(':').map(Number)
+    const next = new Date(date)
+    next.setHours(h ?? 0, m ?? 0, 0, 0)
+    const formatted = formatForInput(next, mode)
+    lastFormatted.current = formatted
+    setDraft(formatted)
+    onChange(formatForApi(next, mode))
+  }
+
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const text = e.target.value
+    setDraft(text)
+    const parsed = parseTyped(text, mode)
+    if (parsed === undefined) {
+      // cleared
+      lastFormatted.current = ''
+      onChange('')
+    } else if (parsed) {
+      lastFormatted.current = formatForInput(parsed, mode)
+      onChange(formatForApi(parsed, mode))
+    }
+    // parsed === null → keep draft, don't fire onChange yet
+  }
+
+  const handleInputBlur: React.FocusEventHandler<HTMLInputElement> = () => {
+    // On blur, if the draft is invalid, snap back to the canonical value.
+    const parsed = parseTyped(draft, mode)
+    if (parsed === null) {
+      const restored = formatForInput(date, mode)
+      lastFormatted.current = restored
+      setDraft(restored)
+    }
+  }
+
+  const inputPlaceholder =
+    placeholder ?? (mode === 'datetime' ? 'YYYY-MM-DD HH:MM' : 'YYYY-MM-DD')
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <div className={cn('relative w-full', className)}>
+        <Input
+          type="text"
+          inputMode="numeric"
+          value={draft}
+          onChange={handleInputChange}
+          onBlur={handleInputBlur}
+          placeholder={inputPlaceholder}
+          disabled={disabled}
+          aria-label={ariaLabel}
+          className={cn(inputClassName, 'pr-10')}
+        />
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            disabled={disabled}
+            aria-label={openCalendarLabel}
+            className="absolute right-1 top-1/2 size-8 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <CalendarIcon className="size-4" />
+          </Button>
+        </PopoverTrigger>
+      </div>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          defaultMonth={date}
+          onSelect={(d) => {
+            commitDate(d)
+            if (mode === 'date') setOpen(false)
+          }}
+          autoFocus
+        />
+        {mode === 'datetime' && (
+          <div className="flex items-center gap-2 border-t p-3">
+            <span className="text-xs text-muted-foreground">{timeLabel}</span>
+            <Input
+              type="time"
+              value={time}
+              disabled={!date}
+              onChange={(e) => setTime(e.target.value)}
+              className="h-8 w-32"
+            />
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}
+DatePicker.displayName = 'DatePicker'