@clicktap/ui 0.14.19 → 0.14.26

package/components/PinInput/PinInput.tsx

@@ -1,318 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import type { ChangeEvent, ClipboardEvent, KeyboardEvent } from 'react';
-import {
-  FieldError,
-  Group,
-  Input,
-  Label,
-  Text,
-  TextField,
-} from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { PinInputProps } from './PinInput.types';
-
-/** based on https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/src/pin-input/use-pin-input.ts */
-export function PinInput({
-  description,
-  errorMessage,
-  isDisabled = false,
-  isInvalid = false,
-  isMasked = false,
-  isRequired = true,
-  label,
-  length = 6,
-  name,
-  onChange: controlledOnChange,
-  value = '',
-  type = 'numeric',
-  validationBehavior = 'native',
-  className,
-  classNames,
-  ...props
-}: PinInputProps) {
-  // const [focusedIndex, setFocusedIndex] = useState(-1);
-  const [joinedValue, setJoinedValue] = useState(value);
-  const [values, setValues] = useState<string[]>(Array(length).fill(''));
-  const inputRefs = useRef<HTMLInputElement[]>([]);
-
-  useEffect(() => {
-    inputRefs.current = inputRefs.current.slice(0, length);
-  }, [length]);
-
-  useEffect(() => {
-    const updatedValue = values.join('');
-    setJoinedValue(updatedValue);
-    if (controlledOnChange) controlledOnChange(updatedValue);
-  }, [controlledOnChange, values]);
-
-  //   const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  //     const eventValue = event.target.value;
-  //     const currentValue = values[index];
-  //     const nextValue = getNextValue(currentValue, eventValue);
-  //     const allItems = getAllItems(containerRef.current);
-
-  //     // if the value was removed using backspace
-  //     if (nextValue === '') {
-  //       setValue('', index);
-  //       return;
-  //     }
-
-  //     // in the case of an autocomplete or copy and paste
-  //     if (eventValue.length > 2) {
-  //       // see if we can use the string to fill out our values
-  //       if (validate(eventValue, type)) {
-  //         // Ensure the value matches the number of inputs
-  //         const nextValue = eventValue
-  //           .split('')
-  //           .filter((_, index) => index < allItems.length);
-
-  //         setValues(nextValue);
-  //         // if pasting fills the entire input fields, trigger `onComplete`
-  //         if (nextValue.length === allItems.length) {
-  //           onComplete?.(nextValue.join(''));
-  //         }
-  //       }
-  //     } else {
-  //       // only set if the new value is a number
-  //       if (validate(nextValue, type)) {
-  //         setValue(nextValue, index);
-  //       }
-
-  //       setMoveFocus(true);
-  //     }
-  //   };
-  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const inputValue = event.target.value;
-    const inputIndex = Number(
-      event.target.getAttribute('data-pin-input-index')
-    );
-
-    if (inputValue !== '' && inputIndex < values.length - 1) {
-      inputRefs.current?.[inputIndex + 1]?.focus();
-    }
-
-    const updatedValues = values.map((v, i) =>
-      i === inputIndex ? inputValue : v
-    );
-    setValues(updatedValues);
-
-    // return setValues(updatedValues);
-  };
-
-  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    // const inputValue = event.currentTarget.value;
-    const inputIndex = Number(
-      event.currentTarget.getAttribute('data-pin-input-index')
-    );
-
-    // Allow standard keyboard shortcuts
-    if (event.ctrlKey || event.metaKey) {
-      return;
-    }
-
-    /** @todo is there a better way to pass through control keys? */
-    const allowedKeys = [
-      'Backspace',
-      'Delete',
-      'ArrowLeft',
-      'ArrowRight',
-      'ArrowUp',
-      'ArrowDown',
-      'Control',
-      'Alt',
-      'Meta',
-      'Shift',
-      'Tab',
-      'Enter',
-      'Escape',
-    ];
-
-    const regex = {
-      alpha: /^[a-z]$/i,
-      alphanumeric: /^[a-z0-9]$/i,
-      numeric: /^[0-9]$/i,
-    };
-
-    if (!event.key.match(regex[type]) && !allowedKeys.includes(event.key)) {
-      event.preventDefault();
-    }
-
-    if (
-      values[inputIndex] === '' &&
-      inputIndex > 0 &&
-      event.key === 'Backspace'
-    ) {
-      const updatedValues = values.map((v, i) =>
-        i === inputIndex - 1 ? '' : v
-      );
-      setValues(updatedValues);
-      inputRefs.current?.[inputIndex - 1]?.focus();
-      event.preventDefault();
-    }
-
-    if (
-      values[inputIndex] === '' &&
-      inputIndex < values.length - 1 &&
-      event.key === 'Delete'
-    ) {
-      const updatedValues = values.map((v, i) =>
-        i === inputIndex + 1 ? '' : v
-      );
-      setValues(updatedValues);
-      inputRefs.current?.[inputIndex + 1]?.focus();
-      event.preventDefault();
-    }
-
-    // const prevValues = value;
-    // prevValues[inputIndex] += inputValue;
-    // setValue(prevValues);
-  };
-
-  const onPaste = (event: ClipboardEvent<HTMLInputElement>) => {
-    const inputIndex = Number(
-      event.currentTarget.getAttribute('data-pin-input-index')
-    );
-
-    event.preventDefault();
-
-    const pasteData = event.clipboardData?.getData('text');
-    if (!pasteData) return;
-
-    /** @todo update to fail paste if contains invalid chars? */
-    const splitValue = pasteData.split('').filter((char) => {
-      switch (type) {
-        case 'alpha':
-          return /^[a-zA-Z]$/.test(char);
-        case 'alphanumeric':
-          return /^[a-z0-9]$/i.test(char);
-        case 'numeric':
-        default:
-          return /^[0-9]$/.test(char);
-      }
-    });
-
-    if (splitValue.length === 0) {
-      return;
-    }
-
-    const updatedValues = [...values];
-
-    let focusIndex = inputIndex;
-
-    // eslint-disable-next-line no-plusplus
-    for (let i = 0; i < splitValue.length && inputIndex + i < length; i++) {
-      updatedValues[inputIndex + i] = splitValue[i];
-      focusIndex = inputIndex + i;
-    }
-
-    setValues(updatedValues);
-
-    const nextInputIndex =
-      focusIndex + 1 < length ? focusIndex + 1 : length - 1;
-    inputRefs.current[nextInputIndex]?.focus();
-  };
-
-  return (
-    <Group
-      className={cn('flex flex-wrap gap-2', className)}
-      aria-label={label}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      <Label
-        className={cn(
-          'flex text-slate-500 text-sm grow shrink-0 basis-full',
-          classNames?.label
-        )}
-      >
-        {label}
-      </Label>
-
-      {values.map((v, i) => (
-        <TextField
-          className={cn(
-            'flex flex-col w-full flex-1 text-slate-900',
-            classNames?.inputWrap
-          )}
-          // eslint-disable-next-line react/no-array-index-key
-          key={`pin-input-${i}`}
-          aria-label={`Pin Input Digit ${i + 1}`}
-          isDisabled={isDisabled}
-          isInvalid={isInvalid}
-          isRequired={isRequired}
-          validationBehavior={validationBehavior}
-        >
-          <Input
-            className={cn(
-              'border-solid border border-slate-300 rounded-md',
-              'text-sm text-slate-900 placeholder-slate-400 text-center',
-              'h-10 px-2 py-0 m-0 w-full',
-              'bg-white',
-              'transition-all duration-200 ease-in-out',
-              'hover:border-slate-400',
-              'focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400',
-              'disabled:border-slate-200 disabled:bg-slate-100',
-              'invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600',
-              'invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200',
-              classNames?.input
-            )}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            onPaste={onPaste}
-            type={isMasked ? 'password' : 'text'}
-            // eslint-disable-next-line no-return-assign
-            ref={(el) => {
-              if (el) {
-                inputRefs.current[i] = el;
-              }
-            }}
-            value={v}
-            maxLength={1}
-            name={name && `${name}-${i}`}
-            // pattern="[0-9]*"
-            data-pin-input-index={i}
-          />
-          {/* {description && (
-          <StyledText slot="description">{description}</StyledText>
-        )} */}
-        </TextField>
-      ))}
-      <TextField
-        className={cn(
-          'flex flex-row flex-wrap grow shrink-0 basis-full',
-          classNames?.textWrap
-        )}
-        aria-label="Pin Input"
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isRequired={isRequired}
-        validationBehavior={validationBehavior}
-      >
-        {name && <Input type="hidden" name={name} value={joinedValue} />}
-        {description && (
-          <Text
-            className={cn(
-              'flex text-slate-500 text-sm grow shrink-0 basis-full',
-              classNames?.description
-            )}
-            slot="description"
-          >
-            {description}
-          </Text>
-        )}
-        <FieldError
-          className={cn(
-            'flex text-red-500 text-sm grow shrink-0 basis-full',
-            classNames?.error
-          )}
-        >
-          {errorMessage}
-        </FieldError>
-      </TextField>
-    </Group>
-  );
-}
-
-export default PinInput;

package/components/PinInput/PinInput.types.ts

@@ -1,21 +0,0 @@
-import type { GroupProps, ValidationResult } from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-/** @todo extend certain textfield props like name, validationBehavior and isRequired */
-export interface PinInputProps extends GroupProps {
-  description?: string;
-  errorMessage?: string | ((validation: ValidationResult) => string);
-  label?: string;
-  length?: number;
-  name?: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onChange?: (...event: any[]) => void;
-  value?: string;
-  isMasked?: boolean;
-  isRequired?: boolean;
-  type?: 'alpha' | 'alphanumeric' | 'numeric';
-  validationBehavior?: 'native' | 'aria';
-  classNames?: SlotsToClasses<
-    'label' | 'input' | 'description' | 'error' | 'inputWrap' | 'textWrap'
-  >;
-}

package/components/PinInput/index.ts

@@ -1,2 +0,0 @@
-export { PinInput } from './PinInput';
-export type { PinInputProps } from './PinInput.types';

package/components/Progressbar/CircularProgressbar.tsx

@@ -1,71 +0,0 @@
-'use client';
-
-import { ProgressBar, Label } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { CircularProgressbarProps } from './CircularProgressbar.types';
-
-export function CircularProgressbar({
-  label,
-  value = 0,
-  showValue = true,
-  size = 60,
-  strokeWidth = 6,
-  className,
-  classNames,
-  ...props
-}: CircularProgressbarProps) {
-  const center = size / 2;
-  const radius = center - strokeWidth;
-  const circumference = 2 * Math.PI * radius;
-
-  return (
-    <ProgressBar
-      aria-label="Loading..."
-      className={cn('flex', className)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      value={value}
-    >
-      {({ percentage = 0 }) => (
-        <div className={cn('flex items-center flex-col', classNames?.base)}>
-          <Label className={cn('text-sm', classNames?.label)}>{label}</Label>
-          <svg width={size} height={size} fill="none">
-            <circle
-              className={cn('stroke-slate-300')}
-              cx={center}
-              cy={center}
-              r={radius}
-              strokeWidth={strokeWidth}
-            />
-            <circle
-              className={cn(
-                'stroke-slate-800 transition-stroke-dashoffset duration-500 ease-in-out'
-              )}
-              cx={center}
-              cy={center}
-              r={radius}
-              strokeWidth={strokeWidth}
-              strokeDasharray={`${circumference} ${circumference}`}
-              strokeDashoffset={((100 - percentage) / 100) * circumference}
-              strokeLinecap="round"
-              transform={`rotate(-90 ${center} ${center})`}
-            />
-            {showValue && (
-              <text
-                className={cn('text-sm fill-slate-800', classNames?.value)}
-                x="50%"
-                y="50%"
-                alignmentBaseline="middle"
-                textAnchor="middle"
-              >
-                {percentage}%
-              </text>
-            )}
-          </svg>
-        </div>
-      )}
-    </ProgressBar>
-  );
-}
-
-export default CircularProgressbar;

package/components/Progressbar/CircularProgressbar.types.ts

@@ -1,10 +0,0 @@
-import type { ProgressBarProps } from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface CircularProgressbarProps extends ProgressBarProps {
-  label?: string;
-  showValue?: boolean;
-  size?: number;
-  strokeWidth?: number;
-  classNames?: SlotsToClasses<'label' | 'base' | 'value'>;
-}

package/components/Progressbar/LinearProgressbar.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import { ProgressBar, Label } from 'react-aria-components';
-import { motion } from 'framer-motion';
-import { cn } from '../../utils/cn';
-import type { LinearProgressbarProps } from './LinearProgressbar.types';
-
-export function LinearProgressbar({
-  label,
-  isIndeterminate,
-  showValue = true,
-  width,
-  className,
-  classNames,
-  ...props
-}: LinearProgressbarProps) {
-  return (
-    <ProgressBar
-      style={{ width: width || '100%' }}
-      className={cn('overflow-hidden', className)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {({ percentage, valueText }) => (
-        <>
-          <div
-            className={cn(
-              'flex items-center justify-between gap-2 mb-1',
-              classNames?.labelWrapper
-            )}
-          >
-            <Label className={cn('text-sm', classNames?.label)}>{label}</Label>
-            {showValue && (
-              <span className={cn('text-sm', classNames?.value)}>
-                {valueText}
-              </span>
-            )}
-          </div>
-          <div
-            className={cn(
-              'overflow-hidden forced-color-adjust-none h-2.5 rounded will-change-transform bg-slate-300',
-              classNames?.trackWrapper
-            )}
-          >
-            <motion.div
-              style={{
-                width:
-                  !isIndeterminate && typeof percentage === 'number'
-                    ? `${percentage}%`
-                    : '',
-              }}
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              {...(isIndeterminate && {
-                animate: {
-                  x: ['-100%', '250px'],
-                },
-                transition: { repeat: Infinity, duration: 1.5 },
-              })}
-              className={cn(
-                'h-full bg-slate-800 rounded transition-width duration-500 ease-in-out',
-                {
-                  'w-1/2': isIndeterminate,
-                  'transition-none': isIndeterminate,
-                },
-                classNames?.track
-              )}
-            />
-          </div>
-        </>
-      )}
-    </ProgressBar>
-  );
-}
-
-export default LinearProgressbar;

package/components/Progressbar/LinearProgressbar.types.ts

@@ -1,11 +0,0 @@
-import type { ProgressBarProps } from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface LinearProgressbarProps extends ProgressBarProps {
-  label?: string;
-  width?: string;
-  showValue?: boolean;
-  classNames?: SlotsToClasses<
-    'label' | 'value' | 'labelWrapper' | 'track' | 'trackWrapper'
-  >;
-}

package/components/Progressbar/index.ts

@@ -1,4 +0,0 @@
-export { CircularProgressbar } from './CircularProgressbar';
-export { LinearProgressbar } from './LinearProgressbar';
-export type { CircularProgressbarProps } from './CircularProgressbar.types';
-export type { LinearProgressbarProps } from './LinearProgressbar.types';

package/components/Radio/Radio.tsx

@@ -1,88 +0,0 @@
-'use client';
-
-import { Radio as AriaRadio } from 'react-aria-components';
-import type { RadioRenderProps } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { RadioProps, RadioSlots } from './Radio.types';
-
-function ControlSlot({
-  control,
-  classNames,
-  ...props
-}: RadioRenderProps &
-  Pick<RadioSlots, 'control'> &
-  Pick<RadioProps, 'classNames'>) {
-  if (!control) {
-    return (
-      <div
-        data-hovered={props?.isHovered}
-        data-focused={props?.isFocused}
-        data-disabled={props?.isDisabled}
-        data-invalid={props?.isInvalid}
-        data-selected={props?.isSelected}
-        data-pressed={props?.isPressed}
-        className={cn(
-          'flex items-center justify-center w-6 h-6  border-solid border border-slate-300 ransition-all duration-300 ease rounded-full',
-          'data-[hovered="true"]:border-slate-400',
-          'data-[focused="true"]:border-slate-400 data-[focused="true"]:outline-2 data-[focused="true"]:outline data-[focused="true"]:outline-slate-200',
-          'data-[disabled="true"]:border-slate-200 data-[disabled="true"]:bg-slate-100',
-          'data-[invalid="true"]:bg-red-100 data-[invalid="true"]:text-red-600 data-[invalid="true"]:border-red-500',
-          'data-[invalid="true"]:data-[disabled="true"]:border-red-200 data-[invalid="true"]:data-[disabled="true"]:bg-red-100',
-          'data-[invalid="true"]:data-[hovered="true"]:border-red-600',
-          'data-[invalid="true"]:data-[focused="true"]:border-red-600 data-[invalid="true"]:data-[focused="true"]:outline-red-200',
-          'data-[invalid="true"]:data-[selected="true"]:bg-red-100 data-[invalid="true"]:data-[selected="true"]:border-red-500',
-          'data-[invalid="true"]:data-[pressed="true"]:bg-red-600 data-[invalid="true"]:data-[pressed="true"]:border-red-600',
-          classNames?.control
-        )}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-      >
-        <div
-          data-invalid={props?.isInvalid}
-          className={cn(
-            'w-3 h-3 rounded-full bg-slate-900 opacity-0 transition-all duration-300 ease data-[invalid="true"]:bg-red-500',
-            {
-              'opacity-100': props?.isSelected,
-            }
-          )}
-        />
-      </div>
-    );
-  }
-  return typeof control === 'function' ? control(props) : control;
-}
-
-export function Radio({
-  children,
-  slots,
-  className,
-  classNames,
-  ...props
-}: RadioProps) {
-  return (
-    <AriaRadio
-      className={cn(
-        'flex items-center gap-2 group',
-        'invalid:text-red-500 invalid:disabled:text-red-300',
-        'disabled:text-slate-400',
-        className
-      )}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {(renderProps) => (
-        <>
-          <ControlSlot
-            control={slots?.control}
-            classNames={classNames}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...renderProps}
-          />
-          {typeof children === 'function' ? children(renderProps) : children}
-        </>
-      )}
-    </AriaRadio>
-  );
-}
-
-export default Radio;

package/components/Radio/Radio.types.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react';
-import type {
-  RadioRenderProps,
-  RadioProps as UiRadioProps,
-} from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface RadioSlots {
-  control?: ReactNode | ((values: RadioRenderProps) => ReactNode);
-}
-
-export interface RadioProps extends UiRadioProps {
-  children?: ReactNode | ((values: RadioRenderProps) => ReactNode);
-  slots?: RadioSlots;
-  classNames?: SlotsToClasses<'control'>;
-}

package/components/Radio/index.ts

@@ -1,2 +0,0 @@
-export { Radio } from './Radio';
-export type { RadioProps, RadioSlots } from './Radio.types';

package/components/RadioGroup/RadioGroup.tsx

@@ -1,49 +0,0 @@
-import { Label, RadioGroup as AriaRadioGroup } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import { RadioGroupProps } from './RadioGroup.types';
-
-export function RadioGroup({
-  label,
-  errorMessage,
-  description,
-  orientation,
-  children,
-  className,
-  ...props
-}: RadioGroupProps) {
-  return (
-    <AriaRadioGroup
-      className={cn('flex flex-col gap-4', className)}
-      orientation={orientation}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {typeof children === 'function' ? (
-        children
-      ) : (
-        <>
-          {label && (
-            <Label className="flex text-slate-500 text-xs">{label}</Label>
-          )}
-          <div
-            className={cn(
-              'flex flex-col gap-2',
-              orientation === 'horizontal' && 'flex-row items-center gap-4'
-            )}
-          >
-            {children}
-          </div>
-          {description && (
-            <p className="flex mt-1 text-slate-500 text-sm">{description}</p>
-          )}
-
-          {errorMessage && (
-            <p className="flex pl-6 text-red-500 text-sm">{errorMessage}</p>
-          )}
-        </>
-      )}
-    </AriaRadioGroup>
-  );
-}
-
-export default RadioGroup;

package/components/RadioGroup/RadioGroup.types.ts

@@ -1,7 +0,0 @@
-import type { RadioGroupProps as AriaRadioGroupProps } from 'react-aria-components';
-
-export interface RadioGroupProps extends AriaRadioGroupProps {
-  label?: string;
-  description?: string;
-  errorMessage?: string;
-}

package/components/RadioGroup/index.ts

@@ -1,2 +0,0 @@
-export { RadioGroup } from './RadioGroup';
-export type { RadioGroupProps } from './RadioGroup.types';