@tonycodes-ui/mortar 0.0.0-stage → 0.12.0

package/src/workspace.tsx

@@ -0,0 +1,333 @@
+import { KitLink, type ItemGroup } from "./navigation.js";
+import { Fragment, useId, type ReactNode } from "react";
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  Description,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
+import { Button } from "./primitives.js";
+import { Kbd } from "./display.js";
+import { ChevronRight, Close } from "./icons.js";
+import { childLevel, headingTag, type HeadingLevel } from "./heading.js";
+import {
+  DialogFrame,
+  componentRoot,
+  cx,
+  useComponentName,
+} from "./internal.js";
+
+export interface SlideOverProps {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  children: ReactNode;
+  actions?: ReactNode;
+  /** Panel width: md (default), lg or xl. */
+  size?: "md" | "lg" | "xl";
+  /** Class on the sliding panel. */
+  className?: string;
+}
+export function SlideOver({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  size = "md",
+  className,
+}: SlideOverProps) {
+  return (
+    <DialogFrame open={open} onClose={onClose} component="SlideOver">
+      <DialogPanel
+        className={cx("m-slide-over", className)}
+        data-size={size === "md" ? undefined : size}
+      >
+        <header>
+          <div>
+            <DialogTitle>{title}</DialogTitle>
+            {description && <Description>{description}</Description>}
+          </div>
+          <Button variant="ghost" onClick={onClose} aria-label="Close panel">
+            <Close />
+          </Button>
+        </header>
+        <div className="m-slide-over-body">{children}</div>
+        {actions && <footer className="m-actions">{actions}</footer>}
+      </DialogPanel>
+    </DialogFrame>
+  );
+}
+
+export interface CommandItem {
+  id: string;
+  label: string;
+  description?: string;
+  meta?: string;
+  shortcut?: string[];
+  /** Icon or avatar before the label. */
+  icon?: ReactNode;
+  /** [start, end) character range of label to emphasise as the query match. */
+  match?: [number, number];
+  onSelect: () => void;
+}
+
+function Highlight({
+  label,
+  match,
+}: {
+  label: string;
+  match?: [number, number];
+}) {
+  if (!match) return <>{label}</>;
+  const [a, b] = match;
+  return (
+    <>
+      {label.slice(0, a)}
+      <mark>{label.slice(a, b)}</mark>
+      {label.slice(b)}
+    </>
+  );
+}
+
+export interface CommandPaletteProps {
+  open: boolean;
+  onClose: () => void;
+  query: string;
+  onQueryChange: (value: string) => void;
+  groups: ItemGroup<CommandItem>[];
+  label?: string;
+  placeholder?: string;
+  /** Announced when no group has items; defaults to "No results for “query”.". */
+  empty?: { title: string; description?: string };
+  footer?: ReactNode;
+  /** Class on the palette panel. */
+  className?: string;
+}
+/** Controlled ⌘K palette. Filtering and ranking stay with the consumer. */
+export function CommandPalette({
+  open,
+  onClose,
+  query,
+  onQueryChange,
+  groups,
+  label = "Command menu",
+  placeholder = "Type a command or search",
+  empty,
+  footer,
+  className,
+}: CommandPaletteProps) {
+  const total = groups.reduce((n, g) => n + g.items.length, 0);
+  const component = useComponentName("CommandPalette");
+  return (
+    <DialogFrame open={open} onClose={onClose} component={component}>
+      <div className="m-dialog-position m-palette-position">
+        <DialogPanel className={cx("m-palette", className)}>
+          <DialogTitle className="m-sr-only">{label}</DialogTitle>
+          <Combobox<CommandItem | null>
+            value={null}
+            onChange={(item) => {
+              if (!item) return;
+              item.onSelect();
+              onClose();
+            }}
+          >
+            <div className="m-palette-input">
+              <ComboboxInput
+                autoFocus
+                aria-label={label}
+                placeholder={placeholder}
+                value={query}
+                onChange={(e) => onQueryChange(e.target.value)}
+                onKeyDownCapture={(e) => {
+                  if (e.key === "Escape") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onClose();
+                  }
+                }}
+              />
+              <Kbd keys={["esc"]} />
+            </div>
+            <ComboboxOptions static modal={false} className="m-palette-results">
+              {groups
+                .filter((g) => g.items.length)
+                .map((group) => (
+                  <div role="group" aria-label={group.label} key={group.label}>
+                    <div className="m-palette-group" aria-hidden="true">
+                      {group.label}
+                    </div>
+                    {group.items.map((item) => (
+                      <ComboboxOption key={item.id} value={item} as={Fragment}>
+                        <div className="m-palette-item">
+                          {item.icon && (
+                            <span className="m-palette-icon" aria-hidden="true">
+                              {item.icon}
+                            </span>
+                          )}
+                          <span>
+                            <span className="m-palette-label">
+                              <Highlight
+                                label={item.label}
+                                match={item.match}
+                              />
+                            </span>
+                            {item.description && (
+                              <small>{item.description}</small>
+                            )}
+                          </span>
+                          {item.shortcut ? (
+                            <Kbd keys={item.shortcut} />
+                          ) : (
+                            item.meta && (
+                              <span className="m-palette-meta">
+                                {item.meta}
+                              </span>
+                            )
+                          )}
+                        </div>
+                      </ComboboxOption>
+                    ))}
+                  </div>
+                ))}
+            </ComboboxOptions>
+          </Combobox>
+          {/* Always mounted, so "no results" is announced when it appears.
+              It sits outside the listbox, which only allows options; the
+              options are not modal so this stays exposed (the dialog already
+              is). */}
+          <p className={total ? "m-sr-only" : "m-palette-empty"} role="status">
+            {total ? (
+              ""
+            ) : empty ? (
+              <>
+                {empty.title}
+                {empty.description && <span> {empty.description}</span>}
+              </>
+            ) : (
+              `No results for “${query}”.`
+            )}
+          </p>
+          {footer && <div className="m-palette-footer">{footer}</div>}
+        </DialogPanel>
+      </div>
+    </DialogFrame>
+  );
+}
+
+export interface StackedListItem {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  /**
+   * Second column at the end of the row, e.g. a role and "Last seen 3h ago";
+   * it wraps under the text when narrow. It sits inside the row's link, so it
+   * must not contain links or buttons.
+   */
+  meta?: ReactNode;
+  href?: string;
+}
+export interface StackedListProps {
+  /** Accessible name; defaults to the visible `title`. */
+  label?: string;
+  /** Visible heading above the list. */
+  title?: ReactNode;
+  /** Level of the title, or of the group headings when there is no title. Group headings sit one level below the title. */
+  headingLevel?: HeadingLevel;
+  /** Button or link in the header, e.g. "View all". */
+  action?: ReactNode;
+  /** Rows; with `groups` they render first, ungrouped. */
+  items?: StackedListItem[];
+  /** Sections with sticky headings, e.g. a directory grouped by letter. */
+  groups?: ItemGroup<StackedListItem>[];
+  /** Ends each row that has an `href` with a chevron, so rows read as links. */
+  chevrons?: boolean;
+  id?: string;
+  className?: string;
+}
+export function StackedList({
+  label,
+  title,
+  headingLevel = 2,
+  action,
+  items = [],
+  groups = [],
+  chevrons = false,
+  id,
+  className,
+}: StackedListProps) {
+  const base = useId();
+  const hasTitle = title !== undefined && title !== null && title !== "";
+  const Title = headingTag(headingLevel);
+  const GroupHeading = headingTag(
+    hasTitle ? childLevel(headingLevel) : headingLevel,
+  );
+  const row = (item: StackedListItem) => {
+    const body = (
+      <>
+        {item.leading}
+        <span className="m-stacked-text">
+          <strong>{item.title}</strong>
+          {item.description && <span>{item.description}</span>}
+        </span>
+        {item.meta && <span className="m-stacked-meta">{item.meta}</span>}
+        {chevrons && item.href && (
+          <span className="m-stacked-chevron" aria-hidden="true">
+            <ChevronRight />
+          </span>
+        )}
+      </>
+    );
+    return (
+      <li key={item.id}>
+        {item.href ? (
+          <KitLink href={item.href}>{body}</KitLink>
+        ) : (
+          <div>{body}</div>
+        )}
+        {item.trailing && (
+          <div className="m-stacked-trailing">{item.trailing}</div>
+        )}
+      </li>
+    );
+  };
+  return (
+    <section
+      id={id}
+      {...componentRoot("StackedList")}
+      className={cx("m-stacked-list", className)}
+      aria-label={label}
+      aria-labelledby={label || !hasTitle ? undefined : `${base}-title`}
+    >
+      {(hasTitle || action) && (
+        <header>
+          {hasTitle && (
+            <Title id={`${base}-title`} className="m-stacked-title">
+              {title}
+            </Title>
+          )}
+          {action && <div className="m-stacked-action">{action}</div>}
+        </header>
+      )}
+      {(items.length > 0 || !groups.length) && <ul>{items.map(row)}</ul>}
+      {groups.map((group, index) => (
+        <div key={group.label} className="m-stacked-group">
+          <GroupHeading
+            id={`${base}-${index}`}
+            className="m-stacked-group-heading"
+          >
+            {group.label}
+          </GroupHeading>
+          <ul aria-labelledby={`${base}-${index}`}>{group.items.map(row)}</ul>
+        </div>
+      ))}
+    </section>
+  );
+}

package/styles.css

@@ -0,0 +1,56 @@
+@import "./src/tokens.css";
+/* Component styles, one section per component, grouped by family. The order of
+   these imports is part of the cascade: keep it. */
+@import "./src/foundation.css";
+@import "./src/overlays.css";
+@import "./src/application.css";
+@import "./src/data.css";
+@import "./src/calendar.css";
+@import "./src/marketing.css";
+@import "./src/docs.css";
+@import "./src/ecommerce.css";
+@custom-variant mortar-dark (&:where([data-mortar-appearance='dark'], [data-mortar-appearance='dark'] *));
+@theme inline {
+  --color-paper: var(--m-paper);
+  --color-surface: var(--m-surface);
+  --color-sunken: var(--m-sunken);
+  --color-ink: var(--m-ink);
+  --color-muted: var(--m-muted);
+  --color-line: var(--m-line);
+  --color-primary: var(--m-primary);
+  --color-on-primary: var(--m-on-primary);
+  --color-accent: var(--m-accent);
+  --color-on-accent: var(--m-on-accent);
+  --color-focus: var(--m-focus);
+  --color-success: var(--m-success);
+  --color-warning: var(--m-warning);
+  --color-danger: var(--m-danger);
+  --color-info: var(--m-info);
+  --color-secondary: var(--m-secondary);
+  --color-selected: var(--m-selected);
+  --color-link: var(--m-link);
+  /* A brand's fonts win where it applies; otherwise the scale tokens. */
+  --font-sans: var(--m-brand-font, var(--m-font));
+  --font-heading: var(
+    --m-brand-font-heading,
+    var(--m-font-heading, var(--m-brand-font, var(--m-font)))
+  );
+  --font-mono: var(--m-mono);
+  /* Weights equal Tailwind's defaults, so these follow a retheme without
+     changing anything until one happens. */
+  --font-weight-medium: var(--m-weight-medium);
+  --font-weight-semibold: var(--m-weight-semibold);
+  --font-weight-bold: var(--m-weight-bold);
+  /* Mortar's radii under their own names (rounded-m, rounded-m-lg, …), so
+     Tailwind's rounded-sm/md/lg keep their usual sizes. */
+  --radius-m-xs: var(--m-radius-xs);
+  --radius-m-sm: var(--m-radius-sm);
+  --radius-m: var(--m-radius);
+  --radius-m-lg: var(--m-radius-lg);
+  --radius-m-xl: var(--m-radius-xl);
+  --radius-m-full: var(--m-radius-full);
+  --shadow-float: var(--m-float);
+  --tracking-display: var(--m-tracking-display);
+  --tracking-heading: var(--m-tracking-heading);
+  --tracking-caps: var(--m-tracking-caps);
+}