@edifice.io/react 1.7.4-develop-pedago.20241211160712

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 })
+  ] });
+});
+export {
+  Radio 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 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/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);
+    }) })
+  ] });
+};
+export {
+  Select 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/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;
+};

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

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

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

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

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

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

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

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

package/dist/components/Tabs/components/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
+ */
+export 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: import('react').ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+export default Tabs;

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

@@ -0,0 +1,45 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { TabsContext } from "../context/TabsContext.js";
+import { useTabs } from "../hooks/useTabs.js";
+import TabsItem from "./TabsItem.js";
+import TabsList from "./TabsList.js";
+import TabsPanel from "./TabsPanel.js";
+const Tabs = ({
+  defaultId,
+  items,
+  onChange,
+  children
+}) => {
+  const {
+    activeTab,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    onKeyDown
+  } = useTabs({
+    defaultId,
+    items,
+    onChange
+  }), value = useMemo(() => ({
+    activeTab,
+    items,
+    setSelectedTab,
+    tabsRef,
+    tabUnderlineLeft,
+    tabUnderlineWidth,
+    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 })
+  ] }) });
+};
+Tabs.Item = TabsItem;
+Tabs.Panel = TabsPanel;
+Tabs.List = TabsList;
+export {
+  Tabs,
+  Tabs as default
+};

package/dist/components/Tabs/components/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/components/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 "../context/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/components/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/components/TabsList.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTabsContext } from "../context/TabsContext.js";
+import { Tabs } from "./Tabs.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/components/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;