@skipleague/design 0.7.0 → 0.8.0

package/dist/IconRail.d.ts

@@ -0,0 +1,33 @@
+import type { CSSProperties, ReactNode } from "react";
+/** A single destination in the tablet {@link IconRail}. */
+export interface IconRailItem {
+    /** Stable key. */
+    key: string;
+    label: string;
+    /** ~21px line icon (stroke 2, currentColor) — inherits the item's color. */
+    icon: ReactNode;
+    /** Current route — highlighted brand. Derive from your router. */
+    active?: boolean;
+    /** Renders an `<a href>`; omit for a `<button>` (pure onClick). */
+    href?: string;
+    onClick?: () => void;
+}
+export interface IconRailProps {
+    items: IconRailItem[];
+    /** Rail width in px (default 78 — the shell's tablet nav column). */
+    width?: number;
+    /** Route item links via your own router (e.g. React Router's `<Link>`). */
+    renderLink?: (args: {
+        href: string;
+        style: CSSProperties;
+        "aria-current"?: "page";
+        children: ReactNode;
+    }) => ReactNode;
+}
+/**
+ * The tablet-width vertical navigation rail (design_handoff_responsive_shell) —
+ * icon-over-label stacks in a 78px column. Sits in the `rail` slot of
+ * {@link ResponsiveShell} between the phone bottom bar and the desktop
+ * {@link SidebarNav}. Nav only; identity/account live in the top bar.
+ */
+export declare function IconRail({ items, width, renderLink }: IconRailProps): import("react").JSX.Element;

package/dist/IconRail.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The tablet-width vertical navigation rail (design_handoff_responsive_shell) —
+ * icon-over-label stacks in a 78px column. Sits in the `rail` slot of
+ * {@link ResponsiveShell} between the phone bottom bar and the desktop
+ * {@link SidebarNav}. Nav only; identity/account live in the top bar.
+ */
+export function IconRail({ items, width = 78, renderLink }) {
+    return (_jsx("nav", { style: {
+            width,
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "stretch",
+            gap: 4,
+            padding: "14px 10px",
+            background: "#ffffff",
+            fontFamily: "var(--skl-font-sans)",
+        }, children: items.map((item) => (_jsx(Item, { item: item, renderLink: renderLink }, item.key))) }));
+}
+function Item({ item, renderLink, }) {
+    const { label, icon, active, href, onClick } = item;
+    const style = {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 5,
+        padding: "11px 6px",
+        borderRadius: 12,
+        textDecoration: "none",
+        cursor: "pointer",
+        color: active ? "var(--skl-color-brand)" : "#94a3b8",
+        background: active ? "var(--skl-color-current-bg)" : "transparent",
+    };
+    const inner = (_jsxs(_Fragment, { children: [icon, _jsx("span", { style: { fontSize: 9.5, fontWeight: 600, lineHeight: 1 }, children: label })] }));
+    if (href) {
+        if (renderLink) {
+            return renderLink({ href, style, "aria-current": active ? "page" : undefined, children: inner });
+        }
+        return (_jsx("a", { href: href, style: style, "aria-current": active ? "page" : undefined, onClick: onClick, children: inner }));
+    }
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-current": active ? "page" : undefined, style: { ...style, border: "none", width: "100%" }, children: inner }));
+}

package/dist/ProfileMenu.js

@@ -57,6 +57,10 @@ export function ProfileMenu({ user, currentSlug, apps = SKIPLEAGUE_APPS, enabled
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
+                    // Explicit padding:0 — a host app's global `button { padding }` would
+                    // otherwise collapse this fixed 38×38 box's content area (border-box)
+                    // and shrink the icon to a dot.
+                    padding: 0,
                     width: 38,
                     height: 38,
                     borderRadius: "var(--skl-radius-control)",

package/dist/ResponsiveShell.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+/**
+ * Class for an in-detail control that should only show while the detail panel is
+ * a phone/tablet overlay (e.g. its back button) — hidden once the panel is
+ * docked on desktop. Put it on the app's detail back button:
+ * `<button className={RESPONSIVE_SHELL_DETAIL_BACK_CLASS} onClick={onClose}>`.
+ */
+export declare const RESPONSIVE_SHELL_DETAIL_BACK_CLASS = "skl-shell-detail-back";
+export interface ResponsiveShellProps {
+    /** Persistent top bar — spans the full width at every breakpoint (e.g. TopBar/DesktopActionBar). */
+    topBar: ReactNode;
+    /** The center content column (scrolls). */
+    main: ReactNode;
+    /** Phone nav (`< 720px`) — e.g. the app's BottomNav. Hidden at wider widths. */
+    bottomNav?: ReactNode;
+    /** Tablet nav (`720–1079px`) — e.g. {@link IconRail}. Hidden otherwise. */
+    rail?: ReactNode;
+    /** Desktop nav (`≥ 1080px`) — e.g. SidebarNav (pass width 236 to fill the column). */
+    sidebar?: ReactNode;
+    /** Master-detail panel: docked right column on desktop; full-screen overlay on phone/tablet. */
+    detail?: ReactNode;
+    /** Phone/tablet overlay visibility. Ignored on desktop, where detail is always docked. */
+    detailOpen?: boolean;
+    /** Optional id for scoping/testing. */
+    id?: string;
+}
+/**
+ * The SkipLeague adaptive app shell (design_handoff_responsive_shell).
+ *
+ * ONE layout that reflows across three breakpoints — no separate mobile/desktop
+ * product. The top bar is constant; the nav and detail regions rearrange:
+ *
+ *   Phone  (<720):  top bar / content / bottom tab bar; detail = full overlay
+ *   Tablet (720–1079): top bar / [icon rail | content]; detail = full overlay
+ *   Desktop (≥1080):  top bar / [sidebar | content | docked detail]
+ *
+ * The detail is the SAME element everywhere (list-detail / master-detail): a
+ * drill-in overlay on phone/tablet, a permanently docked right column on desktop.
+ * Pass the app's own nav components into `bottomNav` / `rail` / `sidebar` — the
+ * shell shows the right one per breakpoint via CSS (no JS width state needed).
+ *
+ * Give the shell a fixed-height parent (e.g. `height: 100dvh`); it fills it and
+ * scrolls internally.
+ */
+export declare function ResponsiveShell({ topBar, main, bottomNav, rail, sidebar, detail, detailOpen, id, }: ResponsiveShellProps): import("react").JSX.Element;

package/dist/ResponsiveShell.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Class for an in-detail control that should only show while the detail panel is
+ * a phone/tablet overlay (e.g. its back button) — hidden once the panel is
+ * docked on desktop. Put it on the app's detail back button:
+ * `<button className={RESPONSIVE_SHELL_DETAIL_BACK_CLASS} onClick={onClose}>`.
+ */
+export const RESPONSIVE_SHELL_DETAIL_BACK_CLASS = "skl-shell-detail-back";
+// Breakpoints: phone < 720 ≤ tablet < 1080 ≤ desktop. One list-detail layout that
+// reflows — the desktop right panel IS the mobile drill-in, given a permanent column.
+const CSS = `
+.skl-shell {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--skl-color-app-bg, #f8fafc);
+  font-family: var(--skl-font-sans);
+}
+.skl-shell__top { flex: 0 0 auto; }
+.skl-shell__main { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+.skl-shell__bottom { flex: 0 0 auto; }
+.skl-shell__rail, .skl-shell__sidebar { display: none; }
+.skl-shell__detail {
+  position: absolute; inset: 0; z-index: 40; background: #fff;
+  display: none; flex-direction: column;
+}
+.skl-shell__detail.is-open { display: flex; animation: sklShellFade .2s ease-out; }
+.${RESPONSIVE_SHELL_DETAIL_BACK_CLASS} { display: inline-flex; }
+@keyframes sklShellFade { from { opacity: 0; } to { opacity: 1; } }
+
+@media (min-width: 720px) {
+  .skl-shell {
+    display: grid;
+    grid-template-columns: 78px 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-areas: "top top" "nav main";
+  }
+  .skl-shell__top { grid-area: top; }
+  .skl-shell__main { grid-area: main; height: 100%; }
+  .skl-shell__rail { grid-area: nav; display: flex; border-right: 1px solid var(--skl-color-border); }
+  .skl-shell__sidebar { grid-area: nav; }
+  .skl-shell__bottom { display: none; }
+}
+
+@media (min-width: 1080px) {
+  .skl-shell {
+    grid-template-columns: 236px 1fr 340px;
+    grid-template-areas: "top top top" "nav main detail";
+  }
+  .skl-shell__rail { display: none; }
+  .skl-shell__sidebar { grid-area: nav; display: block; border-right: 1px solid var(--skl-color-border); }
+  .skl-shell__detail {
+    position: relative; inset: auto; z-index: auto; grid-area: detail;
+    display: flex; border-left: 1px solid var(--skl-color-border); overflow-y: auto;
+  }
+  .${RESPONSIVE_SHELL_DETAIL_BACK_CLASS} { display: none; }
+}
+`;
+/**
+ * The SkipLeague adaptive app shell (design_handoff_responsive_shell).
+ *
+ * ONE layout that reflows across three breakpoints — no separate mobile/desktop
+ * product. The top bar is constant; the nav and detail regions rearrange:
+ *
+ *   Phone  (<720):  top bar / content / bottom tab bar; detail = full overlay
+ *   Tablet (720–1079): top bar / [icon rail | content]; detail = full overlay
+ *   Desktop (≥1080):  top bar / [sidebar | content | docked detail]
+ *
+ * The detail is the SAME element everywhere (list-detail / master-detail): a
+ * drill-in overlay on phone/tablet, a permanently docked right column on desktop.
+ * Pass the app's own nav components into `bottomNav` / `rail` / `sidebar` — the
+ * shell shows the right one per breakpoint via CSS (no JS width state needed).
+ *
+ * Give the shell a fixed-height parent (e.g. `height: 100dvh`); it fills it and
+ * scrolls internally.
+ */
+export function ResponsiveShell({ topBar, main, bottomNav, rail, sidebar, detail, detailOpen = false, id, }) {
+    return (_jsxs("div", { className: "skl-shell", id: id, children: [_jsx("style", { children: CSS }), _jsx("div", { className: "skl-shell__top", children: topBar }), sidebar && _jsx("div", { className: "skl-shell__sidebar", children: sidebar }), rail && _jsx("div", { className: "skl-shell__rail", children: rail }), _jsx("div", { className: "skl-shell__main", children: main }), detail && _jsx("div", { className: `skl-shell__detail${detailOpen ? " is-open" : ""}`, children: detail }), bottomNav && _jsx("div", { className: "skl-shell__bottom", children: bottomNav })] }));
+}

package/dist/TopBar.js

@@ -82,6 +82,9 @@ export function TopBarIconButton({ tone = "dark", compact = false, style, childr
             justifyContent: "center",
             cursor: "pointer",
             flex: "0 0 auto",
+            // Explicit padding:0 so a host app's global `button { padding }` can't
+            // collapse this fixed-size box (border-box) and shrink the icon.
+            padding: 0,
             background: palette.background,
             border: `1px solid ${palette.border}`,
             color: palette.color,

package/dist/index.d.ts

@@ -7,6 +7,10 @@ export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
 export type { TopBarTone } from "./TopBar.js";
 export { SidebarNav } from "./SidebarNav.js";
 export type { SidebarNavProps, SidebarNavSection, SidebarNavItem, SidebarNavLinkArgs } from "./SidebarNav.js";
+export { IconRail } from "./IconRail.js";
+export type { IconRailProps, IconRailItem } from "./IconRail.js";
+export { ResponsiveShell, RESPONSIVE_SHELL_DETAIL_BACK_CLASS } from "./ResponsiveShell.js";
+export type { ResponsiveShellProps } from "./ResponsiveShell.js";
 export { BottomNav } from "./BottomNav.js";
 export type { BottomNavProps, BottomNavTab, BottomNavAction } from "./BottomNav.js";
 export { ShareMenu } from "./ShareMenu.js";

package/dist/index.js

@@ -3,6 +3,8 @@ export { AppBadge } from "./AppBadge.js";
 export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
 export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
 export { SidebarNav } from "./SidebarNav.js";
+export { IconRail } from "./IconRail.js";
+export { ResponsiveShell, RESPONSIVE_SHELL_DETAIL_BACK_CLASS } from "./ResponsiveShell.js";
 export { BottomNav } from "./BottomNav.js";
 export { ShareMenu } from "./ShareMenu.js";
 export { Button } from "./Button.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skipleague/design",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "SkipUI — the SkipLeague design system: shared tokens and React components for every SkipLeague app.",
   "type": "module",
   "repository": {

package/src/IconRail.tsx

@@ -0,0 +1,96 @@
+import type { CSSProperties, ReactNode } from "react";
+
+/** A single destination in the tablet {@link IconRail}. */
+export interface IconRailItem {
+  /** Stable key. */
+  key: string;
+  label: string;
+  /** ~21px line icon (stroke 2, currentColor) — inherits the item's color. */
+  icon: ReactNode;
+  /** Current route — highlighted brand. Derive from your router. */
+  active?: boolean;
+  /** Renders an `<a href>`; omit for a `<button>` (pure onClick). */
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface IconRailProps {
+  items: IconRailItem[];
+  /** Rail width in px (default 78 — the shell's tablet nav column). */
+  width?: number;
+  /** Route item links via your own router (e.g. React Router's `<Link>`). */
+  renderLink?: (args: { href: string; style: CSSProperties; "aria-current"?: "page"; children: ReactNode }) => ReactNode;
+}
+
+/**
+ * The tablet-width vertical navigation rail (design_handoff_responsive_shell) —
+ * icon-over-label stacks in a 78px column. Sits in the `rail` slot of
+ * {@link ResponsiveShell} between the phone bottom bar and the desktop
+ * {@link SidebarNav}. Nav only; identity/account live in the top bar.
+ */
+export function IconRail({ items, width = 78, renderLink }: IconRailProps) {
+  return (
+    <nav
+      style={{
+        width,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+        gap: 4,
+        padding: "14px 10px",
+        background: "#ffffff",
+        fontFamily: "var(--skl-font-sans)",
+      }}
+    >
+      {items.map((item) => (
+        <Item key={item.key} item={item} renderLink={renderLink} />
+      ))}
+    </nav>
+  );
+}
+
+function Item({
+  item,
+  renderLink,
+}: {
+  item: IconRailItem;
+  renderLink?: IconRailProps["renderLink"];
+}) {
+  const { label, icon, active, href, onClick } = item;
+  const style: CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 5,
+    padding: "11px 6px",
+    borderRadius: 12,
+    textDecoration: "none",
+    cursor: "pointer",
+    color: active ? "var(--skl-color-brand)" : "#94a3b8",
+    background: active ? "var(--skl-color-current-bg)" : "transparent",
+  };
+  const inner = (
+    <>
+      {icon}
+      <span style={{ fontSize: 9.5, fontWeight: 600, lineHeight: 1 }}>{label}</span>
+    </>
+  );
+
+  if (href) {
+    if (renderLink) {
+      return renderLink({ href, style, "aria-current": active ? "page" : undefined, children: inner });
+    }
+    return (
+      <a href={href} style={style} aria-current={active ? "page" : undefined} onClick={onClick}>
+        {inner}
+      </a>
+    );
+  }
+  return (
+    <button type="button" onClick={onClick} aria-current={active ? "page" : undefined} style={{ ...style, border: "none", width: "100%" }}>
+      {inner}
+    </button>
+  );
+}

package/src/ProfileMenu.tsx

@@ -161,6 +161,10 @@ export function ProfileMenu({
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center",
+          // Explicit padding:0 — a host app's global `button { padding }` would
+          // otherwise collapse this fixed 38×38 box's content area (border-box)
+          // and shrink the icon to a dot.
+          padding: 0,
           width: 38,
           height: 38,
           borderRadius: "var(--skl-radius-control)",

package/src/ResponsiveShell.tsx

@@ -0,0 +1,122 @@
+import type { ReactNode } from "react";
+
+/**
+ * Class for an in-detail control that should only show while the detail panel is
+ * a phone/tablet overlay (e.g. its back button) — hidden once the panel is
+ * docked on desktop. Put it on the app's detail back button:
+ * `<button className={RESPONSIVE_SHELL_DETAIL_BACK_CLASS} onClick={onClose}>`.
+ */
+export const RESPONSIVE_SHELL_DETAIL_BACK_CLASS = "skl-shell-detail-back";
+
+export interface ResponsiveShellProps {
+  /** Persistent top bar — spans the full width at every breakpoint (e.g. TopBar/DesktopActionBar). */
+  topBar: ReactNode;
+  /** The center content column (scrolls). */
+  main: ReactNode;
+  /** Phone nav (`< 720px`) — e.g. the app's BottomNav. Hidden at wider widths. */
+  bottomNav?: ReactNode;
+  /** Tablet nav (`720–1079px`) — e.g. {@link IconRail}. Hidden otherwise. */
+  rail?: ReactNode;
+  /** Desktop nav (`≥ 1080px`) — e.g. SidebarNav (pass width 236 to fill the column). */
+  sidebar?: ReactNode;
+  /** Master-detail panel: docked right column on desktop; full-screen overlay on phone/tablet. */
+  detail?: ReactNode;
+  /** Phone/tablet overlay visibility. Ignored on desktop, where detail is always docked. */
+  detailOpen?: boolean;
+  /** Optional id for scoping/testing. */
+  id?: string;
+}
+
+// Breakpoints: phone < 720 ≤ tablet < 1080 ≤ desktop. One list-detail layout that
+// reflows — the desktop right panel IS the mobile drill-in, given a permanent column.
+const CSS = `
+.skl-shell {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--skl-color-app-bg, #f8fafc);
+  font-family: var(--skl-font-sans);
+}
+.skl-shell__top { flex: 0 0 auto; }
+.skl-shell__main { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
+.skl-shell__bottom { flex: 0 0 auto; }
+.skl-shell__rail, .skl-shell__sidebar { display: none; }
+.skl-shell__detail {
+  position: absolute; inset: 0; z-index: 40; background: #fff;
+  display: none; flex-direction: column;
+}
+.skl-shell__detail.is-open { display: flex; animation: sklShellFade .2s ease-out; }
+.${RESPONSIVE_SHELL_DETAIL_BACK_CLASS} { display: inline-flex; }
+@keyframes sklShellFade { from { opacity: 0; } to { opacity: 1; } }
+
+@media (min-width: 720px) {
+  .skl-shell {
+    display: grid;
+    grid-template-columns: 78px 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-areas: "top top" "nav main";
+  }
+  .skl-shell__top { grid-area: top; }
+  .skl-shell__main { grid-area: main; height: 100%; }
+  .skl-shell__rail { grid-area: nav; display: flex; border-right: 1px solid var(--skl-color-border); }
+  .skl-shell__sidebar { grid-area: nav; }
+  .skl-shell__bottom { display: none; }
+}
+
+@media (min-width: 1080px) {
+  .skl-shell {
+    grid-template-columns: 236px 1fr 340px;
+    grid-template-areas: "top top top" "nav main detail";
+  }
+  .skl-shell__rail { display: none; }
+  .skl-shell__sidebar { grid-area: nav; display: block; border-right: 1px solid var(--skl-color-border); }
+  .skl-shell__detail {
+    position: relative; inset: auto; z-index: auto; grid-area: detail;
+    display: flex; border-left: 1px solid var(--skl-color-border); overflow-y: auto;
+  }
+  .${RESPONSIVE_SHELL_DETAIL_BACK_CLASS} { display: none; }
+}
+`;
+
+/**
+ * The SkipLeague adaptive app shell (design_handoff_responsive_shell).
+ *
+ * ONE layout that reflows across three breakpoints — no separate mobile/desktop
+ * product. The top bar is constant; the nav and detail regions rearrange:
+ *
+ *   Phone  (<720):  top bar / content / bottom tab bar; detail = full overlay
+ *   Tablet (720–1079): top bar / [icon rail | content]; detail = full overlay
+ *   Desktop (≥1080):  top bar / [sidebar | content | docked detail]
+ *
+ * The detail is the SAME element everywhere (list-detail / master-detail): a
+ * drill-in overlay on phone/tablet, a permanently docked right column on desktop.
+ * Pass the app's own nav components into `bottomNav` / `rail` / `sidebar` — the
+ * shell shows the right one per breakpoint via CSS (no JS width state needed).
+ *
+ * Give the shell a fixed-height parent (e.g. `height: 100dvh`); it fills it and
+ * scrolls internally.
+ */
+export function ResponsiveShell({
+  topBar,
+  main,
+  bottomNav,
+  rail,
+  sidebar,
+  detail,
+  detailOpen = false,
+  id,
+}: ResponsiveShellProps) {
+  return (
+    <div className="skl-shell" id={id}>
+      <style>{CSS}</style>
+      <div className="skl-shell__top">{topBar}</div>
+      {sidebar && <div className="skl-shell__sidebar">{sidebar}</div>}
+      {rail && <div className="skl-shell__rail">{rail}</div>}
+      <div className="skl-shell__main">{main}</div>
+      {detail && <div className={`skl-shell__detail${detailOpen ? " is-open" : ""}`}>{detail}</div>}
+      {bottomNav && <div className="skl-shell__bottom">{bottomNav}</div>}
+    </div>
+  );
+}

package/src/TopBar.tsx

@@ -168,6 +168,9 @@ export function TopBarIconButton({
         justifyContent: "center",
         cursor: "pointer",
         flex: "0 0 auto",
+        // Explicit padding:0 so a host app's global `button { padding }` can't
+        // collapse this fixed-size box (border-box) and shrink the icon.
+        padding: 0,
         background: palette.background,
         border: `1px solid ${palette.border}`,
         color: palette.color,

package/src/index.ts

@@ -7,6 +7,10 @@ export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
 export type { TopBarTone } from "./TopBar.js";
 export { SidebarNav } from "./SidebarNav.js";
 export type { SidebarNavProps, SidebarNavSection, SidebarNavItem, SidebarNavLinkArgs } from "./SidebarNav.js";
+export { IconRail } from "./IconRail.js";
+export type { IconRailProps, IconRailItem } from "./IconRail.js";
+export { ResponsiveShell, RESPONSIVE_SHELL_DETAIL_BACK_CLASS } from "./ResponsiveShell.js";
+export type { ResponsiveShellProps } from "./ResponsiveShell.js";
 export { BottomNav } from "./BottomNav.js";
 export type { BottomNavProps, BottomNavTab, BottomNavAction } from "./BottomNav.js";
 export { ShareMenu } from "./ShareMenu.js";