@edifice.io/react 2.3.2 → 2.4.0

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { Color } from 'src/types/color';
 export type AvatarVariants = 'square' | 'rounded' | 'circle';
 export type AvatarSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -47,6 +48,10 @@ export interface AvatarProps extends React.ComponentPropsWithRef<'img'> {
      * Outer border offset in pixels
      */
     outerBorderOffset?: number;
+    /**
+     * Cover content for the avatar
+     */
+    cover?: ReactNode;
 }
 declare const Avatar: import('react').ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import clsx from "clsx";
 import noAvatar from "@edifice.io/bootstrap/dist/images/avatar/no-avatar.svg";
@@ -15,6 +15,7 @@ const Avatar = /* @__PURE__ */ forwardRef(({
   outerBorderColor,
   outerBorderWidth,
   outerBorderOffset,
+  cover,
   ...restProps
 }, ref) => {
   const placeholder = imgPlaceholder || noAvatar, classes = clsx("avatar", {
@@ -30,6 +31,8 @@ const Avatar = /* @__PURE__ */ forwardRef(({
       rounded: variant === "rounded",
       "rounded-circle": variant === "circle"
     }
+  }, {
+    "avatar-with-cover": cover
   }, className), style = {
     ...outerBorderColor && {
       outline: `${outerBorderWidth}px solid var(--edifice-${outerBorderColor})`,
@@ -39,7 +42,10 @@ const Avatar = /* @__PURE__ */ forwardRef(({
       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 }) });
+  return /* @__PURE__ */ jsxs("div", { ref, className: classes, style, children: [
+    /* @__PURE__ */ jsx(Image, { src: src || placeholder, alt, imgPlaceholder: placeholder, ...restProps }),
+    cover && /* @__PURE__ */ jsx("div", { className: "avatar-cover", children: cover })
+  ] });
 });
 export {
   Avatar as default

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

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { AvatarProps } from '../Avatar';
 export interface AvatarGroupProps extends Omit<AvatarProps, 'src'> {
     /**
@@ -19,6 +20,15 @@ export interface AvatarGroupProps extends Omit<AvatarProps, 'src'> {
      * @default 'leftFirst'
      */
     stackingOrder?: 'leftFirst' | 'rightFirst';
+    /**
+     * Whether to wrap avatars to the next line
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Cover content for the last avatar
+     */
+    lastItemCover?: ReactNode;
 }
 declare const AvatarGroup: import('react').ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default AvatarGroup;

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import StackedGroup from "../StackedGroup/StackedGroup.js";
 import Avatar from "../Avatar/Avatar.js";
 const AvatarGroup = /* @__PURE__ */ forwardRef(({
@@ -12,12 +12,12 @@ const AvatarGroup = /* @__PURE__ */ forwardRef(({
   variant = "circle",
   alt,
   stackingOrder = "leftFirst",
+  wrap = !1,
+  lastItemCover,
   ...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 })) }) });
+  const visibleAvatars = src.slice(0, maxAvatars), classes = clsx("avatar-group d-flex", className);
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, children: /* @__PURE__ */ jsx(StackedGroup, { overlap, stackingOrder, wrap, children: visibleAvatars.map((avatarSrc, index) => /* @__PURE__ */ jsx(Avatar, { src: avatarSrc, size, variant, alt: `${alt} ${index + 1}`, cover: index === maxAvatars - 1 ? lastItemCover : void 0, ...restProps }, index)) }) });
 });
 export {
   AvatarGroup as default

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

@@ -1,6 +1,15 @@
 import { ReactNode } from 'react';
 import { Placement } from '@floating-ui/react';
 import { default as DropdownCheckboxItem } from './DropdownCheckboxItem';
+export interface DropdownApi {
+    visible: boolean;
+    isFocused: string | null;
+    menuRef: React.MutableRefObject<HTMLUListElement | null>;
+    triggerRef: React.MutableRefObject<HTMLButtonElement | null>;
+    setVisible: (visible: boolean) => void;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+}
 export interface DropdownProps {
     /** Children Props */
     children: ReactNode | ((...props: any) => ReactNode);
@@ -68,10 +77,7 @@ export type DropdownMenuOptions = {
      */
     type: 'divider';
 };
-declare const Dropdown: {
-    ({ children, block, overflow, noWrap, placement, extraTriggerKeyDownHandler, onToggle, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-} & {
+declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<DropdownApi>> & {
     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: {

package/dist/components/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo, useEffect } from "react";
+import { forwardRef, useImperativeHandle, useMemo, useEffect } from "react";
 import clsx from "clsx";
 import useDropdown from "../../hooks/useDropdown/useDropdown.js";
 import DropdownCheckboxItem from "./DropdownCheckboxItem.js";
@@ -11,7 +11,7 @@ import DropdownRadioItem from "./DropdownRadioItem.js";
 import DropdownSeparator from "./DropdownSeparator.js";
 import DropdownTrigger from "./DropdownTrigger.js";
 import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
-const Root = ({
+const Root = /* @__PURE__ */ forwardRef(({
   children,
   block,
   overflow = !0,
@@ -23,7 +23,7 @@ const Root = ({
   focusOnVisible = !0,
   openOnSpace = !0,
   focusOnMouseEnter = !0
-}) => {
+}, refDropdown) => {
   const {
     visible,
     isFocused,
@@ -31,8 +31,22 @@ const Root = ({
     menuProps,
     itemProps,
     itemRefs,
-    setVisible
-  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter), ref = useClickOutside(() => {
+    setVisible,
+    menuRef,
+    triggerRef,
+    closeDropdown,
+    openDropdown
+  } = useDropdown(placement, extraTriggerKeyDownHandler, isTriggerHovered, focusOnVisible, openOnSpace, focusOnMouseEnter);
+  useImperativeHandle(refDropdown, () => ({
+    visible,
+    setVisible,
+    isFocused,
+    menuRef,
+    triggerRef,
+    closeDropdown,
+    openDropdown
+  }));
+  const ref = useClickOutside(() => {
     setVisible(!1);
   }), value = useMemo(() => ({
     visible,
@@ -42,8 +56,10 @@ const Root = ({
     itemProps,
     itemRefs,
     block,
-    setVisible
-  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible]), dropdown = clsx("dropdown", {
+    setVisible,
+    openDropdown,
+    closeDropdown
+  }), [visible, isFocused, triggerProps, menuProps, itemProps, itemRefs, block, setVisible, openDropdown, closeDropdown]), dropdown = clsx("dropdown", {
     "w-100": block,
     "dropdown-nowrap": noWrap,
     overflow
@@ -51,7 +67,7 @@ const Root = ({
   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, {
+}), Dropdown = /* @__PURE__ */ Object.assign(Root, {
   Trigger: DropdownTrigger,
   Menu: DropdownMenu,
   Item: DropdownItem,

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

@@ -5,8 +5,9 @@ interface FlexProps extends React.HTMLAttributes<HTMLElement> {
     align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
     justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
     gap?: string;
+    fill?: boolean;
     wrap?: 'wrap' | 'nowrap' | 'reverse';
     className?: string;
 }
-declare const Flex: React.FC<FlexProps>;
+declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLElement>>;
 export default Flex;

package/dist/components/Flex/Flex.js

@@ -1,19 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-const Flex = ({
+import { forwardRef } from "react";
+const Flex = /* @__PURE__ */ forwardRef(({
   as: Component = "div",
   direction,
   align,
   justify,
   gap,
-  wrap = "wrap",
+  fill,
+  wrap,
   className,
   children,
   ...restProps
-}) => {
-  const classes = clsx("d-flex", direction && (direction === "fill" ? "flex-fill" : `flex-${direction}`), align && `align-items-${align}`, justify && `justify-content-${justify}`, gap && `gap-${gap}`, wrap && `flex-${wrap}`, className);
-  return /* @__PURE__ */ jsx(Component, { className: classes, ...restProps, children });
-};
+}, ref) => {
+  const classes = clsx("d-flex", direction && `flex-${direction}`, fill && "flex-fill", align && `align-items-${align}`, justify && `justify-content-${justify}`, gap && `gap-${gap}`, wrap && `flex-${wrap}`, className);
+  return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...restProps, children });
+});
 export {
   Flex as default
 };

package/dist/components/Layout/Layout.d.ts

@@ -4,9 +4,13 @@ export interface LayoutProps extends ComponentPropsWithoutRef<any> {
     children: ReactNode;
     /** Full screen mode without header component  */
     headless?: boolean;
+    /** Control white background - defaults to true */
+    whiteBg?: boolean;
+    /** Additional class name */
+    className?: string;
 }
 export declare const Layout: {
-    ({ children, headless, ...restProps }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, headless, whiteBg, className, ...restProps }: LayoutProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Layout;

package/dist/components/Layout/Layout.js

@@ -12,6 +12,8 @@ import Button from "../Button/Button.js";
 const Layout = ({
   children,
   headless = !1,
+  whiteBg = !0,
+  className,
   ...restProps
 }) => {
   const {
@@ -24,11 +26,12 @@ const Layout = ({
     handleCloseCookiesConsent
   } = useCookiesConsent();
   useZendeskGuide(), useCantoo();
-  const classes = clsx("d-flex flex-column bg-white", {
+  const classes = clsx("d-flex flex-column", {
+    "bg-white": whiteBg,
     "container-fluid": !headless,
     "rounded-4 border": (theme == null ? void 0 : theme.is1d) && !headless,
     "mt-24": (theme == null ? void 0 : theme.is1d) && !headless
-  }), renderHeader = headless ? null : /* @__PURE__ */ jsx(Header, { is1d: theme == null ? void 0 : theme.is1d, src: theme == null ? void 0 : theme.basePath }), renderCookies = showCookiesConsent && /* @__PURE__ */ jsx(Alert, { type: "info", className: "m-12 rgpd", isConfirm: !0, position: "bottom-right", button: /* @__PURE__ */ jsx(Button, { color: "tertiary", variant: "ghost", onClick: handleConsultCookies, children: t("rgpd.cookies.banner.button.consult") }), onClose: handleCloseCookiesConsent, children: t("rgpd.cookies.banner.text1") }), renderToaster = /* @__PURE__ */ jsx(Toaster, { containerClassName: "toaster-container", toastOptions: {
+  }, className), renderHeader = headless ? null : /* @__PURE__ */ jsx(Header, { is1d: theme == null ? void 0 : theme.is1d, src: theme == null ? void 0 : theme.basePath }), renderCookies = showCookiesConsent && /* @__PURE__ */ jsx(Alert, { type: "info", className: "m-12 rgpd", isConfirm: !0, position: "bottom-right", button: /* @__PURE__ */ jsx(Button, { color: "tertiary", variant: "ghost", onClick: handleConsultCookies, children: t("rgpd.cookies.banner.button.consult") }), onClose: handleCloseCookiesConsent, children: t("rgpd.cookies.banner.text1") }), renderToaster = /* @__PURE__ */ jsx(Toaster, { containerClassName: "toaster-container", toastOptions: {
     position: "top-right"
   } });
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/Layout/components/Header.js

@@ -70,8 +70,7 @@ const Header = ({
     conversationWorflow,
     searchWorkflow,
     isCollapsed,
-    toggleCollapsedNav,
-    handleLogout
+    toggleCollapsedNav
   } = useHeader({
     user,
     avatar
@@ -104,7 +103,7 @@ const Header = ({
           ] }),
           /* @__PURE__ */ jsx(Help, { isHelpOpen, setIsHelpOpen, parsedContent, parsedHeadline, error })
         ] }) : null,
-        /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs("button", { className: "nav-link", onClick: handleLogout, children: [
+        /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs("a", { href: "/auth/logout?callback=" + ((theme == null ? void 0 : theme.logoutCallback) ?? ""), className: "nav-link", children: [
           /* @__PURE__ */ jsx(SvgIconDisconnect, { className: "icon logout" }),
           /* @__PURE__ */ jsx(VisuallyHidden, { children: t("navbar.disconnect") })
         ] }) }),
@@ -176,7 +175,7 @@ const Header = ({
             /* @__PURE__ */ jsx("span", { className: "nav-text", children: t("navbar.myaccount") })
           ] }) }),
           /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsx("hr", { className: "dropdown-divider" }) }),
-          /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs("a", { href: "/auth/logout?callback=" + ((theme == null ? void 0 : theme.logoutCallback) ?? "/"), className: "nav-link dropdown-item", children: [
+          /* @__PURE__ */ jsx(NavItem, { children: /* @__PURE__ */ jsxs("a", { href: "/auth/logout?callback=" + ((theme == null ? void 0 : theme.logoutCallback) ?? ""), className: "nav-link dropdown-item", children: [
             /* @__PURE__ */ jsx(SvgIconDisconnect, { className: "icon logout" }),
             /* @__PURE__ */ jsx("span", { id: "logout-label", className: "nav-text", children: t("navbar.disconnect") })
           ] }) })

package/dist/components/Layout/components/WidgetApps.js

@@ -14,7 +14,7 @@ const WidgetAppsFooter = () => {
   } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: "widget-body d-flex flex-wrap", children: [
     !bookmarkedApps.length && /* @__PURE__ */ jsx("div", { className: "text-dark", children: t("navbar.myapps.more") }),
-    bookmarkedApps.slice(0, 6).map((app, index) => /* @__PURE__ */ jsx("a", { href: app.address, className: "bookmarked-app", children: /* @__PURE__ */ jsx(AppIcon, { app, size: "32" }) }, index))
+    bookmarkedApps.slice(0, 6).map((app, index) => /* @__PURE__ */ jsx("a", { href: app.address, className: "bookmarked-app", target: app.isExternal || app.category === "connector" ? "_blank" : void 0, children: /* @__PURE__ */ jsx(AppIcon, { app, size: "32" }) }, index))
   ] });
 };
 export {

package/dist/components/Layout/hooks/useHeader.js

@@ -1,9 +1,7 @@
 import { useState, useId, useCallback, useMemo } from "react";
-import { odeServices } from "@edifice.io/client";
 import { useHover } from "@uidotdev/usehooks";
 import { useTranslation } from "react-i18next";
 import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
-import { useEdificeTheme } from "../../../providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
 import useBookmark from "../../../hooks/useBookmark/useBookmark.js";
 import useHasWorkflow from "../../../hooks/useHasWorkflow/useHasWorkflow.js";
 function useHeader({
@@ -14,15 +12,11 @@ function useHeader({
     appCode
   } = useEdificeClient(), {
     t
-  } = useTranslation(), {
-    theme
-  } = useEdificeTheme(), title = t(appCode), [isCollapsed, setIsCollapsed] = useState(!0), [appsRef, isAppsHovered] = useHover(), popoverAppsId = useId(), popoverSearchId = useId(), userAvatar = avatar, userName = user == null ? void 0 : user.username, welcomeUser = t("welcome", {
+  } = useTranslation(), title = t(appCode), [isCollapsed, setIsCollapsed] = useState(!0), [appsRef, isAppsHovered] = useHover(), popoverAppsId = useId(), popoverSearchId = useId(), userAvatar = avatar, userName = user == null ? void 0 : user.username, welcomeUser = t("welcome", {
     username: user == null ? void 0 : user.firstName
   }), bookmarkedApps = useBookmark(), communityWorkflow = useHasWorkflow("net.atos.entng.community.controllers.CommunityController|view"), conversationWorflow = useHasWorkflow("org.entcore.conversation.controllers.ConversationController|view"), searchWorkflow = useHasWorkflow("fr.openent.searchengine.controllers.SearchEngineController|view"), toggleCollapsedNav = useCallback(() => {
     setIsCollapsed(!isCollapsed);
-  }, [isCollapsed]), handleLogout = async () => {
-    await odeServices.session().logout(), window.location.href = (theme == null ? void 0 : theme.logoutCallback) ?? "/auth/login";
-  };
+  }, [isCollapsed]);
   return useMemo(() => ({
     title,
     bookmarkedApps,
@@ -37,9 +31,8 @@ function useHeader({
     conversationWorflow,
     searchWorkflow,
     isCollapsed,
-    toggleCollapsedNav,
-    handleLogout
-  }), [appsRef, bookmarkedApps, communityWorkflow, conversationWorflow, handleLogout, isAppsHovered, isCollapsed, popoverAppsId, popoverSearchId, searchWorkflow, title, toggleCollapsedNav, userAvatar, userName, welcomeUser]);
+    toggleCollapsedNav
+  }), [appsRef, bookmarkedApps, communityWorkflow, conversationWorflow, isAppsHovered, isCollapsed, popoverAppsId, popoverSearchId, searchWorkflow, title, toggleCollapsedNav, userAvatar, userName, welcomeUser]);
 }
 export {
   useHeader as default

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,37 @@
+import { ChangeEvent } from 'react';
+export interface RadioCardProps {
+    /**
+     * The currently selected value in the radio group.
+     */
+    selectedValue: string;
+    /**
+     * The value associated with this specific radio card.
+     */
+    value: string;
+    /**
+     * The main label text for the radio card.
+     */
+    label: string;
+    /**
+     * Callback function triggered when the radio card selection changes.
+     */
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Optional additional CSS class names to apply to the radio card.
+     */
+    className?: string;
+    /**
+     * Optional description text displayed below the label.
+     */
+    description?: string;
+    /**
+     * Optional model value associated with the radio card, can be a string, boolean, or number.
+     */
+    model?: string | boolean | number;
+    /**
+     * Optional name for the radio group, used to group radio cards together.
+     */
+    groupName?: string;
+}
+declare const RadioCard: import('react').ForwardRefExoticComponent<RadioCardProps & import('react').RefAttributes<HTMLLabelElement>>;
+export default RadioCard;

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

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

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

@@ -18,6 +18,11 @@ export interface StackedGroupProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Whether to wrap items to the next line
+     * @default false
+     */
+    wrap?: boolean;
 }
 declare const StackedGroup: import('react').ForwardRefExoticComponent<StackedGroupProps & import('react').RefAttributes<HTMLDivElement>>;
 export default StackedGroup;

package/dist/components/StackedGroup/StackedGroup.js

@@ -1,18 +1,20 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 const StackedGroup = /* @__PURE__ */ forwardRef(({
   children,
   overlap = 20,
   className,
-  stackingOrder = "leftFirst"
+  stackingOrder = "leftFirst",
+  wrap = !1
 }, 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`,
+  const classes = clsx("stacked-group d-flex align-items-center", className, {
+    "flex-wrap": wrap
+  });
+  return /* @__PURE__ */ jsx("div", { ref, className: classes, style: wrap ? {
+    paddingLeft: `${overlap}px`
+  } : void 0, children: children.map((child, index) => /* @__PURE__ */ jsx("div", { style: {
+    marginLeft: index === 0 && !wrap ? 0 : `-${overlap}px`,
     zIndex: stackingOrder === "rightFirst" ? children.length - index : index + 1
   }, children: child }, index)) });
 });

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,18 @@
+export type StepperColors = 'primary' | 'secondary';
+export interface StepperProps {
+    /**
+     * Index of the currently active step in the Stepper.
+     */
+    currentStep: number;
+    /**
+     * Number of steps in the Stepper.
+     */
+    nbSteps: number;
+    /**
+     * Gap between steps in the Stepper.
+     */
+    gap?: '4' | '8' | '12' | '16' | '24' | '32';
+    color?: StepperColors;
+}
+declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Flex from "../Flex/Flex.js";
+const Stepper = /* @__PURE__ */ forwardRef(({
+  currentStep,
+  nbSteps,
+  gap = "8",
+  color = "secondary",
+  ...props
+}, ref) => /* @__PURE__ */ jsx(Flex, { gap, ref, ...props, children: Array.from({
+  length: nbSteps
+}).map((_, index) => /* @__PURE__ */ jsx("div", { className: `rounded step ${index === currentStep ? `bg-${color} step-active` : `bg-${color}-300`}` }, `step-${index}`)) }));
+export {
+  Stepper as default
+};

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

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

package/dist/components/Tabs/components/Tabs.d.ts

@@ -17,12 +17,36 @@ export interface TabsProps {
      * Children Props
      */
     children?: (...props: any) => ReactNode;
+    /**
+     * Whether tabs should take full available width
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether tabs should take full available height
+     */
+    fullHeight?: boolean;
+    /**
+     * Whether the tab list should be sticky
+     */
+    isSticky?: boolean;
+    /**
+     * The top offset for the sticky tab list
+     */
+    stickyTop?: number;
+    /**
+     * Additional class name for the tab header
+     */
+    headerClassName?: string;
+    /**
+     * Additional class name for the content area
+     */
+    contentClassName?: string;
 }
 /**
  * Tab Content displayed one at a time when a Tab Item is selected
  */
 export declare const Tabs: {
-    ({ defaultId, items, onChange, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    ({ defaultId, items, fullWidth, fullHeight, onChange, children, isSticky, stickyTop, headerClassName, contentClassName, }: TabsProps): import("react/jsx-runtime").JSX.Element;
     Item: {
         ({ icon, badge, label, id, order, }: TabsItemProps & {
             order: number;
@@ -30,11 +54,11 @@ export declare const Tabs: {
         displayName: string;
     };
     Panel: {
-        ({ children, currentItem }: import('./TabsPanel').TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+        ({ children, currentItem, fullHeight, className, }: import('./TabsPanel').TabsPanelProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     List: {
-        (props: import('react').ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+        (props: import('./TabsList').TabsListProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     displayName: string;

package/dist/components/Tabs/components/Tabs.js

@@ -8,8 +8,14 @@ import TabsPanel from "./TabsPanel.js";
 const Tabs = ({
   defaultId,
   items,
+  fullWidth = !1,
+  fullHeight = !1,
   onChange,
-  children
+  children,
+  isSticky = !1,
+  stickyTop = 0,
+  headerClassName,
+  contentClassName
 }) => {
   const {
     activeTab,
@@ -32,8 +38,8 @@ const Tabs = ({
     onKeyDown
   }), [activeTab, items, onKeyDown, setSelectedTab, tabUnderlineLeft, tabUnderlineWidth, tabsRef]), currentItem = items.find((item) => item.id === activeTab);
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children: typeof children == "function" ? children(currentItem) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tabs.List, {}),
-    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, children: currentItem == null ? void 0 : currentItem.content })
+    /* @__PURE__ */ jsx(Tabs.List, { fullWidth, isSticky, stickyTop, className: headerClassName }),
+    /* @__PURE__ */ jsx(Tabs.Panel, { currentItem, fullHeight, className: contentClassName, children: currentItem == null ? void 0 : currentItem.content })
   ] }) });
 };
 Tabs.Item = TabsItem;

package/dist/components/Tabs/components/TabsList.d.ts

@@ -1,6 +1,20 @@
 import { ComponentPropsWithoutRef } from 'react';
+export interface TabsListProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether tabs should take full available width
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the tab list should be sticky
+     */
+    isSticky?: boolean;
+    /**
+     * The top offset for the sticky tab list
+     */
+    stickyTop?: number;
+}
 declare const TabsList: {
-    (props: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+    (props: TabsListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default TabsList;

package/dist/components/Tabs/components/TabsList.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useTabsContext } from "../context/TabsContext.js";
 import { Tabs } from "./Tabs.js";
@@ -9,15 +9,25 @@ const TabsList = (props) => {
     tabUnderlineWidth
   } = useTabsContext(), {
     className,
+    fullWidth,
+    isSticky,
+    stickyTop,
     ...restProps
-  } = props, tabslist = clsx("position-relative flex-shrink-0 overflow-x-auto", className);
-  return /* @__PURE__ */ jsxs("div", { className: tabslist, ...restProps, children: [
-    /* @__PURE__ */ jsx("ul", { className: "nav nav-tabs flex-nowrap", role: "tablist", children: items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)) }),
+  } = props, ulClasses = clsx("nav nav-tabs flex-nowrap", {
+    "w-100": fullWidth
+  }), tabslist = clsx(" flex-shrink-0 overflow-x-auto", {
+    "position-sticky z-1": isSticky,
+    "position-relative": !isSticky
+  }, className);
+  return /* @__PURE__ */ jsx("div", { className: tabslist, ...restProps, style: isSticky ? {
+    top: stickyTop
+  } : void 0, children: /* @__PURE__ */ jsxs("ul", { className: ulClasses, role: "tablist", children: [
+    items.map((item, order) => /* @__PURE__ */ jsx(Tabs.Item, { order, ...item }, item.id)),
     /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
       left: tabUnderlineLeft,
       width: tabUnderlineWidth
     } })
-  ] });
+  ] }) });
 };
 export {
   TabsList as default

package/dist/components/Tabs/components/TabsPanel.d.ts

@@ -9,9 +9,17 @@ export interface TabsPanelProps {
      * Current Item
      */
     currentItem: TabsItemProps | undefined;
+    /**
+     * Whether tabs should take full available height
+     */
+    fullHeight?: boolean;
+    /**
+     * Additional class name for the content area
+     */
+    className?: string;
 }
 declare const TabsPanel: {
-    ({ children, currentItem }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, currentItem, fullHeight, className, }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default TabsPanel;