@povio/ui 0.0.4 → 0.0.6

package/src/components/inputs/File/shared/FileUploadContentFilled.tsx

@@ -1,179 +0,0 @@
-import { clsx } from "clsx";
-import { FileTrigger, type FileTriggerProps } from "react-aria-components";
-import { useTranslation } from "react-i18next";
-
-import { CheckCircleIcon } from "#ui/assets/icons/CheckCircle";
-import { CloseIcon } from "#ui/assets/icons/Close";
-import { Button } from "#ui/components/buttons/Button/Button";
-import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
-import { TextButton } from "#ui/components/buttons/TextButton/TextButton";
-import type { FileUploadBaseProps, FileUploadState } from "#ui/components/inputs/File/fileUpload.types";
-import { Typography } from "#ui/components/text/Typography/Typography";
-import { ns } from "#ui/config/i18n";
-import { FileUtils } from "#ui/utils/file.utils";
-
-type FileUploadContentFilledProps = Pick<
-  FileUploadBaseProps,
-  "variant" | "as" | "isDisabled" | "emptyText" | "browseText"
-> & {
-  state: FileUploadState;
-  fileTriggerProps?: FileTriggerProps;
-  removeWithIcon?: boolean;
-  singleFile?: boolean;
-  onRemove: (id: string) => void;
-};
-
-export const FileUploadContentFilled = ({
-  variant,
-  as,
-  isDisabled,
-  state,
-  browseText,
-  fileTriggerProps,
-  removeWithIcon = false,
-  singleFile,
-  onRemove,
-}: FileUploadContentFilledProps) => {
-  const { t } = useTranslation(ns);
-  return (
-    <div className={clsx("flex w-full flex-fill flex-col items-start")}>
-      <div
-        className={clsx("flex w-full items-center", {
-          "flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
-          "flex-col": variant === "vertical",
-          "gap-file-upload-content-gap-content-to-button": variant === "vertical" && as === "button",
-          "gap-file-upload-content-gap-text-to-text": variant === "vertical" && as === "link",
-        })}
-      >
-        <div
-          className={clsx(
-            "flex min-w-0 max-w-full flex-grow items-center gap-file-upload-content-gap-icon-to-content",
-            {
-              "flex-col": variant === "vertical",
-              "flex-row": variant === "horizontal",
-              "opacity-50": isDisabled,
-            },
-          )}
-        >
-          <CheckCircleIcon className="h-6 w-6 text-text-default-1" />
-          <div
-            className={clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
-              "max-w-full items-center": variant === "vertical",
-              "max-w-[calc(100%_-_32px)]": variant === "horizontal",
-            })}
-          >
-            <Typography
-              variant="prominent-1"
-              size="label-1"
-              as="span"
-              className="self-stretch truncate text-center text-text-default-1"
-            >
-              {state.file.name}
-            </Typography>
-            <Typography
-              variant="default"
-              size={singleFile ? "label-2" : "label-3"}
-              as="span"
-              className="text-text-default-2"
-            >
-              {FileUtils.getCalculatedFileSize(state.file)}
-            </Typography>
-          </div>
-        </div>
-
-        <div
-          className={clsx("flex flex-none items-center justify-end", {
-            "flex-col": variant === "vertical" && as === "button",
-            "gap-file-upload-content-gap-text-to-text": as === "link" && variant === "vertical",
-            "gap-file-upload-content-gap-content-to-button": as === "button" && variant === "vertical",
-            "gap-file-upload-content-gap-button-to-button": variant === "horizontal",
-          })}
-        >
-          {as === "link" ? (
-            <>
-              {fileTriggerProps && (
-                <>
-                  <FileTrigger {...fileTriggerProps}>
-                    <TextButton
-                      className={clsx("text-interactive-text-primary-idle", {
-                        "[&>span>span]:!font-medium": variant === "vertical",
-                      })}
-                    >
-                      {browseText ?? ""}
-                    </TextButton>
-                  </FileTrigger>
-                  {variant === "vertical" && (
-                    <Typography
-                      variant="default"
-                      size="label-2"
-                      as="span"
-                      className="text-text-default-2"
-                    >
-                      {t(($) => $.ui.fileUpload.or)}
-                    </Typography>
-                  )}
-                </>
-              )}
-              {removeWithIcon ? (
-                <InlineIconButton
-                  label="Cancel"
-                  color="secondary"
-                  onPress={() => {
-                    onRemove(state.id ?? "");
-                  }}
-                  icon={CloseIcon}
-                />
-              ) : (
-                <TextButton
-                  className={clsx(
-                    variant === "vertical" && "[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase",
-                  )}
-                  color={variant === "horizontal" ? "secondary" : "primary"}
-                  onPress={() => {
-                    onRemove(state.id ?? "");
-                  }}
-                >
-                  {t(($) => $.ui.fileUpload.removeFile)}
-                </TextButton>
-              )}
-            </>
-          ) : (
-            <div className="flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch">
-              {fileTriggerProps && (
-                <FileTrigger {...fileTriggerProps}>
-                  <Button
-                    variant="outlined"
-                    size="xs"
-                    width="hug"
-                    isDisabled={isDisabled}
-                  >
-                    {browseText ?? ""}
-                  </Button>
-                </FileTrigger>
-              )}
-              {removeWithIcon ? (
-                <InlineIconButton
-                  label="Cancel"
-                  color="secondary"
-                  onPress={() => {
-                    onRemove(state.id ?? "");
-                  }}
-                  icon={CloseIcon}
-                />
-              ) : (
-                <TextButton
-                  color="secondary"
-                  onPress={() => {
-                    onRemove(state.id ?? "");
-                  }}
-                >
-                  {t(($) => $.ui.fileUpload.removeFile)}
-                </TextButton>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/components/inputs/File/shared/FileUploadContentLoading.tsx

@@ -1,115 +0,0 @@
-import { clsx } from "clsx";
-import { useTranslation } from "react-i18next";
-
-import { CloseIcon } from "#ui/assets/icons/Close";
-import { FileIcon } from "#ui/assets/icons/File";
-import { Button } from "#ui/components/buttons/Button/Button";
-import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
-import type { FileUploadBaseProps, FileUploadState } from "#ui/components/inputs/File/fileUpload.types";
-import { Typography } from "#ui/components/text/Typography/Typography";
-import { ns } from "#ui/config/i18n";
-import { FileUtils } from "#ui/utils/file.utils";
-
-import { FileProgressBar } from "./FileProgressBar";
-
-type FileUploadContentLoadingProps = Pick<
-  FileUploadBaseProps,
-  "variant" | "as" | "isDisabled" | "emptyText" | "browseText"
-> & {
-  index: number;
-  state: FileUploadState;
-  singleFile?: boolean;
-  onCancel: (index: number) => void;
-};
-
-export const FileUploadContentLoading = ({
-  index,
-  variant,
-  as,
-  state,
-  isDisabled,
-  singleFile,
-  onCancel,
-}: FileUploadContentLoadingProps) => {
-  const { t } = useTranslation(ns);
-  return (
-    <div
-      className={clsx("flex w-full flex-col items-center", {
-        "flex-col": variant === "vertical",
-        "flex-row": variant === "horizontal",
-        "gap-file-upload-content-gap-content-to-button": as === "button",
-      })}
-    >
-      <div
-        className={clsx("flex w-full items-center justify-between", {
-          "flex-col gap-file-upload-content-gap-text-to-progress": variant === "vertical",
-          "flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
-          "opacity-50": isDisabled,
-        })}
-      >
-        <div
-          className={clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
-            "w-full flex-col": variant === "vertical",
-            "w-1/2": variant === "horizontal",
-          })}
-        >
-          <FileIcon className="h-6 w-6 text-text-default-1" />
-          <div
-            className={clsx("flex flex-col", {
-              "max-w-full gap-file-upload-content-gap-icon-to-content text-center": variant === "vertical",
-              "max-w-[calc(100%_-_32px)] gap-file-upload-content-gap-text-to-text": variant === "horizontal",
-            })}
-          >
-            <Typography
-              variant="prominent-1"
-              size="label-1"
-              as="span"
-              className="self-stretch truncate text-center text-text-default-1"
-            >
-              {state.file.name}
-            </Typography>
-            <Typography
-              variant="default"
-              size={singleFile ? "label-2" : "label-3"}
-              as="span"
-              className="text-text-default-2"
-            >
-              {FileUtils.getCalculatedFileSize(state.file)}
-            </Typography>
-          </div>
-        </div>
-        <div
-          className={clsx("flex items-center gap-1", {
-            "w-1/2": variant === "horizontal",
-            "w-full": variant === "vertical",
-          })}
-        >
-          <FileProgressBar progress={state.progress} />
-          {(as === "link" || variant === "horizontal") && (
-            <InlineIconButton
-              label="Cancel"
-              color="secondary"
-              onPress={() => {
-                onCancel(index);
-              }}
-              icon={CloseIcon}
-            />
-          )}
-        </div>
-      </div>
-      {as === "button" && variant === "vertical" && (
-        <Button
-          variant="outlined"
-          size="xs"
-          color="secondary"
-          width="hug"
-          onPress={() => {
-            onCancel(index);
-          }}
-        >
-          {t(($) => $.ui.fileUpload.cancel)}
-        </Button>
-      )}
-    </div>
-  );
-};

package/src/components/inputs/File/shared/InputUploadContent.tsx

@@ -1,68 +0,0 @@
-import { DropZone, type DropZoneProps, FileTrigger, type FileTriggerProps } from "react-aria-components";
-import { useTranslation } from "react-i18next";
-
-import { UploadIcon } from "#ui/assets/icons/Upload";
-import { Button } from "#ui/components/buttons/Button/Button";
-import { TextButton } from "#ui/components/buttons/TextButton/TextButton";
-import type { InputUploadBaseProps } from "#ui/components/inputs/File/inputUpload.types";
-import { Typography } from "#ui/components/text/Typography/Typography";
-import { ns } from "#ui/config/i18n";
-
-import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva";
-
-interface InputUploadContentProps extends Omit<InputUploadBaseProps, "ref"> {
-  onSelect: FileTriggerProps["onSelect"];
-  onDrop: DropZoneProps["onDrop"];
-}
-
-export const InputUploadContent = (props: InputUploadContentProps) => {
-  const { variant, isDisabled, error, ...rest } = props;
-  const { t } = useTranslation(ns);
-
-  return (
-    <FileTrigger {...rest}>
-      <div
-        data-rac=""
-        data-disabled={isDisabled || undefined}
-        data-invalid={!!error || undefined}
-        className={inputUploadButton({
-          variant,
-          className: "group/input-upload",
-        })}
-      >
-        <DropZone
-          {...rest}
-          isDisabled={isDisabled}
-          className={inputUploadDropZone({ variant })}
-        >
-          <Typography
-            variant="default"
-            size="label-1"
-            as="span"
-            className="flex-fill select-none overflow-hidden text-ellipsis text-text-default-3"
-          >
-            {t(($) => $.ui.fileUpload.emptyText)}
-          </Typography>
-          {variant === "nested" && (
-            <TextButton
-              isDisabled={isDisabled}
-              icon={UploadIcon}
-              className="!p-0"
-            >
-              {t(($) => $.ui.fileUpload.upload)}
-            </TextButton>
-          )}
-        </DropZone>
-        {variant !== "nested" && (
-          <Button
-            size="s"
-            width="hug"
-            isDisabled={isDisabled}
-          >
-            {t(($) => $.ui.fileUpload.uploadFile)}
-          </Button>
-        )}
-      </div>
-    </FileTrigger>
-  );
-};

package/src/components/inputs/File/shared/InputUploadFilled.tsx

@@ -1,32 +0,0 @@
-import { CloseIcon } from "#ui/assets/icons/Close";
-import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
-import { Typography } from "#ui/components/text/Typography/Typography";
-
-interface InputUploadFilledProps {
-  files: File[];
-  onRemove: () => void;
-  isDisabled?: boolean;
-}
-
-export const InputUploadFilled = ({ files, onRemove, isDisabled }: InputUploadFilledProps) => {
-  return (
-    <div className="flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default">
-      <Typography
-        variant="default"
-        size="label-1"
-        as="span"
-        className="flex-fill select-none truncate text-ellipsis text-text-default-1"
-      >
-        {files.map((file) => file.name).join(", ")}
-      </Typography>
-
-      <InlineIconButton
-        label="Remove files"
-        color="secondary"
-        icon={CloseIcon}
-        isDisabled={isDisabled}
-        onPress={onRemove}
-      />
-    </div>
-  );
-};

package/src/components/inputs/FormField/FormField.tsx

@@ -1,69 +0,0 @@
-import type { PropsWithChildren, Ref } from "react";
-
-import { FormFieldError, type FormFieldErrorProps } from "#ui/components/inputs/FormField/FormFieldError";
-import { FormFieldHeader, type FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
-import type { TextInputProps } from "#ui/components/inputs/Input/TextInput/TextInput";
-
-export interface FormFieldProps
-  extends Omit<FormFieldHeaderProps, "className" | "labelProps">,
-    Omit<FormFieldErrorProps, "className"> {
-  hideLabel?: boolean;
-  headerClassName?: string;
-  errorClassName?: string;
-  className?: string;
-}
-
-interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
-  ref?: Ref<HTMLDivElement>;
-  labelProps?: FormFieldHeaderProps["labelProps"];
-  as?: TextInputProps["as"];
-}
-
-export const FormField = ({
-  ref,
-  as,
-  label,
-  tooltipText,
-  helperText,
-  isRequired,
-  rightContent,
-  isDisabled,
-  error,
-  hideLabel,
-  headerClassName,
-  errorClassName,
-  children,
-  className,
-  labelProps,
-  isHeaderHidden,
-}: FormFieldComponentProps) => {
-  const headerProps: FormFieldHeaderProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps,
-  };
-
-  const errorProps: FormFieldErrorProps = {
-    error,
-    isDisabled,
-    isHidden: isHeaderHidden,
-    className: errorClassName,
-  };
-
-  return (
-    <div
-      ref={ref}
-      className={className}
-    >
-      {!["filter", "floating"].includes(as ?? "") && <FormFieldHeader {...headerProps} />}
-      {children}
-      <FormFieldError {...errorProps} />
-    </div>
-  );
-};

package/src/components/inputs/FormField/FormFieldError.tsx

@@ -1,21 +0,0 @@
-import { clsx } from "clsx";
-
-import { Typography } from "#ui/components/text/Typography/Typography";
-
-export interface FormFieldErrorProps {
-  error?: string;
-  isDisabled?: boolean;
-  isHidden?: boolean;
-  className?: string;
-}
-
-export const FormFieldError = ({ error, isDisabled, isHidden, className }: FormFieldErrorProps) => {
-  return (
-    <Typography
-      className={clsx("text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className)}
-      size="label-3"
-    >
-      {error}
-    </Typography>
-  );
-};

package/src/components/inputs/FormField/FormFieldHeader.tsx

@@ -1,75 +0,0 @@
-import type { DOMAttributes } from "@react-types/shared";
-import { clsx } from "clsx";
-import type { ReactNode } from "react";
-import { Focusable as AriaFocusable } from "react-aria-components";
-
-import { InfoIcon } from "#ui/assets/icons/Info";
-import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
-import { Tooltip } from "#ui/components/overlays/Tooltip/Tooltip";
-import { Typography } from "#ui/components/text/Typography/Typography";
-
-export interface FormFieldHeaderProps {
-  label: string;
-  tooltipText?: string;
-  helperText?: string;
-  isRequired?: boolean;
-  rightContent?: ReactNode;
-  isHeaderHidden?: boolean;
-  isDisabled?: boolean;
-  className?: string;
-  labelProps?: DOMAttributes<HTMLLabelElement>;
-}
-
-export const FormFieldHeader = ({
-  label,
-  tooltipText,
-  helperText,
-  isRequired,
-  rightContent,
-  isHeaderHidden,
-  isDisabled,
-  className,
-  labelProps,
-}: FormFieldHeaderProps) => {
-  return (
-    <div className={clsx(isHeaderHidden ? "sr-only" : "mb-1", className)}>
-      <div className="flex items-start justify-between">
-        <div className="flex items-start gap-1">
-          <FormFieldLabel
-            label={label}
-            isRequired={isRequired}
-            isDisabled={isDisabled}
-            labelProps={labelProps}
-          />
-
-          {tooltipText && (
-            <Tooltip text={tooltipText}>
-              <AriaFocusable>
-                <InfoIcon
-                  className={clsx(
-                    "size-6",
-                    isDisabled
-                      ? "text-interactive-text-secondary-disabled"
-                      : "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover",
-                  )}
-                  tabIndex={0}
-                />
-              </AriaFocusable>
-            </Tooltip>
-          )}
-        </div>
-        {rightContent}
-      </div>
-
-      {helperText && (
-        <Typography
-          slot="description"
-          size="label-2"
-          className={clsx(isDisabled ? "text-interactive-3" : "text-text-default-2")}
-        >
-          {helperText}
-        </Typography>
-      )}
-    </div>
-  );
-};

package/src/components/inputs/FormField/FormFieldHeaderClose.tsx

@@ -1,23 +0,0 @@
-import { Button as AriaButton } from "react-aria-components";
-import { useTranslation } from "react-i18next";
-
-import { CloseIcon } from "#ui/assets/icons/Close";
-import { ns } from "#ui/config/i18n";
-
-interface FormFieldHeaderCloseProps {
-  onClose: () => void;
-}
-
-export const FormFieldHeaderClose = ({ onClose }: FormFieldHeaderCloseProps) => {
-  const { t } = useTranslation(ns);
-
-  return (
-    <AriaButton
-      onPress={onClose}
-      aria-label={t(($) => $.ui.closeAlt)}
-      className="shrink-0 focus-visible:outline-interactive-text-secondary-focus"
-    >
-      <CloseIcon className="size-6 text-interactive-text-secondary-idle" />
-    </AriaButton>
-  );
-};

package/src/components/inputs/FormField/FormFieldLabel.tsx

@@ -1,41 +0,0 @@
-import type { DOMAttributes } from "@react-types/shared";
-import { clsx } from "clsx";
-import type { RefCallback } from "react";
-import { Label as AriaLabel } from "react-aria-components";
-
-import { type LabelBaseProps, labelBase, labelTypography } from "#ui/components/inputs/shared/label.cva";
-import { Typography } from "#ui/components/text/Typography/Typography";
-import { UIStyle } from "#ui/config/uiStyle.context";
-
-export interface FormFieldLabelProps extends LabelBaseProps {
-  label: string;
-  isRequired?: boolean;
-  isDisabled?: boolean;
-  ref?: RefCallback<HTMLOrSVGElement>;
-  labelProps?: DOMAttributes<HTMLLabelElement>;
-}
-
-export const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps }: FormFieldLabelProps) => {
-  const uiStyle = UIStyle.useConfig();
-  const labelTypographyMap = uiStyle?.label?.typography ?? labelTypography;
-  const labelBaseCva = (uiStyle?.label?.cva ?? labelBase) as unknown as UIStyle.Cva<LabelBaseProps>;
-
-  return (
-    <AriaLabel {...labelProps}>
-      <Typography
-        ref={ref}
-        as="span"
-        {...{
-          size: "label-2",
-          variant: "prominent-1",
-          ...labelTypographyMap({ as }),
-        }}
-        className={clsx(labelBaseCva({ as }), labelProps?.className)}
-      >
-        {label}
-
-        {isRequired && <span className={clsx(!isDisabled && "text-text-error-1")}>*</span>}
-      </Typography>
-    </AriaLabel>
-  );
-};