@skipleague/design 0.8.0 → 0.9.0

package/README.md

@@ -49,7 +49,7 @@ SkipToday/SkipEvolve launch), update `src/apps.ts` — every app's menu follows.
 
 ## Exports
 
-- `ProfileMenu`, `AppBadge`, `AppLogo`, `TopBar`, `TopBarIconButton`, `ShareMenu`
+- `ProfileMenu`, `AppBadge`, `AppLogo`, `TopBar`, `TopBarIconButton`, `TopBarBackButton`, `ShareMenu`
 - `Button`, `Card`, `Field`, `Input`, `Select`
 - `SKIPLEAGUE_APPS`, `SKIPLEAGUE_ACCOUNT_URL`, type `AppLink`
 - `@skipleague/design/tokens.css` — the design tokens (CSS variables)

package/dist/ResponsiveShell.js

@@ -49,6 +49,11 @@ const CSS = `
     grid-template-columns: 236px 1fr 340px;
     grid-template-areas: "top top top" "nav main detail";
   }
+  /* Views without a detail panel: drop the docked column (sidebar + content only). */
+  .skl-shell--no-detail {
+    grid-template-columns: 236px 1fr;
+    grid-template-areas: "top top" "nav main";
+  }
   .skl-shell__rail { display: none; }
   .skl-shell__sidebar { grid-area: nav; display: block; border-right: 1px solid var(--skl-color-border); }
   .skl-shell__detail {
@@ -77,5 +82,5 @@ const CSS = `
  * 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 })] }));
+    return (_jsxs("div", { className: `skl-shell${detail ? "" : " skl-shell--no-detail"}`, 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.d.ts

@@ -54,6 +54,23 @@ export declare function TopBarIconButton({ tone, compact, style, children, ...pr
     tone?: TopBarTone;
     compact?: boolean;
 }): import("react").JSX.Element;
+/**
+ * The Back affordance for a drill-in / detail screen's app bar — a
+ * {@link TopBarIconButton} carrying a left chevron, so every app's back button
+ * looks and behaves identically (same tone-aware ghost styling as Search,
+ * Share, ProfileMenu, etc.). Pair it with the app's router, e.g.
+ * `<TopBarBackButton onClick={() => navigate(-1)} />`.
+ *
+ * Works on both a full {@link TopBar} (pass it via `actions`, though back
+ * usually sits on the LEFT — apps that build a contextual detail header place it
+ * directly) and a bespoke contextual header.
+ */
+export declare function TopBarBackButton({ tone, compact, label, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    tone?: TopBarTone;
+    compact?: boolean;
+    /** Accessible label + tooltip (default "Back"). */
+    label?: string;
+}): import("react").JSX.Element;
 /**
  * Alias for {@link TopBar} under its platform-app-bar name. Same component,
  * same props — use whichever import name the app standardizes on.

package/dist/TopBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Inbox, MoreHorizontal, Search, Upload, Users } from "lucide-react";
+import { ChevronLeft, Inbox, MoreHorizontal, Search, Upload, Users } from "lucide-react";
 import { AppLogo } from "./AppLogo.js";
 import { ProfileMenu } from "./ProfileMenu.js";
 /**
@@ -92,6 +92,20 @@ export function TopBarIconButton({ tone = "dark", compact = false, style, childr
             ...style,
         }, ...props, children: children }));
 }
+/**
+ * The Back affordance for a drill-in / detail screen's app bar — a
+ * {@link TopBarIconButton} carrying a left chevron, so every app's back button
+ * looks and behaves identically (same tone-aware ghost styling as Search,
+ * Share, ProfileMenu, etc.). Pair it with the app's router, e.g.
+ * `<TopBarBackButton onClick={() => navigate(-1)} />`.
+ *
+ * Works on both a full {@link TopBar} (pass it via `actions`, though back
+ * usually sits on the LEFT — apps that build a contextual detail header place it
+ * directly) and a bespoke contextual header.
+ */
+export function TopBarBackButton({ tone = "dark", compact = false, label = "Back", ...props }) {
+    return (_jsx(TopBarIconButton, { tone: tone, compact: compact, "aria-label": label, title: label, ...props, children: _jsx(ChevronLeft, { size: 20 }) }));
+}
 /**
  * Alias for {@link TopBar} under its platform-app-bar name. Same component,
  * same props — use whichever import name the app standardizes on.

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export type { ProfileMenuProps, ProfileMenuUser, ProfileMenuLinkArgs } from "./P
 export { AppBadge } from "./AppBadge.js";
 export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
 export type { AppGlyph } from "./AppLogo.js";
-export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
+export { TopBar, TopBarIconButton, TopBarBackButton, DesktopActionBar } from "./TopBar.js";
 export type { TopBarTone } from "./TopBar.js";
 export { SidebarNav } from "./SidebarNav.js";
 export type { SidebarNavProps, SidebarNavSection, SidebarNavItem, SidebarNavLinkArgs } from "./SidebarNav.js";

package/dist/index.js

@@ -1,7 +1,7 @@
 export { ProfileMenu } from "./ProfileMenu.js";
 export { AppBadge } from "./AppBadge.js";
 export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
-export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
+export { TopBar, TopBarIconButton, TopBarBackButton, DesktopActionBar } from "./TopBar.js";
 export { SidebarNav } from "./SidebarNav.js";
 export { IconRail } from "./IconRail.js";
 export { ResponsiveShell, RESPONSIVE_SHELL_DETAIL_BACK_CLASS } from "./ResponsiveShell.js";

package/package.json

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

package/src/ResponsiveShell.tsx

@@ -70,6 +70,11 @@ const CSS = `
     grid-template-columns: 236px 1fr 340px;
     grid-template-areas: "top top top" "nav main detail";
   }
+  /* Views without a detail panel: drop the docked column (sidebar + content only). */
+  .skl-shell--no-detail {
+    grid-template-columns: 236px 1fr;
+    grid-template-areas: "top top" "nav main";
+  }
   .skl-shell__rail { display: none; }
   .skl-shell__sidebar { grid-area: nav; display: block; border-right: 1px solid var(--skl-color-border); }
   .skl-shell__detail {
@@ -109,7 +114,7 @@ export function ResponsiveShell({
   id,
 }: ResponsiveShellProps) {
   return (
-    <div className="skl-shell" id={id}>
+    <div className={`skl-shell${detail ? "" : " skl-shell--no-detail"}`} id={id}>
       <style>{CSS}</style>
       <div className="skl-shell__top">{topBar}</div>
       {sidebar && <div className="skl-shell__sidebar">{sidebar}</div>}

package/src/TopBar.tsx

@@ -1,5 +1,5 @@
 import { useState, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
-import { Inbox, MoreHorizontal, Search, Upload, Users, type LucideIcon } from "lucide-react";
+import { ChevronLeft, Inbox, MoreHorizontal, Search, Upload, Users, type LucideIcon } from "lucide-react";
 
 import { AppLogo, type AppGlyph } from "./AppLogo.js";
 import { ProfileMenu, type ProfileMenuProps } from "./ProfileMenu.js";
@@ -184,6 +184,41 @@ export function TopBarIconButton({
   );
 }
 
+/**
+ * The Back affordance for a drill-in / detail screen's app bar — a
+ * {@link TopBarIconButton} carrying a left chevron, so every app's back button
+ * looks and behaves identically (same tone-aware ghost styling as Search,
+ * Share, ProfileMenu, etc.). Pair it with the app's router, e.g.
+ * `<TopBarBackButton onClick={() => navigate(-1)} />`.
+ *
+ * Works on both a full {@link TopBar} (pass it via `actions`, though back
+ * usually sits on the LEFT — apps that build a contextual detail header place it
+ * directly) and a bespoke contextual header.
+ */
+export function TopBarBackButton({
+  tone = "dark",
+  compact = false,
+  label = "Back",
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & {
+  tone?: TopBarTone;
+  compact?: boolean;
+  /** Accessible label + tooltip (default "Back"). */
+  label?: string;
+}) {
+  return (
+    <TopBarIconButton
+      tone={tone}
+      compact={compact}
+      aria-label={label}
+      title={label}
+      {...props}
+    >
+      <ChevronLeft size={20} />
+    </TopBarIconButton>
+  );
+}
+
 /**
  * Alias for {@link TopBar} under its platform-app-bar name. Same component,
  * same props — use whichever import name the app standardizes on.

package/src/index.ts

@@ -3,7 +3,7 @@ export type { ProfileMenuProps, ProfileMenuUser, ProfileMenuLinkArgs } from "./P
 export { AppBadge } from "./AppBadge.js";
 export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
 export type { AppGlyph } from "./AppLogo.js";
-export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
+export { TopBar, TopBarIconButton, TopBarBackButton, DesktopActionBar } from "./TopBar.js";
 export type { TopBarTone } from "./TopBar.js";
 export { SidebarNav } from "./SidebarNav.js";
 export type { SidebarNavProps, SidebarNavSection, SidebarNavItem, SidebarNavLinkArgs } from "./SidebarNav.js";