@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/input-autocomplete.css

@@ -1,158 +0,0 @@
-/* Input Autocomplete Component Styles */
-
-/* Wrapper for the entire autocomplete component */
-.input-autocomplete-wrapper {
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  max-width: 100%;
-  flex-shrink: 0;
-  box-sizing: border-box;
-}
-
-/* Multi-select input with flowing content */
-.autocomplete-multi-input {
-  min-height: 36px;
-  height: auto;
-  padding: var(--spacing-xs) var(--spacing-md);
-  width: 100%;
-  box-sizing: border-box;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.autocomplete-multi-input.input-icon-leading {
-  padding-left: var(--spacing-lg);
-}
-
-/* Input wrapper for multi-select */
-.input-autocomplete-wrapper .input-wrapper {
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-  box-sizing: border-box;
-  flex-shrink: 0;
-}
-
-/* Content that flows: icon, tags, input, clear button */
-.input-content-flow {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: var(--spacing-xs);
-  min-height: 20px;
-  width: 100%;
-  overflow: hidden;
-}
-
-/* Leading icon in flow */
-.input-content-flow .leading-icon {
-  flex-shrink: 0;
-  color: var(--color-neutral-500);
-  font-size: 20px;
-  margin-right: var(--spacing-xs);
-}
-
-/* Tag container styling - compact size with dismiss icon */
-.input-content-flow .tag {
-  flex-shrink: 0;
-  max-width: 150px;
-  width: auto;
-  min-width: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-
-/* Tag content should be constrained */
-.input-content-flow .tag .tag-content {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
-/* Label wrapper should respect max width */
-.input-content-flow .tag .tag-label-wrapper {
-  max-width: 100px;
-  overflow: hidden;
-}
-
-/* Label should truncate properly */
-.input-content-flow .tag .tag-label {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Ensure dismiss button is always visible and compact */
-.input-content-flow .tag .tag-dismiss {
-  display: flex !important;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  margin: 0;
-}
-
-/* Inline input that flows after tags */
-.inline-input {
-  border: none;
-  outline: none;
-  background: transparent;
-  font-family: var(--font-inter);
-  font-size: var(--text-md-size);
-  line-height: var(--text-md-line);
-  color: var(--color-neutral-900);
-  flex: 1 1 60px;
-  min-width: 60px;
-  max-width: 100%;
-  padding: 2px 0;
-  width: 0;
-}
-
-/* Remove any focus styling from the inline input */
-.inline-input:focus {
-  outline: none;
-  border: none;
-  box-shadow: none;
-}
-
-.inline-input::placeholder {
-  color: var(--color-neutral-500);
-}
-
-.inline-input:disabled {
-  color: var(--color-neutral-400);
-  cursor: not-allowed;
-}
-
-/* Clear button in flow */
-.input-content-flow .btn-icon {
-  flex-shrink: 0;
-  margin-left: auto;
-  width: 24px;
-  height: 24px;
-}
-
-/* Ensure dropdown menu appears above other elements and positioned correctly */
-.input-autocomplete-wrapper .autocomplete-menu {
-  z-index: 1000;
-  top: calc(100% - 12px);
-}
-
-/* Responsive adjustments */
-@media (max-width: 640px) {
-  .selected-tag {
-    max-width: 120px;
-  }
-
-  .autocomplete-overlay {
-    padding-left: var(--spacing-md);
-    padding-right: var(--spacing-md);
-  }
-
-  .autocomplete-input.input-icon-leading ~ .autocomplete-overlay {
-    padding-left: calc(var(--spacing-md) + 18px + var(--spacing-xs));
-  }
-}

package/components/input-number.css

@@ -1,2 +0,0 @@
-/* Import base input styles */
-@import './input.css';

package/components/input-verification.css

@@ -1,137 +0,0 @@
-/* Input Verification Component Styles */
-
-.input-verification-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  width: fit-content;
-}
-
-.label-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-
-.label {
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-medium);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-700);
-}
-
-.asterisk {
-  color: var(--color-error-500);
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-medium);
-  line-height: var(--text-sm-line);
-}
-
-.input-verification-container {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.verification-input {
-  width: 64px;
-  height: 64px;
-  padding: 0;
-  border: 1px solid var(--color-neutral-300);
-  border-radius: var(--radius-lg);
-  background-color: var(--color-white);
-  font-size: 3rem;
-  font-weight: var(--weight-medium);
-  line-height: 1;
-  text-align: center;
-  color: var(--color-neutral-900);
-  transition: all 150ms ease;
-  outline: none;
-}
-
-/* Size variants */
-.verification-input.size-sm {
-  width: 64px;
-  height: 64px;
-  font-size: 3rem;
-  border-radius: var(--radius-lg);
-}
-
-.verification-input.size-md {
-  width: 80px;
-  height: 80px;
-  font-size: 3rem;
-  border-radius: var(--radius-lg);
-}
-
-.verification-input.size-lg {
-  width: 96px;
-  height: 96px;
-  font-size: 3.75rem;
-  border-radius: var(--radius-lg);
-}
-
-/* States */
-.verification-input:hover:not(:disabled) {
-  border-color: var(--color-neutral-400);
-}
-
-.verification-input:focus {
-  border-color: var(--color-brand-300);
-  box-shadow: 0 0 0 4px var(--color-brand-100);
-}
-
-.verification-input.error {
-  border-color: var(--color-error-300);
-}
-
-.verification-input.error:focus {
-  border-color: var(--color-error-300);
-  box-shadow: 0 0 0 4px var(--color-error-100);
-}
-
-.verification-input:disabled {
-  background-color: var(--color-neutral-50);
-  border-color: var(--color-neutral-300);
-  color: var(--color-neutral-400);
-  cursor: not-allowed;
-}
-
-.separator {
-  font-size: 1.5rem;
-  font-weight: var(--weight-medium);
-  color: var(--color-neutral-400);
-  margin: 0 var(--spacing-xs);
-  line-height: 1;
-}
-
-.separator.size-sm {
-  font-size: 1.5rem;
-}
-
-.separator.size-md {
-  font-size: 1.5rem;
-}
-
-.separator.size-lg {
-  font-size: 1.875rem;
-}
-
-.hint-text {
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-regular);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-600);
-  margin-top: var(--spacing-xs);
-}
-
-.hint-text.error {
-  color: var(--color-error-600);
-}
-
-.verification-input::placeholder {
-  color: var(--color-neutral-400);
-  opacity: 1;
-  font-size: inherit;
-  font-weight: var(--weight-regular);
-}

package/components/input.css

@@ -1,374 +0,0 @@
-/* ==========================================================================
-   BELLHOP INPUT COMPONENTS - CENTRALIZED STYLES
-   ========================================================================== */
-
-/* Base Input Wrapper */
-.input-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  width: 100%;
-  max-width: 100%;
-}
-
-.input-with-label {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  width: 100%;
-}
-
-/* Label Styling */
-.label-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-}
-
-.label-wrapper .icon-with-tooltip {
-  margin-left: auto;
-}
-
-.label {
-  font-family: var(--font-inter);
-  font-weight: 500;
-  font-size: var(--text-sm-size);
-  line-height: 1.43;
-  color: var(--color-neutral-700);
-}
-
-.asterisk {
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-sm-size);
-  line-height: 1.43;
-  color: var(--color-error-600);
-}
-
-/* Input Field Container */
-.input-field {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  padding: var(--spacing-md);
-  height: 36px;
-  width: 100%;
-  background: var(--color-white);
-  border: 1px solid var(--color-neutral-300);
-  border-radius: var(--spacing-md);
-  transition: all 0.2s ease-in-out;
-  cursor: text;
-  box-shadow: 0 0 0 0px transparent;
-  overflow: hidden;
-  position: relative;
-}
-
-.input-field.input-icon-leading {
-  padding: var(--spacing-md) var(--spacing-lg);
-}
-
-/* Input Content */
-.input-content {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  flex: 1;
-  height: 100%;
-  min-width: 0;
-  max-width: 100%;
-}
-
-/* Ensure buttons within inputs are properly aligned */
-.input-content app-button {
-  align-self: center;
-  display: flex;
-  flex-shrink: 0;
-}
-
-.input-content app-button .btn {
-  align-self: center;
-}
-
-/* Leading Icon */
-.leading-icon {
-  font-size: var(--text-xl-size);
-  color: var(--color-neutral-500);
-  user-select: none;
-  flex-shrink: 0;
-  cursor: default;
-  pointer-events: auto;
-  transition: color 0.2s ease-in-out;
-}
-
-/* Leading icon when input is focused */
-.input-field.input-focused .leading-icon {
-  color: var(--color-brand-600);
-}
-
-/* Trailing Icon Styling */
-.trailing-icon {
-  font-size: var(--text-xl-size);
-  color: var(--color-neutral-500);
-  user-select: none;
-  flex-shrink: 0;
-  cursor: default;
-  pointer-events: auto;
-  transition: color 0.2s ease-in-out;
-}
-
-/* Trailing icon when input is focused */
-.input-field.input-focused .trailing-icon {
-  color: var(--color-brand-600);
-}
-
-/* Input Element */
-.input-element {
-  flex: 1;
-  height: 100%;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-sm-size);
-  line-height: 1.43;
-  color: var(--color-neutral-800);
-  min-width: 60px;
-  padding-left: var(--spacing-xs);
-  box-shadow: none;
-}
-
-.input-element:focus {
-  outline: none;
-  border: none;
-  box-shadow: none;
-}
-
-.input-element::placeholder {
-  color: var(--color-neutral-500);
-}
-
-.input-element:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-/* Text States */
-.text-placeholder {
-  color: var(--color-neutral-500);
-}
-
-.text-filled {
-  color: var(--color-neutral-800);
-}
-
-/* Help Icon */
-.help-icon {
-  font-size: var(--text-xl-size);
-  color: var(--color-neutral-400);
-  cursor: pointer;
-  user-select: none;
-  flex-shrink: 0;
-  transition: color 0.2s ease-in-out;
-  pointer-events: auto;
-}
-
-.help-icon:hover {
-  color: var(--color-neutral-500);
-}
-
-/* Hint Text */
-.hint-text {
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-sm-size);
-  line-height: 1.43;
-  color: var(--color-neutral-600);
-}
-
-/* Input States */
-.input-field.input-hover {
-  border-color: var(--color-brand-500);
-}
-
-.input-field.input-focused {
-  border-color: var(--color-brand-500);
-  box-shadow: 0 0 0 1px var(--color-brand-500);
-}
-
-.input-field.input-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: var(--color-neutral-50);
-}
-
-.input-field.input-error {
-  border-color: var(--color-error-300);
-}
-
-.input-field.input-error.input-hover {
-  border-color: var(--color-error-500);
-}
-
-.input-field.input-error.input-focused {
-  border-color: var(--color-brand-600);
-}
-
-.hint-text.hint-error {
-  color: var(--color-error-600);
-}
-
-/* Material Symbols Support */
-.material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-}
-
-/* Icon Container */
-.icon-with-tooltip {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* Prefix and Suffix */
-.prefix-text,
-.suffix-text {
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-sm-size);
-  line-height: 1.43;
-  color: var(--color-neutral-600);
-  user-select: none;
-  flex-shrink: 0;
-}
-
-/* Password Visibility Toggle */
-.visibility-toggle {
-  font-size: var(--text-xl-size);
-  color: var(--color-neutral-400);
-  cursor: pointer;
-  user-select: none;
-  flex-shrink: 0;
-  transition: color 0.2s ease-in-out;
-  pointer-events: auto;
-}
-
-.visibility-toggle:hover {
-  color: var(--color-neutral-600);
-}
-
-/* Hide default number input spinners */
-.input-element::-webkit-outer-spin-button,
-.input-element::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.input-element[type='number'] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-/* Tag Input Specific Styles */
-.tags-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
-  align-items: center;
-  flex: 1;
-}
-
-/* Note: Use the dedicated Tag component instead of custom tag styles */
-
-/* Verification Input Specific Styles */
-.verification-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  width: 100%;
-}
-
-.verification-with-label {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  width: 100%;
-}
-
-.verification-container {
-  display: flex;
-  gap: var(--spacing-sm);
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.verification-digit {
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-white);
-  border: 1px solid var(--color-neutral-300);
-  border-radius: var(--spacing-sm);
-  font-family: var(--font-inter);
-  font-weight: 500;
-  font-size: var(--text-lg-size);
-  line-height: 1.33;
-  color: var(--color-neutral-800);
-  text-align: center;
-  transition: all 0.2s ease-in-out;
-}
-
-.verification-digit:focus {
-  border-color: var(--color-brand-500);
-  box-shadow: 0 0 0 1px var(--color-brand-500);
-  outline: none;
-}
-
-.verification-digit.filled {
-  background: var(--color-brand-50);
-  border-color: var(--color-brand-300);
-}
-
-.verification-container .separator {
-  font-family: var(--font-inter);
-  font-weight: 400;
-  font-size: var(--text-lg-size);
-  color: var(--color-neutral-500);
-  margin: 0 var(--spacing-xs);
-}
-
-/* Autocomplete Input Container */
-.autocomplete-container {
-  position: relative;
-  width: 100%;
-}
-
-/* Selected Tags Container - Ensure inline layout */
-.selected-tags {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: var(--spacing-xs);
-  align-items: center;
-  flex-shrink: 1;
-  min-width: 0;
-}
-
-/* Responsive Adjustments */
-@media (max-width: 768px) {
-  .input-wrapper {
-    width: 100%;
-  }
-
-  .verification-inputs {
-    gap: var(--spacing-xs);
-  }
-
-  .verification-digit {
-    width: 40px;
-    height: 40px;
-    font-size: var(--text-base-size);
-  }
-}