@bikdotai/bik-widgets 1.0.0 → 1.0.1

package/src/components/couponDetails/couponPreviewMobile.module.css

@@ -1,164 +0,0 @@
-.winningScreenIconWrapper {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 4px;
-  align-items: center;
-}
-
-#couponScreenTitleWrapper p {
-  margin-bottom: 0;
-  font-family: inherit;
-}
-
-.winningScreenIcon {
-  height: 24px;
-  width: auto;
-}
-
-.bikWrapper svg {
-  width: 45px;
-  height: 45px;
-  margin-bottom: 0;
-}
-
-#bikHeader {
-  font-family: inherit;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 10px;
-  text-align: center;
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  color: #212121;
-  margin: 0;
-}
-
-#bikSubheader {
-  font-feature-settings:
-    'tnum' on,
-    'lnum' on,
-    'case' on,
-    'ss04' on;
-  text-align: center;
-  font-weight: 400;
-  font-size: 8px;
-  line-height: 8px;
-  margin: 4px 0 8px;
-  font-family: inherit;
-}
-
-.bikContainerPadding {
-  padding: 30px;
-}
-
-#bikDiscountCodeDetails {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 8px;
-  gap: 8px;
-  width: 100%;
-  min-height: 50px;
-  background: #e6f4e7;
-  border-radius: 4px;
-  font-family: inherit;
-  text-align: center;
-}
-
-#bikDiscountCouponName {
-  color: #212121;
-  line-height: 8px;
-  margin: 0;
-  font-family: inherit;
-  text-align: center;
-}
-
-#bikDiscountCouponDetail {
-  color: #616161;
-  line-height: 10px;
-  margin: 0;
-  font-family: inherit;
-}
-
-#bikFooterLastPage {
-  font-family: inherit;
-}
-
-.font14 {
-  font-size: 8px;
-}
-
-.font10 {
-  font-size: 10px;
-  line-height: 12px;
-}
-
-.fontWeight400 {
-  font-weight: 400;
-}
-
-.fontWeight600 {
-  font-weight: 600;
-}
-
-.poweredBy {
-  color: #9e9e9e;
-  font-weight: 400;
-  font-size: 10px;
-  line-height: 12px;
-  margin-top: 8px;
-  margin-bottom: 0;
-  pointer-events: none;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.poweredBy a {
-  color: #9e9e9e;
-  pointer-events: none;
-  text-decoration: none;
-  margin-right: 4px;
-}
-
-.poweredBy svg {
-  width: 20px;
-  height: 20px;
-  margin: 0;
-}
-
-.bikCloseBtn {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background-color: #fff;
-  margin-bottom: 11px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  pointer-events: none;
-}
-
-#bikayiBtn {
-  padding: 4px 12px;
-  border: none;
-  border-radius: 8px;
-  outline: none;
-  width: 100%;
-  color: #fff;
-  margin-top: 8px;
-  cursor: pointer;
-  background: #731dcf;
-  font-weight: 600;
-  font-size: 10px;
-  line-height: 20px;
-  font-family: inherit;
-  pointer-events: none;
-}

package/src/components/index.ts

@@ -1,3 +0,0 @@
-import Fab from './Fab';
-
-export { Fab };

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

@@ -1,197 +0,0 @@
-.bik-checkbox__container {
-  /* Colors */
-  --bik-checkbox-primary: #000;
-  --bik-checkbox-background: #fff;
-  --bik-checkbox-text: #1f2937;
-
-  /* Border colors */
-  --bik-checkbox-border-default: #e0e0e0;
-  --bik-checkbox-border-hover: #000;
-
-  /* Disabled state colors */
-  --bik-checkbox-disabled-background: #f3f4f6;
-  --bik-checkbox-disabled-border: #d1d5db;
-  --bik-checkbox-disabled-checked: #9ca3af;
-  --bik-checkbox-disabled-text: #9ca3af;
-
-  /* Sizing */
-  --bik-checkbox-size: 14px;
-  --bik-checkbox-input-size: 16px;
-  --bik-checkbox-border-width: 2px;
-  --bik-checkbox-border-radius: 3px;
-
-  /* Spacing */
-  --bik-checkbox-gap: 8px;
-  --bik-checkbox-label-gap: 4px;
-
-  /* Typography */
-  --bik-checkbox-font-size: 14px;
-  --bik-checkbox-line-height: 1.5;
-  --bik-checkbox-font-weight: 400;
-
-  /* Interaction */
-  --bik-checkbox-transition: all 0.2s ease;
-  --bik-checkbox-focus-outline-width: 2px;
-  --bik-checkbox-focus-outline-offset: 2px;
-
-  /* Preview mode variations */
-  --bik-checkbox-size-preview: 10px;
-  --bik-checkbox-input-size-preview: 12px;
-  --bik-checkbox-border-width-preview: 1px;
-  --bik-checkbox-gap-preview: 4px;
-  --bik-checkbox-font-size-preview: 8px;
-  --bik-checkbox-font-size-preview-mobile: 7px;
-
-  position: relative;
-  margin: 8px 0;
-  width: 100%;
-}
-
-.bik-checkbox__wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--bik-checkbox-gap);
-  cursor: pointer;
-}
-
-.bik-checkbox__inputWrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.bik-checkbox__input {
-  position: absolute;
-  opacity: 0;
-  width: var(--bik-checkbox-input-size) !important;
-  height: var(--bik-checkbox-input-size) !important;
-  margin: 0 !important;
-  cursor: pointer;
-}
-
-.bik-checkbox__checkmark {
-  width: var(--bik-checkbox-size);
-  height: var(--bik-checkbox-size);
-  border: var(--bik-checkbox-border-width) solid
-    var(--bik-checkbox-border-default);
-  border-radius: var(--bik-checkbox-border-radius);
-  background: var(--bik-checkbox-background);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--bik-checkbox-background);
-  transition: var(--bik-checkbox-transition);
-}
-
-.bik-checkbox__label {
-  font-weight: var(--bik-checkbox-font-weight);
-  font-size: var(--bik-checkbox-font-size);
-  line-height: var(--bik-checkbox-line-height);
-  color: var(--bik-checkbox-text);
-  cursor: pointer;
-  user-select: none;
-  transition: var(--bik-checkbox-transition);
-}
-
-.bik-checkbox__labelContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--bik-checkbox-label-gap);
-  flex: 1;
-}
-
-.bik-checkbox__wrapper:hover:not(.bik-checkbox__wrapper--disabled)
-  .bik-checkbox__checkmark {
-  border-color: var(--bik-checkbox-border-hover);
-}
-
-.bik-checkbox__input:focus + .bik-checkbox__checkmark {
-  outline: var(--bik-checkbox-focus-outline-width) solid
-    var(--bik-checkbox-primary);
-  outline-offset: var(--bik-checkbox-focus-outline-offset);
-}
-
-.bik-checkbox__input:focus:not(:focus-visible) + .bik-checkbox__checkmark {
-  outline: none;
-}
-
-.bik-checkbox__input:checked + .bik-checkbox__checkmark {
-  background: var(--bik-checkbox-primary);
-  border-color: var(--bik-checkbox-primary);
-}
-
-.bik-checkbox__wrapper--disabled {
-  cursor: not-allowed;
-}
-
-.bik-checkbox__wrapper--disabled .bik-checkbox__input,
-.bik-checkbox__wrapper--disabled .bik-checkbox__label {
-  cursor: not-allowed;
-}
-
-.bik-checkbox__wrapper--disabled .bik-checkbox__checkmark {
-  background: var(--bik-checkbox-disabled-background);
-  border-color: var(--bik-checkbox-disabled-border);
-}
-
-.bik-checkbox__wrapper--disabled
-  .bik-checkbox__input:checked
-  + .bik-checkbox__checkmark {
-  background: var(--bik-checkbox-disabled-checked);
-  border-color: var(--bik-checkbox-disabled-checked);
-}
-
-.bik-checkbox__wrapper--disabled .bik-checkbox__label {
-  color: var(--bik-checkbox-disabled-text);
-}
-
-.bik-checkbox__container[data-mode='preview'] {
-  margin: 4px 0;
-}
-
-.bik-checkbox__container[data-mode='preview'] .bik-checkbox__wrapper {
-  gap: var(--bik-checkbox-gap-preview);
-}
-
-.bik-checkbox__container[data-mode='preview'] .bik-checkbox__checkmark {
-  width: var(--bik-checkbox-size-preview);
-  height: var(--bik-checkbox-size-preview);
-  border-width: var(--bik-checkbox-border-width-preview);
-}
-
-.bik-checkbox__container[data-mode='preview'] .bik-checkbox__input {
-  width: var(--bik-checkbox-input-size-preview);
-  height: var(--bik-checkbox-input-size-preview);
-}
-
-.bik-checkbox__container[data-mode='preview'] .bik-checkbox__label {
-  font-size: var(--bik-checkbox-font-size-preview);
-  line-height: 1.2;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bik-checkbox__container .bik-checkbox__checkmark,
-  .bik-checkbox__container .bik-checkbox__label {
-    transition: none;
-  }
-}
-
-@media (prefers-contrast: high) {
-  .bik-checkbox__container {
-    --bik-checkbox-border-width: 3px;
-  }
-
-  .bik-checkbox__label {
-    font-weight: 600;
-  }
-}
-
-@media (max-width: 768px) {
-  .bik-checkbox__container[data-mode='preview'] .bik-checkbox__label {
-    font-size: var(--bik-checkbox-font-size-preview-mobile);
-  }
-}

package/src/components/inputComponents/Checkbox.tsx

@@ -1,85 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import styles from './Checkbox.module.css';
-import CheckIcon from '../../assets/svg/CheckIcon';
-
-export interface CheckboxProps {
-  id: string;
-  checked: boolean;
-  label: string;
-  onChange: (checked: boolean) => void;
-  disabled?: boolean;
-  iconSize?: number;
-  isPreview?: boolean;
-  fontColour?: string;
-}
-
-const Checkbox: React.FC<CheckboxProps> = ({
-  id,
-  checked,
-  label,
-  onChange,
-  disabled = false,
-  iconSize = 14,
-  isPreview = false,
-  fontColour,
-}) => {
-  const wrapperClasses = useMemo(() => {
-    return [
-      styles['bik-checkbox__wrapper'],
-      disabled && styles['bik-checkbox__wrapper--disabled'],
-    ]
-      .filter(Boolean)
-      .join(' ');
-  }, [disabled]);
-
-  const handleInputChange = useCallback(
-    event => {
-      if (!disabled) {
-        onChange(event.target.checked);
-      }
-    },
-    [disabled],
-  );
-
-  return (
-    <div
-      className={styles['bik-checkbox__container']}
-      data-mode={isPreview ? 'preview' : 'default'}
-    >
-      <div className={wrapperClasses}>
-        <div className={styles['bik-checkbox__inputWrapper']}>
-          <input
-            id={id}
-            type="checkbox"
-            checked={checked}
-            onChange={handleInputChange}
-            disabled={disabled}
-            className={styles['bik-checkbox__input']}
-          />
-
-          <div
-            className={styles['bik-checkbox__checkmark']}
-            style={{
-              width: iconSize + 2,
-              height: iconSize + 2,
-            }}
-          >
-            <CheckIcon size={iconSize} />
-          </div>
-        </div>
-
-        {label && (
-          <div className={styles['bik-checkbox__labelContainer']}>
-            <div
-              className={styles['bik-checkbox__label']}
-              style={{ color: fontColour }}
-            >
-              {label}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-export default Checkbox;