@clicktap/ui 0.14.19 → 0.14.25

package/components/NumberInput/NumberInput.tsx

@@ -1,164 +0,0 @@
-'use client';
-
-import {
-  Group,
-  NumberField,
-  Button,
-  Input,
-  Text,
-  FieldError,
-  Label,
-} from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { NumberInputProps } from './NumberInput.types';
-
-const DecrementIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M5 12H19"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const IncrementIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M12 5V19M5 12H19"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-export function NumberInput({
-  label,
-  description,
-  errorMessage,
-  isInvalid,
-  isReadOnly,
-  slots,
-  className,
-  classNames,
-  ...props
-}: NumberInputProps) {
-  const groupClasses = [
-    'group-hover:border-slate-400',
-    'group-disabled:border-slate-200',
-    'group-invalid:border-red-500 group-invalid:bg-red-100 group-invalid:text-red-600',
-    'group-invalid:group-hover:border-red-600',
-    'group-invalid:group-focus:border-red-600',
-  ];
-  const buttonClasses = [
-    'flex items-center justify-center shrink-0',
-    'rounded-md border-solid border',
-    'font-semibold text-sm',
-    'w-10 h-10 py-0 px-0 cursor-pointer disabled:cursor-default',
-    'transition-all duration-200 ease-in-out',
-    'focus:outline-2 focus:outline focus:outline-slate-200 pressed:scale-95',
-    'bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent',
-    'border-slate-300 hover:border-slate-400 focus:border-slate-400 disabled:border-slate-200',
-    'text-slate-900 disabled:text-slate-500',
-    'group-aria-readonly:bg-slate-100 group-aria-readonly:text-slate-500 group-aria-readonly:border-slate-200 group-aria-readonly:cursor-default',
-  ];
-
-  return (
-    <NumberField
-      isInvalid={isInvalid}
-      isReadOnly={isReadOnly}
-      className={cn('flex flex-col w-full', className)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      <Label className={cn('flex text-slate-500 text-sm', classNames?.label)}>
-        {label}
-      </Label>
-
-      <Group
-        isInvalid={isInvalid}
-        aria-readonly={isReadOnly}
-        className={cn(
-          'flex rounded-md group',
-          'focus-within:outline-2 focus-within:outline focus-within:outline-slate-200',
-          'focus-within:invalid:outline-2 focus-within:invalid:outline focus-within:invalid:outline-slate-200',
-          'disabled:bg-slate-100',
-          classNames?.group
-        )}
-      >
-        <Button
-          slot="decrement"
-          className={cn(
-            buttonClasses,
-            groupClasses,
-            'border-r-0 rounded-r-none',
-            classNames?.decrementBtn
-          )}
-        >
-          {slots?.decrementIcon || DecrementIcon}
-        </Button>
-
-        <Input
-          className={cn(
-            'border-solid border border-slate-300 text-center',
-            'text-sm text-slate-900 placeholder-slate-400',
-            '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-0 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',
-            groupClasses,
-            classNames?.input
-          )}
-        />
-
-        <Button
-          slot="increment"
-          className={cn(
-            buttonClasses,
-            groupClasses,
-            'border-l-0 rounded-l-none',
-            classNames?.incrementBtn
-          )}
-        >
-          {slots?.incrementIcon || IncrementIcon}
-        </Button>
-      </Group>
-
-      {description && (
-        <Text
-          className={cn('flex text-slate-500 text-sm', classNames?.description)}
-          slot="description"
-        >
-          {description}
-        </Text>
-      )}
-      <FieldError
-        className={cn('flex text-red-500 text-sm', classNames?.error)}
-      >
-        {errorMessage}
-      </FieldError>
-    </NumberField>
-  );
-}
-
-export default NumberInput;

package/components/NumberInput/NumberInput.types.ts

@@ -1,22 +0,0 @@
-import type { ReactNode } from 'react';
-import type { NumberFieldProps, ValidationResult } from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface NumberInputProps extends NumberFieldProps {
-  label?: string;
-  description?: string;
-  errorMessage?: string | ((validation: ValidationResult) => string);
-  slots?: {
-    decrementIcon?: ReactNode;
-    incrementIcon?: ReactNode;
-  };
-  classNames?: SlotsToClasses<
-    | 'label'
-    | 'input'
-    | 'description'
-    | 'error'
-    | 'incrementBtn'
-    | 'decrementBtn'
-    | 'group'
-  >;
-}

package/components/NumberInput/index.ts

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

package/components/NumberTicker/DigitResolver.tsx

@@ -1,119 +0,0 @@
-'use client';
-
-import { memo, useId, useMemo, useCallback, useState } from 'react';
-import { motion } from 'framer-motion';
-import type { DigitProps, DigitResolverProps } from './DigitResolver.types';
-import { useColumnTransition } from './hooks/useColumnTransition';
-
-const NUMBER_REGEX = /^-?\d*\.?\d+$/;
-
-function Digit({
-  digit,
-  tickerMotionProps,
-  transition,
-  updateTransition,
-}: DigitProps) {
-  const [position, setPosition] = useState(0);
-
-  const updatePosition = useCallback(
-    (node: HTMLDivElement) => {
-      if (node !== null) {
-        setPosition(node.clientHeight * parseInt(digit, 10));
-      }
-    },
-    [digit]
-  );
-
-  return (
-    <span className="relative h-auto block" ref={updatePosition} aria-hidden>
-      <motion.span
-        className="absolute block bottom-0 h-[1000%]"
-        initial={{ x: 0, y: position }}
-        animate={{ x: 0, y: position }}
-        transition={{ ...transition }}
-        onAnimationComplete={updateTransition}
-        style={{ fontFeatureSettings: 'tnum' }}
-      >
-        {[9, 8, 7, 6, 5, 4, 3, 2, 1, 0].map((i) => (
-          <motion.span
-            className="block text-[inherit] leading-[inherit] tabular-nums"
-            key={i}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...tickerMotionProps}
-          >
-            {i}
-          </motion.span>
-        ))}
-      </motion.span>
-      <motion.span
-        className="block text-[inherit] leading-[inherit] invisible"
-        aria-hidden
-      >
-        0
-      </motion.span>
-    </span>
-  );
-}
-
-const DigitMemo = memo(Digit);
-
-export function DigitResolver({
-  delta,
-  digits,
-  isNegative,
-  tickerMotionProps,
-  ...transitionConfig
-}: DigitResolverProps) {
-  const id = useId();
-  const motionProps = useMemo(
-    () =>
-      typeof tickerMotionProps === 'function'
-        ? tickerMotionProps({ delta })
-        : tickerMotionProps,
-    [delta, tickerMotionProps]
-  );
-
-  const columnTransition = useColumnTransition({
-    ...transitionConfig,
-  });
-
-  return (
-    <>
-      {isNegative && (
-        <motion.span
-          className="block text-[inherit] leading-[inherit] tabular-nums"
-          aria-hidden
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          {...motionProps}
-        >
-          -
-        </motion.span>
-      )}
-      {digits.map((digit, idx) =>
-        NUMBER_REGEX.test(digit) ? (
-          <DigitMemo
-            // eslint-disable-next-line react/no-array-index-key
-            key={`${id}_${idx}`}
-            digit={digit}
-            tickerMotionProps={motionProps}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...columnTransition}
-          />
-        ) : (
-          <motion.span
-            className="block text-[inherit] leading-[inherit] tabular-nums"
-            // eslint-disable-next-line react/no-array-index-key
-            key={`${id}_${idx}`}
-            aria-hidden
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...motionProps}
-          >
-            {digit}
-          </motion.span>
-        )
-      )}
-    </>
-  );
-}
-
-export default DigitResolver;

package/components/NumberTicker/DigitResolver.types.ts

@@ -1,18 +0,0 @@
-import type { MotionProps, Transition } from 'framer-motion';
-import { NumberTickerProps, TickerMotionProps } from './NumberTicker.types';
-
-export type DigitResolverProps = Pick<
-  NumberTickerProps,
-  'tickerMotionProps' | 'skipFirstAnimation' | 'transition'
-> &
-  TickerMotionProps & {
-    digits: string[];
-    isNegative: boolean;
-  };
-
-export type DigitProps = Pick<NumberTickerProps, 'tickerMotionProps'> & {
-  digit: string;
-  tickerMotionProps: MotionProps | undefined;
-  transition: Transition;
-  updateTransition: () => void;
-};

package/components/NumberTicker/NumberTicker.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { cn } from '../../utils/cn';
-import type { NumberTickerProps } from './NumberTicker.types';
-import { useNumberDelta } from './hooks/useNumberDelta';
-import { useNumberTicker } from './hooks/useNumberTicker';
-import { DigitResolver } from './DigitResolver';
-
-export function NumberTicker({
-  value,
-  asLocal,
-  localeConfig,
-  precision,
-  slots,
-  skipFirstAnimation,
-  transition,
-  tickerMotionProps,
-  className,
-  ...props
-}: NumberTickerProps) {
-  const { digits, isNegative } = useNumberTicker({
-    value,
-    asLocal,
-    localeConfig,
-    precision,
-  });
-  const delta = useNumberDelta(value);
-
-  return (
-    <motion.span
-      className={cn(
-        'flex h-auto flex-row flex-nowrap overflow-hidden relative text-[inherit]',
-        className
-      )}
-      aria-valuenow={value}
-      layout
-      layoutRoot
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {slots?.startContent}
-      <DigitResolver
-        isNegative={isNegative}
-        digits={digits}
-        tickerMotionProps={tickerMotionProps}
-        skipFirstAnimation={skipFirstAnimation}
-        transition={transition}
-        delta={delta}
-      />
-      {slots?.endContent}
-    </motion.span>
-  );
-}
-
-export default NumberTicker;

package/components/NumberTicker/NumberTicker.types.ts

@@ -1,96 +0,0 @@
-import type { MotionProps, Transition } from 'framer-motion';
-import type { CSSProperties, ReactNode } from 'react';
-
-export type TickerMotionProps = {
-  delta: 'increase' | 'decrease' | 'same';
-};
-
-export type TransitionConfig = {
-  /**
-   * Whether the NumberTicker animation on render
-   * @default true
-   */
-  skipFirstAnimation?: boolean;
-  /**
-   * The transition props to modify the NumberTicker animation.
-   * Use the framer motion transition API to create your own transition.
-   */
-  transition?: Transition;
-};
-
-export interface NumberTickerConfig {
-  value: number;
-  /**
-   * Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.
-   * @default 2
-   */
-  precision?: number;
-  /**
-   *  Whether the NumberTicker value as Intl.NumberFormat
-   *  @default false
-   */
-  asLocal?: boolean;
-  /**
-   *  The configuration for the NumberTicker value as Intl.NumberFormat
-   *  By default the object {
-        locale: 'en-US',
-        options: {
-          style: 'currency',
-          currency: 'USD',
-          minimumFractionDigits: 2,
-        },
-      }
-   */
-  localeConfig?: {
-    locale?: string;
-    options?: Intl.NumberFormatOptions | undefined;
-  };
-}
-
-export type NumberTickerProps = NumberTickerConfig &
-  TransitionConfig & {
-    style?: CSSProperties;
-    className?: string;
-    slots?: {
-      /**
-       * Element to be rendered in the left side of the NumberTicker.
-       */
-      startContent?: ReactNode;
-      /**
-       * Element to be rendered in the right side of the NumberTicker.
-       */
-      endContent?: ReactNode;
-    };
-
-    /**
-     * The motion props to modify the each Ticker animation.
-     * Use the framer motion API to create your own animation. With the possible to use the delta value
-     * Example:
-     * 
-     * const getColor = (delta: TickerMotionProps) => {
-          switch (d) {
-            case 'increase':
-              return '#48ff0b';
-            case 'decrease':
-              return '#F22613';
-            default:
-              return '#fff';
-          }
-        };
-
-        <NumberTicker
-          tickerMotionProps={({ delta }) => ({
-            animate: {
-              color: [getColor(delta), '#fff'],
-              transition: {
-                duration: 2,
-              },
-            },
-          })}
-        />
-     * 
-     */
-    tickerMotionProps?:
-      | MotionProps
-      | ((props: TickerMotionProps) => MotionProps);
-  };

package/components/NumberTicker/hooks/useColumnTransition.ts

@@ -1,36 +0,0 @@
-import { Transition } from 'framer-motion';
-import { useState, useMemo, useCallback } from 'react';
-import { TransitionConfig } from '../NumberTicker.types';
-
-export const useColumnTransition = ({
-  skipFirstAnimation = true,
-  transition: transitionProps,
-}: TransitionConfig) => {
-  const [firstAnimation, setFirstAnimation] = useState(skipFirstAnimation);
-
-  const transition = useMemo<Transition>(() => {
-    return firstAnimation
-      ? {
-          duration: 0.1,
-        }
-      : {
-          ...(transitionProps || {
-            type: 'spring',
-            stiffness: 50,
-          }),
-        };
-  }, [firstAnimation, transitionProps]);
-
-  const updateTransition = useCallback(() => {
-    if (skipFirstAnimation) {
-      setFirstAnimation(false);
-    }
-  }, [skipFirstAnimation]);
-
-  return {
-    transition,
-    updateTransition,
-  };
-};
-
-export default useColumnTransition;

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;