@edifice.io/react 2.0.0-develop-rc.3

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export interface PopoverProps {
+    /**
+     * Popover id for a11y
+     */
+    id?: string;
+    /**
+     * When Popover is visible
+     */
+    isVisible?: boolean;
+    /**
+     * React Node
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+export interface PopoverElementProps {
+    /**
+     * React Node
+     */
+    children: ReactNode;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+export declare const PopoverHeader: ({ children, className }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverBody: ({ children, className }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverFooter: ({ children, className }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTransition, animated } from "@react-spring/web";
+import clsx from "clsx";
+const PopoverHeader = ({
+  children,
+  className
+}) => {
+  const classes = clsx("popover-header", className);
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}, PopoverBody = ({
+  children,
+  className
+}) => {
+  const classes = clsx("popover-body", className);
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}, PopoverFooter = ({
+  children,
+  className
+}) => {
+  const classes = clsx("popover-footer p-8", className);
+  return /* @__PURE__ */ jsx("div", { className: classes, children });
+}, Popover = /* @__PURE__ */ forwardRef(({
+  children,
+  className,
+  id,
+  isVisible,
+  ...restProps
+}, ref) => {
+  const classes = clsx("popover d-block position-absolute top-100 start-50 translate-middle-x", className);
+  return useTransition(isVisible, {
+    from: {
+      opacity: 0
+    },
+    enter: {
+      opacity: 1
+    },
+    leave: {
+      opacity: 0
+    },
+    config: {
+      duration: 0
+    }
+  })((style, isVisible2) => isVisible2 && /* @__PURE__ */ jsx(animated.div, { ref, "aria-labelledby": id, className: classes, role: "tooltip", style, ...restProps, children }));
+});
+export {
+  Popover,
+  PopoverBody,
+  PopoverFooter,
+  PopoverHeader
+};

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

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

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,25 @@
+import { ChangeEvent, ReactNode } from 'react';
+export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * State controlling activated radio group
+     */
+    model: string | boolean | number;
+    /**
+     * Use onChange event Handler to set new value of model
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * If checked
+     */
+    checked?: boolean;
+    /**
+     * Label of the radio checkbox
+     */
+    label?: string | false;
+    /**
+     * Replace with an icon
+     */
+    icon?: ReactNode;
+}
+declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Radio;

package/dist/components/Radio/Radio.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import clsx from "clsx";
+const Radio = /* @__PURE__ */ forwardRef(({
+  model,
+  icon,
+  label = !1,
+  disabled = !1,
+  checked,
+  ...restProps
+}, ref) => {
+  const id = useId(), radioProps = {
+    type: "radio",
+    checked,
+    disabled,
+    ref,
+    className: clsx(restProps.className, "form-check-input c-pointer", icon && "d-none"),
+    id
+  }, inputProps = {
+    ...restProps,
+    ...radioProps
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx("form-check d-flex align-items-center gap-8", icon && "ps-0"), children: [
+    /* @__PURE__ */ jsx("input", { ...inputProps }),
+    icon && /* @__PURE__ */ jsx("label", { htmlFor: inputProps.id, className: clsx("c-pointer", model !== restProps.value && "text-muted"), children: icon }),
+    !icon && label && /* @__PURE__ */ jsx("label", { className: "form-check-label", htmlFor: inputProps.id, children: label })
+  ] });
+}), Radio$1 = Radio;
+export {
+  Radio$1 as default
+};

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

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

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

@@ -0,0 +1,51 @@
+import { ChangeEvent } from 'react';
+import { Size } from '../../types';
+export interface BaseProps {
+    /**
+     * String or Template literal with React i18next namespace
+     */
+    placeholder?: string;
+    /**
+     * Control SearchBar size
+     */
+    size?: Exclude<Size, 'sm'>;
+    /**
+     * Disabled status
+     */
+    disabled?: boolean;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+    /**
+     * ChangeEvent Handler
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+type DefaultSearchBar = {
+    /**
+     * Switch between button or dynamic search bar
+     */
+    isVariant: false;
+    /**
+     * Handle Search with Default SearchBar
+     */
+    onClick: () => void;
+};
+type DynamicSearchBar = {
+    /**
+     * Switch between button or dynamic search bar
+     */
+    isVariant: true;
+    /**
+     * Handle Search with Default SearchBar
+     */
+    onClick?: undefined;
+};
+export type Props = DefaultSearchBar | DynamicSearchBar;
+export type SearchBarProps = BaseProps & Props;
+declare const SearchBar: {
+    ({ isVariant, size, placeholder, className, disabled, onChange, onClick, ...restProps }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SearchBar;

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 FormControl from "../Form/FormControl.js";
+import SearchButton from "../Button/SearchButton.js";
+import { Icon } from "../Icon/Icon.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(Icon, { name: "search" }) }),
+    /* @__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(Icon, { name: "search" }), className: "border-start-0", onClick: handleClick })
+  ] });
+}, SearchBar$1 = SearchBar;
+export {
+  SearchBar$1 as default
+};

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

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

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

@@ -0,0 +1,39 @@
+import { DropdownProps } from '../Dropdown/Dropdown';
+import { DropdownTriggerProps } from '../Dropdown/DropdownTrigger';
+export interface OptionsType {
+    /**
+     * Select Option Value
+     */
+    value: string;
+    /**
+     * Option Option Label
+     */
+    label: string;
+    /**
+     * Icon Left Options
+     */
+    icon?: JSX.Element;
+}
+export interface SelectProps extends Omit<DropdownProps, 'children'>, Omit<DropdownTriggerProps, 'badgeContent'> {
+    /**
+     * Default select label
+     */
+    placeholderOption: string;
+    /**
+     * Select options
+     * */
+    options: OptionsType[] | string[];
+    /**
+     * Callback to get value
+     */
+    onValueChange?: (option: OptionsType | string) => void;
+}
+/**
+ *
+ * Select component is based on Dropdown Component. It extends `Dropdown` and `Dropdown.Trigger` props `block`, `overflow`, `icon`, `variant`, `size`, `disabled`
+ */
+declare const Select: {
+    ({ icon, options, overflow, block, variant, size, disabled, placeholderOption, onValueChange, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Select;

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);
+    }) })
+  ] });
+}, Select$1 = Select;
+export {
+  Select$1 as default
+};

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

@@ -0,0 +1,8 @@
+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;
+    displayName: string;
+};
+export default SelectTrigger;

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,6 @@
+import { jsx } from "react/jsx-runtime";
+import Dropdown from "../Dropdown/Dropdown.js";
+const SelectTrigger = (props) => /* @__PURE__ */ jsx(Dropdown.Trigger, { ...props, "aria-haspopup": "listbox", role: "combobox" });
+export {
+  SelectTrigger as default
+};

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

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

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

@@ -0,0 +1,14 @@
+/**
+ * TableExplorer  Component
+ *
+ * @see Docs     https://edifice-ui.vercel.app/?path=/docs/components-core-table--base
+ * @see Source   https://github.com/opendigitaleducation/edifice-ui/blob/main/packages/core/src/Table/Table.tsx
+ * @see WAI-ARIA https://www.w3.org/WAI/ARIA/apg/patterns/table/
+ */
+/// <reference types="react" />
+export type TableExplorerRef = HTMLTableElement;
+export interface TableExplorerProps {
+    children?: Array<React.ReactElement<HTMLTableSectionElement>>;
+}
+declare const TableExplorer: import('react').ForwardRefExoticComponent<TableExplorerProps & import('react').RefAttributes<HTMLTableElement>>;
+export default TableExplorer;

package/dist/components/Table/TableExplorer.js

@@ -0,0 +1,8 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const TableExplorer = /* @__PURE__ */ forwardRef(({
+  children
+}, ref) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("table", { ref, className: "table-explorer", children }) })), TableExplorer$1 = TableExplorer;
+export {
+  TableExplorer$1 as default
+};

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

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

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

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { TabsItemProps } from './TabsItem';
+export interface TabsProps {
+    /**
+     * Selected tab, by default.
+     */
+    defaultId?: string;
+    /**
+     * Items to be displayed
+     */
+    items: TabsItemProps[];
+    /**
+     * Get notified when a tab is selected
+     */
+    onChange?: (tab: TabsItemProps) => void;
+    /**
+     * Children Props
+     */
+    children?: (...props: any) => ReactNode;
+}
+/**
+ * Tab Content displayed one at a time when a Tab Item is selected
+ */
+declare const Tabs: {
+    ({ defaultId, items, onChange, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    Item: {
+        ({ icon, label, id, order, }: TabsItemProps & {
+            order: number;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Panel: {
+        ({ children, currentItem }: import('./TabsPanel').TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    List: {
+        (props: Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Tabs;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { TabsContext } from "./TabsContext.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const Tabs = ({
+  defaultId,
+  items,
+  onChange,
+  children
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultId || ""), [tabUnderlineWidth, setTabUnderlineWidth] = useState(0), [tabUnderlineLeft, setTabUnderlineLeft] = useState(0), tabsRef = useRef([]), setSelectedTab = useCallback((id) => {
+    setActiveTab(id);
+  }, []);
+  useEffect(() => {
+    const currentItem2 = items.find((item) => item.id === activeTab);
+    currentItem2 && (onChange == null || onChange(currentItem2));
+  }, [activeTab]), useEffect(() => {
+    function setTabPosition() {
+      var _a;
+      if (((_a = document == null ? void 0 : document.activeElement) == null ? void 0 : _a.tagName) !== "INPUT") {
+        const currentTabIndex = items.findIndex((item) => item.id === activeTab);
+        currentTabIndex === -1 && defaultId && setActiveTab(defaultId);
+        const currentTabRef = tabsRef.current[currentTabIndex];
+        currentTabRef && (currentTabRef.focus(), setTabUnderlineLeft((currentTabRef == null ? void 0 : currentTabRef.offsetLeft) ?? 0), setTabUnderlineWidth((currentTabRef == null ? void 0 : currentTabRef.clientWidth) ?? 0));
+      }
+    }
+    return setTabPosition(), window.addEventListener("resize", setTabPosition), () => window.removeEventListener("resize", setTabPosition);
+  }, [activeTab, items, defaultId]);
+  const moveFocusToPreviousTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[0]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index - 1]) == null ? void 0 : _c.id);
+  }, [items]), moveFocusToNextTab = useCallback((activeTab2) => {
+    var _a, _b, _c;
+    const index = items.findIndex((item) => item.id === activeTab2);
+    activeTab2 === ((_a = items[items.length - 1]) == null ? void 0 : _a.id) ? setActiveTab((_b = items[0]) == null ? void 0 : _b.id) : setActiveTab((_c = items[index + 1]) == null ? void 0 : _c.id);
+  }, [items]), onKeyDown = useCallback((event) => {
+    var _a, _b;
+    switch (event.code) {
+      case "ArrowLeft":
+        moveFocusToPreviousTab(activeTab);
+        break;
+      case "ArrowRight":
+        moveFocusToNextTab(activeTab);
+        break;
+      case "Home":
+        setActiveTab((_a = items[0]) == null ? void 0 : _a.id);
+        break;
+      case "End":
+        setActiveTab((_b = items[items.length - 1]) == null ? void 0 : _b.id);
+        break;
+    }
+  }, [activeTab, items, moveFocusToNextTab, moveFocusToPreviousTab]), value = useMemo(() => ({
+    activeTab,
+    items,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  }), [activeTab, items, onKeyDown, setSelectedTab, tabUnderlineLeft, tabUnderlineWidth]), 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 })
+  ] }) });
+};
+Tabs.Item = TabsItem;
+Tabs.Panel = TabsPanel;
+Tabs.List = TabsList;
+const Tabs$1 = Tabs;
+export {
+  Tabs$1 as default
+};

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

@@ -0,0 +1,12 @@
+import { TabsItemProps } from './TabsItem';
+export interface TabsContextProps {
+    activeTab?: string;
+    items: TabsItemProps[];
+    setSelectedTab: (key: string) => void;
+    tabsRef: React.MutableRefObject<(HTMLButtonElement | null)[]>;
+    tabUnderlineLeft: number;
+    tabUnderlineWidth: number;
+    onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const TabsContext: import('react').Context<TabsContextProps | null>;
+export declare function useTabsContext(): TabsContextProps;

package/dist/components/Tabs/TabsContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+const TabsContext = /* @__PURE__ */ createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context)
+    throw new Error("Tabs compound components cannot be rendered outside the Tabs component");
+  return context;
+}
+export {
+  TabsContext,
+  useTabsContext
+};

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export interface TabsItemProps {
+    /**
+     * Item identifier
+     */
+    id: string;
+    /**
+     * Item icon
+     */
+    icon: ReactNode;
+    /**
+     * Item label
+     */
+    label: string;
+    /**
+     * Item content, to be displayed in the panel when selected.
+     */
+    content: ReactNode;
+}
+declare const TabsItem: {
+    ({ icon, label, id, order, }: TabsItemProps & {
+        order: number;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsItem;

package/dist/components/Tabs/TabsItem.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useTabsContext } from "./TabsContext.js";
+const TabsItem = ({
+  icon,
+  label,
+  id,
+  order
+}) => {
+  const {
+    activeTab,
+    setSelectedTab,
+    onKeyDown,
+    tabsRef
+  } = useTabsContext(), {
+    t
+  } = useTranslation(), classes = clsx("nav-link d-inline-flex gap-8 border-0", activeTab === id ? "selected" : "");
+  return /* @__PURE__ */ jsx("li", { className: "nav-item flex-shrink-0", role: "presentation", children: /* @__PURE__ */ jsxs("button", { ref: (el) => tabsRef.current[order] = el, type: "button", id: `tab-${id}`, className: classes, onClick: () => setSelectedTab(id), onKeyDown: (event) => onKeyDown(event), role: "tab", "aria-controls": `tabpanel-${id}`, "aria-selected": activeTab === id, tabIndex: activeTab === id ? 0 : -1, children: [
+    icon,
+    /* @__PURE__ */ jsx("small", { children: t(label) })
+  ] }) });
+};
+export {
+  TabsItem as default
+};

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react';
+declare const TabsList: {
+    (props: ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsList;

package/dist/components/Tabs/TabsList.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import Tabs from "./Tabs.js";
+import { useTabsContext } from "./TabsContext.js";
+const TabsList = (props) => {
+  const {
+    items,
+    tabUnderlineLeft,
+    tabUnderlineWidth
+  } = useTabsContext(), {
+    className,
+    ...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)) }),
+    /* @__PURE__ */ jsx("span", { className: "nav-slide", style: {
+      left: tabUnderlineLeft,
+      width: tabUnderlineWidth
+    } })
+  ] });
+};
+export {
+  TabsList as default
+};

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { TabsItemProps } from './TabsItem';
+export interface TabsPanelProps {
+    /**
+     * Content of the item
+     */
+    children: ReactNode;
+    /**
+     * Current Item
+     */
+    currentItem: TabsItemProps | undefined;
+}
+declare const TabsPanel: {
+    ({ children, currentItem }: TabsPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TabsPanel;

package/dist/components/Tabs/TabsPanel.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { useTabsContext } from "./TabsContext.js";
+const TabsPanel = ({
+  children,
+  currentItem
+}) => {
+  const {
+    activeTab
+  } = useTabsContext();
+  return /* @__PURE__ */ jsx("div", { className: "tab-content d-flex flex-fill w-100", children: /* @__PURE__ */ jsx("div", { className: `tab-pane flex-fill w-100 fade ${activeTab === (currentItem == null ? void 0 : currentItem.id) ? "show active" : ""}`, id: `tabpanel-${currentItem == null ? void 0 : currentItem.id}`, role: "tabpanel", "aria-labelledby": `tab-${currentItem == null ? void 0 : currentItem.id}`, tabIndex: 0, children }) });
+};
+export {
+  TabsPanel as default
+};

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

@@ -0,0 +1,3 @@
+export { default as Tabs } from './Tabs';
+export * from './Tabs';
+export { type TabsItemProps } from './TabsItem';