@actabldesign/bellhop-styles 0.0.3

package/components/input-autocomplete.css

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

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

package/components/input-verification.css

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

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