@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/bar-chart-card.css

@@ -1,261 +0,0 @@
-/* ==========================================================================
-   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

@@ -1,149 +0,0 @@
-/* ==========================================================================
-   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

@@ -1,136 +0,0 @@
-/* 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;
-  }
-}