@skipleague/design 0.4.4

package/dist/ShareMenu.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } 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, }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDoc = (e) => {
+            if (!ref.current?.contains(e.target))
+                setOpen(false);
+        };
+        const onKey = (e) => {
+            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) => () => {
+        setOpen(false);
+        fn?.();
+    };
+    const items = [
+        { key: "copy", icon: _jsx(Link2, { size: 18 }), label: "Copy link", fn: onCopyLink },
+        { key: "messages", icon: _jsx(MessageCircle, { size: 18 }), label: "Send in Messages", fn: onMessages },
+        { key: "email", icon: _jsx(Mail, { size: 18 }), label: "Email", fn: onEmail },
+    ].filter((i) => i.fn);
+    return (_jsxs("div", { ref: ref, style: { position: "relative", display: "inline-flex" }, children: [_jsx(TopBarIconButton, { compact: compact, "aria-label": `Share ${noun}`, "aria-expanded": open, onClick: () => setOpen((v) => !v), children: _jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M12 14.5V3.5" }), _jsx("path", { d: "M8 7.2l4-3.7 4 3.7" }), _jsx("path", { d: "M5.5 12.5v6a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-6" })] }) }), open && (_jsxs(_Fragment, { children: [_jsx("style", { children: "@keyframes sklShareMenuPop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}" }), _jsxs("div", { role: "menu", style: panelStyle, children: [_jsxs("div", { style: sectionLabelStyle, children: ["Share ", noun] }), items.map((it) => (_jsx(MenuItem, { icon: it.icon, label: it.label, onClick: run(it.fn) }, it.key))), onMore && (_jsxs(_Fragment, { children: [_jsx("div", { style: dividerStyle }), _jsx(MenuItem, { icon: _jsx(MoreHorizontal, { size: 18 }), label: "More options\u2026", onClick: run(onMore), muted: true })] }))] })] }))] }));
+}
+function MenuItem({ icon, label, onClick, muted }) {
+    const [hover, setHover] = useState(false);
+    return (_jsxs("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",
+        }, children: [_jsx("span", { style: { display: "inline-flex", color: muted ? "var(--skl-color-text-faint)" : "var(--skl-color-text-muted)" }, children: icon }), label] }));
+}
+const panelStyle = {
+    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 = {
+    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 = { height: 1, background: "var(--skl-color-border)", margin: "6px 8px" };

package/dist/TopBar.d.ts

@@ -0,0 +1,30 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type AppGlyph } from "./AppLogo.js";
+import { 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 declare function TopBar({ app, appName, actions, compact, ...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">): import("react").JSX.Element;
+/**
+ * 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 declare function TopBarIconButton({ compact, style, children, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    compact?: boolean;
+}): import("react").JSX.Element;

package/dist/TopBar.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AppLogo } from "./AppLogo.js";
+import { ProfileMenu } 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 }) {
+    const bar = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: compact ? 48 : 54,
+        padding: compact ? "0 12px" : "0 14px",
+        background: "var(--skl-color-header-dark)",
+    };
+    return (_jsxs("div", { style: bar, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [_jsx(AppLogo, { app: app, size: compact ? 26 : 27 }), _jsx("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",
+                        }, children: appName })] }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [actions, _jsx(ProfileMenu, { tone: "dark", ...profile })] })] }));
+}
+/**
+ * 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 }) {
+    const [hover, setHover] = useState(false);
+    const dim = compact ? 36 : 38;
+    return (_jsx("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: children }));
+}

package/dist/apps.d.ts

@@ -0,0 +1,19 @@
+/** 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 declare const SKIPLEAGUE_APPS: AppLink[];
+/** Default target for the menu's "Manage account" link (the platform account page). */
+export declare const SKIPLEAGUE_ACCOUNT_URL = "https://skipleague.com/account";

package/dist/apps.js

@@ -0,0 +1,17 @@
+/**
+ * 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 = [
+    { 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/dist/index.d.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/dist/index.js

@@ -0,0 +1,11 @@
+export { ProfileMenu } from "./ProfileMenu.js";
+export { AppBadge } from "./AppBadge.js";
+export { AppLogo } from "./AppLogo.js";
+export { TopBar, TopBarIconButton } from "./TopBar.js";
+export { BottomNav } from "./BottomNav.js";
+export { ShareMenu } from "./ShareMenu.js";
+export { Button } 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";

package/dist/styles.d.ts

@@ -0,0 +1,3 @@
+import type { CSSProperties } from "react";
+/** Base style shared by text inputs and selects. */
+export declare const controlStyle: CSSProperties;

package/dist/styles.js

@@ -0,0 +1,12 @@
+/** Base style shared by text inputs and selects. */
+export const controlStyle = {
+    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/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@skipleague/design",
+  "version": "0.4.4",
+  "description": "SkipUI — the SkipLeague design system: shared tokens and React components for every SkipLeague app.",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SkipLeague/design.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./src/tokens.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "license": "UNLICENSED",
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "lucide-react": "^0.468.0",
+    "react": "^18.3.1",
+    "typescript": "^5.7.2"
+  }
+}

package/src/AppBadge.tsx

@@ -0,0 +1,26 @@
+import type { CSSProperties } from "react";
+
+/**
+ * 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 }: { name: string; size?: number }) {
+  const style: CSSProperties = {
+    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 (
+    <span style={style} aria-hidden>
+      {name.replace(/^Skip/, "").charAt(0)}
+    </span>
+  );
+}

package/src/AppLogo.tsx

@@ -0,0 +1,81 @@
+import type { CSSProperties, ReactNode } from "react";
+
+/** A SkipLeague app's logo glyph (monoline, drawn on the brand tile). */
+export type AppGlyph = "lists" | "racquetball" | "trips";
+
+// 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: AppGlyph, color: string): ReactNode {
+  switch (app) {
+    case "lists":
+      return (
+        <>
+          <path d="M3.5 7l1.8 1.8L8.5 5.6" />
+          <path d="M12.5 7H20.5" />
+          <path d="M3.5 16l1.8 1.8L8.5 14.6" />
+          <path d="M12.5 16.5H20.5" />
+        </>
+      );
+    case "racquetball":
+      return (
+        <>
+          <ellipse cx="10" cy="9" rx="5.4" ry="6.6" transform="rotate(-34 10 9)" />
+          <path d="M6.6 14.2L3.4 19.4" />
+          <circle cx="18" cy="17.4" r="2.3" fill={color} stroke="none" />
+        </>
+      );
+    case "trips":
+      return (
+        <>
+          <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" />
+          <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",
+}: {
+  app: AppGlyph;
+  size?: number;
+  bg?: string;
+  glyph?: string;
+}) {
+  const inner = Math.round(size * 0.84);
+  const style: CSSProperties = {
+    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 (
+    <span style={style} aria-hidden>
+      <svg
+        width={inner}
+        height={inner}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={glyph}
+        strokeWidth={2.2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        {glyphPaths(app, glyph)}
+      </svg>
+    </span>
+  );
+}