@clicktap/ui 0.14.12 → 0.14.13

package/components/Breadcrumbs/BreadcrumbItem.types.ts

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

package/components/Breadcrumbs/BreadcrumbLink.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Link } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { BreadcrumbLinkProps } from './BreadcrumbLink.types';
+
+export function BreadcrumbLink({
+  children,
+  className,
+  ...props
+}: BreadcrumbLinkProps) {
+  return (
+    <Link
+      className={cn(
+        'text-slate-600 no-underline cursor-pointer',
+        'focus-visible:outline-2 focus-visible:outline focus-visible:outline-slate-200',
+        'hover:text-slate-900 hover:underline',
+        'current:cursor-default current:text-slate-900 current:font-semibold',
+        'disabled:cursor-default disabled:text-slate-400 disabled:current:text-slate-900',
+        className
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+}
+
+export default BreadcrumbLink;

package/components/Breadcrumbs/BreadcrumbLink.types.ts

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

package/components/Breadcrumbs/BreadcrumbSeparator.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Breadcrumb } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator.types';
+
+export function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: BreadcrumbSeparatorProps) {
+  return (
+    <Breadcrumb
+      className={cn('flex items-center text-slate-600', 'my-0 mx-2', className)}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children ?? (
+        <svg
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          className="w-4 h-4"
+        >
+          <path
+            d="M6 12L10 8L6 4"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </Breadcrumb>
+  );
+}
+
+export default BreadcrumbSeparator;

package/components/Breadcrumbs/BreadcrumbSeparator.types.ts

@@ -0,0 +1,9 @@
+import type { BreadcrumbProps } from 'react-aria-components';
+import type { ReactNode } from 'react';
+
+/** @todo what is this type actually trying to do? */
+export interface BreadcrumbSeparatorProps
+  extends Omit<BreadcrumbProps, 'children'>,
+    React.RefAttributes<HTMLLIElement> {
+  children?: ReactNode;
+}

package/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Breadcrumbs as AriaBreadcrumbs } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { BreadcrumbsProps } from './Breadcrumbs.types';
+
+export function Breadcrumbs({
+  children,
+  className,
+  ...props
+}: BreadcrumbsProps<object>) {
+  return (
+    <AriaBreadcrumbs
+      className={cn(
+        'flex items-center list-none text-sm',
+        'mx-0 mt-0 mr-4',
+        'px-0 pt-1.5 pb-0',
+        className
+      )}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      {children}
+    </AriaBreadcrumbs>
+  );
+}
+
+export default Breadcrumbs;

package/components/Breadcrumbs/Breadcrumbs.types.ts

@@ -0,0 +1,6 @@
+import type { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components';
+
+export type BreadcrumbsProps<T extends object> = Omit<
+  AriaBreadcrumbsProps<T>,
+  'items'
+>;

package/components/Breadcrumbs/index.ts

@@ -0,0 +1,10 @@
+export { BreadcrumbEllipsis } from './BreadcrumbEllipsis';
+export { BreadcrumbItem } from './BreadcrumbItem';
+export { BreadcrumbLink } from './BreadcrumbLink';
+export { BreadcrumbSeparator } from './BreadcrumbSeparator';
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbEllipsisProps } from './BreadcrumbEllipsis.types';
+export type { BreadcrumbItemProps } from './BreadcrumbItem.types';
+export type { BreadcrumbLinkProps } from './BreadcrumbLink.types';
+export type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator.types';
+export type { BreadcrumbsProps } from './Breadcrumbs.types';

package/components/Button/Button.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { ButtonProps } from './Button.types';
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      className,
+      isDisabled = false,
+      isLoading = false,
+      size = 'md',
+      variant = 'solid',
+      ...props
+    },
+    ref
+  ) {
+    const baseClasses = [
+      'flex items-center justify-center',
+      'rounded-md border-solid border',
+      'font-semibold text-sm',
+      'py-2 px-8',
+      'transition-all duration-200 ease-in-out',
+      'focus:outline-2 focus:outline focus:outline-slate-200 pressed:scale-95',
+      // size logic:
+      size === 'sm' && 'h-8',
+      size === 'md' && 'h-10',
+      size === 'lg' && 'h-12',
+      // variant logic:
+      variant === 'ghost' && [
+        'bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent',
+        'border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent',
+        'text-slate-900 disabled:text-slate-400',
+        isLoading && 'disabled:text-slate-900',
+      ],
+      variant === 'outline' && [
+        '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',
+        isLoading && ['disabled:border-slate-300', 'disabled:text-slate-900'],
+      ],
+      variant === 'solid' && [
+        'bg-slate-800 hover:bg-slate-900 focus:bg-slate-900 disabled:bg-slate-900',
+        'border-slate-800 hover:border-slate-900 focus:border-slate-900 disabled:border-slate-200',
+        'text-white disabled:text-slate-400',
+        isLoading && ['disabled:border-slate-900', 'disabled:text-white'],
+      ],
+    ];
+
+    return (
+      <AriaButton
+        ref={ref}
+        type="button"
+        isDisabled={isDisabled}
+        className={(renderProps) => {
+          const userClasses =
+            typeof className === 'function'
+              ? className(renderProps)
+              : className;
+
+          return cn(baseClasses, userClasses);
+        }}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+      />
+    );
+  }
+);
+
+export default Button;

package/components/Button/Button.types.ts

@@ -0,0 +1,7 @@
+import type { ButtonProps as AriaButtonProps } from 'react-aria-components';
+
+export type ButtonProps = AriaButtonProps & {
+  isLoading?: boolean;
+  variant?: 'solid' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+};

package/components/Button/index.ts

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

package/components/Card/Card.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { cn } from '../../utils/cn';
+import type { CardProps } from './Card.types';
+
+export function Card({ children, className, ...props }: CardProps) {
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <div className={cn('flex flex-col', className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export default Card;

package/components/Card/Card.types.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren, HTMLAttributes } from 'react';
+
+export type CardProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;

package/components/Card/index.ts

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

package/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,122 @@
+import { Checkbox as AriaCheckbox } from 'react-aria-components';
+import type { CheckboxRenderProps } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import type { CheckboxProps, CheckboxSlots } from './Checkbox.types';
+
+function ControlSlot({
+  control,
+  isHovered,
+  isFocused,
+  isDisabled,
+  isIndeterminate,
+  isInvalid,
+  isSelected,
+  isPressed,
+  classNames,
+  ...rest
+}: CheckboxRenderProps &
+  Pick<CheckboxSlots, 'control'> &
+  Pick<CheckboxProps, 'classNames'>) {
+  if (!control) {
+    return (
+      <div
+        className={cn(
+          'flex items-center justify-center',
+          'w-6 h-6',
+          'border border-solid border-slate-300 rounded',
+          'transition-all duration-200 ease-in-out',
+          'checkbox-control',
+          isHovered && ['border-slate-400'],
+          isFocused && ['border-slate-400 outline-2 outline outline-slate-200'],
+          (isDisabled || (isDisabled && isIndeterminate)) && [
+            'border-slate-200 bg-slate-100',
+          ],
+          isInvalid && ['bg-slate-100 text-red-600 border-red-500'],
+          isInvalid && isHovered && ['border-red-600'],
+          isInvalid && isFocused && ['border-red-600 outline-red-200'],
+          isInvalid &&
+            isSelected &&
+            isIndeterminate && ['bg-red-500 border-red-500'],
+          isInvalid &&
+            isSelected &&
+            isIndeterminate &&
+            isPressed && ['bg-red-600 border-red-600'],
+          (isSelected || isIndeterminate) && ['border-slate-300 bg-slate-300'],
+          (isSelected || isIndeterminate) &&
+            isPressed && ['border-slate-400 bg-slate-400'],
+          classNames?.control
+        )}
+      >
+        {/* <Control className="checkbox-control"> */}
+        <svg
+          viewBox="0 0 18 18"
+          aria-hidden="true"
+          style={{
+            strokeDasharray: '22px',
+            strokeDashoffset: isSelected || isIndeterminate ? 44 : 66,
+          }}
+          className={cn(
+            'w-4 h-4 fill-none',
+            'stroke-white stroke-[3px]',
+            'transition-all duration-200 ease-in-out',
+            isDisabled && isIndeterminate && ['stroke-none fill-slate-300'],
+            isIndeterminate && ['stroke-none fill-white']
+          )}
+        >
+          {isIndeterminate ? (
+            <rect x={1} y={7.5} width={15} height={3} />
+          ) : (
+            <polyline points="1 9 7 14 15 4" />
+          )}
+        </svg>
+      </div>
+    );
+  }
+  return typeof control === 'function'
+    ? control({
+        isHovered,
+        isFocused,
+        isDisabled,
+        isIndeterminate,
+        isInvalid,
+        isSelected,
+        isPressed,
+        ...rest,
+      })
+    : control;
+}
+
+export function Checkbox({
+  children,
+  slots,
+  className,
+  classNames,
+  ...props
+}: CheckboxProps) {
+  return (
+    <AriaCheckbox
+      className={cn(
+        'flex items-center gap-2',
+        'text-xs text-slate-500 forced-color-adjust-none disabled:text-slate-400 group',
+        'invalid:text-red-500',
+        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}
+        </>
+      )}
+    </AriaCheckbox>
+  );
+}
+
+export default Checkbox;

package/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,15 @@
+import type {
+  CheckboxProps as UiCheckboxProps,
+  CheckboxRenderProps,
+} from 'react-aria-components';
+import type { ReactNode } from 'react';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+export interface CheckboxSlots {
+  control?: ReactNode | ((values: CheckboxRenderProps) => ReactNode);
+}
+
+export interface CheckboxProps extends UiCheckboxProps {
+  slots?: CheckboxSlots;
+  classNames?: SlotsToClasses<'control'>;
+}

package/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSlots } from './Checkbox.types';

package/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useContext } from 'react';
+import { motion } from 'framer-motion';
+import type { CollapsibleContentProps } from './Collapsible.types';
+import { CollapsibleTriggerStateContext } from './CollapsibleTrigger';
+import { cn } from '../../utils/cn';
+
+export function Collapsible({ children, className }: CollapsibleContentProps) {
+  const { isOpen, id, defaultOpen } = useContext(
+    CollapsibleTriggerStateContext
+  );
+  return (
+    <motion.div
+      className={cn('w-full overflow-hidden', className)}
+      id={id}
+      variants={{
+        hidden: { height: '0px', opacity: 0 },
+        visible: { height: 'auto', opacity: 1 },
+      }}
+      initial={defaultOpen ? 'visible' : 'hidden'}
+      animate={isOpen ? 'visible' : 'hidden'}
+      transition={{
+        type: 'spring',
+        bounce: 0,
+      }}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export default Collapsible;

package/components/Collapsible/Collapsible.types.ts

@@ -0,0 +1,5 @@
+import type { PropsWithChildren, HTMLAttributes } from 'react';
+
+export type CollapsibleContentProps = PropsWithChildren<
+  HTMLAttributes<HTMLDivElement>
+>;

package/components/Collapsible/CollapsibleTrigger.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { Provider } from 'react-aria-components';
+import { useControlledState } from '@react-stately/utils';
+import { createContext, useCallback, useId, useRef } from 'react';
+import { PressResponder } from '@react-aria/interactions';
+import {
+  CollapsibleTriggerProps,
+  CollapsibleTriggerState,
+} from './CollapsibleTrigger.types';
+import { cn } from '../../utils/cn';
+
+/** @todo look into use hook to provide access instead of exporting directly */
+export const CollapsibleTriggerStateContext =
+  createContext<CollapsibleTriggerState>({} as CollapsibleTriggerState);
+
+export function CollapsibleTrigger({
+  children,
+  className,
+  ...props
+}: CollapsibleTriggerProps) {
+  const id = useId();
+  const [isOpen, onOpenChange] = useControlledState(
+    props.isOpen,
+    props.defaultOpen || false,
+    props.onOpenChange
+  );
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const toggle = useCallback(() => {
+    onOpenChange(!isOpen);
+  }, [onOpenChange, isOpen]);
+
+  return (
+    <Provider
+      values={[
+        [
+          CollapsibleTriggerStateContext,
+          { isOpen, id, defaultOpen: props.defaultOpen || false },
+        ],
+      ]}
+    >
+      <PressResponder
+        ref={buttonRef}
+        isPressed={isOpen}
+        onPress={toggle}
+        aria-expanded={isOpen}
+        aria-controls={id}
+      >
+        <div className={cn('w-full', className)}>{children}</div>
+      </PressResponder>
+    </Provider>
+  );
+}
+
+export default CollapsibleTrigger;

package/components/Collapsible/CollapsibleTrigger.types.ts

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+
+export type CollapsibleTriggerState = {
+  isOpen: boolean;
+  id: string;
+  defaultOpen: boolean;
+};
+
+export type CollapsibleTriggerProps = PropsWithChildren<{
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  className?: string | undefined;
+}>;

package/components/Collapsible/index.ts

@@ -0,0 +1,10 @@
+export { Collapsible } from './Collapsible';
+export {
+  CollapsibleTrigger,
+  CollapsibleTriggerStateContext,
+} from './CollapsibleTrigger';
+export type { CollapsibleContentProps } from './Collapsible.types';
+export type {
+  CollapsibleTriggerProps,
+  CollapsibleTriggerState,
+} from './CollapsibleTrigger.types';

package/components/Container/Container.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { forwardRef } from 'react';
+import type { ForwardedRef } from 'react';
+import type { ContainerProps } from './Container.types';
+import { cn } from '../../utils/cn';
+
+export const Container = forwardRef(
+  (
+    { children, className, ...props }: ContainerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('container', 'mx-auto my-0', 'py-0 px-4', className)}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default Container;

package/components/Container/Container.types.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren, HTMLAttributes } from 'react';
+
+export type ContainerProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;

package/components/Container/index.ts

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

package/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { Menu, Popover } from 'react-aria-components';
+import { forwardRef } from 'react';
+import type { Ref } from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '../../utils/cn';
+import type { PopoverProps } from './ContextMenu.types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ForwardedPopover = 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
+      <Popover {...props} ref={ref} style={ariaStyle} />
+    );
+  }
+);
+
+const MotionPopover = motion.create(ForwardedPopover);
+
+export function ContextMenu({
+  children,
+  key,
+  onAction,
+  setAnimation,
+  animation = 'hidden',
+  className,
+  classNames,
+  ...props
+}: PopoverProps) {
+  return (
+    <MotionPopover
+      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-56',
+        'bg-white',
+        'border border-solid border-slate-300',
+        className
+      )}
+      key={key}
+      isExiting={animation === 'hidden'}
+      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}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <Menu
+        className={cn('outline-none', classNames?.menu)}
+        onAction={onAction}
+      >
+        {children}
+      </Menu>
+    </MotionPopover>
+  );
+}
+
+export default ContextMenu;

package/components/ContextMenu/ContextMenu.types.ts

@@ -0,0 +1,17 @@
+import type { PopoverProps as AriaPopoverProps } from 'react-aria-components';
+import type { Dispatch, Key, SetStateAction, ReactNode } from 'react';
+import type { MotionStyle } from 'framer-motion';
+import type { SlotsToClasses } from '../../types/SlotsToClasses';
+
+type ContextMenuAnimationState = 'unmounted' | 'hidden' | 'visible';
+
+export interface PopoverProps
+  extends Omit<AriaPopoverProps, 'children' | 'style'> {
+  animation: ContextMenuAnimationState;
+  children: ReactNode;
+  onAction?: (key: Key) => void;
+  setAnimation: Dispatch<SetStateAction<ContextMenuAnimationState>>;
+  key?: Key | null;
+  classNames?: SlotsToClasses<'menu'>;
+  style?: MotionStyle;
+}

package/components/ContextMenu/index.ts

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