@clicktap/ui 0.14.19 → 0.14.26

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';

package/components/Slider/Slider.tsx

@@ -1,110 +0,0 @@
-'use client';
-
-import {
-  Label,
-  Slider as AriaSlider,
-  SliderOutput,
-  SliderTrack,
-  SliderThumb,
-} from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { SliderProps } from './Slider.types';
-
-export function Slider({
-  label,
-  showOutput = true,
-  thumbLabels,
-  classNames,
-  orientation,
-  isDisabled,
-  children,
-  ...props
-}: SliderProps) {
-  return (
-    <AriaSlider
-      orientation={orientation}
-      isDisabled={isDisabled}
-      className={cn(
-        'data-[orientation="horizontal"]:w-full data-[orientation="horizontal"]:flex data-[orientation="horizontal"]:flex-wrap',
-        'data-[orientation="vertical"]:w-8 data-[orientation="vertical"]:block data-[orientation="vertical"]:h-full',
-        classNames?.base
-      )}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {children || (
-        <>
-          {(label || showOutput) && (
-            <div
-              className={cn(
-                'w-full flex justify-between items-center',
-                orientation === 'vertical' && 'gap-2 w-max mb-2',
-                classNames?.outputWrapper
-              )}
-            >
-              <Label
-                className={cn(
-                  'flex-1 text-sm',
-                  isDisabled && 'opacity-50',
-                  classNames?.label
-                )}
-              >
-                {label}
-              </Label>
-
-              {showOutput && (
-                <SliderOutput
-                  className={cn(
-                    'flex flex-initial ml-auto justify-end text-sm',
-                    isDisabled && 'opacity-50',
-                    classNames?.output
-                  )}
-                >
-                  {({ state }) =>
-                    state.values
-                      .map((_, i) => state.getThumbValueLabel(i))
-                      .join(' – ')
-                  }
-                </SliderOutput>
-              )}
-            </div>
-          )}
-
-          <SliderTrack
-            className={cn(
-              'data-[orientation="horizontal"]:w-full data-[orientation="horizontal"]:h-8',
-              'data-[orientation="vertical"]:w-8 data-[orientation="vertical"]:h-full',
-              'transition-all duration-200 ease',
-              'before:bg-slate-300 before:block before:absolute cursor-pointer',
-              'data-[orientation="horizontal"]:before:w-full data-[orientation="horizontal"]:before:h-0.5',
-              'data-[orientation="horizontal"]:before:top-1/2 data-[orientation="horizontal"]:before:-translate-y-1/2',
-              'data-[orientation="vertical"]:before:w-0.5 data-[orientation="vertical"]:before:h-full data-[orientation="vertical"]:before:left-1/2 data-[orientation="vertical"]:before:-translate-y-1/2 data-[orientation="vertical"]:before:-translate-x-1/2',
-              isDisabled && 'opacity-50 before:cursor-default',
-              classNames?.track
-            )}
-          >
-            {({ state }) =>
-              state.values.map((_, i) => (
-                <SliderThumb
-                  // eslint-disable-next-line react/no-array-index-key
-                  key={i}
-                  index={i}
-                  aria-label={thumbLabels?.[i]}
-                  className={cn(
-                    'w-6 h-6 bg-slate-300 forced-color-adjust-none cursor-pointer top-1/2',
-                    'border-2 border-slate-400 rounded-full',
-                    isDisabled && 'cursor-default',
-                    orientation === 'vertical' && 'left-1/2',
-                    classNames?.thumb
-                  )}
-                />
-              ))
-            }
-          </SliderTrack>
-        </>
-      )}
-    </AriaSlider>
-  );
-}
-
-export default Slider;

package/components/Slider/Slider.types.ts

@@ -1,11 +0,0 @@
-import type { SliderProps as AriaSliderProps } from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export type SliderProps = AriaSliderProps & {
-  label?: string;
-  showOutput?: boolean;
-  thumbLabels?: string[];
-  classNames?: SlotsToClasses<
-    'base' | 'label' | 'output' | 'outputWrapper' | 'track' | 'thumb'
-  >;
-};

package/components/Slider/index.ts

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

package/components/Switch/Switch.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import { Switch as AriaSwitch } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-import type { SwitchProps, SwitchRenderProps } from './Switch.types';
-
-export function Switch({
-  children,
-  className,
-  classNames,
-  ...props
-}: SwitchProps & {
-  classNames?: SlotsToClasses<'indicator'>;
-}) {
-  return (
-    <AriaSwitch
-      className={cn(
-        'flex items-center gap-2 text-sm text-slate-500 forced-color-adjust-none group',
-        '',
-        className
-      )}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {(renderProps: SwitchRenderProps) => {
-        const { isSelected, isHovered, isFocused, isPressed, isDisabled } =
-          renderProps;
-        return (
-          <>
-            <div
-              className={cn(
-                'w-12 h-7 bg-transparent border-solid border border-slate-300 rounded-3xl transition-all duration-200 ease-in-out',
-                'before:block before:w-5 before:h-5 before:m-[3px] before:bg-slate-300 before:rounded-full',
-                'before:transition-all before:duration-200 before:ease-in-out',
-                [
-                  isHovered && 'border-slate-400',
-                  isSelected && [
-                    ' bg-slate-300 before:translate-x-full before:bg-white',
-                    (isHovered || isFocused) && 'border-slate-400',
-                  ],
-                  isFocused && ['outline outline-2 outline-slate-200'],
-                  isPressed && 'before:bg-slate-400',
-                  isDisabled && 'bg-slate-100',
-                  classNames?.indicator,
-                ]
-              )}
-            />
-
-            {typeof children === 'function'
-              ? children({
-                  defaultChildren: undefined,
-                  ...renderProps,
-                })
-              : children}
-          </>
-        );
-      }}
-    </AriaSwitch>
-  );
-}
-
-export default Switch;

package/components/Switch/Switch.types.ts

@@ -1,8 +0,0 @@
-import type {
-  SwitchProps as UISwitchProps,
-  SwitchRenderProps as UISwitchRenderProps,
-} from 'react-aria-components';
-
-export type SwitchProps = UISwitchProps;
-
-export type SwitchRenderProps = UISwitchRenderProps;

package/components/Switch/index.ts

@@ -1,2 +0,0 @@
-export { Switch } from './Switch';
-export type { SwitchProps, SwitchRenderProps } from './Switch.types';

package/components/Table/Table.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { cn } from '../../utils/cn';
-import type { TableProps } from './Table.types';
-
-export function Table<T>({
-  columns,
-  rows,
-  onRowClick = () => {},
-  classNames,
-}: TableProps<T>) {
-  return (
-    <table className={cn(classNames?.table)}>
-      <thead className={cn(classNames?.thead)}>
-        <tr className={cn(classNames?.theadTr)}>
-          {columns.map((column) => (
-            <th
-              key={String(column.id)}
-              className={cn(classNames?.th)}
-              data-th-header={column.label.toLowerCase()}
-            >
-              {column.label}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody className={cn(classNames?.tbody)}>
-        {Object.entries(rows).map(([key, row]) => (
-          <tr
-            key={key}
-            onClick={() => onRowClick(row)}
-            className={cn(classNames?.tbodyTr)}
-          >
-            {columns.map((column) => (
-              <td
-                key={`${String(column.id)}_${key}`}
-                data-th={column.label.toLowerCase()}
-                className={cn(classNames?.td)}
-              >
-                {column.renderer
-                  ? column.renderer(row)
-                  : String(row[column.id as keyof T])}
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}
-
-export default Table;

package/components/Table/Table.types.ts

@@ -1,22 +0,0 @@
-import type { ReactNode } from 'react';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export type TableProps<T> = {
-  columns: (
-    | {
-        id: keyof T;
-        label: string;
-        renderer?: (props: T) => ReactNode;
-      }
-    | {
-        id: string;
-        label: string;
-        renderer: (props: T) => ReactNode;
-      }
-  )[];
-  rows: T[];
-  onRowClick?: (row: T) => void;
-  classNames?: SlotsToClasses<
-    'table' | 'thead' | 'tbody' | 'theadTr' | 'tbodyTr' | 'th' | 'td'
-  >;
-};

package/components/Table/index.ts

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