@calcom/atoms 2.8.0 → 2.8.2

package/src/components/ui/icons.tsx

@@ -1,313 +0,0 @@
-import type { SVGProps } from "react";
-
-export const XIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M18 6 6 18" />
-    <path d="m6 6 12 12" />
-  </svg>
-);
-
-export const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M20 6 9 17l-5-5" />
-  </svg>
-);
-
-export const AlertCircleIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <circle cx="12" cy="12" r="10" />
-    <line x1="12" x2="12" y1="8" y2="12" />
-    <line x1="12" x2="12.01" y1="16" y2="16" />
-  </svg>
-);
-
-export const CircleXIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <circle cx="12" cy="12" r="10" />
-    <path d="m15 9-6 6" />
-    <path d="m9 9 6 6" />
-  </svg>
-);
-
-export const TriangleAlertIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-    <path d="M12 9v4" />
-    <path d="M12 17h.01" />
-  </svg>
-);
-
-export const InfoIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <circle cx="12" cy="12" r="10" />
-    <path d="M12 16v-4" />
-    <path d="M12 8h.01" />
-  </svg>
-);
-
-export const PencilIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
-    <path d="m15 5 4 4" />
-  </svg>
-);
-
-export const ArrowLeftIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m12 19-7-7 7-7" />
-    <path d="M19 12H5" />
-  </svg>
-);
-
-export const RotateCwIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
-    <path d="M21 3v5h-5" />
-  </svg>
-);
-
-export const ChevronRightIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m9 18 6-6-6-6" />
-  </svg>
-);
-
-export const CircleCheckIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <circle cx="12" cy="12" r="10" />
-    <path d="m9 12 2 2 4-4" />
-  </svg>
-);
-
-export const EyeIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" />
-    <circle cx="12" cy="12" r="3" />
-  </svg>
-);
-
-export const CreditCardIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect width="20" height="14" x="2" y="5" rx="2" />
-    <line x1="2" x2="22" y1="10" y2="10" />
-  </svg>
-);
-
-export const ZapIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
-  </svg>
-);
-
-export const EyeOffIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
-    <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
-    <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
-    <path d="m2 2 20 20" />
-  </svg>
-);
-
-export const CalendarIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="M8 2v4" />
-    <path d="M16 2v4" />
-    <rect width="18" height="18" x="3" y="4" rx="2" />
-    <path d="M3 10h18" />
-  </svg>
-);
-
-export const Columns3Icon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect width="18" height="18" x="3" y="3" rx="2" />
-    <path d="M9 3v18" />
-    <path d="M15 3v18" />
-  </svg>
-);
-
-export const Grid3x3Icon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <rect width="18" height="18" x="3" y="3" rx="2" />
-    <path d="M3 9h18" />
-    <path d="M3 15h18" />
-    <path d="M9 3v18" />
-    <path d="M15 3v18" />
-  </svg>
-);
-
-export const ChevronLeftIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-    {...props}
-  >
-    <path d="m15 18-6-6 6-6" />
-  </svg>
-);

package/src/components/ui/info-badge.tsx

@@ -1,12 +0,0 @@
-import { Icon } from "./icon";
-import { Tooltip } from "./tooltip";
-
-export function InfoBadge({ content }: { content: string }) {
-  return (
-    <Tooltip side="top" content={content}>
-      <span aria-label={content}>
-        <Icon name="info" className="text-subtle relative left-1 right-1 top-px mt-px h-4 w-4" />
-      </span>
-    </Tooltip>
-  );
-}

package/src/components/ui/label.tsx

@@ -1,13 +0,0 @@
-import { cn } from "../../lib/utils";
-
-export function Label(props: JSX.IntrinsicElements["label"]) {
-  const { className, ...restProps } = props;
-  return (
-    <label
-      className={cn("text-default text-emphasis mb-2 block text-sm font-medium leading-none", className)}
-      {...restProps}
-    >
-      {props.children}
-    </label>
-  );
-}

package/src/components/ui/navigation.tsx

@@ -1,38 +0,0 @@
-import type { IconName } from "./icon";
-
-export type VerticalTabItemProps = {
-  name: string;
-  info?: string;
-  icon?: IconName;
-  disabled?: boolean;
-  children?: VerticalTabItemProps[];
-  textClassNames?: string;
-  className?: string;
-  isChild?: boolean;
-  hidden?: boolean;
-  disableChevron?: boolean;
-  href: string;
-  isExternalLink?: boolean;
-  linkShallow?: boolean;
-  linkScroll?: boolean;
-  avatar?: string;
-  iconClassName?: string;
-  onClick?: (name: string) => void;
-  isActive?: boolean;
-  isBadged?: boolean;
-  "data-testid"?: string;
-  trackingMetadata?: Record<string, any>;
-  matchFullPath?: boolean;
-};
-
-export type HorizontalTabItemProps = {
-  name: string;
-  disabled?: boolean;
-  className?: string;
-  href: string;
-  linkShallow?: boolean;
-  linkScroll?: boolean;
-  icon?: IconName;
-  avatar?: string;
-  "data-testid"?: string;
-};

package/src/components/ui/popover.tsx

@@ -1,31 +0,0 @@
-/*
-In this file we can edit all the Primitives from radix-ui/react-popover
-when building atoms package this will automatically replace the PopoverPrimitives used in components from all over the monorepo
-ensuring that we don't have issues with atoms.
-*/
-import * as PopoverPrimitives from "@radix-ui/react-popover-atoms";
-
-const Popover: typeof PopoverPrimitives.Root = PopoverPrimitives.Root;
-const PopoverTrigger: typeof PopoverPrimitives.Trigger = PopoverPrimitives.Trigger;
-const PopoverAnchor: typeof PopoverPrimitives.Anchor = PopoverPrimitives.Anchor;
-const PopoverClose: typeof PopoverPrimitives.Close = PopoverPrimitives.Close;
-const PopoverContent: typeof PopoverPrimitives.Content = PopoverPrimitives.Content;
-const PopoverArrow: typeof PopoverPrimitives.Arrow = PopoverPrimitives.Arrow;
-
-const PopoverPortal = ({ children, ...props }: PopoverPrimitives.PopoverPortalProps): JSX.Element => {
-  return (
-    <PopoverPrimitives.Portal {...props}>
-      <div className="calcom-atoms">{children}</div>
-    </PopoverPrimitives.Portal>
-  );
-};
-
-export const Root: typeof PopoverPrimitives.Root = Popover;
-export const Trigger: typeof PopoverPrimitives.Trigger = PopoverTrigger;
-export const Anchor: typeof PopoverPrimitives.Anchor = PopoverAnchor;
-export const Close: typeof PopoverPrimitives.Close = PopoverClose;
-export const Portal: typeof PopoverPortal = PopoverPortal;
-export const Content: typeof PopoverPrimitives.Content = PopoverContent;
-export const Arrow: typeof PopoverPrimitives.Arrow = PopoverArrow;
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose, PopoverPortal, PopoverArrow };

package/src/components/ui/radio-area-group.tsx

@@ -1,67 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing
-"use client";
-
-import { useId } from "@radix-ui/react-id";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import type { ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-
-type RadioAreaProps = RadioGroupPrimitive.RadioGroupItemProps & {
-  children: ReactNode;
-  classNames?: { container?: string };
-};
-
-const RadioArea = ({ children, className, classNames: innerClassNames, ...props }: RadioAreaProps) => {
-  const radioAreaId = useId();
-  const id = props.id ?? radioAreaId;
-
-  return (
-    <div
-      className={cn(
-        "border-subtle [&:has(input:checked)]:border-emphasis relative flex items-start rounded-[10px] border",
-        className
-      )}
-    >
-      <RadioGroupPrimitive.Item
-        id={id}
-        {...props}
-        className={cn(
-          "hover:bg-subtle disabled:hover:bg-default border-default focus:ring-emphasis absolute left-3 top-[0.9rem] mt-0.5 h-4 w-4 shrink-0 rounded-full border transition focus:ring-2 disabled:cursor-not-allowed",
-          props.disabled && "opacity-60"
-        )}
-      >
-        <RadioGroupPrimitive.Indicator
-          className={cn(
-            "after:bg-default dark:after:bg-inverted relative flex h-full w-full items-center justify-center rounded-full bg-black after:h-[6px] after:w-[6px] after:rounded-full after:content-['']",
-            props.disabled ? "after:bg-cal-muted" : "bg-black"
-          )}
-        />
-      </RadioGroupPrimitive.Item>
-      <label htmlFor={id} className={cn("text-default p-4 pl-10 pt-3", innerClassNames?.container)}>
-        {children}
-      </label>
-    </div>
-  );
-};
-
-const RadioAreaGroup = ({
-  children,
-  className,
-  onValueChange,
-  ...passThroughProps
-}: RadioGroupPrimitive.RadioGroupProps) => {
-  return (
-    <RadioGroupPrimitive.Root className={className} onValueChange={onValueChange} {...passThroughProps}>
-      {children}
-    </RadioGroupPrimitive.Root>
-  );
-};
-
-const Item = RadioArea;
-const Group = RadioAreaGroup;
-const Root = RadioGroupPrimitive.Root;
-
-export { RadioArea, RadioAreaGroup, Item, Group, Root };
-
-export const RadioAreaNamespace = { Item, Group, Root };

package/src/components/ui/radio.tsx

@@ -1,72 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-"use client";
-
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import type { ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-
-export const Root = RadioGroupPrimitive.Root;
-
-export const RadioGroup = (props: RadioGroupPrimitive.RadioGroupProps & { children: ReactNode }) => (
-  <RadioGroupPrimitive.Root {...props}>{props.children}</RadioGroupPrimitive.Root>
-);
-
-export const Radio = (props: RadioGroupPrimitive.RadioGroupItemProps & { children?: ReactNode }) => (
-  <RadioGroupPrimitive.Item
-    {...props}
-    className={cn(
-      "hover:bg-subtle border-default dark:checked:bg-brand-default dark:hover:bg-subtle dark:checked:hover:bg-brand-default focus:ring-brand-default hover:border-emphasis me-1.5 mt-0.5 h-4 w-4 shrink-0 rounded-full border text-(--cal-brand) transition focus:border-0 focus:ring-1 data-[state=checked]:border-brand-default",
-      props.disabled && "opacity-60"
-    )}
-  >
-    {props.children}
-  </RadioGroupPrimitive.Item>
-);
-
-export const RadioIndicator = ({ disabled }: { disabled?: boolean }) => (
-  <RadioGroupPrimitive.Indicator
-    className={cn(
-      "after:bg-default dark:after:bg-brand-accent relative flex h-full w-full items-center justify-center rounded-full bg-black after:h-[6px] after:w-[6px] after:rounded-full after:content-['']",
-      disabled ? "after:bg-cal-muted" : "bg-brand-default"
-    )}
-  />
-);
-
-export const RadioLabel = (props: JSX.IntrinsicElements["label"] & { disabled?: boolean }) => (
-  <label
-    {...props}
-    className={cn("text-emphasis ms-2 w-full text-sm font-medium leading-5", props.disabled && "text-subtle")}
-  />
-);
-
-export const RadioField = ({
-  label,
-  disabled,
-  id,
-  value,
-  className,
-  withPadding,
-}: {
-  label: string | ReactNode;
-  disabled?: boolean;
-  id: string;
-  value: string;
-  className?: string;
-  withPadding?: boolean;
-}) => (
-  <div
-    className={cn(
-      "flex items-start",
-      withPadding && "hover:bg-subtle cursor-pointer rounded-lg p-1.5",
-      className
-    )}
-  >
-    <Radio value={value} disabled={disabled} id={id}>
-      <RadioIndicator disabled={disabled} />
-    </Radio>
-    <RadioLabel htmlFor={id} disabled={disabled}>
-      {label}
-    </RadioLabel>
-  </div>
-);

package/src/components/ui/react-select-components.tsx

@@ -1,86 +0,0 @@
-// @ts-nocheck — react-select prop generics are too noisy for atoms' loose contracts here
-"use client";
-
-import type { ControlProps, GroupBase, InputProps, OptionProps } from "react-select";
-import { components as reactSelectComponents } from "react-select";
-
-import { cn } from "../../lib/utils";
-
-export const InputComponent = <
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->({
-  inputClassName,
-  ...props
-}: InputProps<Option, IsMulti, Group> & { inputClassName?: string }) => {
-  return (
-    <reactSelectComponents.Input
-      inputClassName={cn("focus:ring-0 focus:ring-offset-0 !text-default dark:text-white!", inputClassName)}
-      {...props}
-    />
-  );
-};
-
-type ExtendedOption = {
-  value: string | number;
-  label: string;
-};
-
-export const OptionComponent = <
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->({
-  ...props
-}: OptionProps<Option, IsMulti, Group>) => {
-  return (
-    <reactSelectComponents.Option {...props}>
-      <div className="flex items-center justify-between">
-        <span className="w-full" data-testid={`select-option-${(props as unknown as ExtendedOption).value}`}>
-          {props.label || <>&nbsp;</>}
-        </span>
-      </div>
-    </reactSelectComponents.Option>
-  );
-};
-
-export const ControlComponent = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(
-  controlProps: ControlProps<Option, IsMulti, Group> & {
-    selectProps: { "data-testid"?: string };
-  }
-) => {
-  const dataTestId = controlProps.selectProps["data-testid"] ?? "select-control";
-  return (
-    <span data-testid={dataTestId}>
-      <reactSelectComponents.Control {...controlProps} />
-    </span>
-  );
-};
-
-export const getReactSelectProps = <
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->({
-  components,
-  menuPlacement = "auto",
-}: {
-  components?: Record<string, unknown>;
-  menuPlacement?: "auto" | "top" | "bottom";
-} = {}) => {
-  return {
-    menuPlacement,
-    components: {
-      Input: InputComponent,
-      Option: OptionComponent,
-      Control: ControlComponent,
-      ...(components ?? {}),
-    },
-    unstyled: true,
-  };
-};