@superxd-studio/adptr 0.5.0

package/source/components/ui/display.tsx

@@ -0,0 +1,276 @@
+import { useState, type ReactNode, type HTMLAttributes } from "react";
+import {
+  ProgressBar,
+  Separator as AriaSeparator,
+  Table,
+  TableHeader,
+  Column,
+  TableBody,
+  Row,
+  Cell,
+  Text,
+  UNSTABLE_ToastQueue as ToastQueue,
+  UNSTABLE_ToastRegion as AriaToastRegion,
+  UNSTABLE_Toast as AriaToast,
+  UNSTABLE_ToastContent as ToastContent,
+  type ProgressBarProps,
+  type SeparatorProps,
+  type SortDescriptor,
+  type Selection,
+} from "react-aria-components";
+import { Button } from "../button";
+import { IconX } from "../icons";
+import { cn } from "../../lib/cn";
+import { uiCopy } from "./copy";
+
+export function Card({ children, className, ...props }: HTMLAttributes<HTMLElement>) {
+  return (
+    <section
+      {...props}
+      className={cn(
+        "min-w-0 rounded-surface border border-line-subtle bg-surface p-6 text-fg shadow-surface",
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}
+export type BadgeTone = "neutral" | "info" | "success" | "attention" | "error";
+const tones: Record<BadgeTone, string> = {
+  neutral: "bg-surface-subtle text-fg-subtle",
+  info: "bg-info-subtle text-info",
+  success: "bg-success-subtle text-success",
+  attention: "bg-attention-subtle text-attention",
+  error: "bg-error-subtle text-error",
+};
+export function Badge({ children, tone = "neutral" }: { children: ReactNode; tone?: BadgeTone }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex max-w-full items-center gap-1.5 rounded-cell px-2 py-1 type-caption",
+        tones[tone],
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+export function Progress({
+  label,
+  className,
+  ...props
+}: Omit<ProgressBarProps, "children"> & { label: string }) {
+  return (
+    <ProgressBar
+      {...props}
+      aria-label={label}
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-2",
+        typeof className === "string" && className,
+      )}
+    >
+      {({ percentage, valueText, isIndeterminate }) => (
+        <>
+          <div className="flex items-center justify-between gap-3">
+            <span className="type-label">{label}</span>
+            {!isIndeterminate && (
+              <span className="type-caption text-fg-subtle numeric">{valueText}</span>
+            )}
+          </div>
+          <div className="h-2 overflow-hidden rounded-pill bg-surface-subtle">
+            <div
+              style={{ width: isIndeterminate ? "100%" : `${percentage}%` }}
+              className={cn(
+                "h-full rounded-pill bg-brand transition-[width] duration-(--duration-base) motion-reduce:transition-none",
+                isIndeterminate && "animate-pulse-soft motion-reduce:animate-none",
+              )}
+            />
+          </div>
+        </>
+      )}
+    </ProgressBar>
+  );
+}
+export function Separator({ className, ...props }: SeparatorProps) {
+  return (
+    <AriaSeparator
+      {...props}
+      className={cn(
+        "border-0 bg-line-subtle",
+        props.orientation === "vertical" ? "h-6 w-px" : "h-px w-full",
+        typeof className === "string" && className,
+      )}
+    />
+  );
+}
+export function AspectRatio({
+  ratio = 16 / 9,
+  children,
+  className,
+}: {
+  ratio?: number;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      style={{ aspectRatio: Number.isFinite(ratio) && ratio > 0 ? ratio : 1 }}
+      className={cn("relative w-full min-w-0 overflow-hidden rounded-surface", className)}
+    >
+      {children}
+    </div>
+  );
+}
+export function KeyboardHint({ children }: { children: ReactNode }) {
+  return (
+    <kbd className="inline-flex rounded-cell border border-line-subtle bg-surface-muted px-1.5 py-0.5 font-mono type-caption text-fg-subtle">
+      {children}
+    </kbd>
+  );
+}
+export interface DataColumn {
+  id: string;
+  label: string;
+  sortable?: boolean;
+  isRowHeader?: boolean;
+}
+export interface DataRow {
+  id: string;
+  values: Readonly<Record<string, string | number>>;
+}
+export function sortRows(rows: readonly DataRow[], sort?: SortDescriptor) {
+  if (!sort) return [...rows];
+  const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+  return [...rows].sort((a, b) => {
+    const x = a.values[String(sort.column)] ?? "",
+      y = b.values[String(sort.column)] ?? "";
+    const value =
+      typeof x === "number" && typeof y === "number"
+        ? x - y
+        : collator.compare(String(x), String(y));
+    return sort.direction === "descending" ? -value : value;
+  });
+}
+/** Local sorting and selection. Server pagination and virtualisation belong to the host. */
+export function DataTable({
+  label,
+  columns,
+  rows,
+  empty = uiCopy.noRows,
+  selectionMode = "none",
+  selectedKeys,
+  onSelectionChange,
+}: {
+  label: string;
+  columns: readonly DataColumn[];
+  rows: readonly DataRow[];
+  empty?: string;
+  selectionMode?: "none" | "single" | "multiple";
+  selectedKeys?: Selection;
+  onSelectionChange?: (keys: Selection) => void;
+}) {
+  const [sort, setSort] = useState<SortDescriptor>();
+  return (
+    <div className="max-w-full overflow-x-auto rounded-surface border border-line-subtle bg-surface">
+      <Table
+        aria-label={label}
+        sortDescriptor={sort}
+        onSortChange={setSort}
+        selectionMode={selectionMode}
+        selectedKeys={selectedKeys}
+        onSelectionChange={onSelectionChange}
+        className="w-full outline-none"
+      >
+        <TableHeader columns={columns}>
+          {(column) => (
+            <Column
+              id={column.id}
+              isRowHeader={column.isRowHeader ?? column === columns[0]}
+              allowsSorting={column.sortable}
+              className="border-b border-line-subtle bg-surface-muted p-3 text-left type-label text-fg-emphasis outline-none data-focus-visible:focus-ring"
+            >
+              {({ sortDirection }) => (
+                <span className="inline-flex items-center gap-2">
+                  {column.label}
+                  {column.sortable && (
+                    <span aria-hidden="true">
+                      {sortDirection === "ascending"
+                        ? "↑"
+                        : sortDirection === "descending"
+                          ? "↓"
+                          : "↕"}
+                    </span>
+                  )}
+                </span>
+              )}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody
+          items={sortRows(rows, sort)}
+          renderEmptyState={() => <p className="p-6 type-body text-fg-subtle">{empty}</p>}
+        >
+          {(row) => (
+            <Row
+              id={row.id}
+              columns={columns}
+              className="border-b border-line-subtle outline-none last:border-b-0 data-focus-visible:focus-ring data-selected:bg-surface-subtle"
+            >
+              {(column) => (
+                <Cell className="max-w-80 p-3 type-body break-words text-fg outline-none data-focus-visible:focus-ring">
+                  {row.values[column.id] ?? ""}
+                </Cell>
+              )}
+            </Row>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+export interface Notification {
+  title: string;
+  description?: string;
+}
+export function createNotificationQueue() {
+  return new ToastQueue<Notification>({ maxVisibleToasts: 3 });
+}
+export function ToastRegion({
+  queue,
+  label = uiCopy.notifications,
+}: {
+  queue: ToastQueue<Notification>;
+  label?: string;
+}) {
+  return (
+    <AriaToastRegion
+      queue={queue}
+      aria-label={label}
+      className="fixed right-4 bottom-4 z-50 flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-3 outline-none"
+    >
+      {({ toast }) => (
+        <AriaToast
+          toast={toast}
+          className="rounded-surface border border-line-subtle bg-surface p-4 text-fg shadow-popover outline-none data-entering:animate-toast-in data-exiting:animate-fade-out data-focus-visible:focus-ring"
+        >
+          <ToastContent>
+            <div className="flex items-start justify-between gap-3">
+              <Text slot="title" className="type-label text-fg-emphasis">
+                {toast.content.title}
+              </Text>
+              <Button slot="close" size="icon-sm" variant="ghost" aria-label={uiCopy.dismiss}>
+                <IconX />
+              </Button>
+            </div>
+            {toast.content.description && (
+              <Text slot="description" className="mt-2 block type-body text-fg-subtle">
+                {toast.content.description}
+              </Text>
+            )}
+          </ToastContent>
+        </AriaToast>
+      )}
+    </AriaToastRegion>
+  );
+}

package/source/components/ui/navigation.tsx

@@ -0,0 +1,346 @@
+import { PortalTheme } from "./portal-theme";
+import type { ReactNode } from "react";
+import {
+  MenuTrigger,
+  Menu as AriaMenu,
+  MenuItem,
+  Popover,
+  Text,
+  DisclosureGroup,
+  Disclosure,
+  DisclosurePanel,
+  Heading,
+  Tabs as AriaTabs,
+  TabList,
+  Tab,
+  TabPanel,
+  SelectionIndicator,
+  TooltipTrigger,
+  Tooltip as AriaTooltip,
+  DialogTrigger,
+  ModalOverlay,
+  Modal,
+  Dialog,
+  Breadcrumbs as AriaBreadcrumbs,
+  Breadcrumb,
+  Link,
+  type DisclosureGroupProps,
+  type TabsProps,
+  type TooltipTriggerComponentProps,
+} from "react-aria-components";
+import { Button } from "../button";
+import { IconChevronDown, IconChevronRight, IconX } from "../icons";
+import { cn } from "../../lib/cn";
+import { uiCopy } from "./copy";
+
+export interface MenuCommand {
+  id: string;
+  label: string;
+  description?: string;
+  isDisabled?: boolean;
+  isDestructive?: boolean;
+}
+export function Menu({
+  label,
+  items,
+  onAction,
+  isDisabled = false,
+}: {
+  label: string;
+  items: readonly MenuCommand[];
+  onAction: (id: string) => void;
+  isDisabled?: boolean;
+}) {
+  return (
+    <PortalTheme>
+      {(theme) => (
+        <MenuTrigger>
+          <Button isDisabled={isDisabled} className="group/trigger">
+            {label}
+            <IconChevronDown className="transition-[rotate] duration-(--duration-settle) ease-settle group-aria-expanded/trigger:rotate-180 motion-reduce:transition-none" />
+          </Button>
+          <Popover
+            style={theme.style}
+            className={cn(
+              theme.className,
+              "z-50 max-w-[calc(100vw-2rem)] origin-(--trigger-anchor-point) rounded-surface border border-line-subtle bg-surface p-1 text-fg shadow-popover outline-none data-entering:animate-pop-in data-exiting:animate-pop-out",
+            )}
+          >
+            <AriaMenu
+              aria-label={label}
+              items={items}
+              disabledKeys={items.filter((i) => i.isDisabled).map((i) => i.id)}
+              onAction={(key) => onAction(String(key))}
+              className="max-w-80 min-w-48 outline-none"
+            >
+              {(item) => (
+                <MenuItem
+                  id={item.id}
+                  textValue={item.label}
+                  className={cn(
+                    "cursor-pointer rounded-cell px-3 py-2 outline-none data-disabled:opacity-50 data-focused:bg-surface-subtle",
+                    item.isDestructive ? "text-error" : "text-fg-emphasis",
+                  )}
+                >
+                  <Text slot="label" className="block type-label">
+                    {item.label}
+                  </Text>
+                  {item.description && (
+                    <Text slot="description" className="mt-1 block type-caption text-fg-subtle">
+                      {item.description}
+                    </Text>
+                  )}
+                </MenuItem>
+              )}
+            </AriaMenu>
+          </Popover>
+        </MenuTrigger>
+      )}
+    </PortalTheme>
+  );
+}
+export interface DisclosureItem {
+  id: string;
+  title: string;
+  content: ReactNode;
+  isDisabled?: boolean;
+}
+export function Accordion({
+  label,
+  items,
+  className,
+  ...props
+}: Omit<DisclosureGroupProps, "children"> & { label: string; items: readonly DisclosureItem[] }) {
+  return (
+    <DisclosureGroup
+      {...props}
+      aria-label={label}
+      className={cn(
+        "w-full min-w-0 divide-y divide-line-subtle",
+        typeof className === "string" && className,
+      )}
+    >
+      {items.map((item) => (
+        <Disclosure
+          key={item.id}
+          id={item.id}
+          data-accordion-item={item.id}
+          isDisabled={item.isDisabled}
+          className="group min-w-0 py-1"
+        >
+          {/* A little room above and below, so the hover and pressed fill floats as its own
+              squircle instead of running into the dividers */}
+          <Heading>
+            <Button
+              slot="trigger"
+              variant="ghost"
+              className="h-auto min-h-control-md w-full justify-between px-control-md-x py-3 text-left whitespace-normal"
+            >
+              <span className="min-w-0 flex-1 break-words">{item.title}</span>
+              <IconChevronDown className="transition-[rotate] duration-(--duration-settle) ease-settle group-data-expanded:rotate-180 motion-reduce:transition-none" />
+            </Button>
+          </Heading>
+          {/* hidden="until-found" preserves the panel box. Keep spacing on its
+              contents so a collapsed panel does not leave an empty strip. */}
+          <DisclosurePanel className="min-w-0 type-body text-fg">
+            <div className="animate-reveal-in px-control-md-x pt-3 pb-4">{item.content}</div>
+          </DisclosurePanel>
+        </Disclosure>
+      ))}
+    </DisclosureGroup>
+  );
+}
+export interface ContentTab {
+  id: string;
+  label: string;
+  content: ReactNode;
+  isDisabled?: boolean;
+}
+export function Tabs({
+  label,
+  items,
+  className,
+  ...props
+}: Omit<TabsProps, "children"> & { label: string; items: readonly ContentTab[] }) {
+  return (
+    <AriaTabs
+      {...props}
+      className={cn("w-full min-w-0", typeof className === "string" && className)}
+    >
+      <TabList aria-label={label} className="flex flex-wrap gap-1 border-b border-line-subtle">
+        {items.map((item) => (
+          <Tab
+            key={item.id}
+            id={item.id}
+            isDisabled={item.isDisabled}
+            className="relative cursor-pointer rounded-t-control border-b-2 border-transparent px-3 py-2 type-label text-fg-subtle transition-colors duration-(--duration-snap) ease-snap outline-none data-disabled:opacity-50 data-focus-visible:focus-ring data-hovered:text-fg-emphasis data-selected:text-fg-emphasis"
+          >
+            {item.label}
+            {/* The underline slides between tabs and settles */}
+            <SelectionIndicator className="absolute inset-x-0 -bottom-0.5 h-0.5 bg-brand transition-[translate,width] duration-(--duration-settle) ease-settle" />
+          </Tab>
+        ))}
+      </TabList>
+      {items.map((item) => (
+        <TabPanel
+          key={item.id}
+          id={item.id}
+          className="min-w-0 py-4 outline-none data-focus-visible:focus-ring"
+        >
+          {item.content}
+        </TabPanel>
+      ))}
+    </AriaTabs>
+  );
+}
+export function Tooltip({
+  children,
+  content,
+  ...props
+}: Omit<TooltipTriggerComponentProps, "children"> & { children: ReactNode; content: ReactNode }) {
+  return (
+    <PortalTheme>
+      {(theme) => (
+        <TooltipTrigger {...props}>
+          {children}
+          <AriaTooltip
+            style={theme.style}
+            placement="top"
+            className={cn(
+              theme.className,
+              "z-50 max-w-64 origin-(--trigger-anchor-point) rounded-control border border-line-subtle bg-surface px-3 py-2 type-caption text-fg-emphasis shadow-popover data-entering:animate-pop-in data-exiting:animate-pop-out",
+            )}
+          >
+            {content}
+          </AriaTooltip>
+        </TooltipTrigger>
+      )}
+    </PortalTheme>
+  );
+}
+/** A labelled, controlled modal. The host can prevent dismissal while a mutation settles. */
+export function ModalDialog({
+  title,
+  children,
+  isOpen,
+  onOpenChange,
+  isDismissDisabled = false,
+  trigger,
+}: {
+  title: string;
+  children: ReactNode;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  isDismissDisabled?: boolean;
+  trigger: ReactNode;
+}) {
+  return (
+    <PortalTheme>
+      {(theme) => (
+        <DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
+          {trigger}
+          <ModalOverlay
+            style={theme.style}
+            isDismissable={!isDismissDisabled}
+            isKeyboardDismissDisabled={isDismissDisabled}
+            className={cn(
+              theme.className,
+              "fixed inset-0 z-50 flex items-center justify-center bg-overlay p-4 data-entering:animate-fade-in data-exiting:animate-fade-out",
+            )}
+          >
+            <Modal className="max-h-[calc(100dvh-2rem)] w-full max-w-lg overflow-y-auto rounded-surface border border-line-subtle bg-surface p-6 text-fg shadow-dialog data-entering:animate-dialog-settle data-exiting:animate-pop-out">
+              <Dialog className="min-w-0 outline-none">
+                {({ close }) => (
+                  <>
+                    <div className="mb-4 flex items-start justify-between gap-4">
+                      <Heading slot="title" className="type-heading text-fg-emphasis">
+                        {title}
+                      </Heading>
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        aria-label={uiCopy.close}
+                        isDisabled={isDismissDisabled}
+                        onPress={close}
+                      >
+                        <IconX />
+                      </Button>
+                    </div>
+                    {children}
+                  </>
+                )}
+              </Dialog>
+            </Modal>
+          </ModalOverlay>
+        </DialogTrigger>
+      )}
+    </PortalTheme>
+  );
+}
+export function Pagination({
+  label,
+  page,
+  total,
+  onChange,
+  isDisabled = false,
+}: {
+  label: string;
+  page: number;
+  total: number;
+  onChange: (page: number) => void;
+  isDisabled?: boolean;
+}) {
+  const count = Math.max(1, Math.floor(Number.isFinite(total) ? total : 1));
+  const current = Math.min(count, Math.max(1, Math.floor(Number.isFinite(page) ? page : 1)));
+  return (
+    <nav aria-label={label} className="flex flex-wrap items-center justify-between gap-3">
+      <Button
+        size="sm"
+        aria-label={uiCopy.previous}
+        isDisabled={isDisabled || current === 1}
+        onPress={() => onChange(current - 1)}
+      >
+        <IconChevronRight className="rotate-180" />
+        {uiCopy.previous}
+      </Button>
+      <span aria-current="page" className="type-caption text-fg-subtle numeric">
+        {uiCopy.page(current, count)}
+      </span>
+      <Button
+        size="sm"
+        aria-label={uiCopy.next}
+        isDisabled={isDisabled || current === count}
+        onPress={() => onChange(current + 1)}
+      >
+        {uiCopy.next}
+        <IconChevronRight />
+      </Button>
+    </nav>
+  );
+}
+export function Breadcrumbs({
+  label,
+  items,
+}: {
+  label: string;
+  items: readonly { id: string; label: string; href?: string }[];
+}) {
+  return (
+    <AriaBreadcrumbs
+      aria-label={label}
+      className="flex flex-wrap items-center gap-2 type-caption text-fg-subtle"
+    >
+      {items.map((item, index) => (
+        <Breadcrumb key={item.id} className="inline-flex items-center gap-2">
+          <Link
+            href={item.href}
+            className="rounded-cell outline-none data-focus-visible:focus-ring data-hovered:underline"
+          >
+            {item.label}
+          </Link>
+          {index < items.length - 1 && <IconChevronRight className="size-3" />}
+        </Breadcrumb>
+      ))}
+    </AriaBreadcrumbs>
+  );
+}

package/source/components/ui/portal-theme.tsx

@@ -0,0 +1,28 @@
+import { useRef, useState, type ReactNode, type CSSProperties } from "react";
+/** Portals leave scoped preview/host themes. Copy their computed variables at the trigger. */
+export function PortalTheme({
+  children,
+}: {
+  children: (theme: { className: string; style: CSSProperties }) => ReactNode;
+}) {
+  const root = useRef<HTMLDivElement>(null);
+  const [theme, setTheme] = useState<{ className: string; style: CSSProperties }>({
+    className: "sxd",
+    style: {},
+  });
+  const sync = () => {
+    if (!root.current) return;
+    const computed = getComputedStyle(root.current);
+    const variables: Record<string, string> = {};
+    for (let index = 0; index < computed.length; index++) {
+      const name = computed.item(index);
+      if (name.startsWith("--")) variables[name] = computed.getPropertyValue(name);
+    }
+    setTheme({ className: root.current.closest(".dark") ? "sxd dark" : "sxd", style: variables });
+  };
+  return (
+    <div ref={root} className="contents" onPointerDownCapture={sync} onFocusCapture={sync}>
+      {children(theme)}
+    </div>
+  );
+}