@povio/ui 0.0.8 → 0.0.9

package/dist/components/inputs/File/InputUpload.js

@@ -0,0 +1,176 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs, useLabels } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useState } from "react";
+import { Controller } from "react-hook-form";
+import { FormField } from "../FormField/FormField.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { InputUploadContent } from "./shared/InputUploadContent.js";
+import { InputUploadFilled } from "./shared/InputUploadFilled.js";
+const InputUploadBase = ({
+  ref: _ref,
+  label,
+  tooltipText,
+  variant,
+  helperText,
+  isRequired,
+  isDisabled,
+  headerClassName,
+  errorClassName,
+  isHeaderHidden,
+  error,
+  className,
+  onChange,
+  value,
+  defaultValue,
+  allowsMultiple = false,
+  hideLabel,
+  acceptedFileTypes,
+  ...rest
+}) => {
+  const ui = UIConfig.useConfig();
+  const [internalFiles, setInternalFiles] = useState(() => {
+    if (value !== void 0) {
+      if (allowsMultiple) {
+        return value || [];
+      }
+      return value ? [value] : [];
+    }
+    if (defaultValue !== void 0) {
+      if (allowsMultiple) {
+        return defaultValue || [];
+      }
+      return defaultValue ? [defaultValue] : [];
+    }
+    return [];
+  });
+  const files = value !== void 0 ? (() => {
+    if (allowsMultiple) {
+      return value || [];
+    }
+    return value ? [value] : [];
+  })() : internalFiles;
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    isHeaderHidden,
+    hideLabel: hideLabel ?? ui.input.hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  const labelProps = useLabels({ "aria-label": label });
+  const updateFiles = (newFiles) => {
+    if (value === void 0) {
+      setInternalFiles(newFiles);
+    }
+    if (allowsMultiple) {
+      onChange?.(newFiles);
+    } else {
+      onChange?.(newFiles[0] || null);
+    }
+  };
+  const isFileAccepted = (file) => {
+    if (!acceptedFileTypes || acceptedFileTypes.length === 0) {
+      return true;
+    }
+    return acceptedFileTypes.some((type) => {
+      if (type.includes("/")) {
+        return file.type === type || type.endsWith("/*") && file.type.startsWith(type.slice(0, -1));
+      }
+      return file.name.toLowerCase().endsWith(type.toLowerCase());
+    });
+  };
+  const handleSelect = (inputFiles) => {
+    if (!inputFiles) {
+      return;
+    }
+    const filesArray = Array.from(inputFiles);
+    const acceptedFiles = filesArray.filter(isFileAccepted);
+    if (allowsMultiple) {
+      updateFiles([...files, ...acceptedFiles]);
+    } else {
+      updateFiles([acceptedFiles[0]]);
+    }
+  };
+  const handleDrop = async (e) => {
+    if (!e.items) {
+      return;
+    }
+    const promises = [];
+    e.items.forEach((item) => {
+      if (item.kind === "file") {
+        promises.push(item.getFile());
+      }
+    });
+    const inputFiles = await Promise.all(promises);
+    const acceptedFiles = inputFiles.filter(isFileAccepted);
+    if (allowsMultiple) {
+      updateFiles([...files, ...acceptedFiles]);
+    } else {
+      updateFiles([acceptedFiles[0]]);
+    }
+  };
+  const handleRemove = () => {
+    updateFiles([]);
+  };
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      ...formFieldProps,
+      labelProps,
+      className: clsx("w-full", className),
+      children: files.length > 0 ? /* @__PURE__ */ jsx(
+        InputUploadFilled,
+        {
+          files,
+          onRemove: handleRemove,
+          isDisabled
+        }
+      ) : /* @__PURE__ */ jsx(
+        InputUploadContent,
+        {
+          ...rest,
+          label,
+          error,
+          allowsMultiple,
+          acceptedFileTypes,
+          variant,
+          isDisabled,
+          onSelect: handleSelect,
+          onDrop: handleDrop
+        }
+      )
+    }
+  );
+};
+const InputUpload = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          InputUploadBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(InputUploadBase, { ...props });
+};
+export {
+  InputUpload
+};

package/{src → dist}/components/inputs/File/fileUpload.types.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode, Ref } from 'react';
 import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
-import { ApplicationException, GeneralErrorCodes } from '#ui/utils/vendor/error-handling';
+import { FormFieldProps } from '../FormField/FormField';
+import { ControlProps } from '../shared/form.types';
+import { ApplicationException, GeneralErrorCodes } from '../../../utils/vendor/error-handling';
 export interface FileUploadVariant {
     variant?: "vertical" | "horizontal";
 }

package/{src → dist}/components/inputs/File/inputUpload.types.d.ts

@@ -1,8 +1,8 @@
 import { Ref } from 'react';
 import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { FormFieldProps } from '../FormField/FormField';
+import { ControlProps } from '../shared/form.types';
 import { InputUploadButtonProps } from './shared/inputUploadButton.cva';
 export interface SingleFileUploadProps {
     allowsMultiple?: false;

package/{src → dist}/components/inputs/File/shared/FileCard.d.ts

@@ -1,4 +1,4 @@
-import { FileUploadProps, FileUploadState } from '#ui/components/inputs/File/FileUpload';
+import { FileUploadProps, FileUploadState } from '../FileUpload';
 interface FileCardProps extends Pick<FileUploadProps, "as" | "isDisabled"> {
     index: number;
     state: FileUploadState;

package/dist/components/inputs/File/shared/FileCard.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { FileUploadContentError } from "./FileUploadContentError.js";
+import { FileUploadContentFilled } from "./FileUploadContentFilled.js";
+import { FileUploadContentLoading } from "./FileUploadContentLoading.js";
+const FileCard = ({ index, as, state, onRemove, isDisabled, onCancel }) => {
+  const content = useMemo(() => {
+    if (state.state === "uploading") {
+      return /* @__PURE__ */ jsx(
+        FileUploadContentLoading,
+        {
+          index,
+          variant: "horizontal",
+          as,
+          isDisabled,
+          state,
+          onCancel: () => onCancel?.(index)
+        }
+      );
+    }
+    if (state.state === "error") {
+      return /* @__PURE__ */ jsx(
+        FileUploadContentError,
+        {
+          as,
+          removeWithIcon: true,
+          variant: "horizontal",
+          isDisabled,
+          state,
+          onRemove: () => {
+            onCancel?.(index);
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      FileUploadContentFilled,
+      {
+        as,
+        removeWithIcon: true,
+        variant: "horizontal",
+        isDisabled,
+        state,
+        onRemove: () => {
+          onRemove?.(state.id ?? "");
+        }
+      }
+    );
+  }, [state, index, as, isDisabled, onCancel, onRemove]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "flex items-center self-stretch",
+        "bg-elevation-fill-default-1",
+        "px-file-upload-file-card-side-default",
+        "py-4",
+        "rounded-file-upload-file-card-rounding-default border border-elevation-outline-default-1 border-solid"
+      ),
+      children: content
+    }
+  );
+};
+export {
+  FileCard
+};

package/{src → dist}/components/inputs/File/shared/FileCardList.d.ts

@@ -1,4 +1,4 @@
-import { FileUploadProps, FileUploadState } from '#ui/components/inputs/File/FileUpload';
+import { FileUploadProps, FileUploadState } from '../FileUpload';
 interface FileCardListProps extends Pick<FileUploadProps, "isDisabled" | "as"> {
     uploadState: FileUploadState[];
     className?: string;

package/dist/components/inputs/File/shared/FileCardList.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { FileCard } from "./FileCard.js";
+const FileCardList = ({ uploadState, as, isDisabled, className, onRemove, onCancel }) => {
+  return /* @__PURE__ */ jsx("div", { className: clsx("mt-10 flex flex-col items-start gap-4 self-stretch", className), children: uploadState.map((state, index) => /* @__PURE__ */ jsx(
+    FileCard,
+    {
+      index,
+      as,
+      state,
+      isDisabled,
+      onRemove,
+      onCancel
+    },
+    state.file.name || state.id || state.src
+  )) });
+};
+export {
+  FileCardList
+};

package/dist/components/inputs/File/shared/FileProgressBar.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Typography } from "../../../text/Typography/Typography.js";
+const FileProgressBar = ({ progress = 0 }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1 w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-1 w-full flex-shrink-0 rounded-xs bg-input-filled-idle" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute top-0 left-0 h-1 flex-shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
+          style: { width: `${progress}%` }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      Typography,
+      {
+        variant: "default",
+        size: "label-2",
+        as: "span",
+        className: "text-center text-text-default-1",
+        children: [
+          progress,
+          "%"
+        ]
+      }
+    )
+  ] });
+};
+export {
+  FileProgressBar
+};

package/{src → dist}/components/inputs/File/shared/FileUploadContent.d.ts

@@ -1,4 +1,4 @@
-import { FileUploadBaseProps, FileUploadState } from '#ui/components/inputs/File/fileUpload.types';
+import { FileUploadBaseProps, FileUploadState } from '../fileUpload.types';
 type FileUploadContentProps = Omit<FileUploadBaseProps, "ref" | "children" | "emptyText" | "label"> & {
     emptyText: string;
     uploadState: FileUploadState[];

package/dist/components/inputs/File/shared/FileUploadContent.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import { FileTrigger } from "react-aria-components";
+import { FileUploadContentEmpty } from "./FileUploadContentEmpty.js";
+import { FileUploadContentError } from "./FileUploadContentError.js";
+import { FileUploadContentFilled } from "./FileUploadContentFilled.js";
+import { FileUploadContentLoading } from "./FileUploadContentLoading.js";
+const FileUploadContent = ({
+  variant,
+  as,
+  isDisabled,
+  browseText,
+  uploadText,
+  emptyText,
+  uploadState,
+  handleCancelUpload,
+  handleRemove,
+  acceptedFileTypes,
+  allowsMultiple,
+  handleSelect,
+  ...rest
+}) => {
+  const currentState = uploadState.at(0);
+  const fileTriggerProps = {
+    ...rest,
+    acceptedFileTypes,
+    allowsMultiple,
+    onSelect: handleSelect
+  };
+  if (!allowsMultiple && currentState) {
+    if (currentState.state === "uploading") {
+      return /* @__PURE__ */ jsx(
+        FileUploadContentLoading,
+        {
+          index: 0,
+          variant,
+          as,
+          singleFile: true,
+          isDisabled,
+          state: currentState,
+          onCancel: handleCancelUpload
+        }
+      );
+    }
+    if (currentState.state === "uploaded") {
+      return /* @__PURE__ */ jsx(
+        FileUploadContentFilled,
+        {
+          as,
+          variant,
+          singleFile: true,
+          isDisabled,
+          state: currentState,
+          browseText,
+          fileTriggerProps,
+          onRemove: () => {
+            handleRemove(currentState.id ?? "");
+          }
+        }
+      );
+    }
+    if (currentState.state === "error") {
+      return /* @__PURE__ */ jsx(
+        FileUploadContentError,
+        {
+          as,
+          variant,
+          singleFile: true,
+          isDisabled,
+          state: currentState,
+          onRemove: () => {
+            handleRemove(currentState.id ?? "");
+          }
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx(FileTrigger, { ...fileTriggerProps, children: /* @__PURE__ */ jsx(
+    FileUploadContentEmpty,
+    {
+      as,
+      variant,
+      singleFile: true,
+      isDisabled,
+      title: emptyText,
+      uploadText,
+      browseText
+    }
+  ) });
+};
+export {
+  FileUploadContent
+};

package/{src → dist}/components/inputs/File/shared/FileUploadContentEmpty.d.ts

@@ -1,4 +1,4 @@
-import { FileUploadBaseProps } from '#ui/components/inputs/File/fileUpload.types';
+import { FileUploadBaseProps } from '../fileUpload.types';
 type FileUploadContentEmptyProps = Pick<FileUploadBaseProps, "variant" | "as" | "isDisabled" | "emptyText" | "browseText" | "uploadText"> & {
     title: string;
     singleFile?: boolean;

package/dist/components/inputs/File/shared/FileUploadContentEmpty.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { UploadIcon } from "../../../../assets/icons/Upload.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+const FileUploadContentEmpty = ({
+  variant,
+  as,
+  isDisabled,
+  title,
+  browseText,
+  uploadText,
+  singleFile,
+  hideButton = false,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("flex w-full items-center gap-file-upload-content-gap-text-to-text", className, {
+        "flex-col": variant === "vertical",
+        "min-h-11 flex-row justify-between": variant === "horizontal"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
+              "flex-col": variant === "vertical",
+              "flex-row": variant === "horizontal",
+              "opacity-50": isDisabled
+            }),
+            children: [
+              /* @__PURE__ */ jsx(UploadIcon, { className: "h-6 w-6 text-text-default-1" }),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "prominent-1",
+                  size: "label-1",
+                  as: "span",
+                  className: clsx("self-stretch text-text-default-1", {
+                    "text-center": variant === "vertical"
+                  }),
+                  children: title
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx("flex items-center justify-center", {
+              "flex-col": variant === "vertical" && as === "button",
+              "gap-file-upload-content-gap-text-to-text": as === "link",
+              "gap-file-upload-content-gap-content-to-button": as === "button"
+            }),
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "default",
+                  size: singleFile ? "label-2" : "label-3",
+                  as: "span",
+                  className: clsx("text-text-default-2", {
+                    "text-center": variant === "vertical",
+                    "opacity-50": isDisabled
+                  }),
+                  children: uploadText
+                }
+              ),
+              !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(TextButton, { className: "[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase", children: browseText }) : /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  size: "xs",
+                  width: "hug",
+                  isDisabled,
+                  children: browseText
+                }
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  FileUploadContentEmpty
+};

package/{src → dist}/components/inputs/File/shared/FileUploadContentError.d.ts

@@ -1,5 +1,5 @@
 import { FileTriggerProps } from 'react-aria-components';
-import { FileUploadBaseProps, FileUploadState } from '#ui/components/inputs/File/fileUpload.types';
+import { FileUploadBaseProps, FileUploadState } from '../fileUpload.types';
 type FileUploadContentErrorProps = Pick<FileUploadBaseProps, "variant" | "as" | "isDisabled" | "emptyText" | "browseText"> & {
     state: FileUploadState;
     fileTriggerProps?: FileTriggerProps;