@campfire-interactive/side-nav 0.1.2

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface NavItem {
+    /** Stable key. Used for React keying and as default fallback for `path`. */
+    id: string;
+    /** Already-resolved display text. Consumer handles i18n before passing in. */
+    label: string;
+    /** Optional icon (typically a lucide component or SVG). */
+    icon?: ReactNode;
+    /** Route to navigate to. Defaults to `/${id}` if omitted. */
+    path?: string;
+    /** Optional badge (count, "new", etc). */
+    badge?: string | number;
+}
+interface NavGroup {
+    id: string;
+    /** Section header text shown above the items. */
+    label: string;
+    /** Items in this group. */
+    items: NavItem[];
+}
+/** Discriminated by presence of `items` — groups have it, items don't. */
+type NavEntry = NavItem | NavGroup;
+declare function isNavGroup(entry: NavEntry): entry is NavGroup;
+interface SideNavProps {
+    /** Primary nav entries. Mix of items and groups, in render order. */
+    items: NavEntry[];
+    /** Pinned at the bottom of the nav, above the footer slot. */
+    footerItems?: NavEntry[];
+    /** Current route path — used to highlight the active item. */
+    activeRoute?: string;
+    /**
+     * Called when an item is activated. Receives the item and the click event.
+     * Consumer handles routing — component does not import a router.
+     */
+    onNavigate?: (item: NavItem, event: React.MouseEvent) => void;
+    /** Enables the icon-only collapse mode + circular toggle button. */
+    collapsible?: boolean;
+    /** Controlled collapse state. Required when `collapsible` is true. */
+    collapsed?: boolean;
+    /** Called when the user clicks the collapse toggle. */
+    onCollapseToggle?: () => void;
+    /**
+     * Mobile drawer mode. Below the mobile breakpoint the nav is hidden by
+     * default and slides in when `isOpen` is true. Pass both props together.
+     */
+    isOpen?: boolean;
+    onClose?: () => void;
+    /** Custom footer content rendered at the very bottom. */
+    footer?: ReactNode;
+    /** Optional additional className on the root element. */
+    className?: string;
+}
+
+declare function SideNav({ items, footerItems, activeRoute, onNavigate, collapsible, collapsed: collapsedProp, onCollapseToggle, isOpen, onClose, footer, className, }: SideNavProps): react_jsx_runtime.JSX.Element;
+
+export { type NavEntry, type NavGroup, type NavItem, SideNav, type SideNavProps, isNavGroup };

package/dist/index.js

@@ -0,0 +1,169 @@
+// src/SideNav.tsx
+import "@campfire-interactive/design-tokens/tokens.css";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject(".cfi-sn {\n  --cfi-sidenav-width: 240px;\n  --cfi-sidenav-width-collapsed: 64px;\n  --cfi-sidenav-mobile-breakpoint: 1024px;\n  --cfi-sidenav-bg: var(--cfi-app-surface, white);\n  --cfi-sidenav-border: var(--cfi-color-gray-200, #e5e7eb);\n  --cfi-sidenav-fg: var(--cfi-color-gray-700, #374151);\n  --cfi-sidenav-fg-muted: var(--cfi-color-gray-400, #9ca3af);\n  --cfi-sidenav-item-hover-bg: var(--cfi-color-gray-100, #f3f4f6);\n  --cfi-sidenav-item-hover-fg: var(--cfi-color-gray-900, #111827);\n  --cfi-sidenav-item-active-bg: var(--cfi-app-primary, var(--cfi-color-primary-600, #ea580c));\n  --cfi-sidenav-item-active-fg: var(--cfi-app-primary-fg, white);\n  --cfi-sidenav-group-label-fg: var(--cfi-color-gray-500, #6b7280);\n  --cfi-sidenav-toggle-bg: var(--cfi-sidenav-bg);\n  --cfi-sidenav-toggle-border: var(--cfi-color-gray-300, #d1d5db);\n  --cfi-sidenav-toggle-fg: var(--cfi-color-gray-500, #6b7280);\n  --cfi-sidenav-scrollbar-thumb: var(--cfi-color-gray-300, #d1d5db);\n  --cfi-sidenav-scrollbar-track: transparent;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: var(--cfi-sidenav-width);\n  height: 100%;\n  background: var(--cfi-sidenav-bg);\n  color: var(--cfi-sidenav-fg);\n  border-right: 1px solid var(--cfi-sidenav-border);\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  transition: width 200ms ease;\n}\n.cfi-sn--collapsed {\n  width: var(--cfi-sidenav-width-collapsed);\n}\n.cfi-sn-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.cfi-sn-list--primary {\n  flex: 1;\n  padding: var(--cfi-spacing-sm, 0.5rem);\n  overflow-y: auto;\n  overflow-x: hidden;\n  scrollbar-width: thin;\n  scrollbar-color: var(--cfi-sidenav-scrollbar-thumb) var(--cfi-sidenav-scrollbar-track);\n}\n.cfi-sn-list--primary::-webkit-scrollbar {\n  width: 6px;\n}\n.cfi-sn-list--primary::-webkit-scrollbar-track {\n  background: var(--cfi-sidenav-scrollbar-track);\n}\n.cfi-sn-list--primary::-webkit-scrollbar-thumb {\n  background: var(--cfi-sidenav-scrollbar-thumb);\n  border-radius: 3px;\n}\n.cfi-sn-list--footer {\n  padding: var(--cfi-spacing-sm, 0.5rem);\n  border-top: 1px solid var(--cfi-sidenav-border);\n}\n.cfi-sn-item {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: 10px 12px;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-sidenav-fg);\n  font-size: inherit;\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background-color 100ms, color 100ms;\n  white-space: nowrap;\n}\n.cfi-sn-item:hover {\n  background-color: var(--cfi-sidenav-item-hover-bg);\n  color: var(--cfi-sidenav-item-hover-fg);\n}\n.cfi-sn-item--active,\n.cfi-sn-item--active:hover {\n  background-color: var(--cfi-sidenav-item-active-bg);\n  color: var(--cfi-sidenav-item-active-fg);\n}\n.cfi-sn-icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n}\n.cfi-sn-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.cfi-sn-badge {\n  flex-shrink: 0;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  background: var(--cfi-color-error, #ef4444);\n  color: white;\n  font-size: 11px;\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.cfi-sn--collapsed .cfi-sn-item {\n  justify-content: center;\n  padding: 10px;\n}\n.cfi-sn-group {\n  list-style: none;\n  margin-top: var(--cfi-spacing-sm, 0.5rem);\n}\n.cfi-sn-group:first-child {\n  margin-top: 0;\n}\n.cfi-sn-group-label {\n  padding: var(--cfi-spacing-xs, 0.25rem) 12px;\n  color: var(--cfi-sidenav-group-label-fg);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n.cfi-sn-toggle {\n  position: absolute;\n  top: var(--cfi-spacing-md, 1rem);\n  right: -12px;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: var(--cfi-sidenav-toggle-bg);\n  border: 1px solid var(--cfi-sidenav-toggle-border);\n  border-radius: 50%;\n  color: var(--cfi-sidenav-toggle-fg);\n  cursor: pointer;\n  box-shadow: var(--cfi-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));\n  transition: color 100ms;\n}\n.cfi-sn-toggle:hover {\n  color: var(--cfi-sidenav-fg);\n}\n.cfi-sn-footer {\n  padding: var(--cfi-spacing-sm, 0.5rem);\n  border-top: 1px solid var(--cfi-sidenav-border);\n  color: var(--cfi-sidenav-fg-muted);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n}\n.cfi-sn-backdrop {\n  display: none;\n}\n@media (max-width: 1023px) {\n  .cfi-sn--drawer {\n    position: fixed;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    z-index: 90;\n    transform: translateX(0);\n    transition: transform 200ms ease;\n  }\n  .cfi-sn--drawer.cfi-sn--drawer-closed {\n    transform: translateX(-100%);\n  }\n  .cfi-sn-backdrop {\n    display: block;\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 80;\n  }\n}\n");
+
+// src/SideNav.tsx
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+// src/types.ts
+function isNavGroup(entry) {
+  return "items" in entry && Array.isArray(entry.items);
+}
+
+// src/SideNav.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function isActive(activeRoute, item) {
+  if (!activeRoute) return false;
+  const target = item.path ?? `/${item.id}`;
+  if (target === "/") return activeRoute === "/";
+  return activeRoute === target || activeRoute.startsWith(`${target}/`);
+}
+function NavItemRow({ item, active, collapsed, onNavigate, onClose }) {
+  const href = item.path ?? `/${item.id}`;
+  const handleClick = (e) => {
+    onNavigate?.(item, e);
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      className: active ? "cfi-sn-item cfi-sn-item--active" : "cfi-sn-item",
+      onClick: handleClick,
+      title: collapsed ? item.label : void 0,
+      "aria-current": active ? "page" : void 0,
+      children: [
+        item.icon && /* @__PURE__ */ jsx("span", { className: "cfi-sn-icon", children: item.icon }),
+        !collapsed && /* @__PURE__ */ jsx("span", { className: "cfi-sn-label", children: item.label }),
+        !collapsed && item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "cfi-sn-badge", children: item.badge })
+      ]
+    }
+  ) });
+}
+function NavEntries({ entries, activeRoute, collapsed, onNavigate, onClose }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: entries.map((entry) => {
+    if (isNavGroup(entry)) {
+      const group = entry;
+      return /* @__PURE__ */ jsxs("li", { className: "cfi-sn-group", children: [
+        !collapsed && /* @__PURE__ */ jsx("div", { className: "cfi-sn-group-label", children: group.label }),
+        /* @__PURE__ */ jsx("ul", { className: "cfi-sn-list", children: group.items.map((item) => /* @__PURE__ */ jsx(
+          NavItemRow,
+          {
+            item,
+            active: isActive(activeRoute, item),
+            collapsed,
+            onNavigate,
+            onClose
+          },
+          item.id
+        )) })
+      ] }, group.id);
+    }
+    return /* @__PURE__ */ jsx(
+      NavItemRow,
+      {
+        item: entry,
+        active: isActive(activeRoute, entry),
+        collapsed,
+        onNavigate,
+        onClose
+      },
+      entry.id
+    );
+  }) });
+}
+function SideNav({
+  items,
+  footerItems,
+  activeRoute,
+  onNavigate,
+  collapsible,
+  collapsed: collapsedProp,
+  onCollapseToggle,
+  isOpen,
+  onClose,
+  footer,
+  className
+}) {
+  const collapsed = !!(collapsible && collapsedProp);
+  const drawerMode = isOpen !== void 0;
+  const rootClass = [
+    "cfi-sn",
+    collapsed ? "cfi-sn--collapsed" : "",
+    drawerMode && !isOpen ? "cfi-sn--drawer-closed" : "",
+    drawerMode ? "cfi-sn--drawer" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    drawerMode && isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "cfi-sn-backdrop",
+        onClick: onClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs("nav", { className: rootClass, "aria-label": "Primary", children: [
+      collapsible && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "cfi-sn-toggle",
+          onClick: onCollapseToggle,
+          "aria-label": collapsed ? "Expand navigation" : "Collapse navigation",
+          "aria-pressed": collapsed,
+          children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: 12 }) : /* @__PURE__ */ jsx(ChevronLeft, { size: 12 })
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { className: "cfi-sn-list cfi-sn-list--primary", children: /* @__PURE__ */ jsx(
+        NavEntries,
+        {
+          entries: items,
+          activeRoute,
+          collapsed,
+          onNavigate,
+          onClose
+        }
+      ) }),
+      footerItems && footerItems.length > 0 && /* @__PURE__ */ jsx("ul", { className: "cfi-sn-list cfi-sn-list--footer", children: /* @__PURE__ */ jsx(
+        NavEntries,
+        {
+          entries: footerItems,
+          activeRoute,
+          collapsed,
+          onNavigate,
+          onClose
+        }
+      ) }),
+      footer && /* @__PURE__ */ jsx("div", { className: "cfi-sn-footer", children: footer })
+    ] })
+  ] });
+}
+export {
+  SideNav,
+  isNavGroup
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@campfire-interactive/side-nav",
+  "version": "0.1.2",
+  "description": "Shared side-navigation component for Campfire Suite apps",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@campfire-interactive/design-tokens": "*",
+    "lucide-react": "^0.460.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}