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

package/CapNavigationSPA/CapNavigationSPATopBar/styles.css

@@ -0,0 +1,141 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.cap-navigation-spa-topbar {
+  height: 4.179rem;
+  min-height: 4.179rem;
+  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 1.5rem;
+  gap: 1rem;
+}
+.cap-navigation-spa-topbar__search {
+  display: flex;
+  align-items: center;
+  gap: 0.429rem;
+  height: 2.679rem;
+  padding: 0 0.714rem;
+  background-color: #f4f5f7;
+  border: 1px solid #dfe2e7;
+  border-radius: 4px;
+  cursor: text;
+  min-width: 11rem;
+  max-width: 12.5rem;
+}
+.cap-navigation-spa-topbar__search-icon {
+  flex-shrink: 0;
+  color: #5e6c84;
+}
+.cap-navigation-spa-topbar__search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #091e42;
+}
+.cap-navigation-spa-topbar__search-input::placeholder {
+  color: #5e6c84;
+}
+.cap-navigation-spa-topbar__search-input:focus {
+  outline: none;
+}
+.cap-navigation-spa-topbar__search-kbd {
+  flex-shrink: 0;
+  padding: 0.143rem 0.286rem;
+  font-family: inherit;
+  font-size: 0.786rem;
+  font-weight: 500;
+  color: #5e6c84;
+  background-color: #f4f5f7;
+  border: 1px solid #dfe2e7;
+  border-radius: 4px;
+}
+.cap-navigation-spa-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.cap-navigation-spa-topbar__divider {
+  width: 1px;
+  height: 1.5rem;
+  background-color: #dfe2e7;
+  flex-shrink: 0;
+}
+.cap-navigation-spa-topbar__org-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.25rem;
+  padding: 0 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: 6rem;
+}
+.cap-navigation-spa-topbar__env-pill {
+  padding: 0 0.5rem;
+  font-size: 0.857rem;
+  font-weight: 500;
+  color: #107a0e;
+  background-color: #ecf7ec;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+.cap-navigation-spa-topbar__org-chevron {
+  color: #5e6c84;
+  flex-shrink: 0;
+}
+.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: 8px;
+  cursor: pointer;
+  color: #5e6c84;
+}
+.cap-navigation-spa-topbar__icon-btn:hover {
+  background-color: #f4f5f7;
+  color: #091e42;
+}
+.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;
+}

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

@@ -0,0 +1,19 @@
+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__search": "cap-navigation-spa-topbar__search",
+  "cap-navigation-spa-topbar__search-icon": "cap-navigation-spa-topbar__search-icon",
+  "cap-navigation-spa-topbar__search-input": "cap-navigation-spa-topbar__search-input",
+  "cap-navigation-spa-topbar__search-kbd": "cap-navigation-spa-topbar__search-kbd",
+  "cap-navigation-spa-topbar__right": "cap-navigation-spa-topbar__right",
+  "cap-navigation-spa-topbar__divider": "cap-navigation-spa-topbar__divider",
+  "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__icon-btn": "cap-navigation-spa-topbar__icon-btn",
+  "cap-navigation-spa-topbar__notification-badge": "cap-navigation-spa-topbar__notification-badge"
+};
+export {
+  styles as default
+};

package/CapNavigationSPA/CapNavigationSPATopBar/styles.scss

@@ -0,0 +1,163 @@
+@import '../../styles/_variables.scss';
+
+// BEM: Block = cap-navigation-spa-topbar | Elements = __inner, __search, __search-icon, __org-button, ... | Modifiers = __icon-btn--has-badge
+// Top bar per pasted Figma SVG (983×43): search #F4F5F7 box, divider #DFE2E7, org+green pill, icons #091E42, badge #FF5630
+.cap-navigation-spa-topbar {
+  height: 4.179rem; // 58.5px / 43px design
+  min-height: 4.179rem;
+  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 1.5rem; // 24px
+  gap: 1rem;
+}
+
+// Search box: bg #F4F5F7, border #DFE1E6 per SVG
+.cap-navigation-spa-topbar__search {
+  display: flex;
+  align-items: center;
+  gap: 0.429rem; // 6px
+  height: 2.679rem; // ~42.5px
+  padding: 0 0.714rem;
+  background-color: $CAP_G09; // #f4f5f7
+  border: 1px solid $CAP_G07; // #dfe2e7
+  border-radius: 4px;
+  cursor: text;
+  min-width: 11rem;
+  max-width: 12.5rem;
+}
+
+.cap-navigation-spa-topbar__search-icon {
+  flex-shrink: 0;
+  color: $CAP_G04; // #5e6c84
+}
+
+.cap-navigation-spa-topbar__search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: $CAP_G01;
+
+  &::placeholder {
+    color: $CAP_G04; // #5e6c84
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.cap-navigation-spa-topbar__search-kbd {
+  flex-shrink: 0;
+  padding: 0.143rem 0.286rem;
+  font-family: inherit;
+  font-size: 0.786rem; // 11px
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: $CAP_G04;
+  background-color: $CAP_G09;
+  border: 1px solid $CAP_G07;
+  border-radius: 4px;
+}
+
+.cap-navigation-spa-topbar__right {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+// Vertical divider per SVG: 1px × 24px, #DFE2E7
+.cap-navigation-spa-topbar__divider {
+  width: 1px;
+  height: 1.5rem; // 24px
+  background-color: $CAP_G07; // #dfe2e7
+  flex-shrink: 0;
+}
+
+.cap-navigation-spa-topbar__org-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.25rem;
+  padding: 0 0.857rem;
+  background-color: $CAP_WHITE;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: $FONT_FAMILY;
+  font-size: $FONT_SIZE_M;
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: $CAP_G01;
+
+  &:hover {
+    background-color: $CAP_G09;
+  }
+}
+
+.cap-navigation-spa-topbar__org-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 6rem;
+}
+
+// Figma: green pill #ecf7ec bg, #107a0e text
+.cap-navigation-spa-topbar__env-pill {
+  padding: 0 0.5rem;
+  font-size: $FONT_SIZE_S; // 12px
+  font-weight: $FONT_WEIGHT_MEDIUM;
+  color: #107a0e; // variable absent – design spec
+  background-color: #ecf7ec; // variable absent – design spec
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+.cap-navigation-spa-topbar__org-chevron {
+  color: $CAP_G04;
+  flex-shrink: 0;
+}
+
+// Icon buttons: default #5E6C84, hover #091E42 per SVG
+.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: 8px;
+  cursor: pointer;
+  color: $CAP_G04; // #5e6c84
+
+  &:hover {
+    background-color: $CAP_G09;
+    color: $CAP_G01; // #091e42
+  }
+}
+
+.cap-navigation-spa-topbar__icon-btn--has-badge {
+  // Ensures badge positions relative to this button
+}
+
+// Notification dot per SVG #FF5630
+.cap-navigation-spa-topbar__notification-badge {
+  position: absolute;
+  top: 0.286rem;
+  right: 0.286rem;
+  width: 0.571rem; // 8px
+  height: 0.571rem;
+  border-radius: 50%;
+  background-color: #ff5630;
+}

package/CapNavigationSPA/CapNavigationSPATopBar/types.d.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+export interface CapNavigationSPATopBarProps {
+    /** Search input placeholder */
+    searchPlaceholder?: string;
+    /** Search shortcut hint (e.g. "⌘+K") */
+    searchShortcut?: string;
+    /** Org/tenant display name (e.g. "Van Heusen") */
+    orgName?: string;
+    /** Environment label (e.g. "Production") */
+    environmentLabel?: string;
+    /** Callback when search is focused or submitted */
+    onSearch?: (value: string) => void;
+    /** Callback when org/env selector is clicked */
+    onOrgEnvClick?: () => void;
+    /** Callback when help icon is clicked */
+    onHelpClick?: () => void;
+    /** Callback when notification icon is clicked */
+    onNotificationClick?: () => void;
+    /** Whether to show notification badge */
+    showNotificationBadge?: boolean;
+    /** Callback when user avatar is clicked (opens dropdown in parent) */
+    onUserClick?: () => void;
+    /** User display (avatar or initial) */
+    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,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,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,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,uCAAuC;IACvC,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;AAYpE,OAAO,KAAK,EACV,qBAAqB,EAetB,MAAM,SAAS,CAAC;wBA6eqC,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;AAAhG,wBAAiG"}