@bikdotai/bik-widgets 1.0.0

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

@@ -0,0 +1,401 @@
+.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

@@ -0,0 +1,209 @@
+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

@@ -0,0 +1,76 @@
+.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;
+  }
+}