@bsuite/nav-core 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { IconComponent, NavItem, NavItemGroup, NavSection, NavConfig, } from './types';
+export { isActivePath, isSectionActive } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,aAAa,EACb,OAAO,EACP,YAAY,EACZ,UAAU,EACV,SAAS,GACV,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { isActivePath, isSectionActive } from './utils';

package/dist/types.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Icon component type — compatible with Lucide, HeroIcons, and any
+ * React component that renders an SVG.
+ *
+ * Uses a **structural type** instead of importing from `react` to
+ * prevent type conflicts when consumed by projects using different
+ * React versions (18 vs 19) in a pnpm workspace. The `@types/react`
+ * ReactNode definition changed between versions, making any transitive
+ * React type reference fail across version boundaries.
+ *
+ * The structural signature `(props) => unknown` is wide enough that
+ * Lucide, HeroIcons, and plain `(props) => JSX.Element` all satisfy
+ * it, while still enforcing the expected prop shape.
+ */
+export type IconComponent = (props: {
+    className?: string;
+    size?: number | string;
+}) => unknown;
+/** A single navigation item (leaf node). */
+export interface NavItem {
+    /** Display label */
+    label: string;
+    /** URL path (or view identifier for state-based routing) */
+    href: string;
+    /** Optional icon component */
+    icon?: IconComponent;
+    /** Optional badge text or count shown beside the label */
+    badge?: string | number;
+    /** If true, opens in a new tab (for cross-app links) */
+    external?: boolean;
+}
+/**
+ * A group of nav items. Groups within a section are visually
+ * separated by dividers.
+ */
+export type NavItemGroup = NavItem[];
+/** A collapsible navigation section containing grouped items. */
+export interface NavSection {
+    /** Section heading label */
+    label: string;
+    /** Section icon (shown in collapsed mode) */
+    icon: IconComponent;
+    /** Direct link when section itself is clickable */
+    href?: string;
+    /** Grouped sub-items — each group separated by a divider */
+    groups?: NavItemGroup[];
+    /** Whether this section starts expanded (default: false) */
+    defaultOpen?: boolean;
+}
+/** Top-level navigation configuration for a BSuite application. */
+export interface NavConfig {
+    /** Application identity */
+    app: {
+        /** Full application name */
+        name: string;
+        /** Short name / abbreviation */
+        shortName: string;
+        /** Path to logo image */
+        logoSrc?: string;
+        /** Link target when clicking the logo */
+        homeHref: string;
+    };
+    /** Main navigation sections */
+    sections: NavSection[];
+    /** Fixed footer items (settings, profile, etc.) */
+    footer?: NavItem[];
+    /** Cross-app links shown at the bottom of the sidebar */
+    suiteLinks?: NavItem[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KAAK,OAAO,CAAC;AAE/F,4CAA4C;AAC5C,MAAM,WAAW,OAAO;IACtB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,EAAE,CAAC;AAErC,iEAAiE;AACjE,MAAM,WAAW,UAAU;IACzB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,EAAE,aAAa,CAAC;IACpB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,mEAAmE;AACnE,MAAM,WAAW,SAAS;IACxB,2BAA2B;IAC3B,GAAG,EAAE;QACH,4BAA4B;QAC5B,IAAI,EAAE,MAAM,CAAC;QACb,gCAAgC;QAChC,SAAS,EAAE,MAAM,CAAC;QAClB,yBAAyB;QACzB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,yCAAyC;QACzC,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,+BAA+B;IAC/B,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,EAAE,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,EAAE,CAAC;CACxB"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,22 @@
+import type { NavSection } from './types';
+/**
+ * Check whether `currentPath` matches `itemHref`.
+ *
+ * Returns true for an exact match **or** a prefix match where the
+ * next character is `/` (so `/apprentices` matches
+ * `/apprentices/create` but not `/apprentices-old`).
+ *
+ * Guards:
+ * - Empty `itemHref` always returns false.
+ * - Root path (`/`) only matches exactly — it does not prefix-match
+ *   every route.
+ * - Trailing slashes are normalised before comparison.
+ */
+export declare function isActivePath(currentPath: string, itemHref: string): boolean;
+/**
+ * Check whether any item inside a section is currently active.
+ * Useful for auto-expanding a section when one of its children is
+ * the current page.
+ */
+export declare function isSectionActive(currentPath: string, section: Pick<NavSection, 'href' | 'groups'>): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAO1C;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAC1B,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAOT;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAC7B,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,QAAQ,CAAC,GAC3C,OAAO,CAUT"}

package/dist/utils.js

@@ -0,0 +1,42 @@
+/** Strip a single trailing slash (unless the path is just `/`). */
+function normalize(p) {
+    return p.length > 1 && p.endsWith('/') ? p.slice(0, -1) : p;
+}
+/**
+ * Check whether `currentPath` matches `itemHref`.
+ *
+ * Returns true for an exact match **or** a prefix match where the
+ * next character is `/` (so `/apprentices` matches
+ * `/apprentices/create` but not `/apprentices-old`).
+ *
+ * Guards:
+ * - Empty `itemHref` always returns false.
+ * - Root path (`/`) only matches exactly — it does not prefix-match
+ *   every route.
+ * - Trailing slashes are normalised before comparison.
+ */
+export function isActivePath(currentPath, itemHref) {
+    if (!itemHref)
+        return false;
+    const cp = normalize(currentPath);
+    const ih = normalize(itemHref);
+    if (ih === '/')
+        return cp === '/';
+    if (cp === ih)
+        return true;
+    return cp.startsWith(ih + '/');
+}
+/**
+ * Check whether any item inside a section is currently active.
+ * Useful for auto-expanding a section when one of its children is
+ * the current page.
+ */
+export function isSectionActive(currentPath, section) {
+    if (section.href && isActivePath(currentPath, section.href)) {
+        return true;
+    }
+    if (section.groups) {
+        return section.groups.some((group) => group.some((item) => isActivePath(currentPath, item.href)));
+    }
+    return false;
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@bsuite/nav-core",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GaryOcean428/bsuite.git",
+    "directory": "packages/nav-core"
+  },
+  "files": [
+    "dist",
+    "src/tokens"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": { "import": "./dist/index.js", "types": "./dist/index.d.ts" },
+    "./types": { "import": "./dist/types.js", "types": "./dist/types.d.ts" },
+    "./tokens/d2c-sidebar.css": "./src/tokens/d2c-sidebar.css",
+    "./tokens/corporate-sidebar.css": "./src/tokens/corporate-sidebar.css"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.3",
+    "vitest": "^3.2.4"
+  }
+}

package/src/tokens/corporate-sidebar.css

@@ -0,0 +1,28 @@
+/*
+ * Corporate Branding — Sidebar Design Tokens
+ * ───────────────────────────────────────────
+ * Uses shadcn/ui's --sidebar-* CSS variable contract.
+ * Import this file in the braden.com.au project.
+ *
+ * Braden corporate palette:
+ *   Red    #ab233a   (primary)
+ *   Gold   #cbb26a   (accent)
+ *   Navy   #2c3e50   (text/headings)
+ *
+ * Values are HSL channel triplets (H S% L%) consumed by
+ * Tailwind's hsl() utility wrappers.
+ */
+
+:root {
+  --sidebar-background: 350 66% 38%;       /* #811a2c  dark braden red    */
+  --sidebar-foreground: 0 0% 95%;          /* #f2f2f2  near-white text    */
+  --sidebar-primary: 44 49% 60%;           /* #cbb26a  braden gold        */
+  --sidebar-primary-foreground: 350 66% 15%;/* #3d0d14 deep red text      */
+  --sidebar-accent: 350 66% 32%;           /* #6e1624  deeper red tint    */
+  --sidebar-accent-foreground: 44 49% 75%; /* #ddd0a0  light gold         */
+  --sidebar-border: 350 40% 28%;           /* #5c1520  subtle red border  */
+  --sidebar-ring: 44 49% 60%;              /* #cbb26a  gold ring          */
+  --sidebar-muted-foreground: 0 0% 75%;    /* #bfbfbf  muted text         */
+}
+
+/* No .dark variant: corporate sidebar is always red-branded */

package/src/tokens/d2c-sidebar.css

@@ -0,0 +1,37 @@
+/*
+ * D2C Neon Electric — Sidebar Design Tokens
+ * ──────────────────────────────────────────
+ * Uses shadcn/ui's --sidebar-* CSS variable contract.
+ * Import this file in any D2C-themed BSuite app:
+ *   CRM7 · Conduit · R80.3 · business-suite-unified
+ *
+ * Values are HSL channel triplets (H S% L%) consumed by
+ * Tailwind's hsl() utility wrappers.
+ */
+
+/* ── Light mode (default) ─────────────────────────────── */
+:root,
+.light {
+  --sidebar-background: 220 20% 98%;       /* #fafbfd  off-white          */
+  --sidebar-foreground: 215 25% 27%;       /* #334155  slate-700          */
+  --sidebar-primary: 217 91% 60%;          /* #2563eb  electric blue      */
+  --sidebar-primary-foreground: 0 0% 100%; /* #ffffff  white              */
+  --sidebar-accent: 217 91% 95%;           /* #eff6ff  blue-50 tint       */
+  --sidebar-accent-foreground: 217 91% 40%;/* #1e40af  blue-800           */
+  --sidebar-border: 214 20% 92%;           /* #e5e9f0  cool gray border   */
+  --sidebar-ring: 217 91% 60%;             /* #2563eb  electric blue ring */
+  --sidebar-muted-foreground: 215 15% 55%; /* #7c8aa0  muted text         */
+}
+
+/* ── Dark mode ────────────────────────────────────────── */
+.dark {
+  --sidebar-background: 222 47% 7%;        /* #0a0e1a  deep navy          */
+  --sidebar-foreground: 213 20% 75%;       /* #b0bec5  light slate        */
+  --sidebar-primary: 178 100% 40%;         /* #00cec9  electric cyan      */
+  --sidebar-primary-foreground: 222 47% 7%;/* #0a0e1a  deep navy          */
+  --sidebar-accent: 174 100% 8%;           /* #001f1e  cyan tint on dark  */
+  --sidebar-accent-foreground: 174 100% 60%;/* #33e8e4 bright cyan        */
+  --sidebar-border: 220 30% 14%;           /* #1a2332  subtle border      */
+  --sidebar-ring: 178 100% 40%;            /* #00cec9  cyan ring          */
+  --sidebar-muted-foreground: 215 15% 45%; /* #64748b  muted text         */
+}