@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

package/README.md

@@ -1,4 +1,4 @@
-# Edifice React Components
+# Edifice React Library
 
 ![npm](https://img.shields.io/npm/v/@edifice.io/react?style=flat-square)
 ![bundlephobia](https://img.shields.io/bundlephobia/min/@edifice.io/react?style=flat-square)
@@ -7,104 +7,33 @@
 
 We follow [WAI ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) rules and [Bootstrap 5](https://getbootstrap.com/docs/5.0/components/accordion/) guidelines when making our components
 
-### Build
+### Install
 
-```bash
-pnpm run build
 ```
-
-### Lint
-
-```bash
-pnpm run lint
+pnpm add @edifice.io/react
 ```
 
-If `pnpm run lint` shows issues, run this command to fix them.
+### Modules
 
-```bash
-pnpm run fix
-```
+Optional modules are available as `sub-imports`. You can use them in specific applications:
 
-### Prettier
-
-```bash
-pnpm run format
-```
+#### Audience
 
-## Structure
+Module to track views or reactions on a resource in a specific application (e.g: Blog)
 
-### Component Folder
+#### Editor
 
-- Folder name always in PascalCase: `Button`
-- Component file in PascalCase: `Button.tsx`
-- Export types & interfaces inside Component file
-- Stories file in PascalCase + `*.stories.tsx` : `Button.stories.tsx`
+Rich Text Editor using Tiptap and our `multimedia` module.
 
-```bash
-src
-  -- ComponentFolder
-    -- Component.tsx
-    -- Component.stories.tsx
-    -- index.ts
-```
-
-- Re-export the Component inside his own `index` file: `index.ts`
-- Export everything if Component has types & interfaces
-
-```jsx
-export { default as Component } from './Component';
-export * from './Component';
-```
+#### Modals
 
-### Component Guideline
+- Onboarding Modal to greet user and give him some useful informations about an application.
+- Publish Modal to publish a resource to the BPR application.
+- Resource Modal can be used to create or edit information about a resource
+- Share Modal allows a user to share one of his resource with specific roles to users
 
-- Always document basic guideline of Component with JSDoc format. Used by Storybook to generate documentation.
-
-```jsx
-/**
- * Primary UI component for user interaction
- */
-```
-
-### Interface description
-
-- Always document typescript types and interface with JSDoc syntax. Used by Storybook to generate documentation.
-
-```jsx
-// Interface description (e.g: TreeViewProps.tsx)
-export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: "small" | "medium" | "large";
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-```
-
-### Index file inside `src` folder
-
-- Entry point of this React Library.
-- Import your component inside `index.ts` file.
-
-```jsx
-export * from './Button';
-```
+#### Multimedia
 
-## Dev
+All our multimedia components to use in applications or in modules.
 
-You can build your component using `Storybook`. See [README](../../docs//README.md)
+- Linker, AudioRecorder, VideoRecorder, Iframe, Embed component, ...

package/dist/audience.js

@@ -1,16 +1,17 @@
-import { default as default2 } from "./modules/audience/ViewsCounter.js";
-import { default as default3 } from "./modules/audience/ViewsModal.js";
-import { default as default4 } from "./modules/audience/ReactionSummary.js";
-import { default as default5 } from "./modules/audience/ReactionChoice.js";
-import { default as default6 } from "./modules/audience/ReactionModal.js";
-import { default as default7 } from "./modules/audience/hooks/useReactions.js";
-import { default as default8 } from "./modules/audience/hooks/useReactionIcons.js";
+import { default as a } from "./modules/audience/ViewsCounter.js";
+import { default as r } from "./modules/audience/ViewsModal.js";
+import { default as s } from "./modules/audience/ReactionSummary.js";
+import { default as d } from "./modules/audience/ReactionChoice.js";
+import { default as m } from "./modules/audience/ReactionModal.js";
+import { default as c } from "./modules/audience/hooks/useReactions.js";
+import { default as p } from "./modules/audience/hooks/useReactionIcons.js";
 export {
-  default5 as ReactionChoice,
-  default6 as ReactionModal,
-  default4 as ReactionSummary,
-  default2 as ViewsCounter,
-  default3 as ViewsModal,
-  default8 as useReactionIcons,
-  default7 as useReactions
+  d as ReactionChoice,
+  m as ReactionModal,
+  s as ReactionSummary,
+  a as ViewsCounter,
+  r as ViewsModal,
+  p as useReactionIcons,
+  c as useReactions
 };
+//# sourceMappingURL=audience.js.map

package/dist/audience.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audience.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/ActionBar/ActionBar.js

@@ -1,9 +1,10 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const ActionBar = /* @__PURE__ */ forwardRef(({
-  children
-}, ref) => /* @__PURE__ */ jsx("div", { ref, className: "actionbar", children }));
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+const i = /* @__PURE__ */ t(({
+  children: r
+}, o) => /* @__PURE__ */ a("div", { ref: o, className: "actionbar", children: r }));
 export {
-  ActionBar,
-  ActionBar as default
+  i as ActionBar,
+  i as default
 };
+//# sourceMappingURL=ActionBar.js.map

package/dist/components/ActionBar/ActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.js","sources":["../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react';\n\nexport interface ActionBarProps {\n  /**\n   * Add Buttons To Actions bar\n   */\n  children: React.ReactNode;\n}\n\nexport type ActionBarType = React.FC<ActionBarProps>;\n\nexport const ActionBar = forwardRef(\n  ({ children }: ActionBarProps, ref: Ref<HTMLDivElement>) => {\n    return (\n      <div ref={ref} className=\"actionbar\">\n        {children}\n      </div>\n    );\n  },\n);\n\nActionBar.displayName = 'ActionBar';\nexport default ActionBar;\n"],"names":["ActionBar","children","ref","jsx"],"mappings":";;AAWaA,MAAAA,sBACX,CAAC;AAAA,EAAEC,UAAAA;AAAyB,GAAGC,MAE1B,gBAAAC,EAAA,OAAA,EAAI,KAAAD,GAAU,WAAU,aACtBD,UAAAA,EACH,CAAA,CAGN;"}

package/dist/components/Alert/Alert.js

@@ -1,79 +1,80 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useLayoutEffect, useEffect } from "react";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { Button } from "../Button/Button.js";
-import { Icon } from "../Icon/Icon.js";
-const Alert = /* @__PURE__ */ forwardRef(({
-  type = "success",
-  className = "",
-  children,
-  button,
-  isDismissible = !1,
-  isToast = !1,
-  isConfirm = !1,
-  position = "none",
-  autoClose = !1,
-  autoCloseDelay = 3e3,
-  onClose,
-  onVisibilityChange
-}, ref) => {
-  const [isVisible, setVisibleStatus] = useState(!0), refAlert = useRef(null), {
-    t
-  } = useTranslation(), hide = useCallback(() => {
-    setVisibleStatus(!1), onClose == null || onClose();
-  }, [onClose]);
-  useImperativeHandle(ref, () => ({
-    show,
-    hide,
-    ...refAlert.current
-  })), useLayoutEffect(() => {
-    onVisibilityChange == null || onVisibilityChange(isVisible);
-  }, [isVisible, onVisibilityChange]), useEffect(() => {
-    autoClose && isVisible && setTimeout(() => {
-      hide();
-    }, autoCloseDelay);
-  }, [autoClose, autoCloseDelay, hide, isVisible]);
-  const show = () => {
-    setVisibleStatus(!0);
-  }, mapping = {
+import { jsxs as N, jsx as s } from "react/jsx-runtime";
+import { forwardRef as I, useState as R, useRef as S, useCallback as T, useImperativeHandle as h, useLayoutEffect as B, useEffect as H } from "react";
+import L from "clsx";
+import { useTranslation as X } from "react-i18next";
+import { Button as q } from "../Button/Button.js";
+import { Icon as l } from "../Icon/Icon.js";
+const P = /* @__PURE__ */ I(({
+  type: o = "success",
+  className: M = "",
+  children: w,
+  button: i,
+  isDismissible: f = !1,
+  isToast: x = !1,
+  isConfirm: a = !1,
+  position: b = "none",
+  autoClose: n = !1,
+  autoCloseDelay: m = 3e3,
+  onClose: c,
+  onVisibilityChange: t
+}, k) => {
+  const [e, d] = R(!0), u = S(null), {
+    t: p
+  } = X(), r = T(() => {
+    d(!1), c == null || c();
+  }, [c]);
+  h(k, () => ({
+    show: g,
+    hide: r,
+    ...u.current
+  })), B(() => {
+    t == null || t(e);
+  }, [e, t]), H(() => {
+    n && e && setTimeout(() => {
+      r();
+    }, m);
+  }, [n, m, r, e]);
+  const g = () => {
+    d(!0);
+  }, v = {
     success: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "success-outline" }),
+      icon: /* @__PURE__ */ s(l, { name: "success-outline" }),
       classModifier: "alert-success"
     },
     warning: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "alert-circle" }),
+      icon: /* @__PURE__ */ s(l, { name: "alert-circle" }),
       classModifier: "alert-warning"
     },
     info: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "info-circle" }),
+      icon: /* @__PURE__ */ s(l, { name: "info-circle" }),
       classModifier: "alert-info"
     },
     danger: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "error" }),
+      icon: /* @__PURE__ */ s(l, { name: "error" }),
       classModifier: "alert-danger"
     }
-  }, toastClasses = {
-    "is-dismissible": isDismissible,
-    "is-toast ": isToast
-  }, confirmClasses = {
-    "is-confirm": isConfirm
-  }, divContainerClasses = clsx("alert gap-12", mapping[type].classModifier, toastClasses, confirmClasses, position, className);
-  return /* @__PURE__ */ jsx(Fragment, { children: isVisible ? /* @__PURE__ */ jsxs("div", { ref: refAlert, className: divContainerClasses, role: "alert", children: [
-    !isConfirm && mapping[type].icon,
-    /* @__PURE__ */ jsx("div", { className: "alert-content small", children }),
-    button && /* @__PURE__ */ jsxs("div", { className: "ms-12", children: [
-      button,
+  }, j = {
+    "is-dismissible": f,
+    "is-toast ": x
+  }, A = {
+    "is-confirm": a
+  }, E = L("alert gap-12", v[o].classModifier, j, A, b, M);
+  return e ? /* @__PURE__ */ N("div", { ref: u, className: E, role: "alert", children: [
+    !a && v[o].icon,
+    /* @__PURE__ */ s("div", { className: "alert-content small", children: w }),
+    i && /* @__PURE__ */ N("div", { className: "ms-12", children: [
+      i,
       " ",
-      isConfirm && /* @__PURE__ */ jsx(Button, { onClick: hide, children: t("close") })
+      a && /* @__PURE__ */ s(q, { onClick: r, children: p("close") })
     ] }),
-    (isDismissible || isConfirm) && /* @__PURE__ */ jsx("div", { className: "btn-close-container", children: /* @__PURE__ */ jsx("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert", "aria-label": t("close"), onClick: hide }) }),
-    autoClose && /* @__PURE__ */ jsx("div", { className: "alert-progress", style: {
+    (f || a) && /* @__PURE__ */ s("div", { className: "btn-close-container", children: /* @__PURE__ */ s("button", { type: "button", className: "btn-close", "data-bs-dismiss": "alert", "aria-label": p("close"), onClick: r }) }),
+    n && /* @__PURE__ */ s("div", { className: "alert-progress", style: {
       transform: "scaleX(0)"
     } })
-  ] }) : null });
-}), Alert$1 = Alert;
+  ] }) : null;
+});
 export {
-  Alert,
-  Alert$1 as default
+  P as Alert,
+  P as default
 };
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import {\n  ComponentPropsWithRef,\n  forwardRef,\n  ReactNode,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\n\nimport { Icon } from '..';\nimport { Button } from '../Button';\n\nexport interface AlertRef {\n  show: () => void;\n  hide: () => void;\n}\n\nexport type AlertTypes = 'success' | 'warning' | 'info' | 'danger';\n\nexport type AlertPosition =\n  | 'none'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right';\n\nexport interface AlertProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Type of alert\n   */\n  type?: AlertTypes;\n\n  /**\n   * Alert can be closed with a button ?\n   */\n  isDismissible?: boolean;\n\n  /**\n   * Alert is displayed as Toast\n   */\n  isToast?: boolean;\n\n  /**\n   * Alert is displayed as a confirm box (cancel button and confirm button)\n   */\n  isConfirm?: boolean;\n\n  /**\n   * Alert poistion.\n   */\n  position?: AlertPosition;\n\n  /**\n   * Alert must close after delay\n   */\n  autoClose?: boolean;\n\n  /**\n   * If autoClose if activated, set the delay\n   * Défault : 3000\n   */\n  autoCloseDelay?: number;\n\n  /**\n   * Alert box content\n   */\n  children: ReactNode;\n\n  /**\n   * Alert box action\n   */\n  button?: ReactNode;\n\n  /**\n   * Callback when alert is closed\n   */\n  onClose?: () => void;\n\n  /**\n   * Callback when alert is closed\n   */\n  onVisibilityChange?: (isVisible: boolean) => void;\n\n  /**\n   * Optional class for styling purpose\n   */\n  className?: string;\n}\n\nexport const Alert = forwardRef(\n  (\n    {\n      type = 'success',\n      className = '',\n      children,\n      button,\n      isDismissible = false,\n      isToast = false,\n      isConfirm = false,\n      position = 'none',\n      autoClose = false,\n      autoCloseDelay = 3000,\n      onClose,\n      onVisibilityChange,\n    }: AlertProps,\n    ref: Ref<AlertRef>,\n  ) => {\n    const [isVisible, setVisibleStatus] = useState<boolean>(true);\n\n    // Local ref will be merged with forwardRef in useImperativeHandle below\n    const refAlert = useRef<HTMLDivElement>(null);\n\n    const { t } = useTranslation();\n\n    // Method to hide alert\n    const hide = useCallback(() => {\n      setVisibleStatus(false);\n      // The parent component can execute function when alert is closed\n      onClose?.();\n    }, [onClose]);\n\n    // We add two methods to control the alert from parent component\n    useImperativeHandle(ref, () => ({\n      show,\n      hide,\n      ...(refAlert.current as HTMLDivElement),\n    }));\n\n    // The parent component can get alert visible state\n    useLayoutEffect(() => {\n      onVisibilityChange?.(isVisible);\n    }, [isVisible, onVisibilityChange]);\n\n    useEffect(() => {\n      if (autoClose && isVisible) {\n        setTimeout(() => {\n          hide();\n        }, autoCloseDelay);\n      }\n    }, [autoClose, autoCloseDelay, hide, isVisible]);\n\n    // Method to show alert\n    const show = () => {\n      setVisibleStatus(true);\n    };\n\n    // Here we are mapping alert type with icon Component and bootstrap class\n    // https://getbootstrap.com/docs/5.2/components/alerts/\n    const mapping = {\n      success: {\n        icon: <Icon name=\"success-outline\" />,\n        classModifier: 'alert-success',\n      },\n      warning: {\n        icon: <Icon name=\"alert-circle\" />,\n        classModifier: 'alert-warning',\n      },\n      info: { icon: <Icon name=\"info-circle\" />, classModifier: 'alert-info' },\n      danger: { icon: <Icon name=\"error\" />, classModifier: 'alert-danger' },\n    };\n\n    // Create className Attribute from component parameters\n    const toastClasses = {\n      'is-dismissible': isDismissible,\n      'is-toast ': isToast,\n    };\n    // class for Confirm box style\n    const confirmClasses = {\n      'is-confirm': isConfirm,\n    };\n\n    const divContainerClasses = clsx(\n      'alert gap-12',\n      mapping[type].classModifier,\n      toastClasses,\n      confirmClasses,\n      position,\n      className,\n    );\n\n    return isVisible ? (\n      <div ref={refAlert} className={divContainerClasses} role=\"alert\">\n        {!isConfirm && mapping[type].icon}\n        <div className=\"alert-content small\">{children}</div>\n        {button && (\n          <div className=\"ms-12\">\n            {button} {isConfirm && <Button onClick={hide}>{t('close')}</Button>}\n          </div>\n        )}\n        {(isDismissible || isConfirm) && (\n          <div className=\"btn-close-container\">\n            <button\n              type=\"button\"\n              className=\"btn-close\"\n              data-bs-dismiss=\"alert\"\n              aria-label={t('close')}\n              onClick={hide}\n            ></button>\n          </div>\n        )}\n        {/* Waiting animation library */}\n        {autoClose && (\n          <div\n            className=\"alert-progress\"\n            style={{\n              transform: `scaleX(0)`,\n            }}\n          ></div>\n        )}\n      </div>\n    ) : null;\n  },\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"names":["Alert","type","className","children","button","isDismissible","isToast","isConfirm","position","autoClose","autoCloseDelay","onClose","onVisibilityChange","ref","isVisible","setVisibleStatus","useState","refAlert","useRef","t","useTranslation","hide","useCallback","useImperativeHandle","show","current","useLayoutEffect","useEffect","setTimeout","mapping","success","icon","jsx","Icon","classModifier","warning","info","danger","toastClasses","confirmClasses","divContainerClasses","clsx","jsxs","Button","transform"],"mappings":"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"}

package/dist/components/AppHeader/AppHeader.js

@@ -1,23 +1,24 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-const AppHeader = /* @__PURE__ */ forwardRef(({
-  children,
-  render,
-  isFullscreen = !1,
-  ...restProps
-}, ref) => {
-  const classes = clsx("d-flex flex-wrap p-16 gap-8 border-bottom bg-white", {
-    "justify-content-between": render,
-    "mx-n16": !isFullscreen,
-    "z-3 top-0 start-0 end-0": isFullscreen
+import { jsxs as l, jsx as m } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import p from "clsx";
+const d = /* @__PURE__ */ f(({
+  children: s,
+  render: t,
+  isFullscreen: e = !1,
+  ...a
+}, o) => {
+  const r = p("d-flex flex-wrap p-16 gap-8 border-bottom bg-white", {
+    "justify-content-between": t,
+    "mx-n16": !e,
+    "z-3 top-0 start-0 end-0": e
   });
-  return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...restProps, children: [
-    children,
-    render ? /* @__PURE__ */ jsx("div", { className: "d-flex align-items-center ms-auto gap-8", children: render() }) : null
+  return /* @__PURE__ */ l("div", { ref: o, className: r, ...a, children: [
+    s,
+    t ? /* @__PURE__ */ m("div", { className: "d-flex align-items-center ms-auto gap-8", children: t() }) : null
   ] });
 });
 export {
-  AppHeader,
-  AppHeader as default
+  d as AppHeader,
+  d as default
 };
+//# sourceMappingURL=AppHeader.js.map

package/dist/components/AppHeader/AppHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeader.js","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"sourcesContent":["import { ComponentPropsWithRef, forwardRef, ReactNode, Ref } from 'react';\n\nimport clsx from 'clsx';\n\nexport interface AppHeaderProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Accept Breadcrumb Component\n   */\n  children: ReactNode;\n  /**\n   * Actions\n   */\n  render?: () => JSX.Element | null;\n  /**\n   * When no layout is used\n   */\n  isFullscreen?: boolean;\n}\n\nexport const AppHeader = forwardRef(\n  (\n    { children, render, isFullscreen = false, ...restProps }: AppHeaderProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const classes = clsx('d-flex flex-wrap p-16 gap-8 border-bottom bg-white', {\n      'justify-content-between': render,\n      'mx-n16': !isFullscreen,\n      'z-3 top-0 start-0 end-0': isFullscreen,\n    });\n\n    return (\n      <div ref={ref} className={classes} {...restProps}>\n        {children}\n        {render ? (\n          <div className=\"d-flex align-items-center ms-auto gap-8\">\n            {render()}\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nAppHeader.displayName = 'AppHeader';\n\nexport default AppHeader;\n"],"names":["AppHeader","children","render","isFullscreen","restProps","ref","classes","clsx","jsx"],"mappings":";;;AAmBaA,MAAAA,sBACX,CACE;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,QAAAA;AAAAA,EAAQC,cAAAA,IAAe;AAAA,EAAO,GAAGC;AAA0B,GACvEC,MACG;AACGC,QAAAA,IAAUC,EAAK,sDAAsD;AAAA,IACzE,2BAA2BL;AAAAA,IAC3B,UAAU,CAACC;AAAAA,IACX,2BAA2BA;AAAAA,EAAAA,CAC5B;AAED,2BACG,OAAI,EAAA,KAAAE,GAAU,WAAWC,GAAS,GAAIF,GACpCH,UAAAA;AAAAA,IAAAA;AAAAA,IACAC,IACE,gBAAAM,EAAA,OAAA,EAAI,WAAU,2CACZN,UAAAA,IACH,CAAA,IACE;AAAA,EACN,EAAA,CAAA;AAEJ,CACF;"}

package/dist/components/AppIcon/AppIcon.d.ts

@@ -1,4 +1,4 @@
-import { IWebApp } from 'edifice-ts-client';
+import { IWebApp } from '@edifice.io/ts-client';
 export type AppIconSize = '24' | '32' | '40' | '48' | '80' | '160';
 export interface AppIconBaseProps {
     /**

package/dist/components/AppIcon/AppIcon.js

@@ -1,49 +1,50 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-import { Image } from "../Image/Image.js";
-import useOdeIcons from "../../core/useOdeIcons/useOdeIcons.js";
-import usePaths from "../../core/usePaths/usePaths.js";
-const AppIcon = /* @__PURE__ */ forwardRef(({
-  app,
-  size = "24",
-  iconFit = "contain",
-  variant = "square",
-  className = ""
-}, ref) => {
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import d from "clsx";
+import { Image as j } from "../Image/Image.js";
+import P from "../../core/useOdeIcons/useOdeIcons.js";
+import S from "../../core/usePaths/usePaths.js";
+const O = /* @__PURE__ */ b(({
+  app: o,
+  size: n = "24",
+  iconFit: s = "contain",
+  variant: i = "square",
+  className: r = ""
+}, m) => {
   const {
-    isIconUrl,
-    getIconCode
-  } = useOdeIcons(), [, iconPath] = usePaths(), isSquare = variant === "square", isRounded = variant === "rounded", isCircle = variant === "circle", isContain = iconFit === "contain", isRatio = iconFit === "ratio", iconSizes = {
-    "icon-xs": size === "24",
-    "icon-sm": size === "40",
-    "icon-md": size === "48",
-    "icon-lg": size === "80",
-    "icon-xl": size === "160"
-  }, iconVariant = {
-    square: isSquare,
-    rounded: isRounded,
-    "rounded-circle": isCircle
-  }, iconFits = {
-    "icon-contain": isContain,
-    "icon-ratio": isRatio
-  }, icon = typeof app == "string" ? app : (app == null ? void 0 : app.icon) !== void 0 ? app.icon : "placeholder", displayName = typeof app != "string" && (app == null ? void 0 : app.displayName) !== void 0 ? app.displayName : "", code = app ? getIconCode(app) : "", isIconURL = isIconUrl(icon), appCode = code || "placeholder";
-  if (isIconURL) {
-    const classes2 = clsx("h-full", className);
-    return /* @__PURE__ */ jsx(Image, { src: icon, alt: displayName, objectFit: "contain", width: size, height: size, className: classes2 });
+    isIconUrl: h,
+    getIconCode: a
+  } = P(), [, u] = S(), g = i === "square", f = i === "rounded", x = i === "circle", e = s === "contain", w = s === "ratio", y = {
+    "icon-xs": n === "24",
+    "icon-sm": n === "40",
+    "icon-md": n === "48",
+    "icon-lg": n === "80",
+    "icon-xl": n === "160"
+  }, I = {
+    square: g,
+    rounded: f,
+    "rounded-circle": x
+  }, C = {
+    "icon-contain": e,
+    "icon-ratio": w
+  }, l = typeof o == "string" ? o : (o == null ? void 0 : o.icon) !== void 0 ? o.icon : "placeholder", q = typeof o != "string" && (o == null ? void 0 : o.displayName) !== void 0 ? o.displayName : "", v = o ? a(o) : "", N = h(l), c = v || "placeholder";
+  if (N) {
+    const $ = d("h-full", r);
+    return /* @__PURE__ */ t(j, { src: l, alt: q, objectFit: "contain", width: n, height: n, className: $ });
   }
-  const classes = clsx("app-icon", {
-    ...iconSizes,
-    ...iconVariant,
-    ...iconFits,
-    [`bg-light-${appCode}`]: appCode && !isContain,
-    [`color-app-${appCode}`]: appCode
-  }, className);
-  return /* @__PURE__ */ jsx("div", { className: classes, style: {
-    width: size + "px",
-    height: size + "px"
-  }, children: /* @__PURE__ */ jsx("svg", { ref, width: size, height: size, role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx("use", { xlinkHref: `${iconPath}/apps.svg#${appCode}` }) }) });
+  const R = d("app-icon", {
+    ...y,
+    ...I,
+    ...C,
+    [`bg-light-${c}`]: c && !e,
+    [`color-app-${c}`]: c
+  }, r);
+  return /* @__PURE__ */ t("div", { className: R, style: {
+    width: n + "px",
+    height: n + "px"
+  }, children: /* @__PURE__ */ t("svg", { ref: m, width: n, height: n, role: "img", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ t("use", { xlinkHref: `${u}/apps.svg#${c}` }) }) });
 });
 export {
-  AppIcon
+  O as AppIcon
 };
+//# sourceMappingURL=AppIcon.js.map

package/dist/components/AppIcon/AppIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppIcon.js","sources":["../../../src/components/AppIcon/AppIcon.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react';\n\nimport { IWebApp } from '@edifice.io/ts-client';\nimport clsx from 'clsx';\n\nimport { useOdeIcons, usePaths } from '../../core';\nimport { Image } from '../Image';\n\nexport type AppIconSize = '24' | '32' | '40' | '48' | '80' | '160';\n\nexport interface AppIconBaseProps {\n  /**\n   * Define icon size\n   */\n  size?: AppIconSize;\n  /**\n   * App information to get code and name\n   */\n  app?: IWebApp | string;\n  /**\n   * Custom class name\n   */\n  className?: string;\n}\n\ntype AppVariants = 'square' | 'circle' | 'rounded';\ntype SquareVariant = Extract<AppVariants, 'square'>;\n\ntype SquareIcon = {\n  /**\n   * Show icon full width\n   */\n  iconFit?: 'contain';\n  /**\n   * Square variant\n   */\n  variant?: SquareVariant;\n};\n\ntype VariantsIcon = {\n  /**\n   * Add padding around icon\n   */\n  iconFit: 'ratio';\n  /**\n   * Rounded or Circle variant\n   */\n  variant: AppVariants;\n};\n\nexport type AppIconVariants = SquareIcon | VariantsIcon;\nexport type AppIconProps = AppIconBaseProps & AppIconVariants;\n\n/**\n * Icon Component used to display the icon of an application\n */\nexport const AppIcon = forwardRef(\n  (\n    {\n      app,\n      size = '24',\n      iconFit = 'contain',\n      variant = 'square',\n      className = '',\n    }: AppIconProps,\n    ref: Ref<SVGSVGElement>,\n  ) => {\n    const { isIconUrl, getIconCode } = useOdeIcons();\n    const [, iconPath] = usePaths();\n\n    const isSquare = variant === 'square';\n    const isRounded = variant === 'rounded';\n    const isCircle = variant === 'circle';\n    const isContain = iconFit === 'contain';\n    const isRatio = iconFit === 'ratio';\n\n    const iconSizes = {\n      'icon-xs': size === '24',\n      'icon-sm': size === '40',\n      'icon-md': size === '48',\n      'icon-lg': size === '80',\n      'icon-xl': size === '160',\n    };\n\n    const iconVariant = {\n      square: isSquare,\n      rounded: isRounded,\n      'rounded-circle': isCircle,\n    };\n\n    const iconFits = {\n      'icon-contain': isContain,\n      'icon-ratio': isRatio,\n    };\n\n    const icon =\n      typeof app === 'string'\n        ? app\n        : app?.icon !== undefined\n          ? app.icon\n          : 'placeholder';\n    const displayName =\n      typeof app !== 'string' && app?.displayName !== undefined\n        ? app.displayName\n        : '';\n    const code = app ? getIconCode(app) : '';\n    const isIconURL = isIconUrl(icon);\n\n    const appCode = code || 'placeholder';\n\n    if (isIconURL) {\n      const classes = clsx('h-full', className);\n      return (\n        <Image\n          src={icon}\n          alt={displayName}\n          objectFit=\"contain\"\n          width={size}\n          height={size}\n          className={classes}\n        />\n      );\n    }\n\n    const classes = clsx(\n      'app-icon',\n      {\n        ...iconSizes,\n        ...iconVariant,\n        ...iconFits,\n        [`bg-light-${appCode}`]: appCode && !isContain,\n        [`color-app-${appCode}`]: appCode,\n      },\n      className,\n    );\n\n    return (\n      <div\n        className={classes}\n        style={{ width: size + 'px', height: size + 'px' }}\n      >\n        <svg\n          ref={ref}\n          width={size}\n          height={size}\n          role=\"img\"\n          fill=\"currentColor\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <use xlinkHref={`${iconPath}/apps.svg#${appCode}`} />\n        </svg>\n      </div>\n    );\n  },\n);\n\nAppIcon.displayName = 'AppIcon';\n"],"names":["AppIcon","app","size","iconFit","variant","className","ref","isIconUrl","getIconCode","useOdeIcons","iconPath","usePaths","isSquare","isRounded","isCircle","isContain","isRatio","iconSizes","iconVariant","square","rounded","iconFits","icon","undefined","displayName","code","isIconURL","appCode","classes","clsx","jsx","Image","width","height"],"mappings":";;;;;;AAwDaA,MAAAA,sBACX,CACE;AAAA,EACEC,KAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACPC,SAAAA,IAAU;AAAA,EACVC,SAAAA,IAAU;AAAA,EACVC,WAAAA,IAAY;AACA,GACdC,MACG;AACG,QAAA;AAAA,IAAEC,WAAAA;AAAAA,IAAWC,aAAAA;AAAAA,MAAgBC,EAAY,GACzC,CAAGC,EAAAA,CAAQ,IAAIC,KAEfC,IAAWR,MAAY,UACvBS,IAAYT,MAAY,WACxBU,IAAWV,MAAY,UACvBW,IAAYZ,MAAY,WACxBa,IAAUb,MAAY,SAEtBc,IAAY;AAAA,IAChB,WAAWf,MAAS;AAAA,IACpB,WAAWA,MAAS;AAAA,IACpB,WAAWA,MAAS;AAAA,IACpB,WAAWA,MAAS;AAAA,IACpB,WAAWA,MAAS;AAAA,EAAA,GAGhBgB,IAAc;AAAA,IAClBC,QAAQP;AAAAA,IACRQ,SAASP;AAAAA,IACT,kBAAkBC;AAAAA,EAAAA,GAGdO,IAAW;AAAA,IACf,gBAAgBN;AAAAA,IAChB,cAAcC;AAAAA,EAAAA,GAGVM,IACJ,OAAOrB,KAAQ,WACXA,KACAA,KAAAA,gBAAAA,EAAKqB,UAASC,SACZtB,EAAIqB,OACJ,eACFE,IACJ,OAAOvB,KAAQ,aAAYA,KAAAA,gBAAAA,EAAKuB,iBAAgBD,SAC5CtB,EAAIuB,cACJ,IACAC,IAAOxB,IAAMO,EAAYP,CAAG,IAAI,IAChCyB,IAAYnB,EAAUe,CAAI,GAE1BK,IAAUF,KAAQ;AAExB,MAAIC,GAAW;AACPE,UAAAA,IAAUC,EAAK,UAAUxB,CAAS;AACxC,WACG,gBAAAyB,EAAAC,GAAA,EACC,KAAKT,GACL,KAAKE,GACL,WAAU,WACV,OAAOtB,GACP,QAAQA,GACR,WAAW0B,EACX,CAAA;AAAA,EAEN;AAEMA,QAAAA,IAAUC,EACd,YACA;AAAA,IACE,GAAGZ;AAAAA,IACH,GAAGC;AAAAA,IACH,GAAGG;AAAAA,IACH,CAAC,YAAYM,CAAO,EAAE,GAAGA,KAAW,CAACZ;AAAAA,IACrC,CAAC,aAAaY,CAAO,EAAE,GAAGA;AAAAA,KAE5BtB,CACF;AAEA,SACG,gBAAAyB,EAAA,OAAA,EACC,WAAWF,GACX,OAAO;AAAA,IAAEI,OAAO9B,IAAO;AAAA,IAAM+B,QAAQ/B,IAAO;AAAA,EAAK,GAEjD,UAAC,gBAAA4B,EAAA,OAAA,EACC,KAAAxB,GACA,OAAOJ,GACP,QAAQA,GACR,MAAK,OACL,MAAK,gBACL,OAAM,8BACN,eAAY,QAEZ,UAAA,gBAAA4B,EAAC,OAAI,EAAA,WAAW,GAAGpB,CAAQ,aAAaiB,CAAO,GAAG,CAAA,EACpD,CAAA,EACF,CAAA;AAEJ,CACF;"}

package/dist/components/Attachment/Attachment.js

@@ -1,16 +1,17 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Icon } from "../Icon/Icon.js";
-const Attachment = /* @__PURE__ */ forwardRef(({
-  name = "Attachment Name",
-  options,
-  ...restProps
-}, ref) => /* @__PURE__ */ jsxs("div", { ref, className: "attachment px-12 py-8", ...restProps, children: [
-  /* @__PURE__ */ jsx(Icon, { name: "paperclip", size: "22" }),
-  /* @__PURE__ */ jsx("div", { className: "filename text-truncate", children: name }),
-  options && /* @__PURE__ */ jsx("div", { className: "options ps-12", children: options })
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { Icon as i } from "../Icon/Icon.js";
+const l = /* @__PURE__ */ s(({
+  name: a = "Attachment Name",
+  options: t,
+  ...r
+}, m) => /* @__PURE__ */ c("div", { ref: m, className: "attachment px-12 py-8", ...r, children: [
+  /* @__PURE__ */ e(i, { name: "paperclip", size: "22" }),
+  /* @__PURE__ */ e("div", { className: "filename text-truncate", children: a }),
+  t && /* @__PURE__ */ e("div", { className: "options ps-12", children: t })
 ] }));
 export {
-  Attachment,
-  Attachment as default
+  l as Attachment,
+  l as default
 };
+//# sourceMappingURL=Attachment.js.map

package/dist/components/Attachment/Attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attachment.js","sources":["../../../src/components/Attachment/Attachment.tsx"],"sourcesContent":["import { ComponentPropsWithRef, forwardRef, ReactNode, Ref } from 'react';\nimport { Icon } from '..';\n\nexport interface AttachmentProps extends ComponentPropsWithRef<'div'> {\n  /**\n   * Name of resource or Folder\n   * */\n  name?: string;\n  /**\n   * Actions attachment\n   * */\n  options: ReactNode | undefined;\n}\n\nexport type AttachmentType = AttachmentProps;\n\nexport const Attachment = forwardRef(\n  (\n    { name = 'Attachment Name', options, ...restProps }: AttachmentProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <div ref={ref} className=\"attachment px-12 py-8\" {...restProps}>\n        <Icon name=\"paperclip\" size=\"22\" />\n        <div className=\"filename text-truncate\">{name}</div>\n        {options && <div className=\"options ps-12\">{options}</div>}\n      </div>\n    );\n  },\n);\n\nAttachment.displayName = 'Attachment';\n\nexport default Attachment;\n"],"names":["Attachment","name","options","restProps","ref","jsx","Icon"],"mappings":";;;AAgBaA,MAAAA,sBACX,CACE;AAAA,EAAEC,MAAAA,IAAO;AAAA,EAAmBC,SAAAA;AAAAA,EAAS,GAAGC;AAA2B,GACnEC,wBAGG,OAAI,EAAA,KAAAA,GAAU,WAAU,yBAAwB,GAAID,GACnD,UAAA;AAAA,EAAA,gBAAAE,EAACC,GAAK,EAAA,MAAK,aAAY,MAAK,MAAI;AAAA,EAC/B,gBAAAD,EAAA,OAAA,EAAI,WAAU,0BAA0BJ,UAAKA,GAAA;AAAA,EAC7CC,KAAW,gBAAAG,EAAC,OAAI,EAAA,WAAU,iBAAiBH,UAAQA,GAAA;AACtD,EAAA,CAAA,CAGN;"}

package/dist/components/Avatar/Avatar.js

@@ -1,34 +1,35 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import clsx from "clsx";
-import usePaths from "../../core/usePaths/usePaths.js";
-import { Image } from "../Image/Image.js";
-const Avatar = /* @__PURE__ */ forwardRef(({
-  variant = "square",
-  size = "md",
-  alt,
-  src,
-  imgPlaceholder,
-  className,
-  ...restProps
-}, ref) => {
-  const [imagePath] = usePaths(), placeholder = imgPlaceholder || `${imagePath}/avatar/no-avatar.svg`, classes = clsx("avatar", {
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import v from "clsx";
+import f from "../../core/usePaths/usePaths.js";
+import { Image as p } from "../Image/Image.js";
+const w = /* @__PURE__ */ u(({
+  variant: r = "square",
+  size: a = "md",
+  alt: o,
+  src: e,
+  imgPlaceholder: c,
+  className: d,
+  ...m
+}, i) => {
+  const [l] = f(), s = c || `${l}/avatar/no-avatar.svg`, n = v("avatar", {
     ...{
-      "avatar-xs": size === "xs",
-      "avatar-sm": size === "sm",
-      "avatar-md": size === "md",
-      "avatar-lg": size === "lg",
-      "avatar-xl": size === "xl"
+      "avatar-xs": a === "xs",
+      "avatar-sm": a === "sm",
+      "avatar-md": a === "md",
+      "avatar-lg": a === "lg",
+      "avatar-xl": a === "xl"
     },
     ...{
-      square: variant === "square",
-      rounded: variant === "rounded",
-      "rounded-circle": variant === "circle"
+      square: r === "square",
+      rounded: r === "rounded",
+      "rounded-circle": r === "circle"
     }
-  }, className);
-  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: /* @__PURE__ */ jsx(Image, { src: src || placeholder, alt, imgPlaceholder: placeholder, ...restProps }) });
+  }, d);
+  return /* @__PURE__ */ t("div", { ref: i, className: n, children: /* @__PURE__ */ t(p, { src: e || s, alt: o, imgPlaceholder: s, ...m }) });
 });
 export {
-  Avatar,
-  Avatar as default
+  w as Avatar,
+  w as default
 };
+//# sourceMappingURL=Avatar.js.map