@povio/ui 0.0.2 → 0.0.3

package/src/components/buttons/IconButton/IconButton.tsx

@@ -0,0 +1,25 @@
+import type { FC, ReactElement, SVGProps } from "react";
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
+
+import { Button } from "#ui/components/buttons/Button/Button";
+import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
+
+export interface IconButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
+  label: string;
+  icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
+  link?: AriaLinkProps;
+  disableTooltip?: boolean;
+}
+
+export const IconButton = ({ label, ...props }: IconButtonProps) => {
+  return (
+    <Button
+      {...props}
+      iconOnly
+      width="hug"
+      disableTooltip={props.disableTooltip}
+    >
+      {label}
+    </Button>
+  );
+};

package/src/components/buttons/InlineIconButton/InlineIconButton.tsx

@@ -0,0 +1,27 @@
+import type { FC, ReactElement, RefObject, SVGProps } from "react";
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
+
+import { Button } from "#ui/components/buttons/Button/Button";
+import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
+
+export interface InlineIconButtonProps extends Omit<AriaButtonProps, "children">, ButtonVariantProps {
+  label: string;
+  icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
+  link?: AriaLinkProps;
+  ref?: RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
+  disableTooltip?: boolean;
+}
+
+export const InlineIconButton = ({ label, ...props }: InlineIconButtonProps) => {
+  return (
+    <Button
+      {...props}
+      iconOnly
+      variant="text"
+      size="xxs"
+      width="hug"
+    >
+      {label}
+    </Button>
+  );
+};

package/src/components/buttons/PillButton/PillButton.tsx

@@ -0,0 +1,70 @@
+import type { ElementType, FC, SVGProps } from "react";
+import {
+  Button as AriaButton,
+  type ButtonProps as AriaButtonProps,
+  ToggleButton as AriaToggleButton,
+  type ToggleButtonProps as AriaToggleButtonProps,
+} from "react-aria-components";
+
+import { CloseIcon } from "#ui/assets/icons/Close";
+import {
+  type PillButtonVariants,
+  pillButton,
+  pillButtonContent,
+  pillButtonIconSize,
+  pillButtonTypography,
+} from "#ui/components/buttons/PillButton/pillButton.cva";
+import { ButtonContent } from "#ui/components/buttons/shared/ButtonContent";
+import type { ButtonContentVariantProps } from "#ui/components/buttons/shared/buttonContent.cva";
+import { TooltipEllipsis } from "#ui/components/overlays/Tooltip/TooltipEllipsis";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+export interface PillButtonProps
+  extends AriaButtonProps,
+    Omit<AriaToggleButtonProps, keyof AriaButtonProps>,
+    ButtonContentVariantProps,
+    PillButtonVariants {
+  children: string;
+  dismissable?: boolean;
+  toggle?: boolean;
+  icon?: FC<SVGProps<SVGSVGElement>>;
+}
+
+export const PillButton = ({ children, dismissable, toggle, icon, iconPosition, ...props }: PillButtonProps) => {
+  const uiStyle = UIStyle.useConfig();
+  const pillButtonCva = (uiStyle?.pillButton?.cva ?? pillButton) as unknown as UIStyle.Cva<PillButtonVariants>;
+  const pillButtonTypographyMap = uiStyle?.pillButton?.typography ?? pillButtonTypography;
+
+  const Component: ElementType = toggle ? AriaToggleButton : AriaButton;
+
+  const getIconPosition = () => {
+    if (dismissable) {
+      return "right";
+    }
+    return icon ? iconPosition : "none";
+  };
+
+  return (
+    <TooltipEllipsis text={children}>
+      {(onContentRef) => (
+        <Component
+          {...props}
+          className={pillButtonCva({
+            ...props,
+            className: props.className,
+          })}
+        >
+          <ButtonContent
+            text={children}
+            ref={onContentRef}
+            icon={dismissable ? CloseIcon : icon}
+            iconPosition={dismissable ? "right" : iconPosition}
+            className={pillButtonContent({ iconPosition: getIconPosition() })}
+            iconClassName={pillButtonIconSize}
+            typography={pillButtonTypographyMap({ ...props })}
+          />
+        </Component>
+      )}
+    </TooltipEllipsis>
+  );
+};

package/src/components/buttons/PillButton/pillButton.cva.ts

@@ -0,0 +1,88 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { clsx } from "clsx";
+
+import { uiOutlineClass } from "#ui/components/outline.clsx";
+import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
+import { compoundMapper } from "#ui/utils/compoundMapper";
+
+export const pillButton = cva(
+  [
+    uiOutlineClass,
+    "flex items-center justify-center",
+    "rounded-pill-rounding-default px-pill-side-default py-pill-height-default",
+  ],
+  {
+    variants: {
+      color: {
+        primary: [
+          "bg-interactive-subtle-primary-idle text-interactive-subtle-primary-on-idle",
+          "hover:bg-interactive-subtle-primary-hover hover:text-interactive-subtle-primary-on-hover",
+          "pressed:bg-interactive-subtle-primary-pressed pressed:text-interactive-subtle-primary-on-pressed",
+          "disabled:bg-interactive-subtle-primary-disabled disabled:text-interactive-subtle-primary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "selected:bg-interactive-subtle-primary-toggled-idle selected:text-interactive-subtle-primary-on-toggled-idle",
+          "selected:disabled:bg-interactive-subtle-primary-toggled-disabled selected:disabled:text-interactive-subtle-primary-on-toggled-disabled",
+          "selected:hover:bg-interactive-subtle-primary-toggled-hover selected:hover:text-interactive-subtle-primary-on-toggled-hover",
+        ],
+        secondary: [
+          "bg-interactive-subtle-secondary-idle text-interactive-subtle-secondary-on-idle",
+          "hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+          "pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+          "disabled:bg-interactive-subtle-secondary-disabled disabled:text-interactive-subtle-secondary-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+          "selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+          "selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled",
+          "selected:hover:bg-interactive-subtle-secondary-toggled-hover selected:hover:text-interactive-subtle-secondary-on-toggled-hover",
+        ],
+        success: [
+          "bg-interactive-subtle-success-idle text-interactive-subtle-success-on-idle",
+          "hover:bg-interactive-subtle-success-hover hover:text-interactive-subtle-success-on-hover",
+          "pressed:bg-interactive-subtle-success-pressed pressed:text-interactive-subtle-success-on-pressed",
+          "disabled:bg-interactive-subtle-success-disabled disabled:text-interactive-subtle-success-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        warning: [
+          "bg-interactive-subtle-warning-idle text-interactive-subtle-warning-on-idle",
+          "hover:bg-interactive-subtle-warning-hover hover:text-interactive-subtle-warning-on-hover",
+          "pressed:bg-interactive-subtle-warning-pressed pressed:text-interactive-subtle-warning-on-pressed",
+          "disabled:bg-interactive-subtle-warning-disabled disabled:text-interactive-subtle-warning-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+        error: [
+          "bg-interactive-subtle-error-idle text-interactive-subtle-error-on-idle",
+          "hover:bg-interactive-subtle-error-hover hover:text-interactive-subtle-error-on-hover",
+          "pressed:bg-interactive-subtle-error-pressed pressed:text-interactive-subtle-error-on-pressed",
+          "disabled:bg-interactive-subtle-error-disabled disabled:text-interactive-subtle-error-on-disabled",
+          "focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+    },
+    defaultVariants: {
+      color: "primary",
+    },
+  },
+);
+
+export interface PillButtonVariants extends VariantProps<typeof pillButton> {}
+
+export const pillButtonContent = cva("", {
+  variants: {
+    iconPosition: {
+      left: "gap-list-gap-icon-to-label pr-list-gap-content",
+      right: "gap-list-gap-icon-to-label pl-list-gap-content",
+      none: "gap-list-gap-icon-to-label",
+    },
+  },
+  defaultVariants: {
+    iconPosition: "left",
+  },
+});
+
+export const pillButtonIconSize = clsx("h-6 w-6");
+
+export const pillButtonTypography = compoundMapper<TypographyVariantProps, PillButtonVariants>({
+  default: {
+    size: "label-2",
+    variant: "prominent-1",
+  },
+});

package/src/components/buttons/SplitButton/SplitButton.tsx

@@ -0,0 +1,61 @@
+import { clsx } from "clsx";
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
+
+import { ChevronDownIcon } from "#ui/assets/icons/ChevronDown";
+import { Button } from "#ui/components/buttons/Button/Button";
+import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
+import { IconButton } from "#ui/components/buttons/IconButton/IconButton";
+import { Menu, type MenuItem } from "#ui/components/Menu/Menu";
+
+export interface SplitButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
+  label: string;
+  labelRight: string;
+  link?: AriaLinkProps;
+  items: MenuItem[];
+}
+
+export const SplitButton = ({
+  variant,
+  color,
+  width,
+  size,
+  label,
+  labelRight,
+  link,
+  items,
+  className,
+  ...props
+}: SplitButtonProps) => {
+  return (
+    <div
+      className="group/split flex items-center"
+      data-split=""
+    >
+      <Button
+        {...props}
+        width={width}
+        size={size}
+        variant={variant}
+        color={color}
+        link={link}
+        className={clsx("!rounded-r-none border-r border-solid", className)}
+        data-separator=""
+      >
+        {label}
+      </Button>
+      <Menu
+        trigger={
+          <IconButton
+            size={size}
+            variant={variant}
+            color={color}
+            label={labelRight}
+            icon={ChevronDownIcon}
+            className="!rounded-l-none !border-l-0"
+          />
+        }
+        items={items}
+      />
+    </div>
+  );
+};

package/src/components/buttons/TextButton/TextButton.tsx

@@ -0,0 +1,29 @@
+import type { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from "react-aria-components";
+
+import { Button, type ButtonIconProps } from "#ui/components/buttons/Button/Button";
+import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
+import type { ButtonContentVariantProps } from "#ui/components/buttons/shared/buttonContent.cva";
+
+export type TextButtonProps = Omit<ButtonVariantProps, "variant"> &
+  ButtonContentVariantProps &
+  AriaButtonProps &
+  ButtonIconProps<true | false> & {
+    children: string;
+    isLoading?: boolean;
+    link?: AriaLinkProps;
+    disableTooltip?: boolean;
+  };
+
+export const TextButton = ({ children, ...props }: TextButtonProps) => {
+  return (
+    <Button
+      {...props}
+      variant="text"
+      size="xxs"
+      width={props.width ?? "hug"}
+      disableTooltip={props.disableTooltip}
+    >
+      {children}
+    </Button>
+  );
+};

package/src/components/buttons/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,28 @@
+import type { ToggleButtonProps as AriaToggleButtonProps } from "react-aria-components";
+
+import { Button, type ButtonIconProps } from "#ui/components/buttons/Button/Button";
+import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
+import type { ButtonContentVariantProps } from "#ui/components/buttons/shared/buttonContent.cva";
+
+export type ToggleButtonProps = ButtonVariantProps &
+  ButtonContentVariantProps &
+  AriaToggleButtonProps &
+  ButtonIconProps<true | false> & {
+    children: string;
+    disableTooltip?: boolean;
+  };
+
+export const ToggleButton = ({ children, ...props }: ToggleButtonProps) => {
+  return (
+    // @ts-expect-error Types not matching, but this is only for backwards compatibility
+    <Button
+      {...props}
+      toggle
+      variant="outlined"
+      color="primary"
+      disableTooltip={props.disableTooltip}
+    >
+      {children}
+    </Button>
+  );
+};

package/src/components/buttons/shared/ButtonContent.tsx

@@ -0,0 +1,61 @@
+import { clsx } from "clsx";
+import { type FC, type ReactElement, type Ref, type SVGProps, isValidElement } from "react";
+
+import type { ButtonVariantProps } from "#ui/components/buttons/Button/button.cva";
+import { type ButtonContentVariantProps, buttonContent } from "#ui/components/buttons/shared/buttonContent.cva";
+import { Loader } from "#ui/components/status/Loader/Loader";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
+
+interface ButtonContentProps extends ButtonContentVariantProps, Pick<ButtonVariantProps, "size"> {
+  ref?: Ref<HTMLHeadingElement>;
+  text: string;
+  isLoading?: boolean;
+  className?: string;
+  icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+  iconClassName?: string;
+  hideText?: boolean;
+  typography?: TypographyVariantProps;
+}
+
+export const ButtonContent = ({
+  ref,
+  text,
+  isLoading,
+  className,
+  icon: Icon,
+  iconClassName,
+  hideText,
+  iconPosition,
+  typography,
+}: ButtonContentProps) => {
+  let iconOrLoader = null;
+  if (isLoading) {
+    iconOrLoader = <Loader className="shrink-0" />;
+  } else if (Icon) {
+    if (isValidElement(Icon)) {
+      iconOrLoader = Icon;
+    } else {
+      iconOrLoader = <Icon className={clsx("shrink-0", iconClassName)} />;
+    }
+  }
+
+  return (
+    <span
+      className={buttonContent({
+        iconPosition: iconOrLoader ? iconPosition : null,
+        className,
+      })}
+    >
+      {iconOrLoader}
+      <Typography
+        as="span"
+        {...{ size: "label-2", variant: "prominent-1", ...typography }}
+        className={clsx("hyphens-auto md:truncate", hideText && "sr-only")}
+        ref={ref}
+      >
+        {text}
+      </Typography>
+    </span>
+  );
+};

package/src/components/buttons/shared/buttonContent.cva.ts

@@ -0,0 +1,18 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export const buttonContent = cva("flex w-full items-center justify-center", {
+  variants: {
+    iconPosition: {
+      left: "flex-row",
+      right: "flex-row-reverse",
+      none: "flex-row",
+    },
+  },
+  defaultVariants: {
+    iconPosition: "left",
+  },
+});
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface ButtonContentVariantProps extends VariantProps<typeof buttonContent> {}

package/src/components/inputs/Checkbox/Checkbox.tsx

@@ -0,0 +1,101 @@
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import type { ComponentType, ReactElement, Ref, SVGProps } from "react";
+import { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import {
+  type CheckboxVariantProps,
+  checkboxIndicatorClass,
+  checkboxTypography,
+} from "#ui/components/inputs/Checkbox/checkbox.cva";
+import { FormFieldError, type FormFieldErrorProps } from "#ui/components/inputs/FormField/FormFieldError";
+import { CheckContent } from "#ui/components/inputs/shared/CheckContent";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+import { CheckboxCheckmark } from "./CheckboxCheckmark";
+
+interface CheckboxBaseProps extends FormFieldErrorProps, CheckboxVariantProps, Omit<AriaCheckboxProps, "className"> {
+  ref?: Ref<HTMLLabelElement>;
+  children: string | ReactElement;
+  hideLabel?: boolean;
+  selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+  indeterminateIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+}
+
+const CheckboxBase = (props: CheckboxBaseProps) => {
+  const ui = UIConfig.useConfig();
+  const uiStyle = UIStyle.useConfig();
+  const checkboxTypographyMap = uiStyle?.checkbox?.typography ?? checkboxTypography;
+
+  const {
+    className,
+    children,
+    isDisabled,
+    error,
+    variant = ui.checkbox.variant,
+    hideLabel = ui.input.hideLabel,
+    ...rest
+  } = props;
+
+  const formFieldErrorProps: FormFieldErrorProps = {
+    error,
+    isDisabled,
+  };
+
+  return (
+    <>
+      <AriaCheckbox
+        {...rest}
+        isDisabled={isDisabled}
+        isInvalid={!!error}
+        aria-errormessage={error || undefined}
+        className={clsx(checkboxIndicatorClass, className)}
+      >
+        <CheckboxCheckmark
+          variant={variant}
+          {...rest}
+        />
+        {!hideLabel && <CheckContent typography={checkboxTypographyMap({ variant, ...rest })}>{children}</CheckContent>}
+      </AriaCheckbox>
+      <FormFieldError {...formFieldErrorProps} />
+    </>
+  );
+};
+
+export type CheckboxProps = CheckboxBaseProps;
+
+export type ControlledCheckboxProps<TFieldValues extends FieldValues> = ControlProps<
+  CheckboxProps,
+  TFieldValues,
+  "isSelected"
+>;
+
+export const Checkbox = <TFieldValues extends FieldValues>(props: ControlledCheckboxProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <CheckboxBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            isSelected={field.value}
+            onChange={field.onChange}
+            onBlur={field.onBlur}
+            name={field.name}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <CheckboxBase {...props} />;
+};

package/src/components/inputs/Checkbox/CheckboxCheckmark.tsx

@@ -0,0 +1,47 @@
+import { clsx } from "clsx";
+import type { ComponentType, SVGProps } from "react";
+
+import { CheckboxCheckmarkIcon } from "#ui/assets/icons/CheckboxCheckmark";
+import { CheckboxIndeterminateIcon } from "#ui/assets/icons/CheckboxIndeterminate";
+import { type CheckboxVariantProps, checkbox } from "#ui/components/inputs/Checkbox/checkbox.cva";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+interface CheckboxCheckmarkProps extends CheckboxVariantProps {
+  className?: string;
+  selectedIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+  indeterminateIcon?: ComponentType<SVGProps<SVGSVGElement>>;
+}
+
+export const CheckboxCheckmark = ({
+  variant,
+  className,
+  selectedIcon: SelectedIcon = CheckboxCheckmarkIcon,
+  indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon,
+  ...props
+}: CheckboxCheckmarkProps) => {
+  const uiStyle = UIStyle.useConfig();
+  const checkboxCva = (uiStyle?.checkbox?.cva ?? checkbox) as unknown as UIStyle.Cva<CheckboxVariantProps>;
+
+  return (
+    <div
+      className={checkboxCva({
+        variant,
+        ...props,
+        className,
+      })}
+    >
+      <SelectedIcon
+        className={clsx(
+          "absolute hidden size-3 group-selected:block",
+          "text-interactive-contained-primary-on-idle group-hover:text-interactive-contained-primary-on-hover",
+        )}
+      />
+      <IndeterminateIcon
+        className={clsx(
+          "absolute hidden size-3 group-indeterminate:block",
+          "text-interactive-contained-primary-on-idle group-hover:text-interactive-contained-primary-on-hover",
+        )}
+      />
+    </div>
+  );
+};

package/src/components/inputs/Checkbox/checkbox.cva.ts

@@ -0,0 +1,51 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+import { uiGroupOutlineClass } from "#ui/components/outline.clsx";
+import type { TypographyVariantProps } from "#ui/components/text/Typography/typography.cva";
+import { compoundMapper } from "#ui/utils/compoundMapper";
+
+export const checkbox = cva(
+  ["flex items-center justify-center border-2", "relative size-4 shrink-0 rounded-xs p-1", uiGroupOutlineClass],
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-interactive-contained-secondary-idle",
+          "group-disabled:border-interactive-contained-secondary-disabled",
+          "group-hover:border-interactive-contained-secondary-hover",
+          "group-pressed:border-interactive-contained-secondary-pressed",
+          "group-selected:border-interactive-contained-primary-idle",
+          "group-selected:bg-interactive-contained-primary-idle",
+          "group-selected:group-hover:bg-interactive-contained-primary-hover",
+          "group-selected:group-hover:border-interactive-contained-primary-hover",
+          "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-selected:group-pressed:border-interactive-contained-primary-pressed",
+          "group-indeterminate:border-interactive-contained-primary-idle",
+          "group-indeterminate:bg-interactive-contained-primary-idle",
+          "group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
+          "group-indeterminate:group-hover:border-interactive-contained-primary-hover",
+          "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
+          "group-invalid:border-interactive-contained-error-idle",
+          "group-focus-visible:outline-interactive-contained-primary-focus",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+// oxlint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - If this ignore is missing, overriding cva types causes a type error
+export interface CheckboxVariantProps extends VariantProps<typeof checkbox> {}
+
+export const checkboxIndicatorClass = "group flex items-center gap-2";
+
+export const checkboxTypography = compoundMapper<TypographyVariantProps, CheckboxVariantProps>({
+  default: {
+    size: "label-1",
+    variant: "default",
+  },
+});