@clicktap/ui 0.14.19 → 0.14.25

package/components/TimeInput/TimeInput.stories.tsx

@@ -1,125 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Form } from 'react-aria-components';
-import { action } from '@storybook/addon-actions';
-import { TimeInput } from './TimeInput';
-import { TimeInputProps } from './TimeInput.types';
-import { Button } from '../Button/Button';
-
-type Story = StoryObj<typeof TimeInput>;
-
-function Component({ children, ...props }: TimeInputProps) {
-  return (
-    <Form
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.5rem',
-        width: '20rem',
-      }}
-      onSubmit={(e) => {
-        e.preventDefault();
-        action('onPress');
-      }}
-    >
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <TimeInput {...props}>{children}</TimeInput>
-      <Button size="sm" type="submit">
-        Submit
-      </Button>
-    </Form>
-  );
-}
-
-const meta: Meta<typeof TimeInput> = {
-  component: Component,
-};
-
-export default meta;
-
-export const Base: Story = {
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'The content to display as label',
-    },
-    description: {
-      control: 'text',
-      description: 'The content to display as description',
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Whether the input is disabled.',
-    },
-    isInvalid: {
-      control: 'boolean',
-      description: 'Whether the input value is invalid.',
-    },
-    isRequired: {
-      control: 'boolean',
-      description:
-        'Whether user input is required on the input before form submission.',
-    },
-    isReadOnly: {
-      control: 'boolean',
-      description:
-        'Whether the input can be selected but not changed by the user.',
-    },
-    hideTimeZone: {
-      control: 'boolean',
-      description: 'Whether to hide the time zone abbreviation.',
-    },
-    shouldForceLeadingZeros: {
-      control: 'boolean',
-      description:
-        'Whether to always show leading zeros in the hour field. By default, this is determined by the user&aposs locale.',
-    },
-    hourCycle: {
-      options: [12, 24],
-      control: { type: 'inline-radio' },
-      description:
-        'Whether to display the time in 12 or 24 hour format. By default, this is determined by the user&apos;s locale.',
-    },
-    granularity: {
-      options: ['hour', 'minute', 'second'],
-      control: { type: 'inline-radio' },
-      description:
-        'Determines the smallest unit that is displayed in the time picker',
-      table: {
-        defaultValue: { summary: 'minute' },
-      },
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'The current error messages for the input if it is invalid.',
-    },
-    style: {
-      control: 'object',
-      description:
-        'The inline style for the element. A function may be provided to compute the style based on component state',
-    },
-    className: {
-      control: 'text',
-      description: 'The CSS className for the element.',
-    },
-    autoFocus: {
-      control: 'boolean',
-      description: 'Whether the element should receive focus on render.',
-    },
-  },
-  args: {
-    label: '',
-    description: '',
-    isDisabled: false,
-    isInvalid: false,
-    isRequired: false,
-    isReadOnly: false,
-    errorMessage: 'Please fill out this field.',
-    shouldForceLeadingZeros: false,
-    hideTimeZone: false,
-    hourCycle: 24,
-    granularity: 'minute',
-    autoFocus: false,
-    style: {},
-    className: '',
-  },
-};

package/components/TimeInput/TimeInput.tsx

@@ -1,81 +0,0 @@
-'use client';
-
-import {
-  DateInput,
-  DateSegment,
-  FieldError,
-  Label,
-  Text,
-  TimeField,
-} from 'react-aria-components';
-import { TimeInputProps } from './TimeInput.types';
-import { cn } from '../../utils/cn';
-
-export function TimeInput({
-  label,
-  description,
-  errorMessage,
-  className,
-  classNames,
-  ...props
-}: TimeInputProps) {
-  return (
-    <TimeField
-      className={cn('text-slate-900', className)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      <Label className={cn('flex text-slate-500 text-sm', classNames?.label)}>
-        {label}
-      </Label>
-      <DateInput
-        className={cn(
-          'flex items-center',
-          'border-solid border border-slate-300 rounded-md',
-          'text-sm text-slate-900',
-          'h-10 px-1 py-0 m-0 w-full',
-          'bg-white',
-          'transition-all duration-200 ease-in-out',
-          'hover:border-slate-400',
-          'focus-within:outline-2 focus-within:outline focus-within:outline-slate-200 focus-within: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-within:border-red-600 invalid:focus-within:outline-red-200',
-          classNames?.input
-        )}
-      >
-        {(segment) => (
-          <DateSegment
-            segment={segment}
-            className={cn(
-              'p-1 tabular-nums text-end text-slate-900',
-              'invalid:text-red-500',
-              'disabled:cursor-default disabled:select-none disabled:text-slate-400',
-              'focus:text-slate-900 focus:bg-slate-200 focus:outline-0 focus:rounded-md focus:caret-transparent focus:invalid:bg-red-500 focus:invalid:text-white',
-              'type-literal:p-0.5',
-              'data-[placeholder]:text-slate-400 data-[placeholder]:invalid:text-red-500 data-[placeholder]:invalid:focus:text-white',
-              'aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-slate-500 aria-[readonly]:focus-visible:outline-1',
-              'aria-[readonly]:focus:outline aria-[readonly]:focus:outline-slate-500 aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2',
-              classNames?.segment
-            )}
-          />
-        )}
-      </DateInput>
-      {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>
-    </TimeField>
-  );
-}
-
-export default TimeInput;

package/components/TimeInput/TimeInput.types.ts

@@ -1,15 +0,0 @@
-import type {
-  TimeFieldProps,
-  TimeValue,
-  ValidationResult,
-} from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface TimeInputProps extends TimeFieldProps<TimeValue> {
-  label?: string;
-  description?: string;
-  errorMessage?: string | ((validation: ValidationResult) => string);
-  classNames?: SlotsToClasses<
-    'label' | 'input' | 'description' | 'error' | 'segment'
-  >;
-}

package/components/TimeInput/index.ts

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

package/components/ToggleButton/ToggleButton.stories.tsx

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { ToggleButtonProps } from 'react-aria-components';
-import { ToggleButton } from './ToggleButton';
-
-type Story = StoryObj<typeof ToggleButton>;
-
-function Component({ children, ...props }: ToggleButtonProps) {
-  return <ToggleButton {...props}>{children}</ToggleButton>;
-}
-
-const meta: Meta<typeof ToggleButton> = {
-  component: Component,
-};
-
-export default meta;
-
-export const Example: Story = {
-  argTypes: {
-    variant: {
-      options: ['solid', 'outline', 'ghost'],
-      control: 'select',
-    },
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: 'select',
-    },
-    isSelected: {
-      control: 'boolean',
-    },
-    isDisabled: {
-      control: 'boolean',
-    },
-    defaultSelected: {
-      control: 'boolean',
-    },
-    autoFocus: {
-      control: 'boolean',
-    },
-    // type: {
-    //   options: ['button', 'submit', 'reset'],
-    //   control: { type: 'radio' },
-    // },
-    excludeFromTabOrder: {
-      control: 'boolean',
-    },
-    children: {
-      control: 'text',
-    },
-    className: {
-      control: 'object',
-    },
-    style: {
-      control: 'object',
-    },
-    onChange: {},
-    onPress: {},
-    onPressStart: {},
-    onPressEnd: {},
-    onPressChange: {},
-    onPressUp: {},
-    onFocus: {},
-    onBlur: {},
-    onFocusChange: {},
-    onKeyDown: {},
-    onKeyUp: {},
-  },
-  args: {
-    variant: 'solid',
-    size: 'md',
-    isSelected: false,
-    isDisabled: false,
-    autoFocus: false,
-    defaultSelected: false,
-    excludeFromTabOrder: false,
-    // type: 'button',
-    children: 'Press me',
-    onPress: action('onPress'),
-    onPressStart: action('onPressStart'),
-    onPressEnd: action('onPressEnd'),
-    onPressChange: action('onPressChange'),
-    onPressUp: action('onPressUp'),
-    onFocus: action('onFocus'),
-    onBlur: action('onBlur'),
-    onFocusChange: action('onFocusChange'),
-    onKeyDown: action('onKeyDown'),
-    onKeyUp: action('onKeyUp'),
-  },
-};

package/components/ToggleButton/ToggleButton.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import { ToggleButton as AriaToggleButton } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import { ToggleButtonProps } from './ToggleButton.types';
-
-export function ToggleButton({
-  children,
-  size = 'md',
-  variant = 'solid',
-  className,
-  ...props
-}: ToggleButtonProps) {
-  return (
-    <AriaToggleButton
-      className={(renderProps) => {
-        const { isDisabled } = renderProps;
-        return cn(
-          'flex items-center justify-center',
-          'font-semibold text-sm',
-          'rounded-md border-solid border',
-          'px-4',
-          'transition-all duration-200 ease-in-out',
-          'focus:outline-2 focus:outline focus:outline-slate-200 pressed:scale-95',
-          {
-            'h-8': size === 'sm',
-            'h-10': size === 'md',
-            'h-12': size === 'lg',
-          },
-          [
-            variant === 'ghost' && [
-              'bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent',
-              'border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent',
-              'text-slate-900 disabled:text-slate-400',
-              isDisabled && ['disabled:text-slate-900', 'opacity-75'],
-            ],
-            variant === 'outline' && [
-              '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',
-              isDisabled && [
-                'disabled:border-slate-300',
-                'disabled:text-slate-900',
-                'opacity-75',
-              ],
-            ],
-            variant === 'solid' && [
-              'bg-slate-800 hover:bg-slate-900 focus:bg-slate-900 disabled:bg-slate-900',
-              'border-slate-800 hover:border-slate-900 focus:border-slate-900 disabled:border-slate-200',
-              'text-white disabled:text-slate-400',
-              isDisabled && [
-                'disabled:border-slate-900',
-                'disabled:text-white',
-                'opacity-75',
-              ],
-            ],
-          ],
-          typeof className === 'function' ? className(renderProps) : className
-        );
-      }}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {children}
-    </AriaToggleButton>
-  );
-}
-
-export default ToggleButton;

package/components/ToggleButton/ToggleButton.types.ts

@@ -1,6 +0,0 @@
-import { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
-
-export type ToggleButtonProps = AriaToggleButtonProps & {
-  variant?: 'solid' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-};

package/components/ToggleButton/index.ts

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

package/components/Tooltip/Tooltip.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { Tooltip as UiTooltip } from '@nextui-org/tooltip';
-import { cn } from '../../utils/cn';
-import type { TooltipProps } from './Tooltip.types';
-
-export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  function Tooltip(
-    { classNames, placement, showArrow = false, ...props },
-    ref
-  ) {
-    return (
-      <UiTooltip
-        classNames={{
-          base: [
-            cn([
-              'z-0 relative bg-transparent outline-none',
-              'focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-500',
-
-              // arrow styles
-              'before:absolute before:rotate-45 before:w-2.5 before:h-2.5 before:rounded-sm before:bg-slate-500 before:shadow-sm',
-              'before:hidden data-[arrow=true]:before:block',
-              'data-[placement=bottom]:before:-top-1 data-[placement=bottom]:before:left-1/2 data-[placement=bottom]:before:rotate-45 data-[placement=bottom]:before:-translate-x-1/2',
-              'data-[placement=bottom-end]:before:-top-1 data-[placement=bottom-end]:before:left-1/2 data-[placement=bottom-end]:before:rotate-45 data-[placement=bottom-end]:before:-translate-x-1/2',
-              'data-[placement=bottom-start]:before:-top-1 data-[placement=bottom-start]:before:left-1/2 data-[placement=bottom-start]:before:rotate-45 data-[placement=bottom-start]:before:-translate-x-1/2',
-              'data-[placement=left]:before:-right-1 data-[placement=left]:before:top-1/2 data-[placement=left]:before:-translate-y-1/2',
-              'data-[placement=left-end]:before:-right-1 data-[placement=left-end]:before:top-1/2 data-[placement=left-end]:before:-translate-y-1/2',
-              'data-[placement=left-start]:before:-right-1 data-[placement=left-start]:before:top-1/2 data-[placement=left-start]:before:-translate-y-1/2',
-              'data-[placement=right]:before:-left-1 data-[placement=right]:before:top-1/2 data-[placement=right]:before:-translate-y-1/2',
-              'data-[placement=right-end]:before:-left-1 data-[placement=right-end]:before:top-1/2 data-[placement=right-end]:before:-translate-y-1/2',
-              'data-[placement=right-start]:before:-left-1 data-[placement=right-start]:before:top-1/2 data-[placement=right-start]:before:-translate-y-1/2',
-              'data-[placement=top]:before:-bottom-1 data-[placement=top]:before:left-1/2 data-[placement=top]:before:rotate-45 data-[placement=top]:before:-translate-x-1/2',
-              'data-[placement=top-end]:before:-bottom-1 data-[placement=top-end]:before:left-1/2 data-[placement=top-end]:before:rotate-45 data-[placement=top-end]:before:-translate-x-1/2',
-              'data-[placement=top-start]:before:-bottom-1 data-[placement=top-start]:before:left-1/2 data-[placement=top-start]:before:rotate-45 data-[placement=top-start]:before:-translate-x-1/2',
-
-              classNames?.base,
-            ]),
-          ],
-          content: [
-            cn([
-              'inline-flex flex-col items-center justify-center outline-none',
-              'w-full py-1 px-2.5 z-10 box-border bg-slate-500 rounded-md shadow-sm',
-              'text-sm text-white subpixel-antialiased',
-              classNames?.content,
-            ]),
-          ],
-        }}
-        placement={placement}
-        showArrow={showArrow}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        ref={ref}
-      />
-    );
-  }
-);
-
-export default Tooltip;

package/components/Tooltip/Tooltip.types.ts

@@ -1,3 +0,0 @@
-import type { TooltipProps as UITooltipProps } from '@nextui-org/tooltip';
-
-export type TooltipProps = UITooltipProps;

package/components/Tooltip/index.ts

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

package/components/UploadImage/UploadImage.tsx

@@ -1,206 +0,0 @@
-'use client';
-
-import { forwardRef, useState } from 'react';
-import type { ChangeEvent } from 'react';
-import { motion } from 'framer-motion';
-import Image from 'next/image';
-
-import { FieldError } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { UploadImageProps } from './UploadImage.types';
-import { useIsClient } from '../../hooks/useIsClient';
-import { Skeleton } from '../Skeleton';
-
-function UploadImageLoader({
-  hasTitle,
-  className,
-}: {
-  hasTitle: boolean;
-  className: NonNullable<UploadImageProps['classNames']>['skeleton'];
-}) {
-  return (
-    <div className="w-full h-full flex flex-col gap-4">
-      {hasTitle && <Skeleton className="w-1/2 h-8 mx-auto rounded-md z-20" />}
-      <Skeleton
-        className={cn('w-full h-56 rounded-md z-20 relative', className)}
-      />
-    </div>
-  );
-}
-
-export const UploadImage = forwardRef<HTMLInputElement, UploadImageProps>(
-  (
-    {
-      title,
-      description = 'Preview will display here.',
-      fileExtension,
-      actionTitle = 'select file',
-      variant,
-      errorMessage,
-      defaultImagePath,
-      classNames,
-      ...props
-    },
-    ref
-  ) => {
-    const isClient = useIsClient();
-    const [image, setImage] = useState<{
-      src: string | null;
-      alt: string | null;
-    }>({
-      src: null,
-      alt: null,
-    });
-
-    const invalid = !!errorMessage;
-
-    const accept = fileExtension
-      ? fileExtension
-          .split(',')
-          .map((val) => `image/${val.trim()}`)
-          .join(', ')
-      : 'image/*';
-
-    return (
-      <div className={cn('w-full h-full', 'flex flex-col gap-4')}>
-        {isClient ? (
-          <>
-            {title && (
-              <h6 className={cn('text-center', 'text-2xl', 'm-0 mb-4')}>
-                {title}
-              </h6>
-            )}
-            <div
-              className={cn(
-                'w-full h-full',
-                'flex flex-col justify-between gap-5 items-center',
-                ['bg-slate-100', variant === 'base' && 'bg-transparent'],
-                'rounded-md',
-                [variant === 'base' && 'rounded-none'],
-                ['p-6 lg:p-7', variant === 'base' && 'p-0 lg:p-0']
-              )}
-            >
-              <label
-                htmlFor={`${props?.name}-upload-file`}
-                aria-label="image upload"
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                  const {
-                    target: { files },
-                  } = e;
-                  if (files) {
-                    setImage({
-                      src: URL.createObjectURL(files[0]),
-                      alt: files[0].name,
-                    });
-                  }
-                }}
-                className={cn(
-                  'inline-flex justify-center items-center',
-                  'uppercase text-base border-slate-200',
-                  'bg-transparent',
-                  'border-1 border-solid',
-                  'px-4 py-0',
-                  'rounded-2xl',
-                  'cursor-pointer',
-                  'w-full h-9',
-                  ['max-w-48', variant === 'base' && 'max-w-none'],
-                  'my-0 mx-auto',
-                  'has-[:disabled]:bg-transparent has-[:disabled]:text-slate-950',
-                  'hover:bg-slate-100s hover:text-black',
-                  classNames?.label
-                )}
-              >
-                {actionTitle}
-                <input
-                  id={`${props?.name}-upload-file`}
-                  accept={accept}
-                  type="file"
-                  hidden
-                  // eslint-disable-next-line react/jsx-props-no-spreading
-                  {...props}
-                  ref={ref}
-                  className="hidden"
-                />
-              </label>
-
-              {defaultImagePath && !image.src ? (
-                <div className="flex justify-center items-center w-60">
-                  <a href={defaultImagePath} target="_blank" rel="noreferrer">
-                    <img
-                      src={defaultImagePath}
-                      alt=""
-                      className="w-full h-auto"
-                    />
-                  </a>
-                </div>
-              ) : (
-                <>
-                  <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    transition={{ type: 'spring', duration: 3, bounce: 0 }}
-                    key={image.src}
-                    className="flex justify-center items-center w-52 h-auto"
-                  >
-                    {image.src ? (
-                      <Image
-                        src={image.src}
-                        height={96}
-                        width={200}
-                        alt={image.alt || ''}
-                        className="max-h-full object-contain"
-                      />
-                    ) : (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="31"
-                        height="55"
-                        viewBox="0 0 31 55"
-                        fill="none"
-                      >
-                        <g clipPath="url(#clip0_15607_32844)">
-                          <path
-                            d="M15.9521 0.721924C24.2431 0.721924 30.9521 7.36392 30.9521 15.5719V43.9219C30.9521 49.8889 26.0703 54.7219 20.0431 54.7219C14.0158 54.7219 9.13397 49.8889 9.13397 43.9219V20.9719C9.13397 17.2459 12.1885 14.2219 15.9521 14.2219C19.7158 14.2219 22.7703 17.2459 22.7703 20.9719V41.2219H17.3158V20.7289C17.3158 19.2439 14.5885 19.2439 14.5885 20.7289V43.9219C14.5885 46.8919 17.0431 49.3219 20.0431 49.3219C23.0431 49.3219 25.4976 46.8919 25.4976 43.9219V15.5719C25.4976 10.3609 21.2158 6.12192 15.9521 6.12192C10.6885 6.12192 6.40669 10.3609 6.40669 15.5719V41.2219H0.952148V15.5719C0.952148 7.36392 7.66124 0.721924 15.9521 0.721924Z"
-                            fill="#646464"
-                          />
-                        </g>
-                        <defs>
-                          <clipPath id="clip0_15607_32844">
-                            <rect
-                              width="30"
-                              height="54"
-                              fill="white"
-                              transform="translate(0.952148 0.721924)"
-                            />
-                          </clipPath>
-                        </defs>
-                      </svg>
-                    )}
-                  </motion.div>
-                  <p className="m-0 text-slate-950 text-center">
-                    {image.alt || description}
-                  </p>
-                </>
-              )}
-            </div>
-          </>
-        ) : (
-          <UploadImageLoader
-            hasTitle={Boolean(title)}
-            className={classNames?.skeleton}
-          />
-        )}
-
-        {invalid && (
-          <FieldError className={cn('-mt-2', 'self-start')}>
-            {errorMessage}
-          </FieldError>
-        )}
-      </div>
-    );
-  }
-);
-
-export default UploadImage;