@clicktap/ui 0.14.18 → 0.14.25

package/components/Progressbar/LinearProgressbar.tsx

@@ -1,75 +0,0 @@
-'use client';
-
-import { ProgressBar, Label } from 'react-aria-components';
-import { motion } from 'framer-motion';
-import { cn } from '../../utils/cn';
-import type { LinearProgressbarProps } from './LinearProgressbar.types';
-
-export function LinearProgressbar({
-  label,
-  isIndeterminate,
-  showValue = true,
-  width,
-  className,
-  classNames,
-  ...props
-}: LinearProgressbarProps) {
-  return (
-    <ProgressBar
-      style={{ width: width || '100%' }}
-      className={cn('overflow-hidden', className)}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {({ percentage, valueText }) => (
-        <>
-          <div
-            className={cn(
-              'flex items-center justify-between gap-2 mb-1',
-              classNames?.labelWrapper
-            )}
-          >
-            <Label className={cn('text-sm', classNames?.label)}>{label}</Label>
-            {showValue && (
-              <span className={cn('text-sm', classNames?.value)}>
-                {valueText}
-              </span>
-            )}
-          </div>
-          <div
-            className={cn(
-              'overflow-hidden forced-color-adjust-none h-2.5 rounded will-change-transform bg-slate-300',
-              classNames?.trackWrapper
-            )}
-          >
-            <motion.div
-              style={{
-                width:
-                  !isIndeterminate && typeof percentage === 'number'
-                    ? `${percentage}%`
-                    : '',
-              }}
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              {...(isIndeterminate && {
-                animate: {
-                  x: ['-100%', '250px'],
-                },
-                transition: { repeat: Infinity, duration: 1.5 },
-              })}
-              className={cn(
-                'h-full bg-slate-800 rounded transition-width duration-500 ease-in-out',
-                {
-                  'w-1/2': isIndeterminate,
-                  'transition-none': isIndeterminate,
-                },
-                classNames?.track
-              )}
-            />
-          </div>
-        </>
-      )}
-    </ProgressBar>
-  );
-}
-
-export default LinearProgressbar;

package/components/Progressbar/LinearProgressbar.types.ts

@@ -1,11 +0,0 @@
-import type { ProgressBarProps } from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface LinearProgressbarProps extends ProgressBarProps {
-  label?: string;
-  width?: string;
-  showValue?: boolean;
-  classNames?: SlotsToClasses<
-    'label' | 'value' | 'labelWrapper' | 'track' | 'trackWrapper'
-  >;
-}

package/components/Progressbar/index.ts

@@ -1,4 +0,0 @@
-export { CircularProgressbar } from './CircularProgressbar';
-export { LinearProgressbar } from './LinearProgressbar';
-export type { CircularProgressbarProps } from './CircularProgressbar.types';
-export type { LinearProgressbarProps } from './LinearProgressbar.types';

package/components/Radio/Radio.tsx

@@ -1,88 +0,0 @@
-'use client';
-
-import { Radio as AriaRadio } from 'react-aria-components';
-import type { RadioRenderProps } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { RadioProps, RadioSlots } from './Radio.types';
-
-function ControlSlot({
-  control,
-  classNames,
-  ...props
-}: RadioRenderProps &
-  Pick<RadioSlots, 'control'> &
-  Pick<RadioProps, 'classNames'>) {
-  if (!control) {
-    return (
-      <div
-        data-hovered={props?.isHovered}
-        data-focused={props?.isFocused}
-        data-disabled={props?.isDisabled}
-        data-invalid={props?.isInvalid}
-        data-selected={props?.isSelected}
-        data-pressed={props?.isPressed}
-        className={cn(
-          'flex items-center justify-center w-6 h-6  border-solid border border-slate-300 ransition-all duration-300 ease rounded-full',
-          'data-[hovered="true"]:border-slate-400',
-          'data-[focused="true"]:border-slate-400 data-[focused="true"]:outline-2 data-[focused="true"]:outline data-[focused="true"]:outline-slate-200',
-          'data-[disabled="true"]:border-slate-200 data-[disabled="true"]:bg-slate-100',
-          'data-[invalid="true"]:bg-red-100 data-[invalid="true"]:text-red-600 data-[invalid="true"]:border-red-500',
-          'data-[invalid="true"]:data-[disabled="true"]:border-red-200 data-[invalid="true"]:data-[disabled="true"]:bg-red-100',
-          'data-[invalid="true"]:data-[hovered="true"]:border-red-600',
-          'data-[invalid="true"]:data-[focused="true"]:border-red-600 data-[invalid="true"]:data-[focused="true"]:outline-red-200',
-          'data-[invalid="true"]:data-[selected="true"]:bg-red-100 data-[invalid="true"]:data-[selected="true"]:border-red-500',
-          'data-[invalid="true"]:data-[pressed="true"]:bg-red-600 data-[invalid="true"]:data-[pressed="true"]:border-red-600',
-          classNames?.control
-        )}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-      >
-        <div
-          data-invalid={props?.isInvalid}
-          className={cn(
-            'w-3 h-3 rounded-full bg-slate-900 opacity-0 transition-all duration-300 ease data-[invalid="true"]:bg-red-500',
-            {
-              'opacity-100': props?.isSelected,
-            }
-          )}
-        />
-      </div>
-    );
-  }
-  return typeof control === 'function' ? control(props) : control;
-}
-
-export function Radio({
-  children,
-  slots,
-  className,
-  classNames,
-  ...props
-}: RadioProps) {
-  return (
-    <AriaRadio
-      className={cn(
-        'flex items-center gap-2 group',
-        'invalid:text-red-500 invalid:disabled:text-red-300',
-        'disabled:text-slate-400',
-        className
-      )}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {(renderProps) => (
-        <>
-          <ControlSlot
-            control={slots?.control}
-            classNames={classNames}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...renderProps}
-          />
-          {typeof children === 'function' ? children(renderProps) : children}
-        </>
-      )}
-    </AriaRadio>
-  );
-}
-
-export default Radio;

package/components/Radio/Radio.types.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react';
-import type {
-  RadioRenderProps,
-  RadioProps as UiRadioProps,
-} from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export interface RadioSlots {
-  control?: ReactNode | ((values: RadioRenderProps) => ReactNode);
-}
-
-export interface RadioProps extends UiRadioProps {
-  children?: ReactNode | ((values: RadioRenderProps) => ReactNode);
-  slots?: RadioSlots;
-  classNames?: SlotsToClasses<'control'>;
-}

package/components/Radio/index.ts

@@ -1,2 +0,0 @@
-export { Radio } from './Radio';
-export type { RadioProps, RadioSlots } from './Radio.types';

package/components/RadioGroup/RadioGroup.tsx

@@ -1,49 +0,0 @@
-import { Label, RadioGroup as AriaRadioGroup } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import { RadioGroupProps } from './RadioGroup.types';
-
-export function RadioGroup({
-  label,
-  errorMessage,
-  description,
-  orientation,
-  children,
-  className,
-  ...props
-}: RadioGroupProps) {
-  return (
-    <AriaRadioGroup
-      className={cn('flex flex-col gap-4', className)}
-      orientation={orientation}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {typeof children === 'function' ? (
-        children
-      ) : (
-        <>
-          {label && (
-            <Label className="flex text-slate-500 text-xs">{label}</Label>
-          )}
-          <div
-            className={cn(
-              'flex flex-col gap-2',
-              orientation === 'horizontal' && 'flex-row items-center gap-4'
-            )}
-          >
-            {children}
-          </div>
-          {description && (
-            <p className="flex mt-1 text-slate-500 text-sm">{description}</p>
-          )}
-
-          {errorMessage && (
-            <p className="flex pl-6 text-red-500 text-sm">{errorMessage}</p>
-          )}
-        </>
-      )}
-    </AriaRadioGroup>
-  );
-}
-
-export default RadioGroup;

package/components/RadioGroup/RadioGroup.types.ts

@@ -1,7 +0,0 @@
-import type { RadioGroupProps as AriaRadioGroupProps } from 'react-aria-components';
-
-export interface RadioGroupProps extends AriaRadioGroupProps {
-  label?: string;
-  description?: string;
-  errorMessage?: string;
-}

package/components/RadioGroup/index.ts

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

package/components/Select/Option.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { ListBoxItem } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { OptionProps } from './Option.types';
-
-export function Option({ className, ...props }: OptionProps) {
-  return (
-    <ListBoxItem
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      className={cn(
-        'flex flex-auto items-center',
-        'rounded-md',
-        'p-2.5 mx-1.5',
-        'text-sm',
-        'cursor-default',
-        'outline-none',
-        'text-slate-900',
-        'transition-all ease-in-out duration-300',
-        'data-[hovered]:bg-slate-100 data-[hovered]:text-slate-900',
-        'data-[focused]:bg-slate-100 data-[hovered]:text-slate-900',
-        'data-[pressed]:bg-slate-200 data-[hovered]:text-slate-900',
-        'data-[selected]:bg-none data-[selected]:text-slate-900 data-[selected]:font-semibold data-[selected]:data-[focused]:bg-slate-100',
-        'data-[disabled]:bg-none data-[disabled]:text-slate-500',
-        className
-      )}
-    />
-  );
-}
-
-export default Option;

package/components/Select/Option.types.ts

@@ -1,3 +0,0 @@
-import type { ListBoxItemProps } from 'react-aria-components';
-
-export type OptionProps = ListBoxItemProps;

package/components/Select/Select.tsx

@@ -1,272 +0,0 @@
-'use client';
-
-import {
-  ListBox,
-  ComboBox,
-  Label,
-  Input,
-  Button,
-  Text,
-  FieldError,
-  Popover,
-} from 'react-aria-components';
-import type { ComboBoxRenderProps, ListBoxProps } from 'react-aria-components';
-import { forwardRef, useState } from 'react';
-import type { ForwardedRef, Ref } from 'react';
-import { motion } from 'framer-motion';
-import { cn } from '../../utils/cn';
-import { Pulse } from '../Loader';
-import type {
-  ComboBoxPopoverAnimationState,
-  SelectProps,
-  SelectSlots,
-} from './Select.types';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ForwardedPopover = forwardRef<HTMLElement, any>(
-  (props, ref: Ref<HTMLElement>) => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <Popover {...props} ref={ref} />
-  )
-);
-
-// Now use motion with ForwardedPopover
-const MotionPopover = motion.create(ForwardedPopover);
-
-function ButtonIconSlot<T extends object>({
-  buttonIcon,
-  ...props
-}: ComboBoxRenderProps & Pick<SelectSlots<T>, 'buttonIcon'>) {
-  if (!buttonIcon) {
-    return (
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className={cn(
-          'transition-all ease-in-out duration-200',
-          props.isOpen ? 'rotate-180' : 'rotate-0'
-        )}
-      >
-        <path
-          d="M6 9L12 15L18 9"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          className={cn([
-            'stroke-slate-900',
-            props.isDisabled && 'stroke-slate-400',
-            props.isInvalid && 'stroke-red-500',
-          ])}
-        />
-      </svg>
-    );
-  }
-
-  return typeof buttonIcon === 'function' ? buttonIcon(props) : buttonIcon;
-}
-
-function ListBoxSlot<T extends object>({
-  listBoxComponent,
-  children,
-  ...props
-}: ListBoxProps<T> & Pick<SelectSlots<T>, 'listBoxComponent'>) {
-  const Component = listBoxComponent || ListBox;
-
-  return (
-    <Component
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-}
-
-// Internal component - necessary to preserve generics in children
-// i.e. <Select items={[{id: 'test', value: 'test'}]}.../> won't reference "any"
-function SelectInner<T extends object>(
-  {
-    label,
-    description,
-    errorMessage,
-    children,
-    placeholder,
-    key,
-    isLoading,
-    slots,
-    popoverPortalContainer,
-    popoverOffset,
-    selectedKey,
-    className,
-    classNames,
-    autoComplete,
-    ...props
-  }: SelectProps<T>,
-  ref: ForwardedRef<HTMLInputElement>
-) {
-  const [animation, setAnimation] =
-    useState<ComboBoxPopoverAnimationState>('unmounted');
-  const [isComboOpen, setIsComboOpen] = useState<boolean>(false);
-
-  return (
-    <ComboBox
-      onOpenChange={() => {
-        setAnimation(animation === 'visible' ? 'hidden' : 'visible');
-        setIsComboOpen(!isComboOpen);
-      }}
-      isDisabled={props.isDisabled || isLoading}
-      data-has-value={!!selectedKey}
-      selectedKey={selectedKey}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      className={cn('flex flex-col', 'w-full', className)}
-    >
-      {(renderProps) => (
-        <>
-          <Label
-            className={cn('flex', 'text-xs text-slate-500', classNames?.label)}
-          >
-            {label}
-          </Label>
-          <div
-            className={cn(
-              'flex',
-              'relative',
-              'w-full',
-              classNames?.comboBoxContainer
-            )}
-          >
-            <Input
-              placeholder={placeholder}
-              className={cn(
-                'border border-solid border-slate-300',
-                'text-sm text-slate-900',
-                'py-0 px-2',
-                'h-10 w-full',
-                'm-0',
-                'rounded-md',
-                'bg-white',
-                'transition-all ease-in-out duration-200',
-                'data-[hovered]:border-slate-400',
-                'data-[focused]:border-slate-400 data-[focused]:outline data-[focused]:outline-2 data-[focused]:outline-slate-200',
-                ' data-[disabled]:bg-slate-100 data-[disabled]:border-slate-300',
-                isLoading
-                  ? 'data-[disabled]:text-slate-900'
-                  : 'data-[disabled]:text-slate-500',
-                'data-[invalid]:border-red-500 data-[invalid]:bg-red-100 data-[invalid]:text-red-600',
-                'data-[invalid]:data-[hovered]:border-red-600',
-                'data-[invalid]:data-[focused]:border-red-600 data-[invalid]:data-[focused]:outline data-[invalid]:data-[focused]:outline-2 data-[invalid]:data-[focused]:outline-red-200',
-                'data-[invalid]:placeholder:text-slate-400',
-                classNames?.input
-              )}
-              ref={ref}
-              autoComplete={autoComplete}
-            />
-            {isLoading ? (
-              <div
-                className={cn(
-                  'absolute top-2 right-2',
-                  'block',
-                  classNames?.loader
-                )}
-              >
-                {slots?.loadingIcon || <Pulse />}
-              </div>
-            ) : (
-              <Button
-                className={cn(
-                  'absolute top-2 right-0',
-                  'block',
-                  'border-none',
-                  'bg-none',
-                  classNames?.arrowButton
-                )}
-              >
-                <ButtonIconSlot
-                  buttonIcon={slots?.buttonIcon}
-                  // eslint-disable-next-line react/jsx-props-no-spreading
-                  {...renderProps}
-                />
-              </Button>
-            )}
-          </div>
-          {description && (
-            <Text
-              slot="description"
-              className={cn(
-                'flex',
-                'text-xs',
-                'text-slate-500',
-                classNames?.description
-              )}
-            >
-              {description}
-            </Text>
-          )}
-          <FieldError
-            className={cn(
-              'flex',
-              'text-xs',
-              'text-red-500',
-              classNames?.errorMessage
-            )}
-          >
-            {errorMessage}
-          </FieldError>
-          <MotionPopover
-            key={key}
-            isOpen={isComboOpen}
-            isExiting={animation === 'hidden'}
-            offset={popoverOffset}
-            UNSTABLE_portalContainer={popoverPortalContainer}
-            onAnimationComplete={(completedAnimation: string) => {
-              setAnimation((a) =>
-                completedAnimation === 'hidden' && a === 'hidden'
-                  ? 'unmounted'
-                  : a
-              );
-            }}
-            variants={{
-              hidden: { opacity: 0, y: -10 },
-              visible: { opacity: 1, y: 0 },
-            }}
-            initial="hidden"
-            animate={animation}
-            className={cn(
-              'px-0 py-1.5',
-              'shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]',
-              'rounded-md',
-              'w-[var(--trigger-width)]',
-              'bg-white',
-              'border border-solid border-slate-300',
-              classNames?.listContainer
-            )}
-          >
-            <ListBoxSlot
-              listBoxComponent={slots?.listBoxComponent}
-              className={cn('max-h-80', 'overflow-y-scroll', classNames?.list)}
-            >
-              {children}
-            </ListBoxSlot>
-          </MotionPopover>
-        </>
-      )}
-    </ComboBox>
-  );
-}
-
-// Type for the exported component that preserves generics
-interface SelectComponent {
-  <T extends object>(
-    props: SelectProps<T> & { ref?: ForwardedRef<HTMLInputElement> }
-  ): JSX.Element;
-}
-
-// Create the forwarded component with proper typing
-export const Select = forwardRef(SelectInner) as SelectComponent;
-
-export default Select;
-

package/components/Select/Select.types.ts

@@ -1,48 +0,0 @@
-import type {
-  ComboBoxRenderProps,
-  ComboBoxProps as AriaComboBoxProps,
-  ValidationResult,
-  ListBoxProps,
-} from 'react-aria-components';
-import type {
-  ComponentType,
-  HTMLInputAutoCompleteAttribute,
-  Key,
-  ReactNode,
-} from 'react';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export type ComboBoxPopoverAnimationState = 'unmounted' | 'hidden' | 'visible';
-
-export type SelectSlots<T extends object> = {
-  buttonIcon?: ReactNode | ((values: ComboBoxRenderProps) => ReactNode);
-  loadingIcon?: ReactNode;
-  listBoxComponent?: ComponentType<ListBoxProps<T>>;
-};
-
-export interface SelectProps<T extends object>
-  extends Omit<AriaComboBoxProps<T>, 'children'> {
-  label?: string;
-  description?: string | null;
-  errorMessage?: string | ((validation: ValidationResult) => string);
-  placeholder?: string;
-  key?: Key | null;
-  isLoading?: boolean;
-  children: ReactNode | ((item: T) => ReactNode);
-  slots?: SelectSlots<T>;
-  popoverOffset?: number;
-  popoverPortalContainer?: Element;
-  classNames?: SlotsToClasses<
-    | 'label'
-    | 'name'
-    | 'comboBoxContainer'
-    | 'input'
-    | 'loader'
-    | 'arrowButton'
-    | 'description'
-    | 'errorMessage'
-    | 'listContainer'
-    | 'list'
-  >;
-  autoComplete?: HTMLInputAutoCompleteAttribute;
-}

package/components/Select/index.ts

@@ -1,8 +0,0 @@
-export { Option } from './Option';
-export { Select } from './Select';
-export type { OptionProps } from './Option.types';
-export type {
-  ComboBoxPopoverAnimationState,
-  SelectProps,
-  SelectSlots,
-} from './Select.types';

package/components/Skeleton/Skeleton.tsx

@@ -1,15 +0,0 @@
-import { cn } from '../../utils/cn';
-import type { SkeletonProps } from './Skeleton.types';
-
-export function Skeleton({ className }: SkeletonProps) {
-  return (
-    <div
-      className={cn(
-        'relative rounded-md animate-pulse bg-slate-200',
-        className
-      )}
-    />
-  );
-}
-
-export default Skeleton;

package/components/Skeleton/Skeleton.types.ts

@@ -1,3 +0,0 @@
-export type SkeletonProps = {
-  className?: string;
-};

package/components/Skeleton/index.ts

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