@clicktap/ui 0.14.18 → 0.14.25

package/components/DateTimeFormat/index.ts

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

package/components/Dialog/Dialog.tsx

@@ -1,65 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import type { Ref, ReactNode } from 'react';
-import { Dialog as AriaDialog } from 'react-aria-components';
-import { motion } from 'framer-motion';
-import { cn } from '../../utils/cn';
-import type { DialogProps } from './Dialog.types';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ForwardedDialog = forwardRef<HTMLElement, any>(
-  ({ style, animationVariants, ...props }, ref: Ref<HTMLElement>) => {
-    // Separate the dynamic style logic
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
-    const ariaStyle = typeof style === 'function' ? style(props) : style;
-
-    return (
-      // Pass only static styles to framer-motion
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, react/jsx-props-no-spreading
-      <AriaDialog {...props} ref={ref} style={ariaStyle} />
-    );
-  }
-);
-
-const MotionDialog = motion.create(ForwardedDialog);
-
-export function Dialog({
-  className,
-  children,
-  animationVariants,
-  ...props
-}: DialogProps) {
-  return (
-    <MotionDialog
-      className={cn(
-        'p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4',
-        'shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg bg-white border border-solid border-slate-400',
-        'transform -translate-x-1/2 -translate-y-1/2',
-        className
-      )}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      variants={
-        animationVariants || {
-          hidden: {
-            transform: 'translate(-50%, -50%) scale(0.8)',
-            transition: {
-              ease: 'backIn',
-            },
-          },
-          visible: {
-            transform: 'translate(-50%, -50%) scale(1)',
-            transition: {
-              ease: 'backOut',
-            },
-          },
-        }
-      }
-    >
-      {children as ReactNode}
-    </MotionDialog>
-  );
-}
-
-export default Dialog;

package/components/Dialog/Dialog.types.ts

@@ -1,9 +0,0 @@
-import type { Key } from 'react';
-import type { DialogProps as UIDialogProps } from 'react-aria-components';
-import { MotionStyle, Variants } from 'framer-motion';
-
-export type DialogProps = Omit<UIDialogProps, 'onAnimationStart'> & {
-  key?: Key;
-  style?: MotionStyle;
-  animationVariants?: Variants;
-};

package/components/Dialog/index.ts

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

package/components/DialogTrigger/DialogTrigger.tsx

@@ -1,45 +0,0 @@
-'use client';
-
-import { createContext, useState, useMemo, useContext } from 'react';
-import type { Dispatch, SetStateAction } from 'react';
-import { DialogTrigger as UIDialogTrigger } from 'react-aria-components';
-import type { DialogTriggerProps } from 'react-aria-components';
-import type { DriverAnimationState } from './DialogTrigger.types';
-
-const DialogTriggerContext = createContext<{
-  animation: DriverAnimationState;
-  setAnimation: Dispatch<SetStateAction<DriverAnimationState>>;
-  onOpenChange: (isOpen: boolean) => void;
-}>({
-  animation: 'unmounted',
-  setAnimation: () => {},
-  onOpenChange: () => {},
-});
-
-export const useDialogTrigger = () => useContext(DialogTriggerContext);
-
-export function DialogTrigger(props: DialogTriggerProps) {
-  const [animation, setAnimation] = useState<DriverAnimationState>('unmounted');
-
-  const onOpenChange = (isOpen: boolean) => {
-    setAnimation(isOpen ? 'visible' : 'hidden');
-  };
-
-  const value = useMemo(
-    () => ({
-      animation,
-      setAnimation,
-      onOpenChange,
-    }),
-    [animation]
-  );
-
-  return (
-    <DialogTriggerContext.Provider value={value}>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <UIDialogTrigger {...props} onOpenChange={onOpenChange} />
-    </DialogTriggerContext.Provider>
-  );
-}
-
-export default DialogTrigger;

package/components/DialogTrigger/DialogTrigger.types.ts

@@ -1,6 +0,0 @@
-import type { DialogTriggerProps as UIDialogTriggerProps } from 'react-aria-components';
-
-/** @todo this feels like it should be renamed, maybe moved to modal directly */
-export type DriverAnimationState = 'unmounted' | 'visible' | 'hidden';
-
-export type DialogTriggerProps = UIDialogTriggerProps;

package/components/DialogTrigger/index.ts

@@ -1,5 +0,0 @@
-export { DialogTrigger, useDialogTrigger } from './DialogTrigger';
-export type {
-  DriverAnimationState,
-  DialogTriggerProps,
-} from './DialogTrigger.types';

package/components/Divider/Divider.stories.tsx

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SeparatorProps } from 'react-aria';
-import { Divider } from './Divider';
-
-type Story = StoryObj<typeof Divider>;
-
-function Component(props: SeparatorProps) {
-  const { orientation } = props;
-  const display = orientation === 'vertical' ? 'flex' : 'block';
-
-  return (
-    <div style={{ display }}>
-      <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <Divider {...props} />
-      <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</div>
-    </div>
-  );
-}
-
-const meta: Meta<typeof Divider> = {
-  component: Component,
-};
-
-export default meta;
-
-export const Example: Story = {
-  argTypes: {
-    orientation: {
-      options: ['horizontal', 'vertical'],
-      control: 'select',
-    },
-  },
-  args: {
-    orientation: 'horizontal',
-  },
-};

package/components/Divider/Divider.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import { useSeparator } from 'react-aria';
-import { cn } from '../../utils/cn';
-import type { DividerProps } from './Divider.types';
-
-export function Divider({
-  orientation = 'horizontal',
-  className,
-  ...props
-}: DividerProps) {
-  const { separatorProps } = useSeparator({ ...props, orientation });
-  const combinedProps = { ...props, ...separatorProps };
-
-  return (
-    <div
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...combinedProps}
-      className={cn(
-        'bg-slate-200',
-        ['w-full', 'h-px', 'my-4', 'mx-0'],
-        [
-          'aria-[orientation=vertical]:w-px',
-          'aria-[orientation=vertical]:h-auto',
-          'aria-[orientation=vertical]:my-0',
-          'aria-[orientation=vertical]:mx-4',
-        ],
-        className
-      )}
-    />
-  );
-}
-
-export default Divider;

package/components/Divider/Divider.types.ts

@@ -1,5 +0,0 @@
-import { SeparatorProps } from 'react-aria';
-
-export type DividerProps = SeparatorProps & {
-  className?: string;
-};

package/components/Divider/index.ts

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

package/components/DobInput/DobInput.tsx

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

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

package/components/Drawer/Drawer.tsx

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

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

package/components/Drawer/index.ts

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

package/components/Icon/Account.tsx

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

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

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

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

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