@skipleague/design 0.4.4

package/README.md

@@ -0,0 +1,79 @@
+# @skipleague/design (SkipUI)
+
+The shared SkipLeague design system (roadmap #17 / #60) — tokens + React components
+so every SkipLeague app uses one set of primitives instead of per-app copies.
+
+## Installing in an app
+
+This is a **public repo installed directly from git** — no registry, no auth token.
+Add it to the app's `package.json` pinned to a version tag:
+
+```jsonc
+// package.json
+"dependencies": {
+  "@skipleague/design": "github:SkipLeague/design#v0.3.1"
+}
+```
+
+`npm install` clones the repo at that tag and runs its `prepare` script (builds
+`dist/`), so the package is ready to import — in local dev and in CI, with no
+`.npmrc` and no token. To pull a newer version later, bump the `#vX.Y.Z` tag.
+
+```ts
+import "@skipleague/design/tokens.css";
+import { ProfileMenu, TopBar, AppLogo, ShareMenu } from "@skipleague/design";
+```
+
+## Usage
+
+Import the tokens once at the app root, then use components anywhere:
+
+```ts
+import "@skipleague/design/tokens.css";
+import { ProfileMenu } from "@skipleague/design";
+```
+
+```tsx
+<ProfileMenu
+  user={{ displayName: user.display_name, email: user.email }}
+  currentSlug="skipracquetball"          // omit on the platform apex
+  accountUrl="https://skipleague.com/account"
+  onSignOut={logout}
+  tone="light"                            // "dark" for dark headers (default)
+/>
+```
+
+The app switcher lists the live SkipLeague apps (`SKIPLEAGUE_APPS`); the current
+app is highlighted light-green and non-clickable. To add an app (e.g. when
+SkipToday/SkipEvolve launch), update `src/apps.ts` — every app's menu follows.
+
+## Exports
+
+- `ProfileMenu`, `AppBadge`, `AppLogo`, `TopBar`, `TopBarIconButton`, `ShareMenu`
+- `Button`, `Card`, `Field`, `Input`, `Select`
+- `SKIPLEAGUE_APPS`, `SKIPLEAGUE_ACCOUNT_URL`, type `AppLink`
+- `@skipleague/design/tokens.css` — the design tokens (CSS variables)
+
+## Build
+
+```bash
+npm install
+npm run build   # tsc → dist/
+```
+
+## Releasing a new version
+
+There's no registry to publish to — consumers install from git by tag. To cut a
+release, bump the version and push the tag, then point apps at the new tag:
+
+```bash
+npm version patch        # bump version + create the vX.Y.Z tag
+git push --follow-tags   # publish the tag for consumers to pin
+```
+
+`prepare` builds `dist/` automatically on every install, so `dist/` is not committed.
+
+## Roadmap
+
+Adopt `TopBar`/`AppLogo` + the rest across the apps (replacing per-app copies),
+then keep extending the component set. See SkipPlatform roadmap #60.

package/dist/AppBadge.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The square letter-logo for a SkipLeague app — the first letter of the name
+ * with the "Skip" prefix dropped (e.g. "SkipLists" → "L"). Brand-green.
+ */
+export declare function AppBadge({ name, size }: {
+    name: string;
+    size?: number;
+}): import("react").JSX.Element;

package/dist/AppBadge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The square letter-logo for a SkipLeague app — the first letter of the name
+ * with the "Skip" prefix dropped (e.g. "SkipLists" → "L"). Brand-green.
+ */
+export function AppBadge({ name, size = 20 }) {
+    const style = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        borderRadius: "var(--skl-radius-badge)",
+        background: "var(--skl-color-brand)",
+        color: "#fff",
+        fontSize: "var(--skl-text-2xs)",
+        fontWeight: 700,
+        flexShrink: 0,
+    };
+    return (_jsx("span", { style: style, "aria-hidden": true, children: name.replace(/^Skip/, "").charAt(0) }));
+}

package/dist/AppLogo.d.ts

@@ -0,0 +1,13 @@
+/** A SkipLeague app's logo glyph (monoline, drawn on the brand tile). */
+export type AppGlyph = "lists" | "racquetball" | "trips";
+/**
+ * The per-app logo mark — a brand-green rounded tile holding a white monoline
+ * glyph. Replaces the single-letter {@link AppBadge}; gives each SkipLeague app a
+ * distinct mark for the top bar, app switcher, and home screens.
+ */
+export declare function AppLogo({ app, size, bg, glyph, }: {
+    app: AppGlyph;
+    size?: number;
+    bg?: string;
+    glyph?: string;
+}): import("react").JSX.Element;

package/dist/AppLogo.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// Exact 24×24 glyph paths (design_handoff_top_bar). `color` only matters for the
+// racquetball ball, which is filled rather than stroked.
+function glyphPaths(app, color) {
+    switch (app) {
+        case "lists":
+            return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3.5 7l1.8 1.8L8.5 5.6" }), _jsx("path", { d: "M12.5 7H20.5" }), _jsx("path", { d: "M3.5 16l1.8 1.8L8.5 14.6" }), _jsx("path", { d: "M12.5 16.5H20.5" })] }));
+        case "racquetball":
+            return (_jsxs(_Fragment, { children: [_jsx("ellipse", { cx: "10", cy: "9", rx: "5.4", ry: "6.6", transform: "rotate(-34 10 9)" }), _jsx("path", { d: "M6.6 14.2L3.4 19.4" }), _jsx("circle", { cx: "18", cy: "17.4", r: "2.3", fill: color, stroke: "none" })] }));
+        case "trips":
+            return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 21.5s6.6-5.8 6.6-10.5a6.6 6.6 0 1 0-13.2 0c0 4.7 6.6 10.5 6.6 10.5z" }), _jsx("circle", { cx: "12", cy: "10.8", r: "2.4" })] }));
+    }
+}
+/**
+ * The per-app logo mark — a brand-green rounded tile holding a white monoline
+ * glyph. Replaces the single-letter {@link AppBadge}; gives each SkipLeague app a
+ * distinct mark for the top bar, app switcher, and home screens.
+ */
+export function AppLogo({ app, size = 28, bg = "var(--skl-color-brand)", glyph = "#ffffff", }) {
+    const inner = Math.round(size * 0.84);
+    const style = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        borderRadius: Math.round(size * 0.32),
+        background: bg,
+        boxShadow: "0 1px 2px rgba(2,6,23,0.18)",
+        flexShrink: 0,
+    };
+    return (_jsx("span", { style: style, "aria-hidden": true, children: _jsx("svg", { width: inner, height: inner, viewBox: "0 0 24 24", fill: "none", stroke: glyph, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", children: glyphPaths(app, glyph) }) }));
+}

package/dist/BottomNav.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+export interface BottomNavTab {
+    label: string;
+    /** 24px line icon (stroke 2, currentColor) — inherits the cell's color. */
+    icon: ReactNode;
+    /** Current tab (accent color, bold). Derive from your router. */
+    active?: boolean;
+    /**
+     * "Tab Colors" option — a per-tab accent (any CSS color). When set and this
+     * tab is active, its icon/label AND the center button + glow use this color
+     * instead of the default brand. Omit on every tab to keep the standard
+     * single-color bar (the default). Provide a color per tab for an app whose
+     * tabs each have their own identity (e.g. SkipGifts).
+     */
+    color?: string;
+    onClick?: () => void;
+}
+export interface BottomNavAction {
+    /** Short visual label under the "+" (e.g. "List", "Match"). */
+    label: string;
+    /**
+     * Accessible name for the action control, announced to screen-reader and
+     * voice-control users. Use a verb phrase ("New list", "Log match") so the
+     * button isn't read as a bare noun confusable with a tab. Falls back to
+     * `label`. The visual label always stays `label`; per WCAG 2.5.3, keep
+     * `label`'s text inside `ariaLabel` (e.g. label "List" → ariaLabel "New list").
+     */
+    ariaLabel?: string;
+    /** The "+" glyph (white, ~26px, stroke 2.4). Inherits white from the button. */
+    icon: ReactNode;
+    onClick?: () => void;
+}
+export interface BottomNavProps {
+    /** 2–8 tabs, split evenly around the center action. */
+    tabs: BottomNavTab[];
+    /** The floating center "+" button and its label. */
+    action: BottomNavAction;
+    /** Optional grouped-header band; even tab counts only. */
+    groups?: [string, string];
+}
+export declare function BottomNav({ tabs, action, groups }: BottomNavProps): import("react").JSX.Element;

package/dist/BottomNav.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The shared SkipLeague bottom navigation (design_handoff_bottom_nav).
+ *
+ * ONE layout for every app: a row of tabs split evenly around a floating
+ * center action ("+"). Only the tab labels/icons and the action's label change
+ * per app — spacing, sizing, the button, and its clipped glow are identical
+ * everywhere, so the bar looks the same across the family.
+ *
+ *   [tab][tab] ... ( + ) ... [tab][tab]
+ *                  label
+ *
+ * - `tabs` holds 2–8 tabs. They split around the center: the first
+ *   `ceil(n/2)` render left of the "+", the rest render right. (For an odd
+ *   count the extra tab sits on the left; the "+" tracks the true center of
+ *   its column, so it drifts slightly right of screen-center — even counts are
+ *   the designed-for case.)
+ * - `action` is the floating center button and the word beneath it.
+ * - `groups` (optional, even counts only) adds a header band labelling the left
+ *   pair/triple vs the right. Total bar height is unchanged — the tabs shift
+ *   down to make room.
+ */
+const ICON = 24; // tab icon box (24px line icons, stroke 2)
+const LABEL_GAP = 10; // icon -> label vertical gap
+const ACTION_SIZE = 53; // floating center button (square)
+const ACTION_RADIUS = 17; // center button corner radius
+const ACTION_OVERHANG = 10; // px the button rises above the bar's top edge
+const PLUS = 26; // "+" glyph box inside the button
+// Soft mint halo + a grounding shadow. Painted on a layer INSIDE the
+// overflow:hidden bar so it is clipped at the top edge — no glow above the line.
+const ACTION_GLOW = "0 0 22px 4px rgba(94,234,212,0.6), 0 10px 22px rgba(15,118,110,0.30)";
+// Two vertical-spacing presets that yield the SAME total bar height.
+const PLAIN = { padTop: 10, padBottom: 18, headerGap: 0 };
+const GROUPED = { padTop: 5, padBottom: 6, headerGap: 5 };
+const cell = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: LABEL_GAP,
+};
+const labelBase = {
+    fontFamily: "var(--skl-font-sans)",
+    fontSize: 13,
+    lineHeight: 1.15,
+};
+const groupLabel = {
+    ...labelBase,
+    fontSize: 11,
+    fontWeight: 700,
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    color: "var(--skl-color-text-faint)",
+    textAlign: "center",
+};
+function Tab({ label, icon, active, color, onClick, lift }) {
+    const accent = color ?? "var(--skl-color-brand)";
+    return (_jsxs("button", { type: "button", onClick: onClick, style: {
+            ...cell,
+            background: "none",
+            border: "none",
+            padding: 0,
+            cursor: "pointer",
+            transform: `translateY(${lift}px)`,
+            // icon color (currentColor); the label sets its own color below
+            color: active ? accent : "var(--skl-color-text-faint)",
+        }, children: [_jsx("span", { style: { height: ICON, display: "flex", alignItems: "flex-end" }, children: icon }), _jsx("span", { style: {
+                    ...labelBase,
+                    fontWeight: active ? 700 : 600,
+                    color: active ? accent : "var(--skl-color-text-muted)",
+                }, children: label })] }));
+}
+export function BottomNav({ tabs, action, groups }) {
+    const n = tabs.length;
+    if (n < 2 || n > 8) {
+        // Render what we were given, but flag the contract violation in dev.
+        console.warn(`BottomNav expects 2–8 tabs, received ${n}.`);
+    }
+    // Split around the center: extra tab (odd n) goes left.
+    const leftCount = Math.ceil(n / 2);
+    const left = tabs.slice(0, leftCount);
+    const right = tabs.slice(leftCount);
+    const columns = n + 1; // tabs + the center label column
+    // Grouped headers are an even-count feature (a header over each side).
+    const grouped = Array.isArray(groups) && groups.length === 2 && n % 2 === 0;
+    const sp = grouped ? GROUPED : PLAIN;
+    // In grouped mode the tab row sits lower; lift the center label back in line
+    // with the side tabs (right under the "+"), and nudge the tabs up for balance.
+    const centerLabelLift = grouped ? -13 : 0;
+    const tabLift = grouped ? -2 : 0;
+    // Horizontal center of the action column (== 50% for even counts).
+    const actionLeft = `${((leftCount + 0.5) / columns) * 100}%`;
+    const gridCols = `repeat(${columns}, 1fr)`;
+    // "Tab Colors": the center button + label + glow follow the active tab's color
+    // when one is set; otherwise everything stays the default brand teal + mint glow.
+    const activeTab = tabs.find((t) => t.active);
+    const accent = activeTab?.color ?? "var(--skl-color-brand)";
+    const glow = activeTab?.color
+        ? `0 0 22px 4px color-mix(in srgb, ${activeTab.color} 55%, transparent), 0 10px 22px color-mix(in srgb, ${activeTab.color} 30%, transparent)`
+        : ACTION_GLOW;
+    return (_jsxs("nav", { style: { position: "relative", flex: "none" }, children: [_jsxs("div", { style: {
+                    background: "var(--skl-color-surface)",
+                    borderTop: "1px solid var(--skl-color-border)",
+                    position: "relative",
+                    overflow: "hidden",
+                    // Keep the tabs clear of the iOS home indicator (additive to padBottom).
+                    paddingBottom: "env(safe-area-inset-bottom, 0px)",
+                }, children: [_jsx("span", { "aria-hidden": true, style: {
+                            position: "absolute",
+                            top: -ACTION_OVERHANG,
+                            left: actionLeft,
+                            transform: "translateX(-50%)",
+                            width: ACTION_SIZE,
+                            height: ACTION_SIZE,
+                            borderRadius: ACTION_RADIUS,
+                            boxShadow: glow,
+                            pointerEvents: "none",
+                        } }), grouped && (_jsxs("div", { style: { display: "grid", gridTemplateColumns: gridCols, paddingTop: sp.padTop }, children: [_jsx("div", { style: { ...groupLabel, gridColumn: `1 / ${leftCount + 1}` }, children: groups[0] }), _jsx("div", { style: { ...groupLabel, gridColumn: `${leftCount + 2} / ${columns + 1}` }, children: groups[1] })] })), _jsxs("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: gridCols,
+                            paddingTop: grouped ? sp.headerGap : sp.padTop,
+                            paddingBottom: sp.padBottom,
+                            position: "relative",
+                        }, children: [left.map((t, i) => (_jsx(Tab, { ...t, lift: tabLift }, `l${i}`))), _jsxs("div", { onClick: action.onClick, "aria-hidden": true, style: { ...cell, cursor: "pointer" }, children: [_jsx("div", { style: { height: ICON } }), _jsx("span", { style: {
+                                            ...labelBase,
+                                            fontWeight: 700,
+                                            color: accent,
+                                            transform: `translateY(${centerLabelLift}px)`,
+                                        }, children: action.label })] }), right.map((t, i) => (_jsx(Tab, { ...t, lift: tabLift }, `r${i}`)))] })] }), _jsx("button", { type: "button", onClick: action.onClick, "aria-label": action.ariaLabel ?? action.label, style: {
+                    position: "absolute",
+                    top: -ACTION_OVERHANG,
+                    left: actionLeft,
+                    transform: "translateX(-50%)",
+                    width: ACTION_SIZE,
+                    height: ACTION_SIZE,
+                    borderRadius: ACTION_RADIUS,
+                    background: accent,
+                    color: "#fff",
+                    border: "none",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 3,
+                    cursor: "pointer",
+                }, children: _jsx("span", { style: { display: "flex", width: PLUS, height: PLUS }, children: action.icon }) })] }));
+}

package/dist/Button.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonHTMLAttributes } from "react";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** "primary" = brand-green fill (default); "secondary" = white with a border. */
+    variant?: "primary" | "secondary";
+}
+/** The standard SkipLeague button. Token-driven; matches the apps' primary action. */
+export declare function Button({ variant, style, disabled, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/Button.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** The standard SkipLeague button. Token-driven; matches the apps' primary action. */
+export function Button({ variant = "primary", style, disabled, ...props }) {
+    const base = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.5rem",
+        fontFamily: "var(--skl-font-sans)",
+        fontSize: "var(--skl-text-sm)",
+        fontWeight: 600,
+        padding: "0.625rem 1.25rem",
+        borderRadius: "var(--skl-radius-md)",
+        cursor: disabled ? "default" : "pointer",
+        opacity: disabled ? 0.6 : 1,
+        border: "1px solid transparent",
+        ...(variant === "primary"
+            ? { background: "var(--skl-color-brand)", color: "#fff" }
+            : { background: "var(--skl-color-surface)", color: "var(--skl-color-text)", borderColor: "var(--skl-color-border)" }),
+    };
+    return _jsx("button", { ...props, disabled: disabled, style: { ...base, ...style } });
+}

package/dist/Card.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties, ReactNode } from "react";
+/**
+ * A section card: an optional heading above a white, bordered, rounded container —
+ * the standard grouping used on the account/settings pages.
+ */
+export declare function Card({ title, children, style, }: {
+    title?: string;
+    children: ReactNode;
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/dist/Card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A section card: an optional heading above a white, bordered, rounded container —
+ * the standard grouping used on the account/settings pages.
+ */
+export function Card({ title, children, style, }) {
+    return (_jsxs("section", { style: { fontFamily: "var(--skl-font-sans)", ...style }, children: [title && (_jsx("h3", { style: { margin: "0 0 0.75rem", fontSize: "1rem", fontWeight: 600, color: "var(--skl-color-text)" }, children: title })), _jsx("div", { style: {
+                    background: "var(--skl-color-surface)",
+                    border: "1px solid var(--skl-color-border)",
+                    borderRadius: "var(--skl-radius-panel)",
+                    padding: "1rem",
+                }, children: children })] }));
+}

package/dist/Field.d.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+/** A labeled form row: a label, the control (children), and an optional hint. */
+export declare function Field({ label, hint, children, }: {
+    label: string;
+    hint?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A styled text input. */
+export declare function Input({ style, disabled, ...props }: InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;

package/dist/Field.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { controlStyle } from "./styles.js";
+/** A labeled form row: a label, the control (children), and an optional hint. */
+export function Field({ label, hint, children, }) {
+    return (_jsxs("div", { style: { fontFamily: "var(--skl-font-sans)" }, children: [_jsx("label", { style: { display: "block", fontSize: "var(--skl-text-sm)", fontWeight: 500, marginBottom: 4, color: "var(--skl-color-text)" }, children: label }), children, hint && (_jsx("p", { style: { margin: "0.25rem 0 0", fontSize: "var(--skl-text-xs)", color: "var(--skl-color-text-muted)" }, children: hint }))] }));
+}
+/** A styled text input. */
+export function Input({ style, disabled, ...props }) {
+    return (_jsx("input", { ...props, disabled: disabled, style: {
+            ...controlStyle,
+            ...(disabled ? { background: "var(--skl-color-surface-muted)", color: "var(--skl-color-text-muted)" } : {}),
+            ...style,
+        } }));
+}

package/dist/ProfileMenu.d.ts

@@ -0,0 +1,72 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type AppLink } from "./apps.js";
+export interface ProfileMenuUser {
+    displayName?: string | null;
+    email?: string | null;
+}
+/** Args passed to a custom `renderLink` for internal (in-app) menu links. */
+export interface ProfileMenuLinkArgs {
+    href: string;
+    role?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+export interface ProfileMenuProps {
+    /** The signed-in user (name + email shown at the top of the menu). */
+    user?: ProfileMenuUser;
+    /**
+     * Slug of the app you're currently in (e.g. "skipracquetball"). That app's row
+     * is highlighted light-green and non-clickable. Omit on the platform apex.
+     */
+    currentSlug?: string;
+    /** Apps to list in the switcher. Defaults to the live SkipLeague apps. */
+    apps?: AppLink[];
+    /**
+     * Slugs of the apps THIS user has enabled (e.g. the platform's `app_slugs`).
+     * When provided, the switcher shows only those apps (the current app is always
+     * kept), so every app shows the same "your apps" set without each one
+     * re-implementing the filter. Omit to list every app in `apps`.
+     */
+    enabledSlugs?: string[];
+    /** Target of the "Manage account" link. Defaults to the platform account page. */
+    accountUrl?: string;
+    /** Called when the user clicks "Sign out". */
+    onSignOut: () => void;
+    /**
+     * Header tone the trigger button sits on — "dark" (default) for the apex/dark
+     * headers, "light" for white headers. Only affects the button, not the menu.
+     */
+    tone?: "light" | "dark";
+    /**
+     * Render the internal "Manage account" link via your own router (e.g. React
+     * Router's `<Link>`) instead of a full-page `<a href>`. App-switcher links to
+     * OTHER SkipLeague apps are always plain `<a>` (cross-app navigation).
+     * Example: `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`.
+     */
+    renderLink?: (args: ProfileMenuLinkArgs) => ReactNode;
+    /**
+     * Mark "Manage account" as the current page — highlighted light-green and
+     * non-clickable (e.g. the platform is already on /account).
+     */
+    accountIsCurrent?: boolean;
+    /**
+     * Signed-out support (platform apex): when there's no `user` AND this is
+     * provided, the menu shows a single "Sign in" action instead of the
+     * name / Manage-account / Sign-out items. Omit it to keep the always-signed-in
+     * behavior product apps rely on.
+     */
+    onSignIn?: () => void;
+    /** Label for the signed-out action (default "Sign in"). */
+    signInLabel?: string;
+}
+/**
+ * The canonical SkipLeague account control: a boxed user-icon button that opens
+ * a dropdown with the user's name/email, an inline **app switcher** (one click to
+ * jump to another SkipLeague app; the current app is highlighted and not
+ * clickable), **Manage account**, and **Sign out**. Also covers the platform
+ * apex via `renderLink` (SPA nav), `accountIsCurrent`, and `onSignIn`
+ * (signed-out state).
+ *
+ * Requires `@skipleague/design/tokens.css` to be imported once at the app root.
+ */
+export declare function ProfileMenu({ user, currentSlug, apps, enabledSlugs, accountUrl, onSignOut, tone, renderLink, accountIsCurrent, onSignIn, signInLabel, }: ProfileMenuProps): import("react").JSX.Element;

package/dist/ProfileMenu.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { CircleUser, LogIn, LogOut, Settings } from "lucide-react";
+import { AppBadge } from "./AppBadge.js";
+import { SKIPLEAGUE_ACCOUNT_URL, SKIPLEAGUE_APPS } from "./apps.js";
+/**
+ * The canonical SkipLeague account control: a boxed user-icon button that opens
+ * a dropdown with the user's name/email, an inline **app switcher** (one click to
+ * jump to another SkipLeague app; the current app is highlighted and not
+ * clickable), **Manage account**, and **Sign out**. Also covers the platform
+ * apex via `renderLink` (SPA nav), `accountIsCurrent`, and `onSignIn`
+ * (signed-out state).
+ *
+ * Requires `@skipleague/design/tokens.css` to be imported once at the app root.
+ */
+export function ProfileMenu({ user, currentSlug, apps = SKIPLEAGUE_APPS, enabledSlugs, accountUrl = SKIPLEAGUE_ACCOUNT_URL, onSignOut, tone = "dark", renderLink, accountIsCurrent = false, onSignIn, signInLabel = "Sign in", }) {
+    const [open, setOpen] = useState(false);
+    const [hover, setHover] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDocClick = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDocClick);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDocClick);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    // Show only the apps this user has enabled (always keeping the current app),
+    // when the caller passes the user's enabled slugs. Otherwise list every app.
+    const visibleApps = enabledSlugs
+        ? apps.filter((a) => a.slug === currentSlug || enabledSlugs.includes(a.slug))
+        : apps;
+    const signedIn = !!(user?.displayName || user?.email);
+    // Signed-out menu only when a sign-in handler is supplied — otherwise keep the
+    // existing always-signed-in behavior product apps depend on.
+    const showSignedOut = !signedIn && !!onSignIn;
+    const label = signedIn ? user.displayName || user.email || "Account" : "Account";
+    const brand = tone === "light" ? "var(--skl-color-brand)" : "var(--skl-color-brand-bright)";
+    const idleIcon = tone === "light" ? "#334155" : "#e2e8f0";
+    const idleBorder = tone === "light" ? "var(--skl-color-border)" : "rgba(255,255,255,0.18)";
+    const boxBg = tone === "light" ? "#ffffff" : "rgba(255,255,255,0.06)";
+    const active = open || hover;
+    const accountLabel = (_jsxs(_Fragment, { children: [_jsx(Settings, { size: 15 }), " Manage account"] }));
+    const accountItem = accountIsCurrent ? (_jsx("div", { "aria-current": "page", style: { ...itemStyle, fontWeight: 600, background: "var(--skl-color-current-bg)", color: "var(--skl-color-current-text)", cursor: "default" }, children: accountLabel })) : renderLink ? (renderLink({ href: accountUrl, role: "menuitem", style: itemStyle, children: accountLabel })) : (_jsx("a", { href: accountUrl, role: "menuitem", style: itemStyle, children: accountLabel }));
+    return (_jsxs("div", { ref: ref, style: { position: "relative", fontFamily: "var(--skl-font-sans)" }, children: [_jsx("button", { onClick: () => setOpen((o) => !o), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), "aria-haspopup": "menu", "aria-expanded": open, "aria-label": "Account", title: label, style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 38,
+                    height: 38,
+                    borderRadius: "var(--skl-radius-control)",
+                    cursor: "pointer",
+                    border: `1px solid ${active ? brand : idleBorder}`,
+                    background: boxBg,
+                    color: active ? brand : idleIcon,
+                    transition: "border-color 0.15s, color 0.15s",
+                }, children: _jsx(CircleUser, { size: 22 }) }), open && (_jsx("div", { role: "menu", style: menuStyle, children: showSignedOut ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--skl-color-border)" }, children: _jsx("div", { style: { fontWeight: 600, fontSize: "var(--skl-text-sm)", color: "var(--skl-color-text)" }, children: "Not signed in" }) }), _jsxs("button", { role: "menuitem", onClick: onSignIn, style: { ...itemStyle, width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer" }, children: [_jsx(LogIn, { size: 15 }), " ", signInLabel] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--skl-color-border)" }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: "var(--skl-text-sm)", color: "var(--skl-color-text)" }, children: label }), user?.email && _jsx("div", { style: { fontSize: "var(--skl-text-xs)", color: "var(--skl-color-text-muted)" }, children: user.email })] }), visibleApps.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { style: switchHeading, children: "Switch app" }), visibleApps.map((a) => {
+                                    const isCurrent = a.slug === currentSlug;
+                                    const inner = (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [_jsx(AppBadge, { name: a.name }), a.name] }));
+                                    // The app you're in: light-green highlight, not clickable.
+                                    return isCurrent ? (_jsx("div", { "aria-current": "page", style: { ...itemStyle, fontWeight: 600, background: "var(--skl-color-current-bg)", color: "var(--skl-color-current-text)", cursor: "default" }, children: inner }, a.slug)) : (_jsx("a", { href: a.url, role: "menuitem", style: itemStyle, children: inner }, a.slug));
+                                })] })), _jsx("div", { style: divider }), accountItem, _jsx("div", { style: divider }), _jsxs("button", { role: "menuitem", onClick: onSignOut, style: { ...itemStyle, width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer" }, children: [_jsx(LogOut, { size: 15 }), " Sign out"] })] })) }))] }));
+}
+const menuStyle = {
+    position: "absolute",
+    right: 0,
+    top: "calc(100% + 8px)",
+    minWidth: 200,
+    background: "var(--skl-color-surface)",
+    border: "1px solid var(--skl-color-border)",
+    borderRadius: "var(--skl-radius-panel)",
+    boxShadow: "var(--skl-shadow-menu)",
+    overflow: "hidden",
+    zIndex: 50,
+};
+const itemStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    padding: "0.55rem 0.75rem",
+    fontSize: "var(--skl-text-sm)",
+    color: "var(--skl-color-text)",
+    textDecoration: "none",
+};
+const switchHeading = {
+    padding: "0.5rem 0.75rem 0.25rem",
+    fontSize: "var(--skl-text-2xs)",
+    fontWeight: 600,
+    color: "var(--skl-color-text-faint)",
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+};
+const divider = {
+    borderTop: "1px solid var(--skl-color-border)",
+    margin: "0.25rem 0",
+};

package/dist/Select.d.ts

@@ -0,0 +1,3 @@
+import type { SelectHTMLAttributes } from "react";
+/** A styled select. Pass `<option>`s as children. */
+export declare function Select({ style, children, ...props }: SelectHTMLAttributes<HTMLSelectElement>): import("react").JSX.Element;

package/dist/Select.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { controlStyle } from "./styles.js";
+/** A styled select. Pass `<option>`s as children. */
+export function Select({ style, children, ...props }) {
+    return (_jsx("select", { ...props, style: { ...controlStyle, ...style }, children: children }));
+}

package/dist/ShareMenu.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 declare function ShareMenu({ noun, compact, onCopyLink, onMessages, onEmail, onMore, }: {
+    noun: string;
+    compact?: boolean;
+    onCopyLink?: () => void;
+    onMessages?: () => void;
+    onEmail?: () => void;
+    onMore?: () => void;
+}): import("react").JSX.Element;