@capillarytech/blaze-ui 6.1.5 → 6.1.6-beta.3

package/CapNavigationSPA/CapNavigationSPATopBar/styles.css

@@ -0,0 +1,147 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.cap-navigation-spa-topbar {
+  height: 4rem;
+  min-height: 4rem;
+  background-color: #ffffff;
+  border-bottom: 1px solid #dfe2e7;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-topbar__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 2.286rem;
+}
+.cap-navigation-spa-topbar__org-button {
+  display: flex;
+  align-items: center;
+  gap: 0.857rem;
+  height: 2.857rem;
+  padding: 0.571rem 0.857rem;
+  background-color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #091e42;
+}
+.cap-navigation-spa-topbar__org-button:hover {
+  background-color: #f4f5f7;
+}
+.cap-navigation-spa-topbar__org-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 10rem;
+  line-height: 1.429rem;
+}
+.cap-navigation-spa-topbar__env-pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.286rem 0.571rem;
+  font-size: 0.857rem;
+  font-weight: 500;
+  line-height: 1.143rem;
+  color: #1a8018;
+  background-color: #ecf7ec;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+.cap-navigation-spa-topbar__org-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.143rem;
+  height: 1.143rem;
+  color: #091e42;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: 0.857rem;
+}
+.cap-navigation-spa-topbar__aira-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem;
+  height: 2.286rem;
+  border: none;
+  background-color: #ffffff;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+}
+.cap-navigation-spa-topbar__aira-btn:hover {
+  background-color: #f4f5f7;
+}
+.cap-navigation-spa-topbar__icon-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem;
+  height: 2.286rem;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  color: #091e42;
+  padding: 0;
+}
+.cap-navigation-spa-topbar__icon-btn:hover {
+  background-color: #f4f5f7;
+}
+.cap-navigation-spa-topbar__notification-badge {
+  position: absolute;
+  top: 0.286rem;
+  right: 0.286rem;
+  width: 0.571rem;
+  height: 0.571rem;
+  border-radius: 50%;
+  background-color: #ff5630;
+}
+.cap-navigation-spa-topbar__divider {
+  width: 1px;
+  height: 2.286rem;
+  background-color: #dfe2e7;
+  flex-shrink: 0;
+  margin: 0 0.857rem;
+}
+.cap-navigation-spa-topbar__user-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem;
+  height: 2.286rem;
+  flex-shrink: 0;
+  overflow: visible;
+}
+.cap-navigation-spa-topbar__user-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem;
+  height: 2.286rem;
+  border: none;
+  background-color: #dfe2e7;
+  border-radius: 0.714rem;
+  cursor: pointer;
+  color: #091e42;
+  padding: 0;
+}
+.cap-navigation-spa-topbar__user-btn:hover {
+  background-color: #ebecf0;
+}

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

@@ -0,0 +1,18 @@
+import './styles.css';const styles = {
+  "cap-navigation-spa-topbar": "cap-navigation-spa-topbar",
+  "cap-navigation-spa-topbar__inner": "cap-navigation-spa-topbar__inner",
+  "cap-navigation-spa-topbar__org-button": "cap-navigation-spa-topbar__org-button",
+  "cap-navigation-spa-topbar__org-name": "cap-navigation-spa-topbar__org-name",
+  "cap-navigation-spa-topbar__env-pill": "cap-navigation-spa-topbar__env-pill",
+  "cap-navigation-spa-topbar__org-chevron": "cap-navigation-spa-topbar__org-chevron",
+  "cap-navigation-spa-topbar__right": "cap-navigation-spa-topbar__right",
+  "cap-navigation-spa-topbar__aira-btn": "cap-navigation-spa-topbar__aira-btn",
+  "cap-navigation-spa-topbar__icon-btn": "cap-navigation-spa-topbar__icon-btn",
+  "cap-navigation-spa-topbar__notification-badge": "cap-navigation-spa-topbar__notification-badge",
+  "cap-navigation-spa-topbar__divider": "cap-navigation-spa-topbar__divider",
+  "cap-navigation-spa-topbar__user-wrap": "cap-navigation-spa-topbar__user-wrap",
+  "cap-navigation-spa-topbar__user-btn": "cap-navigation-spa-topbar__user-btn"
+};
+export {
+  styles as default
+};

package/CapNavigationSPA/CapNavigationSPATopBar/styles.scss

@@ -0,0 +1,173 @@
+@import '../../styles/_variables.scss';
+
+// Figma 1175-368593: top bar 56px, white bg, 1px bottom border #DFE2E7
+.cap-navigation-spa-topbar {
+  height: 4rem; // 56px
+  min-height: 4rem;
+  background-color: $CAP_WHITE;
+  border-bottom: 1px solid $CAP_G07; // #DFE2E7
+  flex-shrink: 0;
+}
+
+.cap-navigation-spa-topbar__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 2.286rem; // 32px – Figma x=32
+}
+
+// Figma: white rect 210×40 rx=4 at (32,8); contains org name + pill + chevron
+.cap-navigation-spa-topbar__org-button {
+  display: flex;
+  align-items: center;
+  gap: 0.857rem; // 12px – gap between org name group and chevron
+  height: 2.857rem; // 40px
+  padding: 0.571rem 0.857rem; // 8px 12px
+  background-color: $CAP_WHITE;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M; // 14px
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: $CAP_G01; // #091E42
+
+  &:hover {
+    background-color: $CAP_G09; // #F4F5F7
+  }
+}
+
+.cap-navigation-spa-topbar__org-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 10rem;
+  line-height: 1.429rem; // 20px – Figma H4/Medium
+}
+
+// Figma: green pill #ECF7EC bg, #1A8018 text, rx=4, 75×24
+.cap-navigation-spa-topbar__env-pill {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.286rem 0.571rem; // 4px 8px
+  font-size: $FONT_SIZE_S; // 12px – Figma H5/Medium
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  line-height: 1.143rem; // 16px
+  color: #1a8018; // Figma Primary/1 green text – variable absent
+  background-color: #ecf7ec; // Figma 10%/3 – variable absent
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+// Figma: chevron-down icon 16×16 container
+.cap-navigation-spa-topbar__org-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.143rem; // 16px
+  height: 1.143rem;
+  color: $CAP_G01; // #091E42
+  flex-shrink: 0;
+}
+
+// Right section: icons + divider + user
+.cap-navigation-spa-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: 0.857rem; // 12px between icon buttons
+}
+
+// Aira icon: Figma white circle r=16 (32px) with gradient sparkle icon
+.cap-navigation-spa-topbar__aira-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem; // 32px
+  height: 2.286rem;
+  border: none;
+  background-color: $CAP_WHITE;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    background-color: $CAP_G09;
+  }
+}
+
+// Generic icon buttons (bell, help): 32×32, transparent, round on hover
+.cap-navigation-spa-topbar__icon-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem; // 32px
+  height: 2.286rem;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  color: $CAP_G01; // #091E42 – Figma Icon/Dark
+  padding: 0;
+
+  &:hover {
+    background-color: $CAP_G09;
+  }
+}
+
+.cap-navigation-spa-topbar__icon-btn--has-badge {
+  // badge positions relative to this button
+}
+
+// Notification dot: Figma #FF5630
+.cap-navigation-spa-topbar__notification-badge {
+  position: absolute;
+  top: 0.286rem; // 4px
+  right: 0.286rem;
+  width: 0.571rem; // 8px
+  height: 0.571rem;
+  border-radius: 50%;
+  background-color: #ff5630;
+}
+
+// Vertical divider: Figma 1×32 #DFE2E7 at x=951
+.cap-navigation-spa-topbar__divider {
+  width: 1px;
+  height: 2.286rem; // 32px
+  background-color: $CAP_G07; // #DFE2E7
+  flex-shrink: 0;
+  margin: 0 0.857rem; // extra 12px gap on each side
+}
+
+// User avatar area (wraps custom userDisplay e.g. CapDropdown trigger)
+// Constrained to 32px squircle to prevent CapDropdown from expanding
+.cap-navigation-spa-topbar__user-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem; // 32px
+  height: 2.286rem;
+  flex-shrink: 0;
+  overflow: visible;
+}
+
+// Default user button: Figma squircle (#DFE2E7) 32px with person icon (Figma 1206-154664)
+.cap-navigation-spa-topbar__user-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem; // 32px
+  height: 2.286rem;
+  border: none;
+  background-color: $CAP_G07; // #DFE2E7 – Figma Neutral/4
+  border-radius: 0.714rem; // 10px – squircle corners per Figma SVG path
+  cursor: pointer;
+  color: $CAP_G01; // #091E42
+  padding: 0;
+
+  &:hover {
+    background-color: $CAP_G08;
+  }
+}

package/CapNavigationSPA/CapNavigationSPATopBar/types.d.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+export interface CapNavigationSPATopBarProps {
+    /** Org/tenant display name (e.g. "Big Basket") */
+    orgName?: string;
+    /** Environment label (e.g. "Production") */
+    environmentLabel?: string;
+    /** Callback when org/env selector is clicked */
+    onOrgEnvClick?: () => void;
+    /** Callback when Aira icon is clicked */
+    onAiraClick?: () => void;
+    /** Callback when notification icon is clicked */
+    onNotificationClick?: () => void;
+    /** Whether to show notification badge */
+    showNotificationBadge?: boolean;
+    /** Callback when help icon is clicked */
+    onHelpClick?: () => void;
+    /** Callback when user avatar is clicked (opens dropdown in parent) */
+    onUserClick?: () => void;
+    /** User display (avatar or initial) – rendered in place of default user icon */
+    userDisplay?: React.ReactNode;
+    /** Optional className */
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../components/CapNavigationSPA/CapNavigationSPATopBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,2BAA2B;IAC1C,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gDAAgD;IAChD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gFAAgF;IAChF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/CapNavigationSPA/CapNavigationSPATopBar/types.js

@@ -0,0 +1 @@
+

package/CapNavigationSPA/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const USER_PROFILE_KEY = "User Profile";
+//# sourceMappingURL=constants.d.ts.map

package/CapNavigationSPA/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../components/CapNavigationSPA/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,iBAAiB,CAAC"}

package/CapNavigationSPA/constants.js

@@ -0,0 +1,4 @@
+const USER_PROFILE_KEY = "User Profile";
+export {
+  USER_PROFILE_KEY
+};

package/CapNavigationSPA/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ *
+ * CapNavigationSPA
+ *
+ */
+import React from 'react';
+import type { CapNavigationSPAProps } from './types';
+declare const _default: React.ComponentType<CapNavigationSPAProps>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/CapNavigationSPA/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapNavigationSPA/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,OAAO,KAA+C,MAAM,OAAO,CAAC;AAapE,OAAO,KAAK,EACV,qBAAqB,EAetB,MAAM,SAAS,CAAC;wBAgfqC,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;AAAhG,wBAAiG"}