@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/tag.css

@@ -1,214 +0,0 @@
-/* Tag Base Styles */
-.tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
-  font-family: var(--font-inter);
-  font-weight: var(--weight-medium);
-  background-color: var(--color-white);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: var(--radius-sm);
-  white-space: nowrap;
-  cursor: default;
-  user-select: none;
-}
-
-/* Clickable Tags */
-.tag-dismissible {
-  cursor: pointer;
-}
-
-/* Tags that act as counters or are interactive */
-.tag-clickable {
-  cursor: pointer;
-}
-
-/* Size Variants */
-.tag-sm {
-  padding: var(--spacing-xxs) var(--spacing-md);
-  font-size: var(--text-sm-size);
-  line-height: var(--text-sm-line);
-}
-
-.tag-sm.tag-dismissible {
-  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs)
-    var(--spacing-md);
-}
-
-.tag-md {
-  padding: var(--spacing-xxs) var(--spacing-md);
-  font-size: var(--text-md-size);
-  line-height: var(--text-md-line);
-}
-
-.tag-md.tag-dismissible {
-  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs)
-    var(--spacing-md);
-}
-
-.tag-lg {
-  padding: var(--spacing-xs) var(--spacing-lg);
-  font-size: var(--text-md-size);
-  line-height: var(--text-md-line);
-}
-
-.tag-lg.tag-dismissible {
-  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs)
-    var(--spacing-lg);
-}
-
-/* Content Layout */
-.tag-content {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-
-/* Dot Variant - specific adjustments */
-.tag-dot .tag-content {
-  gap: var(--spacing-xs);
-}
-
-/* Avatar Variant - specific adjustments */
-.tag-avatar .tag-content {
-  gap: var(--spacing-sm);
-}
-
-.tag-sm.tag-dot {
-  padding-left: var(--spacing-sm);
-}
-
-.tag-sm.tag-dot.tag-dismissible {
-  padding-left: var(--spacing-sm);
-}
-
-.tag-md.tag-dot {
-  padding-left: var(--spacing-sm);
-}
-
-.tag-md.tag-dot.tag-dismissible {
-  padding-left: var(--spacing-sm);
-}
-
-.tag-lg.tag-dot {
-  padding-left: var(--spacing-md);
-}
-
-.tag-lg.tag-dot.tag-dismissible {
-  padding-left: var(--spacing-md);
-}
-
-/* Avatar Variant - specific adjustments */
-.tag-sm.tag-avatar {
-  padding-left: var(--spacing-xs);
-}
-
-.tag-sm.tag-avatar.tag-dismissible {
-  padding-left: var(--spacing-xs);
-}
-
-.tag-md.tag-avatar {
-  padding-left: var(--spacing-sm);
-}
-
-.tag-md.tag-avatar.tag-dismissible {
-  padding-left: var(--spacing-sm);
-}
-
-.tag-lg.tag-avatar {
-  padding-left: var(--spacing-sm);
-}
-
-.tag-lg.tag-avatar.tag-dismissible {
-  padding-left: var(--spacing-sm);
-}
-
-/* Label wrapper for tooltip positioning */
-.tag-label-wrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-}
-
-/* Label */
-.tag-label {
-  color: var(--color-neutral-700);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Badge Dot Component */
-.tag-content .tag-dot-component {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Avatar Component */
-.tag-content .tag-avatar-component {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Dismiss Button */
-.tag-dismiss {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: var(--spacing-xxs);
-  border-radius: var(--radius-xs);
-  transition: background-color 0.2s ease;
-  width: var(--spacing-xl);
-  height: var(--spacing-xl);
-  flex-shrink: 0;
-}
-
-.tag-lg .tag-dismiss {
-  padding: var(--spacing-xs);
-  width: var(--spacing-2xl);
-  height: var(--spacing-2xl);
-}
-
-.tag-dismiss:hover {
-  background-color: var(--color-neutral-100);
-}
-
-.tag-dismiss:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.tag-dismiss-icon {
-  font-size: var(--text-sm-size);
-  color: var(--color-neutral-500);
-  line-height: 1;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
-}
-
-.tag-lg .tag-dismiss-icon {
-  font-size: var(--text-md-size);
-}
-
-/* Disabled State */
-.tag-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Hover State for Dismissible Tags */
-.tag:hover {
-  border-color: var(--color-neutral-300);
-}
-
-.tag-disabled:hover {
-  border-color: var(--color-neutral-200);
-}

package/components/textarea.css

@@ -1,211 +0,0 @@
-/* ==========================================================================
-   TEXTAREA COMPONENT STYLES
-   ========================================================================== */
-
-.textarea-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  width: 400px;
-}
-
-.textarea-with-label {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-
-/* Label Section */
-.label-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.label {
-  font-family: var(--font-inter);
-  font-weight: 500;
-  font-size: var(--text-sm-size);
-  line-height: 1.4285714285714286;
-  color: var(--color-neutral-700);
-}
-
-.asterisk {
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-sm-size);
-  line-height: 1.4285714285714286;
-  color: var(--color-error-600);
-}
-
-/* Material Symbols Support */
-.material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-}
-
-/* Container */
-.textarea-container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-white);
-  border: 1px solid var(--color-neutral-300);
-  border-radius: 8px;
-  box-shadow: 0px 1px 2px rgba(64, 73, 104, 0.06);
-  transition: all 0.2s ease-in-out;
-  min-height: 128px;
-}
-
-.textarea-container:hover:not(.textarea-container-disabled):not(
-    .textarea-container-focused
-  ) {
-  border-color: var(--color-brand-500);
-}
-
-.textarea-container-focused {
-  border-color: var(--color-brand-500);
-  box-shadow: 0 0 0 1px var(--color-brand-500);
-}
-
-.textarea-container-error {
-  border-color: var(--color-error-300);
-}
-
-.textarea-container-error:hover:not(.textarea-container-focused) {
-  border-color: var(--color-error-500);
-}
-
-.textarea-container-error.textarea-container-focused {
-  border-color: var(--color-brand-500);
-  box-shadow: 0 0 0 1px var(--color-brand-500);
-}
-
-.textarea-container-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: var(--color-neutral-50);
-}
-
-/* Textarea */
-.textarea {
-  box-sizing: border-box;
-  padding: 12px 14px;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-md-size);
-  line-height: 1.5;
-  color: var(--color-neutral-900);
-  width: 100%;
-  min-height: 96px;
-  resize: none;
-  caret-color: var(--color-brand-500);
-  flex: 1;
-  box-shadow: none;
-}
-
-.textarea:focus {
-  outline: none;
-  border: none;
-  box-shadow: none;
-}
-
-.textarea::placeholder {
-  color: var(--color-neutral-400);
-}
-
-.textarea:disabled {
-  cursor: not-allowed;
-  color: var(--color-neutral-400);
-}
-
-/* Tags and text integrated container */
-.textarea-content {
-  width: 100%;
-}
-
-.tags-and-text-container {
-  padding: 12px 14px;
-  min-height: 96px;
-  width: 100%;
-}
-
-.text-and-tags-flow {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-xs);
-  height: 100%;
-}
-
-.tags-flow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
-  align-items: center;
-}
-
-.textarea-editable {
-  width: 100%;
-  min-height: 24px;
-  outline: none;
-  border: none;
-  background: transparent;
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-md-size);
-  line-height: 1.5;
-  color: var(--color-neutral-900);
-  caret-color: var(--color-brand-500);
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  box-shadow: none;
-}
-
-.textarea-editable:focus {
-  outline: none;
-  border: none;
-  box-shadow: none;
-}
-
-.textarea-editable:empty:before {
-  content: attr(data-placeholder);
-  color: var(--color-neutral-400);
-  pointer-events: none;
-}
-
-.textarea-editable:disabled {
-  cursor: not-allowed;
-  color: var(--color-neutral-400);
-}
-
-/* Hint Text */
-.hint-text {
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-sm-size);
-  line-height: 1.4285714285714286;
-  color: var(--color-neutral-600);
-}
-
-.hint-text.hint-error {
-  color: var(--color-error-600);
-}
-
-/* Autocomplete positioning */
-.autocomplete-wrapper {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .textarea {
-    font-size: 16px; /* Prevent zoom on iOS */
-  }
-}

package/components/toggle.css

@@ -1,298 +0,0 @@
-/* ==========================================================================
-   TOGGLE COMPONENT - Material You (Android 12) Design
-   Shared styles for all frameworks
-   ========================================================================== */
-
-/* Toggle Wrapper */
-.toggle-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0;
-}
-
-.toggle-with-text.toggle-size-sm {
-  gap: var(--spacing-md);
-}
-
-.toggle-with-text.toggle-size-md {
-  gap: var(--spacing-lg);
-}
-
-/* Toggle Switch Base - Material You specs */
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--radius-full);
-  cursor: pointer;
-  transition: background-color var(--animation-duration-fast) var(--animation-ease-smooth);
-  outline: none;
-  border: 2px solid transparent;
-  background: transparent;
-  overflow: visible;
-  padding: 0;
-}
-
-.toggle-switch:focus {
-  outline: none;
-}
-
-.toggle-switch.toggle-disabled {
-  cursor: not-allowed;
-  opacity: 0.38;
-}
-
-/* Toggle Switch Sizes - Material You dimensions */
-.toggle-switch.toggle-sm {
-  width: 40px;
-  height: 24px;
-}
-
-.toggle-switch.toggle-md {
-  width: 52px;
-  height: 32px;
-}
-
-/* Toggle Switch States - Unpressed (False) */
-.toggle-switch.toggle-unpressed {
-  background-color: var(--color-neutral-200);
-  border-color: transparent;
-}
-
-.toggle-switch.toggle-unpressed.toggle-hover {
-  background-color: var(--color-neutral-300);
-  border-color: transparent;
-}
-
-.toggle-switch.toggle-unpressed.toggle-focus {
-  background-color: var(--color-neutral-200);
-  border-color: transparent;
-}
-
-/* Focus ring for unpressed state - on the knob */
-.toggle-switch.toggle-unpressed.toggle-focus .toggle-button::after {
-  content: '';
-  position: absolute;
-  top: -6px;
-  left: -6px;
-  right: -6px;
-  bottom: -6px;
-  border-radius: var(--radius-full);
-  background: var(--color-neutral-600);
-  opacity: 0.12;
-  pointer-events: none;
-}
-
-.toggle-switch.toggle-unpressed.toggle-disabled {
-  background-color: var(--color-neutral-100);
-  border-color: transparent;
-}
-
-/* Toggle Switch States - Pressed (True) */
-.toggle-switch.toggle-pressed {
-  background-color: var(--color-brand-600);
-  border-color: var(--color-brand-600);
-}
-
-.toggle-switch.toggle-pressed.toggle-hover {
-  background-color: var(--color-brand-700);
-  border-color: var(--color-brand-700);
-}
-
-.toggle-switch.toggle-pressed.toggle-focus {
-  background-color: var(--color-brand-600);
-  border-color: var(--color-brand-600);
-}
-
-/* Focus ring for pressed state - on the knob */
-.toggle-switch.toggle-pressed.toggle-focus .toggle-button::after {
-  content: '';
-  position: absolute;
-  top: -6px;
-  left: -6px;
-  right: -6px;
-  bottom: -6px;
-  border-radius: var(--radius-full);
-  background: var(--color-brand-100);
-  opacity: 0.24;
-  pointer-events: none;
-}
-
-.toggle-switch.toggle-pressed.toggle-disabled {
-  background-color: var(--color-neutral-200);
-  border-color: var(--color-neutral-200);
-}
-
-.toggle-switch.toggle-pressed.toggle-disabled .toggle-button {
-  background-color: var(--color-neutral-100);
-}
-
-/* Toggle Button (Handle) - Material You specs */
-.toggle-button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: var(--radius-full);
-  background-color: var(--color-neutral-600);
-  transition: all var(--animation-duration-fast) var(--animation-ease-smooth);
-  /* box-shadow removed */
-  /* Position relative for ::after pseudo-element */
-  position: absolute;
-}
-
-/* Toggle Button States - Unpressed */
-.toggle-switch.toggle-unpressed .toggle-button {
-  background-color: var(--color-neutral-600);
-}
-
-.toggle-switch.toggle-sm.toggle-unpressed .toggle-button {
-  width: 16px;
-  height: 16px;
-  left: 4px;
-}
-
-.toggle-switch.toggle-md.toggle-unpressed .toggle-button {
-  width: 16px;
-  height: 16px;
-  left: 4px;
-}
-
-.toggle-switch.toggle-unpressed.toggle-hover .toggle-button {
-  background-color: var(--color-neutral-700);
-}
-
-/* Toggle Button States - Pressed */
-.toggle-switch.toggle-pressed .toggle-button {
-  background-color: var(--color-white);
-}
-
-.toggle-switch.toggle-sm.toggle-pressed .toggle-button {
-  width: 20px;
-  height: 20px;
-  left: calc(100% - 20px - 4px); /* 40px - 20px - 4px = 16px from left */
-}
-
-.toggle-switch.toggle-md.toggle-pressed .toggle-button {
-  width: 24px;
-  height: 24px;
-  left: calc(100% - 24px - 4px); /* 52px - 24px - 4px = 24px from left */
-}
-
-.toggle-switch.toggle-pressed.toggle-hover .toggle-button {
-  background-color: var(--color-white);
-}
-
-/* Toggle Button Sizes - Keep consistent for Material You */
-.toggle-button.toggle-button-sm,
-.toggle-button.toggle-button-md {
-  /* Sizes are controlled by state, not by size variant in Material You */
-}
-
-/* Toggle Button Disabled State */
-.toggle-switch.toggle-disabled .toggle-button {
-  background-color: var(--color-neutral-400);
-  box-shadow: none;
-}
-
-.toggle-switch.toggle-sm.toggle-unpressed.toggle-disabled .toggle-button {
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  background-color: var(--color-neutral-400);
-}
-
-.toggle-switch.toggle-md.toggle-unpressed.toggle-disabled .toggle-button {
-  width: 16px;
-  height: 16px;
-  left: 4px;
-  background-color: var(--color-neutral-400);
-}
-
-.toggle-switch.toggle-sm.toggle-pressed.toggle-disabled .toggle-button {
-  width: 20px;
-  height: 20px;
-  left: calc(100% - 20px - 4px);
-  background-color: var(--color-neutral-100);
-}
-
-.toggle-switch.toggle-md.toggle-pressed.toggle-disabled .toggle-button {
-  width: 24px;
-  height: 24px;
-  left: calc(100% - 24px - 4px);
-  background-color: var(--color-neutral-100);
-}
-
-/* Toggle Text Container */
-.toggle-text {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-/* Toggle Label */
-.toggle-label {
-  color: var(--color-neutral-700);
-  font-family: var(--font-inter);
-  font-weight: var(--weight-medium);
-  text-align: left;
-  margin: 0;
-  line-height: 1.5;
-}
-
-.toggle-label.toggle-label-sm {
-  font-size: var(--text-sm-size);
-  line-height: var(--text-sm-line);
-}
-
-.toggle-label.toggle-label-md {
-  font-size: var(--text-md-size);
-  line-height: var(--text-md-line);
-}
-
-/* Toggle Supporting Text */
-.toggle-supporting-text {
-  color: var(--color-neutral-600);
-  font-family: var(--font-inter);
-  font-weight: var(--weight-regular);
-  font-size: var(--text-sm-size);
-  line-height: var(--text-sm-line);
-  text-align: left;
-  margin: 0;
-  margin-top: var(--spacing-xxs);
-}
-
-/* ==========================================================================
-   ACCESSIBILITY & RESPONSIVE BEHAVIOR
-   ========================================================================== */
-
-/* Accessibility */
-@media (prefers-reduced-motion: reduce) {
-  .toggle-switch,
-  .toggle-button {
-    transition: none;
-  }
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-  .toggle-switch.toggle-unpressed {
-    border: 2px solid currentColor;
-  }
-
-  .toggle-switch.toggle-pressed {
-    border: 2px solid currentColor;
-  }
-}
-
-/* Focus visible for better keyboard navigation - on the knob */
-.toggle-switch:focus-visible .toggle-button::after {
-  content: '';
-  position: absolute;
-  top: -6px;
-  left: -6px;
-  right: -6px;
-  bottom: -6px;
-  border-radius: var(--radius-full);
-  background: currentColor;
-  opacity: 0.24;
-  pointer-events: none;
-}