@clicktap/ui 0.14.12 → 0.14.13

package/components/Progressbar/LinearProgressbar.types.ts

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

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

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

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

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

package/components/RadioGroup/RadioGroup.tsx

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

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

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

package/components/Select/Option.tsx

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

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

package/components/Select/Select.tsx

@@ -0,0 +1,253 @@
+'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 { PropsWithChildren, 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>
+  );
+}
+
+export function Select<T extends object>({
+  label,
+  description,
+  errorMessage,
+  children,
+  placeholder,
+  key,
+  isLoading,
+  slots,
+  popoverPortalContainer,
+  popoverOffset,
+  selectedKey,
+  className,
+  classNames,
+  ...props
+}: SelectProps<T>) {
+  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
+              )}
+            />
+            {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>
+  );
+}
+
+export default Select;

package/components/Select/Select.types.ts

@@ -0,0 +1,42 @@
+import type {
+  ComboBoxRenderProps,
+  ComboBoxProps as AriaComboBoxProps,
+  ValidationResult,
+  ListBoxProps,
+} from 'react-aria-components';
+import type { ComponentType, 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'
+  >;
+}

package/components/Select/index.ts

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

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

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

package/components/Skeleton/index.ts

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

package/components/Slider/Slider.tsx

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

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

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