@edifice.io/react 2.0.0-develop-rc.14 → 2.0.0-develop-rc.16

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { IWebApp } from 'edifice-ts-client';
+import { IWebApp } from '@edifice.io/ts-client';
 export interface CardProps {
     /**
      * IWebApp
@@ -17,6 +17,10 @@ export interface CardProps {
      * Selected state
      */
     isSelected?: boolean;
+    /**
+     * Card is Focus
+     */
+    isFocused?: boolean;
     /**
      * Click on card
      */
@@ -35,29 +39,29 @@ declare const Card: import('react').ForwardRefExoticComponent<CardProps & import
     Title: {
         ({ children, className, }: {
             children: ReactNode;
-            className?: string | undefined;
+            className?: string;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Text: {
         ({ children, className, }: {
             children: ReactNode;
-            className?: string | undefined;
+            className?: string;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Image: {
         ({ imageSrc, className, variant, }: {
             imageSrc?: string | undefined;
-            className?: string | undefined;
-            variant?: "small" | "medium" | "landscape" | undefined;
+            className?: string;
+            variant?: "small" | "medium" | "landscape";
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Body: {
         ({ children, space, flexDirection, }: {
-            space?: "0" | "16" | "8" | null | undefined;
-            flexDirection?: "row" | "column" | null | undefined;
+            space?: "0" | "8" | "16" | null;
+            flexDirection?: "row" | "column" | null;
             children: ReactNode;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;

package/dist/components/Card/Card.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import clsx from "clsx";
+import CardBody from "./CardBody.js";
+import { CardContext } from "./CardContext.js";
+import CardFooter from "./CardFooter.js";
+import CardHeader from "./CardHeader.js";
+import CardImage from "./CardImage.js";
+import CardText from "./CardText.js";
+import CardTitle from "./CardTitle.js";
+import CardUser from "./CardUser.js";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  app,
+  isSelectable = !0,
+  isClickable = !0,
+  isSelected = !1,
+  isFocused = !1,
+  onClick,
+  onSelect,
+  children,
+  className
+}, ref) => {
+  const {
+    getIconCode
+  } = useEdificeIcons(), appCode = app ? getIconCode(app) : "placeholder", values = useMemo(() => ({
+    app,
+    appCode,
+    isSelectable,
+    isClickable,
+    onClick,
+    onSelect
+  }), [app, appCode, isSelectable, isClickable, onClick, onSelect]);
+  return /* @__PURE__ */ jsx(CardContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { ref, className: clsx("card", {
+    "drag-focus": isFocused,
+    "is-selected": isSelected,
+    "c-pointer": isClickable
+  }, className), children: [
+    /* @__PURE__ */ jsx(Card.Header, {}),
+    typeof children == "function" ? children(appCode) : children
+  ] }) });
+}), Card = /* @__PURE__ */ Object.assign(Root, {
+  Title: CardTitle,
+  Text: CardText,
+  Image: CardImage,
+  Body: CardBody,
+  User: CardUser,
+  Footer: CardFooter,
+  Header: CardHeader
+});
+export {
+  Card as default
+};

package/dist/components/Card/CardBody.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 declare const CardBody: {
     ({ children, space, flexDirection, }: {
-        space?: "0" | "16" | "8" | null | undefined;
-        flexDirection?: "row" | "column" | null | undefined;
+        space?: "0" | "8" | "16" | null;
+        flexDirection?: "row" | "column" | null;
         children: ReactNode;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/Card/CardContext.d.ts

@@ -1,6 +1,6 @@
-import { IWebApp } from 'edifice-ts-client';
+import { IWebApp } from '@edifice.io/ts-client';
 import { CardProps } from './Card';
-export interface CardContextProps extends Omit<CardProps, 'children' | 'className'> {
+export interface CardContextProps extends Omit<CardProps, "children" | "className"> {
     app?: IWebApp | undefined;
     appCode: string | undefined;
     isSelectable?: boolean;

package/dist/components/Card/CardHeader.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SvgIconOptions from "../../modules/icons/components/IconOptions.js";
+import { useCardContext } from "./CardContext.js";
+import IconButton from "../Button/IconButton.js";
+const CardHeader = () => {
+  const {
+    isSelectable,
+    isClickable,
+    onClick,
+    onSelect
+  } = useCardContext(), {
+    t
+  } = useTranslation();
+  return isSelectable || isClickable ? /* @__PURE__ */ jsxs("div", { className: "card-header", children: [
+    isSelectable ? /* @__PURE__ */ jsx(IconButton, { "aria-label": t("card.open.menu"), className: "z-3 bg-white", color: "secondary", icon: /* @__PURE__ */ jsx(SvgIconOptions, {}), onClick: onSelect, variant: "ghost" }) : null,
+    isClickable ? /* @__PURE__ */ jsx("button", { type: "button", onClick, className: "position-absolute bottom-0 end-0 top-0 start-0 opacity-0 z-1 w-100", "aria-label": t("card.open.resource") }) : null
+  ] }) : null;
+};
+export {
+  CardHeader as default
+};

package/dist/components/Card/CardImage.d.ts

@@ -1,8 +1,8 @@
 declare const CardImage: {
     ({ imageSrc, className, variant, }: {
         imageSrc?: string | undefined;
-        className?: string | undefined;
-        variant?: "small" | "medium" | "landscape" | undefined;
+        className?: string;
+        variant?: "small" | "medium" | "landscape";
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Card/CardImage.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useCardContext } from "./CardContext.js";
+import Image from "../Image/Image.js";
+import AppIcon from "../AppIcon/AppIcon.js";
+const CardImage = ({
+  imageSrc,
+  className,
+  variant = "medium"
+}) => {
+  const {
+    app
+  } = useCardContext(), style = variant === "landscape" ? {
+    width: "100%",
+    height: "auto"
+  } : null;
+  return /* @__PURE__ */ jsx("div", { className: clsx("card-image", variant), children: imageSrc ? /* @__PURE__ */ jsx(Image, { alt: "", src: imageSrc, objectFit: "cover", className: clsx("h-full w-100", className) }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "80", variant: "rounded", ...style }) });
+};
+export {
+  CardImage as default
+};

package/dist/components/Card/CardText.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 declare const CardText: {
     ({ children, className, }: {
         children: ReactNode;
-        className?: string | undefined;
+        className?: string;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Card/CardTitle.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 declare const CardTitle: {
     ({ children, className, }: {
         children: ReactNode;
-        className?: string | undefined;
+        className?: string;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Card/CardUser.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import SvgIconOneProfile from "../../modules/icons/components/nav/IconOneProfile.js";
+import Avatar from "../Avatar/Avatar.js";
+const CardUser = ({
+  userSrc,
+  creatorName
+}) => userSrc ? /* @__PURE__ */ jsx(Avatar, { alt: creatorName || "", size: "xs", src: userSrc, variant: "circle", width: "24", height: "24" }) : /* @__PURE__ */ jsx(SvgIconOneProfile, {});
+export {
+  CardUser as default
+};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /**
      * Add a label

package/dist/components/ColorPicker/ColorPalette.d.ts

@@ -12,7 +12,7 @@ export interface ColorPaletteItem {
      * Is it a dark or light color ?
      * When undefined, will be considered Dark.
      */
-    hue?: 'dark' | 'light';
+    hue?: "dark" | "light";
     /**
      * Is it intended to be a reset color ?
      */

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
 import { ColorPalette, ColorPaletteItem } from './ColorPalette';
-export interface ColorPickerProps extends ComponentPropsWithRef<'div'> {
+export interface ColorPickerProps extends ComponentPropsWithRef<"div"> {
     /**
      * Palettes of pickable colors
      */

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import SvgIconDeleteColor from "../../modules/icons/components/IconDeleteColor.js";
+import SvgIconInfoCircle from "../../modules/icons/components/IconInfoCircle.js";
+import { DefaultPalette, AccessiblePalette } from "./ColorPalette.js";
+import ColorPickerItem from "./ColorPickerItem.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+const ColorPicker = /* @__PURE__ */ forwardRef(({
+  palettes = [DefaultPalette, AccessiblePalette],
+  model = "#4A4A4A",
+  onSuccess,
+  ...restProps
+}, ref) => {
+  const {
+    t
+  } = useTranslation(), handleClick = (item) => {
+    item && (onSuccess == null || onSuccess(item));
+  };
+  return /* @__PURE__ */ jsx("div", { ref, ...restProps, children: palettes.map((palette, paletteIdx) => /* @__PURE__ */ jsxs("div", { className: clsx("color-picker mx-8", palette.className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "color-picker-label small mt-4 mb-8", children: [
+      t(palette.label),
+      palette.tooltip && /* @__PURE__ */ jsx(Tooltip, { message: "", placement: "auto", ...palette.tooltip, children: /* @__PURE__ */ jsx(SvgIconInfoCircle, { width: 18, height: 18, className: "mx-4 position-relative", style: {
+        top: "4px"
+      } }) })
+    ] }),
+    // Show/hide the reset option
+    palette.reset && /* @__PURE__ */ jsxs("button", { type: "button", className: "color-picker-reset small my-8 gap-4", onClick: () => handleClick(palette.reset), children: [
+      /* @__PURE__ */ jsx(SvgIconDeleteColor, { width: 20, height: 20 }),
+      palette.reset.description
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "color-picker-palette d-flex gap-2 justify-content-between", children: palette.colors.map((hues, hueIndex) => /* @__PURE__ */ jsx("div", { className: "color-picker-hue d-flex gap-2 justify-content-between flex-column ", children: hues.map((color) => /* @__PURE__ */ jsx("button", { type: "button", "aria-label": color.description, className: "color-picker-hue-color", onClick: () => handleClick(color), children: /* @__PURE__ */ jsx(ColorPickerItem, { ...restProps, model: color, selected: model === color.value }) }, color.value)) }, hueIndex)) })
+  ] }, paletteIdx)) });
+});
+export {
+  ColorPicker as default
+};

package/dist/components/ColorPicker/ColorPickerItem.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import SvgIconDeleteColor from "../../modules/icons/components/IconDeleteColor.js";
+const ColorPickerItem = ({
+  model,
+  selected,
+  className
+}) => model.isReset ? /* @__PURE__ */ jsx(SvgIconDeleteColor, {}) : /* @__PURE__ */ jsx("div", { "aria-label": model.description, className: clsx("color-picker-hue-color-item rounded-1", className, model.hue === "light" ? "light" : "dark", selected && "selected"), style: {
+  backgroundColor: model.value
+} });
+export {
+  ColorPickerItem as default
+};

package/dist/components/Combobox/ComboboxTrigger.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-export interface ComboboxTriggerProps extends React.ComponentPropsWithRef<'button'> {
+export interface ComboboxTriggerProps extends React.ComponentPropsWithRef<"button"> {
     handleSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
     value: string;
     searchMinLength?: number;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -50,7 +50,7 @@ export type DropdownMenuOptions = {
     /**
      * Object type
      */
-    type: 'divider';
+    type: "divider";
 };
 declare const Dropdown: {
     ({ children, block, overflow, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useEffect } from "react";
+import clsx from "clsx";
+import DropdownCheckboxItem from "./DropdownCheckboxItem.js";
+import { DropdownContext } from "./DropdownContext.js";
+import DropdownItem from "./DropdownItem.js";
+import DropdownMenu from "./DropdownMenu.js";
+import DropdownMenuGroup from "./DropdownMenuGroup.js";
+import DropdownRadioItem from "./DropdownRadioItem.js";
+import DropdownSeparator from "./DropdownSeparator.js";
+import DropdownTrigger from "./DropdownTrigger.js";
+import useDropdown from "../../hooks/useDropdown/useDropdown.js";
+import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
+const Root = ({
+  children,
+  block,
+  overflow = !0,
+  placement = "bottom-start",
+  extraTriggerKeyDownHandler,
+  onToggle,
+  isTriggerHovered = !1
+}) => {
+  const {
+    visible,
+    isFocused,
+    triggerProps,
+    menuProps,
+    itemProps,
+    itemRefs,
+    setVisible
+  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered), ref = useClickOutside(() => {
+    setVisible(!1);
+  }), value = useMemo(() => ({
+    visible,
+    isFocused,
+    triggerProps,
+    menuProps,
+    itemProps,
+    itemRefs,
+    block,
+    setVisible
+  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible]), dropdown = clsx("dropdown", {
+    "w-100": block,
+    overflow
+  });
+  return useEffect(() => {
+    onToggle == null || onToggle(visible);
+  }, [visible]), /* @__PURE__ */ jsx(DropdownContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: dropdown, children: typeof children == "function" ? children(triggerProps, itemRefs, setVisible) : children }) });
+}, Dropdown = /* @__PURE__ */ Object.assign(Root, {
+  Trigger: DropdownTrigger,
+  Menu: DropdownMenu,
+  Item: DropdownItem,
+  Separator: DropdownSeparator,
+  CheckboxItem: DropdownCheckboxItem,
+  RadioItem: DropdownRadioItem,
+  MenuGroup: DropdownMenuGroup
+});
+export {
+  Dropdown as default
+};

package/dist/components/Dropdown/DropdownContext.d.ts

@@ -1,5 +1,5 @@
 import { UseDropdownProps } from '../../hooks/useDropdown/useDropdown';
-type OmittedProps = Omit<UseDropdownProps, 'triggerRef' | 'menuRef'>;
+type OmittedProps = Omit<UseDropdownProps, "triggerRef" | "menuRef">;
 export interface DropdownContextProps extends OmittedProps {
     block?: boolean;
 }

package/dist/components/Dropdown/DropdownItem.d.ts

@@ -3,7 +3,7 @@ export interface DropdownItemProps {
     /**
      * Object type
      */
-    type?: 'action' | 'select';
+    type?: "action" | "select";
     /**
      * Icon component
      */

package/dist/components/Dropdown/DropdownMenu.d.ts

@@ -21,10 +21,10 @@ interface Divider {
     /**
      * Object type
      */
-    type: 'divider';
+    type: "divider";
 }
 export type DropdownMenuOptions = Item | Divider;
-export interface DropdownMenuProps extends ComponentPropsWithRef<'div'> {
+export interface DropdownMenuProps extends ComponentPropsWithRef<"div"> {
     children: ReactNode;
     /** Use whole width ? */
     block?: boolean;

package/dist/components/Dropdown/DropdownTrigger.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export interface DropdownTriggerProps extends React.ComponentPropsWithRef<'button'> {
+export interface DropdownTriggerProps extends React.ComponentPropsWithRef<"button"> {
     /**
      * Dropdown trigger title
      */
@@ -15,11 +14,11 @@ export interface DropdownTriggerProps extends React.ComponentPropsWithRef<'butto
     /**
      * Set appearance
      */
-    variant?: 'ghost';
+    variant?: "ghost";
     /**
      * Button size
      */
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     /**
      * Disabled Trigger
      * */

package/dist/components/Dropdown/DropdownTrigger.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import SvgIconRafterUp from "../../modules/icons/components/IconRafterUp.js";
+import { useDropdownContext } from "./DropdownContext.js";
+const DropdownTrigger = /* @__PURE__ */ forwardRef(({
+  label,
+  icon,
+  variant,
+  disabled = !1,
+  size,
+  badgeContent,
+  hideCarret = !1,
+  ...restProps
+}, forwardRef2) => {
+  const {
+    triggerProps,
+    block
+  } = useDropdownContext(), className = clsx("dropdown-toggle ", size, variant, {
+    "w-100": block
+  }, triggerProps.className, restProps.className), mergedProps = {
+    ...triggerProps,
+    ...restProps,
+    className
+  };
+  return /* @__PURE__ */ jsxs("button", { ref: forwardRef2, type: "button", disabled, ...mergedProps, children: [
+    icon,
+    label,
+    badgeContent ? /* @__PURE__ */ jsx("span", { className: "badge text-bg-secondary rounded-pill", children: badgeContent }) : !hideCarret && /* @__PURE__ */ jsx(SvgIconRafterUp, { width: 16, height: 16, className: "dropdown-toggle-caret" })
+  ] });
+});
+export {
+  DropdownTrigger as default
+};

package/dist/components/Dropzone/Dropzone.d.ts

@@ -1,17 +1,41 @@
 import { ReactNode } from 'react';
+/**
+ * Props for the Dropzone component.
+ */
 interface DropzoneProps {
+    /**
+     * Optional additional class names to apply to the dropzone.
+     */
     className?: string;
-    /** See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers */
+    /**
+     * Array of accepted file types.
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers | MDN Documentation}.
+     */
     accept?: string[];
+    /**
+     * Whether multiple files can be selected.
+     */
     multiple?: boolean;
+    /**
+     * Whether the dropzone should handle the file drop.
+     */
     handle?: boolean;
+    /**
+     * The content to be rendered inside the dropzone.
+     */
     children?: ReactNode;
 }
+/**
+ *
+ * The Dropzone component allows to add or remove files. A `useDropzoneContext` hook is available to manage a specific UI component for handling file uploads.
+ *
+ */
 declare const Dropzone: {
     ({ className, accept, multiple, handle, children, }: DropzoneProps): import("react/jsx-runtime").JSX.Element;
     File: {
-        ({ children }: {
+        ({ children, multiple, }: {
             children: ReactNode;
+            multiple?: boolean;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };

package/dist/components/Dropzone/Dropzone.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import clsx from "clsx";
+import { DropzoneContext } from "./DropzoneContext.js";
+import DropzoneDrag from "./DropzoneDrag.js";
+import DropzoneFile from "./DropzoneFile.js";
+import DropzoneImport from "./DropzoneImport.js";
+import useDropzone from "../../hooks/useDropzone/useDropzone.js";
+const Dropzone = ({
+  className,
+  accept,
+  multiple = !0,
+  handle = !1,
+  children
+}) => {
+  const {
+    inputRef,
+    dragging,
+    files,
+    addFile,
+    deleteFile,
+    replaceFileAt,
+    handleDragLeave,
+    handleDragging,
+    handleDrop,
+    handleOnChange
+  } = useDropzone(accept ? {
+    forceFilters: !0
+  } : void 0), classes = clsx("dropzone", {
+    "is-dragging": (multiple || files.length < 1) && dragging,
+    "is-drop-files": !(files.length !== 0 && !handle)
+  }, className), value = useMemo(() => ({
+    inputRef,
+    files,
+    addFile,
+    deleteFile,
+    replaceFileAt
+  }), [addFile, deleteFile, replaceFileAt, files, inputRef]);
+  return /* @__PURE__ */ jsx(DropzoneContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { className: classes, onDragEnter: handleDragging, onDragOver: handleDragging, onDragLeave: handleDragLeave, onDrop: files.length > 0 && !multiple ? void 0 : handleDrop, children: [
+    /* @__PURE__ */ jsxs("div", { className: "d-flex flex-fill", children: [
+      handle ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Dropzone.File, { multiple, children }),
+        /* @__PURE__ */ jsx(Dropzone.Import, {})
+      ] }),
+      /* @__PURE__ */ jsx(Dropzone.Drag, {})
+    ] }),
+    /* @__PURE__ */ jsx("input", { ref: inputRef, accept: accept == null ? void 0 : accept.join(","), multiple, type: "file", name: "attachment-input", id: "attachment-input", onChange: handleOnChange, hidden: !0 })
+  ] }) });
+};
+Dropzone.File = DropzoneFile;
+Dropzone.Import = DropzoneImport;
+Dropzone.Drag = DropzoneDrag;
+export {
+  Dropzone as default
+};

package/dist/components/Dropzone/DropzoneContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface DropzoneContextType {
     inputRef: React.MutableRefObject<HTMLInputElement | null>;
     files: File[];

package/dist/components/Dropzone/DropzoneFile.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 declare const DropzoneFile: {
-    ({ children }: {
+    ({ children, multiple, }: {
         children: ReactNode;
+        multiple?: boolean;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Dropzone/DropzoneFile.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import SvgIconPlus from "../../modules/icons/components/IconPlus.js";
+import Button from "../Button/Button.js";
+import { useDropzoneContext } from "./DropzoneContext.js";
+const DropzoneFile = ({
+  children,
+  multiple
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    files,
+    inputRef
+  } = useDropzoneContext(), hasFiles = files && files.length > 0, classes = clsx("drop-file-wrapper", {
+    "d-block": hasFiles,
+    "d-none": !hasFiles
+  });
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx("div", { className: "drop-file-content", children: /* @__PURE__ */ jsx("div", { className: "add-button p-4", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsx(SvgIconPlus, {}), disabled: !multiple, onClick: () => {
+      var _a;
+      return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
+    }, children: t("dropzone.add.more") }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "p-8", children })
+  ] });
+};
+export {
+  DropzoneFile as default
+};

package/dist/components/Dropzone/DropzoneImport.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import SvgIconDownload from "../../modules/icons/components/IconDownload.js";
+import Button from "../Button/Button.js";
+import { useDropzoneContext } from "./DropzoneContext.js";
+const DropzoneImport = () => {
+  const {
+    t
+  } = useTranslation(), {
+    files,
+    inputRef
+  } = useDropzoneContext(), hasFiles = files && files.length > 0, classes = clsx("dropzone-import-wrapper", {
+    "d-flex": !hasFiles,
+    "d-none": hasFiles
+  });
+  return /* @__PURE__ */ jsxs("div", { className: classes, children: [
+    /* @__PURE__ */ jsx(SvgIconDownload, { height: 48, width: 48 }),
+    /* @__PURE__ */ jsx("p", { className: "my-16", children: t("dropzone.text") }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => {
+      var _a;
+      return (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
+    }, children: t("dropzone.import") })
+  ] });
+};
+export {
+  DropzoneImport as default
+};

package/dist/components/Dropzone/index.d.ts

@@ -1,2 +1,3 @@
-export { default as Dropzone } from './Dropzone';
 export * from './Dropzone';
+export { default as Dropzone } from './Dropzone';
+export * from './DropzoneContext';