@reliability-design/web 1.4.6 → 1.4.8

package/dist/components/rel-chip/rel-chip.ts

@@ -1,483 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import "../rel-avatar/rel-avatar.js";
-import "@reliability-design/icons/rel-icon";
-import { announce } from "../../utils/announce";
-
-export type ChipTone = "neutral" | "danger" | "warning" | "success" | "info";
-export type ChipVariant = "fill" | "subtle";
-export type ChipSize = "sm" | "md" | "lg";
-export type ChipBorder = "default" | "rounded";
-
-@customElement("rel-chip")
-export class RelChip extends LitElement {
-  // The actually-focusable element is the inner <span tabindex="0">, not the
-  // host. Without delegatesFocus, calling host.focus() (e.g. from a parent
-  // component, or a "focus this" demo button) is a no-op since the host
-  // itself carries no tabindex — only real Tab-key traversal would still
-  // reach the inner span, because that walks the flattened DOM regardless.
-  static override shadowRootOptions: ShadowRootInit = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
-  @property({ type: String }) label = "Label";
-
-  @property({ type: String, reflect: true }) tone: ChipTone = "neutral";
-
-  @property({ type: String, reflect: true }) variant: ChipVariant = "fill";
-
-  @property({ type: String, reflect: true }) size: ChipSize = "md";
-
-  @property({ type: String, reflect: true }) border: ChipBorder = "default";
-
-  /** Icon name from the generated icon dictionary (e.g. "settings") — rendered via <rel-icon>. */
-  @property({ type: String, attribute: "leading-icon" }) leadingIcon?: string;
-  @property({ type: String, attribute: "trailing-icon" }) trailingIcon?: string;
-  /** Initials text for the avatar (e.g. "JD"). Mutually exclusive with leadingIcon. */
-  @property({ type: String }) avatar?: string;
-
-  @property({ type: Boolean }) removable = false;
-
-  /** IMPORTANT: reflected so CSS + Angular can see it */
-  @property({ type: Boolean, reflect: true }) removed = false;
-
-  /** Opt-in native drag-and-drop — reflects the Figma "Dragged" state automatically during a real drag gesture. */
-  // Explicit attribute mapping — Lit's default attribute name for a camelCase
-  // property is the name fully lowercased (no hyphens), so without this it'd
-  // only respond to draggablechip="", not draggable-chip.
-  @property({ type: Boolean, attribute: "draggable-chip" }) draggableChip = false;
-
-  /** Reflected so CSS can target the Figma "Dragged" visual state. Driven automatically by dragstart/dragend when draggableChip is set. */
-  @state() private dragging = false;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-flex;
-      width: auto;
-      flex: 0 0 auto;
-    }
-
-    :host([removed]) {
-      display: none;
-    }
-
-    .chip {
-      display: inline-flex;
-      align-items: center;
-      box-sizing: border-box;
-      border: 1px solid transparent;
-      gap: var(--rel-spacing-xs);
-      cursor: pointer;
-      user-select: none;
-      white-space: nowrap;
-      outline: none;
-      background: transparent;
-      transition: background-color 0.15s ease;
-    }
-
-    .chip-action {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--rel-spacing-xs);
-      outline: none;
-    }
-
-    /* ── Size ── */
-    :host([size="lg"]) .chip {
-      height: 32px;
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);
-      font-family: var(--rel-body-lg-regular-font-family);
-      font-weight: var(--rel-body-lg-medium-font-weight);
-      font-size: var(--rel-body-lg-regular-font-size);
-      line-height: var(--rel-body-lg-regular-line-height);
-      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
-    }
-
-    :host([size="md"]) .chip {
-      height: 28px;
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-medium-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-    }
-
-    :host([size="sm"]) .chip {
-      height: 24px;
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-xs-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
-    }
-
-    /* ── Border / shape — "Rounded" also widens horizontal padding to 12px,
-       consistent across all three sizes per the Figma spec. ── */
-    :host([border="default"]) .chip {
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    :host([border="rounded"]) .chip {
-      border-radius: var(--rel-border-radius-full-rounded);
-      padding-left: var(--rel-spacing-sm);
-      padding-right: var(--rel-spacing-sm);
-    }
-
-    /* ── Tone x Variant — V2 action tokens (auto light/dark) ── */
-    :host([tone="neutral"][variant="fill"]) .chip {
-      background: var(--rel-action-neutral-fill);
-      color: var(--rel-text-inverse);
-    }
-    :host([tone="neutral"][variant="subtle"]) .chip {
-      background: var(--rel-action-neutral-subtle);
-      color: var(--rel-action-neutral-label-icons-subtle);
-    }
-    :host([tone="danger"][variant="fill"]) .chip {
-      background: var(--rel-action-danger-fill);
-      color: var(--rel-text-static-light);
-    }
-    :host([tone="danger"][variant="subtle"]) .chip {
-      background: var(--rel-action-danger-subtle);
-      color: var(--rel-action-danger-label-icons-subtle);
-    }
-    :host([tone="warning"][variant="fill"]) .chip {
-      background: var(--rel-action-warning-fill);
-      color: var(--rel-action-warning-label-icons-fill);
-    }
-    :host([tone="warning"][variant="subtle"]) .chip {
-      background: var(--rel-action-warning-subtle);
-      color: var(--rel-action-warning-label-icons-subtle);
-    }
-    :host([tone="success"][variant="fill"]) .chip {
-      background: var(--rel-action-success-fill);
-      color: var(--rel-action-success-label-icons-fill);
-    }
-    :host([tone="success"][variant="subtle"]) .chip {
-      background: var(--rel-action-success-subtle);
-      color: var(--rel-action-success-label-icons-subtle);
-    }
-    :host([tone="info"][variant="fill"]) .chip {
-      background: var(--rel-action-info-fill);
-      color: var(--rel-action-info-label-icons-fill);
-    }
-    :host([tone="info"][variant="subtle"]) .chip {
-      background: var(--rel-action-info-subtle);
-      color: var(--rel-action-info-label-icons-subtle);
-    }
-
-    /* ── Hover / Dragged — per-tone V2 action state tokens ── */
-    :host([tone="neutral"][variant="fill"]) .chip:hover {
-      background: var(--rel-action-neutral-fill-hover);
-    }
-    :host([tone="neutral"][variant="fill"]) .chip:active,
-    :host([tone="neutral"][variant="fill"][dragging]) .chip {
-      background: var(--rel-action-neutral-fill-dragged);
-    }
-    :host([tone="neutral"][variant="subtle"]) .chip:hover {
-      border-color: var(--rel-action-neutral-border-subtle-hover);
-      background: var(--rel-action-neutral-subtle-hover);
-    }
-    :host([tone="neutral"][variant="subtle"]) .chip:active,
-    :host([tone="neutral"][variant="subtle"][dragging]) .chip {
-      border-color: var(--rel-action-neutral-border-subtle-dragged);
-      background: var(--rel-action-neutral-subtle-dragged);
-    }
-    :host([tone="danger"][variant="fill"]) .chip:hover {
-      background: var(--rel-action-danger-fill-hover);
-    }
-    :host([tone="danger"][variant="fill"]) .chip:active,
-    :host([tone="danger"][variant="fill"][dragging]) .chip {
-      background: var(--rel-action-danger-fill-dragged);
-    }
-    :host([tone="danger"][variant="subtle"]) .chip:hover {
-      border-color: var(--rel-action-danger-border-subtle-hover);
-      background: var(--rel-action-danger-subtle-hover);
-      color: var(--rel-action-danger-label-icons-subtle-hover);
-    }
-    :host([tone="danger"][variant="subtle"]) .chip:active,
-    :host([tone="danger"][variant="subtle"][dragging]) .chip {
-      border-color: var(--rel-action-danger-border-subtle-dragged);
-      background: var(--rel-action-danger-subtle-dragged);
-      color: var(--rel-action-danger-label-icons-subtle-dragged);
-    }
-    :host([tone="warning"][variant="fill"]) .chip:hover {
-      background: var(--rel-action-warning-fill-hover);
-    }
-    :host([tone="warning"][variant="fill"]) .chip:active,
-    :host([tone="warning"][variant="fill"][dragging]) .chip {
-      background: var(--rel-action-warning-fill-dragged);
-    }
-    :host([tone="warning"][variant="subtle"]) .chip:hover {
-      border-color: var(--rel-action-warning-border-subtle-hover);
-      background: var(--rel-action-warning-subtle-hover);
-      color: var(--rel-action-warning-label-icons-subtle-hover);
-    }
-    :host([tone="warning"][variant="subtle"]) .chip:active,
-    :host([tone="warning"][variant="subtle"][dragging]) .chip {
-      border-color: var(--rel-action-warning-border-subtle-dragged);
-      background: var(--rel-action-warning-subtle-dragged);
-      color: var(--rel-action-warning-label-icons-subtle-dragged);
-    }
-    :host([tone="success"][variant="fill"]) .chip:hover {
-      background: var(--rel-action-success-fill-hover);
-    }
-    :host([tone="success"][variant="fill"]) .chip:active,
-    :host([tone="success"][variant="fill"][dragging]) .chip {
-      background: var(--rel-action-success-fill-dragged);
-    }
-    :host([tone="success"][variant="subtle"]) .chip:hover {
-      border-color: var(--rel-action-success-border-subtle-hover);
-      background: var(--rel-action-success-subtle-hover);
-      color: var(--rel-action-success-label-icons-subtle-hover);
-    }
-    :host([tone="success"][variant="subtle"]) .chip:active,
-    :host([tone="success"][variant="subtle"][dragging]) .chip {
-      border-color: var(--rel-action-success-border-subtle-dragged);
-      background: var(--rel-action-success-subtle-dragged);
-      color: var(--rel-action-success-label-icons-subtle-dragged);
-    }
-    :host([tone="info"][variant="fill"]) .chip:hover {
-      background: var(--rel-action-info-fill-hover);
-    }
-    :host([tone="info"][variant="fill"]) .chip:active,
-    :host([tone="info"][variant="fill"][dragging]) .chip {
-      background: var(--rel-action-info-fill-dragged);
-    }
-    :host([tone="info"][variant="subtle"]) .chip:hover {
-      border-color: var(--rel-action-info-border-subtle-hover);
-      background: var(--rel-action-info-subtle-hover);
-      color: var(--rel-action-info-label-icons-subtle-hover);
-    }
-    :host([tone="info"][variant="subtle"]) .chip:active,
-    :host([tone="info"][variant="subtle"][dragging]) .chip {
-      border-color: var(--rel-action-info-border-subtle-dragged);
-      background: var(--rel-action-info-subtle-dragged);
-      color: var(--rel-action-info-label-icons-subtle-dragged);
-    }
-
-    :host([dragging]) .chip {
-      cursor: grabbing;
-    }
-
-    /* ── Focused — 1.5px outline, drawn outside (matches Figma's
-       strokeAlign:OUTSIDE) so it never affects layout. Same color
-       regardless of tone, per spec. OUTSIDE alignment means the stroke
-       sits flush against the shape's edge with zero gap, extending
-       outward by strokeWeight — outline-offset must be 0, not a positive
-       gap (a positive offset was the bug: it drew a visible gap that
-       doesn't exist in Figma). ── */
-    .chip:has(.chip-action:focus-visible) {
-      outline: 1.5px solid var(--rel-chip-focus-ring, var(--rel-border-focus));
-      outline-offset: 1.5px;
-      box-shadow: 0 0 0 1.5px var(--rel-border-focus-inner);
-    }
-
-    /* ── Icons ── */
-    /* rel-icon renders its SVG inside its own shadow root, so sizing has to
-       go through --rel-icon-size (a custom property — pierces shadow
-       boundaries) rather than a ".chip-icon svg" selector, which can never
-       reach across shadow DOM. */
-    .chip-icon {
-      flex-shrink: 0;
-    }
-
-    :host([size="lg"]) .chip-icon {
-      --rel-icon-size: 20px;
-    }
-
-    :host([size="md"]) .chip-icon {
-      --rel-icon-size: 18px;
-    }
-
-    :host([size="sm"]) .chip-icon {
-      --rel-icon-size: 16px;
-    }
-
-    /* ── Avatar — not shown in the Figma sample. rel-avatar sizes its inner
-       .avatar div directly from its own "size" prop (fixed presets only —
-       no --rel-avatar-size custom property escape hatch like rel-icon has),
-       so a host-level width/height override here would only resize the
-       empty outer wrapper, not the actual painted circle. "xs" (20px) is
-       rel-avatar's smallest preset; used uniformly across all three chip
-       sizes since there's nothing smaller to ask for. ── */
-    .chip rel-avatar {
-      display: inline-flex;
-      flex-shrink: 0;
-    }
-
-    :host([variant="fill"]) .chip rel-avatar {
-      --rel-avatar-bg-fill: var(--rel-action-overlay-hover-inverse);
-      --rel-avatar-color-fill: var(--rel-action-neutral-label-icons-fill-inverse);
-    }
-
-    :host([variant="subtle"]) .chip rel-avatar {
-      --rel-avatar-bg-fill: var(--rel-action-overlay-hover-strong);
-      --rel-avatar-color-fill: currentColor;
-    }
-
-    /* ── Remove (close) button ── */
-    .chip-remove {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      cursor: pointer;
-      opacity: 0.7;
-      background: none;
-      border: none;
-      color: inherit;
-      font: inherit;
-      padding: 0;
-      line-height: 1;
-    }
-
-    .chip-remove:hover {
-      opacity: 1;
-    }
-
-    .chip-remove:focus-visible {
-      outline: 1.5px solid currentColor;
-      outline-offset: 1px;
-      border-radius: var(--rel-border-radius-xs);
-    }
-
-    :host([size="lg"]) .chip-remove {
-      --rel-icon-size: 20px;
-    }
-    :host([size="md"]) .chip-remove {
-      --rel-icon-size: 18px;
-    }
-    :host([size="sm"]) .chip-remove {
-      --rel-icon-size: 16px;
-    }
-
-  `;
-
-  private get classes() {
-    return "chip";
-  }
-
-  private handleRemove(event: Event) {
-    event.stopPropagation();
-    this.removed = true;
-
-    this.dispatchEvent(
-      new CustomEvent("removed", {
-        bubbles: true,
-        composed: true,
-      })
-    );
-    announce(`${this.label} removed`);
-  }
-
-  /** The chip body is announced as a button, so it must also act on keys:
-   *  Enter/Space re-dispatch as a host click (consumers' @click handlers
-   *  fire), Delete/Backspace remove when removable, and arrow keys ask the
-   *  container to reorder a draggable chip (`chip-move`) — the keyboard
-   *  alternative to pointer drag-and-drop. */
-  private handleKeydown = (e: KeyboardEvent) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      this.click();
-      return;
-    }
-    if ((e.key === "Delete" || e.key === "Backspace") && this.removable) {
-      e.preventDefault();
-      this.handleRemove(e);
-      return;
-    }
-    if (this.draggableChip && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
-      e.preventDefault();
-      this.dispatchEvent(
-        new CustomEvent("chip-move", {
-          detail: { direction: e.key === "ArrowLeft" ? -1 : 1 },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }
-  };
-
-  private onDragStart = (e: DragEvent) => {
-    if (!this.draggableChip) return;
-    this.dragging = true;
-    e.dataTransfer?.setData("text/plain", this.label);
-  };
-
-  private onDragEnd = () => {
-    this.dragging = false;
-  };
-
-  protected updated(changed: Map<string, unknown>) {
-    if (changed.has("draggableChip")) {
-      if (this.draggableChip) {
-        this.setAttribute("draggable", "true");
-        this.addEventListener("dragstart", this.onDragStart);
-        this.addEventListener("dragend", this.onDragEnd);
-      } else {
-        this.removeAttribute("draggable");
-        this.removeEventListener("dragstart", this.onDragStart);
-        this.removeEventListener("dragend", this.onDragEnd);
-        this.dragging = false;
-      }
-    }
-    if (changed.has("dragging")) {
-      this.toggleAttribute("dragging", this.dragging);
-    }
-  }
-
-  render() {
-    const showAvatar = !!this.avatar;
-    const showLeadingIcon = !showAvatar && !!this.leadingIcon;
-
-    if (this.avatar && this.leadingIcon) {
-      console.warn(
-        "[rel-chip] leadingIcon and avatar are mutually exclusive. avatar takes precedence."
-      );
-    }
-
-    return html`
-      <span part="base" class="${this.classes}">
-        <span
-          class="chip-action"
-          role="button"
-          tabindex="0"
-          aria-label="${this.label}"
-          @keydown=${this.handleKeydown}
-        >
-          ${showAvatar
-            ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
-            : null}
-          ${showLeadingIcon
-            ? html`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
-            : null}
-
-          <span part="label" class="chip-label">${this.label}</span>
-
-          ${this.trailingIcon
-            ? html`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>`
-            : null}
-        </span>
-        ${this.removable
-          ? html`<button
-              class="chip-remove"
-              aria-label="Remove ${this.label}"
-              @click=${this.handleRemove}
-            >
-              <rel-icon name="close"></rel-icon>
-            </button>`
-          : null}
-      </span>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "rel-chip": RelChip;
-  }
-}

package/dist/components/rel-container/rel-container.ts

@@ -1,95 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-@customElement("rel-container")
-export class RelContainer extends LitElement {
-  @property({ type: String, reflect: true }) padding: "sm" | "md" | "lg" | "xl" = "md";
-  @property({ type: Boolean }) shadow = false;
-  @property({ type: String, reflect: true }) background: "light" | "white" | "none" = "white";
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    .reliability-container {
-      border-radius: var(--rel-border-radius-sm);
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-    }
-
-    .bg-white {
-      background-color: var(--rel-bg-surface);
-    }
-
-    .bg-light {
-      background-color: var(--rel-bg-surface-elevated);
-    }
-
-    .bg-none {
-      background: transparent;
-    }
-
-    /* Default typography for slotted container content (Figma roles) */
-    ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4) {
-      font-family: var(--rel-headings-sm-font-family);
-      font-weight: var(--rel-headings-sm-font-weight);
-      font-size: var(--rel-headings-sm-font-size);
-      line-height: var(--rel-headings-sm-line-height);
-      letter-spacing: var(--rel-headings-sm-letter-spacing);
-      color: var(--rel-text-default);
-      margin: 0 0 var(--rel-spacing-lg) 0;
-    }
-
-    ::slotted(p) {
-      font-family: var(--rel-body-md-regular-font-family);
-      font-weight: var(--rel-body-md-regular-font-weight);
-      font-size: var(--rel-body-md-regular-font-size);
-      line-height: var(--rel-body-md-regular-line-height);
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
-      color: var(--rel-text-body);
-      margin: 0;
-    }
-
-    .padding-sm {
-      padding: var(--rel-spacing-xs);
-    }
-
-    .padding-md {
-      padding: var(--rel-spacing-md);
-    }
-
-    .padding-lg {
-      padding: var(--rel-spacing-xl);
-    }
-
-    .padding-xl {
-      padding: var(--rel-spacing-2xl);
-    }
-
-    .shadow {
-      box-shadow: var(--rel-shadows-shadow-300);
-    }
-  `;
-
-  private get classes() {
-    return [
-      "reliability-container",
-      `bg-${this.background}`,
-      `padding-${this.padding}`,
-      this.shadow ? "shadow" : "",
-    ].join(" ");
-  }
-
-  render() {
-    return html`
-      <div part="base container" class="${this.classes}">
-        <slot></slot>
-      </div>
-    `;
-  }
-}

package/dist/components/rel-date-picker/date-format.test.ts

@@ -1,43 +0,0 @@
-import { test } from "node:test";
-import assert from "node:assert/strict";
-import { formatDatePattern } from "./date-format";
-
-// Local, DOM-free date (noon avoids any TZ edge on the calendar day).
-const d = new Date(2026, 6, 21, 12, 0, 0); // 2026-07-21 (month is 0-based)
-const single = new Date(2026, 2, 5, 12, 0, 0); // 2026-03-05 → single-digit M/D
-
-test("YYYY-MM-DD (ISO, the primary ask)", () => {
-  assert.equal(formatDatePattern(d, "YYYY-MM-DD"), "2026-07-21");
-});
-
-test("MM/DD/YYYY (US)", () => {
-  assert.equal(formatDatePattern(d, "MM/DD/YYYY"), "07/21/2026");
-});
-
-test("DD/MM/YYYY (EU)", () => {
-  assert.equal(formatDatePattern(d, "DD/MM/YYYY"), "21/07/2026");
-});
-
-test("zero-padding vs single-digit tokens", () => {
-  assert.equal(formatDatePattern(single, "YYYY-MM-DD"), "2026-03-05");
-  assert.equal(formatDatePattern(single, "D/M/YYYY"), "5/3/2026");
-  assert.equal(formatDatePattern(single, "YY"), "26");
-});
-
-test("named-month tokens are locale-aware", () => {
-  assert.equal(formatDatePattern(d, "MMMM D, YYYY", "en-US"), "July 21, 2026");
-  assert.equal(formatDatePattern(d, "MMM DD", "en-US"), "Jul 21");
-  // German locale month name
-  assert.equal(formatDatePattern(d, "MMMM", "de-DE"), "Juli");
-});
-
-test("bracketed literals pass through without token substitution", () => {
-  assert.equal(formatDatePattern(d, "[Week of] YYYY-MM-DD"), "Week of 2026-07-21");
-  // 'M' and 'D' inside a bracketed literal are NOT substituted
-  assert.equal(formatDatePattern(d, "[Manifest Due:] DD/MM"), "Manifest Due: 21/07");
-});
-
-test("arbitrary separators pass through", () => {
-  assert.equal(formatDatePattern(d, "YYYY.MM.DD"), "2026.07.21");
-  assert.equal(formatDatePattern(d, "DD MMM YYYY", "en-US"), "21 Jul 2026");
-});

package/dist/components/rel-date-picker/date-format.ts

@@ -1,47 +0,0 @@
-/**
- * Token-based date formatting for rel-date-picker's selected-value display.
- *
- * Pure (Date + Intl only, no DOM) so it is unit-testable in Node. Tokens are
- * matched longest-first; anything else (separators like `-` `/` `.` and spaces)
- * passes through literally. Wrap literal text that contains token letters in
- * square brackets, e.g. `[Week of] YYYY-MM-DD`.
- *
- * | Token | Meaning                | Example (2026-07-21) |
- * |-------|------------------------|----------------------|
- * | YYYY  | 4-digit year           | 2026                 |
- * | YY    | 2-digit year           | 26                   |
- * | MMMM  | full month (locale)    | July                 |
- * | MMM   | short month (locale)   | Jul                  |
- * | MM    | 2-digit month          | 07                   |
- * | M     | month number           | 7                    |
- * | DD    | 2-digit day            | 21                   |
- * | D     | day number             | 21                   |
- */
-export function formatDatePattern(
-  date: Date,
-  pattern: string,
-  locale = "en-US"
-): string {
-  const pad = (n: number) => String(n).padStart(2, "0");
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-
-  const tokens: Record<string, string> = {
-    YYYY: String(year),
-    YY: String(year).slice(-2),
-    MMMM: new Intl.DateTimeFormat(locale, { month: "long" }).format(date),
-    MMM: new Intl.DateTimeFormat(locale, { month: "short" }).format(date),
-    MM: pad(month),
-    M: String(month),
-    DD: pad(day),
-    D: String(day),
-  };
-
-  // `\[([^\]]*)\]` captures a bracketed literal (emitted without the brackets);
-  // otherwise the matched token is substituted from the map.
-  return pattern.replace(
-    /\[([^\]]*)\]|YYYY|YY|MMMM|MMM|MM|M|DD|D/g,
-    (match, literal) => (literal !== undefined ? literal : tokens[match])
-  );
-}