@clicktap/ui 0.14.12 → 0.14.13

package/components/DobInput/DobInput.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { useEffect, useId, useState } from 'react';
+import { FieldError, Input, Label, TextField } from 'react-aria-components';
+import {
+  type InputAttributes,
+  NumberFormatBase,
+  type NumberFormatValues,
+} from 'react-number-format';
+import { cn } from '../../utils/cn';
+// import { ErrorMessage } from '../ErrorMessage';
+// import { FieldLabel } from '../FieldLabel';
+import type { InputProps } from '../Input/Input.types';
+// import { inputBaseClasses } from '../Input/Input';
+
+function AriaInput({ className, ...props }: InputAttributes) {
+  return (
+    <Input
+      className={cn('peer h-11', /** inputBaseClasses, */ className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    />
+  );
+}
+
+export function DobInput({
+  label,
+  description,
+  errorMessage,
+  type,
+  className,
+  classNames,
+  // inputProps,
+  id,
+  value,
+  onChange,
+  ...props
+}: InputProps) {
+  const inputId = useId();
+  const [inputValue, setInputValue] = useState(value || '');
+
+  useEffect(() => {
+    setInputValue(value || '');
+  }, [value]);
+
+  const format = (val: string) => {
+    if (val === '') return '';
+    const cleanedVal = val.replace(/\s+/g, '');
+    const cardFormat = '##-##-####';
+
+    let formattedVal = '';
+    let position = 0;
+
+    for (let i = 0; i < cardFormat.length; i += 1) {
+      if (cardFormat[i] === '#') {
+        if (position < cleanedVal.length) {
+          formattedVal += cleanedVal[position];
+          position += 1;
+        } else {
+          break;
+        }
+      } else {
+        formattedVal += cardFormat[i];
+      }
+    }
+
+    return formattedVal;
+  };
+
+  const handleValueChange = (values: NumberFormatValues) => {
+    setInputValue(values.formattedValue);
+    if (onChange) {
+      onChange(values.formattedValue);
+    }
+  };
+
+  return (
+    <TextField
+      className={cn('flex flex-col w-full text-slate-900', className)}
+      type={type}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <Label
+        className={cn('flex text-slate-500 text-xs', classNames?.label)}
+        htmlFor={id || inputId}
+      >
+        {label}
+      </Label>
+      <NumberFormatBase
+        id={id || inputId}
+        value={inputValue}
+        format={format}
+        customInput={AriaInput}
+        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
+        )}
+        onValueChange={handleValueChange}
+      />
+
+      {errorMessage && (
+        <FieldError className={cn(classNames?.error)}>
+          {errorMessage}
+        </FieldError>
+      )}
+    </TextField>
+  );
+}
+
+export default DobInput;

package/components/DobInput/index.ts

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

package/components/Drawer/Drawer.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { forwardRef } from 'react';
+import type { Ref, ReactNode, CSSProperties } from 'react';
+import { Dialog } from 'react-aria-components';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+import type { DrawerProps } from './Drawer.types';
+
+const directionAnimatation = {
+  top: {
+    hidden: {
+      y: '-100%',
+      transition: {
+        ease: 'easeIn',
+      },
+    },
+    visible: {
+      y: 0,
+      transition: {
+        ease: 'easeOut',
+      },
+    },
+  },
+  bottom: {
+    hidden: {
+      y: '100%',
+      transition: {
+        ease: 'easeIn',
+      },
+    },
+    visible: {
+      y: 0,
+      transition: {
+        ease: 'easeOut',
+      },
+    },
+  },
+  right: {
+    hidden: {
+      x: '100%',
+      transition: {
+        ease: 'easeIn',
+      },
+    },
+    visible: {
+      x: 0,
+      transition: {
+        ease: 'easeOut',
+      },
+    },
+  },
+  left: {
+    hidden: {
+      x: '-100%',
+      transition: {
+        ease: 'easeIn',
+      },
+    },
+    visible: {
+      x: 0,
+      transition: {
+        ease: 'easeOut',
+      },
+    },
+  },
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ForwardedDialog = forwardRef<HTMLElement, any>(
+  ({ style, size = '20rem', ...props }, ref: Ref<HTMLElement>) => {
+    // Separate the dynamic style logic
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const ariaStyle =
+      typeof style === 'function'
+        ? // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          style(props)
+        : ({
+            ...style,
+            '--drawer-size': `${size as string}`,
+          } as CSSProperties);
+
+    return (
+      // Pass only static styles to framer-motion
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, react/jsx-props-no-spreading
+      <Dialog {...props} ref={ref} style={ariaStyle} />
+    );
+  }
+);
+
+const MotionDrawer = motion.create(ForwardedDialog);
+
+export function Drawer({
+  direction = 'right',
+  children,
+  className,
+  animationVariants,
+  ...props
+}: DrawerProps) {
+  return (
+    <MotionDrawer
+      className={cn(
+        'fixed p-8 outline-0 bg-white',
+        'border-solid border-slate-200',
+        'max-w-full max-h-[var(--visual-viewport-height)]',
+        direction === 'top' &&
+          'top-0 left-0 right-0 bottom-auto border-b shadow-[0_8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]',
+        direction === 'right' &&
+          'top-0 left-auto bottom-0 right-0 border-l shadow-[-8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]',
+        direction === 'bottom' &&
+          'bottom-0 left-0 right-0 top-auto border-t shadow-[0_-8px_24px_rgba(0,0,0,0.1)] h-[var(--drawer-size)]',
+        direction === 'left' &&
+          'top-0 bottom-0 left-0 right-auto border-r shadow-[8px_0_24px_rgba(0,0,0,0.1)] w-[var(--drawer-size)]',
+        className
+      )}
+      data-direction={direction}
+      variants={animationVariants || directionAnimatation[direction]}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children as ReactNode}
+    </MotionDrawer>
+  );
+}
+
+export default Drawer;

package/components/Drawer/Drawer.types.ts

@@ -0,0 +1,11 @@
+import type { Key } from 'react';
+import type { DialogProps } from 'react-aria-components';
+import type { MotionStyle, Variants } from 'framer-motion';
+
+export type DrawerProps = DialogProps & {
+  direction?: 'top' | 'right' | 'bottom' | 'left';
+  key?: Key;
+  style?: MotionStyle;
+  animationVariants?: Variants;
+  size?: string;
+};

package/components/Drawer/index.ts

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

package/components/Icon/Account.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import type { IconProps } from './Icon.types';
+
+export function Account({ 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}
+    >
+      <g clipPath="url(#clip0_283_14902)">
+        <path
+          d="M15 16.668C15 15.3419 14.4732 14.0701 13.5355 13.1324C12.5979 12.1948 11.3261 11.668 10 11.668C8.67392 11.668 7.40215 12.1948 6.46447 13.1324C5.52678 14.0701 5 15.3419 5 16.668"
+          stroke="#20293A"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9.99996 11.6667C11.8409 11.6667 13.3333 10.1743 13.3333 8.33333C13.3333 6.49238 11.8409 5 9.99996 5C8.15901 5 6.66663 6.49238 6.66663 8.33333C6.66663 10.1743 8.15901 11.6667 9.99996 11.6667Z"
+          stroke="#20293A"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M10.0001 18.3346C14.6025 18.3346 18.3334 14.6037 18.3334 10.0013C18.3334 5.39893 14.6025 1.66797 10.0001 1.66797C5.39771 1.66797 1.66675 5.39893 1.66675 10.0013C1.66675 14.6037 5.39771 18.3346 10.0001 18.3346Z"
+          stroke="#20293A"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_283_14902">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default Account;

package/components/Icon/Cart.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import type { IconProps } from './Icon.types';
+
+export function Cart({ 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="M5 1.66797L2.5 5.0013V16.668C2.5 17.11 2.67559 17.5339 2.98816 17.8465C3.30072 18.159 3.72464 18.3346 4.16667 18.3346H15.8333C16.2754 18.3346 16.6993 18.159 17.0118 17.8465C17.3244 17.5339 17.5 17.11 17.5 16.668V5.0013L15 1.66797H5Z"
+        stroke="#20293A"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.5 5H17.5"
+        stroke="#20293A"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.3334 8.33203C13.3334 9.21609 12.9822 10.0639 12.3571 10.6891C11.732 11.3142 10.8841 11.6654 10.0001 11.6654C9.11603 11.6654 8.26818 11.3142 7.64306 10.6891C7.01794 10.0639 6.66675 9.21609 6.66675 8.33203"
+        stroke="#20293A"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default Cart;

package/components/Icon/Checkmark.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+export function Checkmark() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 52 52"
+      strokeWidth="5"
+      strokeMiterlimit="10"
+      className="w-6 h-6 rounded-full block stroke-[#20293A] animate-[CheckMarkFill_0.4s_ease-in-out_0.4s_forwards,CheckMarkScale_0.3s_ease-in-out_0.9s_both]"
+    >
+      <circle
+        cx="26"
+        cy="26"
+        r="25"
+        fill="none"
+        strokeDasharray="166"
+        strokeDashoffset="166"
+        strokeWidth="5"
+        strokeMiterlimit="10"
+        className="animate-[CheckMarkStroke_0.6s_cubic-bezier(0.65,0,0.45,1)_forwards] stroke-[#20293A]"
+      />
+      <path
+        fill="none"
+        d="M14.1 27.2l7.1 7.2 16.7-16.8"
+        strokeDasharray="48"
+        strokeDashoffset="48"
+        className="animate-[CheckMarkStroke_0.3s_cubic-bezier(0.65,0,0.45,1)_0.8s_forwards] origin-[50%_50%]"
+      />
+    </svg>
+  );
+}
+
+export default Checkmark;

package/components/Icon/Cross.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import type { IconProps } from './Icon.types';
+
+export function Cross({ className, ...rest }: IconProps) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...rest}
+    >
+      <path
+        d="M12 4L4 12"
+        stroke="#20293A"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4 4L12 12"
+        stroke="#20293A"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default Cross;

package/components/Icon/DownArrow.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import type { IconProps } from './Icon.types';
+
+export function DownArrow({ className, ...rest }: IconProps) {
+  return (
+    <svg
+      width="14"
+      height="8"
+      viewBox="0 0 14 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn(className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...rest}
+    >
+      <path d="M13 0.5L7 6.5L1 0.499999" stroke="currentColor" />
+    </svg>
+  );
+}
+
+export default DownArrow;

package/components/Icon/Hamburger.tsx

@@ -0,0 +1,23 @@
+'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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,32 @@
+'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

@@ -0,0 +1,20 @@
+'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

@@ -0,0 +1,20 @@
+'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

@@ -0,0 +1,36 @@
+'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

@@ -0,0 +1,27 @@
+'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

@@ -0,0 +1,20 @@
+'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

@@ -0,0 +1,14 @@
+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';