@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Pickers/Combobox.tsx

@@ -0,0 +1,91 @@
+import { useState, type ReactElement } from "react";
+import { Popover as RPopover } from "radix-ui";
+import type { Option } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Field, controlClass, describedBy, useFieldId } from "../Field/Field.tsx";
+import { Listbox, listKeys, useList } from "./Pickers.shared.tsx";
+import { type ComboboxProps } from "./Pickers.types.ts";
+
+/**
+ * Searches a long list as the person types (fuzzy ranking from cmdk, positioned on Radix Popover).
+ * Arrow keys move, Enter picks, Escape closes.
+ */
+export function Combobox({
+  label,
+  help,
+  value,
+  placeholder: hint,
+  noMatch,
+  options,
+  defaultOpen,
+  onChange,
+  onQueryChange,
+  id,
+}: ComboboxProps): ReactElement {
+  const t = useT();
+  const fieldId = useFieldId(id);
+  const s = useList(options, defaultOpen);
+  const [current, setCurrent] = useState(value);
+  const chosen = options.find((o) => o.value === current);
+  const pick = (o: Option) => {
+    setCurrent(o.value);
+    s.setQuery("");
+    s.setOpen(false);
+    onChange?.(o.value);
+  };
+  return (
+    <Field id={fieldId} label={label} help={help}>
+      <RPopover.Root
+        open={s.open && (s.list.length > 0 || s.query !== "")}
+        onOpenChange={s.setOpen}
+      >
+        <RPopover.Anchor asChild>
+          <div className="relative" data-combobox={fieldId}>
+            <input
+              id={fieldId}
+              role="combobox"
+              aria-expanded={s.open}
+              aria-controls={s.open ? `${fieldId}-list` : undefined}
+              aria-autocomplete="list"
+              aria-activedescendant={
+                s.open && s.list.length ? `${fieldId}-opt-${s.active}` : undefined
+              }
+              aria-describedby={describedBy(fieldId, help, undefined)}
+              autoComplete="off"
+              value={s.query}
+              placeholder={chosen?.label ?? hint}
+              onFocus={() => s.setOpen(true)}
+              onBlur={() => {
+                if (!defaultOpen) s.setOpen(false);
+              }}
+              onChange={(e) => {
+                s.setQuery(e.target.value);
+                onQueryChange?.(e.target.value);
+                s.setOpen(true);
+                s.setActive(0);
+              }}
+              onKeyDown={(e) => listKeys(e, s, pick)}
+              className={cx(
+                controlClass,
+                "w-full pe-24",
+                chosen && "placeholder:text-text-primary",
+              )}
+            />
+            <span className="pointer-events-none absolute inset-y-0 end-8 flex items-center text-text-tertiary">
+              <Icon name="ChevronsUpDown" size={14} />
+            </span>
+          </div>
+        </RPopover.Anchor>
+        <Listbox
+          id={fieldId}
+          state={s}
+          isSelected={(o) => o.value === current}
+          pick={pick}
+          noMatch={noMatch ?? t("list.noMatch")}
+        />
+      </RPopover.Root>
+    </Field>
+  );
+}

package/src/Pickers/DatePicker.tsx

@@ -0,0 +1,60 @@
+import { useState, type ReactElement } from "react";
+import { Popover as RPopover } from "radix-ui";
+import { useLocale, usePreferences, useT } from "../lib/context.tsx";
+import { formatDate } from "../lib/format.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Field, describedBy, useFieldId } from "../Field/Field.tsx";
+import { CalendarPanel, todayIso, triggerClass } from "./Pickers.shared.tsx";
+import { type DatePickerProps } from "./Pickers.types.ts";
+
+/** One date from a month grid in a popover dialog; dates display as Oct 30, 2026. */
+export function DatePicker({
+  label,
+  help,
+  value,
+  month,
+  today,
+  placeholder: hint,
+  defaultOpen,
+  onChange,
+  id,
+}: DatePickerProps): ReactElement {
+  const t = useT();
+  const locale = useLocale();
+  const { dateFormat } = usePreferences();
+  const fieldId = useFieldId(id);
+  const [current, setCurrent] = useState(value);
+  const [open, setOpen] = useState(Boolean(defaultOpen));
+  const initial = current ?? month ?? today ?? todayIso();
+  return (
+    <Field id={fieldId} label={label} help={help}>
+      <RPopover.Root open={open} onOpenChange={setOpen}>
+        <RPopover.Trigger asChild>
+          <button
+            id={fieldId}
+            type="button"
+            aria-haspopup="dialog"
+            aria-labelledby={label ? `${fieldId}-label ${fieldId}` : undefined}
+            className={triggerClass}
+            aria-describedby={describedBy(fieldId, help, undefined)}
+          >
+            <Icon name="Calendar" size={14} />
+            <span className={current ? undefined : "text-text-tertiary"}>
+              {current ? formatDate(locale, current, dateFormat) : (hint ?? t("date.pick"))}
+            </span>
+          </button>
+        </RPopover.Trigger>
+        <CalendarPanel
+          label={t("date.choose")}
+          initial={initial}
+          mark={(iso) => (iso === current ? "selected" : iso === today ? "today" : null)}
+          onPick={(iso) => {
+            setCurrent(iso);
+            onChange?.(iso);
+            setOpen(false);
+          }}
+        />
+      </RPopover.Root>
+    </Field>
+  );
+}

package/src/Pickers/DateRangePicker.tsx

@@ -0,0 +1,78 @@
+import { useState, type ReactElement } from "react";
+import { Popover as RPopover } from "radix-ui";
+import { useLocale, usePreferences, useT } from "../lib/context.tsx";
+import { formatDate } from "../lib/format.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Field, describedBy, useFieldId } from "../Field/Field.tsx";
+import { CalendarPanel, todayIso, triggerClass } from "./Pickers.shared.tsx";
+import { type DateRangePickerProps } from "./Pickers.types.ts";
+
+/** A start and end date with the length in days; the first pick starts a range, the second ends it. */
+export function DateRangePicker({
+  label,
+  help,
+  start,
+  end,
+  defaultOpen,
+  onChange,
+  id,
+}: DateRangePickerProps): ReactElement {
+  const t = useT();
+  const locale = useLocale();
+  const { dateFormat } = usePreferences();
+  const fieldId = useFieldId(id);
+  const [range, setRange] = useState<[string | undefined, string | undefined]>([start, end]);
+  const [open, setOpen] = useState(Boolean(defaultOpen));
+  const [a, b] = range;
+  const days = a && b ? Math.round((Date.parse(b) - Date.parse(a)) / 86400000) + 1 : null;
+  const pick = (iso: string) => {
+    const next: [string, string | undefined] =
+      !a || b ? [iso, undefined] : iso < a ? [iso, a] : [a, iso];
+    setRange(next);
+    if (next[1]) {
+      onChange?.([next[0], next[1]]);
+      setOpen(false);
+    }
+  };
+  return (
+    <Field id={fieldId} label={label} help={help}>
+      <RPopover.Root open={open} onOpenChange={setOpen}>
+        <RPopover.Trigger asChild>
+          <button
+            id={fieldId}
+            type="button"
+            aria-haspopup="dialog"
+            aria-labelledby={label ? `${fieldId}-label ${fieldId}` : undefined}
+            className={triggerClass}
+            aria-describedby={describedBy(fieldId, help, undefined)}
+          >
+            <Icon name="CalendarRange" size={14} />
+            <span className={a ? undefined : "text-text-tertiary"}>
+              {a
+                ? b
+                  ? t("date.rangeValue", {
+                      start: formatDate(locale, a, dateFormat),
+                      end: formatDate(locale, b, dateFormat),
+                    })
+                  : formatDate(locale, a, dateFormat)
+                : t("date.chooseRange")}
+            </span>
+            {days !== null ? (
+              <span className="ms-auto text-text-secondary tabular-nums">
+                {t("date.days", { n: days })}
+              </span>
+            ) : null}
+          </button>
+        </RPopover.Trigger>
+        <CalendarPanel
+          label={t("date.chooseRange")}
+          initial={a ?? todayIso()}
+          mark={(iso) =>
+            iso === a || iso === b ? "edge" : a && b && iso > a && iso < b ? "range" : null
+          }
+          onPick={pick}
+        />
+      </RPopover.Root>
+    </Field>
+  );
+}

package/src/Pickers/FileDrop.tsx

@@ -0,0 +1,84 @@
+import { useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useFormat, useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { fieldClass, helpClass, labelClass, useFieldId } from "../Field/Field.tsx";
+import { type FileDropProps } from "./Pickers.types.ts";
+
+/** Files by drag or browse, with a keyboard-reachable input and a list of what was added. */
+export function FileDrop({
+  label,
+  hint,
+  accept,
+  width,
+  files: initial,
+  onFiles,
+  id,
+}: FileDropProps): ReactElement {
+  const t = useT();
+  const fmt = useFormat();
+  const inputId = useFieldId(id);
+  const [over, setOver] = useState(false);
+  const [files, setFiles] = useState(initial ?? []);
+  const add = (list: FileList | null) => {
+    if (!list || list.length === 0) return;
+    setFiles((current) => [
+      ...current,
+      ...Array.from(list, (f) => ({ name: f.name, size: f.size })),
+    ]);
+    onFiles?.(list);
+  };
+  return (
+    <div
+      className={fieldClass}
+      style={width === undefined ? { inlineSize: "var(--ui-popover)" } : { inlineSize: width }}
+    >
+      {label ? <span className={labelClass}>{label}</span> : null}
+      <label
+        htmlFor={inputId}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setOver(true);
+        }}
+        onDragLeave={() => setOver(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setOver(false);
+          add(e.dataTransfer.files);
+        }}
+        className={cx(
+          "flex flex-col items-center gap-4 p-24 text-center rounded-card border border-dashed border-border-strong bg-bg-surface text-text-secondary cursor-pointer",
+          "transition-colors duration-fast ease-standard focus-within:outline-solid focus-within:outline-stroke-focus focus-within:outline-focus-ring",
+          over && "border-accent bg-bg-hover",
+        )}
+      >
+        <Icon name="Upload" size={20} />
+        <span>
+          <strong className="text-text-primary">{t("file.drop")}</strong> {t("file.orBrowse")}
+        </span>
+        {hint ? <span className={helpClass}>{hint}</span> : null}
+        <input
+          id={inputId}
+          type="file"
+          multiple
+          accept={accept}
+          onChange={(e) => add(e.target.files)}
+          className="sr-only"
+        />
+      </label>
+      {files.length ? (
+        <ul className="flex flex-col gap-4 m-0 p-0 list-none" aria-live="polite">
+          {files.map((f, i) => (
+            <li key={`${f.name}-${i}`} className="flex items-center gap-8">
+              <Icon name="File" size={14} />
+              <span>{f.name}</span>
+              <span className="ms-auto text-text-secondary tabular-nums">
+                {t("file.kb", { n: fmt.number(Math.max(1, Math.round(f.size / 1024))) })}
+              </span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/src/Pickers/MultiSelect.tsx

@@ -0,0 +1,118 @@
+import { useState, type ReactElement } from "react";
+import { Popover as RPopover } from "radix-ui";
+import type { Option } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { chipClass } from "../Chips/Chips.tsx";
+import { controlClass, fieldClass, helpClass, labelClass, useFieldId } from "../Field/Field.tsx";
+import { Listbox, listKeys, useList } from "./Pickers.shared.tsx";
+import { type MultiSelectProps } from "./Pickers.types.ts";
+
+/** Picks several values; picks show as removable chips and Backspace removes the last. */
+export function MultiSelect({
+  label,
+  help,
+  value,
+  placeholder: hint,
+  options,
+  defaultOpen,
+  onChange,
+  id,
+}: MultiSelectProps): ReactElement {
+  const t = useT();
+  const fieldId = useFieldId(id);
+  const s = useList(options, defaultOpen);
+  const [picked, setPicked] = useState(value ?? []);
+  const set = (next: string[]) => {
+    setPicked(next);
+    onChange?.(next);
+  };
+  const toggle = (o: Option) =>
+    set(picked.includes(o.value) ? picked.filter((v) => v !== o.value) : [...picked, o.value]);
+  const chosen = options.filter((o) => picked.includes(o.value));
+  return (
+    <div className={fieldClass}>
+      {label ? (
+        <label className={labelClass} htmlFor={fieldId}>
+          {label}
+        </label>
+      ) : null}
+      <RPopover.Root open={s.open} onOpenChange={s.setOpen}>
+        <RPopover.Anchor asChild>
+          <div
+            data-combobox={fieldId}
+            className={cx(
+              controlClass,
+              // The field grows with its chips, and rows of chips stay far enough apart for their remove buttons to meet WCAG 2.5.8.
+              "relative flex flex-wrap items-center gap-x-4 gap-y-12 h-auto! min-h-control-md py-2 ps-4 pe-24",
+            )}
+          >
+            {chosen.map((o) => (
+              <span key={o.value} className={cx(chipClass, "h-(--ui-tag)")}>
+                {o.label}
+                <button
+                  type="button"
+                  aria-label={t("chip.remove", { label: o.label })}
+                  title={t("chip.remove", { label: o.label })}
+                  onClick={() => toggle(o)}
+                  className="xos-hit inline-grid place-items-center ms-2 p-0 border-0 bg-transparent text-text-tertiary hover:text-text-primary rounded-mark cursor-pointer"
+                >
+                  <Icon name="X" size={12} />
+                </button>
+              </span>
+            ))}
+            <input
+              id={fieldId}
+              role="combobox"
+              aria-expanded={s.open}
+              aria-controls={s.open ? `${fieldId}-list` : undefined}
+              aria-autocomplete="list"
+              aria-activedescendant={
+                s.open && s.list.length ? `${fieldId}-opt-${s.active}` : undefined
+              }
+              aria-describedby={help ? `${fieldId}-help` : undefined}
+              autoComplete="off"
+              value={s.query}
+              placeholder={chosen.length ? "" : hint}
+              onFocus={() => s.setOpen(true)}
+              onBlur={() => {
+                if (!defaultOpen) s.setOpen(false);
+              }}
+              onChange={(e) => {
+                s.setQuery(e.target.value);
+                s.setOpen(true);
+                s.setActive(0);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Backspace" && !s.query && chosen.length) {
+                  const last = chosen[chosen.length - 1];
+                  if (last) toggle(last);
+                  return;
+                }
+                listKeys(e, s, toggle);
+              }}
+              className="flex-1 min-w-(--space-64) border-0 bg-transparent outline-none text-text-primary text-text-13 placeholder:text-text-tertiary pointer-coarse:min-h-target-coarse"
+            />
+            <span className="pointer-events-none absolute inset-y-0 end-8 flex items-center text-text-tertiary">
+              <Icon name="ChevronsUpDown" size={14} />
+            </span>
+          </div>
+        </RPopover.Anchor>
+        <Listbox
+          id={fieldId}
+          state={s}
+          isSelected={(o) => picked.includes(o.value)}
+          pick={toggle}
+          multiselectable
+          noMatch={t("list.noMatch")}
+        />
+      </RPopover.Root>
+      {help ? (
+        <div className={helpClass} id={`${fieldId}-help`}>
+          {help}
+        </div>
+      ) : null}
+    </div>
+  );
+}