@povio/ui 0.0.4 → 0.0.6

package/dist/components/inputs/File/index.d.ts

@@ -0,0 +1,9 @@
+export type { FileUploadBaseProps, FileUploadProps } from './FileUpload';
+export { FileUpload } from './FileUpload';
+export type { FileUploadContainerProps } from './FileUploadContainer';
+export { FileUploadContainer } from './FileUploadContainer';
+export type { InputUploadBaseProps, InputUploadProps } from './InputUpload';
+export { InputUpload } from './InputUpload';
+export { FileCard } from './shared/FileCard';
+export type { FileUploadDropZoneProps } from './shared/fileUpload.cva';
+export { fileUploadDropZone } from './shared/fileUpload.cva';

package/dist/components/inputs/File/inputUpload.types.d.ts

@@ -0,0 +1,30 @@
+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 { InputUploadButtonProps } from './shared/inputUploadButton.cva';
+export interface SingleFileUploadProps {
+    allowsMultiple?: false;
+    value?: File | null;
+    onChange?: (file: File | null) => void;
+    defaultValue?: File | null;
+}
+export interface MultipleFileUploadProps {
+    allowsMultiple: true;
+    value?: File[];
+    onChange?: (files: File[]) => void;
+    defaultValue?: File[];
+}
+export type GroupedFileUploadProps = MultipleFileUploadProps | SingleFileUploadProps;
+export type GroupedFileUploadControlProps<TFieldValues extends FieldValues> = ({
+    allowsMultiple: true;
+} & ControlProps<MultipleFileUploadProps, TFieldValues>) | ({
+    allowsMultiple?: false;
+} & ControlProps<SingleFileUploadProps, TFieldValues>);
+export type InputUploadBaseProps = {
+    ref?: Ref<HTMLElement>;
+    label?: string;
+    className?: string;
+} & FormFieldProps & InputUploadButtonProps & Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple"> & Omit<DropZoneProps, "children" | "onDrop"> & GroupedFileUploadProps;
+export type InputUploadProps<TFieldValues extends FieldValues = FieldValues> = InputUploadBaseProps & GroupedFileUploadControlProps<TFieldValues>;

package/dist/components/inputs/File/shared/FileCard.d.ts

@@ -0,0 +1,9 @@
+import { FileUploadProps, FileUploadState } from '#ui/components/inputs/File/FileUpload';
+interface FileCardProps extends Pick<FileUploadProps, "as" | "isDisabled"> {
+    index: number;
+    state: FileUploadState;
+    onRemove?: (id: string) => void;
+    onCancel?: (index: number) => void;
+}
+export declare const FileCard: ({ index, as, state, onRemove, isDisabled, onCancel }: FileCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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/dist/components/inputs/File/shared/FileCardList.d.ts

@@ -0,0 +1,9 @@
+import { FileUploadProps, FileUploadState } from '#ui/components/inputs/File/FileUpload';
+interface FileCardListProps extends Pick<FileUploadProps, "isDisabled" | "as"> {
+    uploadState: FileUploadState[];
+    className?: string;
+    onRemove?: (id: string) => void;
+    onCancel?: (index: number) => void;
+}
+export declare const FileCardList: ({ uploadState, as, isDisabled, className, onRemove, onCancel }: FileCardListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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.d.ts

@@ -0,0 +1,3 @@
+export declare const FileProgressBar: ({ progress }: {
+    progress?: number;
+}) => import("react/jsx-runtime").JSX.Element;

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/dist/components/inputs/File/shared/FileUploadContent.d.ts

@@ -0,0 +1,10 @@
+import { FileUploadBaseProps, FileUploadState } from '#ui/components/inputs/File/fileUpload.types';
+type FileUploadContentProps = Omit<FileUploadBaseProps, "ref" | "children" | "emptyText" | "label"> & {
+    emptyText: string;
+    uploadState: FileUploadState[];
+    handleSelect: (inputFiles: FileList | null) => void;
+    handleCancelUpload: (index: number) => void;
+    handleRemove: (id: string) => void;
+};
+export declare const FileUploadContent: ({ variant, as, isDisabled, browseText, uploadText, emptyText, uploadState, handleCancelUpload, handleRemove, acceptedFileTypes, allowsMultiple, handleSelect, ...rest }: FileUploadContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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/dist/components/inputs/File/shared/FileUploadContentEmpty.d.ts

@@ -0,0 +1,9 @@
+import { FileUploadBaseProps } from '#ui/components/inputs/File/fileUpload.types';
+type FileUploadContentEmptyProps = Pick<FileUploadBaseProps, "variant" | "as" | "isDisabled" | "emptyText" | "browseText" | "uploadText"> & {
+    title: string;
+    singleFile?: boolean;
+    hideButton?: boolean;
+    className?: string;
+};
+export declare const FileUploadContentEmpty: ({ variant, as, isDisabled, title, browseText, uploadText, singleFile, hideButton, className, }: FileUploadContentEmptyProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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/dist/components/inputs/File/shared/FileUploadContentError.d.ts

@@ -0,0 +1,11 @@
+import { FileTriggerProps } from 'react-aria-components';
+import { FileUploadBaseProps, FileUploadState } from '#ui/components/inputs/File/fileUpload.types';
+type FileUploadContentErrorProps = Pick<FileUploadBaseProps, "variant" | "as" | "isDisabled" | "emptyText" | "browseText"> & {
+    state: FileUploadState;
+    fileTriggerProps?: FileTriggerProps;
+    removeWithIcon?: boolean;
+    singleFile?: boolean;
+    onRemove: (id: string) => void;
+};
+export declare const FileUploadContentError: ({ variant, as, isDisabled, state, browseText, fileTriggerProps, removeWithIcon, singleFile, onRemove, }: FileUploadContentErrorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,167 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { FileTrigger } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { WarningFilledIcon } from "../../../../assets/icons/Warningfilled.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+const FileUploadContentError = ({
+  variant,
+  as,
+  isDisabled,
+  state,
+  browseText,
+  fileTriggerProps,
+  removeWithIcon = false,
+  singleFile,
+  onRemove
+}) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsx("div", { className: clsx("flex w-full flex-fill flex-col items-start"), children: /* @__PURE__ */ jsxs(
+    "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"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "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
+              }
+            ),
+            children: [
+              /* @__PURE__ */ jsx(WarningFilledIcon, { className: "h-6 w-6 text-elevation-fill-warning-1" }),
+              /* @__PURE__ */ jsxs(
+                "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"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "prominent-1",
+                        size: "label-1",
+                        as: "span",
+                        className: clsx("self-stretch truncate text-text-default-1", {
+                          "text-center": variant === "vertical"
+                        }),
+                        children: state.file.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "default",
+                        size: singleFile ? "label-2" : "label-3",
+                        as: "span",
+                        className: clsx("text-text-default-2", {
+                          "text-center": variant === "vertical"
+                        }),
+                        children: state.error?.serverMessage ?? state.error?.message
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "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",
+              "gap-file-upload-content-gap-content-to-button": as === "button"
+            }),
+            children: as === "link" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              fileTriggerProps && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(FileTrigger, { ...fileTriggerProps, children: /* @__PURE__ */ jsx(TextButton, { className: "text-interactive-text-primary-idle", children: browseText ?? "" }) }),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "default",
+                    size: "label-2",
+                    as: "span",
+                    className: "text-text-default-2",
+                    children: t(($) => $.ui.fileUpload.or)
+                  }
+                )
+              ] }),
+              removeWithIcon ? /* @__PURE__ */ jsx(
+                InlineIconButton,
+                {
+                  label: "Cancel",
+                  color: "secondary",
+                  onPress: () => {
+                    onRemove(state.id ?? "");
+                  },
+                  icon: CloseIcon
+                }
+              ) : /* @__PURE__ */ jsx(
+                TextButton,
+                {
+                  className: "text-interactive-text-primary-idle lowercase",
+                  onPress: () => {
+                    onRemove(state.id ?? "");
+                  },
+                  children: t(($) => $.ui.fileUpload.removeFile)
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch", children: [
+              fileTriggerProps && /* @__PURE__ */ jsx(FileTrigger, { ...fileTriggerProps, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  size: "xs",
+                  width: "hug",
+                  isDisabled,
+                  children: browseText ?? ""
+                }
+              ) }),
+              removeWithIcon ? /* @__PURE__ */ jsx(
+                InlineIconButton,
+                {
+                  label: "Cancel",
+                  color: "secondary",
+                  onPress: () => {
+                    onRemove(state.id ?? "");
+                  },
+                  icon: CloseIcon
+                }
+              ) : /* @__PURE__ */ jsx(
+                TextButton,
+                {
+                  color: "secondary",
+                  onPress: () => {
+                    onRemove(state.id ?? "");
+                  },
+                  children: t(($) => $.ui.fileUpload.removeFile)
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  FileUploadContentError
+};

package/dist/components/inputs/File/shared/FileUploadContentFilled.d.ts

@@ -0,0 +1,11 @@
+import { FileTriggerProps } from 'react-aria-components';
+import { FileUploadBaseProps, FileUploadState } from '#ui/components/inputs/File/fileUpload.types';
+type FileUploadContentFilledProps = Pick<FileUploadBaseProps, "variant" | "as" | "isDisabled" | "emptyText" | "browseText"> & {
+    state: FileUploadState;
+    fileTriggerProps?: FileTriggerProps;
+    removeWithIcon?: boolean;
+    singleFile?: boolean;
+    onRemove: (id: string) => void;
+};
+export declare const FileUploadContentFilled: ({ variant, as, isDisabled, state, browseText, fileTriggerProps, removeWithIcon, singleFile, onRemove, }: FileUploadContentFilledProps) => import("react/jsx-runtime").JSX.Element;
+export {};