@actabldesign/bellhop-styles 0.0.3

package/components/bar-chart-card.css

@@ -0,0 +1,261 @@
+/* ==========================================================================
+   BAR CHART CARD COMPONENT - REACT IMPLEMENTATION
+   Unified styles for bar chart cards matching Angular functionality
+   ========================================================================== */
+
+/* Wrapper for card + footer */
+.bar-chart-card-wrapper {
+  position: relative;
+  display: inline-block;
+  border-radius: var(--radius-lg, 12px);
+  overflow: visible;
+}
+
+/* Base Card Styles */
+.bar-chart-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl, 20px); /* 20px */
+  font-family: var(--font-inter);
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg, 12px);
+  box-sizing: border-box;
+}
+
+/* Card with footer - remove bottom border radius */
+.bar-chart-card.has-footer {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: none;
+}
+
+/* Dropdown Menu */
+.bar-chart-card-dropdown {
+  position: absolute;
+  top: var(--spacing-3xl, 24px); /* 24px */
+  right: var(--spacing-3xl, 24px); /* 24px */
+  z-index: 1000;
+}
+
+/* Adjust dropdown position for mobile */
+.bar-chart-card-mobile .bar-chart-card-dropdown {
+  top: var(--spacing-2xl, 20px); /* 20px */
+  right: var(--spacing-xl, 16px); /* 16px */
+}
+
+/* Header */
+.bar-chart-card-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 4px); /* 4px */
+}
+
+.bar-chart-card-heading {
+  color: var(--color-neutral-900);
+  font-size: var(--text-md-size); /* 16px */
+  font-weight: var(--weight-semibold);
+  line-height: var(--text-md-line);
+  margin: 0;
+}
+
+.bar-chart-card-subtitle {
+  color: var(--color-neutral-500);
+  font-size: var(--text-sm-size); /* 14px */
+  font-weight: var(--weight-regular);
+  line-height: var(--text-sm-line);
+  margin: 0;
+}
+
+/* Number and badge row */
+.bar-chart-card-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg, 12px); /* 12px */
+  flex-wrap: wrap;
+  margin-top: var(--spacing-xl, 16px); /* 16px */
+}
+
+/* Number Styles - Desktop */
+.bar-chart-card-desktop .bar-chart-card-number {
+  font-weight: var(--weight-semibold);
+  font-size: var(--display-sm-size);
+  line-height: var(--display-sm-line);
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+
+/* Number Styles - Mobile */
+.bar-chart-card-mobile .bar-chart-card-number {
+  font-weight: var(--weight-semibold);
+  font-size: var(--display-xs-size);
+  line-height: var(--display-xs-line);
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+
+/* Badge */
+.bar-chart-card-badge {
+  color: var(--color-neutral-500);
+  font-size: var(--text-md-size); /* 16px */
+  font-weight: var(--weight-medium);
+  line-height: var(--text-md-line);
+}
+
+/* Chart Content */
+.bar-chart-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
+  min-width: 400px;
+}
+
+/* Legend */
+.bar-chart-card-legend {
+  display: flex;
+  gap: var(--spacing-lg, 12px); /* 12px */
+  flex-wrap: wrap;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 6px); /* 6px */
+}
+
+.legend-color {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.legend-text {
+  color: var(--color-neutral-500);
+  font-size: var(--text-sm-size); /* 14px */
+  font-weight: var(--weight-regular);
+  line-height: var(--text-sm-line);
+  letter-spacing: -0.5px;
+}
+
+/* Chart Container with Axes */
+.bar-chart-card-chart-container {
+  display: flex;
+  gap: var(--spacing-sm, 6px);
+  width: 100%;
+}
+
+/* Y-Axis Container */
+.y-axis-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  min-width: var(--spacing-4xl);
+}
+
+.y-axis-labels {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 180px;
+  text-align: right;
+  padding-right: var(--spacing-xs, 4px);
+}
+
+.y-axis-tick-label {
+  font-size: var(--text-xs-size);
+  color: var(--color-neutral-500);
+  line-height: var(--text-xs-line);
+}
+
+/* Chart Grid Container */
+.chart-grid-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+}
+
+/* Grid Lines */
+.grid-lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.grid-line {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-neutral-200);
+}
+
+/* Chart Content */
+.chart-content {
+  height: 180px;
+  width: 100%;
+  position: relative;
+  z-index: 2;
+}
+
+/* Target Line */
+.target-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: var(--color-neutral-900);
+  z-index: 3;
+  transition: bottom 0.3s ease;
+}
+
+/* X-Axis Container */
+.x-axis-container {
+  margin-top: var(--spacing-sm, 6px);
+}
+
+.x-axis-labels {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.x-axis-tick-label {
+  font-size: var(--text-xs-size);
+  color: var(--color-neutral-500);
+  line-height: var(--text-xs-line);
+  text-align: center;
+  white-space: nowrap;
+  flex: 1;
+}
+
+/* Simple Chart Container */
+.simple-chart-container {
+  width: 100%;
+  height: 180px;
+}
+
+/* Responsive Dimensions - Desktop */
+.bar-chart-card-desktop {
+  min-width: 520px;
+  max-width: 800px;
+  width: fit-content;
+  padding: var(--spacing-3xl); /* 24px */
+}
+
+/* Responsive Dimensions - Mobile */
+.bar-chart-card-mobile {
+  min-width: 340px;
+  max-width: 800px;
+  width: fit-content;
+  padding: var(--spacing-2xl); /* 20px */
+}

package/components/bar-chart.css

@@ -0,0 +1,149 @@
+/* ==========================================================================
+   BAR CHART COMPONENT - REACT IMPLEMENTATION
+   Unified styles for bar charts matching Angular functionality
+   ========================================================================== */
+
+/* Vertical Layout */
+.vertical-container {
+  display: flex;
+  align-items: flex-end;
+  height: 180px;
+  width: 100%;
+}
+
+.vertical-container.simple {
+  height: 180px;
+  width: 100%;
+}
+
+.bar-column.vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  flex: 1;
+  gap: var(--spacing-xxs, 2px);
+  margin: 0 2px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.vertical-container.simple .bar-column.vertical {
+  flex: 1;
+  margin: 0 2px;
+}
+
+.bar-segment.vertical {
+  width: 6px;
+  border-radius: 2px;
+  min-height: 2px;
+  transition: all 0.3s ease;
+  transform-origin: bottom;
+}
+
+/* Horizontal Layout */
+.horizontal-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: auto;
+  min-height: 140px;
+  gap: var(--spacing-lg, 12px);
+}
+
+.horizontal-container.simple {
+  height: auto;
+  min-height: 140px;
+  gap: var(--spacing-lg, 12px);
+}
+
+.bar-row.horizontal {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 6px !important;
+  min-height: 6px;
+  max-height: 6px;
+  gap: var(--spacing-xxs, 2px);
+  margin: 2px 0;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  padding: 2px;
+}
+
+.horizontal-container.simple .bar-row.horizontal {
+  height: 6px !important;
+  min-height: 6px;
+  max-height: 6px;
+  margin: 2px 0;
+  padding: 2px;
+}
+
+.bar-segment.horizontal {
+  height: 100% !important;
+  min-height: 6px;
+  max-height: 6px;
+  border-radius: 2px;
+  min-width: 2px;
+  transition: all 0.3s ease;
+  transform-origin: left;
+}
+
+.horizontal-container.simple .bar-segment.horizontal {
+  min-width: 2px;
+  height: 6px !important;
+  min-height: 6px;
+  max-height: 6px;
+}
+
+/* Hover effects */
+.bar-column,
+.bar-row {
+  cursor: pointer;
+}
+
+.bar-column:hover {
+  background-color: color-mix(in srgb, var(--color-neutral-100) 50%, transparent);
+}
+
+.bar-row:hover {
+  background-color: color-mix(in srgb, var(--color-neutral-100) 50%, transparent);
+}
+
+.bar-column:hover .bar-segment,
+.bar-row:hover .bar-segment {
+  opacity: 0.9;
+  filter: brightness(1.05);
+}
+
+/* Animations */
+.bar-chart-animated .bar-segment.vertical {
+  animation: barGrowVertical 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.bar-chart-animated .bar-segment.horizontal {
+  animation: barGrowHorizontal 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+@keyframes barGrowVertical {
+  from {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+@keyframes barGrowHorizontal {
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}

package/components/breadcrumbs.css

@@ -0,0 +1,136 @@
+/* Breadcrumbs Navigation - Matching Figma Design */
+.breadcrumbs {
+  font-family: var(--font-inter);
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+.breadcrumbs-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+}
+
+/* Breadcrumb Buttons - Matching Figma Design */
+.breadcrumb-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  color: var(--color-neutral-600);
+  text-decoration: none;
+  font-family: var(--font-inter);
+  font-size: var(--text-sm-size);
+  font-weight: 500;
+  line-height: 1.4285714285714286em;
+  min-height: 24px;
+  box-sizing: border-box;
+}
+
+.breadcrumb-button:hover {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
+}
+
+.breadcrumb-button:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+
+/* Home button styling */
+.breadcrumb-home {
+  padding: var(--spacing-xs);
+  min-width: 24px;
+  min-height: 24px;
+}
+
+/* Current/Active breadcrumb item - Matching Figma highlighted state */
+.breadcrumb-current {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-800);
+  font-weight: 500;
+  cursor: default;
+}
+
+.breadcrumb-current:hover {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-800);
+}
+
+/* Ellipsis button */
+.breadcrumb-ellipsis {
+  color: var(--color-neutral-600);
+  font-weight: 500;
+}
+
+.breadcrumb-ellipsis:hover {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-900);
+}
+
+/* Breadcrumb text */
+.breadcrumb-text {
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Breadcrumb icons */
+.breadcrumb-icon {
+  flex-shrink: 0;
+  font-size: var(--icon-size-md);
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  color: var(--color-neutral-600);
+}
+
+.breadcrumb-home .breadcrumb-icon {
+  font-size: var(--icon-size-md);
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+/* Separators - Matching Figma chevron color */
+.breadcrumb-separator {
+  display: flex;
+  align-items: center;
+  color: var(--color-neutral-300);
+  font-size: var(--icon-size-md);
+  flex-shrink: 0;
+}
+
+.breadcrumb-separator .material-symbols-outlined {
+  font-size: var(--icon-size-md);
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+/* Responsive behavior */
+@media (max-width: 640px) {
+  .breadcrumb-text {
+    max-width: 120px;
+  }
+
+  .breadcrumbs-container {
+    gap: var(--spacing-xxs);
+  }
+
+  .breadcrumb-button {
+    padding: var(--spacing-xxs) var(--spacing-xs);
+    font-size: 12px;
+  }
+}