@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/tooltip.css

@@ -1,85 +0,0 @@
-/* ==========================================================================
-   TOOLTIP COMPONENT
-   Shared styles for all frameworks
-   ========================================================================== */
-
-.tooltip {
-  position: absolute;
-  z-index: 10000;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-  white-space: nowrap;
-}
-
-.tooltip-visible {
-  opacity: 1;
-}
-
-.tooltip-content {
-  background-color: var(--color-neutral-900);
-  color: var(--color-white);
-  font-family: var(--font-inter);
-  font-weight: var(--weight-semibold);
-  font-size: 12px;
-  line-height: 1.5em;
-  padding: 8px 12px;
-  border-radius: 8px;
-  box-shadow: var(--shadow-popover);
-  position: relative;
-}
-
-/* Position variants */
-.tooltip-top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 6px;
-}
-
-.tooltip-bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 6px;
-}
-
-.tooltip-left {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-right: 6px;
-}
-
-.tooltip-right {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 6px;
-}
-
-/* Multiline support */
-.tooltip.multiline {
-  white-space: normal;
-}
-
-.tooltip.multiline .tooltip-content {
-  max-width: 240px;
-}
-
-/* Icon variant - positioning adjustments for tooltips on icons */
-.tooltip-icon.tooltip-top {
-  margin-bottom: 4px;
-}
-
-.tooltip-icon.tooltip-bottom {
-  margin-top: 4px;
-}
-
-.tooltip-icon.tooltip-left {
-  margin-right: 4px;
-}
-
-.tooltip-icon.tooltip-right {
-  margin-left: 4px;
-}

package/components/trend-chart-card.css

@@ -1,189 +0,0 @@
-/* ==========================================================================
-   TREND CHART CARD COMPONENT - REACT IMPLEMENTATION
-   Card wrapper for trend charts with metrics, icons, and various layouts
-   ========================================================================== */
-
-/* Wrapper for card + footer */
-.trend-chart-card-wrapper {
-  position: relative;
-  display: inline-block;
-  border-radius: 12px;
-  overflow: visible;
-}
-
-/* Base Card Styles */
-.trend-chart-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  font-family: var(--font-inter);
-  background: var(--color-white);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: 12px;
-  box-sizing: border-box;
-}
-
-/* Card with footer - remove bottom border radius */
-.trend-chart-card.has-footer {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom: none;
-}
-
-/* Header for metric and simple variants */
-.trend-chart-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  gap: var(--spacing-md);
-  margin-bottom: var(--spacing-sm);
-}
-
-.trend-chart-card-header .trend-chart-card-dropdown {
-  position: relative;
-  top: unset;
-  right: unset;
-  z-index: var(--z-index-dropdown, 1000);
-  flex-shrink: 0;
-}
-
-/* Dropdown Menu for non-metric variants */
-.trend-chart-card-dropdown {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
-}
-
-/* Adjust dropdown position for mobile */
-.trend-chart-card-mobile.trend-chart-card-metric .trend-chart-card-dropdown {
-  top: 12px;
-  right: 12px;
-}
-
-.trend-chart-card-mobile.trend-chart-card-simple .trend-chart-card-dropdown,
-.trend-chart-card-mobile.trend-chart-card-simple-chart .trend-chart-card-dropdown {
-  top: 16px;
-  right: 16px;
-}
-
-/* Heading */
-.trend-chart-card-heading {
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 1.43;
-  color: var(--color-neutral-600);
-  margin: 0;
-}
-
-/* Row for number and chart */
-.trend-chart-card-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 16px;
-}
-
-/* Trend icon */
-.trend-icon {
-  display: flex;
-  align-items: center;
-}
-
-.trend-icon .material-symbols-outlined {
-  font-size: var(--icon-size-md);
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
-}
-
-.trend-icon-positive {
-  color: var(--color-success-600) !important;
-}
-
-.trend-icon-negative {
-  color: var(--color-error-600) !important;
-}
-
-.trend-icon-neutral {
-  color: var(--color-neutral-600) !important;
-}
-
-/* Force color on the material icons specifically */
-.trend-icon-positive .material-symbols-outlined {
-  color: var(--color-success-600) !important;
-}
-
-.trend-icon-negative .material-symbols-outlined {
-  color: var(--color-error-600) !important;
-}
-
-.trend-icon-neutral .material-symbols-outlined {
-  color: var(--color-neutral-600) !important;
-}
-
-/* Custom trend badge */
-.trend-chart-card-badge-wrap {
-  padding-bottom: 4px;
-}
-
-/* Number wrapper for inline trend */
-.trend-chart-card-number-wrap {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-/* Number Styles - Desktop */
-.trend-chart-card-desktop .trend-chart-card-number {
-  font-weight: var(--weight-semibold);
-  font-size: var(--display-sm-size);
-  line-height: 2.375rem; /* 38px */
-  color: var(--color-neutral-900);
-  margin: 0;
-}
-
-/* Number Styles - Mobile */
-.trend-chart-card-mobile .trend-chart-card-number {
-  font-weight: var(--weight-semibold);
-  font-size: var(--display-xs-size);
-  line-height: 2rem; /* 32px */
-  color: var(--color-neutral-900);
-  margin: 0;
-}
-
-/* Inline badge (when chart is shown) */
-.trend-chart-card-badge-inline {
-  /* No margin needed - positioned by parent flex */
-}
-
-/* Featured Icon */
-.trend-chart-card-icon {
-  margin-bottom: 8px;
-}
-
-/* Responsive Dimensions - Desktop */
-.trend-chart-card-desktop.trend-chart-card-metric {
-  width: 200px;
-  padding: 20px;
-}
-
-.trend-chart-card-desktop.trend-chart-card-simple,
-.trend-chart-card-desktop.trend-chart-card-simple-chart,
-.trend-chart-card-desktop.trend-chart-card-featured-icon {
-  width: 388px;
-  padding: 24px;
-}
-
-/* Responsive Dimensions - Mobile */
-.trend-chart-card-mobile.trend-chart-card-metric {
-  width: 171.5px;
-  padding: 12px;
-}
-
-.trend-chart-card-mobile.trend-chart-card-simple,
-.trend-chart-card-mobile.trend-chart-card-simple-chart,
-.trend-chart-card-mobile.trend-chart-card-featured-icon {
-  width: 343px;
-  padding: 20px 16px;
-}

package/components/trend-chart.css

@@ -1,94 +0,0 @@
-/* ==========================================================================
-   TREND CHART COMPONENT - REACT IMPLEMENTATION
-   Mini trend chart with line and fill variations, smooth animations
-   ========================================================================== */
-
-.trend-chart {
-  position: relative;
-  display: inline-block;
-  width: fit-content;
-  height: fit-content;
-}
-
-/* Chart SVG container */
-.chart-svg {
-  overflow: visible;
-}
-
-/* Smooth Airbnb-style reveal animations */
-@keyframes chartFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes backgroundFill {
-  from {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-  to {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-}
-
-/* Animation timing */
-.trend-chart-animated {
-  animation: chartFadeIn 0.6s var(--animation-ease-smooth) forwards;
-}
-
-.trend-chart-animated .chart-line {
-  stroke-dasharray: 1000;
-  stroke-dashoffset: 1000;
-  animation: pathDraw 1.2s var(--animation-ease-smooth) 0.3s forwards;
-}
-
-@keyframes pathDraw {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-.trend-chart-animated .chart-background {
-  transform-origin: bottom;
-  animation: backgroundFill 0.8s var(--animation-ease-smooth) 0.3s forwards;
-  opacity: 0;
-}
-
-/* Line-only variant - slower animation */
-.trend-chart-animated.trend-chart-line-only .chart-line {
-  animation: pathDrawSlow 4s var(--animation-ease-smooth) 0.3s forwards;
-}
-
-@keyframes pathDrawSlow {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-/* Static styles for non-animated */
-.trend-chart:not(.trend-chart-animated) .chart-line {
-  stroke-dasharray: none;
-}
-
-.trend-chart:not(.trend-chart-animated) .chart-background {
-  opacity: 1;
-}
-
-/* Responsive behavior */
-@media (prefers-reduced-motion: reduce) {
-  .trend-chart-animated,
-  .trend-chart-animated .chart-line,
-  .trend-chart-animated .chart-background {
-    animation: none;
-    opacity: 1;
-    transform: none;
-    stroke-dasharray: none;
-  }
-}