@clicktap/ui 0.14.19 → 0.14.25

package/components/Menu/ContextMenu.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { cloneElement } from 'react';
-import { AnimatePresence } from 'framer-motion';
-import { cn } from '../../utils/cn';
-import { Menu } from './Menu';
-import type { MenuProps } from './Menu.types';
-
-export function ContextMenu({
-  slots,
-  role = 'tooltip',
-  arrow,
-  ...rest
-}: MenuProps) {
-  const arrowConfig = {
-    width: 24,
-    height: 8,
-    className: cn('fill-slate-50', arrow?.className),
-    ...arrow,
-  };
-
-  const ContentSlot = slots?.submenu
-    ? // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      cloneElement(slots?.submenu, {
-        ...slots.submenu.props,
-      })
-    : null;
-
-  const SubmenuSlot = slots?.contentRoot ? (
-    cloneElement(
-      slots.contentRoot,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      {
-        ...slots.contentRoot.props,
-      },
-      ContentSlot
-    )
-  ) : (
-    <div className="relative rounded-md py-4 px-6 bg-gray-50 shadow">
-      {ContentSlot}
-    </div>
-  );
-
-  return (
-    <AnimatePresence>
-      <Menu
-        role={role}
-        arrow={arrowConfig}
-        hidden={{
-          opacity: 0,
-          y: -5,
-          visibility: 'hidden',
-          transition: {
-            type: 'spring',
-            duration: 0.3,
-            bounce: 0,
-          },
-        }}
-        visible={{
-          opacity: 1,
-          y: 0,
-          visibility: 'visible',
-          transition: {
-            type: 'spring',
-            duration: 0.75,
-            bounce: 0,
-            staggerChildren: 0.075,
-            delayChildren: 0.1,
-          },
-        }}
-        slots={{
-          submenu: SubmenuSlot,
-          submenuRoot: slots?.submenuRoot,
-          content: slots?.content,
-        }}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...rest}
-      />
-    </AnimatePresence>
-  );
-}
-
-export default ContextMenu;

package/components/Menu/Menu.tsx

@@ -1,143 +0,0 @@
-'use client';
-
-import { cloneElement, useState, useRef, useId } from 'react';
-import { motion } from 'framer-motion';
-import {
-  flip,
-  shift,
-  arrow as arrowMiddleware,
-  offset as offsetMiddleware,
-  useFocus,
-  useRole,
-  useFloating,
-  useInteractions,
-  useHover,
-  useClick,
-  useDismiss,
-  useDelayGroupContext,
-  useDelayGroup,
-  FloatingArrow,
-  autoUpdate,
-} from '@floating-ui/react';
-import type { ButtonProps } from 'react-aria-components';
-import type { MenuProps } from './Menu.types';
-
-export function Menu({
-  closeDelay = 300,
-  offset = 20,
-  openDelay = 0,
-  placement = 'bottom-start',
-  slots,
-  trigger = ['hover', 'focus'],
-  withArrow = true,
-  arrow,
-  role = 'dialog',
-  visible = {},
-  hidden = {},
-  floatingOptions = {},
-  isOpen,
-  onOpenChange,
-}: MenuProps) {
-  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(false);
-  const arrowRef = useRef(null);
-  const id = useId();
-  const { x, y, strategy, refs, context } = useFloating({
-    placement,
-    middleware: [
-      offsetMiddleware(offset),
-      flip(),
-      shift(),
-      arrowMiddleware({
-        element: arrowRef,
-      }),
-    ],
-    open: isOpen || isOpenUncontrolled,
-    onOpenChange: onOpenChange || setIsOpenUncontrolled,
-    whileElementsMounted: autoUpdate,
-    ...floatingOptions,
-  });
-
-  const dismissConfig = useDismiss(context);
-  const roleConfig = useRole(context, {
-    role,
-  });
-  const { delay: delayGroup } = useDelayGroupContext();
-  const delay = {
-    open: openDelay,
-    close: closeDelay,
-  };
-  const hoverConfig = useHover(context, { delay: delayGroup || delay });
-  const focusConfig = useFocus(context);
-  const clickConfig = useClick(context);
-
-  const interactions = [
-    trigger.find((value) => value === 'hover') ? hoverConfig : undefined,
-    trigger.find((value) => value === 'click') ? clickConfig : undefined,
-    trigger.find((value) => value === 'focus') ? focusConfig : undefined,
-    dismissConfig,
-    roleConfig,
-  ];
-
-  const { getReferenceProps, getFloatingProps } = useInteractions(interactions);
-
-  useDelayGroup(context, { id });
-
-  // https://github.com/floating-ui/floating-ui/issues/2646
-  const { onClick, ...referenceProps } = getReferenceProps();
-  const keyboardEvents = String(
-    (slots?.content?.props as ButtonProps).className
-  ).includes('pressable')
-    ? { onPress: onClick }
-    : { onClick };
-
-  const ContentSlot = slots?.content ? (
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    cloneElement(slots.content, {
-      ...slots.content.props,
-      ref: refs.setReference,
-      ...referenceProps,
-      ...keyboardEvents,
-    })
-  ) : (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <div ref={refs.setReference} {...getReferenceProps()}>
-      Menu Action
-    </div>
-  );
-
-  const SubmenuSlot = slots?.submenu ? (
-    <motion.nav
-      ref={refs.setFloating}
-      style={{
-        position: strategy,
-        top: y ?? 0,
-        left: x ?? 0,
-        width: 'max-content',
-        zIndex: 50,
-      }}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...getFloatingProps()}
-      variants={{ hidden, visible }}
-      initial="hidden"
-      animate={isOpen || isOpenUncontrolled ? 'visible' : 'hidden'}
-    >
-      {withArrow && (
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        <FloatingArrow ref={arrowRef} context={context} {...arrow} />
-      )}
-
-      {slots.submenu}
-    </motion.nav>
-  ) : (
-    <nav>Submenu</nav>
-  );
-
-  return (
-    <>
-      {ContentSlot}
-      {SubmenuSlot}
-    </>
-  );
-}
-
-export default Menu;

package/components/Menu/Menu.types.ts

@@ -1,44 +0,0 @@
-import { Variant } from 'framer-motion';
-import type { ReactElement } from 'react';
-import type {
-  MiddlewareState,
-  Placement,
-  FloatingArrowProps,
-  UseRoleProps,
-  UseFloatingOptions,
-} from '@floating-ui/react';
-
-type Trigger = 'click' | 'hover' | 'focus';
-
-/** from floating-ui docs https://floating-ui.com/docs/offset */
-interface AxesOffsets {
-  mainAxis?: number;
-  crossAxis?: number;
-  alignmentAxis?: number | null;
-}
-type Options =
-  | number
-  | AxesOffsets
-  | ((state: MiddlewareState) => number | AxesOffsets);
-
-export interface MenuProps {
-  closeDelay?: number;
-  offset?: Options;
-  openDelay?: number;
-  placement?: Placement;
-  slots?: {
-    content?: ReactElement;
-    contentRoot?: ReactElement;
-    submenuRoot?: ReactElement;
-    submenu?: ReactElement;
-  };
-  trigger?: Trigger[];
-  withArrow?: boolean;
-  arrow?: Omit<FloatingArrowProps, 'context'>;
-  role?: UseRoleProps['role'];
-  visible?: Variant;
-  hidden?: Variant;
-  floatingOptions?: UseFloatingOptions;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-}

package/components/Menu/index.ts

@@ -1,4 +0,0 @@
-export { ContextMenu } from './ContextMenu';
-export { Menu } from './Menu';
-
-export type { MenuProps } from './Menu.types';

package/components/Meter/Meter.stories.tsx

@@ -1,111 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState, useEffect } from 'react';
-import { Meter } from './Meter';
-import { Button } from '../Button/Button';
-import { MeterProps } from './Meter.types';
-
-type Story = StoryObj<typeof Meter>;
-
-function Component({ children, value: v, ...props }: MeterProps) {
-  const [value, setValue] = useState(v || 0);
-
-  const increase = () =>
-    setValue(value === props?.maxValue ? props?.maxValue : value + 10);
-
-  const decrease = () =>
-    setValue(value === props?.minValue ? props?.minValue : value - 10);
-
-  useEffect(() => {
-    if (v) setValue(v);
-  }, [v]);
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '2rem',
-        margin: '2rem 0',
-      }}
-    >
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <Meter value={value} {...props} />
-
-      <div
-        style={{
-          display: 'flex',
-          gap: '2rem',
-          justifyContent: 'center',
-        }}
-      >
-        <Button size="sm" onPress={decrease}>
-          -
-        </Button>
-        <Button size="sm" onPress={increase}>
-          +
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-const meta: Meta<typeof Meter> = {
-  component: Component,
-};
-
-export default meta;
-
-export const Base: Story = {
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'The content to display as label',
-    },
-    showValue: {
-      control: 'boolean',
-      description: 'Whether the value show',
-    },
-    formatOptions: {
-      control: 'object',
-      description: 'The display format of the value label.',
-    },
-    valueLabel: {
-      control: 'text',
-      description:
-        'The content to display as the value&apos;s label (e.g. 1 of 4)',
-    },
-    value: {
-      control: 'number',
-      description: 'The current value (controlled).',
-    },
-    minValue: {
-      control: 'number',
-      description: 'The smallest value allowed for the input.',
-    },
-    maxValue: {
-      control: 'number',
-      description: 'The largest value allowed for the input.',
-    },
-    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. A function may be provided to compute the class based on component state.',
-    },
-  },
-  args: {
-    label: '',
-    showValue: true,
-    formatOptions: { style: 'percent' },
-    valueLabel: '',
-    value: 0,
-    minValue: 0,
-    maxValue: 100,
-    style: {},
-    className: '',
-  },
-};

package/components/Meter/Meter.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { Meter as AriaMeter, Label } from 'react-aria-components';
-import { motion } from 'framer-motion';
-import { cn } from '../../utils/cn';
-import type { MeterProps } from './Meter.types';
-
-export function Meter({
-  label,
-  showValue = true,
-  value = 0,
-  minValue = 0,
-  maxValue = 100,
-  formatOptions = { style: 'percent' },
-  className,
-  classNames,
-  ...props
-}: MeterProps) {
-  return (
-    <AriaMeter
-      className={cn('flex flex-col gap-2', className)}
-      value={value}
-      minValue={minValue}
-      maxValue={maxValue}
-      formatOptions={formatOptions}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-    >
-      {({ percentage, valueText }) => (
-        <div
-          className={cn(
-            'flex justify-between items-center gap-4',
-            classNames?.labelWrapper
-          )}
-        >
-          {label && (
-            <Label className={cn('text-sm', classNames?.label)}>{label}</Label>
-          )}
-          <div
-            className={cn(
-              'flex-auto h-2.5 rounded-md bg-slate-300 forced-color-adjust-none overflow-hidden',
-              classNames?.trackWrapepr
-            )}
-          >
-            <motion.div
-              className={cn('h-full bg-slate-800', classNames?.track)}
-              initial={{ width: `${percentage}%` }}
-              animate={{ width: `${percentage}%` }}
-              transition={{
-                type: 'spring',
-                bounce: 0,
-              }}
-            />
-          </div>
-          {showValue && (
-            <span
-              className={cn('text-sm tabular-nums ml-auto', classNames?.value)}
-            >
-              {valueText}
-            </span>
-          )}
-        </div>
-      )}
-    </AriaMeter>
-  );
-}
-
-export default Meter;

package/components/Meter/Meter.types.ts

@@ -1,10 +0,0 @@
-import type { MeterProps as AriaMeterProps } from 'react-aria-components';
-import type { SlotsToClasses } from '../../types/SlotsToClasses';
-
-export type MeterProps = AriaMeterProps & {
-  label?: string;
-  showValue?: boolean;
-  classNames?: SlotsToClasses<
-    'label' | 'value' | 'labelWrapper' | 'track' | 'trackWrapepr'
-  >;
-};

package/components/Meter/index.ts

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

package/components/Modal/Modal.tsx

@@ -1,16 +0,0 @@
-'use client';
-
-import { Modal as UIModal } from 'react-aria-components';
-import { cn } from '../../utils/cn';
-import type { ModalProps } from './Modal.types';
-
-export function Modal({ children, className, ...props }: ModalProps) {
-  return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <UIModal {...props} className={cn('absolute inset-1/2', className)}>
-      {children}
-    </UIModal>
-  );
-}
-
-export default Modal;

package/components/Modal/Modal.types.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ModalOverlayProps } from 'react-aria-components';
-
-export interface ModalProps extends Omit<ModalOverlayProps, 'children'> {
-  children: ReactNode;
-}

package/components/Modal/index.ts

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

package/components/ModalOverlay/ModalOverlay.tsx

@@ -1,121 +0,0 @@
-'use client';
-
-import { forwardRef, useId } from 'react';
-import type { Dispatch, ReactNode, Ref, SetStateAction } from 'react';
-import { ModalOverlay as UIModalOverlay } from 'react-aria-components';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useDialogTrigger } from '../DialogTrigger/DialogTrigger';
-/** @todo this probably belongs in Modal instead of DialogTrigger */
-import type { DriverAnimationState } from '../DialogTrigger/DialogTrigger.types';
-import { cn } from '../../utils/cn';
-import type { ModalOverlayProps } from './ModalOverlay.types';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ForwardedModalOverlay = forwardRef<HTMLElement, any>(
-  ({ style, ...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
-      <UIModalOverlay {...props} ref={ref} style={ariaStyle} />
-    );
-  }
-);
-
-const MotionModalOverlay = motion.create(ForwardedModalOverlay);
-
-function InnerModalOverlay({
-  animate,
-  animation,
-  setAnimation,
-  className,
-  animationVariants,
-  children,
-  ...props
-}: ModalOverlayProps & {
-  animate: string;
-  animation: string;
-  setAnimation: Dispatch<SetStateAction<DriverAnimationState>>;
-}) {
-  const id = useId();
-
-  // extract key from props to avoid spreading it
-  const { key, ...restProps } = props;
-
-  return (
-    <MotionModalOverlay
-      key={key || id}
-      isExiting={animation === 'hidden'}
-      onAnimationComplete={(currentAnimation: DriverAnimationState) => {
-        setAnimation((a) =>
-          currentAnimation === 'hidden' && a === 'hidden' ? 'unmounted' : a
-        );
-      }}
-      variants={
-        animationVariants || {
-          hidden: {
-            opacity: 0,
-            backdropFilter: 'blur(0px)',
-            transition: {
-              delay: 0.08,
-            },
-          },
-          visible: {
-            opacity: 1,
-            backdropFilter: 'blur(8px)',
-          },
-        }
-      }
-      initial="hidden"
-      animate={animate}
-      exit="hidden"
-      className={cn(
-        'bg-black/30',
-        'fixed top-0 left-0',
-        'z-50',
-        'w-screen h-[var(--visual-viewport-height)]',
-        className
-      )}
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...restProps}
-    >
-      {children as ReactNode}
-    </MotionModalOverlay>
-  );
-}
-
-export function ModalOverlay(props: ModalOverlayProps) {
-  const { isOpen } = props;
-  const { animation, setAnimation } = useDialogTrigger();
-
-  if (isOpen !== undefined) {
-    return (
-      <AnimatePresence>
-        {isOpen && (
-          <InnerModalOverlay
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            animate="visible"
-            animation={animation}
-            setAnimation={setAnimation}
-          />
-        )}
-      </AnimatePresence>
-    );
-  }
-
-  return (
-    <InnerModalOverlay
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      {...props}
-      animate={animation}
-      animation={animation}
-      setAnimation={setAnimation}
-    />
-  );
-}
-
-export default ModalOverlay;

package/components/ModalOverlay/ModalOverlay.types.ts

@@ -1,18 +0,0 @@
-import type { Key, ReactNode } from 'react';
-import type {
-  ModalOverlayProps as UiModalOverlayProps,
-  ModalRenderProps,
-} from 'react-aria-components';
-import type { MotionStyle, Variant } from 'framer-motion';
-
-export interface ModalOverlayProps
-  extends Omit<UiModalOverlayProps, 'children' | 'style' | 'onAnimationStart'> {
-  key?: Key;
-  style?: MotionStyle;
-  animationVariants?: { visible: Variant; hidden: Variant };
-  children:
-    | ReactNode
-    | ((
-        values: ModalRenderProps & { defaultChildren: ReactNode }
-      ) => ReactNode);
-}

package/components/ModalOverlay/index.ts

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

package/components/NumberFormat/NumberFormat.tsx

@@ -1,19 +0,0 @@
-'use client';
-
-import { NumberFormatProps } from './NumberFormat.types';
-
-export function NumberFormat({
-  locale = 'en-US',
-  style = 'decimal',
-  fallback = '-',
-  children,
-  ...options
-}: NumberFormatProps) {
-  return children
-    ? new Intl.NumberFormat(locale, { ...options, style }).format(
-        Number(children)
-      )
-    : fallback;
-}
-
-export default NumberFormat;

package/components/NumberFormat/NumberFormat.types.ts

@@ -1,8 +0,0 @@
-import type { ReactNode } from 'react';
-
-export type NumberFormatProps = Omit<Intl.NumberFormatOptions, 'style'> & {
-  locale?: string;
-  style?: 'decimal' | 'currency' | 'percent' | 'unit';
-  fallback?: ReactNode;
-  children?: string | number;
-};

package/components/NumberFormat/index.ts

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