@skipleague/design 0.4.4

package/src/ShareMenu.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { Link2, Mail, MessageCircle, MoreHorizontal } from "lucide-react";
+
+import { TopBarIconButton } from "./TopBar.js";
+
+/**
+ * The top-bar Share dropdown (design_handoff_top_bar). A self-contained trigger
+ * (the upload glyph, styled like a {@link TopBarIconButton}) + an anchored menu —
+ * same open/dismiss model as ProfileMenu (click, outside-click, Escape).
+ *
+ * `noun` names the thing being shared ("players" → "Share players"). Pass the
+ * handlers you support; omitted items are hidden.
+ */
+export function ShareMenu({
+  noun,
+  compact = false,
+  onCopyLink,
+  onMessages,
+  onEmail,
+  onMore,
+}: {
+  noun: string;
+  compact?: boolean;
+  onCopyLink?: () => void;
+  onMessages?: () => void;
+  onEmail?: () => void;
+  onMore?: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (!ref.current?.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("mousedown", onDoc);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onDoc);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const run = (fn?: () => void) => () => {
+    setOpen(false);
+    fn?.();
+  };
+
+  const items: { key: string; icon: ReactNode; label: string; fn?: () => void; muted?: boolean }[] = [
+    { key: "copy", icon: <Link2 size={18} />, label: "Copy link", fn: onCopyLink },
+    { key: "messages", icon: <MessageCircle size={18} />, label: "Send in Messages", fn: onMessages },
+    { key: "email", icon: <Mail size={18} />, label: "Email", fn: onEmail },
+  ].filter((i) => i.fn);
+
+  return (
+    <div ref={ref} style={{ position: "relative", display: "inline-flex" }}>
+      <TopBarIconButton compact={compact} aria-label={`Share ${noun}`} aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+        {/* iOS-style upload/share glyph (exact paths from the handoff). */}
+        <svg width={18} height={18} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 14.5V3.5" />
+          <path d="M8 7.2l4-3.7 4 3.7" />
+          <path d="M5.5 12.5v6a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-6" />
+        </svg>
+      </TopBarIconButton>
+
+      {open && (
+        <>
+          <style>{
+            "@keyframes sklShareMenuPop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}"
+          }</style>
+          <div role="menu" style={panelStyle}>
+            <div style={sectionLabelStyle}>Share {noun}</div>
+            {items.map((it) => (
+              <MenuItem key={it.key} icon={it.icon} label={it.label} onClick={run(it.fn)} />
+            ))}
+            {onMore && (
+              <>
+                <div style={dividerStyle} />
+                <MenuItem icon={<MoreHorizontal size={18} />} label="More options…" onClick={run(onMore)} muted />
+              </>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function MenuItem({ icon, label, onClick, muted }: { icon: ReactNode; label: string; onClick: () => void; muted?: boolean }) {
+  const [hover, setHover] = useState(false);
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 11,
+        width: "100%",
+        padding: "9px 10px",
+        border: "none",
+        background: hover ? "var(--skl-color-surface-muted)" : "transparent",
+        borderRadius: 8,
+        font: "600 14px var(--skl-font-sans)",
+        color: muted ? "var(--skl-color-text-muted)" : "var(--skl-color-text)",
+        textAlign: "left",
+        cursor: "pointer",
+      }}
+    >
+      <span style={{ display: "inline-flex", color: muted ? "var(--skl-color-text-faint)" : "var(--skl-color-text-muted)" }}>{icon}</span>
+      {label}
+    </button>
+  );
+}
+
+const panelStyle: CSSProperties = {
+  position: "absolute",
+  top: "calc(100% + 8px)",
+  right: 0,
+  width: 226,
+  background: "var(--skl-color-surface)",
+  border: "1px solid var(--skl-color-border)",
+  borderRadius: "var(--skl-radius-panel)",
+  boxShadow: "var(--skl-shadow-menu)",
+  padding: 6,
+  zIndex: 70,
+  transformOrigin: "top right",
+  animation: "sklShareMenuPop .16s ease-out",
+};
+
+const sectionLabelStyle: CSSProperties = {
+  padding: "8px 10px 7px",
+  font: "700 10.5px var(--skl-font-sans)",
+  textTransform: "uppercase",
+  letterSpacing: "0.6px",
+  color: "var(--skl-color-text-faint)",
+};
+
+const dividerStyle: CSSProperties = { height: 1, background: "var(--skl-color-border)", margin: "6px 8px" };

package/src/TopBar.tsx

@@ -0,0 +1,105 @@
+import { useState, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
+
+import { AppLogo, type AppGlyph } from "./AppLogo.js";
+import { ProfileMenu, type ProfileMenuProps } from "./ProfileMenu.js";
+
+/**
+ * The shared SkipLeague top bar (design_handoff_top_bar, Option A — dark).
+ *
+ * Layout is identical across apps; only the logo glyph, wordmark, and the
+ * contextual action slot change:
+ *   [AppLogo + wordmark] ........ [ ...actions ][ ProfileMenu ]
+ *
+ * - ProfileMenu is pinned to the far right on every page (the persistent slot).
+ * - `actions` is the contextual slot (Print / Share / …) — render zero or more
+ *   {@link TopBarIconButton}s; they appear left of the ProfileMenu only when the
+ *   current page offers them.
+ */
+export function TopBar({
+  app,
+  appName,
+  actions,
+  compact = false,
+  ...profile
+}: {
+  app: AppGlyph;
+  appName: string;
+  /** Contextual page actions (Print/Share buttons) rendered left of ProfileMenu. */
+  actions?: ReactNode;
+  /** Mobile sizing (48px bar) vs the default 54px. */
+  compact?: boolean;
+} & Pick<
+  ProfileMenuProps,
+  "user" | "currentSlug" | "apps" | "enabledSlugs" | "accountUrl" | "onSignOut" | "renderLink" | "onSignIn"
+>) {
+  const bar: CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: compact ? 48 : 54,
+    padding: compact ? "0 12px" : "0 14px",
+    background: "var(--skl-color-header-dark)",
+  };
+  return (
+    <div style={bar}>
+      <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
+        <AppLogo app={app} size={compact ? 26 : 27} />
+        <span
+          style={{
+            fontFamily: "var(--skl-font-sans)",
+            fontWeight: 700,
+            fontSize: compact ? 14 : 15,
+            color: "var(--skl-color-on-dark)",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {appName}
+        </span>
+      </div>
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        {actions}
+        <ProfileMenu tone="dark" {...profile} />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A contextual top-bar action button (Print, Share, …) styled for the dark bar.
+ * Pass a 17–18px line icon (stroke 2, currentColor) as children.
+ */
+export function TopBarIconButton({
+  compact = false,
+  style,
+  children,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & { compact?: boolean }) {
+  const [hover, setHover] = useState(false);
+  const dim = compact ? 36 : 38;
+  return (
+    <button
+      type="button"
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        width: dim,
+        height: dim,
+        borderRadius: 9,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        background: hover ? "rgba(255,255,255,0.08)" : "transparent",
+        border: `1px solid ${hover ? "rgba(94,234,212,0.5)" : "rgba(255,255,255,0.16)"}`,
+        color: hover ? "var(--skl-color-brand-bright)" : "var(--skl-color-on-dark-muted)",
+        transition: "background .12s, border-color .12s, color .12s",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/apps.ts

@@ -0,0 +1,28 @@
+/** A SkipLeague app the ProfileMenu can switch between. */
+export interface AppLink {
+  /** Platform app slug, e.g. "skiplists". Matches the registry + introspect. */
+  slug: string;
+  /** Display name, e.g. "SkipLists". */
+  name: string;
+  /** Absolute URL to the app. */
+  url: string;
+}
+
+/**
+ * Canonical list of LIVE SkipLeague apps shown in every app's switcher.
+ * Add an app here (one place) when it goes live and every app's menu updates.
+ * What each user actually sees is this list filtered by their enabled apps —
+ * pass `enabledSlugs={user.app_slugs}` to ProfileMenu. SkipEvolve is omitted
+ * until it launches.
+ */
+export const SKIPLEAGUE_APPS: AppLink[] = [
+  { slug: "skiplists", name: "SkipLists", url: "https://lists.skipleague.com" },
+  { slug: "skipracquetball", name: "SkipRacquetball", url: "https://racquetball.skipleague.com" },
+  { slug: "skiptrips", name: "SkipTrips", url: "https://trips.skipleague.com" },
+  { slug: "skipreading", name: "SkipReading", url: "https://reading.skipleague.com" },
+  { slug: "skipgifts", name: "SkipGifts", url: "https://gifts.skipleague.com" },
+  { slug: "skiptoday", name: "SkipToday", url: "https://today.skipleague.com" },
+];
+
+/** Default target for the menu's "Manage account" link (the platform account page). */
+export const SKIPLEAGUE_ACCOUNT_URL = "https://skipleague.com/account";

package/src/index.ts

@@ -0,0 +1,16 @@
+export { ProfileMenu } from "./ProfileMenu.js";
+export type { ProfileMenuProps, ProfileMenuUser, ProfileMenuLinkArgs } from "./ProfileMenu.js";
+export { AppBadge } from "./AppBadge.js";
+export { AppLogo } from "./AppLogo.js";
+export type { AppGlyph } from "./AppLogo.js";
+export { TopBar, TopBarIconButton } from "./TopBar.js";
+export { BottomNav } from "./BottomNav.js";
+export type { BottomNavProps, BottomNavTab, BottomNavAction } from "./BottomNav.js";
+export { ShareMenu } from "./ShareMenu.js";
+export { Button } from "./Button.js";
+export type { ButtonProps } from "./Button.js";
+export { Field, Input } from "./Field.js";
+export { Select } from "./Select.js";
+export { Card } from "./Card.js";
+export { SKIPLEAGUE_APPS, SKIPLEAGUE_ACCOUNT_URL } from "./apps.js";
+export type { AppLink } from "./apps.js";

package/src/styles.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from "react";
+
+/** Base style shared by text inputs and selects. */
+export const controlStyle: CSSProperties = {
+  width: "100%",
+  boxSizing: "border-box",
+  padding: "0.625rem 0.75rem",
+  fontFamily: "var(--skl-font-sans)",
+  fontSize: "var(--skl-text-sm)",
+  color: "var(--skl-color-text)",
+  background: "var(--skl-color-surface)",
+  border: "1px solid var(--skl-color-border)",
+  borderRadius: "var(--skl-radius-md)",
+};

package/src/tokens.css

@@ -0,0 +1,43 @@
+/**
+ * SkipUI design tokens — the SkipLeague visual language, extracted from the
+ * surfaces we like (home, account, SkipRacquetball). Import once at the app root:
+ *   import "@skipleague/design/tokens.css";
+ * Components reference these variables, so the look is driven from here.
+ */
+:root {
+  /* Typography */
+  --skl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --skl-text-sm: 0.875rem;
+  --skl-text-xs: 0.75rem;
+  --skl-text-2xs: 0.7rem;
+
+  /* Brand */
+  --skl-color-brand: #0f766e;        /* teal — primary actions, badges */
+  --skl-color-brand-bright: #5eead4; /* mint — on dark headers */
+
+  /* Dark header surface (the shared TopBar) + its on-dark foregrounds */
+  --skl-color-header-dark: #0e2e2a;
+  --skl-color-on-dark: #eafaf6;         /* primary text on the dark header */
+  --skl-color-on-dark-muted: #9fe7d6;   /* muted icons on the dark header */
+
+  /* Neutrals (slate) */
+  --skl-color-text: #0f172a;
+  --skl-color-text-muted: #64748b;
+  --skl-color-text-faint: #94a3b8;
+  --skl-color-border: #e2e8f0;
+  --skl-color-surface: #ffffff;
+  --skl-color-surface-muted: #f8fafc; /* disabled inputs, subtle fills */
+
+  /* "Current" highlight (selected app / current page) */
+  --skl-color-current-bg: #dcfce7;
+  --skl-color-current-text: #166534;
+
+  /* Radii */
+  --skl-radius-panel: 10px;
+  --skl-radius-control: 9px;
+  --skl-radius-md: 6px; /* buttons, inputs, selects */
+  --skl-radius-badge: 5px;
+
+  /* Elevation */
+  --skl-shadow-menu: 0 12px 32px rgba(2, 6, 23, 0.18);
+}