@povio/ui 0.0.7 → 0.0.8

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

@@ -1,176 +0,0 @@
-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,
-  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/dist/components/inputs/File/shared/FileCard.js

@@ -1,67 +0,0 @@
-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.js

@@ -1,20 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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.js

@@ -1,92 +0,0 @@
-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.js

@@ -1,92 +0,0 @@
-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.js

@@ -1,167 +0,0 @@
-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
-};