@calcom/atoms 2.7.2 → 2.8.1

package/src/components/ui/avatar-group.tsx

@@ -1,59 +0,0 @@
-import { cn } from "../../lib/utils";
-import { Avatar } from "./avatar";
-
-export type AvatarGroupProps = {
-  size: "sm" | "lg";
-  items: Array<{
-    image: string;
-    title?: string;
-    alt?: string;
-    href?: string | null;
-  }>;
-  className?: string;
-  truncateAfter?: number;
-  hideTruncatedAvatarsCount?: boolean;
-};
-
-export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
-  const LENGTH = props.items.length;
-  const truncateAfter = props.truncateAfter || 4;
-  const displayedAvatars = props.items.filter((avatar) => avatar.image).slice(0, truncateAfter);
-  const numTruncatedAvatars = LENGTH - displayedAvatars.length;
-
-  if (!displayedAvatars.length) return <></>;
-
-  return (
-    <ul className={cn("flex items-center", props.className)}>
-      {displayedAvatars.map((item, idx) => (
-        <li key={idx} className="-mr-1 inline-block">
-          <Avatar
-            data-testid="avatar"
-            className="border-subtle"
-            imageSrc={item.image}
-            title={item.title}
-            alt={item.alt || ""}
-            size={props.size}
-            href={item.href}
-          />
-        </li>
-      ))}
-      {numTruncatedAvatars > 0 && (
-        <li
-          className={cn(
-            "bg-inverted relative -mr-1 inline-flex justify-center overflow-hidden rounded-full",
-            props.size === "sm" ? "min-w-6 h-6" : "min-w-16 h-16"
-          )}
-        >
-          <span
-            className={cn(
-              " text-inverted m-auto flex h-full w-full items-center justify-center text-center",
-              props.size === "sm" ? "text-[12px]" : "text-2xl"
-            )}
-          >
-            +{props.hideTruncatedAvatarsCount ? null : numTruncatedAvatars}
-          </span>
-        </li>
-      )}
-    </ul>
-  );
-};

package/src/components/ui/avatar.tsx

@@ -1,94 +0,0 @@
-// @ts-nocheck — Radix avatar prop-pick narrowing
-"use client";
-
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { cva } from "class-variance-authority";
-import Link from "next/link";
-
-import { AVATAR_FALLBACK } from "../../constants/app";
-import { cn } from "../../lib/utils";
-import { Tooltip } from "./tooltip";
-
-type Maybe<T> = T | null | undefined;
-
-export type AvatarProps = {
-  className?: string;
-  size?: "xs" | "xsm" | "sm" | "md" | "mdLg" | "lg" | "xl";
-  shape?: "circle" | "square";
-  imageSrc?: Maybe<string>;
-  title?: string;
-  alt: string;
-  href?: string | null;
-  fallback?: React.ReactNode;
-  accepted?: boolean;
-  asChild?: boolean;
-  indicator?: React.ReactNode;
-  "data-testid"?: string;
-};
-
-const avatarClasses = cva(
-  "bg-emphasis border-default relative inline-flex aspect-square items-center justify-center border align-top",
-  {
-    variants: {
-      size: {
-        xs: "w-4 h-4 min-w-4 min-h-4 max-h-4",
-        xsm: "w-5 h-5 min-w-5 min-h-5",
-        sm: "w-6 h-6 min-w-6 min-h-6",
-        md: "w-8 h-8 min-w-8 min-h-8",
-        mdLg: "w-10 h-10 min-w-10 min-h-10",
-        lg: "w-16 h-16 min-w-16 min-h-16",
-        xl: "w-24 h-24 min-w-24 min-h-24",
-      },
-      shape: {
-        circle: "rounded-full",
-        square: "",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      shape: "circle",
-    },
-    compoundVariants: [
-      { size: ["xs", "xsm", "sm"], shape: "square", className: "rounded" },
-      { size: ["md"], shape: "square", className: "rounded-md" },
-      { size: ["mdLg", "lg", "xl"], shape: "square", className: "rounded-[10px]" },
-    ],
-  }
-);
-
-export function Avatar(props: AvatarProps) {
-  const { imageSrc, size = "md", alt, title, href, indicator } = props;
-  const avatarClass = avatarClasses({ size, shape: props.shape });
-  const rootClass = cn("aspect-square rounded-full", avatarClass);
-
-  let avatar = (
-    <AvatarPrimitive.Root
-      data-testid={props?.["data-testid"]}
-      className={cn(avatarClass, indicator ? "overflow-visible" : "overflow-hidden", props.className)}
-    >
-      <AvatarPrimitive.Image
-        src={imageSrc ?? undefined}
-        alt={alt}
-        className={cn("aspect-square", avatarClass)}
-      />
-      <AvatarPrimitive.Fallback
-        delayMs={600}
-        asChild={props.asChild}
-        className="flex h-full items-center justify-center"
-      >
-        {props.fallback ? props.fallback : <img src={AVATAR_FALLBACK} alt={alt} className={rootClass} />}
-      </AvatarPrimitive.Fallback>
-      {indicator}
-    </AvatarPrimitive.Root>
-  );
-
-  if (href) {
-    avatar = (
-      <Link data-testid="avatar-href" href={href}>
-        {avatar}
-      </Link>
-    );
-  }
-
-  return title ? <Tooltip content={title}>{avatar}</Tooltip> : <>{avatar}</>;
-}

package/src/components/ui/badge.tsx

@@ -1,93 +0,0 @@
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import React from "react";
-
-import { cn } from "../../lib/utils";
-import { Icon, type IconName } from "./icon";
-
-export const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded-[4px] gap-x-1", {
-  variants: {
-    variant: {
-      default: "bg-attention text-attention",
-      warning: "bg-attention text-attention",
-      orange: "bg-attention text-attention",
-      success: "bg-cal-success text-success",
-      green: "bg-cal-success text-success",
-      gray: "bg-emphasis text-emphasis",
-      blue: "bg-cal-info text-info",
-      red: "bg-error text-error",
-      error: "bg-error text-error",
-      grayWithoutHover: "bg-gray-100 text-gray-800 dark:bg-darkgray-200 dark:text-darkgray-800",
-      purple: "bg-purple-50 text-purple-800",
-    },
-    size: {
-      sm: "px-1 py-1 text-[10px] leading-none",
-      md: "py-1 px-1.5 text-xs leading-none",
-      lg: "py-1 px-1.5 text-sm leading-none rounded-lg",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    size: "md",
-  },
-});
-
-type InferredBadgeStyles = VariantProps<typeof badgeStyles>;
-
-type IconOrDot =
-  | { startIcon?: IconName; withDot?: never; customDot?: never }
-  | { startIcon?: never; withDot?: true; customDot?: never }
-  | { startIcon?: never; withDot?: never; customDot?: React.ReactNode };
-
-export type BadgeBaseProps = InferredBadgeStyles & {
-  children: React.ReactNode;
-  rounded?: boolean;
-  customStartIcon?: React.ReactNode;
-  customDot?: React.ReactNode;
-} & IconOrDot;
-
-export type BadgeProps =
-  | (BadgeBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> & { onClick?: never })
-  | (BadgeBaseProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "onClick"> & { onClick: () => void });
-
-export const Badge = function Badge(props: BadgeProps) {
-  const {
-    customStartIcon,
-    variant,
-    className,
-    size,
-    startIcon,
-    withDot,
-    children,
-    rounded,
-    customDot,
-    ...passThroughProps
-  } = props;
-  const isButton = "onClick" in passThroughProps && passThroughProps.onClick !== undefined;
-  const StartIcon = startIcon;
-  const classes = cn(badgeStyles({ variant, size }), rounded && "h-5 w-5 rounded-full p-0", className);
-
-  const Children = () => (
-    <>
-      {withDot ? (
-        <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" data-testid="go-primitive-dot">
-          <circle cx="4" cy="4" r="4" />
-        </svg>
-      ) : null}
-      {customStartIcon ||
-        (StartIcon ? (
-          <Icon
-            name={StartIcon}
-            data-testid="start-icon"
-            className="stroke-[3px]"
-            style={{ width: 12, height: 12 }}
-          />
-        ) : null)}
-      {children}
-    </>
-  );
-
-  const Wrapper = isButton ? "button" : "div";
-
-  return React.createElement(Wrapper, { ...passThroughProps, className: classes }, <Children />);
-};

package/src/components/ui/button-group.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-
-import { cn } from "../../lib/utils";
-
-type Props = {
-  children: React.ReactNode;
-  combined?: boolean;
-  containerProps?: JSX.IntrinsicElements["div"];
-};
-
-const sizeToRadius = {
-  lg: "12px",
-  base: "8px",
-  sm: "10px",
-  xs: "8px",
-} as const;
-
-export function ButtonGroup({ children, combined = false, containerProps }: Props) {
-  const firstButton = React.Children.toArray(children)[0] as React.ReactElement<{ size?: string }>;
-  const size = firstButton?.props?.size || "base";
-  const radius = sizeToRadius[size as keyof typeof sizeToRadius];
-
-  const style = combined ? ({ "--btn-group-radius": radius } as React.CSSProperties) : undefined;
-
-  return (
-    <div
-      {...containerProps}
-      style={style}
-      className={cn(
-        "flex",
-        !combined
-          ? "space-x-2 rtl:space-x-reverse"
-          : "[&>*:first-child]:rounded-l-(--btn-group-radius) rtl:[&>*:first-child]:rounded-l-none rtl:[&>*:first-child]:rounded-r-(--btn-group-radius) [&>*:last-child]:rounded-r-(--btn-group-radius) rtl:[&>*:last-child]:rounded-l-(--btn-group-radius) rtl:[&>*:last-child]:rounded-r-none [&>*:not(:first-child)]:-ml-px *:rounded-none *:border hover:*:z-1",
-        containerProps?.className
-      )}
-    >
-      {children}
-    </div>
-  );
-}

package/src/components/ui/button.tsx

@@ -1,177 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-"use client";
-
-import { cva, type VariantProps } from "class-variance-authority";
-import Link, { type LinkProps } from "next/link";
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEvent, ReactNode, Ref } from "react";
-import { forwardRef } from "react";
-import { cn } from "../../lib/utils";
-import { Icon, type IconName, Spinner } from "./icon";
-import { Tooltip } from "./tooltip";
-
-const buttonClasses = cva(
-  "group relative inline-flex cursor-pointer items-center justify-center gap-1 whitespace-nowrap text-sm font-medium transition disabled:cursor-not-allowed",
-  {
-    variants: {
-      variant: {
-        button: "rounded-[10px]",
-        icon: "min-h-[36px] min-w-[36px] rounded-[10px] p-2",
-        fab: "min-h-14 min-w-14 rounded-full md:min-h-min md:min-w-min md:rounded-[10px] md:px-4 md:py-2.5",
-      },
-      color: {
-        primary:
-          "border border-brand-default bg-brand-default text-brand shadow-button-solid-brand-default duration-100 not-disabled:hover:bg-brand-emphasis not-disabled:hover:shadow-button-solid-brand-hover not-disabled:active:shadow-button-solid-brand-active disabled:opacity-30",
-        secondary:
-          "border border-default bg-default text-default shadow-outline-gray-rested duration-200 not-disabled:hover:bg-cal-muted not-disabled:hover:text-emphasis not-disabled:hover:shadow-outline-gray-hover not-disabled:active:shadow-outline-gray-active disabled:opacity-30",
-        minimal:
-          "border border-transparent text-subtle duration-200 not-disabled:hover:border-subtle not-disabled:hover:bg-subtle not-disabled:hover:text-emphasis not-disabled:active:shadow-outline-gray-active disabled:opacity-30",
-        destructive:
-          "border border-default text-error shadow-outline-red-rested duration-200 hover:border-semantic-error hover:bg-error not-disabled:hover:shadow-outline-red-hover not-disabled:active:shadow-outline-red-active disabled:opacity-30",
-      },
-      size: {
-        xs: "h-6 px-2 text-xs leading-none",
-        sm: "h-7 px-2 py-1.5 text-sm leading-none",
-        base: "px-2.5 py-2 leading-none",
-        lg: "px-3 py-2.5",
-      },
-      loading: {
-        true: "cursor-wait",
-      },
-    },
-    defaultVariants: {
-      variant: "button",
-      color: "primary",
-      size: "base",
-    },
-  }
-);
-
-type InferredVariantProps = VariantProps<typeof buttonClasses>;
-
-export type ButtonColor = NonNullable<InferredVariantProps["color"]>;
-export type ButtonVariant = NonNullable<InferredVariantProps["variant"]>;
-
-type ButtonBaseProps = {
-  onClick?: (event: MouseEvent<HTMLElement>) => void;
-  CustomStartIcon?: ReactNode;
-  StartIcon?: IconName;
-  EndIcon?: IconName;
-  shallow?: boolean;
-  tooltip?: ReactNode;
-  tooltipSide?: "top" | "right" | "bottom" | "left";
-  tooltipOffset?: number;
-  tooltipClassName?: string;
-  loading?: boolean;
-  color?: ButtonColor;
-  variant?: ButtonVariant;
-  size?: InferredVariantProps["size"];
-  flex?: boolean;
-};
-
-type ButtonAsLinkProps = ButtonBaseProps &
-  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick" | "color"> &
-  LinkProps;
-
-type ButtonAsButtonProps = ButtonBaseProps &
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "color"> & {
-    href?: never;
-  };
-
-export type ButtonProps = ButtonAsLinkProps | ButtonAsButtonProps;
-
-const buttonIconClassName = (variant: ButtonVariant, loading?: boolean) =>
-  cn(
-    "shrink-0",
-    loading ? "invisible" : "visible",
-    variant === "icon" ? "h-4 w-4" : "h-4 w-4 stroke-[1.5px]"
-  );
-
-export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
-  {
-    loading = false,
-    color = "primary",
-    size,
-    variant = "button",
-    type = "button",
-    tooltip,
-    tooltipSide = "top",
-    tooltipOffset = 4,
-    tooltipClassName,
-    CustomStartIcon,
-    StartIcon,
-    EndIcon,
-    className,
-    disabled,
-    children,
-    href,
-    shallow,
-    onClick,
-    ...passThroughProps
-  },
-  forwardedRef
-) {
-  const isDisabled = Boolean(disabled || loading);
-  const buttonClassName = cn(buttonClasses({ color, size, loading, variant }), className);
-
-  const content = (
-    <>
-      {CustomStartIcon ? CustomStartIcon : null}
-      {!CustomStartIcon && StartIcon ? (
-        <Icon name={StartIcon} className={buttonIconClassName(variant, loading)} />
-      ) : null}
-      <span className={cn("contents", loading && "invisible")}>{children}</span>
-      {loading ? (
-        <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-          <Spinner className={cn("h-5 w-5", color === "primary" ? "text-inverted" : "text-emphasis")} />
-        </span>
-      ) : null}
-      {EndIcon ? <Icon name={EndIcon} className={buttonIconClassName(variant, loading)} /> : null}
-    </>
-  );
-
-  const handleClick = isDisabled
-    ? (event: MouseEvent<HTMLElement>) => {
-        event.preventDefault();
-      }
-    : onClick;
-
-  const buttonNode =
-    typeof href === "string" ? (
-      <Link
-        {...(passThroughProps as Omit<ButtonAsLinkProps, keyof ButtonBaseProps | "href">)}
-        href={href}
-        shallow={shallow}
-        ref={forwardedRef as Ref<HTMLAnchorElement>}
-        aria-disabled={isDisabled}
-        className={buttonClassName}
-        onClick={handleClick}
-      >
-        {content}
-      </Link>
-    ) : (
-      <button
-        {...(passThroughProps as Omit<ButtonAsButtonProps, keyof ButtonBaseProps | "href">)}
-        ref={forwardedRef as Ref<HTMLButtonElement>}
-        type={type}
-        disabled={isDisabled}
-        className={buttonClassName}
-        onClick={handleClick}
-      >
-        {content}
-      </button>
-    );
-
-  if (!tooltip) {
-    return buttonNode;
-  }
-
-  return (
-    <Tooltip content={tooltip} side={tooltipSide} sideOffset={tooltipOffset} className={tooltipClassName}>
-      {buttonNode}
-    </Tooltip>
-  );
-});
-
-Button.displayName = "Button";
-
-export { buttonClasses };

package/src/components/ui/calendar-switch.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-import { ArrowLeftIcon, RotateCwIcon } from "./icons";
-
-export type ICalendarSwitchProps = {
-  title: string;
-  externalId: string;
-  type: string;
-  isChecked: boolean;
-  name: string;
-  isLastItemInList?: boolean;
-  destination?: boolean;
-  credentialId: number;
-  delegationCredentialId: string | null;
-  eventTypeId: number | null;
-  disabled?: boolean;
-};
-
-export function CalendarSwitchComponent(
-  props: ICalendarSwitchProps & {
-    isLoading: boolean;
-    children: ReactNode;
-    translations?: {
-      spanText?: string;
-    };
-  }
-) {
-  const {
-    externalId,
-    name,
-    isLoading,
-    translations = {
-      spanText: "Adding events to",
-    },
-    children,
-  } = props;
-
-  return (
-    <div className={cn("my-2 flex flex-row items-center")}>
-      <div className="flex pl-2">{children}</div>
-      <label className="ml-3 text-sm font-medium leading-5" htmlFor={externalId}>
-        {name}
-      </label>
-      {!!props.destination && (
-        <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
-          <ArrowLeftIcon className="h-4 w-4" />
-          {translations.spanText}
-        </span>
-      )}
-      {isLoading && <RotateCwIcon className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />}
-    </div>
-  );
-}

package/src/components/ui/checkbox.tsx

@@ -1,126 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { useId } from "@radix-ui/react-id";
-import type { InputHTMLAttributes } from "react";
-import React, { forwardRef } from "react";
-
-import { cn } from "../../lib/utils";
-import { CheckIcon } from "./icons";
-
-type Props = InputHTMLAttributes<HTMLInputElement> & {
-  label?: React.ReactNode;
-  description?: string;
-  descriptionAsLabel?: boolean;
-  informationIconText?: string;
-  error?: boolean;
-  className?: string;
-  descriptionClassName?: string;
-  descriptionAsSafeHtml?: string;
-};
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "border-default data-[state=checked]:bg-brand-default data-[state=checked]:text-brand peer h-4 w-4 shrink-0 rounded-[4px] border ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <CheckIcon className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-const CheckboxField = forwardRef<HTMLInputElement, Props>(
-  ({ label, description, error, disabled, descriptionAsSafeHtml, ...rest }, ref) => {
-    const descriptionAsLabel = !label || rest.descriptionAsLabel;
-    const id = useId();
-    return (
-      <div className="block items-center sm:flex">
-        {label && (
-          <div className="min-w-48 mb-4 sm:mb-0">
-            {React.createElement(
-              descriptionAsLabel ? "div" : "label",
-              {
-                className: cn("flex text-sm font-medium text-emphasis"),
-                ...(!descriptionAsLabel
-                  ? {
-                      htmlFor: rest.id ? rest.id : id,
-                    }
-                  : {}),
-              },
-              label
-            )}
-          </div>
-        )}
-        <div className="w-full">
-          <div className="hover:bg-subtle relative flex w-fit items-center rounded-md p-1">
-            {React.createElement(
-              descriptionAsLabel ? "label" : "div",
-              {
-                className: cn(
-                  "relative flex items-start",
-                  !error && descriptionAsLabel ? "text-emphasis" : "text-emphasis",
-                  error && "text-error"
-                ),
-              },
-              <>
-                <div className="flex h-5 items-center">
-                  <input
-                    {...rest}
-                    ref={ref}
-                    type="checkbox"
-                    disabled={disabled}
-                    id={rest.id ? rest.id : id}
-                    className={cn(
-                      "text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default focus:bg-default active:bg-default checked:border-transparent! checked:bg-gray-800! h-4 w-4 rounded-[4px] transition focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2",
-                      !error && disabled
-                        ? "cursor-not-allowed bg-gray-300 checked:bg-gray-300 hover:bg-gray-300 hover:checked:bg-gray-300"
-                        : "hover:bg-subtle hover:border-emphasis",
-                      error &&
-                        "border-error hover:bg-error hover:border-error checked:bg-darkerror checked:hover:border-error checked:hover:bg-darkerror",
-                      rest.className
-                    )}
-                  />
-                </div>
-                {descriptionAsSafeHtml ? (
-                  // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via descriptionAsSafeHtml prop
-                  <span
-                    className={cn(
-                      "text-default ml-2 text-sm [&_a]:text-blue-500",
-                      !label && "font-medium",
-                      rest.descriptionClassName
-                    )}
-                    dangerouslySetInnerHTML={{
-                      __html: descriptionAsSafeHtml,
-                    }}
-                  />
-                ) : (
-                  <span
-                    className={cn(
-                      "text-default ml-2 text-sm",
-                      !label && "font-medium",
-                      rest.descriptionClassName
-                    )}
-                  >
-                    {description}
-                  </span>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
-CheckboxField.displayName = "CheckboxField";
-
-export { Checkbox, CheckboxField };