@calcom/atoms 2.8.0 → 2.8.2

package/src/components/ui/text-field.tsx

@@ -1,241 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-"use client";
-
-import { cva } from "class-variance-authority";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { forwardRef, useCallback, useId, useState } from "react";
-
-import { cn } from "../../lib/utils";
-import { EyeIcon, EyeOffIcon } from "./icons";
-import { Label } from "./label";
-
-export const inputStyles = cva(
-  [
-    "rounded-[10px] border",
-    "leading-none font-normal",
-    "bg-default",
-    "border-default",
-    "text-default",
-    "placeholder:text-muted",
-    "hover:border-emphasis",
-    "focus:border-emphasis",
-    "focus:ring-0",
-    "focus:shadow-outline-gray-focused",
-    "disabled:bg-subtle",
-    "disabled:hover:border-default",
-    "disabled:cursor-not-allowed",
-    "shadow-outline-gray-rested",
-    "transition-all",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-7 px-2 py-1 text-xs",
-        md: "h-8 px-3 py-2 text-sm",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-);
-
-type InputBaseProps = Omit<ComponentPropsWithoutRef<"input">, "size">;
-
-type InputProps = InputBaseProps & {
-  isFullWidth?: boolean;
-  size?: "sm" | "md";
-};
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { isFullWidth = true, size = "md", className, ...props },
-  ref
-) {
-  return (
-    <input {...props} ref={ref} className={cn(inputStyles({ size }), isFullWidth && "w-full", className)} />
-  );
-});
-
-type TextAreaProps = ComponentPropsWithoutRef<"textarea">;
-
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
-  { className, ...props },
-  ref
-) {
-  return <textarea {...props} ref={ref} className={cn(inputStyles(), "min-h-[80px] w-full", className)} />;
-});
-
-export type TextAreaFieldProps = TextAreaProps & {
-  label?: ReactNode;
-  name: string;
-  labelClassName?: string;
-};
-
-export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(function TextAreaField(
-  { label, name, labelClassName, ...props },
-  ref
-) {
-  const id = `textarea-${name}`;
-  return (
-    <div>
-      {label ? (
-        <label htmlFor={id} className={cn("text-default mb-2 block text-sm font-medium", labelClassName)}>
-          {label}
-        </label>
-      ) : null}
-      <TextArea id={id} name={name} ref={ref} {...props} />
-    </div>
-  );
-});
-
-export type InputFieldProps = InputProps & {
-  label?: ReactNode;
-  labelClassName?: string;
-  labelSrOnly?: boolean;
-  noLabel?: boolean;
-  hint?: ReactNode;
-  error?: string | boolean;
-  addOnSuffix?: ReactNode;
-  onClickAddon?: (e: React.MouseEvent<HTMLDivElement>) => void;
-  containerClassName?: string;
-  showAsteriskIndicator?: boolean;
-};
-
-export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
-  const id = useId();
-  const {
-    label,
-    labelClassName,
-    labelSrOnly,
-    noLabel,
-    hint,
-    error,
-    addOnSuffix,
-    onClickAddon,
-    className,
-    containerClassName,
-    showAsteriskIndicator,
-    disabled,
-    readOnly,
-    size,
-    name,
-    ...rest
-  } = props;
-
-  return (
-    <div className={cn(containerClassName)}>
-      {label && !noLabel && (
-        <Label htmlFor={id} className={cn(labelClassName, labelSrOnly && "sr-only", error && "text-error")}>
-          {label}
-          {showAsteriskIndicator && !readOnly && rest.required ? (
-            <span className="text-default ltr:ml-1 rtl:mr-1 font-medium">*</span>
-          ) : null}
-        </Label>
-      )}
-      {addOnSuffix ? (
-        <div
-          dir="ltr"
-          className={cn(
-            inputStyles({ size }),
-            "group relative mb-1 flex min-w-0 items-center gap-1",
-            "focus-within:shadow-outline-gray-focused focus-within:border-emphasis"
-          )}
-        >
-          <input
-            id={id}
-            name={name}
-            className={cn(
-              "w-full min-w-0 truncate border-0 bg-transparent focus:outline-none focus:ring-0",
-              "text-default rounded-lg text-sm font-medium leading-none",
-              "placeholder:text-muted disabled:cursor-not-allowed disabled:bg-transparent",
-              className
-            )}
-            {...rest}
-            disabled={readOnly || disabled}
-            ref={ref}
-          />
-          <div
-            onClick={onClickAddon}
-            className={cn(
-              "flex shrink-0 items-center justify-center whitespace-nowrap",
-              onClickAddon && "pointer-events-auto cursor-pointer disabled:hover:cursor-not-allowed"
-            )}
-          >
-            {addOnSuffix}
-          </div>
-        </div>
-      ) : (
-        <Input
-          id={id}
-          name={name}
-          size={size}
-          className={cn(
-            "w-full min-w-0 truncate focus:outline-none focus:ring-0",
-            "text-default rounded-lg text-sm font-medium leading-none",
-            "placeholder:text-muted disabled:cursor-not-allowed",
-            className
-          )}
-          {...rest}
-          readOnly={readOnly}
-          ref={ref}
-          disabled={readOnly || disabled}
-        />
-      )}
-      {typeof error === "string" && error && <p className="text-error mt-1 text-sm">{error}</p>}
-      {hint && <p className="text-muted mt-2 text-sm">{hint}</p>}
-    </div>
-  );
-});
-
-export const TextField = forwardRef<HTMLInputElement, InputFieldProps>(function TextField(props, ref) {
-  return <InputField ref={ref} {...props} />;
-});
-
-export const EmailField = forwardRef<HTMLInputElement, InputFieldProps>(function EmailField(props, ref) {
-  return (
-    <InputField
-      ref={ref}
-      type="email"
-      autoCapitalize="none"
-      autoComplete="email"
-      autoCorrect="off"
-      inputMode="email"
-      {...props}
-    />
-  );
-});
-
-export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(
-  function PasswordField(props, ref) {
-    const [isVisible, setIsVisible] = useState(false);
-    const toggle = useCallback(() => setIsVisible((v) => !v), []);
-
-    return (
-      <InputField
-        type={isVisible ? "text" : "password"}
-        placeholder={props.placeholder || "•••••••••••••"}
-        ref={ref}
-        {...props}
-        className={cn(
-          "addon-wrapper mb-0 ltr:border-r-0 ltr:pr-10 rtl:border-l-0 rtl:pl-10",
-          props.className
-        )}
-        addOnSuffix={
-          <button
-            className="text-emphasis h-9"
-            tabIndex={-1}
-            type="button"
-            onClick={toggle}
-            aria-label={isVisible ? "Hide password" : "Show password"}
-          >
-            {isVisible ? (
-              <EyeOffIcon className="h-4 w-4 stroke-[2.5px]" />
-            ) : (
-              <EyeIcon className="h-4 w-4 stroke-[2.5px]" />
-            )}
-          </button>
-        }
-      />
-    );
-  }
-);

package/src/components/ui/toast.tsx

@@ -1,121 +0,0 @@
-// @ts-nocheck — same Radix 1.x prop-pick narrowing issue as dialog.tsx.
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import type {
-  ComponentPropsWithoutRef,
-  ElementRef,
-  ForwardRefExoticComponent,
-  ReactElement,
-  RefAttributes,
-} from "react";
-import { forwardRef } from "react";
-import { cn } from "../../lib/utils";
-import { XIcon } from "./icons";
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = forwardRef<
-  ElementRef<typeof ToastPrimitives.Viewport>,
-  ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const Toast: ForwardRefExoticComponent<ToastPrimitives.ToastProps & RefAttributes<HTMLLIElement>> =
-  forwardRef<
-    ElementRef<typeof ToastPrimitives.Root>,
-    ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
-  >(({ className, variant, ...props }, ref) => {
-    return (
-      <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
-    );
-  });
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = forwardRef<
-  ElementRef<typeof ToastPrimitives.Action>,
-  ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "ring-offset-background hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = forwardRef<
-  ElementRef<typeof ToastPrimitives.Close>,
-  ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "text-foreground/50 hover:text-foreground absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <XIcon className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = forwardRef<
-  ElementRef<typeof ToastPrimitives.Title>,
-  ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = forwardRef<
-  ElementRef<typeof ToastPrimitives.Description>,
-  ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};

package/src/components/ui/toaster.tsx

@@ -1,28 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-import { AtomsWrapper } from "../atoms-wrapper";
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./toast";
-import { useToast } from "./use-toast";
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <AtomsWrapper>
-      <ToastProvider>
-        {toasts.map(({ id, title, description, action, ...props }) => (
-          <AtomsWrapper key={id}>
-            <Toast {...props}>
-              <div className="grid gap-1">
-                {title && <ToastTitle>{title}</ToastTitle>}
-                {description && <ToastDescription>{description}</ToastDescription>}
-              </div>
-              {action}
-              <ToastClose />
-            </Toast>
-          </AtomsWrapper>
-        ))}
-        <ToastViewport />
-      </ToastProvider>
-    </AtomsWrapper>
-  );
-}

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

@@ -1,109 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-"use client";
-
-import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
-import type { ReactNode } from "react";
-import { useState } from "react";
-
-import { cn } from "../../lib/utils";
-import { Tooltip } from "./tooltip";
-
-interface ToggleGroupProps extends Omit<RadixToggleGroup.ToggleGroupSingleProps, "type"> {
-  options: {
-    value: string;
-    label: string | ReactNode;
-    disabled?: boolean;
-    tooltip?: string;
-    iconLeft?: ReactNode;
-    dataTestId?: string;
-    onClick?: VoidFunction;
-  }[];
-  isFullWidth?: boolean;
-  orientation?: "horizontal" | "vertical";
-}
-
-const OptionalTooltipWrapper = ({
-  children,
-  tooltipText,
-}: {
-  children: ReactNode;
-  tooltipText?: ReactNode;
-}) => {
-  if (tooltipText) {
-    return (
-      <Tooltip delayDuration={150} sideOffset={12} side="bottom" content={tooltipText}>
-        {children}
-      </Tooltip>
-    );
-  }
-  return <>{children}</>;
-};
-
-export const ToggleGroup = ({
-  options,
-  onValueChange,
-  isFullWidth,
-  orientation = "horizontal",
-  customClassNames,
-  defaultValue,
-  ...props
-}: ToggleGroupProps & { customClassNames?: string }) => {
-  const isControlled = props.value !== undefined;
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
-
-  return (
-    <RadixToggleGroup.Root
-      type="single"
-      {...props}
-      {...(isControlled ? { value: props.value } : { value: uncontrolledValue })}
-      orientation={orientation}
-      onValueChange={(value) => {
-        if (!value) return;
-        if (!isControlled) {
-          setUncontrolledValue(value);
-        }
-        onValueChange?.(value);
-      }}
-      style={{
-        "--toggle-group-shadow": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)",
-      }}
-      className={cn(
-        `bg-muted rounded-[10px] p-0.5`,
-        orientation === "horizontal" && "inline-flex gap-0.5 rtl:flex-row-reverse",
-        orientation === "vertical" && "flex w-fit flex-col gap-0.5",
-        props.className,
-        isFullWidth && "w-full",
-        customClassNames
-      )}
-    >
-      {options.map((option) => (
-        <OptionalTooltipWrapper key={option.value} tooltipText={option.tooltip}>
-          <RadixToggleGroup.Item
-            disabled={option.disabled}
-            onClick={option?.onClick}
-            value={option.value}
-            data-testid={option.dataTestId ?? `toggle-group-item-${option.value}`}
-            className={cn(
-              "aria-checked:bg-default aria-checked:border-subtle rounded-lg border border-transparent p-1.5 text-sm leading-none transition aria-checked:shadow-[0px_2px_3px_0px_rgba(0,0,0,0.03),0px_2px_2px_-1px_rgba(0,0,0,0.03)]",
-              option.disabled
-                ? "text-gray-400 hover:cursor-not-allowed"
-                : "text-default [&[aria-checked='false']]:hover:text-emphasis [&[aria-checked='false']]:hover:bg-subtle cursor-pointer",
-              isFullWidth && "w-full"
-            )}
-          >
-            <div
-              className={cn(
-                "flex items-center gap-1",
-                orientation === "horizontal" && "justify-center",
-                orientation === "vertical" && "justify-start"
-              )}
-            >
-              {option.iconLeft && <span className="flex h-4 w-4 items-center">{option.iconLeft}</span>}
-              {option.label}
-            </div>
-          </RadixToggleGroup.Item>
-        </OptionalTooltipWrapper>
-      ))}
-    </RadixToggleGroup.Root>
-  );
-};

package/src/components/ui/tooltip.tsx

@@ -1,84 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-"use client";
-
-// @ts-nocheck — same Radix 1.x prop-pick narrowing issue as dialog.tsx.
-import * as TooltipPrimitives from "@radix-ui/react-tooltip-atoms";
-import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
-import { cn } from "../../lib/utils";
-
-const PortalAsFragment = ({ children }: { children: ReactElement }) => <>{children}</>;
-
-export function Tooltip({
-  children,
-  content,
-  open,
-  defaultOpen,
-  onOpenChange,
-  delayDuration,
-  side = "top",
-  align = "center",
-  className,
-  sideOffset = 4,
-  ...props
-}: {
-  children: ReactNode;
-  content?: ReactNode;
-  delayDuration?: number;
-  open?: boolean;
-  defaultOpen?: boolean;
-  side?: "top" | "right" | "bottom" | "left";
-  align?: "start" | "center" | "end";
-  onOpenChange?: (open: boolean) => void;
-} & ComponentPropsWithoutRef<typeof TooltipPrimitives.Content>) {
-  return (
-    <TooltipPrimitives.Root
-      delayDuration={delayDuration ?? 50}
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-    >
-      {content === undefined ? (
-        children
-      ) : (
-        <>
-          <TooltipPrimitives.Trigger asChild>{children}</TooltipPrimitives.Trigger>
-          <TooltipPrimitives.Portal>
-            <TooltipPrimitives.Content
-              {...props}
-              side={side}
-              align={align}
-              sideOffset={sideOffset}
-              className={cn(
-                "bg-inverted text-inverted relative z-50 rounded-sm px-2 py-1 text-xs font-semibold shadow-lg",
-                side === "top" && "-mt-1",
-                side === "left" && "mr-2",
-                side === "right" && "ml-2",
-                className
-              )}
-            >
-              {content}
-            </TooltipPrimitives.Content>
-          </TooltipPrimitives.Portal>
-        </>
-      )}
-    </TooltipPrimitives.Root>
-  );
-}
-
-export const TooltipTrigger = TooltipPrimitives.Trigger;
-export const TooltipContent = TooltipPrimitives.Content;
-export const TooltipArrow = TooltipPrimitives.Arrow;
-export const TooltipProvider = TooltipPrimitives.Provider;
-export const Portal = PortalAsFragment;
-export const Trigger = TooltipPrimitives.Trigger;
-export const Provider = TooltipPrimitives.Provider;
-export const Content = TooltipPrimitives.Content;
-export const Arrow = TooltipPrimitives.Arrow;
-export const Root = TooltipPrimitives.Root;
-// Explicit type annotation: without it, tsc emits a return type that
-// references the internal .bun/ resolver path, which isn't portable across
-// machines. Surfaced when this package was extracted from calcom/cal where
-// yarn's flat node_modules layout hid the issue.
-export const createTooltipScope: typeof TooltipPrimitives.createTooltipScope =
-  TooltipPrimitives.createTooltipScope;
-export const TooltipPortal = PortalAsFragment;