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

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

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import parse, { domToReact, attributesToProps } from "html-react-parser";
+import SvgIconBurgerMenu from "../../../modules/icons/components/IconBurgerMenu.js";
+import { useEdificeClient } from "../../../providers/EdificeClientProvider/EdificeClientProvider.hook.js";
+import { useEdificeTheme } from "../../../providers/EdificeThemeProvider/EdificeThemeProvider.hook.js";
+import Button from "../../Button/Button.js";
+function useHelp() {
+  var _a, _b, _c, _d, _e;
+  const {
+    appCode
+  } = useEdificeClient(), {
+    theme
+  } = useEdificeTheme(), [html, setHtml] = useState(""), [visibility, setVisibility] = useState(!0), [isModalOpen, setIsModalOpen] = useState(!1), [error, setError] = useState(!1), helpPath = theme != null && theme.is1d ? "/help-1d" : "/help-2d";
+  useEffect(() => {
+    (async () => {
+      let helpURL = "";
+      helpURL = helpPath + "/application/" + appCode + "/", !appCode && window.location.pathname !== "/adapter" ? helpURL = helpPath + "/application/portal/" : window.location.pathname === "/adapter" ? helpURL = helpPath + "/application/" + window.location.search.split("eliot=")[1].split("&")[0] + "/" : window.location.pathname.includes("/directory/class-admin") ? helpURL = helpPath + "/application/parametrage-de-la-classe/" : (window.location.pathname.includes("/userbook/mon-compte") || window.location.pathname.includes("/timeline/preferencesView") || window.location.pathname.includes("/timeline/historyView")) && (helpURL = helpPath + "/application/userbook/");
+      try {
+        const res = await fetch(helpURL), html2 = await res.text();
+        if (res.status === 404) {
+          setError(!0);
+          return;
+        }
+        setHtml(html2), setError(!1);
+      } catch (error2) {
+        setError(!0), console.error(error2);
+      }
+    })();
+  }, [appCode, helpPath]);
+  const parsedHTML = parse(html, {
+    replace: (domNode) => {
+      const typedDomNode = domNode;
+      if (typedDomNode.attribs && typedDomNode.attribs.id === "TOC")
+        return /* @__PURE__ */ jsxs("nav", { id: "TOC", children: [
+          /* @__PURE__ */ jsx(Button, { onClick: () => {
+            setVisibility(!visibility);
+          }, children: /* @__PURE__ */ jsx(SvgIconBurgerMenu, {}) }),
+          domToReact(typedDomNode.children, {
+            replace: (domNode2) => {
+              const typedDomNode2 = domNode2;
+              if (typedDomNode2.attribs && typedDomNode2.name === "ul")
+                return /* @__PURE__ */ jsx("ul", { id: "TOC-list", style: {
+                  display: visibility ? "block" : "none"
+                }, children: domToReact(typedDomNode2.children, {
+                  replace: (domNode3) => {
+                    const typedDomNode3 = domNode3;
+                    if (typedDomNode3.attribs && typedDomNode3.name === "a")
+                      return /* @__PURE__ */ jsx("a", { ...attributesToProps(typedDomNode3.attribs), children: /* @__PURE__ */ jsx("span", { onClick: () => {
+                        setVisibility(!1);
+                      }, children: domToReact(typedDomNode3.children) }) });
+                  }
+                }) });
+            }
+          })
+        ] });
+      if (typedDomNode.attribs && typedDomNode.attribs.class === "section level2") {
+        const props = attributesToProps(domNode.attribs);
+        return /* @__PURE__ */ jsx("div", { ...props, className: "section level2", style: {
+          display: typedDomNode.attribs.id !== "présentation" ? "none" : "block"
+        }, children: domToReact(typedDomNode.children, {
+          replace: (domNode2) => {
+            const typedDomNode2 = domNode2;
+            if (typedDomNode2.attribs && typedDomNode2.name === "img") {
+              const attribs = domNode2.attribs.src;
+              return /* @__PURE__ */ jsx("img", { ...attributesToProps(typedDomNode2.attribs), src: `${helpPath}/${attribs}`, alt: "" });
+            }
+          }
+        }) });
+      }
+    }
+  }), parsedContent = (_c = (_b = (_a = parsedHTML == null ? void 0 : parsedHTML.props) == null ? void 0 : _a.children.find((child) => child.type === "body")) == null ? void 0 : _b.props) == null ? void 0 : _c.children, parsedHeadline = (_e = (_d = parsedContent == null ? void 0 : parsedContent.find((child) => child.type === "p")) == null ? void 0 : _d.props) == null ? void 0 : _e.children;
+  return {
+    html,
+    visibility,
+    isModalOpen,
+    setIsModalOpen,
+    parsedContent,
+    parsedHeadline,
+    error
+  };
+}
+export {
+  useHelp
+};

package/dist/components/List/List.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { ToolbarItem } from '..';
+export type ListProps<T> = {
+    /**
+     * Toolbar data items
+     */
+    items?: ToolbarItem[];
+    /**
+     * Generic data
+     */
+    data: T[] | undefined;
+    /**
+     * render to display its own JSX
+     */
+    renderNode: (node: T, checkbox?: JSX.Element, checked?: boolean) => ReactNode;
+    /**
+     * Callback to get selected ids
+     */
+    onSelectedItems?: (selectedIds: string[]) => void;
+};
+export declare const List: <T extends {
+    _id: string;
+}>({ items, data, renderNode, onSelectedItems, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/List/List.js

@@ -0,0 +1,50 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMediaQuery } from "@uidotdev/usehooks";
+import clsx from "clsx";
+import { useEffect, Fragment as Fragment$1 } from "react";
+import { useCheckable } from "../../hooks/useCheckable/useCheckable.js";
+import Checkbox from "../Checkbox/Checkbox.js";
+import { Toolbar } from "../Toolbar/Toolbar.js";
+const List = ({
+  items,
+  data,
+  renderNode,
+  onSelectedItems
+}) => {
+  const {
+    selectedItems,
+    allItemsSelected,
+    isIndeterminate,
+    handleOnSelectAllItems,
+    handleOnSelectItem
+  } = useCheckable(data), isDesktopDevice = useMediaQuery("only screen and (min-width: 1024px)");
+  return useEffect(() => {
+    selectedItems && (onSelectedItems == null || onSelectedItems(selectedItems));
+  }, [onSelectedItems, selectedItems]), /* @__PURE__ */ jsxs(Fragment, { children: [
+    items && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: clsx("d-flex align-items-center gap-8", {
+        "px-12": items
+      }), children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-8", children: [
+          /* @__PURE__ */ jsx(Checkbox, { checked: allItemsSelected, indeterminate: isIndeterminate, onChange: () => handleOnSelectAllItems(allItemsSelected) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "(",
+            selectedItems.length,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Toolbar, { items, isBlock: !0, align: "left", variant: "no-shadow", className: clsx("gap-4 py-4", {
+          "px-0 ms-auto": !isDesktopDevice
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "border-top" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-8", children: data == null ? void 0 : data.map((node) => {
+      const checkbox = /* @__PURE__ */ jsx(Checkbox, { checked: selectedItems.includes(node._id), onChange: () => handleOnSelectItem(node._id) }), checked = selectedItems.includes(node._id);
+      return /* @__PURE__ */ jsx(Fragment$1, { children: renderNode(node, checkbox, checked) }, node._id);
+    }) })
+  ] });
+};
+export {
+  List
+};

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

@@ -0,0 +1 @@
+export * from './List';

package/dist/components/Loading/Loading.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type LoadingPosition = 'left' | 'right' | undefined;
+export type LoadingPosition = "left" | "right" | undefined;
 export type LoadingIcon = JSX.Element | undefined;
 export interface LoadingProps {
     /**

package/dist/components/Loading/Loading.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import SvgIconLoader from "../../modules/icons/components/IconLoader.js";
+const Loading = /* @__PURE__ */ forwardRef((props, ref) => {
+  const {
+    isLoading,
+    loadingIcon,
+    loadingPosition = "left",
+    children,
+    className,
+    ...restProps
+  } = props, getLoadingIcon = () => {
+    let icon;
+    return loadingIcon ? icon = loadingIcon : icon = /* @__PURE__ */ jsx(SvgIconLoader, { ...restProps, "aria-label": "Loading" }), icon;
+  }, classes = clsx("loading d-flex align-items-center gap-8", {
+    "is-loading": isLoading
+  }, className);
+  return /* @__PURE__ */ jsxs("div", { className: classes, role: "status", ref, children: [
+    (!loadingPosition || loadingPosition === "left") && getLoadingIcon(),
+    children,
+    loadingPosition === "right" && getLoadingIcon()
+  ] });
+});
+export {
+  Loading as default
+};

package/dist/components/LoadingScreen/LoadingScreen.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface LoadingScreenProps {
     position?: boolean;
     caption?: string;

package/dist/components/LoadingScreen/LoadingScreen.js

@@ -0,0 +1,25 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import usePaths from "../../hooks/usePaths/usePaths.js";
+const LoadingScreen = /* @__PURE__ */ forwardRef(({
+  position = !0,
+  caption
+}, ref) => {
+  const [imagePath] = usePaths(), image = `${imagePath}/loading/screen-loading.gif`, containerClasses = clsx("top-0 end-0 start-0 bottom-0 d-grid justify-content-center align-content-center align-items-center z-2000", {
+    "position-fixed": !position,
+    "position-static": position
+  }), captionClasses = clsx("text-center pt-12", {
+    "text-white": !position
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ref, className: containerClasses, children: [
+      /* @__PURE__ */ jsx("div", { className: "bg-white rounded-circle mx-auto w-25", children: /* @__PURE__ */ jsx("img", { src: image, alt: "loading" }) }),
+      caption && /* @__PURE__ */ jsx("div", { className: captionClasses, children: caption })
+    ] }),
+    !position && /* @__PURE__ */ jsx("div", { className: "modal-backdrop fade show" })
+  ] });
+});
+export {
+  LoadingScreen as default
+};

package/dist/components/Logo/Logo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface LogoProps {
     src: string;
     is1d?: boolean;

package/dist/components/Logo/Logo.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+const Logo = /* @__PURE__ */ forwardRef(({
+  src,
+  is1d,
+  translate = "Retour accueil"
+}, ref) => {
+  const classes = clsx("navbar-brand d-none d-md-block");
+  return /* @__PURE__ */ jsx("a", { ref, className: classes, href: "/timeline/timeline", "aria-label": translate, children: /* @__PURE__ */ jsx("img", { className: "logo", src, alt: `logo ${is1d ? "ONE" : "NEO"}`, width: "300", height: "52" }) });
+});
+export {
+  Logo as default
+};

package/dist/components/Menu/components/Menu.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useMenu } from "../hooks/useMenu.js";
+import { MenuButton } from "./MenuButton.js";
+import { MenuContext } from "./MenuContext.js";
+import { MenuItem } from "./MenuItem.js";
+const Menu = ({
+  label,
+  children
+}) => {
+  const {
+    menuRef,
+    childProps,
+    menuItems,
+    onKeyDown
+  } = useMenu(), values = useMemo(() => ({
+    menuRef,
+    menuItems,
+    childProps
+  }), [childProps, menuItems, menuRef]);
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: values, children: /* @__PURE__ */ jsx("nav", { "aria-label": label, className: "menu", children: /* @__PURE__ */ jsx("ul", { ref: menuRef, role: "menubar", "aria-label": label, onKeyDown, "data-menubar-list": !0, className: "list-unstyled d-flex flex-column gap-4", children }) }) });
+};
+Menu.Item = MenuItem;
+Menu.Button = MenuButton;
+export {
+  Menu
+};

package/dist/components/Menu/components/MenuButton.d.ts

@@ -0,0 +1,5 @@
+import { ButtonProps } from '../../Button';
+export type MenuButtonProps = Pick<ButtonProps, "children" | "leftIcon" | "rightIcon" | "onClick"> & {
+    selected: boolean;
+};
+export declare const MenuButton: (props: Partial<MenuButtonProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/components/MenuButton.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useMenuContext } from "./MenuContext.js";
+import Button from "../../Button/Button.js";
+const MenuButton = (props) => {
+  const {
+    selected,
+    leftIcon,
+    rightIcon,
+    onClick,
+    children
+  } = props, {
+    childProps
+  } = useMenuContext();
+  return /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", className: clsx("stack w-100", {
+    selected
+  }), leftIcon, rightIcon, onClick, ...childProps, children });
+};
+export {
+  MenuButton
+};

package/dist/components/Menu/hooks/useMenu.d.ts

@@ -0,0 +1,9 @@
+export declare const useMenu: () => {
+    menuRef: import('react').MutableRefObject<HTMLUListElement | null>;
+    menuItems: Set<HTMLLIElement>;
+    childProps: {
+        "data-menubar-menuitem": string;
+        role: string;
+    };
+    onKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;
+};

package/dist/components/Menu/hooks/useMenu.js

@@ -0,0 +1,50 @@
+import { usePrevious } from "@uidotdev/usehooks";
+import { useRef, useState, useEffect, useMemo } from "react";
+const useMenu = () => {
+  const menuRef = useRef(null), menuItems = useRef(/* @__PURE__ */ new Set()).current, [currentIndex, setCurrentIndex] = useState(0), previousIndex = usePrevious(currentIndex) ?? 0;
+  useEffect(() => {
+    var _a, _b;
+    if (currentIndex !== previousIndex) {
+      const items = Array.from(menuItems), currentNode = (_a = items[currentIndex]) == null ? void 0 : _a.firstChild, previousNode = (_b = items[previousIndex]) == null ? void 0 : _b.firstChild;
+      previousNode == null || previousNode.setAttribute("tabindex", "-1"), currentNode == null || currentNode.setAttribute("tabindex", "0"), currentNode == null || currentNode.focus({
+        preventScroll: !0
+      });
+    }
+  }, [currentIndex, previousIndex, menuItems]);
+  const first = () => setCurrentIndex(0), last = () => setCurrentIndex(menuItems.size - 1), next = () => {
+    const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(index);
+  }, previous = () => {
+    const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;
+    setCurrentIndex(index);
+  }, onKeyDown = (event) => {
+    switch (event.stopPropagation(), event.code) {
+      case "ArrowUp":
+        event.preventDefault(), previous();
+        break;
+      case "ArrowDown":
+        event.preventDefault(), next();
+        break;
+    }
+    switch (event.code) {
+      case "End":
+        event.preventDefault(), last();
+        break;
+      case "Home":
+        event.preventDefault(), first();
+        break;
+    }
+  }, childProps = useMemo(() => ({
+    "data-menubar-menuitem": "",
+    role: "menuitem"
+  }), []);
+  return {
+    menuRef,
+    menuItems,
+    childProps,
+    onKeyDown
+  };
+};
+export {
+  useMenu
+};

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

@@ -1,2 +1,2 @@
-export * from './Menu';
-export { type MenuButtonProps } from './MenuButton';
+export * from './components/Menu';
+export { type MenuButtonProps } from './components/MenuButton';

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export type ModalElement = HTMLDivElement;
-export type ModalSize = 'md' | 'lg';
+export type ModalSize = "sm" | "md" | "lg";
 export interface ModalProps {
     /**
      * Modal id (useful when multiple modal on the same page)

package/dist/components/Modal/ModalContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ModalContextProps {
     ariaLabelId: string;
     ariaDescriptionId: string;

package/dist/components/Modal/ModalHeader.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
+import IconButton from "../Button/IconButton.js";
+import { useModalContext } from "./ModalContext.js";
+const ModalHeader = (props) => {
+  const {
+    onModalClose,
+    children
+  } = props, {
+    ariaLabelId,
+    focusId
+  } = useModalContext(), closeButtonRef = useRef(null), {
+    t
+  } = useTranslation();
+  return useEffect(() => {
+    var _a;
+    focusId || (_a = closeButtonRef.current) == null || _a.focus();
+  }, [focusId]), /* @__PURE__ */ jsxs("div", { className: "modal-header", children: [
+    /* @__PURE__ */ jsx("h2", { id: ariaLabelId, className: "modal-title", tabIndex: -1, children }),
+    /* @__PURE__ */ jsx(IconButton, { ref: closeButtonRef, "aria-label": t("close"), color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconClose, {}), type: "button", variant: "ghost", title: t("close"), onClick: onModalClose, className: "btn-close" })
+  ] });
+};
+export {
+  ModalHeader as default
+};

package/dist/components/SearchBar/SearchBar.d.ts

@@ -8,7 +8,7 @@ export interface BaseProps {
     /**
      * Control SearchBar size
      */
-    size?: Exclude<Size, 'sm'>;
+    size?: Exclude<Size, "sm">;
     /**
      * Disabled status
      */

package/dist/components/SearchBar/SearchBar.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import SvgIconSearch from "../../modules/icons/components/IconSearch.js";
+import FormControl from "../Form/FormControl.js";
+import SearchButton from "../Button/SearchButton.js";
+const SearchBar = ({
+  isVariant = !1,
+  size = "md",
+  placeholder = "search",
+  className,
+  disabled,
+  onChange,
+  onClick,
+  ...restProps
+}) => {
+  const {
+    t
+  } = useTranslation(), searchbar = clsx(className, {
+    "input-group": !isVariant,
+    "position-relative": isVariant
+  }), input = clsx({
+    "border-end-0": !isVariant,
+    "ps-48": isVariant
+  }), handleClick = () => {
+    onClick == null || onClick();
+  };
+  return /* @__PURE__ */ jsxs(FormControl, { id: "search-bar", className: searchbar, children: [
+    isVariant && /* @__PURE__ */ jsx("div", { className: "position-absolute z-1 top-50 start-0 translate-middle-y border-0 ps-12 bg-transparent", children: /* @__PURE__ */ jsx(SvgIconSearch, {}) }),
+    /* @__PURE__ */ jsx(FormControl.Input, { type: "search", placeholder: t(placeholder), size, noValidationIcon: !0, className: input, onChange, disabled, ...restProps }),
+    !isVariant && /* @__PURE__ */ jsx(SearchButton, { type: "submit", "aria-label": t("search"), icon: /* @__PURE__ */ jsx(SvgIconSearch, {}), className: "border-start-0", onClick: handleClick })
+  ] });
+};
+export {
+  SearchBar as default
+};

package/dist/components/Select/Select.d.ts

@@ -14,7 +14,7 @@ export interface OptionsType {
      */
     icon?: JSX.Element;
 }
-export interface SelectProps extends Omit<DropdownProps, 'children'>, Omit<DropdownTriggerProps, 'badgeContent'> {
+export interface SelectProps extends Omit<DropdownProps, "children">, Omit<DropdownTriggerProps, "badgeContent"> {
     /**
      * Default select label
      */

package/dist/components/Select/Select.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import SelectTrigger from "./SelectTrigger.js";
+import Dropdown from "../Dropdown/Dropdown.js";
+const Select = ({
+  icon,
+  options,
+  overflow,
+  block,
+  variant,
+  size,
+  disabled,
+  placeholderOption,
+  onValueChange
+}) => {
+  const [localValue, setLocalValue] = useState(), {
+    t
+  } = useTranslation();
+  useEffect(() => {
+    if (localValue) {
+      const value = typeof localValue == "object" ? localValue.value : localValue;
+      onValueChange == null || onValueChange(value);
+    }
+  }, [localValue]);
+  const label = typeof localValue == "object" ? localValue.label : localValue, iconChange = typeof localValue == "object" ? localValue.icon : void 0;
+  return /* @__PURE__ */ jsxs(Dropdown, { overflow, block, children: [
+    /* @__PURE__ */ jsx(SelectTrigger, { icon: iconChange || icon, label: t(label || placeholderOption), variant, size, disabled }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { role: "listbox", children: options == null ? void 0 : options.map((option) => {
+      const value = typeof option == "object" ? option.value : option, label2 = typeof option == "object" ? option.label : option, icon2 = typeof option == "object" ? option.icon : void 0;
+      return /* @__PURE__ */ jsx(Dropdown.Item, { type: "action", onClick: () => setLocalValue(option), icon: icon2, children: label2 }, value);
+    }) })
+  ] });
+};
+export {
+  Select as default
+};

package/dist/components/Select/SelectTrigger.d.ts

@@ -2,7 +2,7 @@ import { RefAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { DropdownTriggerProps } from '../Dropdown/DropdownTrigger';
 declare const SelectTrigger: {
-    (props: JSX.IntrinsicAttributes & Omit<DropdownTriggerProps, 'ref'> & RefAttributes<HTMLButtonElement>): JSX.Element;
+    (props: JSX.IntrinsicAttributes & Omit<DropdownTriggerProps, "ref"> & RefAttributes<HTMLButtonElement>): JSX.Element;
     displayName: string;
 };
 export default SelectTrigger;

package/dist/components/Table/components/Table.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export type TableRef = HTMLTableElement;
+export interface TableProps {
+    children?: Array<React.ReactElement<HTMLTableSectionElement>> | any;
+}
+declare const Table: import('react').ForwardRefExoticComponent<{
+    children: ReactNode;
+} & import('react').RefAttributes<HTMLTableElement>> & {
+    Thead: {
+        (props: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Th: {
+        (props: React.HTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Tbody: {
+        (props: import('react').HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Tr: {
+        (props: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Td: {
+        (props: React.HTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default Table;

package/dist/components/Table/components/Table.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TableTbody } from "./TableTbody.js";
+import { TableTd } from "./TableTd.js";
+import { TableTh } from "./TableTh.js";
+import { TableThead } from "./TableThead.js";
+import { TableTr } from "./TableTr.js";
+const Root = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx("div", { className: "table-responsive", children: /* @__PURE__ */ jsx("table", { ref, className: "table align-middle mb-0", children }) })), Table = /* @__PURE__ */ Object.assign(Root, {
+  Thead: TableThead,
+  Th: TableTh,
+  Tbody: TableTbody,
+  Tr: TableTr,
+  Td: TableTd
+});
+export {
+  Table as default
+};

package/dist/components/Table/components/TableTbody.d.ts

@@ -0,0 +1,6 @@
+type Props = React.HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableTbody: {
+    (props: Props): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Table/components/TableTbody.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+const TableTbody = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("tbody", { ...restProps, children });
+};
+export {
+  TableTbody
+};

package/dist/components/Table/components/TableTd.d.ts

@@ -0,0 +1,4 @@
+export declare const TableTd: {
+    (props: React.HTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Table/components/TableTd.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+const TableTd = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("td", { ...restProps, children });
+};
+export {
+  TableTd
+};

package/dist/components/Table/components/TableTh.d.ts

@@ -0,0 +1,4 @@
+export declare const TableTh: {
+    (props: React.HTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Table/components/TableTh.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+const TableTh = (props) => {
+  const {
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx("th", { ...restProps, children });
+};
+export {
+  TableTh
+};

package/dist/components/Table/components/TableThead.d.ts

@@ -0,0 +1,4 @@
+export declare const TableThead: {
+    (props: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};