@skipleague/design 0.4.4

package/src/BottomNav.tsx

@@ -0,0 +1,276 @@
+import type { CSSProperties, ReactNode } from "react";
+
+/**
+ * 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 };
+
+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];
+}
+
+const cell: CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: LABEL_GAP,
+};
+
+const labelBase: CSSProperties = {
+  fontFamily: "var(--skl-font-sans)",
+  fontSize: 13,
+  lineHeight: 1.15,
+};
+
+const groupLabel: CSSProperties = {
+  ...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 }: BottomNavTab & { lift: number }) {
+  const accent = color ?? "var(--skl-color-brand)";
+  return (
+    <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)",
+      }}
+    >
+      <span style={{ height: ICON, display: "flex", alignItems: "flex-end" }}>{icon}</span>
+      <span
+        style={{
+          ...labelBase,
+          fontWeight: active ? 700 : 600,
+          color: active ? accent : "var(--skl-color-text-muted)",
+        }}
+      >
+        {label}
+      </span>
+    </button>
+  );
+}
+
+export function BottomNav({ tabs, action, groups }: BottomNavProps) {
+  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 (
+    <nav style={{ position: "relative", flex: "none" }}>
+      {/* Bar — clips the glow at its top edge ("the line"). */}
+      <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)",
+        }}
+      >
+        {/* Glow layer (clipped to the bar; sits behind the grid). */}
+        <span
+          aria-hidden
+          style={{
+            position: "absolute",
+            top: -ACTION_OVERHANG,
+            left: actionLeft,
+            transform: "translateX(-50%)",
+            width: ACTION_SIZE,
+            height: ACTION_SIZE,
+            borderRadius: ACTION_RADIUS,
+            boxShadow: glow,
+            pointerEvents: "none",
+          }}
+        />
+
+        {/* Optional group-header band (labels left vs right). */}
+        {grouped && (
+          <div style={{ display: "grid", gridTemplateColumns: gridCols, paddingTop: sp.padTop }}>
+            <div style={{ ...groupLabel, gridColumn: `1 / ${leftCount + 1}` }}>{groups![0]}</div>
+            <div style={{ ...groupLabel, gridColumn: `${leftCount + 2} / ${columns + 1}` }}>
+              {groups![1]}
+            </div>
+          </div>
+        )}
+
+        {/* Tab row. */}
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: gridCols,
+            paddingTop: grouped ? sp.headerGap : sp.padTop,
+            paddingBottom: sp.padBottom,
+            position: "relative",
+          }}
+        >
+          {left.map((t, i) => (
+            <Tab key={`l${i}`} {...t} lift={tabLift} />
+          ))}
+
+          {/* Center column: the action's label. Pointer-clickable (tapping the
+              word fires the action too) but NOT a separate focusable control or
+              screen-reader announcement — the floating "+" below is the single
+              control for the action, so `aria-hidden` here avoids a duplicate tab
+              stop / double announcement. Keyboard & SR users get exactly one
+              control per action; touch users can still tap the word. */}
+          <div onClick={action.onClick} aria-hidden style={{ ...cell, cursor: "pointer" }}>
+            <div style={{ height: ICON }} />
+            <span
+              style={{
+                ...labelBase,
+                fontWeight: 700,
+                color: accent,
+                transform: `translateY(${centerLabelLift}px)`,
+              }}
+            >
+              {action.label}
+            </span>
+          </div>
+
+          {right.map((t, i) => (
+            <Tab key={`r${i}`} {...t} lift={tabLift} />
+          ))}
+        </div>
+      </div>
+
+      {/* Floating center button — unclipped, rises ACTION_OVERHANG above the bar. */}
+      <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",
+        }}
+      >
+        <span style={{ display: "flex", width: PLUS, height: PLUS }}>{action.icon}</span>
+      </button>
+    </nav>
+  );
+}

package/src/Button.tsx

@@ -0,0 +1,28 @@
+import type { ButtonHTMLAttributes, CSSProperties } 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 function Button({ variant = "primary", style, disabled, ...props }: ButtonProps) {
+  const base: CSSProperties = {
+    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 <button {...props} disabled={disabled} style={{ ...base, ...style }} />;
+}

package/src/Card.tsx

@@ -0,0 +1,33 @@
+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 function Card({
+  title,
+  children,
+  style,
+}: {
+  title?: string;
+  children: ReactNode;
+  style?: CSSProperties;
+}) {
+  return (
+    <section style={{ fontFamily: "var(--skl-font-sans)", ...style }}>
+      {title && (
+        <h3 style={{ margin: "0 0 0.75rem", fontSize: "1rem", fontWeight: 600, color: "var(--skl-color-text)" }}>{title}</h3>
+      )}
+      <div
+        style={{
+          background: "var(--skl-color-surface)",
+          border: "1px solid var(--skl-color-border)",
+          borderRadius: "var(--skl-radius-panel)",
+          padding: "1rem",
+        }}
+      >
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/Field.tsx

@@ -0,0 +1,40 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import { controlStyle } from "./styles.js";
+
+/** A labeled form row: a label, the control (children), and an optional hint. */
+export function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div style={{ fontFamily: "var(--skl-font-sans)" }}>
+      <label style={{ display: "block", fontSize: "var(--skl-text-sm)", fontWeight: 500, marginBottom: 4, color: "var(--skl-color-text)" }}>
+        {label}
+      </label>
+      {children}
+      {hint && (
+        <p style={{ margin: "0.25rem 0 0", fontSize: "var(--skl-text-xs)", color: "var(--skl-color-text-muted)" }}>{hint}</p>
+      )}
+    </div>
+  );
+}
+
+/** A styled text input. */
+export function Input({ style, disabled, ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      {...props}
+      disabled={disabled}
+      style={{
+        ...controlStyle,
+        ...(disabled ? { background: "var(--skl-color-surface-muted)", color: "var(--skl-color-text-muted)" } : {}),
+        ...style,
+      }}
+    />
+  );
+}

package/src/ProfileMenu.tsx

@@ -0,0 +1,275 @@
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { CircleUser, LogIn, LogOut, Settings } from "lucide-react";
+import { AppBadge } from "./AppBadge.js";
+import { SKIPLEAGUE_ACCOUNT_URL, SKIPLEAGUE_APPS, 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 function ProfileMenu({
+  user,
+  currentSlug,
+  apps = SKIPLEAGUE_APPS,
+  enabledSlugs,
+  accountUrl = SKIPLEAGUE_ACCOUNT_URL,
+  onSignOut,
+  tone = "dark",
+  renderLink,
+  accountIsCurrent = false,
+  onSignIn,
+  signInLabel = "Sign in",
+}: ProfileMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [hover, setHover] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      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 = (
+    <>
+      <Settings size={15} /> Manage account
+    </>
+  );
+  const accountItem = accountIsCurrent ? (
+    <div aria-current="page" style={{ ...itemStyle, fontWeight: 600, background: "var(--skl-color-current-bg)", color: "var(--skl-color-current-text)", cursor: "default" }}>
+      {accountLabel}
+    </div>
+  ) : renderLink ? (
+    renderLink({ href: accountUrl, role: "menuitem", style: itemStyle, children: accountLabel })
+  ) : (
+    <a href={accountUrl} role="menuitem" style={itemStyle}>
+      {accountLabel}
+    </a>
+  );
+
+  return (
+    <div ref={ref} style={{ position: "relative", fontFamily: "var(--skl-font-sans)" }}>
+      <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",
+        }}
+      >
+        <CircleUser size={22} />
+      </button>
+
+      {open && (
+        <div role="menu" style={menuStyle}>
+          {showSignedOut ? (
+            <>
+              <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--skl-color-border)" }}>
+                <div style={{ fontWeight: 600, fontSize: "var(--skl-text-sm)", color: "var(--skl-color-text)" }}>Not signed in</div>
+              </div>
+              <button
+                role="menuitem"
+                onClick={onSignIn}
+                style={{ ...itemStyle, width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer" }}
+              >
+                <LogIn size={15} /> {signInLabel}
+              </button>
+            </>
+          ) : (
+            <>
+              <div style={{ padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--skl-color-border)" }}>
+                <div style={{ fontWeight: 600, fontSize: "var(--skl-text-sm)", color: "var(--skl-color-text)" }}>{label}</div>
+                {user?.email && <div style={{ fontSize: "var(--skl-text-xs)", color: "var(--skl-color-text-muted)" }}>{user.email}</div>}
+              </div>
+
+              {/* Switcher only when there are apps to switch to — pass apps={[]} to
+                  hide it entirely (e.g. dev mode, or a single-app deployment). */}
+              {visibleApps.length > 0 && (
+                <>
+                  <div style={switchHeading}>Switch app</div>
+                  {visibleApps.map((a) => {
+                    const isCurrent = a.slug === currentSlug;
+                    const inner = (
+                      <span style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                        <AppBadge name={a.name} />
+                        {a.name}
+                      </span>
+                    );
+                    // The app you're in: light-green highlight, not clickable.
+                    return isCurrent ? (
+                      <div key={a.slug} aria-current="page" style={{ ...itemStyle, fontWeight: 600, background: "var(--skl-color-current-bg)", color: "var(--skl-color-current-text)", cursor: "default" }}>
+                        {inner}
+                      </div>
+                    ) : (
+                      <a key={a.slug} href={a.url} role="menuitem" style={itemStyle}>
+                        {inner}
+                      </a>
+                    );
+                  })}
+                </>
+              )}
+
+              <div style={divider} />
+              {accountItem}
+              <div style={divider} />
+              <button
+                role="menuitem"
+                onClick={onSignOut}
+                style={{ ...itemStyle, width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer" }}
+              >
+                <LogOut size={15} /> Sign out
+              </button>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const menuStyle: CSSProperties = {
+  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: CSSProperties = {
+  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: CSSProperties = {
+  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: CSSProperties = {
+  borderTop: "1px solid var(--skl-color-border)",
+  margin: "0.25rem 0",
+};

package/src/Select.tsx

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