@clicktap/ui 0.14.19 → 0.14.26

package/components/NumberTicker/hooks/useNumberDelta.ts

@@ -1,19 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-export const useNumberDelta = (value = 0) => {
-  const ref = useRef(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  switch (true) {
-    case value > ref.current:
-      return 'increase';
-    case value < ref.current:
-      return 'decrease';
-    default:
-      return 'same';
-  }
-};
-
-export default useNumberDelta;

package/components/NumberTicker/hooks/useNumberTicker.ts

@@ -1,36 +0,0 @@
-import { useMemo } from 'react';
-import { NumberTickerConfig } from '../NumberTicker.types';
-
-export const useNumberTicker = ({
-  value = 0,
-  asLocal = false,
-  localeConfig = {
-    locale: 'en-US',
-    options: {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2,
-    },
-  },
-  precision = 2,
-}: NumberTickerConfig) => {
-  const parsed = parseFloat(`${Math.max(Math.abs(value), 0)}`).toFixed(
-    precision ?? 0
-  );
-
-  const number = asLocal
-    ? new Intl.NumberFormat(localeConfig?.locale, {
-        ...localeConfig?.options,
-      }).format(parseFloat(parsed))
-    : parsed;
-
-  return useMemo(
-    () => ({
-      digits: number.split(''),
-      isNegative: value < 0,
-    }),
-    [number, value]
-  );
-};
-
-export default useNumberTicker;

package/components/NumberTicker/index.ts

@@ -1,10 +0,0 @@
-export { DigitResolver } from './DigitResolver';
-export { NumberTicker } from './NumberTicker';
-
-export type { DigitProps, DigitResolverProps } from './DigitResolver.types';
-export type {
-  NumberTickerConfig,
-  NumberTickerProps,
-  TickerMotionProps,
-  TransitionConfig,
-} from './NumberTicker.types';

package/components/Pagination/Pagination.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import { Pagination as UiPagination } from '@nextui-org/pagination';
-import type { PaginationProps } from '@nextui-org/pagination';
-import { cn } from '../../utils/cn';
-
-const controlClassNames = cn(
-  'w-8 h-8 flex justify-center items-center cursor-pointer shadow-none',
-  'border border-slate-200 data-[disabled=true]:border-0',
-  'rounded transition-colors duration-300 data-[focus-visible="true"]:outline-white data-[focus-visible="true"]:outline-offset-4',
-  'hover:bg-slate-50 data-[disabled=true]:bg-slate-100 data-[disabled=true]:text-slate-400',
-  '[&>svg]:w-4.5 [&>svg]:h-auto'
-);
-
-export function Pagination({
-  showControls = true,
-  className,
-  classNames,
-  ...rest
-}: PaginationProps) {
-  return (
-    <UiPagination
-      showControls={showControls}
-      className={cn('text-slate-600', className)}
-      classNames={{
-        wrapper: cn('flex flex-nowrap gap-2 lg:gap-3', classNames?.wrapper),
-        item: cn(
-          'w-8 h-8 flex text-sm justify-center items-center cursor-pointer rounded shadow-none',
-          'border-solid border border-slate-100 bg-transparent transition-colors duration-300',
-          'data-[active=true]:bg-slate-500 data-[active=true]:text-white data-[focus-visible="true"]:outline-white data-[focus-visible="true"]:outline-offset-4',
-          '[&[data-hover=true]:not([data-active=true])]:border-slate-200',
-          classNames?.item
-        ),
-        prev: cn(controlClassNames, classNames?.prev),
-        next: cn(controlClassNames, classNames?.next),
-        ellipsis: cn('w-4 h-4.5 scale-110 translate-y-1', classNames?.ellipsis),
-      }}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-    />
-  );
-}
-
-export default Pagination;

package/components/Pagination/index.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { Pagination } from './Pagination';

package/components/PasswordCheck/PasswordCheck.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { cn } from '../../utils/cn';
-import type { PasswordCheckProps } from './PasswordCheck.types';
-import { checkStrength, getProgressText } from './PasswordCheck.utils';
-
-export function PasswordCheck({
-  value,
-  variant = 'default',
-}: PasswordCheckProps) {
-  const strength = checkStrength(value);
-
-  return (
-    <div>
-      <div
-        className={cn(
-          'relative w-full flex gap-x-2',
-          variant === 'default' && 'mb-8 -mt-1'
-        )}
-      >
-        {Array.from({ length: 5 }, (_, idx) => idx).map((v, idx) => (
-          <div
-            className={cn(
-              'grow shrink basis-1/5 h-1 rounded-full transition-colors duration-700 ease bg-slate-200',
-              strength <= idx && 'bg-slate-600',
-              (strength === 1 || strength === 2) && 'bg-red-600',
-              strength === 3 && 'bg-yellow-600',
-              strength === 4 && 'bg-green-600',
-              strength === 5 && 'bg-blue-600'
-            )}
-            key={v}
-          />
-        ))}
-        {variant === 'default' && (
-          <div
-            className={cn(
-              'inline-flex gap-x-1 absolute top-0 left-0 text-xs translate-y-2/4 text-slate-950',
-              strength ? 'opacity-100' : 'opacity-0'
-            )}
-          >
-            <span>Password Strength:</span>
-            <span
-              className={cn(
-                (strength === 1 || strength === 2) && 'text-red-600',
-                strength === 3 && 'text-yellow-600',
-                strength === 4 && 'text-green-600',
-                strength === 5 && 'text-blue-600'
-              )}
-            >
-              {getProgressText(strength)}
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default PasswordCheck;

package/components/PasswordCheck/PasswordCheck.types.ts

@@ -1,4 +0,0 @@
-export type PasswordCheckProps = {
-  value: string;
-  variant?: 'default' | 'short';
-};

package/components/PasswordCheck/PasswordCheck.utils.ts

@@ -1,47 +0,0 @@
-/** @todo these functions should probably be passed as props to be able to extend */
-export const checkStrength = (value: string) => {
-  const isMinLength = value.length >= 8;
-  let strength = 0;
-  if (/^(?=.*[a-z])(?=.*[A-Z])/.test(value) && isMinLength) {
-    strength += 1;
-  }
-  if (/\d/.test(value) && isMinLength) {
-    strength += 1;
-  }
-  if (value.length >= 8) {
-    strength += 1;
-  }
-  if (value.length >= 11) {
-    strength += 1;
-  }
-  if (/[ `!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/.test(value) && isMinLength) {
-    strength += 1;
-  }
-  return strength;
-};
-
-export const getProgressText = (strength: number) => {
-  switch (strength) {
-    case 5:
-      return 'Very Strong';
-    case 4:
-      return 'Strong';
-    case 3:
-      return 'Good';
-    case 2:
-      return 'Weak';
-    case 1:
-      return 'Very Weak';
-    default:
-      return '';
-  }
-};
-
-/** @todo this doesn't look like it is used...remove? */
-export const getPasswordRequirements = (value = '') => {
-  return {
-    eightСharacters: value.length >= 8,
-    upLowCaseLetters: /^(?=.*[a-z])(?=.*[A-Z])/.test(value),
-    oneNumber: /\d/.test(value),
-  };
-};

package/components/PasswordCheck/index.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { PasswordCheck } from './PasswordCheck';

package/components/PhoneInput/PhoneInput.tsx

@@ -1,191 +0,0 @@
-'use client';
-
-import { useFilter } from 'react-aria';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  CountryIso2,
-  defaultCountries,
-  parseCountry,
-  usePhoneInput,
-} from 'react-international-phone';
-import {
-  Button,
-  ListBox,
-  ListBoxItem,
-  Input as AriaInput,
-  DialogTrigger,
-} from 'react-aria-components';
-import type { TextFieldProps } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import { Input } from '../Input/Input';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-interface PhoneInputProps extends Omit<TextFieldProps, 'type'> {
-  label?: string;
-  description?: string;
-  errorMessage?: string;
-  placeholder?: string;
-  classNames?: SlotsToClasses<'label' | 'input' | 'description' | 'error'>;
-  defaultCountry?: CountryIso2;
-}
-
-const options = defaultCountries.map(parseCountry);
-
-export function PhoneInput({
-  value,
-  onChange,
-  defaultCountry = 'us',
-  ...props
-}: PhoneInputProps) {
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const searchRef = useRef<HTMLInputElement>(null);
-  const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } =
-    usePhoneInput({
-      defaultCountry,
-      value,
-      countries: defaultCountries,
-      onChange: (data) => {
-        onChange?.(data.phone);
-      },
-      forceDialCode: true,
-    });
-  const dialCodeWithPrefix = `+${country.dialCode}`;
-
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { startsWith } = useFilter({ sensitivity: 'base' });
-  const [filterValue, setFilterValue] = useState('');
-  const [isOpen, onOpenChange] = useState(false);
-
-  const filteredItems = useMemo(
-    () => options.filter((item) => startsWith(item.name, filterValue)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [filterValue]
-  );
-
-  useEffect(() => {
-    if (isOpen) {
-      searchRef.current?.focus();
-    }
-  }, [isOpen]);
-
-  return (
-    <div
-      className={cn('flex relative', props.label ? 'pt-4' : '')}
-      aria-label={props['aria-label']}
-    >
-      <DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
-        <Button
-          aria-label="Select Country"
-          className="flex px-4 h-10 text-sm items-center rounded-l-md bg-slate-100 gap-2 uppercase [&[aria-expanded=false]_svg]:rotate-180 border border-r-0 border-slate-300"
-          excludeFromTabOrder
-        >
-          {country.iso2}
-          <svg
-            width="15"
-            height="8"
-            viewBox="0 0 15 8"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M1 7L7.5 0.999999L14 7" stroke="currentColor" />
-          </svg>
-        </Button>
-
-        <div
-          className={cn(
-            'w-full grid absolute left-0 top-[calc(100%+.25rem)] bg-white z-50 rounded-md text-slate-600 border border-slate-300',
-            'shadow-inner',
-            isOpen ? 'block' : 'hidden'
-          )}
-          ref={triggerRef}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="none"
-            viewBox="0 0 17 16"
-            className="absolute top-4 left-[1.325rem]"
-          >
-            <path
-              fill="currentColor"
-              fillRule="evenodd"
-              d="M12.3 6.9a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0Zm-1.1 5.7c-1.1.7-2.4 1.2-3.8 1.2a6.9 6.9 0 1 1 5.3-2.5l3 3-1.4 1.4-3.1-3Z"
-              clipRule="evenodd"
-            />
-          </svg>
-
-          <AriaInput
-            aria-label="Search for countries"
-            placeholder="Search for countries"
-            className={cn(
-              'pl-12 pr-5 py-4 w-full m-0 border-0 text-slate-950 transition-all duration-[0.25s] ease outline-0 bg-transparent',
-              'placeholder:text-slate-950 focus:outline-0',
-              'border-b border-slate-200'
-            )}
-            onChange={(event) => setFilterValue(event.target.value)}
-            onBlur={() => {
-              onOpenChange(false);
-              inputRef.current?.focus();
-            }}
-            value={filterValue}
-            ref={searchRef}
-          />
-
-          <div className="p-2.5">
-            <ListBox
-              className="text-slate-950 max-h-60 overflow-y-auto"
-              selectionMode="single"
-              aria-label="Countries List"
-              onSelectionChange={(selection) => {
-                setCountry(String([...selection][0]));
-                setFilterValue('');
-                onOpenChange(false);
-              }}
-            >
-              {(isOpen ? filteredItems : []).map((parsedCountry) => (
-                <ListBoxItem
-                  id={parsedCountry.iso2}
-                  key={parsedCountry.iso2}
-                  value={parsedCountry}
-                  textValue={parsedCountry.iso2}
-                  className="p-3 text-slate-900 data-[hovered]:bg-slate-100 rounded-md"
-                >
-                  {parsedCountry.name} (+{parsedCountry.dialCode})
-                </ListBoxItem>
-              ))}
-            </ListBox>
-          </div>
-        </div>
-      </DialogTrigger>
-
-      <Input
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        value={inputValue}
-        inputProps={{
-          onChange: handlePhoneValueChange,
-        }}
-        ref={inputRef}
-        classNames={{
-          input: cn(
-            'rounded-l-none',
-            inputValue.trim() === dialCodeWithPrefix ? 'text-slate-600' : ''
-          ),
-          label: 'absolute top-0 left-0',
-        }}
-      />
-    </div>
-  );
-}
-
-PhoneInput.defaultProps = {
-  label: undefined,
-  description: undefined,
-  errorMessage: undefined,
-  placeholder: undefined,
-  classNames: undefined,
-  defaultCountry: undefined,
-};
-
-export default PhoneInput;

package/components/PhoneInput/index.ts

@@ -1,2 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { PhoneInput } from './PhoneInput';