@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Menus/ContextMenu.tsx

@@ -0,0 +1,106 @@
+import type { ReactElement } from "react";
+import { ContextMenu as RContextMenu, DropdownMenu as RDropdownMenu } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { ItemBody, dangerClass, headClass, renderItems, sepClass } from "./Menus.shared.tsx";
+import { type ContextMenuProps } from "./Menus.types.ts";
+import { menuClass } from "./menuClass.tsx";
+import { menuItemClass } from "./menuItemClass.tsx";
+
+/**
+ * The record menu's actions on right-click or Shift+F10 over `children`, or at a point the page
+ * gives (`at`). The point menu is Radix's dropdown anchored to an empty mark at the point: arrow
+ * keys, typeahead and Esc work as in every menu, and focus returns to `returnFocus` on close.
+ */
+export function ContextMenu({
+  label,
+  items,
+  children,
+  at,
+  onClose,
+  returnFocus,
+}: ContextMenuProps): ReactElement {
+  const t = useT();
+  const name = label ?? t("menu.actions");
+  if (at) {
+    return (
+      <RDropdownMenu.Root
+        open
+        modal={false}
+        onOpenChange={(open) => {
+          if (!open) onClose?.();
+        }}
+      >
+        <RDropdownMenu.Trigger asChild>
+          <span
+            aria-hidden="true"
+            className="pointer-events-none fixed size-0"
+            // design-audit-allow: the pointer's viewport position, data rather than design
+            style={{ left: at.x, top: at.y }}
+          />
+        </RDropdownMenu.Trigger>
+        <RDropdownMenu.Portal>
+          <RDropdownMenu.Content
+            className={menuClass}
+            aria-label={name}
+            // The anchor mark is empty, so the menu takes its name from the label instead.
+            aria-labelledby={undefined}
+            align="start"
+            collisionPadding={16}
+            onCloseAutoFocus={(event) => {
+              if (returnFocus?.isConnected) {
+                event.preventDefault();
+                returnFocus.focus();
+              }
+            }}
+          >
+            {renderItems(RDropdownMenu, items)}
+          </RDropdownMenu.Content>
+        </RDropdownMenu.Portal>
+      </RDropdownMenu.Root>
+    );
+  }
+  if (children === undefined) {
+    return (
+      <div role="menu" aria-label={name} className={menuClass}>
+        {items.map((item, i) =>
+          item.separator ? (
+            <div key={i} role="separator" className={sepClass} />
+          ) : item.heading ? (
+            <div key={i} role="presentation" className={headClass}>
+              {item.heading}
+            </div>
+          ) : (
+            <div
+              key={i}
+              role="menuitem"
+              tabIndex={-1}
+              onClick={item.onSelect}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") item.onSelect?.();
+              }}
+              className={cx(
+                menuItemClass,
+                "hover:bg-bg-hover",
+                item.danger && dangerClass,
+                item.active && "bg-bg-hover",
+              )}
+            >
+              <ItemBody item={item} />
+            </div>
+          ),
+        )}
+      </div>
+    );
+  }
+  return (
+    <RContextMenu.Root modal={false}>
+      <RContextMenu.Trigger asChild>{children}</RContextMenu.Trigger>
+      <RContextMenu.Portal>
+        <RContextMenu.Content className={menuClass} aria-label={name} collisionPadding={16}>
+          {renderItems(RContextMenu, items)}
+        </RContextMenu.Content>
+      </RContextMenu.Portal>
+    </RContextMenu.Root>
+  );
+}

package/src/Menus/DropdownMenu.tsx

@@ -0,0 +1,51 @@
+import type { ReactElement } from "react";
+import { DropdownMenu as RDropdownMenu } from "radix-ui";
+import { Icon } from "../Icon/Icon.tsx";
+import { buttonClass } from "../Button/Button.tsx";
+import { renderItems } from "./Menus.shared.tsx";
+import { type DropdownMenuProps } from "./Menus.types.ts";
+import { menuClass } from "./menuClass.tsx";
+import { compactChevronClass, compactLabelClass } from "./compactTriggerClass.tsx";
+
+/** A short list of actions from a button. Arrow keys move, typing jumps, Enter selects, Esc closes. */
+export function DropdownMenu({
+  label,
+  icon,
+  items,
+  defaultOpen,
+  open,
+  onOpenChange,
+  compact = false,
+}: DropdownMenuProps): ReactElement {
+  const short = compact && icon !== undefined;
+  return (
+    <RDropdownMenu.Root
+      {...(defaultOpen === undefined ? {} : { defaultOpen })}
+      {...(open === undefined ? {} : { open })}
+      {...(onOpenChange ? { onOpenChange } : {})}
+      modal={false}
+    >
+      <RDropdownMenu.Trigger className={buttonClass()}>
+        {icon ? <Icon name={icon} size={14} /> : null}
+        {short ? <span className={compactLabelClass}>{label}</span> : label}
+        {short ? (
+          <span className={compactChevronClass}>
+            <Icon name="ChevronDown" size={14} />
+          </span>
+        ) : (
+          <Icon name="ChevronDown" size={14} />
+        )}
+      </RDropdownMenu.Trigger>
+      <RDropdownMenu.Portal>
+        <RDropdownMenu.Content
+          className={menuClass}
+          sideOffset={4}
+          align="start"
+          collisionPadding={16}
+        >
+          {renderItems(RDropdownMenu, items)}
+        </RDropdownMenu.Content>
+      </RDropdownMenu.Portal>
+    </RDropdownMenu.Root>
+  );
+}

package/src/Menus/Menus.shared.tsx

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Keys } from "../Kbd/Kbd.tsx";
+import { type MenuItem, type Parts } from "./Menus.types.ts";
+import { menuClass } from "./menuClass.tsx";
+import { menuItemClass } from "./menuItemClass.tsx";
+
+export const dangerClass = cx("text-danger-text [&_svg]:text-danger");
+
+export const headClass = cx("px-8 pt-6 pb-2 text-text-11 font-medium text-text-secondary");
+
+export const sepClass = cx("h-(--stroke-width-hairline) my-4 bg-border-subtle");
+
+export function ItemBody({ item }: { item: MenuItem }) {
+  return (
+    <>
+      {item.icon ? <Icon name={item.icon} /> : null}
+      <span className="flex-1">{item.label}</span>
+      {item.shortcut ? (
+        <span className="ms-auto">
+          <Keys keys={item.shortcut} />
+        </span>
+      ) : item.submenu || item.items ? (
+        <Icon name="ChevronRight" size={14} className="ms-auto" />
+      ) : null}
+    </>
+  );
+}
+
+export function renderItems(P: Parts, items: MenuItem[]): ReactNode {
+  return items.map((item, i) => {
+    const key = `${item.label ?? item.heading ?? "sep"}-${i}`;
+    if (item.separator) return <P.Separator key={key} className={sepClass} />;
+    if (item.heading) {
+      return (
+        <P.Label key={key} className={headClass}>
+          {item.heading}
+        </P.Label>
+      );
+    }
+    if (item.items) {
+      return (
+        <P.Sub key={key}>
+          <P.SubTrigger className={cx(menuItemClass, item.danger && dangerClass)}>
+            <ItemBody item={item} />
+          </P.SubTrigger>
+          <P.Portal>
+            <P.SubContent className={menuClass} sideOffset={4}>
+              {renderItems(P, item.items)}
+            </P.SubContent>
+          </P.Portal>
+        </P.Sub>
+      );
+    }
+    return (
+      <P.Item
+        key={key}
+        className={cx(menuItemClass, item.danger && dangerClass, item.active && "bg-bg-hover")}
+        {...(item.disabled ? { disabled: true } : {})}
+        {...(item.onSelect ? { onSelect: item.onSelect } : {})}
+      >
+        <ItemBody item={item} />
+      </P.Item>
+    );
+  });
+}

package/src/Menus/Menus.tsx

@@ -0,0 +1,13 @@
+export {
+  type MenuItem,
+  type DropdownMenuProps,
+  type ContextMenuProps,
+  type OrgSwitcherProps,
+} from "./Menus.types.ts";
+export { menuClass } from "./menuClass.tsx";
+export { menuItemClass } from "./menuItemClass.tsx";
+export { DropdownMenu } from "./DropdownMenu.tsx";
+export { ContextMenu } from "./ContextMenu.tsx";
+export { OrgSwitcher } from "./OrgSwitcher.tsx";
+export { orgSwitcherTriggerClass } from "./orgSwitcherTriggerClass.tsx";
+export { compactChevronClass, compactLabelClass } from "./compactTriggerClass.tsx";

package/src/Menus/Menus.types.ts

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import type { ContextMenu as RContextMenu, DropdownMenu as RDropdownMenu } from "radix-ui";
+import type {
+  ContextMenuProps as ReferenceContextMenuProps,
+  DropdownMenuProps as ReferenceDropdownMenuProps,
+  MenuItem as ReferenceMenuItem,
+  OrgSwitcherProps as ReferenceOrgSwitcherProps,
+} from "../types/reference";
+
+export interface MenuItem extends ReferenceMenuItem {
+  onSelect?: () => void;
+  disabled?: boolean;
+  /** Items of a submenu; the item opens it with Arrow Right (Arrow Left in right-to-left). */
+  items?: MenuItem[];
+}
+
+export type DropdownMenuProps = Omit<ReferenceDropdownMenuProps, "items"> & {
+  items: MenuItem[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Below md, a trigger with an icon shows only the icon; the label stays as its accessible name
+   * (the account menu in a phone's top bar).
+   */
+  compact?: boolean;
+};
+
+export type ContextMenuProps = Omit<ReferenceContextMenuProps, "items"> & {
+  items: MenuItem[];
+  /** The region that opens the menu on right-click, long press or Shift+F10. Without it the menu renders on its own. */
+  children?: ReactNode;
+  /**
+   * Opens the menu at a viewport point instead of over `children`: where the pointer was, or a
+   * focused cell's corner from the keyboard. The page opens it (a table row's right-click or
+   * Shift+F10), so the menu code can load on demand; `onClose` runs when it closes.
+   */
+  at?: { x: number; y: number };
+  onClose?: () => void;
+  /** Takes focus back when a point menu closes; the element that opened it, such as a table cell. */
+  returnFocus?: HTMLElement | null;
+};
+
+export type OrgSwitcherProps = ReferenceOrgSwitcherProps & {
+  onSelect?: (name: string) => void;
+  onMarketplace?: () => void;
+  defaultOpen?: boolean;
+};
+
+export type Parts = typeof RDropdownMenu | typeof RContextMenu;

package/src/Menus/OrgSwitcher.tsx

@@ -0,0 +1,69 @@
+import type { ReactElement } from "react";
+import { DropdownMenu as RDropdownMenu } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Badge } from "../Chips/Chips.tsx";
+import { BrandMark } from "../BrandMark/BrandMark.tsx";
+import { headClass, sepClass } from "./Menus.shared.tsx";
+import { type OrgSwitcherProps } from "./Menus.types.ts";
+import { menuClass } from "./menuClass.tsx";
+import { menuItemClass } from "./menuItemClass.tsx";
+import { orgSwitcherTriggerClass } from "./orgSwitcherTriggerClass.tsx";
+
+/** Moves between every org a person works with; the marketplace sits at the bottom. */
+export function OrgSwitcher({
+  current,
+  heading,
+  orgs,
+  onSelect,
+  onMarketplace,
+  defaultOpen,
+}: OrgSwitcherProps): ReactElement {
+  const t = useT();
+  return (
+    <RDropdownMenu.Root {...(defaultOpen === undefined ? {} : { defaultOpen })} modal={false}>
+      <RDropdownMenu.Trigger aria-label={current} className={orgSwitcherTriggerClass}>
+        <BrandMark name={current} size="sm" />
+        <Icon name="ChevronsUpDown" size={14} color="var(--color-text-secondary)" />
+      </RDropdownMenu.Trigger>
+      <RDropdownMenu.Portal>
+        <RDropdownMenu.Content
+          className={cx(menuClass, "w-(--ui-orgsw)")}
+          sideOffset={4}
+          align="start"
+          collisionPadding={16}
+        >
+          <RDropdownMenu.Label className={headClass}>{heading}</RDropdownMenu.Label>
+          <RDropdownMenu.RadioGroup value={current} onValueChange={(name) => onSelect?.(name)}>
+            {orgs.map((o) => (
+              <RDropdownMenu.RadioItem
+                key={o.name}
+                value={o.name}
+                className={cx(menuItemClass, "h-row-comfortable")}
+              >
+                <BrandMark name={o.name} size="sm" iconOnly />
+                <span className="flex flex-1 flex-col">
+                  <span>{o.name}</span>
+                  <span className="text-text-12 text-text-secondary">{o.role}</span>
+                </span>
+                <RDropdownMenu.ItemIndicator>
+                  <Icon name="Check" size={14} />
+                </RDropdownMenu.ItemIndicator>
+                {o.name !== current && o.badge ? <Badge count={o.badge} tone="accent" /> : null}
+              </RDropdownMenu.RadioItem>
+            ))}
+          </RDropdownMenu.RadioGroup>
+          <RDropdownMenu.Separator className={sepClass} />
+          <RDropdownMenu.Item
+            className={menuItemClass}
+            {...(onMarketplace ? { onSelect: onMarketplace } : {})}
+          >
+            <Icon name="Compass" />
+            <span>{t("org.marketplace")}</span>
+          </RDropdownMenu.Item>
+        </RDropdownMenu.Content>
+      </RDropdownMenu.Portal>
+    </RDropdownMenu.Root>
+  );
+}

package/src/Menus/compactTriggerClass.tsx

@@ -0,0 +1,7 @@
+/**
+ * A compact DropdownMenu trigger's label and chevron classes: below md only the icon shows and the
+ * label stays as the accessible name. Exported for a host that renders the closed trigger before
+ * the menu loads.
+ */
+export const compactLabelClass = "max-md:sr-only";
+export const compactChevronClass = "contents max-md:hidden";

package/src/Menus/menuClass.tsx

@@ -0,0 +1,4 @@
+import { cx } from "../lib/cx.ts";
+import { popoverPanelClass } from "../Overlays/Overlays.tsx";
+
+export const menuClass = cx(popoverPanelClass, "min-w-(--ui-menu-min) p-4 z-dropdown");

package/src/Menus/menuItemClass.tsx

@@ -0,0 +1,7 @@
+import { cx } from "../lib/cx.ts";
+
+export const menuItemClass = cx(
+  "flex items-center gap-8 h-control-lg px-8 rounded-control text-text-primary cursor-pointer outline-none select-none",
+  "data-highlighted:bg-bg-hover data-[state=open]:bg-bg-hover data-disabled:opacity-disabled data-disabled:cursor-not-allowed",
+  "pointer-coarse:min-h-target-coarse [&_svg]:text-text-secondary",
+);

package/src/Menus/orgSwitcherTriggerClass.tsx

@@ -0,0 +1,7 @@
+import { cx } from "../lib/cx.ts";
+
+/** The OrgSwitcher trigger's classes, for a host that renders the closed trigger before the menu loads. */
+export const orgSwitcherTriggerClass = cx(
+  "flex items-center justify-between gap-8 w-(--ui-orgsw) max-w-full h-row-default px-8 rounded-control",
+  "bg-transparent text-text-primary cursor-pointer hover:bg-bg-hover pointer-coarse:min-h-target-coarse",
+);

package/src/Money/README.md

@@ -0,0 +1,6 @@
+# Money
+
+Money displays an amount with tabular numerals, or Unpriced when the amount is null.
+
+- Null renders Unpriced, never $0.00 or an empty string. Aggregates of blanks are blank.
+- Opportunities with no compensation pass `unpricedLabel: 'Rate on Request'`.

package/src/MultiSelect/README.md

@@ -0,0 +1,3 @@
+# MultiSelect
+
+MultiSelect picks several values; picks show as removable chips and Backspace removes the last.

package/src/Navigation/Accordion.tsx

@@ -0,0 +1,59 @@
+import { type ReactElement } from "react";
+import { Accordion as RAccordion } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { type AccordionProps } from "./Navigation.types.ts";
+
+/** Progressively discloses sections; each header is a button that Enter or Space toggles. */
+export function Accordion({
+  items,
+  keepMounted = false,
+  headingLevel = 3,
+}: AccordionProps): ReactElement {
+  const Heading = `h${headingLevel}` as const;
+  return (
+    <RAccordion.Root
+      type="multiple"
+      defaultValue={items.filter((it) => it.open).map((it) => it.title)}
+      className="rounded-card border border-border-subtle"
+    >
+      {items.map((it) => (
+        <RAccordion.Item
+          key={it.title}
+          value={it.title}
+          className="group border-b border-border-subtle last:border-b-0"
+        >
+          <RAccordion.Header asChild>
+            <Heading className="m-0">
+              <RAccordion.Trigger
+                className={cx(
+                  "flex items-center gap-6 w-full h-(--ui-accordion-row) px-12 bg-transparent border-0 cursor-pointer",
+                  "font-medium text-text-13 text-start pointer-coarse:min-h-target-coarse",
+                )}
+              >
+                <Icon
+                  name="ChevronRight"
+                  size={14}
+                  className="text-text-secondary transition-transform duration-fast ease-standard group-data-[state=open]:rotate-90 group-data-[state=open]:rtl:-rotate-90"
+                />
+                <span>{it.title}</span>
+                {it.meta ? (
+                  <span className="ms-auto text-text-secondary font-regular">{it.meta}</span>
+                ) : null}
+              </RAccordion.Trigger>
+            </Heading>
+          </RAccordion.Header>
+          <RAccordion.Content
+            {...(keepMounted ? { forceMount: true as const } : {})}
+            className={cx(
+              "pb-12 ps-(--ui-accordion-indent) pe-12 text-text-secondary",
+              keepMounted && "data-[state=closed]:hidden",
+            )}
+          >
+            {it.content}
+          </RAccordion.Content>
+        </RAccordion.Item>
+      ))}
+    </RAccordion.Root>
+  );
+}

package/src/Navigation/Breadcrumbs.tsx

@@ -0,0 +1,59 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { type BreadcrumbsProps } from "./Navigation.types.ts";
+
+/** One crumb's text: shrinks with an ellipsis when the trail runs out of room, titled in full. */
+const LABEL = "block truncate";
+
+/**
+ * Org, workspace, project, scope node, module and record; the last is the current page. The trail
+ * stays on one line: in a narrow header (a phone's top bar) or under a longer translation each crumb
+ * shrinks with an ellipsis and keeps its whole label as a title, instead of wrapping out of the
+ * header's height (Section 15, gate 16). Below md only the parent and the current page show, so a
+ * phone's top bar keeps two readable crumbs instead of five cut to a letter each (A59-004).
+ */
+export function Breadcrumbs({ items }: BreadcrumbsProps): ReactElement {
+  const t = useT();
+  return (
+    <nav aria-label={t("nav.breadcrumb")} className="min-w-0">
+      <ol className="flex items-center gap-4 m-0 p-0 list-none text-text-13 text-text-secondary max-w-full min-w-0">
+        {items.map((it, i) => {
+          const last = i === items.length - 1;
+          const early = i < items.length - 2;
+          return (
+            <li
+              key={`${it.label}-${i}`}
+              className={cx("inline-flex items-center gap-4 min-w-0", early && "max-md:hidden")}
+            >
+              {last ? (
+                <span aria-current="page" className={`${LABEL} text-text-primary`} title={it.label}>
+                  {it.label}
+                </span>
+              ) : it.href ? (
+                <a
+                  href={it.href}
+                  className="xos-hit min-w-0 text-inherit no-underline hover:text-text-primary"
+                >
+                  <span className={LABEL} title={it.label}>
+                    {it.label}
+                  </span>
+                </a>
+              ) : (
+                <span className={LABEL} title={it.label}>
+                  {it.label}
+                </span>
+              )}
+              {last ? null : (
+                <span className="shrink-0 text-text-tertiary">
+                  <Icon name="chevron-right" size={12} />
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/Navigation/MoreFields.tsx

@@ -0,0 +1,42 @@
+import { type ReactElement, type ReactNode } from "react";
+import { useT } from "../lib/context.tsx";
+import { Accordion } from "./Accordion.tsx";
+
+export interface MoreFieldsProps {
+  /** The fields past the seventh. */
+  children: ReactNode;
+  /** Opens the section, for example when one of its fields has an error to show. */
+  open?: boolean;
+  /**
+   * The section header's heading level. A form most often sits right under the page title, where a
+   * level 3 header skips a level; 2 follows any heading without skipping one.
+   */
+  headingLevel?: 2 | 3 | 4;
+}
+
+/**
+ * The More fields section of a long form (Section 11.10, Section 18 gate 27): a form shows at most
+ * seven fields and puts the rest here. Collapsed fields stay in the DOM, hidden, so they keep their
+ * values and submit with the form.
+ */
+export function MoreFields({
+  children,
+  open = false,
+  headingLevel = 2,
+}: MoreFieldsProps): ReactElement {
+  const t = useT();
+  return (
+    <Accordion
+      key={open ? "open" : "closed"}
+      keepMounted
+      headingLevel={headingLevel}
+      items={[
+        {
+          title: t("form.moreFields"),
+          open,
+          content: <div className="flex flex-col gap-16 pt-4 text-text-primary">{children}</div>,
+        },
+      ]}
+    />
+  );
+}

package/src/Navigation/Navigation.shared.tsx

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import { cx } from "../lib/cx.ts";
+import { type NavItem } from "./Navigation.types.ts";
+
+/** A destination: a link when it has an href, otherwise a button that runs the item's action. */
+export function ItemAction({
+  item,
+  active,
+  className,
+  children,
+}: {
+  item: NavItem;
+  active: boolean;
+  className: string;
+  children: ReactNode;
+}) {
+  const current = active ? ("page" as const) : undefined;
+  return item.href ? (
+    <a href={item.href} aria-current={current} onClick={item.onSelect} className={className}>
+      {children}
+    </a>
+  ) : (
+    <button
+      type="button"
+      aria-current={current}
+      onClick={item.onSelect}
+      className={cx(className, "bg-transparent border-0 cursor-pointer")}
+    >
+      {children}
+    </button>
+  );
+}

package/src/Navigation/Navigation.tsx

@@ -0,0 +1,21 @@
+export {
+  type TabsProps,
+  type SegmentedControlProps,
+  type AccordionProps,
+  type BreadcrumbsProps,
+  type PaginationProps,
+  type NavItem,
+  type SidebarProps,
+  type TopNavProps,
+  type TabBarProps,
+} from "./Navigation.types.ts";
+export { Tabs } from "./Tabs.tsx";
+export { SegmentedControl } from "./SegmentedControl.tsx";
+export { Accordion } from "./Accordion.tsx";
+export { MoreFields, type MoreFieldsProps } from "./MoreFields.tsx";
+export { Breadcrumbs } from "./Breadcrumbs.tsx";
+export { Pagination } from "./Pagination.tsx";
+export { Sidebar } from "./Sidebar.tsx";
+export { sidebarClass, sidebarItemClass } from "./sidebar-classes.ts";
+export { TopNav } from "./TopNav.tsx";
+export { TabBar } from "./TabBar.tsx";