@edifice.io/react 2.2.2-develop-b2school.20250410105023 → 2.2.2-develop-pedago.20250411150037

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/Combobox/Combobox.d.ts

@@ -1,20 +1,13 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent } from 'react';
 export interface ComboboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    onSearchResultsChange: (model: (string | number)[]) => void;
     onSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
     options: OptionListItemType[];
     value: string;
     isLoading: boolean;
     noResult: boolean;
-    onSearchResultsChange?: (model: (string | number)[]) => void;
     searchMinLength?: number;
     placeholder?: string;
-    variant?: 'outline' | 'ghost';
-    renderInputGroup?: ReactNode;
-    renderList?: (items: OptionListItemType[]) => ReactNode;
-    renderListItem?: (item: OptionListItemType) => ReactNode;
-    renderSelectedItems?: ReactNode;
-    renderNoResult?: ReactNode;
-    hasDefault?: boolean;
 }
 export interface OptionListItemType {
     /**
@@ -24,58 +17,15 @@ export interface OptionListItemType {
     /**
      * Label
      */
-    label?: string;
+    label: string;
     /**
      * Add an icon
      */
     icon?: any;
-    /**
-     * Display Separator or not
-     */
-    withSeparator?: boolean;
-    /**
-     * Disable option
-     */
-    disabled?: boolean;
 }
-/**
- * A component that combines an input field with a dropdown list of selectable options.
- *
- * @component
- * @example
- * ```tsx
- * <Combobox
- *   onSearchResultsChange={(values) => console.log(values)}
- *   onSearchInputChange={(e) => console.log(e.target.value)}
- *   options={[{ value: '1', label: 'Option 1' }]}
- *   value=""
- *   isLoading={false}
- *   noResult={false}
- * />
- * ```
- *
- * @param props - The component props
- * @param props.onSearchResultsChange - Callback fired when the selected values change
- * @param props.onSearchInputChange - Callback fired when the search input value changes
- * @param props.options - Array of options to display in the dropdown
- * @param props.value - Current value of the search input
- * @param props.isLoading - Whether the component is in a loading state
- * @param props.noResult - Whether to show a "no results" message
- * @param props.searchMinLength - Minimum number of characters required to trigger search
- * @param props.placeholder - Placeholder text for the input field
- * @param props.variant - Visual variant of the input ('outline' or 'ghost')
- * @param props.renderInputGroup - Custom render function for the input group
- * @param props.renderList - Custom render function for the dropdown list
- * @param props.renderListItem - Custom render function for each option item
- * @param props.renderSelectedItems - Custom render function for selected items
- * @param props.renderNoResult - Custom render function for no results message
- * @param props.hasDefault - Whether to show default options
- *
- * @extends {React.InputHTMLAttributes<HTMLInputElement>}
- */
 declare const Combobox: {
-    ({ onSearchResultsChange, onSearchInputChange, options, value, isLoading, noResult, searchMinLength, placeholder, variant, renderInputGroup, renderList, renderListItem, renderSelectedItems, renderNoResult, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
-    Trigger: ({ placeholder, value, searchMinLength, handleSearchInputChange, renderInputGroup, variant, renderSelectedItems, hasDefault, }: import('./ComboboxTrigger').ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    ({ onSearchResultsChange, onSearchInputChange, options, value, isLoading, noResult, searchMinLength, placeholder, }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ placeholder, value, searchMinLength, handleSearchInputChange, }: import('./ComboboxTrigger').ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Combobox;

package/dist/components/Combobox/Combobox.js

@@ -12,31 +12,25 @@ const Combobox = ({
   isLoading,
   noResult,
   searchMinLength,
-  placeholder,
-  variant = "outline",
-  renderInputGroup,
-  renderList,
-  renderListItem,
-  renderSelectedItems,
-  renderNoResult
+  placeholder
 }) => {
   const {
     t
   } = useTranslation(), [localValue, setLocalValue] = useState([]);
   useEffect(() => {
-    onSearchResultsChange == null || onSearchResultsChange(localValue);
+    onSearchResultsChange(localValue);
   }, [localValue]);
   const handleOptionClick = (value2) => {
     setLocalValue([value2]);
   }, renderContent = () => isLoading ? /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center p-4", children: [
     /* @__PURE__ */ jsx(Loading, { isLoading }),
     /* @__PURE__ */ jsx("span", { className: "ps-4", children: t("explorer.search.pending") })
-  ] }) : noResult ? renderNoResult || /* @__PURE__ */ jsx("div", { className: "p-4", children: t("portal.no.result") }) : renderList ? renderList(options) : options.map((option, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Dropdown.Item, { type: "select", icon: option.icon, onClick: () => handleOptionClick(option.value), disabled: option.disabled, children: renderListItem ? renderListItem(option) : option.label }),
-    (option.withSeparator || option.withSeparator === void 0) && index < options.length - 1 && /* @__PURE__ */ jsx(Dropdown.Separator, {})
+  ] }) : noResult ? /* @__PURE__ */ jsx("div", { className: "p-4", children: t("portal.no.result") }) : options.map((option, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Dropdown.Item, { type: "select", icon: option.icon, onClick: () => handleOptionClick(option.value), children: option.label }),
+    index < options.length - 1 && /* @__PURE__ */ jsx(Dropdown.Separator, {})
   ] }, index));
-  return /* @__PURE__ */ jsxs(Dropdown, { block: !0, focusOnVisible: !1, openOnSpace: !1, children: [
-    /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, value, variant, renderInputGroup, renderSelectedItems, hasDefault: !!options.length }),
+  return /* @__PURE__ */ jsxs(Dropdown, { block: !0, children: [
+    /* @__PURE__ */ jsx(Combobox.Trigger, { placeholder, searchMinLength, handleSearchInputChange: onSearchInputChange, value }),
     /* @__PURE__ */ jsx(Dropdown.Menu, { children: renderContent() })
   ] });
 };

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

@@ -1,37 +1,9 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent } from 'react';
 export interface ComboboxTriggerProps extends React.ComponentPropsWithRef<'button'> {
     handleSearchInputChange: (event: ChangeEvent<HTMLInputElement>) => void;
     value: string;
     searchMinLength?: number;
     placeholder?: string;
-    renderInputGroup?: React.ReactNode;
-    variant?: 'outline' | 'ghost';
-    renderSelectedItems?: ReactNode;
-    hasDefault?: boolean;
 }
-/**
- * A trigger component for the Combobox that handles user input and displays selected items.
- *
- * @component
- * @example
- * ```tsx
- * <ComboboxTrigger
- *   value={searchValue}
- *   handleSearchInputChange={(e) => setSearchValue(e.target.value)}
- *   placeholder="Search..."
- * />
- * ```
- *
- * @param {object} props - Component props
- * @param {string} [props.placeholder] - Placeholder text for the search input
- * @param {string} [props.value=''] - Current value of the search input
- * @param {number} [props.searchMinLength=3] - Minimum number of characters required before showing dropdown
- * @param {(event: ChangeEvent<HTMLInputElement>) => void} props.handleSearchInputChange - Handler for input change events
- * @param {ReactNode} [props.renderInputGroup] - Optional content to render in the input group (e.g., icons)
- * @param {'outline' | 'ghost'} [props.variant='outline'] - Visual variant of the input
- * @param {ReactNode} [props.renderSelectedItems] - Optional content to render selected items
- *
- * @returns {JSX.Element} A form control containing an input field with optional input group and selected items
- */
-declare const ComboboxTrigger: ({ placeholder, value, searchMinLength, handleSearchInputChange, renderInputGroup, variant, renderSelectedItems, hasDefault, }: ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ComboboxTrigger: ({ placeholder, value, searchMinLength, handleSearchInputChange, }: ComboboxTriggerProps) => import("react/jsx-runtime").JSX.Element;
 export default ComboboxTrigger;

package/dist/components/Combobox/ComboboxTrigger.js

@@ -1,6 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import clsx from "clsx";
 import { useDropdownContext } from "../Dropdown/DropdownContext.js";
 import Input from "../Input/Input.js";
 import FormControl from "../Form/FormControl.js";
@@ -8,41 +7,23 @@ const ComboboxTrigger = ({
   placeholder,
   value = "",
   searchMinLength = 3,
-  handleSearchInputChange,
-  renderInputGroup,
-  variant = "outline",
-  renderSelectedItems,
-  hasDefault
+  handleSearchInputChange
 }) => {
   const {
     triggerProps,
     itemProps,
     setVisible
-  } = useDropdownContext(), containerProps = {
+  } = useDropdownContext(), inputProps = {
     ...triggerProps,
-    className: clsx("d-flex combobox-trigger", renderInputGroup ? "input-group flex-nowrap align-items-start" : "flex-wrap align-items-center", triggerProps.className),
-    onClick: (event) => {
-      event.stopPropagation();
-    }
-  }, inputProps = {
     role: "combobox",
-    onChange: (event) => {
-      handleSearchInputChange(event), setVisible(event.target.value.length >= searchMinLength);
+    onClick: () => {
+      value.length >= searchMinLength && setVisible(!0);
     },
-    onClick: (event) => {
-      const input = event.target;
-      setVisible(input.value.length >= searchMinLength || !!hasDefault), input.focus();
-    }
-  }, classNameVariant = variant === "ghost" ? " border-0" : "", classNameInput = clsx(classNameVariant, renderSelectedItems ? "flex-fill w-auto " : "");
+    onChange: handleSearchInputChange
+  };
   return useEffect(() => {
     setVisible(value.length >= searchMinLength);
-  }, [value, searchMinLength]), /* @__PURE__ */ jsxs(FormControl, { id: "search", ...containerProps, children: [
-    !!renderInputGroup && /* @__PURE__ */ jsx("label", { className: "input-group-text pe-0" + classNameVariant, htmlFor: triggerProps.id, children: renderInputGroup }),
-    /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center flex-wrap flex-fill", children: [
-      renderSelectedItems,
-      /* @__PURE__ */ jsx(Input, { ...inputProps, className: classNameInput, noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown })
-    ] })
-  ] });
+  }, [setVisible, value, searchMinLength]), /* @__PURE__ */ jsx(FormControl, { className: "d-flex align-items-center", id: "search", children: /* @__PURE__ */ jsx(Input, { ...inputProps, className: "max-w-512", noValidationIcon: !0, placeholder, size: "md", type: "search", onKeyDown: itemProps.onMenuItemKeyDown }) });
 };
 export {
   ComboboxTrigger as default

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,
@@ -28,14 +32,6 @@ export interface DropdownProps {
      * Whether the trigger is hovered or not.
      */
     isTriggerHovered?: boolean;
-    /**
-     * Whether to focus the first element when the dropdown is opened.
-     */
-    focusOnVisible?: boolean;
-    /**
-     * Whether to open the dropdown on space key press.
-     */
-    openOnSpace?: boolean;
 }
 export type DropdownMenuOptions = {
     /**
@@ -61,13 +57,13 @@ export type DropdownMenuOptions = {
     type: 'divider';
 };
 declare const Dropdown: {
-    ({ children, block, overflow, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, focusOnVisible, openOnSpace, }: 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, disabled, ...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

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo, useEffect } from "react";
 import clsx from "clsx";
-import useDropdown from "../../hooks/useDropdown/useDropdown.js";
 import DropdownCheckboxItem from "./DropdownCheckboxItem.js";
 import { DropdownContext } from "./DropdownContext.js";
 import DropdownItem from "./DropdownItem.js";
@@ -10,17 +9,17 @@ 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,
+  noWrap,
   placement = "bottom-start",
   extraTriggerKeyDownHandler,
   onToggle,
-  isTriggerHovered = !1,
-  focusOnVisible = !0,
-  openOnSpace = !0
+  isTriggerHovered = !1
 }) => {
   const {
     visible,
@@ -30,7 +29,7 @@ const Root = ({
     itemProps,
     itemRefs,
     setVisible
-  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace), ref = useClickOutside(() => {
+  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered), ref = useClickOutside(() => {
     setVisible(!1);
   }), value = useMemo(() => ({
     visible,
@@ -43,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

@@ -22,12 +22,12 @@ export interface DropdownItemProps {
      */
     className?: string;
     /**
-     * Disabled status
+     * Set minimum width in pixels
      */
-    disabled?: boolean;
+    minWidth?: number;
 }
 declare const DropdownItem: {
-    ({ type, icon, onClick, children, className, disabled, ...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,7 +8,7 @@ const DropdownItem = ({
   onClick,
   children,
   className,
-  disabled,
+  minWidth,
   ...restProps
 }) => {
   const {
@@ -20,13 +20,15 @@ const DropdownItem = ({
     onMenuItemMouseEnter,
     onMenuItemClick
   } = itemProps, handleOnClick = (event) => {
-    disabled || (onClick == null || onClick(event), type === "action" && (onMenuItemClick(), event.stopPropagation()));
+    onClick == null || onClick(event), type === "action" && (onMenuItemClick(), event.stopPropagation());
   }, id = useId(), dropdownItem = clsx("dropdown-item", {
     focus: isFocused === id
-  }, {
-    "text-gray-600": disabled
-  }, 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

@@ -3,15 +3,21 @@ import { forwardRef } from "react";
 import clsx from "clsx";
 import SvgIconRafterUp from "../../modules/icons/components/IconRafterUp.js";
 import { useDropdownContext } from "./DropdownContext.js";
-import Badge from "../Badge/Badge.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 {
@@ -19,18 +25,28 @@ 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,
     label,
-    badgeContent ? /* @__PURE__ */ jsx(Badge, { variant: {
-      level: "info",
-      type: "notification"
-    }, children: badgeContent }) : !hideCarret && /* @__PURE__ */ jsx(SvgIconRafterUp, { width: 16, height: 16, className: "dropdown-toggle-caret" })
+    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 {

package/dist/components/Flex/Flex.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface FlexProps extends React.HTMLAttributes<HTMLElement> {
+    as?: React.ElementType;
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse' | 'fill';
+    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    gap?: string;
+    wrap?: 'wrap' | 'nowrap' | 'reverse';
+    className?: string;
+}
+declare const Flex: React.FC<FlexProps>;
+export default Flex;