@povio/ui 0.0.8 → 0.0.9

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/{src → dist}/components/inputs/File/shared/FileUploadContentFilled.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 FileUploadContentFilledProps = Pick<FileUploadBaseProps, "variant" | "as" | "isDisabled" | "emptyText" | "browseText"> & {
     state: FileUploadState;
     fileTriggerProps?: FileTriggerProps;

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

@@ -0,0 +1,176 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { FileTrigger } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CheckCircleIcon } from "../../../../assets/icons/CheckCircle.js";
+import { CloseIcon } from "../../../../assets/icons/Close.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";
+import { FileUtils } from "../../../../utils/file.utils.js";
+const FileUploadContentFilled = ({
+  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(CheckCircleIcon, { className: "h-6 w-6 text-text-default-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: "self-stretch truncate text-center text-text-default-1",
+                        children: state.file.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "default",
+                        size: singleFile ? "label-2" : "label-3",
+                        as: "span",
+                        className: "text-text-default-2",
+                        children: FileUtils.getCalculatedFileSize(state.file)
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__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" && variant === "vertical",
+              "gap-file-upload-content-gap-content-to-button": as === "button" && variant === "vertical",
+              "gap-file-upload-content-gap-button-to-button": variant === "horizontal"
+            }),
+            children: as === "link" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              fileTriggerProps && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(FileTrigger, { ...fileTriggerProps, children: /* @__PURE__ */ jsx(
+                  TextButton,
+                  {
+                    className: clsx("text-interactive-text-primary-idle", {
+                      "[&>span>span]:!font-medium": variant === "vertical"
+                    }),
+                    children: browseText ?? ""
+                  }
+                ) }),
+                variant === "vertical" && /* @__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: clsx(
+                    variant === "vertical" && "[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase"
+                  ),
+                  color: variant === "horizontal" ? "secondary" : "primary",
+                  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 {
+  FileUploadContentFilled
+};

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

@@ -1,4 +1,4 @@
-import { FileUploadBaseProps, FileUploadState } from '#ui/components/inputs/File/fileUpload.types';
+import { FileUploadBaseProps, FileUploadState } from '../fileUpload.types';
 type FileUploadContentLoadingProps = Pick<FileUploadBaseProps, "variant" | "as" | "isDisabled" | "emptyText" | "browseText"> & {
     index: number;
     state: FileUploadState;

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

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { FileIcon } from "../../../../assets/icons/File.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { FileUtils } from "../../../../utils/file.utils.js";
+import { FileProgressBar } from "./FileProgressBar.js";
+const FileUploadContentLoading = ({
+  index,
+  variant,
+  as,
+  state,
+  isDisabled,
+  singleFile,
+  onCancel
+}) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsxs(
+    "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"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "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
+            }),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "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"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(FileIcon, { className: "h-6 w-6 text-text-default-1" }),
+                    /* @__PURE__ */ jsxs(
+                      "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"
+                        }),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "prominent-1",
+                              size: "label-1",
+                              as: "span",
+                              className: "self-stretch truncate text-center text-text-default-1",
+                              children: state.file.name
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: "default",
+                              size: singleFile ? "label-2" : "label-3",
+                              as: "span",
+                              className: "text-text-default-2",
+                              children: FileUtils.getCalculatedFileSize(state.file)
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("flex items-center gap-1", {
+                    "w-1/2": variant === "horizontal",
+                    "w-full": variant === "vertical"
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx(FileProgressBar, { progress: state.progress }),
+                    (as === "link" || variant === "horizontal") && /* @__PURE__ */ jsx(
+                      InlineIconButton,
+                      {
+                        label: "Cancel",
+                        color: "secondary",
+                        onPress: () => {
+                          onCancel(index);
+                        },
+                        icon: CloseIcon
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        as === "button" && variant === "vertical" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "xs",
+            color: "secondary",
+            width: "hug",
+            onPress: () => {
+              onCancel(index);
+            },
+            children: t(($) => $.ui.fileUpload.cancel)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  FileUploadContentLoading
+};

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

@@ -1,5 +1,5 @@
 import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
-import { InputUploadBaseProps } from '#ui/components/inputs/File/inputUpload.types';
+import { InputUploadBaseProps } from '../inputUpload.types';
 interface InputUploadContentProps extends Omit<InputUploadBaseProps, "ref"> {
     onSelect: FileTriggerProps["onSelect"];
     onDrop: DropZoneProps["onDrop"];

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

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { FileTrigger, DropZone } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { UploadIcon } from "../../../../assets/icons/Upload.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { inputSize } from "../../shared/input.cva.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
+const InputUploadContent = (props) => {
+  const { variant, isDisabled, error, ...rest } = props;
+  const { t } = useTranslation(ns);
+  const uiStyle = UIStyle.useConfig();
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+  return /* @__PURE__ */ jsx(FileTrigger, { ...rest, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-rac": "",
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": !!error || void 0,
+      className: inputUploadButton({
+        variant,
+        className: "group/input-upload"
+      }),
+      children: [
+        /* @__PURE__ */ jsxs(
+          DropZone,
+          {
+            ...rest,
+            isDisabled,
+            className: clsx(inputUploadDropZone({ variant }), inputSizeCva({ size: "default" })),
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "default",
+                  size: "label-1",
+                  as: "span",
+                  className: "min-w-0 flex-fill select-none truncate text-text-default-3",
+                  children: t(($) => $.ui.fileUpload.emptyText)
+                }
+              ),
+              variant === "nested" && /* @__PURE__ */ jsx(
+                TextButton,
+                {
+                  isDisabled,
+                  icon: UploadIcon,
+                  className: "p-0!",
+                  children: t(($) => $.ui.fileUpload.upload)
+                }
+              )
+            ]
+          }
+        ),
+        variant !== "nested" && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "m",
+            width: "hug",
+            isDisabled,
+            className: "truncate",
+            children: t(($) => $.ui.fileUpload.uploadFile)
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  InputUploadContent
+};

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

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { inputSize } from "../../shared/input.cva.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+const InputUploadFilled = ({ files, onRemove, isDisabled }) => {
+  const uiStyle = UIStyle.useConfig();
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle",
+        inputSizeCva({ size: "default" })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "default",
+            size: "label-1",
+            as: "span",
+            className: "flex-fill select-none truncate text-ellipsis text-text-default-1",
+            children: files.map((file) => file.name).join(", ")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InlineIconButton,
+          {
+            label: "Remove files",
+            color: "secondary",
+            icon: CloseIcon,
+            isDisabled,
+            onPress: onRemove
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  InputUploadFilled
+};

package/dist/components/inputs/File/shared/fileUpload.cva.js

@@ -0,0 +1,58 @@
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-default"], {
+  variants: {
+    variant: {
+      vertical: ["flex-col justify-center"],
+      horizontal: ["flex-row justify-between"]
+    },
+    isContainer: {
+      true: [
+        "data-[drop-target]:before:content-['']",
+        "data-[drop-target]:before:absolute",
+        "data-[drop-target]:before:z-40",
+        "data-[drop-target]:before:width-full",
+        "data-[drop-target]:before:height-full",
+        "data-[drop-target]:before:top-0",
+        "data-[drop-target]:before:left-0",
+        "data-[drop-target]:border data-[drop-target]:border-dashed",
+        "data-[drop-target]:border-elevation-outline-default-2",
+        "data-[drop-target]:before:pointer-events-none data-[drop-target]:before:inset-0",
+        "data-[drop-target]:before:bg-elevation-fill-default-2"
+      ],
+      false: [
+        "flex items-center",
+        "py-file-upload-container-height-top-bottom",
+        "px-file-upload-container-side-default",
+        "gap-gap-file-upload-content-gap-icon-to-content",
+        "border border-input-outlined-outline-idle border-dashed bg-input-outlined-idle",
+        "hover:border-elevation-outline-default-2 hover:bg-elevation-fill-default-2",
+        "invalid:border invalid:border-input-outlined-outline-error",
+        "data-[drop-target]:border-elevation-outline-default-2 data-[drop-target]:bg-elevation-fill-default-2",
+        "data-[has-files]:border-solid"
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "vertical"
+  }
+});
+const fileUploadDropZone = (props) => {
+  const { className, ...rest } = props;
+  return clsx(fileUploadDropZoneBase(rest), className);
+};
+cva(["flex gap-3"], {
+  variants: {
+    variant: {
+      vertical: ["flex-col"],
+      horizontal: ["flex-row flex-wrap"]
+    }
+  },
+  defaultVariants: {
+    variant: "vertical"
+  }
+});
+export {
+  fileUploadDropZone,
+  fileUploadDropZoneBase
+};