@bikdotai/bik-widgets 1.0.0 → 1.0.2

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

@@ -1,401 +0,0 @@
-.bik-inputBox__container {
-  /* Colors */
-  --bik-inputBox-border-color: #e0e0e0;
-  --bik-inputBox-bg-color: rgba(255, 255, 255, 0.3);
-  --bik-inputBox-text-color: #1f2937;
-  --bik-inputBox-label-color: #6b7280;
-  --bik-inputBox-placeholder-color: #9ca3af;
-  --bik-inputBox-disabled-color: #9ca3af;
-  --bik-inputBox-error-color: #ef4444;
-  --bik-inputBox-error-border-color: #b92321;
-  --bik-inputBox-warning-color: #f59e0b;
-
-  /* Layout & Spacing */
-  --bik-inputBox-border-radius: 8px;
-  --bik-inputBox-min-height-desktop: 56px;
-  --bik-inputBox-min-height-mobile: 48px;
-  --bik-inputBox-min-height-preview: 20px;
-
-  /* Padding */
-  --bik-inputBox-padding-desktop: 24px 18px 12px;
-  --bik-inputBox-padding-mobile: 16px 18px 2px 16px;
-  --bik-inputBox-padding-preview: 2px 4px;
-  --bik-inputBox-label-padding-desktop: 18px;
-  --bik-inputBox-label-padding-mobile: 14px;
-  --bik-inputBox-label-padding-preview: 2px;
-
-  /* Animations & Transitions */
-  --bik-inputBox-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --bik-inputBox-transition-fast: all 0.2s ease;
-
-  /* Shadows */
-  --bik-inputBox-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.03);
-  --bik-inputBox-shadow-focus: 0 1px 3px
-    color-mix(
-      in srgb,
-      var(--bik-focus-color, var(--bik-inputBox-border-color)) 6%,
-      transparent
-    );
-  --bik-inputBox-shadow-error: 0 1px 3px rgba(185, 35, 33, 0.06);
-  --bik-inputBox-shadow-error-hover: 0 1px 4px rgba(185, 35, 33, 0.08);
-
-  position: relative;
-  margin: 0;
-  width: 100%;
-}
-
-.bik-inputBox__inputWrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  background: var(--bik-inputBox-bg-color);
-  border: 1px solid var(--bik-inputBox-border-color);
-  border-radius: var(--bik-inputBox-border-radius);
-  overflow: hidden;
-  transition: var(--bik-inputBox-transition);
-  min-height: var(--bik-inputBox-min-height-desktop);
-}
-
-.bik-inputBox__inputWrapper::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-.bik-inputBox__inputWrapper:hover {
-  box-shadow: var(--bik-inputBox-shadow-hover);
-}
-
-.bik-inputBox__inputWrapper--focused {
-  box-shadow: var(--bik-inputBox-shadow-focus);
-}
-
-.bik-inputBox__inputWrapper--error {
-  border-color: var(--bik-inputBox-error-border-color);
-  box-shadow: var(--bik-inputBox-shadow-error);
-}
-
-.bik-inputBox__inputWrapper--error:hover,
-.bik-inputBox__inputWrapper--error.bik-inputBox__inputWrapper--focused {
-  box-shadow: var(--bik-inputBox-shadow-error-hover);
-}
-
-.bik-inputBox__inputWrapper--disabled,
-.bik-inputBox__inputWrapper--disabled:hover {
-  background: var(--bik-inputBox-bg-color);
-  border-color: var(--bik-inputBox-border-color);
-  box-shadow: none;
-  transform: none;
-}
-
-.bik-inputBox__input {
-  padding: var(--bik-inputBox-padding-desktop) !important;
-  margin: 0 !important;
-  border: none !important;
-  background: transparent !important;
-  font-weight: 400 !important;
-  font-size: 14px !important;
-  line-height: 1.5 !important;
-  color: var(--bik-inputBox-text-color);
-  width: 100%;
-  box-sizing: border-box;
-  outline: none;
-  transition: var(--bik-inputBox-transition-fast);
-  box-shadow: none !important;
-}
-
-.bik-inputBox__input[type='number'] {
-  appearance: textfield;
-}
-
-.bik-inputBox__input[type='number']::-webkit-outer-spin-button,
-.bik-inputBox__input[type='number']::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-
-.bik-inputBox__input:is(textarea) {
-  min-height: 56px;
-}
-
-.bik-inputBox__input::placeholder,
-.bik-inputBox__input:focus::placeholder {
-  color: var(--bik-inputBox-placeholder-color);
-  opacity: 1;
-}
-
-.bik-inputBox__input:disabled {
-  color: var(--bik-inputBox-disabled-color);
-  cursor: not-allowed;
-}
-
-.bik-inputBox__label {
-  position: absolute;
-  left: var(--bik-inputBox-label-padding-desktop);
-  top: 50%;
-  transform: translateY(-50%);
-  font-weight: 400;
-  font-size: 14px;
-  color: var(--bik-inputBox-label-color);
-  background: transparent;
-  padding: 0 8px;
-  margin-left: -8px;
-  max-width: calc(100% - 40px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  pointer-events: none;
-  transition: var(--bik-inputBox-transition);
-  z-index: 2;
-}
-
-.bik-inputBox__label--multiline {
-  top: 24px;
-  transform: translateY(0);
-}
-
-.bik-inputBox__label--floated,
-.bik-inputBox__input:focus + .bik-inputBox__label,
-.bik-inputBox__input:not(:placeholder-shown) + .bik-inputBox__label,
-.bik-inputBox__label--hasValue {
-  top: 8px;
-  transform: translateY(0);
-  font-size: 11px;
-  font-weight: 400;
-  background: transparent;
-}
-
-.bik-inputBox__label--floated {
-  font-weight: 500;
-  color: var(--bik-inputBox-placeholder-color);
-}
-
-.bik-inputBox__input:focus + .bik-inputBox__label {
-  color: var(--bik-inputBox-placeholder-color);
-}
-
-.bik-inputBox__label--error {
-  color: var(--bik-inputBox-error-color) !important;
-}
-
-.bik-inputBox__label--disabled {
-  color: var(--bik-inputBox-disabled-color) !important;
-  background: transparent;
-}
-
-.bik-inputBox__required {
-  color: var(--bik-inputBox-error-color);
-  margin-left: 2px;
-  font-weight: 500;
-}
-
-.bik-inputBox__error {
-  color: var(--bik-inputBox-error-color);
-  font-weight: 400;
-  font-size: 11px;
-  margin: 4px 0 0 6px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  animation: bik-slideInError 0.3s ease-out;
-}
-
-.bik-inputBox__errorIcon {
-  width: 12px;
-  height: 12px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.bik-inputBox__characterCount {
-  position: absolute;
-  right: 20px;
-  top: 8px;
-  font-weight: 400;
-  font-size: 11px;
-  color: var(--bik-inputBox-placeholder-color);
-  background: transparent;
-  opacity: 0;
-  transform: translateY(8px);
-  transition: var(--bik-inputBox-transition);
-  pointer-events: none;
-  z-index: 3;
-  padding: 0 4px;
-}
-
-.bik-inputBox__characterCount--visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.bik-inputBox__characterCount--warning {
-  color: var(--bik-inputBox-warning-color);
-}
-
-.bik-inputBox__characterCount--error {
-  color: var(--bik-inputBox-error-color);
-}
-
-@keyframes bik-slideInError {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bik-inputBox__container *,
-  .bik-inputBox__container *::before,
-  .bik-inputBox__container *::after {
-    transition: none !important;
-    animation: none !important;
-  }
-}
-
-@media (prefers-contrast: high) {
-  .bik-inputBox__inputWrapper {
-    border-width: 3px;
-  }
-
-  .bik-inputBox__label {
-    font-weight: 600;
-  }
-}
-
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__inputWrapper {
-  min-height: var(--bik-inputBox-min-height-preview);
-  box-shadow: none;
-}
-
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__input {
-  padding: var(--bik-inputBox-padding-preview) !important;
-  font-size: 8px;
-  line-height: 1.2;
-}
-
-.bik-inputBox__container[data-mode='preview']
-  .bik-inputBox__input:is(textarea) {
-  min-height: var(--bik-inputBox-min-height-preview);
-  max-height: 25px;
-  resize: none;
-  padding: 2px 4px;
-  line-height: 1.1;
-}
-
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__label--multiline {
-  top: 9px;
-}
-
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__label {
-  left: 4px;
-  font-size: 7px;
-  line-height: 1.2;
-  max-width: calc(100% - 2px);
-}
-
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__label--floated,
-.bik-inputBox__container[data-mode='preview']
-  .bik-inputBox__input:focus
-  + .bik-inputBox__label,
-.bik-inputBox__container[data-mode='preview']
-  .bik-inputBox__input:not(:placeholder-shown)
-  + .bik-inputBox__label,
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__label--hasValue {
-  top: 2px;
-  font-size: 6px;
-}
-
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__error {
-  font-size: 6px;
-  margin: 2px 0 0 2px;
-}
-
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__errorIcon {
-  width: 8px;
-  height: 8px;
-}
-
-.bik-inputBox__container[data-mode='preview'] .bik-inputBox__characterCount {
-  font-size: 6px;
-  right: 8px;
-  top: 2px;
-}
-
-@media (max-width: 768px) {
-  .bik-inputBox__input {
-    font-size: 14px !important;
-    padding: var(--bik-inputBox-padding-mobile) !important;
-  }
-
-  .bik-inputBox__label {
-    left: var(--bik-inputBox-label-padding-mobile);
-    margin-left: -6px;
-  }
-
-  .bik-inputBox__inputWrapper {
-    min-height: var(--bik-inputBox-min-height-mobile);
-  }
-
-  .bik-inputBox__container[data-mode='preview'] .bik-inputBox__inputWrapper {
-    min-height: var(--bik-inputBox-min-height-preview);
-    box-shadow: none;
-  }
-
-  .bik-inputBox__container[data-mode='preview'] .bik-inputBox__input {
-    padding: var(--bik-inputBox-padding-preview);
-    font-size: 7px;
-    line-height: 1.2;
-  }
-
-  .bik-inputBox__container[data-mode='preview']
-    .bik-inputBox__input:is(textarea) {
-    min-height: var(--bik-inputBox-min-height-preview);
-    max-height: 35px;
-    resize: none;
-    padding: 2px 4px;
-    line-height: 1.1;
-  }
-
-  .bik-inputBox__container[data-mode='preview'] .bik-inputBox__label {
-    left: var(--bik-inputBox-label-padding-preview);
-    font-size: 6px;
-    line-height: 1.2;
-  }
-
-  .bik-inputBox__container[data-mode='preview'] .bik-inputBox__label--floated,
-  .bik-inputBox__container[data-mode='preview']
-    .bik-inputBox__input:focus
-    + .bik-inputBox__label,
-  .bik-inputBox__container[data-mode='preview']
-    .bik-inputBox__input:not(:placeholder-shown)
-    + .bik-inputBox__label,
-  .bik-inputBox__container[data-mode='preview'] .bik-inputBox__label--hasValue {
-    top: 1px;
-    font-size: 5px;
-  }
-
-  .bik-inputBox__container[data-mode='preview'] .bik-inputBox__error {
-    font-size: 5px;
-    margin: 1px 0 0 1px;
-  }
-
-  .bik-inputBox__container[data-mode='preview'] .bik-inputBox__errorIcon {
-    width: 6px;
-    height: 6px;
-  }
-
-  .bik-inputBox__container[data-mode='preview'] .bik-inputBox__characterCount {
-    font-size: 5px;
-    right: 6px;
-    top: 1px;
-  }
-}

package/src/components/inputComponents/InputBox.tsx

@@ -1,209 +0,0 @@
-import React, { useState } from 'react';
-import styles from './InputBox.module.css';
-import { ErrorIcon } from '../../assets/svg/ErrorIcon';
-
-export type InputType = 'text' | 'email' | 'number';
-
-export interface InputBoxProps {
-  id?: string;
-  value: string;
-  onChange: (value: string) => void;
-  inputType?: InputType;
-  labelText?: string;
-  isMultiline?: boolean;
-  isRequired?: boolean;
-  errorMessage?: string;
-  minValue?: number;
-  maxValue?: number;
-  stepValue?: number;
-  isDisabled?: boolean;
-  maxCharacters?: number;
-  textareaRows?: number;
-  inputHeight?: number;
-  fontColour?: string;
-  backgroundColor?: string;
-  isPreview?: boolean;
-}
-
-export const InputBox: React.FC<InputBoxProps> = ({
-  id,
-  value,
-  onChange,
-  inputType = 'text',
-  isDisabled = false,
-  isRequired = false,
-  maxCharacters,
-  labelText,
-  errorMessage,
-  isMultiline = false,
-  textareaRows = 3,
-  minValue,
-  maxValue,
-  stepValue,
-  inputHeight,
-  fontColour,
-  isPreview = false,
-}) => {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const hasValue = value.length > 0;
-  const shouldFloatLabel = isFocused || hasValue;
-  const displayError = errorMessage;
-  const characterPercentage = maxCharacters
-    ? (value.length / maxCharacters) * 100
-    : 0;
-
-  const handleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    let newValue = e.target.value;
-    if (inputType === 'number' && newValue.trim()) {
-      const numValue = parseFloat(newValue);
-      if (!isNaN(numValue)) {
-        if (minValue !== undefined && numValue < minValue) {
-          newValue = minValue.toString();
-        } else if (maxValue !== undefined && numValue > maxValue) {
-          newValue = maxValue.toString();
-        }
-      }
-    }
-    onChange(newValue);
-  };
-
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-
-  const getBikCharacterCountClasses = () => {
-    if (!maxCharacters) return '';
-
-    const shouldShow = isFocused || hasValue;
-
-    return [
-      styles['bik-inputBox__characterCount'],
-      shouldShow && styles['bik-inputBox__characterCount--visible'],
-      characterPercentage >= 100 &&
-        styles['bik-inputBox__characterCount--error'],
-      characterPercentage >= 0.75 * 100 &&
-        characterPercentage < 100 &&
-        styles['bik-inputBox__characterCount--warning'],
-    ]
-      .filter(Boolean)
-      .join(' ');
-  };
-
-  const getBikWrapperClasses = () => {
-    return [
-      styles['bik-inputBox__inputWrapper'],
-      isFocused && styles['bik-inputBox__inputWrapper--focused'],
-      displayError && styles['bik-inputBox__inputWrapper--error'],
-      isDisabled && styles['bik-inputBox__inputWrapper--disabled'],
-    ]
-      .filter(Boolean)
-      .join(' ');
-  };
-
-  const getBikLabelClasses = () => {
-    return [
-      styles['bik-inputBox__label'],
-      isMultiline && styles['bik-inputBox__label--multiline'],
-      shouldFloatLabel && styles['bik-inputBox__label--floated'],
-      displayError && styles['bik-inputBox__label--error'],
-      isDisabled && styles['bik-inputBox__label--disabled'],
-      hasValue && styles['bik-inputBox__label--hasValue'],
-    ]
-      .filter(Boolean)
-      .join(' ');
-  };
-
-  return (
-    <div
-      className={styles['bik-inputBox__container']}
-      data-mode={isPreview ? 'preview' : 'default'}
-    >
-      <div
-        className={getBikWrapperClasses()}
-        style={{
-          borderColor: displayError ? '#b92321' : undefined,
-          paddingTop: isMultiline ? '24px' : undefined,
-        }}
-      >
-        {isMultiline ? (
-          <textarea
-            id={id}
-            value={value}
-            onChange={handleChange}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            placeholder={' '}
-            disabled={isDisabled}
-            required={isRequired}
-            maxLength={maxCharacters}
-            rows={textareaRows}
-            className={styles['bik-inputBox__input']}
-            style={{
-              resize: 'none',
-              minHeight: 'auto',
-              paddingTop: 0,
-              color: fontColour,
-            }}
-          />
-        ) : (
-          <input
-            id={id}
-            type={inputType}
-            value={value}
-            onChange={handleChange}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            placeholder={' '}
-            disabled={isDisabled}
-            required={isRequired}
-            maxLength={maxCharacters}
-            min={minValue}
-            max={maxValue}
-            step={stepValue}
-            className={styles['bik-inputBox__input']}
-            style={{
-              height: inputHeight ? `${inputHeight}px` : undefined,
-              color: fontColour,
-            }}
-          />
-        )}
-
-        {labelText && (
-          <div
-            className={getBikLabelClasses()}
-            style={{
-              color: fontColour,
-            }}
-          >
-            {labelText}
-            {isRequired && (
-              <span className={styles['bik-inputBox__required']}>*</span>
-            )}
-          </div>
-        )}
-
-        {maxCharacters && (
-          <div className={getBikCharacterCountClasses()}>
-            {value.length}/{maxCharacters}
-          </div>
-        )}
-      </div>
-
-      {displayError && (
-        <div className={styles['bik-inputBox__error']}>
-          <div className={styles['bik-inputBox__errorIcon']}>
-            <ErrorIcon size={12} />
-          </div>
-          {displayError}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/selectedCountry/selectedCountry.module.css

@@ -1,76 +0,0 @@
-.bikStwCountryCodePicker {
-  border-radius: 8px;
-  border-width: 1px;
-  border-style: solid;
-  align-items: center;
-  height: 34px;
-  border-color: #e0e0e0;
-  gap: 8px;
-  display: flex;
-  flex-direction: row;
-  font-family: inherit;
-  background-color: rgba(256, 256, 256, 0.3);
-  cursor: pointer;
-}
-
-.bikStwCountryCodeContainer {
-  gap: 8px;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  font-family: inherit;
-}
-
-.bikStwCountryFlag {
-  width: 24px;
-  height: auto;
-}
-
-.bikStwH2 {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin-bottom: 8px;
-}
-
-.bikStwDownArrow {
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 7px solid #616161;
-  font-size: 0;
-  line-height: 0;
-  float: left;
-  display: block !important;
-}
-
-@media only screen and (max-width: 768px) {
-  .bikStwH2 {
-    font-size: 10px;
-  }
-
-  .bikStwCountryCodePicker {
-    gap: 6px;
-    height: 30px;
-  }
-
-  .bikStwDownArrow {
-    border-left: 3px solid transparent;
-    border-right: 3px solid transparent;
-    border-top: 5px solid #616161;
-  }
-
-  .bikStwCountryFlag {
-    width: 22px;
-    height: auto;
-  }
-}