@actabldesign/bellhop-styles 0.0.3

package/components/button.css

@@ -0,0 +1,266 @@
+/* ==========================================================================
+   BUTTON COMPONENT STYLES
+   ========================================================================== */
+
+/* Base Button */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+
+  border: 1px solid transparent;
+  cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+  transition: all 0.2s ease-in-out;
+  text-decoration: none;
+  outline: none;
+}
+
+/* Button Sizes */
+.btn-xs {
+  padding: 0 var(--spacing-lg);
+  height: 24px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm-size);
+}
+
+.btn-sm {
+  padding: 0 var(--spacing-xl);
+  height: 32px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm-size);
+}
+
+.btn-md {
+  padding: 0 var(--spacing-xl);
+  height: 40px;
+  border-radius: var(--radius-md);
+}
+
+.btn-lg {
+  padding: 0 var(--spacing-xl);
+  height: 48px;
+  border-radius: var(--radius-md);
+  gap: var(--spacing-sm); /* Larger gap for large buttons */
+}
+
+/* Icon Padding Compensation */
+/* 
+ * Precise compensation for visual balance:
+ * Base padding: 16px (--spacing-xl)
+ * Icon gap: 4px (--spacing-xs) for sm/md, 6px (--spacing-sm) for lg
+ * 
+ * The compensation should account for:
+ * 1. Half the icon's visual weight (icon_size / 2)  
+ * 2. The gap between icon and text
+ * 
+ * Compensation = (icon_size / 2) + gap
+ * Final padding = base_padding - compensation
+ */
+
+/* Leading icon - reduce left padding for visual balance */
+.btn-xs.btn-icon-leading {
+  padding-left: var(--icon-compensation-xs-btn, calc(var(--spacing-lg) - var(--spacing-xs)));
+}
+
+.btn-sm.btn-icon-leading {
+  padding-left: var(--icon-compensation-sm-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
+}
+
+.btn-md.btn-icon-leading {
+  padding-left: var(--icon-compensation-md-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
+}
+
+.btn-lg.btn-icon-leading {
+  padding-left: var(--icon-compensation-lg-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
+}
+
+/* Trailing icon - reduce right padding for visual balance */
+.btn-xs.btn-icon-trailing {
+  padding-right: var(--icon-compensation-xs-btn, calc(var(--spacing-lg) - var(--spacing-xs)));
+}
+
+.btn-sm.btn-icon-trailing {
+  padding-right: var(--icon-compensation-sm-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
+}
+
+.btn-md.btn-icon-trailing {
+  padding-right: var(--icon-compensation-md-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
+}
+
+.btn-lg.btn-icon-trailing {
+  padding-right: var(--icon-compensation-lg-btn, calc(var(--spacing-xl) - var(--spacing-xs)));
+}
+
+/* Button Hierarchies */
+.btn-primary {
+  background-color: var(--color-brand-600);
+  color: var(--color-white);
+  border-color: var(--color-brand-600);
+}
+
+.btn-secondary {
+  background-color: var(--color-white);
+  color: var(--color-neutral-600);
+  border-color: var(--color-neutral-300);
+}
+
+.btn-tertiary {
+  background-color: transparent;
+  color: var(--color-neutral-600);
+  border-color: transparent;
+}
+
+.btn-quaternary {
+  background-color: transparent;
+  color: var(--color-brand-600);
+  border-color: transparent;
+  /* font-weight: var(--weight-medium); */
+}
+
+/* Hover States */
+.btn-primary:hover:not(:disabled) {
+  background-color: var(--color-brand-700);
+  border-color: var(--color-brand-700);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-700);
+  border-color: var(--color-neutral-400);
+}
+
+.btn-tertiary:hover:not(:disabled) {
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+.btn-quaternary:hover:not(:disabled) {
+  color: var(--color-brand-700);
+}
+
+/* Active States */
+.btn-primary:active:not(:disabled) {
+  background-color: var(--color-brand-800);
+  border-color: var(--color-brand-800);
+}
+
+.btn-secondary:active:not(:disabled) {
+  background-color: var(--color-neutral-100);
+  border-color: var(--color-neutral-500);
+}
+
+.btn-tertiary:active:not(:disabled) {
+  background-color: var(--color-neutral-100);
+}
+
+.btn-quaternary:active:not(:disabled) {
+  color: var(--color-brand-800);
+}
+
+/* Focus State */
+.btn:focus,
+.btn-focus {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+
+/* Disabled States */
+.btn:disabled,
+.btn-disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn-primary:disabled,
+.btn-primary.btn-disabled {
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-400);
+  border-color: var(--color-neutral-200);
+}
+
+.btn-secondary:disabled,
+.btn-secondary.btn-disabled,
+.btn-tertiary:disabled,
+.btn-tertiary.btn-disabled,
+.btn-quaternary:disabled,
+.btn-quaternary.btn-disabled {
+  opacity: 0.5;
+}
+
+/* Loading State */
+.btn-loading {
+  cursor: wait;
+  pointer-events: none;
+}
+
+.btn-loading .btn-label {
+  opacity: 0.7;
+}
+
+/* ==========================================================================
+   BUTTON CONTENT ELEMENTS
+   ========================================================================== */
+
+/* Button Label */
+.btn-label {
+  display: inline-block;
+  line-height: inherit;
+  
+}
+
+/* Quaternary button labels get underline */
+.btn-quaternary .btn-label {
+  text-decoration: underline;
+}
+
+/* Icons */
+.btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.btn-icon-material {
+  line-height: 1;
+  vertical-align: middle;
+  color: inherit !important;
+}
+
+/* Icon-Only Buttons */
+.btn-icon-only {
+  padding: 0;
+}
+
+.btn-icon-only.btn-xs {
+  width: 24px;
+  height: 24px;
+}
+.btn-icon-only.btn-sm {
+  width: 32px;
+  height: 32px;
+}
+.btn-icon-only.btn-md {
+  width: 40px;
+  height: 40px;
+}
+.btn-icon-only.btn-lg {
+  width: 48px;
+  height: 48px;
+}
+
+.btn-icon-only .btn-icon-material {
+  margin: 0;
+}
+
+/* Loading Spinner */
+.btn-loading-icon {
+  line-height: 1;
+  vertical-align: middle;
+  color: inherit;
+}

package/components/chart-tooltip.css

@@ -0,0 +1,96 @@
+/* ==========================================================================
+   CHART TOOLTIP COMPONENT - REACT IMPLEMENTATION
+   Unified styles for chart tooltips matching Angular functionality
+   ========================================================================== */
+
+.chart-tooltip {
+  position: fixed;
+  z-index: 10000;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  transform: translate(-50%, -100%);
+  margin-top: var(--spacing-sm);
+  width: max-content;
+  min-width: 120px;
+  max-width: 240px;
+}
+
+.chart-tooltip.storybook-mode {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  margin-top: -10px;
+}
+
+.chart-tooltip.visible {
+  opacity: 1;
+}
+
+.tooltip-content {
+  background: var(--color-white) !important;
+  color: var(--color-neutral-900);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--radius-md);
+  font-family: var(--font-inter);
+  font-size: var(--text-xs-size);
+  line-height: var(--text-xs-line);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.tooltip-header {
+  font-weight: var(--weight-semibold);
+  margin-bottom: var(--spacing-xs);
+  padding-bottom: var(--spacing-xs);
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+
+.tooltip-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.tooltip-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  white-space: nowrap;
+}
+
+.tooltip-dot {
+  width: var(--spacing-sm);
+  height: var(--spacing-sm);
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.tooltip-label {
+  color: var(--color-neutral-600);
+  font-weight: var(--weight-regular);
+  flex-shrink: 0;
+}
+
+.tooltip-value {
+  color: var(--color-neutral-900);
+  font-weight: var(--weight-medium);
+}
+
+.tooltip-total {
+  margin-top: var(--spacing-xs);
+  padding-top: var(--spacing-xs);
+  border-top: 1px solid var(--color-neutral-100);
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
+
+.total-label {
+  color: var(--color-neutral-600);
+  font-weight: var(--weight-medium);
+}
+
+.total-value {
+  color: var(--color-neutral-900);
+  font-weight: var(--weight-semibold);
+}

package/components/checkbox-label.css

@@ -0,0 +1,53 @@
+.checkbox-label-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkbox-label-wrapper.checkbox-label-disabled {
+  cursor: not-allowed;
+}
+
+/* Align checkbox with the label text baseline */
+.checkbox-label-wrapper .checkbox {
+  margin-top: 2px;
+}
+
+.checkbox-label-wrapper .checkbox-sm {
+  margin-top: 3px;
+}
+
+.label-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.label-text {
+  font-family: var(--font-inter);
+  font-size: var(--text-md-size);
+  font-weight: var(--weight-medium);
+  color: var(--color-neutral-900);
+  margin: 0;
+  cursor: inherit;
+  display: block;
+}
+
+.label-text.label-disabled {
+  color: var(--color-neutral-400);
+}
+
+.supporting-text {
+  font-family: var(--font-inter);
+  font-size: var(--text-sm-size);
+  font-weight: var(--weight-regular);
+  line-height: var(--text-sm-line);
+  color: var(--color-neutral-500);
+  margin: 0;
+}
+
+.supporting-text.supporting-disabled {
+  color: var(--color-neutral-400);
+}

package/components/checkbox.css

@@ -0,0 +1,127 @@
+/* ==========================================================================
+   CHECKBOX COMPONENT STYLES - Following Figma Design
+   ========================================================================== */
+
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+  background: var(--color-white);
+  border: 2px solid var(--color-neutral-300);
+  position: relative;
+}
+
+/* Size Variants - Following Figma Specs */
+.checkbox-sm {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-xs);
+}
+
+.checkbox-md {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-sm);
+}
+
+/* State: Default (unchecked) */
+.checkbox {
+  border-color: var(--color-neutral-300);
+}
+
+/* State: Checked */
+.checkbox.checkbox-checked {
+  background: var(--color-brand-600);
+  border-color: var(--color-brand-600);
+  color: var(--color-white);
+}
+
+/* State: Hover */
+.checkbox:hover:not(.checkbox-disabled) {
+  background: var(--color-neutral-100);
+  border-color: var(--color-neutral-300);
+}
+
+.checkbox.checkbox-checked:hover:not(.checkbox-disabled) {
+  background: var(--color-brand-700);
+  border-color: var(--color-brand-700);
+}
+
+/* State: Focused */
+.checkbox.checkbox-focused:not(.checkbox-disabled) {
+  border-color: var(--color-neutral-300);
+  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
+    0px 0px 0px 2px var(--color-white);
+}
+
+.checkbox.checkbox-checked.checkbox-focused:not(.checkbox-disabled) {
+  background: var(--color-brand-600);
+  border-color: var(--color-brand-600);
+  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
+    0px 0px 0px 2px var(--color-white);
+}
+
+/* State: Disabled */
+.checkbox.checkbox-disabled {
+  background: var(--color-neutral-50);
+  border-color: var(--color-neutral-300);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.checkbox.checkbox-checked.checkbox-disabled {
+  background: var(--color-neutral-50);
+  border: 2px solid var(--color-neutral-300);
+  color: var(--color-neutral-300);
+}
+
+/* Icons */
+.checkbox-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: var(--icon-size-md);
+  line-height: 1;
+  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 20;
+}
+
+.checkbox .check-icon {
+  color: var(--color-white) !important;
+}
+
+.checkbox-disabled .check-icon {
+  color: var(--color-neutral-300) !important;
+}
+
+.checkbox .minus-icon {
+  color: var(--color-white) !important;
+}
+
+.checkbox-disabled .minus-icon {
+  color: var(--color-neutral-300) !important;
+}
+
+/* Adjust icon sizes for different checkbox sizes */
+.checkbox-sm .checkbox-icon {
+  font-size: var(--icon-size-xs);
+}
+
+.checkbox-md .checkbox-icon {
+  font-size: var(--icon-size-md);
+}
+
+/* Focus outline for accessibility */
+.checkbox:focus {
+  outline: none;
+}
+
+.checkbox:focus:not(.checkbox-disabled) {
+  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
+    0px 0px 0px 2px var(--color-white);
+}

package/components/container-footer.css

@@ -0,0 +1,22 @@
+/* Base Container Footer Styles */
+.container-footer {
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-top: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-none) var(--radius-none) var(--radius-xl)
+    var(--radius-xl);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.container-footer-content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-2xl);
+}
+
+/* Minimal size - smaller top/bottom padding */
+.container-footer-minimal .container-footer-content {
+  padding: var(--spacing-sm) var(--spacing-2xl);
+}

package/components/container.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
+  padding: var(--spacing-2xl);
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-xl);
+  width: fit-content;
+  font-family: var(--font-inter);
+}
+
+/* Container with footer - removes bottom border radius and border */
+.container-with-footer {
+  border-bottom: none;
+  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-none) var(--radius-none);
+}