@clicktap/ui 0.14.12 → 0.14.13

package/components/Menu/Menu.types.ts

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

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

package/components/Meter/Meter.stories.tsx

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

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

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

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

package/components/Modal/Modal.tsx

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

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

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

package/components/ModalOverlay/ModalOverlay.tsx

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

@@ -0,0 +1,18 @@
+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'> {
+  key?: Key;
+  style?: MotionStyle;
+  animationVariants?: { visible: Variant; hidden: Variant };
+  children:
+    | ReactNode
+    | ((
+        values: ModalRenderProps & { defaultChildren: ReactNode }
+      ) => ReactNode);
+}

package/components/ModalOverlay/index.ts

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

package/components/NumberFormat/NumberFormat.tsx

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

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

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

package/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import {
+  Group,
+  NumberField,
+  Button,
+  Input,
+  Text,
+  FieldError,
+  Label,
+} from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { NumberInputProps } from './NumberInput.types';
+
+const DecrementIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 12H19"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const IncrementIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 5V19M5 12H19"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export function NumberInput({
+  label,
+  description,
+  errorMessage,
+  isInvalid,
+  isReadOnly,
+  slots,
+  className,
+  classNames,
+  ...props
+}: NumberInputProps) {
+  const groupClasses = [
+    'group-hover:border-slate-400',
+    'group-disabled:border-slate-200',
+    'group-invalid:border-red-500 group-invalid:bg-red-100 group-invalid:text-red-600',
+    'group-invalid:group-hover:border-red-600',
+    'group-invalid:group-focus:border-red-600',
+  ];
+  const buttonClasses = [
+    'flex items-center justify-center shrink-0',
+    'rounded-md border-solid border',
+    'font-semibold text-sm',
+    'w-10 h-10 py-0 px-0 cursor-pointer disabled:cursor-default',
+    'transition-all duration-200 ease-in-out',
+    'focus:outline-2 focus:outline focus:outline-slate-200 pressed:scale-95',
+    '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',
+    'group-aria-readonly:bg-slate-100 group-aria-readonly:text-slate-500 group-aria-readonly:border-slate-200 group-aria-readonly:cursor-default',
+  ];
+
+  return (
+    <NumberField
+      isInvalid={isInvalid}
+      isReadOnly={isReadOnly}
+      className={cn('flex flex-col w-full', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <Label className={cn('flex text-slate-500 text-sm', classNames?.label)}>
+        {label}
+      </Label>
+
+      <Group
+        isInvalid={isInvalid}
+        aria-readonly={isReadOnly}
+        className={cn(
+          'flex rounded-md group',
+          'focus-within:outline-2 focus-within:outline focus-within:outline-slate-200',
+          'focus-within:invalid:outline-2 focus-within:invalid:outline focus-within:invalid:outline-slate-200',
+          'disabled:bg-slate-100',
+          classNames?.group
+        )}
+      >
+        <Button
+          slot="decrement"
+          className={cn(
+            buttonClasses,
+            groupClasses,
+            'border-r-0 rounded-r-none',
+            classNames?.decrementBtn
+          )}
+        >
+          {slots?.decrementIcon || DecrementIcon}
+        </Button>
+
+        <Input
+          className={cn(
+            'border-solid border border-slate-300 text-center',
+            'text-sm text-slate-900 placeholder-slate-400',
+            'h-10 px-2 py-0 m-0 w-full',
+            'bg-white',
+            'transition-all duration-200 ease-in-out',
+            'hover:border-slate-400',
+            'focus:outline-0 focus: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:border-red-600',
+            groupClasses,
+            classNames?.input
+          )}
+        />
+
+        <Button
+          slot="increment"
+          className={cn(
+            buttonClasses,
+            groupClasses,
+            'border-l-0 rounded-l-none',
+            classNames?.incrementBtn
+          )}
+        >
+          {slots?.incrementIcon || IncrementIcon}
+        </Button>
+      </Group>
+
+      {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>
+    </NumberField>
+  );
+}
+
+export default NumberInput;

package/components/NumberInput/NumberInput.types.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { NumberFieldProps, ValidationResult } from 'react-aria-components';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export interface NumberInputProps extends NumberFieldProps {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  slots?: {
+    decrementIcon?: ReactNode;
+    incrementIcon?: ReactNode;
+  };
+  classNames?: SlotsToClasses<
+    | 'label'
+    | 'input'
+    | 'description'
+    | 'error'
+    | 'incrementBtn'
+    | 'decrementBtn'
+    | 'group'
+  >;
+}

package/components/NumberInput/index.ts

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