@superxd-studio/adptr 0.5.0

package/source/components/search-picker.tsx

@@ -0,0 +1,127 @@
+import type { ReactNode } from "react";
+import {
+  Autocomplete,
+  Button,
+  Dialog,
+  DialogTrigger,
+  Input,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  SearchField,
+  useFilter,
+} from "react-aria-components";
+import { cn } from "../lib/cn.js";
+import { IconCheck, IconChevronDown, IconSearch } from "./icons";
+
+export interface PickerItem {
+  id: string;
+  /** What's shown and searched. */
+  label: string;
+  /** A quieter second line or right-hand detail, also searched. */
+  detail?: string;
+  /** Extra words to match when searching (not shown). */
+  keywords?: string;
+}
+
+export interface SearchPickerProps {
+  /** What's being chosen, for screen readers ("Time zone"). */
+  label: string;
+  items: PickerItem[];
+  value: string;
+  onChange: (id: string) => void;
+  /** The content of the trigger button. */
+  trigger: ReactNode;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  triggerClassName?: string;
+}
+
+/**
+ * A button that opens a searchable list, for long lists like time zones.
+ * Typing filters the list; arrow keys and Enter choose; Escape closes.
+ */
+export function SearchPicker({
+  label,
+  items,
+  value,
+  onChange,
+  trigger,
+  searchPlaceholder = "Search",
+  emptyMessage = "Nothing matches that search.",
+  triggerClassName,
+}: SearchPickerProps) {
+  const { contains } = useFilter({ sensitivity: "base" });
+  return (
+    <DialogTrigger>
+      <Button
+        aria-label={label}
+        className={cn(
+          "inline-flex cursor-pointer items-center gap-1.5 rounded-cell text-left transition-colors duration-(--duration-fast) outline-none data-focus-visible:focus-ring data-hovered:text-fg-emphasis",
+          triggerClassName,
+        )}
+      >
+        {trigger}
+        <IconChevronDown className="size-3.5 text-fg-subtle" />
+      </Button>
+      <Popover
+        placement="bottom start"
+        offset={6}
+        className="w-72 origin-(--trigger-anchor-point) overflow-hidden rounded-surface border border-line-subtle bg-surface shadow-popover outline-none data-entering:animate-pop-in data-exiting:animate-pop-out"
+      >
+        <Dialog aria-label={label} className="outline-none">
+          {({ close }) => (
+            <Autocomplete filter={(text, input) => contains(text, input)}>
+              <SearchField
+                aria-label={`Search ${label.toLowerCase()}`}
+                autoFocus
+                className="border-b border-line-subtle"
+              >
+                <div className="flex items-center gap-2 px-3">
+                  <IconSearch className="text-fg-subtle" />
+                  <Input
+                    placeholder={searchPlaceholder}
+                    className="h-10 w-full bg-transparent text-sm text-fg-emphasis outline-none placeholder:text-fg-subtle [&::-webkit-search-cancel-button]:hidden"
+                  />
+                </div>
+              </SearchField>
+              <ListBox
+                aria-label={label}
+                items={items}
+                selectionMode="single"
+                selectedKeys={[value]}
+                onSelectionChange={(keys) => {
+                  const [next] = [...keys];
+                  if (next !== undefined) {
+                    onChange(String(next));
+                    close();
+                  }
+                }}
+                renderEmptyState={() => (
+                  <p className="px-3 py-6 text-center type-body text-fg-subtle">{emptyMessage}</p>
+                )}
+                className="max-h-72 overflow-y-auto p-1 outline-none"
+              >
+                {(item) => (
+                  <ListBoxItem
+                    id={item.id}
+                    textValue={[item.label, item.detail, item.keywords].filter(Boolean).join(" ")}
+                    className="group flex cursor-pointer items-center gap-2 rounded-cell px-2 py-1.5 type-body text-fg outline-none data-focused:bg-surface-subtle data-focused:text-fg-emphasis data-selected:text-fg-emphasis"
+                  >
+                    <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                    {item.detail ? (
+                      <span className="shrink-0 type-caption font-normal text-fg-subtle numeric">
+                        {item.detail}
+                      </span>
+                    ) : null}
+                    <IconCheck className="invisible size-3.5 text-fg-emphasis group-data-selected:visible" />
+                  </ListBoxItem>
+                )}
+              </ListBox>
+            </Autocomplete>
+          )}
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+}

package/source/components/segmented-control.tsx

@@ -0,0 +1,123 @@
+import { useLayoutEffect, useRef, type ReactNode } from "react";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+import { cn } from "../lib/cn.js";
+
+export interface SegmentedOption<K extends string> {
+  id: K;
+  label: ReactNode;
+  icon?: ReactNode;
+  /** Required when the label is only an icon. */
+  "aria-label"?: string;
+  isDisabled?: boolean;
+}
+
+export interface SegmentedControlProps<K extends string> {
+  /** What the choice is about, for screen readers ("Meeting length"). */
+  label: string;
+  options: SegmentedOption<K>[];
+  value: K;
+  onChange: (value: K) => void;
+  size?: "sm" | "md";
+  className?: string;
+}
+
+/**
+ * The selected background slides from the last choice to the new one and settles. It sits
+ * inside the selected option, so it always fits it; only the slide itself is animated.
+ * (React Aria's SelectionIndicator does the same, but forces a synchronous render when it
+ * first appears, which cancels a flow's step transition.)
+ */
+function useSlide(value: string, ids: readonly string[]) {
+  const group = useRef<HTMLDivElement>(null);
+  const mark = useRef<HTMLSpanElement>(null);
+  const last = useRef(value);
+  useLayoutEffect(() => {
+    const previous = last.current;
+    last.current = value;
+    const el = mark.current;
+    const old = group.current?.children[ids.indexOf(previous)];
+    if (previous === value || !el || !old || typeof el.animate !== "function") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const from = old.getBoundingClientRect();
+    const to = el.getBoundingClientRect();
+    const style = getComputedStyle(el);
+    el.animate(
+      [
+        {
+          translate: `${from.left - to.left}px ${from.top - to.top}px`,
+          width: `${from.width}px`,
+          height: `${from.height}px`,
+        },
+        { translate: "0 0", width: `${to.width}px`, height: `${to.height}px` },
+      ],
+      {
+        duration: parseFloat(style.getPropertyValue("--duration-settle")) || 0,
+        easing: style.getPropertyValue("--ease-settle").trim() || "ease-out",
+      },
+    );
+  }, [value, ids]);
+  return { group, mark };
+}
+
+/**
+ * One choice from a few options, shown side by side: 12h or 24h, 15, 30 or
+ * 60 minutes, month, week or columns. Arrow keys move between options.
+ */
+export function SegmentedControl<K extends string>({
+  label,
+  options,
+  value,
+  onChange,
+  size = "sm",
+  className,
+}: SegmentedControlProps<K>) {
+  const { group, mark } = useSlide(
+    value,
+    options.map((option) => option.id),
+  );
+  return (
+    <ToggleButtonGroup
+      ref={group}
+      aria-label={label}
+      selectionMode="single"
+      disallowEmptySelection
+      selectedKeys={[value]}
+      onSelectionChange={(keys) => {
+        const [next] = [...keys];
+        if (next !== undefined && next !== value) onChange(String(next) as K);
+      }}
+      className={cn(
+        "inline-flex max-w-full shrink-0 flex-wrap items-center gap-0.5 rounded-control bg-surface-subtle p-0.5",
+        className,
+      )}
+    >
+      {options.map((option) => (
+        <ToggleButton
+          key={option.id}
+          id={option.id}
+          aria-label={option["aria-label"]}
+          isDisabled={option.isDisabled}
+          className={cn(
+            "relative inline-flex cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--radius-control)-2px)] text-fg transition-colors duration-(--duration-snap) ease-snap outline-none squircle",
+            "data-disabled:cursor-not-allowed data-disabled:text-fg-muted data-focus-visible:focus-ring data-hovered:text-fg-emphasis data-selected:text-fg-emphasis",
+            size === "sm"
+              ? "h-control-sm min-w-control-sm px-control-sm-x type-caption"
+              : "h-control-md min-w-control-md px-control-md-x type-label",
+          )}
+        >
+          {option.id === value ? (
+            <span
+              ref={mark}
+              aria-hidden="true"
+              className="absolute inset-0 rounded-[calc(var(--radius-control)-2px)] border border-line-subtle bg-surface shadow-control squircle"
+            />
+          ) : null}
+          <span className="relative inline-flex items-center gap-1.5">
+            {option.icon}
+            {option.label}
+          </span>
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
+  );
+}

package/source/components/skeleton.tsx

@@ -0,0 +1,11 @@
+import { cn } from "../lib/cn.js";
+
+/** A placeholder shape while content loads. Hidden from screen readers. */
+export function Skeleton({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn("block animate-pulse-soft rounded-cell bg-surface-subtle", className)}
+    />
+  );
+}

package/source/components/spinner.tsx

@@ -0,0 +1,19 @@
+import { cn } from "../lib/cn.js";
+
+/** Three staggered dots. Decorative: announce progress with words nearby. */
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
+      className={cn("size-4 shrink-0", className)}
+    >
+      <g fill="currentColor" className="loader-dots">
+        <circle cx="4" cy="12" r="2.5" />
+        <circle cx="12" cy="12" r="2.5" />
+        <circle cx="20" cy="12" r="2.5" />
+      </g>
+    </svg>
+  );
+}

package/source/components/superxd-arrow.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../lib/cn";
+
+export const sxdArrowPath = "M5 12h14m-6-6 6 6-6 6";
+
+/** The same SuperXD arrow used by the site chrome, without importing the rest of the chrome. */
+export function SxdArrow({ className }: { className?: string }) {
+  return (
+    <svg
+      className={cn("sxd-icon", className)}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d={sxdArrowPath} />
+    </svg>
+  );
+}

package/source/components/switch.tsx

@@ -0,0 +1,45 @@
+import { useId, type ReactNode } from "react";
+import { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from "react-aria-components";
+import { cn } from "../lib/cn.js";
+
+export interface SwitchProps extends Omit<AriaSwitchProps, "children"> {
+  label: ReactNode;
+  description?: ReactNode;
+}
+
+/** An immediately applied on/off setting, with a persistent label in both positions. */
+export function Switch({ label, description, className, ...props }: SwitchProps) {
+  const id = useId();
+  return (
+    <AriaSwitch
+      {...props}
+      aria-labelledby={`${id}-label`}
+      aria-describedby={description ? `${id}-description` : props["aria-describedby"]}
+      className={cn(
+        "group inline-flex min-h-control-md cursor-pointer items-center gap-3 rounded-control outline-none data-disabled:cursor-default data-focus-visible:focus-ring",
+        typeof className === "string" ? className : undefined,
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className="flex h-6 w-10 shrink-0 items-center rounded-pill border border-line-input bg-surface-subtle p-0.5 transition-colors duration-(--duration-snap) ease-snap [corner-shape:var(--corner-shape,round)] group-data-disabled:opacity-50 group-data-selected:border-brand group-data-selected:bg-brand"
+      >
+        {/* Settle: the thumb stretches while pressed, then springs across */}
+        <span className="size-4 origin-left rounded-pill bg-fg-subtle transition-[translate,scale] duration-(--duration-settle) ease-settle [corner-shape:var(--corner-shape,round)] group-data-pressed:scale-x-125 group-data-pressed:duration-(--duration-snap) group-data-pressed:ease-snap group-data-selected:origin-right group-data-selected:translate-x-4 group-data-selected:bg-on-brand motion-reduce:transition-none" />
+      </span>
+      <span className="flex min-w-0 flex-col gap-1">
+        <span
+          id={`${id}-label`}
+          className="type-label text-fg-emphasis group-data-disabled:text-fg-muted"
+        >
+          {label}
+        </span>
+        {description ? (
+          <span id={`${id}-description`} className="type-caption text-fg-subtle">
+            {description}
+          </span>
+        ) : null}
+      </span>
+    </AriaSwitch>
+  );
+}

package/source/components/text-field.tsx

@@ -0,0 +1,81 @@
+import type { ReactNode } from "react";
+import {
+  FieldError,
+  Input,
+  Label,
+  Text,
+  TextArea,
+  TextField as AriaTextField,
+  type TextFieldProps as AriaTextFieldProps,
+} from "react-aria-components";
+import { cn } from "../lib/cn.js";
+import { IconCircleAlert } from "./icons";
+
+const control =
+  "w-full rounded-control border border-line-input bg-surface px-control-md-x text-sm text-fg-emphasis shadow-control outline-none transition-[border-color,box-shadow] duration-(--duration-snap) ease-snap placeholder:text-fg-subtle data-hovered:border-line-emphasis data-focused:border-focus data-focused:ring-2 data-focused:ring-focus/15 data-invalid:border-error data-invalid:data-focused:ring-error/15 data-disabled:cursor-not-allowed data-disabled:bg-surface-muted data-disabled:text-fg-muted";
+
+export interface TextFieldProps extends Omit<AriaTextFieldProps, "children"> {
+  label: ReactNode;
+  description?: ReactNode;
+  /** The problem with the current value. Shows the field as invalid when set. */
+  error?: ReactNode;
+  placeholder?: string;
+  /** Adds "(optional)" after the label. Required fields stay unmarked. */
+  optional?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  inputClassName?: string;
+}
+
+/**
+ * A labelled text box with an optional description and an error message.
+ * The error is linked to the input for screen readers.
+ */
+export function TextField({
+  label,
+  description,
+  error,
+  placeholder,
+  optional,
+  multiline,
+  rows = 3,
+  className,
+  inputClassName,
+  ...props
+}: TextFieldProps) {
+  return (
+    <AriaTextField
+      {...props}
+      isInvalid={Boolean(error) || props.isInvalid}
+      validationBehavior={props.validationBehavior ?? "aria"}
+      className={cn("flex flex-col gap-1.5", typeof className === "string" ? className : undefined)}
+    >
+      <Label className="type-label text-fg-emphasis">
+        {label}
+        {optional ? <span className="font-normal text-fg-subtle"> (optional)</span> : null}
+      </Label>
+      {multiline ? (
+        <TextArea
+          rows={rows}
+          placeholder={placeholder}
+          className={cn(control, "min-h-24 resize-y py-control-y leading-5", inputClassName)}
+        />
+      ) : (
+        <Input placeholder={placeholder} className={cn(control, "h-control-md", inputClassName)} />
+      )}
+      {description && !error ? (
+        <Text slot="description" className="type-caption font-normal text-fg-subtle">
+          {description}
+        </Text>
+      ) : null}
+      <FieldError className="flex animate-reveal-in items-start gap-1.5 type-caption text-error">
+        {({ validationErrors }) => (
+          <>
+            <IconCircleAlert className="mt-px size-3.5" />
+            <span>{error ?? validationErrors.join(" ")}</span>
+          </>
+        )}
+      </FieldError>
+    </AriaTextField>
+  );
+}

package/source/components/thinking.tsx

@@ -0,0 +1,16 @@
+import { cn } from "../lib/cn.js";
+
+/**
+ * SuperXD's thinking mark: a 3×3 pixel matrix lighting in a spiral, for waits of unknown
+ * length (an AI preparing an answer). About the height of a line of text. Decorative: say
+ * what's happening in words beside it.
+ */
+export function Thinking({ className }: { className?: string }) {
+  return (
+    <span aria-hidden="true" className={cn("thinking-matrix", className)}>
+      {Array.from({ length: 9 }, (_, i) => (
+        <i key={i} />
+      ))}
+    </span>
+  );
+}

package/source/components/ui/copy.ts

@@ -0,0 +1,12 @@
+export const uiCopy = {
+  choose: "Choose an option",
+  empty: "No options available.",
+  close: "Close",
+  previous: "Previous page",
+  next: "Next page",
+  page: (page: number, total: number) => `Page ${page} of ${total}`,
+  sort: (label: string) => `Sort by ${label}`,
+  noRows: "No rows to show.",
+  dismiss: "Dismiss notification",
+  notifications: "Notifications",
+} as const;