@capillarytech/blaze-ui 6.1.4 → 6.1.6-beta.1

package/CapNavigationSPA/CapNavigationSPASidebar/styles.module.scss.js

@@ -0,0 +1,56 @@
+import './styles.css';const styles = {
+  "cap-navigation-spa-sidebar__wrapper": "cap-navigation-spa-sidebar__wrapper",
+  "cap-navigation-spa-sidebar": "cap-navigation-spa-sidebar",
+  "cap-navigation-spa-sidebar--collapsed": "cap-navigation-spa-sidebar--collapsed",
+  "cap-navigation-spa-sidebar__logo": "cap-navigation-spa-sidebar__logo",
+  "cap-navigation-spa-sidebar__logo-icon": "cap-navigation-spa-sidebar__logo-icon",
+  "cap-navigation-spa-sidebar__logo-text": "cap-navigation-spa-sidebar__logo-text",
+  "cap-navigation-spa-sidebar__nav": "cap-navigation-spa-sidebar__nav",
+  "cap-navigation-spa-sidebar__item": "cap-navigation-spa-sidebar__item",
+  "cap-navigation-spa-sidebar__item-icon": "cap-navigation-spa-sidebar__item-icon",
+  "cap-navigation-spa-sidebar__item-dot": "cap-navigation-spa-sidebar__item-dot",
+  "cap-navigation-spa-sidebar__item-label": "cap-navigation-spa-sidebar__item-label",
+  "cap-navigation-spa-sidebar__item--expanded": "cap-navigation-spa-sidebar__item--expanded",
+  "cap-navigation-spa-sidebar__item--expanded-loyalty": "cap-navigation-spa-sidebar__item--expanded-loyalty",
+  "cap-navigation-spa-sidebar__item--expanded-engage": "cap-navigation-spa-sidebar__item--expanded-engage",
+  "cap-navigation-spa-sidebar__item--expanded-insights": "cap-navigation-spa-sidebar__item--expanded-insights",
+  "cap-navigation-spa-sidebar__item--expanded-members": "cap-navigation-spa-sidebar__item--expanded-members",
+  "cap-navigation-spa-sidebar__item--expanded-rewards": "cap-navigation-spa-sidebar__item--expanded-rewards",
+  "cap-navigation-spa-sidebar__item--expanded-audiences": "cap-navigation-spa-sidebar__item--expanded-audiences",
+  "cap-navigation-spa-sidebar__item--expanded-data-management": "cap-navigation-spa-sidebar__item--expanded-data-management",
+  "cap-navigation-spa-sidebar__item--expanded-extensions": "cap-navigation-spa-sidebar__item--expanded-extensions",
+  "cap-navigation-spa-sidebar__item--expanded-settings": "cap-navigation-spa-sidebar__item--expanded-settings",
+  "cap-navigation-spa-sidebar__item-chevron": "cap-navigation-spa-sidebar__item-chevron",
+  "cap-navigation-spa-sidebar__l2-wrapper": "cap-navigation-spa-sidebar__l2-wrapper",
+  "cap-navigation-spa-sidebar__l2-divider": "cap-navigation-spa-sidebar__l2-divider",
+  "cap-navigation-spa-sidebar__l2-inline": "cap-navigation-spa-sidebar__l2-inline",
+  "cap-navigation-spa-sidebar__l2-inline-item": "cap-navigation-spa-sidebar__l2-inline-item",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected": "cap-navigation-spa-sidebar__l2-inline-item--selected",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty": "cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-engage": "cap-navigation-spa-sidebar__l2-inline-item--selected-engage",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-insights": "cap-navigation-spa-sidebar__l2-inline-item--selected-insights",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-members": "cap-navigation-spa-sidebar__l2-inline-item--selected-members",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-rewards": "cap-navigation-spa-sidebar__l2-inline-item--selected-rewards",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-audiences": "cap-navigation-spa-sidebar__l2-inline-item--selected-audiences",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-data-management": "cap-navigation-spa-sidebar__l2-inline-item--selected-data-management",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-extensions": "cap-navigation-spa-sidebar__l2-inline-item--selected-extensions",
+  "cap-navigation-spa-sidebar__l2-inline-item--selected-settings": "cap-navigation-spa-sidebar__l2-inline-item--selected-settings",
+  "cap-navigation-spa-sidebar__divider": "cap-navigation-spa-sidebar__divider",
+  "cap-navigation-spa-sidebar__footer": "cap-navigation-spa-sidebar__footer",
+  "cap-navigation-spa-sidebar__collapse-btn": "cap-navigation-spa-sidebar__collapse-btn",
+  "cap-navigation-spa-sidebar__collapse-btn-icon": "cap-navigation-spa-sidebar__collapse-btn-icon",
+  "cap-navigation-spa-sidebar__collapse-wrap": "cap-navigation-spa-sidebar__collapse-wrap",
+  "cap-navigation-spa-sidebar__item-flyout-wrap": "cap-navigation-spa-sidebar__item-flyout-wrap",
+  "cap-navigation-spa-sidebar__l2-flyout": "cap-navigation-spa-sidebar__l2-flyout",
+  "cap-navigation-spa-sidebar__l2-flyout-arrow": "cap-navigation-spa-sidebar__l2-flyout-arrow",
+  "cap-navigation-spa-sidebar__l2-flyout-card": "cap-navigation-spa-sidebar__l2-flyout-card",
+  "cap-navigation-spa-sidebar__l2-flyout-parent": "cap-navigation-spa-sidebar__l2-flyout-parent",
+  "cap-navigation-spa-sidebar__l2-flyout-item": "cap-navigation-spa-sidebar__l2-flyout-item",
+  "cap-navigation-spa-sidebar__l2-flyout-item--selected": "cap-navigation-spa-sidebar__l2-flyout-item--selected",
+  "cap-navigation-spa-sidebar__l1-tooltip-flyout": "cap-navigation-spa-sidebar__l1-tooltip-flyout",
+  "cap-navigation-spa-sidebar__l1-tooltip-card": "cap-navigation-spa-sidebar__l1-tooltip-card",
+  "cap-navigation-spa-sidebar__l1-tooltip-label": "cap-navigation-spa-sidebar__l1-tooltip-label"
+};
+export {
+  styles as default
+};

package/CapNavigationSPA/CapNavigationSPASidebar/styles.scss

@@ -0,0 +1,385 @@
+@import '../../styles/_variables.scss';
+
+// BEM: Block = cap-navigation-spa-sidebar | Elements = __wrapper, __logo, __nav, __item, ... | Modifiers = --collapsed, __item--expanded, ...
+// Wrapper for sidebar + L2 flyout (position relative for flyout)
+.cap-navigation-spa-sidebar__wrapper {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+}
+
+// Figma 646-56222: Navigation 240px, bg #FAFBFC (Neutral/1), border-right #dfe2e7, items 40px height, 20px pl, 14px text #091e42
+.cap-navigation-spa-sidebar {
+  width: 17.143rem; // 240px
+  min-width: 17.143rem;
+  height: 100%;
+  background-color: $CAP_G10; // #FAFBFC – same as L2 dropdown (Figma 646-56222)
+  border-right: 1px solid $CAP_G07; // #dfe2e7
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  transition:
+    width 0.2s ease,
+    min-width 0.2s ease;
+}
+
+// Collapsed state: 80px width, icons only (per Figma collapsed sidebar design)
+.cap-navigation-spa-sidebar--collapsed {
+  width: 5.714rem; // 80px
+  min-width: 5.714rem;
+  background-color: $CAP_G10; // #fafbfc
+}
+
+// Figma 583:6904 – logo left-aligned with module icons (same 20px left as nav items)
+.cap-navigation-spa-sidebar__logo {
+  height: 5rem; // 80px – increased for clearer branding area
+  padding: 1rem 0.857rem 1rem 1.429rem; // 16px 12px 16px 20px – left 20px to align with nav
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__logo {
+  padding: 1rem 0.571rem; // center logo when collapsed
+  justify-content: center;
+}
+
+.cap-navigation-spa-sidebar__logo-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cap-navigation-spa-sidebar__logo-text {
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_L;
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: $CAP_G01; // #091e42
+}
+
+.cap-navigation-spa-sidebar__nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0;
+}
+
+// Figma: all nav items same style – text #091e42, icon 16px, pl 20px, height 40px, gap 16px
+.cap-navigation-spa-sidebar__item {
+  display: flex;
+  align-items: center;
+  height: 2.857rem; // 40px
+  padding: 0 1.429rem 0 1.429rem; // 20px
+  gap: 1rem; // 16px – Figma left 36px for text after 20px pl + 16px icon
+  width: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M; // 14px
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $CAP_G01; // #091e42 – same for all items (no blue active in Figma)
+  text-align: left;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: $CAP_G08; // #ebecf0
+  }
+}
+
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__item {
+  padding: 0 0.571rem; // center icon when collapsed
+  justify-content: center;
+}
+
+.cap-navigation-spa-sidebar__item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem; // 16px – Figma icon size
+  height: 1rem;
+  flex-shrink: 0;
+  color: $CAP_G01; // #091e42 – same as label per Figma
+}
+
+.cap-navigation-spa-sidebar__item-dot {
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+
+.cap-navigation-spa-sidebar__item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+// Figma: parent with children when flyout is open – bg #EBECF0 (Loyalty); Engage uses #E9F0FE
+.cap-navigation-spa-sidebar__item--expanded {
+  background-color: $CAP_G08; // #ebecf0
+}
+
+.cap-navigation-spa-sidebar__item--expanded-loyalty,
+.cap-navigation-spa-sidebar__item--expanded-engage,
+.cap-navigation-spa-sidebar__item--expanded-insights,
+.cap-navigation-spa-sidebar__item--expanded-members,
+.cap-navigation-spa-sidebar__item--expanded-rewards,
+.cap-navigation-spa-sidebar__item--expanded-audiences,
+.cap-navigation-spa-sidebar__item--expanded-data-management,
+.cap-navigation-spa-sidebar__item--expanded-extensions,
+.cap-navigation-spa-sidebar__item--expanded-settings {
+  background-color: $CAP_PALE_GREY; // #E9F0FE – Figma Loyalty/Engage/Insights/Member profiles/Rewards/Audience/Data management/Extensions/Settings expanded
+}
+
+.cap-navigation-spa-sidebar__item-chevron {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: $CAP_G01;
+}
+
+// L2 wrapper: holds horizontal divider + L2 block (image: thin line beneath header)
+.cap-navigation-spa-sidebar__l2-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+// Horizontal separator between parent row and L2 items – image: 1px light grey spanning content width
+.cap-navigation-spa-sidebar__l2-divider {
+  height: 1px;
+  background-color: $CAP_G07; // #DFE2E7
+  width: 100%;
+  flex-shrink: 0;
+}
+
+// L2 inline – same background as sidebar (Figma 646-56222)
+.cap-navigation-spa-sidebar__l2-inline {
+  display: flex;
+  flex-direction: column;
+  margin-left: 2.286rem; // 32px – indent so bar aligns
+  padding: 0;
+  border-left: 2px solid $CAP_G07; // ~2px vertical bar per image (slightly darker light grey)
+  background-color: $CAP_G10; // #FAFBFC – same as sidebar
+}
+
+// Parent text starts at 20+16+16 = 52px; L2 content starts at 32+2 = 34px → padding-left 18px for alignment; bg same as sidebar (Figma 646-56222)
+.cap-navigation-spa-sidebar__l2-inline-item {
+  display: flex;
+  align-items: center;
+  height: 2.857rem; // 40px
+  padding: 0 1.714rem 0 1.286rem; // 4px 24px right, 18px left – align "P" with "L" of Loyalty
+  width: 100%;
+  border: none;
+  background-color: $CAP_G10; // #FAFBFC – same as sidebar
+  cursor: pointer;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $CAP_G01; // #091E42
+  text-align: left;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: $CAP_G08; // #EBECF0
+  }
+}
+
+.cap-navigation-spa-sidebar__l2-inline-item--selected {
+  background-color: #e9f0fe; // Figma – selected L2 item (Loyalty)
+}
+
+// Loyalty / Engage / Insights / Member profiles / Rewards / Audience / Data management / Extensions / Settings L2 selected – Figma: bg #EBECF0, blue left edge #2466EA
+// Pull selected item 2px left so blue bar overlays container grey bar (only blue shows for selected row)
+.cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-engage,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-insights,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-members,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-rewards,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-audiences,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-data-management,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-extensions,
+.cap-navigation-spa-sidebar__l2-inline-item--selected-settings {
+  margin-left: -2px; // overlay container’s 2px grey border so blue draws on top
+  background-color: $CAP_G08; // #EBECF0
+  box-shadow: inset 2px 0 0 map-get($CAP_SECONDARY, base); // #2466EA – blue vertical bar
+}
+
+// Figma 672-86680: 16px gap above and below horizontal dividers (same as section gap)
+.cap-navigation-spa-sidebar__divider {
+  height: 1px;
+  background-color: $CAP_G07; // #dfe2e7
+  margin: 1rem 0.857rem; // 16px top/bottom, 12px left/right
+  flex-shrink: 0;
+}
+
+.cap-navigation-spa-sidebar__footer {
+  padding: 0.571rem 0 1rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem; // 16px between settings row and collapse button (same in both states)
+}
+
+// Figma collapsed: same 16px gap, tighter horizontal padding
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__footer {
+  padding: 0.571rem 0.571rem 1rem;
+}
+
+// Collapse/expand toggle – background matches navigation bar (no white block); icon #091E42 (Figma 640-46050)
+.cap-navigation-spa-sidebar__collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5.714rem; // 80px – same as collapsed sidebar width
+  height: 2.857rem; // 40px
+  padding: 0;
+  margin-top: 0;
+  border: none;
+  background-color: transparent; // same as navigation bar (Figma – no separate white block)
+  cursor: pointer;
+  color: $CAP_G01; // #091e42
+  border-radius: 0;
+  transition: background-color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: $CAP_G08; // #EBECF0 – subtle hover
+  }
+}
+
+// Figma 640-46050: expand/collapse icon exactly 16×16px (override CapIcon size)
+.cap-navigation-spa-sidebar__collapse-btn-icon {
+  font-size: 16px;
+}
+
+// Wrapper for collapse button – expanded: right-aligned; collapsed: centered (Figma 638-43461)
+.cap-navigation-spa-sidebar__collapse-wrap {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__collapse-wrap {
+  justify-content: center;
+}
+
+// Collapsed L2 flyout – wrapper so flyout is positioned to the right of the hovered item (Figma 640-45225)
+.cap-navigation-spa-sidebar__item-flyout-wrap {
+  position: relative;
+}
+
+// Flyout container – absolute to the right of the sidebar icon; vertically centered so arrow points at parent (Figma 640-47376)
+.cap-navigation-spa-sidebar__l2-flyout {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center; // arrow aligns to center of flyout = center of parent row
+  padding-left: 4px; // small gap so arrow sits between icon and card
+  z-index: 10;
+  pointer-events: auto;
+}
+
+// Left-pointing arrow (white triangle) connecting flyout to sidebar (Figma: 7.07×7.071 rotated 135° = diamond)
+.cap-navigation-spa-sidebar__l2-flyout-arrow {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-right: 5px solid $CAP_WHITE;
+  align-self: center;
+  margin-left: -3px; // overlap card border so arrow touches card
+  filter: drop-shadow(0 0 1px rgba(9, 30, 66, 0.15));
+}
+
+// Card: white bg, rounded corners, border, shadow (Figma 640-45225)
+.cap-navigation-spa-sidebar__l2-flyout-card {
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G07; // #DFE2E7
+  border-radius: 6px;
+  box-shadow:
+    0 4px 4px rgba(9, 30, 66, 0.15),
+    0 0 1px rgba(9, 30, 66, 0.15);
+  min-width: 200px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+// Parent title row (e.g. "Loyalty") – header style, border below
+.cap-navigation-spa-sidebar__l2-flyout-parent {
+  padding: 8px 16px 10px;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: $CAP_G01; // #091E42
+  border-bottom: 1px solid $CAP_G07; // #DFE2E7
+  flex-shrink: 0;
+}
+
+// L2 flyout item row – default #FAFBFC, selected #E9F0FE (Figma 640-45225)
+.cap-navigation-spa-sidebar__l2-flyout-item {
+  display: flex;
+  align-items: center;
+  height: 2.857rem; // 40px
+  padding: 0 1rem; // 16px
+  width: 100%;
+  border: none;
+  background-color: #fafbfc; // Figma default row – variable absent
+  cursor: pointer;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $CAP_G01; // #091E42
+  text-align: left;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: $CAP_G08; // #EBECF0
+  }
+}
+
+.cap-navigation-spa-sidebar__l2-flyout-item--selected {
+  background-color: $CAP_PALE_GREY; // #E9F0FE – Figma selected L2 row
+}
+
+// L1 tooltip flyout – collapsed state, modules without L2: show module name on hover (Figma 642-48287)
+.cap-navigation-spa-sidebar__l1-tooltip-flyout {
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  padding-left: 4px;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.cap-navigation-spa-sidebar__l1-tooltip-card {
+  background-color: $CAP_WHITE;
+  border: 1px solid $CAP_G07; // #DFE2E7
+  border-radius: 6px;
+  box-shadow:
+    0 4px 4px rgba(9, 30, 66, 0.15),
+    0 0 1px rgba(9, 30, 66, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cap-navigation-spa-sidebar__l1-tooltip-label {
+  padding: 8px 16px 10px;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $CAP_G01; // #091E42 – Figma 642-48287
+  white-space: nowrap;
+}

package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts

@@ -0,0 +1,31 @@
+import type React from 'react';
+export interface CapNavigationSPASidebarItem {
+    key: string;
+    title: string;
+    link?: string;
+    target?: string;
+    iconType?: string;
+    /** Child items shown in L2 flyout (e.g. Programs, Promotions under Loyalty) */
+    children?: CapNavigationSPASidebarItem[];
+}
+export interface CapNavigationSPASidebarProps {
+    /** Sidebar nav items (icon + label) */
+    items: CapNavigationSPASidebarItem[];
+    /** Key of the currently selected item */
+    selectedKey?: string;
+    /** Callback when a nav item is clicked */
+    onItemClick?: (item: CapNavigationSPASidebarItem) => void;
+    /** Settings label; rendered at bottom */
+    settingsLabel?: string;
+    /** Optional logo node (e.g. Capillary logo) */
+    logo?: React.ReactNode;
+    /** Optional className */
+    className?: string;
+    /** When true, sidebar is collapsed (icons only, 80px width) */
+    collapsed?: boolean;
+    /** Callback when user clicks collapse/expand toggle at bottom */
+    onCollapseExpand?: () => void;
+    /** When false, do not set window.location on item click (e.g. for Storybook). Default true */
+    navigateToLink?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapNavigationSPA/CapNavigationSPASidebar/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../components/CapNavigationSPA/CapNavigationSPASidebar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,2BAA2B;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,2BAA2B,EAAE,CAAC;CAC1C;AAED,MAAM,WAAW,4BAA4B;IAC3C,uCAAuC;IACvC,KAAK,EAAE,2BAA2B,EAAE,CAAC;IACrC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,2BAA2B,KAAK,IAAI,CAAC;IAC1D,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8FAA8F;IAC9F,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B"}

package/CapNavigationSPA/CapNavigationSPASidebar/types.js

@@ -0,0 +1 @@
+

package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * CapNavigationSPATopBar – Top bar matching New navigation Figma design.
+ * Search "Search in org" + ⌘+K, org name + green Production pill, help, bell, user.
+ */
+import React from 'react';
+import type { CapNavigationSPATopBarProps } from './types';
+declare const CapNavigationSPATopBar: React.FC<CapNavigationSPATopBarProps>;
+export default CapNavigationSPATopBar;
+export type { CapNavigationSPATopBarProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/CapNavigationSPA/CapNavigationSPATopBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/CapNavigationSPA/CapNavigationSPATopBar/index.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAyGjE,CAAC;AAEF,eAAe,sBAAsB,CAAC;AACtC,YAAY,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC"}

package/CapNavigationSPA/CapNavigationSPATopBar/index.js

@@ -0,0 +1,119 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useState } from "react";
+import CapIcon from "../../CapIcon/index.js";
+import styles from "./styles.module.scss.js";
+const CapNavigationSPATopBar = ({
+  searchPlaceholder = "Search in org",
+  searchShortcut = "⌘+K",
+  orgName,
+  environmentLabel = "Production",
+  onSearch,
+  onOrgEnvClick,
+  onHelpClick,
+  onNotificationClick,
+  showNotificationBadge = false,
+  onUserClick,
+  userDisplay,
+  className
+}) => {
+  const [searchValue, setSearchValue] = useState("");
+  const handleSearchSubmit = () => {
+    onSearch == null ? void 0 : onSearch(searchValue);
+  };
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: classNames(styles["cap-navigation-spa-topbar"], className),
+      "data-testid": "cap-navigation-spa-topbar",
+      children: /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-topbar__inner"], children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles["cap-navigation-spa-topbar__search"],
+            role: "button",
+            tabIndex: 0,
+            onClick: () => {
+              var _a;
+              return (_a = document.getElementById("cap-navigation-spa-search-input")) == null ? void 0 : _a.focus();
+            },
+            onKeyDown: (e) => e.key === "Enter" && e.target.click(),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__search-icon"], children: /* @__PURE__ */ jsx(CapIcon, { type: "search", size: "s" }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  id: "cap-navigation-spa-search-input",
+                  type: "text",
+                  className: styles["cap-navigation-spa-topbar__search-input"],
+                  placeholder: searchPlaceholder,
+                  value: searchValue,
+                  onChange: (e) => setSearchValue(e.target.value),
+                  onKeyDown: (e) => e.key === "Enter" && handleSearchSubmit(),
+                  "aria-label": searchPlaceholder
+                }
+              ),
+              /* @__PURE__ */ jsx("kbd", { className: styles["cap-navigation-spa-topbar__search-kbd"], children: searchShortcut })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-topbar__right"], children: [
+          /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-topbar__divider"] }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: styles["cap-navigation-spa-topbar__org-button"],
+              onClick: onOrgEnvClick,
+              "aria-label": "Organization and environment",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__org-name"], children: orgName ?? "Organization" }),
+                /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__env-pill"], children: environmentLabel }),
+                /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__org-chevron"], children: /* @__PURE__ */ jsx(CapIcon, { type: "down", size: "s" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles["cap-navigation-spa-topbar__icon-btn"],
+              onClick: onHelpClick,
+              "aria-label": "Help",
+              children: /* @__PURE__ */ jsx(CapIcon, { type: "question-circle", size: "s" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: classNames(
+                styles["cap-navigation-spa-topbar__icon-btn"],
+                styles["cap-navigation-spa-topbar__icon-btn--has-badge"]
+              ),
+              onClick: onNotificationClick,
+              "aria-label": "Notifications",
+              children: [
+                /* @__PURE__ */ jsx(CapIcon, { type: "bell", size: "s" }),
+                showNotificationBadge && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-topbar__notification-badge"] })
+              ]
+            }
+          ),
+          userDisplay !== void 0 ? /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-topbar__icon-btn"], children: userDisplay }) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles["cap-navigation-spa-topbar__icon-btn"],
+              onClick: onUserClick,
+              "aria-label": "User menu",
+              children: /* @__PURE__ */ jsx(CapIcon, { type: "user", size: "s" })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  CapNavigationSPATopBar as default
+};