@cyberskill/design 1.0.0

package/components/navigation/Dock.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+
+/** Icon dock with hover magnification (labels via aria/title; active dot). */
+export interface DockItem { icon: ReactNode; label: string; onSelect?: () => void; active?: boolean; }
+export interface DockProps { items: DockItem[]; label?: string; className?: string; }
+export function Dock(props: DockProps): React.ReactElement;

package/components/navigation/Dock.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Dock } from './Dock.jsx'
+
+/**
+ * Code Connect stub — Dock
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(Dock, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-32', {
+  example: () => <Dock />,
+  imports: ["import { Dock } from '@cyberskill/design'"],
+})

package/components/navigation/Dock.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Dock — icon dock with hover magnification. items: {icon,label,onSelect,active}. */
+export function Dock({ items = [], label, className }) {
+  const [hov, setHov] = React.useState(null);
+  return (
+    <div className={cx("cs-dock", className)} role="toolbar" aria-label={label} onMouseLeave={() => setHov(null)}>
+      {items.map((it, i) => {
+        const d = hov == null ? 3 : Math.abs(i - hov);
+        const scale = d === 0 ? 1.35 : d === 1 ? 1.15 : 1;
+        return (
+          <button key={i} type="button" className={cx("cs-dock__item", it.active && "is-active")} aria-label={it.label} title={it.label}
+            style={{ transform: `scale(${scale}) translateY(${d === 0 ? -6 : d === 1 ? -2 : 0}px)` }}
+            onMouseEnter={() => setHov(i)} onFocus={() => setHov(i)} onBlur={() => setHov(null)} onClick={() => it.onSelect && it.onSelect()}>
+            {it.icon}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/components/navigation/Dock.prompt.md

@@ -0,0 +1,5 @@
+**Dock** — magnifying icon dock (active dot, aria labels).
+
+```jsx
+<Dock label="Apps" items={[{icon:<Icon name="chat"/>,label:"Lumi",active:true}]}/>
+```

package/components/navigation/HotKeys.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+
+/** Global keymap manager. "mod" = Cmd/Ctrl. "?" toggles a bilingual cheat-sheet
+ *  (disable with help={false}). Ignores keystrokes inside inputs. */
+export interface HotKeyBinding { keys: string; description?: ReactNode; onTrigger?: () => void; }
+export interface HotKeysProps {
+  bindings: HotKeyBinding[];
+  help?: boolean;
+  children?: ReactNode;
+  lang?: string;
+  className?: string;
+}
+export function HotKeys(props: HotKeysProps): React.ReactElement;

package/components/navigation/HotKeys.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { HotKeys } from './HotKeys.jsx'
+
+/**
+ * Code Connect stub — HotKeys
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(HotKeys, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-39', {
+  example: () => <HotKeys />,
+  imports: ["import { HotKeys } from '@cyberskill/design'"],
+})

package/components/navigation/HotKeys.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+function match(combo, e) {
+  const parts = combo.toLowerCase().split("+");
+  const key = parts[parts.length - 1];
+  const mod = parts.includes("mod") ? (e.metaKey || e.ctrlKey) : true;
+  const shift = parts.includes("shift") ? e.shiftKey : !e.shiftKey || key.length > 1;
+  const alt = parts.includes("alt") ? e.altKey : !e.altKey;
+  return mod && shift && alt && e.key.toLowerCase() === key;
+}
+
+/** CyberSkill HotKeys — global keymap: bindings [{keys:"mod+k",description,onTrigger}]. "?" opens a bilingual cheat-sheet. */
+export function HotKeys({ bindings = [], help = true, children, lang, className }) {
+  const [show, setShow] = React.useState(false);
+  const [ref, L] = useLang(lang);
+  const t = makeT("HotKeys", L);
+  React.useEffect(() => {
+    const on = (e) => {
+      if (e.target && /INPUT|TEXTAREA|SELECT/.test(e.target.tagName)) return;
+      if (help && e.key === "?") { setShow((s) => !s); return; }
+      if (e.key === "Escape") setShow(false);
+      for (const b of bindings) if (match(b.keys, e)) { e.preventDefault(); b.onTrigger && b.onTrigger(); return; }
+    };
+    document.addEventListener("keydown", on);
+    return () => document.removeEventListener("keydown", on);
+  }, [bindings, help]);
+  return (
+    <div ref={ref} className={cx("cs-hotkeys", className)}>
+      {children}
+      {show ? (
+        <div className="cs-hotkeys__sheet" role="dialog" aria-label={t("title")} onClick={() => setShow(false)}>
+          <div className="cs-hotkeys__card" onClick={(e) => e.stopPropagation()}>
+            <b>{t("title")}</b>
+            <ul>
+              {bindings.map((b, i) => <li key={i}><span>{b.description}</span><kbd className="cs-kbd">{b.keys}</kbd></li>)}
+              <li><span>{t("toggle")}</span><kbd className="cs-kbd">?</kbd></li>
+            </ul>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/navigation/HotKeys.prompt.md

@@ -0,0 +1,5 @@
+**HotKeys** — keymap manager + "?" cheat-sheet (bilingual).
+
+```jsx
+<HotKeys bindings={[{keys:"mod+k",description:"Command palette",onTrigger:openCmdk}]}>{app}</HotKeys>
+```

package/components/navigation/Link.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+
+/** Brand-styled anchor. variant: default (underlined umber-ochre) | muted |
+ *  standalone (bold + arrow). external opens a new tab with rel + ↗. */
+export interface LinkProps {
+  href?: string;
+  variant?: "default" | "muted" | "standalone";
+  external?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+export function Link(props: LinkProps): React.ReactElement;

package/components/navigation/Link.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Link } from './Link.jsx'
+
+/**
+ * Code Connect stub — Link
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(Link, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-48', {
+  example: () => <Link />,
+  imports: ["import { Link } from '@cyberskill/design'"],
+})

package/components/navigation/Link.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Link — brand-styled anchor. variant: default | muted | standalone (arrow). external adds ↗ + rel. */
+export function Link({ href = "#", variant = "default", external = false, children, className, ...props }) {
+  return (
+    <a href={href} className={cx("cs-link", variant !== "default" && "cs-link--" + variant, className)}
+      target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined} {...props}>
+      {children}
+      {external ? <span aria-hidden="true"> ↗</span> : variant === "standalone" ? <span aria-hidden="true"> →</span> : null}
+    </a>
+  );
+}

package/components/navigation/Link.prompt.md

@@ -0,0 +1,5 @@
+**Link** — brand anchor (default · muted · standalone→, `external` ↗).
+
+```jsx
+<Link href="/work" variant="standalone">See our work</Link>
+```

package/components/navigation/Menu.d.ts

@@ -0,0 +1,23 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Dropdown menu anchored to a trigger. Uncontrolled by default (click to
+ * toggle, outside-click / Escape to close) or controlled via open/onOpenChange.
+ * Compose MenuItem children; separate groups with `<div className="cs-menu__sep" />`.
+ */
+export interface MenuProps {
+  trigger: ReactNode;
+  children?: ReactNode;
+  align?: "start" | "end";
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+export function Menu(props: MenuProps): React.ReactElement;
+
+export interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  danger?: boolean;
+  icon?: ReactNode;
+}
+export function MenuItem(props: MenuItemProps): React.ReactElement;

package/components/navigation/Menu.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Menu } from './Menu.jsx'
+
+/**
+ * Code Connect stub — Menu
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(Menu, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-54', {
+  example: () => <Menu />,
+  imports: ["import { Menu } from '@cyberskill/design'"],
+})

package/components/navigation/Menu.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Menu — dropdown. Provide a `trigger` element; compose MenuItem children. */
+export function Menu({ trigger, children, align = "start", open: controlledOpen, onOpenChange, className }) {
+  const [uOpen, setUOpen] = React.useState(false);
+  const open = controlledOpen != null ? controlledOpen : uOpen;
+  const set = (v) => { onOpenChange ? onOpenChange(v) : setUOpen(v); };
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) set(false); };
+    const onKey = (e) => { if (e.key === "Escape") set(false); };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
+  }, [open]);
+  return (
+    <div className={cx("cs-menu", className)} ref={ref}>
+      <span onClick={() => set(!open)} aria-haspopup="menu" aria-expanded={open}>{trigger}</span>
+      {open ? (
+        <div className={cx("cs-menu__list", align === "end" && "cs-menu__list--end")} role="menu">{children}</div>
+      ) : null}
+    </div>
+  );
+}
+
+/** An item inside a Menu. */
+export function MenuItem({ danger = false, icon, children, className, ...props }) {
+  return (
+    <button type="button" role="menuitem" className={cx("cs-menu__item", danger && "cs-menu__item--danger", className)} {...props}>
+      {icon ? <span aria-hidden="true">{icon}</span> : null}
+      {children}
+    </button>
+  );
+}

package/components/navigation/Menu.prompt.md

@@ -0,0 +1,9 @@
+**Menu / MenuItem** — dropdown anchored to a `trigger`. Uncontrolled (click toggles; outside-click / Escape close) or controlled via `open`/`onOpenChange`. `align="end"` right-aligns.
+
+```jsx
+<Menu trigger={<button className="cs-button cs-button--secondary cs-button--sm">Actions</button>}>
+  <MenuItem>Duplicate</MenuItem>
+  <div className="cs-menu__sep" />
+  <MenuItem danger>Delete</MenuItem>
+</Menu>
+```

package/components/navigation/Menubar.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+/** App-style horizontal menu bar; hover switches menus while one is open. */
+export type MenubarItem = { label: ReactNode; onSelect?: () => void; danger?: boolean } | "-";
+export interface MenubarMenu { label: ReactNode; items: MenubarItem[]; }
+export interface MenubarProps { menus: MenubarMenu[]; className?: string; }
+export function Menubar(props: MenubarProps): React.ReactElement;

package/components/navigation/Menubar.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Menubar } from './Menubar.jsx'
+
+/**
+ * Code Connect stub — Menubar
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(Menubar, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-55', {
+  example: () => <Menubar />,
+  imports: ["import { Menubar } from '@cyberskill/design'"],
+})

package/components/navigation/Menubar.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Menubar — app-style horizontal menu bar. menus: [{label, items:[{label,onSelect,danger}|"-"]}]. */
+export function Menubar({ menus = [], className }) {
+  const [open, setOpen] = React.useState(null);
+  const [focusI, setFocusI] = React.useState(0);
+  const wrap = React.useRef(null);
+  const btns = React.useRef([]);
+  React.useEffect(() => {
+    if (open == null) return;
+    const d = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(null); };
+    const k = (e) => { if (e.key === "Escape") { const i = open; setOpen(null); const b = btns.current[i]; if (b) b.focus(); } };
+    document.addEventListener("mousedown", d);
+    document.addEventListener("keydown", k);
+    return () => { document.removeEventListener("mousedown", d); document.removeEventListener("keydown", k); };
+  }, [open]);
+  const nav = (e, i) => {
+    let n = null;
+    if (e.key === "ArrowRight") n = (i + 1) % menus.length;
+    else if (e.key === "ArrowLeft") n = (i - 1 + menus.length) % menus.length;
+    else if (e.key === "Home") n = 0;
+    else if (e.key === "End") n = menus.length - 1;
+    else if (e.key === "ArrowDown") { e.preventDefault(); setOpen(i); return; }
+    if (n == null) return;
+    e.preventDefault(); setFocusI(n); if (open != null) setOpen(n);
+    const b = btns.current[n]; if (b) b.focus();
+  };
+  return (
+    <div ref={wrap} className={cx("cs-menubar", className)} role="menubar">
+      {menus.map((m, i) => (
+        <span key={i} className="cs-menubar__wrap">
+          <button type="button" role="menuitem" aria-haspopup="menu" aria-expanded={open === i} tabIndex={i === focusI ? 0 : -1}
+            ref={(el) => (btns.current[i] = el)} onKeyDown={(e) => nav(e, i)} onFocus={() => setFocusI(i)}
+            className={cx("cs-menubar__top", open === i && "is-open")}
+            onClick={() => setOpen(open === i ? null : i)} onMouseEnter={() => { if (open != null && open !== i) setOpen(i); }}>{m.label}</button>
+          {open === i ? (
+            <span className="cs-menu__list" role="menu">
+              {m.items.map((it, j) => it === "-"
+                ? <span key={j} className="cs-menu__sep" />
+                : <button key={j} type="button" role="menuitem" className={cx("cs-menu__item", it.danger && "cs-menu__item--danger")} onClick={() => { setOpen(null); it.onSelect && it.onSelect(); }}>{it.label}</button>)}
+            </span>
+          ) : null}
+        </span>
+      ))}
+    </div>
+  );
+}

package/components/navigation/Menubar.prompt.md

@@ -0,0 +1,5 @@
+**Menubar** — app menu bar (File/Edit-style); hover switches while open, "-" separators.
+
+```jsx
+<Menubar menus={[{label:"File",items:[{label:"New"},"-",{label:"Export"}]},{label:"Edit",items:[{label:"Undo"}]}]}/>
+```

package/components/navigation/NavigationMenu.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+/** Site navigation with optional rich panels (mega-menu style). */
+export interface NavPanelLink { label: ReactNode; desc?: ReactNode; href?: string; }
+export type NavigationMenuItem = { label: ReactNode; href?: string; panel?: NavPanelLink[] };
+export interface NavigationMenuProps { items: NavigationMenuItem[]; className?: string; }
+export function NavigationMenu(props: NavigationMenuProps): React.ReactElement;

package/components/navigation/NavigationMenu.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { NavigationMenu } from './NavigationMenu.jsx'
+
+/**
+ * Code Connect stub — NavigationMenu
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(NavigationMenu, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-56', {
+  example: () => <NavigationMenu />,
+  imports: ["import { NavigationMenu } from '@cyberskill/design'"],
+})

package/components/navigation/NavigationMenu.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill NavigationMenu — site nav; entries are links or open a rich panel of links. */
+export function NavigationMenu({ items = [], className }) {
+  const [open, setOpen] = React.useState(null);
+  const wrap = React.useRef(null);
+  React.useEffect(() => {
+    if (open == null) return;
+    const d = (e) => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(null); };
+    const k = (e) => { if (e.key === "Escape") setOpen(null); };
+    document.addEventListener("mousedown", d);
+    document.addEventListener("keydown", k);
+    return () => { document.removeEventListener("mousedown", d); document.removeEventListener("keydown", k); };
+  }, [open]);
+  return (
+    <nav ref={wrap} className={cx("cs-navmenu", className)}>
+      {items.map((it, i) => it.panel ? (
+        <span key={i} className="cs-navmenu__wrap">
+          <button type="button" className={cx("cs-navmenu__top", open === i && "is-open")} aria-expanded={open === i} aria-haspopup="true"
+            onClick={() => setOpen(open === i ? null : i)} onMouseEnter={() => { if (open != null && open !== i) setOpen(i); }}>{it.label} <span aria-hidden="true">▾</span></button>
+          {open === i ? (
+            <span className="cs-navmenu__panel">
+              {it.panel.map((p, j) => (
+                <a key={j} href={p.href || "#"} className="cs-navmenu__card" onClick={() => setOpen(null)}>
+                  <b>{p.label}</b>
+                  {p.desc ? <small>{p.desc}</small> : null}
+                </a>
+              ))}
+            </span>
+          ) : null}
+        </span>
+      ) : (
+        <a key={i} href={it.href || "#"} className="cs-navmenu__top">{it.label}</a>
+      ))}
+    </nav>
+  );
+}

package/components/navigation/NavigationMenu.prompt.md

@@ -0,0 +1,5 @@
+**NavigationMenu** — site nav; entries link out or open a panel of rich links.
+
+```jsx
+<NavigationMenu items={[{label:"Services",panel:[{label:"Web apps",desc:"Product apps",href:"#"}]},{label:"Work",href:"#"}]}/>
+```

package/components/navigation/Pagination.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+/**
+ * Page navigation with prev/next arrows and automatic ellipsis for long ranges.
+ * Controlled via page / pageCount / onChange.
+ */
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+  page?: number;
+  pageCount?: number;
+  onChange?: (page: number) => void;
+}
+
+export function Pagination(props: PaginationProps): React.ReactElement;

package/components/navigation/Pagination.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Pagination } from './Pagination.jsx'
+
+/**
+ * Code Connect stub — Pagination
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(Pagination, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-58', {
+  example: () => <Pagination />,
+  imports: ["import { Pagination } from '@cyberskill/design'"],
+})

package/components/navigation/Pagination.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
+import { cx } from "../_utils/cx.js";
+
+function pages(page, count) {
+  if (count <= 7) return Array.from({ length: count }, (_, i) => i + 1);
+  const out = [1];
+  const lo = Math.max(2, page - 1), hi = Math.min(count - 1, page + 1);
+  if (lo > 2) out.push("…");
+  for (let p = lo; p <= hi; p++) out.push(p);
+  if (hi < count - 1) out.push("…");
+  out.push(count);
+  return out;
+}
+
+/** CyberSkill Pagination — page controls with prev/next and ellipsis. */
+export function Pagination({ page = 1, pageCount = 1, onChange, lang, className, ...props }) {
+  const go = (p) => onChange && p >= 1 && p <= pageCount && p !== page && onChange(p);
+  const [ref, L] = useLang(lang);
+  const t = makeT("Pagination", L);
+  return (
+    <nav ref={ref} aria-label={t("label")} className={cx("cs-pagination", className)} {...props}>
+      <button type="button" onClick={() => go(page - 1)} disabled={page <= 1} aria-label={t("prev")}>‹</button>
+      {pages(page, pageCount).map((p, i) =>
+        p === "…"
+          ? <span key={"e" + i} className="cs-pagination__ellipsis" aria-hidden="true">…</span>
+          : <button key={p} type="button" aria-current={p === page ? "page" : undefined} onClick={() => go(p)}>{p}</button>
+      )}
+      <button type="button" onClick={() => go(page + 1)} disabled={page >= pageCount} aria-label={t("next")}>›</button>
+    </nav>
+  );
+}

package/components/navigation/Pagination.prompt.md

@@ -0,0 +1,5 @@
+**Pagination** — prev/next + numbered pages with automatic ellipsis. Controlled via `page`/`pageCount`/`onChange`.
+
+```jsx
+<Pagination page={p} pageCount={12} onChange={setP} />
+```

package/components/navigation/Sidebar.d.ts

@@ -0,0 +1,20 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
+  label?: ReactNode;
+  children?: ReactNode;
+}
+export function Sidebar(props: SidebarProps): React.ReactElement;
+
+/** A sidebar row. Renders <a> when href is set, otherwise <button>. `active`
+ *  applies the ochre-tint current state. */
+export interface NavItemProps extends React.HTMLAttributes<HTMLElement> {
+  icon?: ReactNode;
+  active?: boolean;
+  trail?: ReactNode;
+  href?: string;
+  onClick?: () => void;
+  children?: ReactNode;
+}
+export function NavItem(props: NavItemProps): React.ReactElement;

package/components/navigation/Sidebar.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Sidebar } from './Sidebar.jsx'
+
+/**
+ * Code Connect stub — Sidebar
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(Sidebar, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-71', {
+  example: () => <Sidebar />,
+  imports: ["import { Sidebar } from '@cyberskill/design'"],
+})

package/components/navigation/Sidebar.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Sidebar — vertical app-shell navigation. Compose NavItem children; optional label groups. */
+export function Sidebar({ label, children, className, ...props }) {
+  return (
+    <nav className={cx("cs-sidebar", className)} {...props}>
+      {label ? <div className="cs-sidebar__label">{label}</div> : null}
+      {children}
+    </nav>
+  );
+}
+
+/** A row in a Sidebar. Renders an <a> when href is set, else a <button>. */
+export function NavItem({ icon, active = false, trail, href, onClick, children, className, ...props }) {
+  const Tag = href ? "a" : "button";
+  return (
+    <Tag className={cx("cs-nav-item", active && "is-active", className)} href={href} aria-current={active ? "page" : undefined} onClick={onClick} {...props}>
+      {icon ? <span className="cs-nav-item__icon">{icon}</span> : null}
+      <span>{children}</span>
+      {trail != null ? <span className="cs-nav-item__trail">{trail}</span> : null}
+    </Tag>
+  );
+}

package/components/navigation/Sidebar.prompt.md

@@ -0,0 +1,8 @@
+**Sidebar / NavItem** — vertical app-shell navigation. `NavItem` renders `<a>` (href) or `<button>`; `active` shows the ochre-tint current state.
+
+```jsx
+<Sidebar label="Workspace">
+  <NavItem icon={<Icon name="sparkle" />} active>Overview</NavItem>
+  <NavItem trail={<Badge>3</Badge>}>Projects</NavItem>
+</Sidebar>
+```

package/components/navigation/Steps.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface StepItem { title: ReactNode; body?: ReactNode; n?: ReactNode; }
+
+/** Horizontal progress stepper (the "arc of a wish"). Steps before `current`
+ *  render done (umber check), `current` is active (ochre), the rest are to-do. */
+export interface StepsProps {
+  steps: StepItem[];
+  current?: number;
+  className?: string;
+}
+export function Steps(props: StepsProps): React.ReactElement;

package/components/navigation/Steps.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect'
+import { Steps } from './Steps.jsx'
+
+/**
+ * Code Connect stub — Steps
+ * Prop maps stay minimal until the matching Figma library component is published;
+ * then set nodeId in code-connect/node-map.json and re-run generate-code-connect.
+ */
+figma.connect(Steps, 'https://www.figma.com/design/CS_FIGMA_FILE_KEY/CyberSkill?node-id=9999-79', {
+  example: () => <Steps />,
+  imports: ["import { Steps } from '@cyberskill/design'"],
+})

package/components/navigation/Steps.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { cx } from "../_utils/cx.js";
+
+/** CyberSkill Steps — horizontal progress stepper. Steps before `current` are done, `current` is active. */
+export function Steps({ steps = [], current = 0, className }) {
+  return (
+    <div className={cx("cs-steps", className)}>
+      {steps.map((s, i) => {
+        const state = i < current ? "done" : i === current ? "active" : "todo";
+        return (
+          <div key={i} className={cx("cs-step", `cs-step--${state}`)}>
+            <span className="cs-step__marker">{state === "done" ? "✓" : s.n || i + 1}</span>
+            <span className="cs-step__title">{s.title}</span>
+            {s.body ? <span className="cs-step__body">{s.body}</span> : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/components/navigation/Steps.prompt.md

@@ -0,0 +1,5 @@
+**Steps** — horizontal progress stepper. Steps before `current` are done, `current` is active.
+
+```jsx
+<Steps current={1} steps={[{title:"Make a wish"},{title:"Shape it"},{title:"Build"},{title:"Last"}]} />
+```

package/components/navigation/Tabs.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+import type { ReactNode } from "react";
+
+export interface TabItem { value: string; label: ReactNode; count?: number; }
+
+/**
+ * Underlined tablist (Ochre indicator on the active tab), controlled by
+ * value/onChange. Pair with your own panels (aria-controls) in app code.
+ */
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  tabs: TabItem[];
+  value?: string;
+  onChange?: (value: string) => void;
+}
+export function Tabs(props: TabsProps): React.ReactElement;
+
+export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+  count?: number;
+}
+export function Tab(props: TabProps): React.ReactElement;