@edifice.io/react 2.2.2 → 2.2.3

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +1,4 @@
+import { Color } from 'src/types/color';
 export type AvatarVariants = 'square' | 'rounded' | 'circle';
 export type AvatarSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface AvatarProps extends React.ComponentPropsWithRef<'img'> {
@@ -26,6 +27,26 @@ export interface AvatarProps extends React.ComponentPropsWithRef<'img'> {
      * Optional class for styling purpose
      */
     className?: string;
+    /**
+     * Inner border color
+     */
+    innerBorderColor?: Color;
+    /**
+     * Inner border width in pixels
+     */
+    innerBorderWidth?: number;
+    /**
+     * Outer border color
+     */
+    outerBorderColor?: Color;
+    /**
+     * Outer border width in pixels
+     */
+    outerBorderWidth?: number;
+    /**
+     * Outer border offset in pixels
+     */
+    outerBorderOffset?: number;
 }
 declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -10,6 +10,11 @@ const Avatar = /* @__PURE__ */ forwardRef(({
   src,
   imgPlaceholder,
   className,
+  innerBorderColor,
+  innerBorderWidth,
+  outerBorderColor,
+  outerBorderWidth,
+  outerBorderOffset,
   ...restProps
 }, ref) => {
   const placeholder = imgPlaceholder || noAvatar, classes = clsx("avatar", {
@@ -25,8 +30,16 @@ const Avatar = /* @__PURE__ */ forwardRef(({
       rounded: variant === "rounded",
       "rounded-circle": variant === "circle"
     }
-  }, className);
-  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: /* @__PURE__ */ jsx(Image, { src: src || placeholder, alt, imgPlaceholder: placeholder, ...restProps }) });
+  }, className), style = {
+    ...outerBorderColor && {
+      outline: `${outerBorderWidth}px solid var(--edifice-${outerBorderColor})`,
+      outlineOffset: outerBorderOffset
+    },
+    ...innerBorderColor && {
+      border: `${innerBorderWidth}px solid var(--edifice-${innerBorderColor})`
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, style, children: /* @__PURE__ */ jsx(Image, { src: src || placeholder, alt, imgPlaceholder: placeholder, ...restProps }) });
 });
 export {
   Avatar as default

package/dist/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,24 @@
+import { AvatarProps } from '../Avatar';
+export interface AvatarGroupProps extends Omit<AvatarProps, 'src'> {
+    /**
+     * List of avatar sources
+     */
+    src: string[];
+    /**
+     * Maximum number of avatars to display
+     * @default 3
+     */
+    maxAvatars?: number;
+    /**
+     * Overlap between avatars (in pixels)
+     * @default 20
+     */
+    overlap?: number;
+    /**
+     * Controls stacking order. When 'rightFirst', rightmost avatar has highest z-index
+     * @default 'leftFirst'
+     */
+    stackingOrder?: 'leftFirst' | 'rightFirst';
+}
+declare const AvatarGroup: import('react').ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default AvatarGroup;

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import StackedGroup from "../StackedGroup/StackedGroup.js";
+import Avatar from "../Avatar/Avatar.js";
+const AvatarGroup = /* @__PURE__ */ forwardRef(({
+  src,
+  maxAvatars = 3,
+  overlap = 20,
+  className,
+  size = "md",
+  variant = "circle",
+  alt,
+  stackingOrder = "leftFirst",
+  ...restProps
+}, ref) => {
+  const visibleAvatars = src.slice(0, maxAvatars), classes = clsx("avatar-group", className);
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, style: {
+    display: "flex"
+  }, children: /* @__PURE__ */ jsx(StackedGroup, { overlap, stackingOrder, children: visibleAvatars.map((avatarSrc, index) => /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, size, variant, alt: `${alt} ${index + 1}`, ...restProps })) }) });
+});
+export {
+  AvatarGroup as default
+};

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

@@ -0,0 +1,2 @@
+export { default as AvatarGroup } from './AvatarGroup';
+export * from './AvatarGroup';

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

@@ -59,8 +59,10 @@ declare const Card: import('react').ForwardRefExoticComponent<CardProps & import
         displayName: string;
     };
     Body: {
-        ({ children, space, flexDirection, }: {
+        ({ children, gap, space, padding, flexDirection, }: {
+            gap?: "0" | "8" | "16" | null;
             space?: "0" | "8" | "16" | null;
+            padding?: "0" | "8" | "16" | null;
             flexDirection?: "row" | "column" | null;
             children: ReactNode;
         }): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Card/CardBody.js

@@ -2,12 +2,14 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 const CardBody = ({
   children,
+  gap = null,
   space = null,
+  padding = null,
   flexDirection = "row"
 }) => {
   const cardbody = clsx("card-body", {
-    [`p-${space}`]: space,
-    [`gap-${space}`]: space,
+    [`p-${padding ?? space}`]: space,
+    [`gap-${gap ?? space}`]: space,
     "align-items-start": flexDirection === "column",
     "flex-column": flexDirection === "column"
   });

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

@@ -14,6 +14,10 @@ export interface DropdownProps {
      * Default placement with FloatingUI
      */
     placement?: Placement;
+    /**
+     * If true, the text will not wrap
+     */
+    noWrap?: boolean;
     /**
      * Extra keydown handler for the Dropdown Trigger.
      * Useful for a11y keyboard navigation between a Dropdown element and other elements,
@@ -53,13 +57,13 @@ export type DropdownMenuOptions = {
     type: 'divider';
 };
 declare const Dropdown: {
-    ({ children, block, overflow, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, block, overflow, noWrap, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Trigger: import('react').ForwardRefExoticComponent<Omit<import('./DropdownTrigger').DropdownTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
     Menu: import('react').ForwardRefExoticComponent<Omit<import('./DropdownMenu').DropdownMenuProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Item: {
-        ({ type, icon, onClick, children, className, ...restProps }: import('./DropdownItem').DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+        ({ type, icon, onClick, children, className, minWidth, ...restProps }: import('./DropdownItem').DropdownItemProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Separator: {

package/dist/components/Dropdown/Dropdown.js

@@ -15,6 +15,7 @@ const Root = ({
   children,
   block,
   overflow = !0,
+  noWrap,
   placement = "bottom-start",
   extraTriggerKeyDownHandler,
   onToggle,
@@ -41,6 +42,7 @@ const Root = ({
     setVisible
   }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible]), dropdown = clsx("dropdown", {
     "w-100": block,
+    "dropdown-nowrap": noWrap,
     overflow
   });
   return useEffect(() => {

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

@@ -21,9 +21,13 @@ export interface DropdownItemProps {
      * Additional class name
      */
     className?: string;
+    /**
+     * Set minimum width in pixels
+     */
+    minWidth?: number;
 }
 declare const DropdownItem: {
-    ({ type, icon, onClick, children, className, ...restProps }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ type, icon, onClick, children, className, minWidth, ...restProps }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DropdownItem;

package/dist/components/Dropdown/DropdownItem.js

@@ -8,6 +8,7 @@ const DropdownItem = ({
   onClick,
   children,
   className,
+  minWidth,
   ...restProps
 }) => {
   const {
@@ -22,8 +23,12 @@ const DropdownItem = ({
     onClick == null || onClick(event), type === "action" && (onMenuItemClick(), event.stopPropagation());
   }, id = useId(), dropdownItem = clsx("dropdown-item", {
     focus: isFocused === id
-  }, className);
-  return /* @__PURE__ */ jsx("div", { id, role: "menuitem", ref: (el) => itemRefs.current[id] = el, tabIndex: isFocused === id ? 0 : -1, className: dropdownItem, "aria-current": isFocused === id, onClick: handleOnClick, onMouseEnter: onMenuItemMouseEnter, onKeyDown: (event) => onMenuItemKeyDown(event, onClick), ...restProps, children: /* @__PURE__ */ jsxs("div", { className: "d-flex gap-8 align-items-center", children: [
+  }, className), style = {
+    ...minWidth && {
+      minWidth: `${minWidth}px`
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { id, role: "menuitem", style, ref: (el) => itemRefs.current[id] = el, tabIndex: isFocused === id ? 0 : -1, className: dropdownItem, "aria-current": isFocused === id, onClick: handleOnClick, onMouseEnter: onMenuItemMouseEnter, onKeyDown: (event) => onMenuItemKeyDown(event, onClick), ...restProps, children: /* @__PURE__ */ jsxs("div", { className: "d-flex gap-8 align-items-center", children: [
     icon,
     children
   ] }) });

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

@@ -1,8 +1,9 @@
+import { Color } from 'src/types';
 export interface DropdownTriggerProps extends React.ComponentPropsWithRef<'button'> {
     /**
      * Dropdown trigger title
      */
-    label?: string;
+    label?: React.ReactNode;
     /**
      * Add an icon in dropdown trigger
      */
@@ -14,7 +15,7 @@ export interface DropdownTriggerProps extends React.ComponentPropsWithRef<'butto
     /**
      * Set appearance
      */
-    variant?: 'ghost';
+    variant?: 'default' | 'ghost' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
     /**
      * Button size
      */
@@ -31,6 +32,34 @@ export interface DropdownTriggerProps extends React.ComponentPropsWithRef<'butto
      * Hide the carret
      */
     hideCarret?: boolean;
+    /**
+     * Make the dropdown trigger a pill
+     */
+    pill?: boolean;
+    /**
+     * Inner border color
+     */
+    innerBorderColor?: Color;
+    /**
+     * Inner border width in pixels
+     */
+    innerBorderWidth?: number;
+    /**
+     * Outer border color
+     */
+    outerBorderColor?: Color;
+    /**
+     * Outer border width in pixels
+     */
+    outerBorderWidth?: number;
+    /**
+     * Outer border offset in pixels
+     */
+    outerBorderOffset?: number;
+    /**
+     * Use base shade color
+     */
+    baseShade?: boolean;
 }
 export type DropdownTriggerType = React.ReactElement<DropdownTriggerProps>;
 declare const DropdownTrigger: import('react').ForwardRefExoticComponent<Omit<DropdownTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Dropdown/DropdownTrigger.js

@@ -6,11 +6,18 @@ import { useDropdownContext } from "./DropdownContext.js";
 const DropdownTrigger = /* @__PURE__ */ forwardRef(({
   label,
   icon,
-  variant,
+  variant = "default",
   disabled = !1,
   size,
   badgeContent,
   hideCarret = !1,
+  pill = !1,
+  innerBorderColor,
+  innerBorderWidth,
+  outerBorderColor,
+  outerBorderWidth,
+  outerBorderOffset,
+  baseShade,
   ...restProps
 }, forwardRef2) => {
   const {
@@ -18,10 +25,23 @@ const DropdownTrigger = /* @__PURE__ */ forwardRef(({
     block
   } = useDropdownContext(), className = clsx("dropdown-toggle ", size, variant, {
     "w-100": block
-  }, triggerProps.className, restProps.className), mergedProps = {
+  }, triggerProps.className, restProps.className, {
+    "rounded-pill": pill
+  }, {
+    "base-shade": baseShade
+  }), style = {
+    ...outerBorderColor && {
+      outline: `${outerBorderWidth}px solid var(--edifice-${outerBorderColor})`,
+      outlineOffset: outerBorderOffset
+    },
+    ...innerBorderColor && {
+      border: `${innerBorderWidth}px solid var(--edifice-${innerBorderColor})`
+    }
+  }, mergedProps = {
     ...triggerProps,
     ...restProps,
-    className
+    className,
+    style
   };
   return /* @__PURE__ */ jsxs("button", { ref: forwardRef2, type: "button", disabled, ...mergedProps, children: [
     icon,

package/dist/components/PreventPropagation/PreventPropagation.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface PreventPropagationProps {
+    /** Children Props */
+    children: ReactNode;
+}
+declare const PreventPropagation: {
+    ({ children }: PreventPropagationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default PreventPropagation;

package/dist/components/PreventPropagation/PreventPropagation.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+const Root = ({
+  children
+}) => /* @__PURE__ */ jsx("div", { onClick: (e) => {
+  e.stopPropagation();
+}, children }), PreventPropagation = /* @__PURE__ */ Object.assign(Root, {});
+export {
+  PreventPropagation as default
+};

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

@@ -0,0 +1,2 @@
+export { default as PreventPropagation } from './PreventPropagation';
+export * from './PreventPropagation';

package/dist/components/StackedGroup/StackedGroup.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface StackedGroupProps {
+    /**
+     * Children to stack
+     */
+    children: ReactNode[];
+    /**
+     * Overlap between items (in pixels)
+     * @default 20
+     */
+    overlap?: number;
+    /**
+     * Controls stacking order. When 'rightFirst', rightmost item has highest z-index
+     * @default 'leftFirst'
+     */
+    stackingOrder?: 'leftFirst' | 'rightFirst';
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+}
+declare const StackedGroup: import('react').ForwardRefExoticComponent<StackedGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default StackedGroup;

package/dist/components/StackedGroup/StackedGroup.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const StackedGroup = /* @__PURE__ */ forwardRef(({
+  children,
+  overlap = 20,
+  className,
+  stackingOrder = "leftFirst"
+}, ref) => {
+  const classes = clsx("stacked-group", className);
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, style: {
+    display: "flex",
+    alignItems: "center"
+  }, children: children.map((child, index) => /* @__PURE__ */ jsx("div", { style: {
+    marginLeft: index === 0 ? 0 : `-${overlap}px`,
+    zIndex: stackingOrder === "rightFirst" ? children.length - index : index + 1
+  }, children: child }, index)) });
+});
+export {
+  StackedGroup as default
+};

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

@@ -0,0 +1 @@
+export { default as StackedGroup } from './StackedGroup';

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,29 @@
+import { InputHTMLAttributes } from 'react';
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * The label of the switch
+     */
+    label?: string;
+    /**
+     * The value of the switch
+     */
+    value?: string;
+    /**
+     * Define if switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Define switch size
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Additional class name for the label
+     */
+    labelClassName?: string;
+    /**
+     * Switch color variant
+     */
+    variant?: 'default' | 'ghost' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+}
+declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Switch;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Switch = /* @__PURE__ */ forwardRef(({
+  className,
+  label,
+  value,
+  disabled,
+  size = "md",
+  variant = "default",
+  labelClassName,
+  ...restProps
+}, ref) => {
+  const switchClass = clsx("switch", {
+    [`switch-${size}`]: size,
+    [`switch-${variant}`]: variant,
+    "switch-disabled": disabled
+  }, className), labelClass = clsx("switch-label", labelClassName);
+  return /* @__PURE__ */ jsxs("label", { className: switchClass, children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", ref, value, disabled, ...restProps }),
+    /* @__PURE__ */ jsx("span", { className: "slider" }),
+    label && /* @__PURE__ */ jsx("span", { className: labelClass, children: label })
+  ] });
+});
+export {
+  Switch as default
+};

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

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch';
+export * from './Switch';

package/dist/components/index.d.ts

@@ -4,6 +4,7 @@ export * from './AppHeader';
 export * from './AppIcon';
 export * from './Attachment';
 export * from './Avatar';
+export * from './AvatarGroup';
 export * from './Badge';
 export * from './Breadcrumb';
 export * from './Button';
@@ -28,9 +29,12 @@ export * from './Logo';
 export * from './Menu';
 export * from './Modal';
 export * from './Popover';
+export * from './PreventPropagation';
 export * from './Radio';
 export * from './SearchBar';
 export * from './Select';
+export * from './StackedGroup';
+export * from './Switch';
 export * from './Table';
 export * from './Tabs';
 export * from './TextArea';

package/dist/editor.js

@@ -7,12 +7,14 @@ import { default as default6 } from "./modules/editor/components/NodeView/Attach
 import { default as default7 } from "./modules/editor/components/NodeView/ImageNodeView.js";
 import { default as default8 } from "./modules/editor/components/NodeView/LinkerNodeView.js";
 import { default as default9 } from "./modules/editor/components/NodeView/VideoNodeView.js";
-import { default as default10 } from "./modules/editor/components/Renderer/AudioRenderer.js";
-import { default as default11 } from "./modules/editor/components/Renderer/AttachmentRenderer.js";
-import { default as default12 } from "./modules/editor/components/Renderer/LinkerRenderer.js";
-import { default as default13 } from "./modules/editor/components/Renderer/MediaRenderer.js";
-import { default as default14 } from "./modules/editor/components/Toolbar/TableToolbar.js";
-import { default as default15 } from "./modules/editor/components/Toolbar/LinkToolbar.js";
+import { default as default10 } from "./modules/editor/components/NodeView/InformationPaneNodeView.js";
+import { default as default11 } from "./modules/editor/components/Renderer/AudioRenderer.js";
+import { default as default12 } from "./modules/editor/components/Renderer/AttachmentRenderer.js";
+import { default as default13 } from "./modules/editor/components/Renderer/LinkerRenderer.js";
+import { default as default14 } from "./modules/editor/components/Renderer/MediaRenderer.js";
+import { default as default15 } from "./modules/editor/components/Renderer/InformationPaneRenderer.js";
+import { default as default16 } from "./modules/editor/components/Toolbar/TableToolbar.js";
+import { default as default17 } from "./modules/editor/components/Toolbar/LinkToolbar.js";
 import { EditorToolbar } from "./modules/editor/components/EditorToolbar/EditorToolbar.js";
 import { useActionOptions } from "./modules/editor/hooks/useActionOptions.js";
 import { useCommentEditor } from "./modules/editor/hooks/useCommentEditor.js";
@@ -28,9 +30,9 @@ import { useSpeechSynthetisis } from "./modules/editor/hooks/useSpeechSynthetisi
 import { useTipTapEditor } from "./modules/editor/hooks/useTipTapEditor.js";
 export {
   default6 as AttachmentNodeView,
-  default11 as AttachmentRenderer,
+  default12 as AttachmentRenderer,
   default5 as AudioNodeView,
-  default10 as AudioRenderer,
+  default11 as AudioRenderer,
   default4 as BubbleMenuEditImage,
   default3 as Editor,
   EditorContent,
@@ -38,12 +40,14 @@ export {
   Editor as EditorInstance,
   EditorToolbar,
   default7 as ImageNodeView,
-  default15 as LinkToolbar,
+  default10 as InformationPaneNodeView,
+  default15 as InformationPaneRenderer,
+  default17 as LinkToolbar,
   default8 as LinkerNodeView,
-  default12 as LinkerRenderer,
-  default13 as MediaRenderer,
+  default13 as LinkerRenderer,
+  default14 as MediaRenderer,
   default2 as StarterKit,
-  default14 as TableToolbar,
+  default16 as TableToolbar,
   default9 as VideoNodeView,
   useActionOptions,
   useCommentEditor,

package/dist/hooks/useConf/useConf.d.ts

@@ -1,4 +1,4 @@
 import { App, IGetConf } from '@edifice.io/client';
 export default function useConf({ appCode }: {
     appCode: App;
-}): import('../../../node_modules/@tanstack/react-query').UseQueryResult<IGetConf, Error>;
+}): import('../../node_modules/@tanstack/react-query').UseQueryResult<IGetConf, Error>;

package/dist/hooks/useSession/useSession.d.ts

@@ -1,2 +1,2 @@
 import { IGetSession } from '@edifice.io/client';
-export default function useSession(): import('../../../node_modules/@tanstack/react-query').UseQueryResult<IGetSession, Error>;
+export default function useSession(): import('../../node_modules/@tanstack/react-query').UseQueryResult<IGetSession, Error>;