@clicktap/ui 0.14.18 → 0.14.25

package/components/Icon/Hamburger.tsx

@@ -1,23 +0,0 @@
-'use client';
-
-import { cn } from '../../utils/cn';
-import type { IconProps } from './Icon.types';
-
-export function Hamburger({ className, ...rest }: IconProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 21 14"
-      width="20"
-      height="20"
-      fill="#20293A"
-      className={cn(className)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-    >
-      <path d="M0.583333 14H20.4167C20.7433 14 21 13.7433 21 13.4167V12.25C21 11.9233 20.7433 11.6667 20.4167 11.6667H0.583333C0.256667 11.6667 0 11.9233 0 12.25V13.4167C0 13.7433 0.256667 14 0.583333 14ZM0.583333 8.16667H20.4167C20.7433 8.16667 21 7.91 21 7.58333V6.41667C21 6.09 20.7433 5.83333 20.4167 5.83333H0.583333C0.256667 5.83333 0 6.09 0 6.41667V7.58333C0 7.91 0.256667 8.16667 0.583333 8.16667ZM0 0.583333V1.75C0 2.07667 0.256667 2.33333 0.583333 2.33333H20.4167C20.7433 2.33333 21 2.07667 21 1.75V0.583333C21 0.256667 20.7433 0 20.4167 0H0.583333C0.256667 0 0 0.256667 0 0.583333Z" />
-    </svg>
-  );
-}
-
-export default Hamburger;

package/components/Icon/Icon.types.ts

@@ -1,8 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export type IconProps = {
-  // eslint-disable-next-line react/require-default-props
-  className?: string;
-  // eslint-disable-next-line react/require-default-props
-  style?: CSSProperties;
-};

package/components/Icon/LinkArrow.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { cn } from '../../utils/cn';
-import type { IconProps } from './Icon.types';
-
-export function LinkArrow({ className, ...rest }: IconProps) {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cn(
-        'text-inherit transition duration-100 ease-linear',
-        className
-      )}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-    >
-      <path
-        d="M7.5 15L12.5 10L7.5 5"
-        stroke="#20293A"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export default LinkArrow;

package/components/Icon/Minus.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-export function Minus() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="7"
-      height="3"
-      viewBox="0 0 7 3"
-      fill="none"
-    >
-      <path
-        d="M6.36603 0.684659V2.09091H0.638761V0.684659H6.36603Z"
-        fill="#D5D5D5"
-      />
-    </svg>
-  );
-}
-
-export default Minus;

package/components/Icon/Plus.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-export function Plus() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="9"
-      height="10"
-      viewBox="0 0 9 10"
-      fill="none"
-    >
-      <path
-        d="M3.78329 9.10511V0.667613H5.21511V9.10511H3.78329ZM0.280451 5.60227V4.17045H8.71795V5.60227H0.280451Z"
-        fill="#D5D5D5"
-      />
-    </svg>
-  );
-}
-
-export default Plus;

package/components/Icon/Search.tsx

@@ -1,36 +0,0 @@
-'use client';
-
-import { cn } from '../../utils/cn';
-import type { IconProps } from './Icon.types';
-
-export function Search({ className, ...rest }: IconProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      className={cn('', className)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-    >
-      <path
-        d="M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z"
-        stroke="#20293A"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M17.5001 17.5013L13.9167 13.918"
-        stroke="#20293A"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export default Search;

package/components/Icon/Trash.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-export function Trash() {
-  return (
-    <svg
-      width="14"
-      height="18"
-      viewBox="0 0 14 18"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clipPath="url(#clip0_1432_3747)">
-        <path
-          d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z"
-          fill="white"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_1432_3747">
-          <rect width="14" height="18" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
-
-export default Trash;

package/components/Icon/Verified.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-export function Verified() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="21"
-      height="21"
-      fill="none"
-      viewBox="0 0 21 21"
-    >
-      <path
-        fill="currentColor"
-        d="M10.5 0a10.5 10.5 0 1 0 0 21 10.5 10.5 0 0 0 0-21ZM8.4 15.8l-5.3-5.3L4.7 9l3.8 3.8 8-8 1.5 1.5-9.5 9.4Z"
-      />
-    </svg>
-  );
-}
-
-export default Verified;

package/components/Icon/index.ts

@@ -1,14 +0,0 @@
-export { Account } from './Account';
-export { Cart } from './Cart';
-export { Checkmark } from './Checkmark';
-export { Cross } from './Cross';
-export { DownArrow } from './DownArrow';
-export { Hamburger } from './Hamburger';
-export { LinkArrow } from './LinkArrow';
-export { Minus } from './Minus';
-export { Plus } from './Plus';
-export { Search } from './Search';
-export { Trash } from './Trash';
-export { Verified } from './Verified';
-
-export type { IconProps } from './Icon.types';

package/components/Image/Image.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import type { ImageProps } from 'next/image';
-import { useState, useEffect } from 'react';
-import NextImage from 'next/image';
-import { cn } from '../../utils/cn';
-
-export function Image({ src, className, ...rest }: ImageProps) {
-  const [loadingImg, setLoadingImg] = useState(true);
-  const [image, setImage] = useState(src);
-  const [isClient, setIsClient] = useState(false);
-
-  useEffect(() => setImage(src), [src]);
-  useEffect(() => setIsClient(true), []);
-
-  return (
-    <NextImage
-      src={image}
-      className={cn(
-        'transition-[filter] ease-linear duration-200',
-        isClient && loadingImg && 'blur-md',
-        className
-      )}
-      onError={() => setImage('/images/placeholder.jpg')}
-      onLoad={() => setLoadingImg(false)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...rest}
-    />
-  );
-}
-
-export default Image;

package/components/Image/index.ts

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

package/components/Input/Input.tsx

@@ -1,109 +0,0 @@
-'use client';
-
-import {
-  FieldError,
-  Input as AriaInput,
-  Label,
-  Text,
-  TextField,
-} from 'react-aria-components';
-import { forwardRef } from 'react';
-import { cn } from '../../utils/cn';
-import type { InputProps } from './Input.types';
-import { Skeleton } from '../Skeleton/Skeleton';
-import { useIsClient } from '../../hooks/useIsClient';
-
-function InputSkeleton({
-  className,
-}: {
-  className: NonNullable<InputProps['classNames']>['skeleton'];
-}) {
-  return (
-    <Skeleton
-      className={cn('w-full h-10 rounded-md z-20 relative', className)}
-    />
-  );
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      inputProps,
-      label,
-      description,
-      errorMessage,
-      placeholder,
-      className,
-      classNames,
-      ...props
-    },
-    ref
-  ) => {
-    const isClient = useIsClient();
-
-    if (!isClient) {
-      return (
-        <div className={cn('flex flex-col w-full text-slate-900', className)}>
-          {label ? (
-            <Label
-              className={cn('flex text-slate-500 text-xs', classNames?.label)}
-            >
-              {label}
-            </Label>
-          ) : null}
-          <InputSkeleton className={classNames?.skeleton} />
-        </div>
-      );
-    }
-
-    return (
-      <TextField
-        className={cn('flex flex-col w-full text-slate-900', className)}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-      >
-        <Label className={cn('flex text-slate-500 text-xs', classNames?.label)}>
-          {label}
-        </Label>
-        <AriaInput
-          ref={ref}
-          placeholder={placeholder}
-          className={cn(
-            'border-solid border border-slate-300 rounded-md',
-            '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-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
-          )}
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          {...inputProps}
-        />
-
-        {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>
-      </TextField>
-    );
-  }
-);
-
-export default Input;

package/components/Input/Input.types.ts

@@ -1,17 +0,0 @@
-import type {
-  InputProps as AriaInputProps,
-  TextFieldProps,
-  ValidationResult,
-} from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface InputProps extends TextFieldProps {
-  label?: string;
-  description?: string;
-  errorMessage?: string | ((validation: ValidationResult) => string);
-  placeholder?: string;
-  classNames?: SlotsToClasses<
-    'label' | 'input' | 'description' | 'error' | 'skeleton'
-  >;
-  inputProps?: AriaInputProps;
-}

package/components/Input/index.ts

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

package/components/Link/Link.stories.tsx

@@ -1,96 +0,0 @@
-import { LinkProps } from 'react-aria-components';
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { Link } from './Link';
-
-type Story = StoryObj<typeof Link>;
-
-function Component({ children, ...props }: LinkProps) {
-  return <Link {...props}>{children}</Link>;
-}
-
-const meta: Meta<typeof Link> = {
-  component: Component,
-};
-
-export default meta;
-
-export const Example: Story = {
-  argTypes: {
-    href: {
-      control: 'text',
-    },
-    target: {
-      options: ['_blank', '_self', '_parent', '_top'],
-      control: 'select',
-    },
-    isDisabled: {
-      control: 'boolean',
-    },
-    autoFocus: {
-      control: 'boolean',
-    },
-    rel: {
-      control: 'text',
-    },
-    download: {
-      control: 'object',
-    },
-    ping: {
-      control: 'text',
-    },
-    referrerPolicy: {
-      options: [
-        'no-referrer',
-        'origin-when-cross-origin',
-        'same-origin',
-        'strict-origin',
-        'strict-origin-when-cross-origin',
-        'unsafe-url',
-      ],
-      control: 'select',
-    },
-    children: {
-      control: 'text',
-    },
-    className: {
-      control: 'object',
-    },
-    style: {
-      control: 'object',
-    },
-    onPress: {},
-    onBlur: {},
-    onFocus: {},
-    onFocusChange: {},
-    onHoverChange: {},
-    onHoverEnd: {},
-    onHoverStart: {},
-    onKeyDown: {},
-    onKeyUp: {},
-    onPressChange: {},
-    onPressEnd: {},
-    onPressStart: {},
-    onPressUp: {},
-  },
-  args: {
-    href: '/',
-    target: '_blank',
-    isDisabled: false,
-    autoFocus: false,
-    children: 'Press me',
-    onPress: action('onPress'),
-    onBlur: action('onBlur'),
-    onFocus: action('onFocus'),
-    onFocusChange: action('onFocusChange'),
-    onHoverChange: action('onHoverChange'),
-    onHoverEnd: action('onHoverEnd'),
-    onHoverStart: action('onHoverStart'),
-    onKeyDown: action('onKeyDown'),
-    onKeyUp: action('onKeyUp'),
-    onPressChange: action('onPressChange'),
-    onPressEnd: action('onPressEnd'),
-    onPressStart: action('onPressStart'),
-    onPressUp: action('onPressUp'),
-  },
-};

package/components/Link/Link.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { Link as UiLink } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { LinkProps } from './Link.types';
-
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ children, isDisabled, className, ...props }, ref) => (
-    <UiLink
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      isDisabled={isDisabled}
-      className={(renderProps) => {
-        const userClasses =
-          typeof className === 'function' ? className(renderProps) : className;
-
-        return cn(
-          'flex items-center cursor-pointer',
-          'text-slate-500',
-          'no-underline',
-          'transition-colors duration-300',
-          'hover:text-slate-800',
-          [
-            'data-[disabled="true"]:cursor-default',
-            'data-[disabled="true"]:text-slate-300',
-            'data-[disabled="true"]:hover:text-slate-300',
-          ],
-          userClasses
-        );
-      }}
-      ref={ref}
-    >
-      {children}
-    </UiLink>
-  )
-);
-
-export default Link;

package/components/Link/Link.types.ts

@@ -1,3 +0,0 @@
-import type { LinkProps as UILinkProps } from 'react-aria-components';
-
-export type LinkProps = UILinkProps;

package/components/Link/index.ts

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

package/components/Loader/CircularEasing.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import type { CSSProperties } from 'react';
-import { cn } from '../../utils/cn';
-import type { CircularEasingProps } from './CircularEasing.types';
-
-export function CircularEasing({
-  width,
-  stroke,
-  strokeLinecap = 'round',
-  strokeWidth = 5,
-  className,
-  style,
-  ...props
-}: CircularEasingProps) {
-  return (
-    <div
-      style={{ '--circularWidth': `${width}px`, ...style } as CSSProperties}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      className={cn(
-        'relative',
-        'm-0',
-        'w-[--circularWidth]',
-        'aspect-square',
-        className
-      )}
-    >
-      <motion.svg
-        animate={{
-          transform: 'rotate(360deg)',
-          transition: { repeat: Infinity, duration: 2, ease: 'linear' },
-        }}
-        viewBox="25 25 50 50"
-        className={cn(
-          'w-full h-full',
-          'absolute inset-x-0 inset-y-0',
-          'origin-center',
-          'm-auto'
-        )}
-      >
-        <motion.circle
-          animate={{
-            strokeDasharray: ['1, 200', '89, 200', '89, 200'],
-            strokeDashoffset: [0, -35, -124],
-            transition: { repeat: Infinity, duration: 1.5, ease: 'easeInOut' },
-          }}
-          className="path"
-          cx="50"
-          cy="50"
-          fill="none"
-          r="20"
-          strokeDasharray="1, 200"
-          strokeDashoffset="0"
-          stroke={stroke}
-          strokeLinecap={strokeLinecap}
-          strokeMiterlimit="10"
-          strokeWidth={strokeWidth}
-        />
-      </motion.svg>
-    </div>
-  );
-}
-
-export default CircularEasing;

package/components/Loader/CircularEasing.types.ts

@@ -1,8 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-export type CircularEasingProps = HTMLAttributes<HTMLDivElement> & {
-  stroke: string;
-  strokeLinecap?: 'butt' | 'round' | 'square';
-  strokeWidth?: number;
-  width: number;
-};

package/components/Loader/Pulse.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { motion } from 'framer-motion';
-import { cn } from '../../utils/cn';
-import type { PulseProps } from './Pulse.types';
-
-export function Pulse({ classNames }: PulseProps) {
-  return (
-    <span className={cn(classNames?.base)}>
-      {Array.from(new Array(3)).map((_, i) => (
-        <motion.div
-          // eslint-disable-next-line react/no-array-index-key
-          key={i}
-          animate={{
-            opacity: [1, 1, 0.7, 1, 1],
-            transform: [
-              'scale(1)',
-              'scale(1)',
-              'scale(0.1)',
-              'scale(1)',
-              'scale(1)',
-            ],
-            transition: {
-              repeat: Infinity,
-              duration: 0.75,
-              delay: i * 0.1,
-              // ease: [0.2, 0.68, 0.18, 1.08],
-            },
-          }}
-          className={cn(
-            'bg-slate-300',
-            'inline-block',
-            'w-2',
-            'h-2',
-            'm-0.5',
-            'rounded-lg',
-            classNames?.dot
-          )}
-        />
-      ))}
-    </span>
-  );
-}
-
-export default Pulse;

package/components/Loader/Pulse.types.ts

@@ -1,5 +0,0 @@
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface PulseProps {
-  classNames?: SlotsToClasses<'base' | 'dot'>;
-}

package/components/Loader/index.ts

@@ -1,4 +0,0 @@
-export { CircularEasing } from './CircularEasing';
-export { Pulse } from './Pulse';
-export type { CircularEasingProps } from './CircularEasing.types';
-export type { PulseProps } from './Pulse.types';