@bikdotai/bik-widgets 1.0.0 → 1.0.2

package/src/components/inputComponents/DatePicker.module.css

@@ -1,565 +0,0 @@
-/*        Variables          */
-
-.bik-datePicker__container {
-  /* Color and style variables */
-  --bik-datePicker-border-color: #e0e0e0; /* Default border color */
-  --bik-datePicker-focus-color: #3b82f6; /* Border color on focus */
-  --bik-datePicker-error-color: #ef4444; /* Error state color */
-  --bik-datePicker-text-color: #1f2937; /* Main text color */
-  --bik-datePicker-text-light: #6b7280; /* Light text color (labels, icons) */
-  --bik-datePicker-text-muted: #9ca3af; /* Muted/disabled text color */
-  --bik-datePicker-background: rgba(255, 255, 255, 0.3); /* Input background */
-  --bik-datePicker-border-radius: 8px; /* Border radius for rounded corners */
-  --bik-datePicker-transition: 0.2s ease; /* Transition for interactive states */
-
-  /* Icon and label sizing */
-  --bik-datePicker-icon-size: 20px;
-  --bik-datePicker-icon-offset: 16px;
-  --bik-datePicker-label-offset: 8px;
-
-  /* Heights and paddings for desktop, mobile, and preview modes */
-  --bik-datePicker-height-desktop: 56px;
-  --bik-datePicker-height-mobile: 48px;
-  --bik-datePicker-height-preview: 20px;
-  --bik-datePicker-padding-desktop: 16px 4px 2px 19px;
-  --bik-datePicker-padding-mobile: 16px 4px 4px 14px;
-  --bik-datePicker-padding-preview: 2px 2px 2px 4px;
-  --bik-datePicker-label-padding-desktop: 20px;
-  --bik-datePicker-label-padding-mobile: 18px;
-  --bik-datePicker-label-padding-preview: 12px;
-
-  /* Preview mode font/icon sizes */
-  --bik-datePicker-preview-input-font: 8px;
-  --bik-datePicker-preview-label-font: 7px;
-  --bik-datePicker-preview-label-font-floated: 6px;
-  --bik-datePicker-preview-icon-size: 10px;
-  --bik-datePicker-preview-icon-svg: 8px;
-  --bik-datePicker-preview-error-font: 6px;
-  --bik-datePicker-preview-error-icon: 8px;
-  --bik-datePicker-preview-input-font-mobile: 7px;
-  --bik-datePicker-preview-label-font-mobile: 6px;
-  --bik-datePicker-preview-label-font-floated-mobile: 5px;
-  --bik-datePicker-preview-icon-size-mobile: 8px;
-  --bik-datePicker-preview-icon-svg-mobile: 6px;
-  --bik-datePicker-preview-error-font-mobile: 5px;
-  --bik-datePicker-preview-error-icon-mobile: 6px;
-
-  /* Container layout */
-  position: relative;
-  width: 100%;
-  margin: 8px 0;
-}
-
-/*     Input Wrapper         */
-.bik-datePicker__inputWrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  background: var(--bik-datePicker-background);
-  border: 1px solid var(--bik-datePicker-border-color);
-  border-radius: var(--bik-datePicker-border-radius);
-  transition: all var(--bik-datePicker-transition);
-  overflow: hidden;
-  height: var(--bik-datePicker-height-desktop);
-}
-
-/* Subtle gradient overlay for visual depth */
-.bik-datePicker__inputWrapper::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-/* Hover state for input wrapper */
-.bik-datePicker__inputWrapper:hover:not([data-disabled]) {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-}
-
-/* Focused state for input wrapper */
-.bik-datePicker__inputWrapper[data-focused] {
-  border-color: var(--bik-datePicker-focus-color);
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
-}
-
-/* Error state for input wrapper */
-.bik-datePicker__inputWrapper[data-error] {
-  border-color: var(--bik-datePicker-error-color);
-}
-
-/* Disabled state for input wrapper */
-.bik-datePicker__inputWrapper[data-disabled] {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-/*        Input Field        */
-.bik-datePicker__input {
-  padding: var(--bik-datePicker-padding-desktop) !important;
-  border: none;
-  background: transparent !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  color: var(--bik-datePicker-text-color) !important;
-  width: 100%;
-  outline: none;
-  appearance: none;
-  transition: color 0.15s ease;
-  cursor: pointer;
-  box-shadow: none !important;
-}
-
-/* Disabled input field */
-.bik-datePicker__input:disabled {
-  color: var(--bik-datePicker-text-muted);
-  cursor: not-allowed;
-}
-
-/* Placeholder text style */
-.bik-datePicker__input::placeholder {
-  color: var(--bik-datePicker-text-muted);
-  opacity: 1;
-}
-
-/* Force light color scheme for date/datetime-local inputs */
-.bik-datePicker__input[type='date'],
-.bik-datePicker__input[type='datetime-local'] {
-  color-scheme: light;
-}
-
-/* Minimum width for date input */
-.bik-datePicker__input[type='date'] {
-  min-width: var(--bik-datePicker-height-desktop);
-}
-
-/* Minimum width for datetime-local input */
-.bik-datePicker__input[type='datetime-local'] {
-  min-width: calc(var(--bik-datePicker-height-desktop) * 3);
-}
-
-/* Invalid state for date/datetime-local input */
-.bik-datePicker__input[type='date']:invalid,
-.bik-datePicker__input[type='datetime-local']:invalid {
-  color: var(--bik-datePicker-text-muted);
-}
-
-/* Focused + invalid state for date/datetime-local input */
-.bik-datePicker__input[type='date']:focus:invalid,
-.bik-datePicker__input[type='datetime-local']:focus:invalid {
-  color: var(--bik-datePicker-text-color);
-}
-
-/* Hide default calendar icon, allow custom icon click-through */
-.bik-datePicker__input::-webkit-calendar-picker-indicator {
-  opacity: 0;
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  z-index: 3;
-}
-
-/* Remove default padding from date/datetime fields */
-.bik-datePicker__input::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
-}
-
-/* Style for all date/datetime field parts (webkit) */
-.bik-datePicker__input::-webkit-datetime-edit-text,
-.bik-datePicker__input::-webkit-datetime-edit-month-field,
-.bik-datePicker__input::-webkit-datetime-edit-day-field,
-.bik-datePicker__input::-webkit-datetime-edit-year-field,
-.bik-datePicker__input::-webkit-datetime-edit-hour-field,
-.bik-datePicker__input::-webkit-datetime-edit-minute-field {
-  color: var(--bik-datePicker-text-color);
-  background: transparent;
-  font-size: 12px !important;
-}
-
-/*         Label             */
-.bik-datePicker__label {
-  position: absolute;
-  left: var(--bik-datePicker-label-padding-desktop);
-  top: 50%;
-  transform: translateY(-50%);
-  font-weight: 400;
-  font-size: 14px;
-  color: var(--bik-datePicker-text-light);
-  background: transparent;
-  max-width: calc(100% - 80px);
-  transition: all var(--bik-datePicker-transition);
-}
-
-/* Label floating, focus, and filled states */
-.bik-datePicker__label[data-floated],
-.bik-datePicker__input:focus + .bik-datePicker__label,
-.bik-datePicker__input:not(:placeholder-shown) + .bik-datePicker__label,
-.bik-datePicker__label--floated {
-  top: var(--bik-datePicker-label-offset);
-  transform: none;
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--bik-datePicker-text-muted);
-}
-
-/* Error state for label */
-.bik-datePicker__label[data-error],
-.bik-datePicker__label--error {
-  color: var(--bik-datePicker-error-color);
-}
-
-/* Disabled state for label */
-.bik-datePicker__label[data-disabled],
-.bik-datePicker__label--disabled {
-  color: var(--bik-datePicker-text-muted);
-}
-
-/* Required asterisk style */
-.bik-datePicker__required {
-  color: var(--bik-datePicker-error-color);
-  font-weight: 500;
-  margin-left: 2px;
-  font-size: 14px;
-}
-
-/*         Icon              */
-
-.bik-datePicker__icon {
-  position: absolute;
-  right: var(--bik-datePicker-icon-offset);
-  top: 50%;
-  transform: translateY(-50%);
-  width: var(--bik-datePicker-icon-size);
-  height: var(--bik-datePicker-icon-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--bik-datePicker-text-light);
-  user-select: none;
-  z-index: 4;
-  pointer-events: auto;
-}
-
-/*         Error             */
-
-.bik-datePicker__error {
-  color: var(--bik-datePicker-error-color);
-  font-size: 10px;
-  display: flex;
-  gap: 4px;
-  margin: 4px 0 0 6px;
-  align-items: center;
-  animation: bik-slideInError 0.2s ease-out;
-}
-
-.bik-datePicker__errorIcon {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-  color: var(--bik-datePicker-error-color);
-}
-
-/* Error message slide-in animation */
-@keyframes bik-slideInError {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/*  Accessibility & Prefs    */
-
-/* Reduce motion for accessibility */
-@media (prefers-reduced-motion: reduce) {
-  .bik-datePicker__container * {
-    transition-duration: 0.01ms !important;
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-  }
-}
-
-/* High contrast mode for accessibility */
-@media (prefers-contrast: high) {
-  .bik-datePicker__inputWrapper {
-    border-width: 2px;
-    border-color: CanvasText;
-  }
-
-  .bik-datePicker__inputWrapper[data-focused] {
-    border-color: Highlight;
-    outline: 2px solid Highlight;
-    outline-offset: 2px;
-  }
-
-  .bik-datePicker__inputWrapper[data-error] {
-    border-color: #cc0000;
-    outline: 2px solid #cc0000;
-    outline-offset: 2px;
-  }
-
-  .bik-datePicker__label,
-  .bik-datePicker__input {
-    color: CanvasText;
-    font-weight: 400;
-  }
-}
-
-/*      Preview Mode         */
-
-.bik-datePicker__container[data-mode='preview'] {
-  /* Preview mode variable overrides for compact display */
-  --bik-current-input-font: var(--bik-datePicker-preview-input-font);
-  --bik-current-label-font: var(--bik-datePicker-preview-label-font);
-  --bik-current-label-font-floated: var(
-    --bik-datePicker-preview-label-font-floated
-  );
-  --bik-current-icon-size: var(--bik-datePicker-preview-icon-size);
-  --bik-current-icon-svg: var(--bik-datePicker-preview-icon-svg);
-  --bik-current-error-font: var(--bik-datePicker-preview-error-font);
-  --bik-current-error-icon: var(--bik-datePicker-preview-error-icon);
-}
-
-/* Preview mode input wrapper */
-.bik-datePicker__container[data-mode='preview'] .bik-datePicker__inputWrapper {
-  height: var(--bik-datePicker-height-preview);
-  box-shadow: none;
-}
-
-/* Preview mode input field */
-.bik-datePicker__container[data-mode='preview'] .bik-datePicker__input {
-  padding: var(--bik-datePicker-padding-preview);
-  font-size: var(--bik-current-input-font);
-  line-height: 1.2;
-  height: var(--bik-datePicker-height-preview);
-}
-
-/* Preview mode: min-height for date/datetime-local */
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input[type='date'],
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input[type='datetime-local'] {
-  height: var(--bik-datePicker-height-preview);
-}
-
-/* Preview mode: min-width for date */
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input[type='date'] {
-  min-width: var(--bik-datePicker-height-preview);
-}
-
-/* Preview mode: min-width and width for datetime-local */
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input[type='datetime-local'] {
-  min-width: var(--bik-datePicker-height-preview);
-  width: var(--bik-datePicker-height-preview);
-}
-
-/* Preview mode label style */
-.bik-datePicker__container[data-mode='preview'] .bik-datePicker__label {
-  left: var(--bik-datePicker-label-padding-preview);
-  font-size: var(--bik-current-label-font);
-  line-height: 1.2;
-  padding: 0 4px;
-  margin-left: -4px;
-  top: 40%;
-  max-width: calc(100% - 54px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  pointer-events: none;
-  transition: all var(--bik-datePicker-transition);
-  z-index: 2;
-}
-
-/* Preview mode required asterisk */
-.bik-datePicker__container[data-mode='preview'] .bik-datePicker__required {
-  font-size: var(--bik-current-label-font-floated);
-}
-
-/* Preview mode: floated label */
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__label[data-floated],
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input:focus
-  + .bik-datePicker__label,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input:not(:placeholder-shown)
-  + .bik-datePicker__label {
-  top: 6px;
-  font-size: var(--bik-current-label-font-floated);
-  padding: 0 2px;
-  margin-left: -8px;
-}
-
-/* Preview mode icon style */
-.bik-datePicker__container[data-mode='preview'] .bik-datePicker__icon {
-  width: var(--bik-current-icon-size);
-  height: var(--bik-current-icon-size);
-  right: 4px;
-}
-
-/* Preview mode icon SVG size */
-.bik-datePicker__container[data-mode='preview'] .bik-datePicker__icon svg {
-  width: var(--bik-current-icon-svg);
-  height: var(--bik-current-icon-svg);
-}
-
-/* Preview mode error message */
-.bik-datePicker__container[data-mode='preview'] .bik-datePicker__error {
-  font-size: var(--bik-current-error-font);
-  margin: 2px 0 0 2px;
-}
-
-/* Preview mode error icon */
-.bik-datePicker__container[data-mode='preview'] .bik-datePicker__errorIcon {
-  width: var(--bik-current-error-icon);
-  height: var(--bik-current-error-icon);
-}
-
-/* Hide browser default date/time elements in preview mode */
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input::-webkit-datetime-edit-fields-wrapper,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input::-webkit-datetime-edit-text,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input::-webkit-datetime-edit-month-field,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input::-webkit-datetime-edit-day-field,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input::-webkit-datetime-edit-year-field,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input::-webkit-datetime-edit-hour-field,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input::-webkit-datetime-edit-minute-field {
-  opacity: 0;
-  color: transparent;
-  display: none;
-}
-
-/* Hide text for invalid/placeholder in preview mode */
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input[type='date']:invalid,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input[type='datetime-local']:invalid,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input[type='date']:placeholder-shown,
-.bik-datePicker__container[data-mode='preview']
-  .bik-datePicker__input[type='datetime-local']:placeholder-shown {
-  color: transparent;
-}
-
-/*   Mobile Responsiveness   */
-
-@media (max-width: 768px) {
-  /* Container margin for mobile */
-  .bik-datePicker__container {
-    margin-bottom: 20px;
-  }
-
-  /* Input wrapper min-height for mobile */
-  .bik-datePicker__inputWrapper {
-    min-height: var(--bik-datePicker-height-mobile);
-  }
-
-  /* Input field padding and min-height for mobile */
-  .bik-datePicker__input {
-    padding: var(--bik-datePicker-padding-mobile) !important;
-    min-height: var(--bik-datePicker-height-mobile) !important;
-  }
-
-  /* Date/datetime-local min-heights for mobile */
-  .bik-datePicker__input[type='date'],
-  .bik-datePicker__input[type='datetime-local'] {
-    min-height: var(--bik-datePicker-height-mobile);
-  }
-
-  /* Date min-width for mobile */
-  .bik-datePicker__input[type='date'] {
-    min-width: var(--bik-datePicker-height-mobile);
-  }
-
-  /* Datetime-local min-width for mobile */
-  .bik-datePicker__input[type='datetime-local'] {
-    min-width: calc(var(--bik-datePicker-height-mobile) * 3);
-  }
-
-  /* Label left padding for mobile */
-  .bik-datePicker__label {
-    left: var(--bik-datePicker-label-padding-mobile);
-  }
-
-  /* Preview mode mobile variable overrides */
-  .bik-datePicker__container[data-mode='preview'] {
-    --bik-current-input-font: var(--bik-datePicker-preview-input-font-mobile);
-    --bik-current-label-font: var(--bik-datePicker-preview-label-font-mobile);
-    --bik-current-label-font-floated: var(
-      --bik-datePicker-preview-label-font-floated-mobile
-    );
-    --bik-current-icon-size: var(--bik-datePicker-preview-icon-size-mobile);
-    --bik-current-icon-svg: var(--bik-datePicker-preview-icon-svg-mobile);
-    --bik-current-error-font: var(--bik-datePicker-preview-error-font-mobile);
-    --bik-current-error-icon: var(--bik-datePicker-preview-error-icon-mobile);
-  }
-
-  /* Preview mode label for mobile */
-  .bik-datePicker__container[data-mode='preview'] .bik-datePicker__label {
-    left: var(--bik-datePicker-label-padding-preview);
-    padding: 0 3px;
-    margin-left: -3px;
-  }
-
-  /* Preview mode floated label for mobile */
-  .bik-datePicker__container[data-mode='preview']
-    .bik-datePicker__label[data-floated],
-  .bik-datePicker__container[data-mode='preview']
-    .bik-datePicker__input:focus
-    + .bik-datePicker__label,
-  .bik-datePicker__container[data-mode='preview']
-    .bik-datePicker__input:not(:placeholder-shown)
-    + .bik-datePicker__label {
-    top: 1px;
-    padding: 0 2px;
-    margin-left: -2px;
-  }
-
-  /* Preview mode icon for mobile */
-  .bik-datePicker__container[data-mode='preview'] .bik-datePicker__icon {
-    right: 3px;
-  }
-
-  /* Preview mode error margin for mobile */
-  .bik-datePicker__container[data-mode='preview'] .bik-datePicker__error {
-    margin: 1px 0 0 1px;
-  }
-}
-
-/*  Browser Compatibility    */
-
-/* Modern browser support for z-index and text alignment */
-@supports (selector(:where(*))) {
-  .bik-datePicker__input[type='date'],
-  .bik-datePicker__input[type='datetime-local'] {
-    position: relative;
-    z-index: 1;
-  }
-
-  .bik-datePicker__input[type='date']::-webkit-date-and-time-value,
-  .bik-datePicker__input[type='datetime-local']::-webkit-date-and-time-value {
-    text-align: left;
-  }
-}
-
-/* Firefox support for transparent background */
-@supports (-moz-appearance: none) {
-  .bik-datePicker__input[type='date'],
-  .bik-datePicker__input[type='datetime-local'] {
-    background: transparent;
-  }
-}