@axa-fr/design-system-slash-react 0.2.0-beta.278

package/dist/Table/Pagination/Pager.d.ts

@@ -0,0 +1,15 @@
+import "@axa-fr/design-system-slash-css/dist/Table/Pager.agent.scss";
+import { ComponentPropsWithoutRef } from "react";
+import { PaginationButton } from "./PaginationButton";
+export type PagerComponentProps = Pick<ComponentPropsWithoutRef<typeof PaginationButton>, "onChange"> & {
+    className?: string;
+    classModifier?: string;
+    numberPages?: number;
+    currentPage?: number;
+    mode?: "default" | "light";
+    previousLabel?: string;
+    nextLabel?: string;
+    ofLabel?: string;
+};
+declare const Pager: ({ className, classModifier, numberPages, currentPage, onChange, mode, previousLabel, nextLabel, ofLabel, }: PagerComponentProps) => import("react/jsx-runtime").JSX.Element;
+export { Pager };

package/dist/Table/Pagination/Pager.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Table/Pager.agent.scss";
+import { getComponentClassName } from "../../agent";
+import { Li } from "./Li";
+import { LiPoint } from "./LiPoint";
+import { PaginationButton } from "./PaginationButton";
+const Pager = ({ className, classModifier, numberPages = 1, currentPage = 1, onChange, mode = "default", previousLabel = "« Précédent", nextLabel = "Suivant »", ofLabel = "sur", }) => {
+    const hasNext = currentPage < numberPages;
+    const hasPrevious = currentPage > 1;
+    const componentClassName = getComponentClassName(className, classModifier, "af-pager");
+    if (mode === "light") {
+        return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, children: _jsx("i", { className: "glyphicon glyphicon-chevron-left", "aria-hidden": "true" }) }), _jsxs(LiPoint, { isVisible: true, children: [currentPage, " ", ofLabel, " ", numberPages] }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, children: _jsx("i", { className: "glyphicon glyphicon-chevron-right", "aria-hidden": "true" }) })] }) }));
+    }
+    return (_jsx("nav", { className: componentClassName, children: _jsxs("ul", { className: "af-pager__pagination", children: [_jsx(PaginationButton, { onChange: onChange, value: currentPage - 1, active: hasPrevious, isVisible: true, children: previousLabel }), _jsx(Li, { onChange: onChange, value: 1, isVisible: numberPages > 1 && currentPage > 1 }), _jsx(LiPoint, { isVisible: currentPage > 3, children: "..." }), _jsx(Li, { onChange: onChange, value: currentPage - 1, isVisible: numberPages > 2 && currentPage > 2 }), _jsx(Li, { onChange: onChange, value: currentPage, active: true, isVisible: numberPages > 0 }), _jsx(Li, { onChange: onChange, value: currentPage + 1, isVisible: currentPage < numberPages - 1 }), _jsx(LiPoint, { isVisible: currentPage < numberPages - 2, children: "..." }), _jsx(Li, { onChange: onChange, value: numberPages, isVisible: currentPage < numberPages }), _jsx(PaginationButton, { onChange: onChange, value: currentPage + 1, active: hasNext, isVisible: true, children: nextLabel })] }) }));
+};
+export { Pager };

package/dist/Table/Pagination/PaginationButton.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+type PaginationButtonProps = {
+    isVisible?: boolean;
+    active?: boolean;
+    children?: ReactNode;
+    value: number;
+    onChange: (e: {
+        value: number;
+    }) => void;
+};
+declare const PaginationButton: ({ isVisible, active, children, value, onChange, }: PaginationButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export { PaginationButton };

package/dist/Table/Pagination/PaginationButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const PaginationButton = ({ isVisible, active, children, value, onChange, }) => {
+    if (!isVisible) {
+        return null;
+    }
+    if (active) {
+        return (_jsx("li", { className: "af-pager__item", children: _jsx("a", { className: "af-pager__item-link", href: "/#", role: "button", onClick: (e) => {
+                    e.preventDefault();
+                    onChange({ value });
+                }, children: children }) }));
+    }
+    return (_jsx("li", { className: "af-pager__item af-pager__item--disabled", children: _jsx("span", { className: "af-pager__item-nolink", children: children }) }));
+};
+export { PaginationButton };

package/dist/Table/Pagination/Paging.d.ts

@@ -0,0 +1,14 @@
+import "@axa-fr/design-system-slash-css/dist/Table/Paging.agent.scss";
+import { ComponentPropsWithoutRef } from "react";
+import { Items } from "./Items";
+import { Pager } from "./Pager";
+type PagingComponentProps = ComponentPropsWithoutRef<typeof Pager> & ComponentPropsWithoutRef<typeof Items>;
+type OnChangePager = (e: {
+    numberItems: number;
+    page: number;
+}) => void;
+export type Props = Omit<PagingComponentProps, "onChange"> & {
+    onChange?: OnChangePager;
+};
+declare const Paging: ({ className, classModifier, currentPage, displayLabel, elementsLabel, id, mode, nextLabel, numberItems, numberPages, ofLabel, previousLabel, items, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Paging };

package/dist/Table/Pagination/Paging.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Table/Paging.agent.scss";
+import { useCallback } from "react";
+import { getComponentClassName } from "../../agent";
+import { Items } from "./Items";
+import { Pager } from "./Pager";
+const Paging = ({ className, classModifier, currentPage = 1, displayLabel, elementsLabel, id, mode, nextLabel, numberItems = 10, numberPages, ofLabel, previousLabel, items, onChange, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-paging");
+    const handleChangeItems = useCallback((e) => onChange &&
+        onChange({
+            numberItems: e.value,
+            page: currentPage,
+        }), [currentPage, onChange]);
+    const handleChangePager = useCallback((e) => onChange &&
+        onChange({
+            numberItems,
+            page: e.value,
+        }), [numberItems, onChange]);
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("div", { className: "af-paging__limit", children: _jsx(Items, { onChange: handleChangeItems, numberItems: numberItems, id: id, displayLabel: displayLabel, elementsLabel: elementsLabel, items: items }) }), _jsx("div", { className: "af-paging__pager", children: _jsx(Pager, { onChange: handleChangePager, currentPage: currentPage, numberPages: numberPages, previousLabel: previousLabel, nextLabel: nextLabel, ofLabel: ofLabel, mode: mode }) })] }));
+};
+export { Paging };

package/dist/Table/TBody.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from "react";
+type Props = ComponentPropsWithoutRef<"tbody"> & {
+    classModifier?: string;
+};
+declare const TBody: ({ children, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { TBody };

package/dist/Table/TBody.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../agent";
+const TBody = ({ children, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-table__body");
+    return (_jsx("tbody", { className: componentClassName, ...otherProps, children: children }));
+};
+export { TBody };

package/dist/Table/THead.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from "react";
+type Props = ComponentPropsWithoutRef<"thead"> & {
+    classModifier?: string;
+};
+declare const THead: ({ children, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { THead };

package/dist/Table/THead.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../Form/core";
+const THead = ({ children, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-table__thead");
+    return (_jsx("thead", { className: componentClassName, ...otherProps, children: children }));
+};
+export { THead };

package/dist/Table/Table.d.ts

@@ -0,0 +1,30 @@
+import { ComponentPropsWithoutRef } from "react";
+import "@axa-fr/design-system-slash-css/dist/Table/Table.agent.scss";
+type TableProps = ComponentPropsWithoutRef<"table"> & {
+    classModifier?: string;
+};
+declare const Table: {
+    ({ className, classModifier, children, ...othersProps }: TableProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        classModifier?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ children, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        classModifier?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    THead: ({ children, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        classModifier?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    TBody: ({ children, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+        classModifier?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Th: ({ children, id, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & {
+        classModifier?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Tr: ({ children, id, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+        classModifier?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Td: ({ children, id, className, classModifier, ...otherProps }: Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & {
+        classModifier?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export { Table };

package/dist/Table/Table.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../Form/core";
+import { TBody } from "./TBody";
+import { THead } from "./THead";
+import { Td } from "./Td";
+import { Th } from "./Th";
+import { Tr } from "./Tr";
+import "@axa-fr/design-system-slash-css/dist/Table/Table.agent.scss";
+const Table = ({ className, classModifier, children, ...othersProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-table");
+    return (_jsx("table", { className: componentClassName, ...othersProps, children: children }));
+};
+Table.Header = THead;
+Table.Body = TBody;
+Table.THead = THead;
+Table.TBody = TBody;
+Table.Th = Th;
+Table.Tr = Tr;
+Table.Td = Td;
+export { Table };

package/dist/Table/Table.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Paging } from "./Pagination/Paging";
+import { Table } from "./Table";
+declare const meta: Meta<typeof Paging>;
+export default meta;
+export declare const Simple: StoryObj<typeof Table>;
+export declare const WithPagination: StoryObj<typeof Paging>;

package/dist/Table/Table.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Paging } from "./Pagination/Paging";
+import { Table } from "./Table";
+const meta = {
+    component: Paging,
+    title: "Agent/Components/Table",
+    argTypes: { onChange: { action: "onChange" } },
+};
+export default meta;
+export const Simple = {
+    name: "Simple table",
+    render: () => (_jsx(Table, { children: _jsxs(Table.THead, { children: [_jsx(Table.Tr, { children: _jsx(Table.Th, { colSpan: 3, children: "Some text" }) }), _jsxs(Table.Tr, { children: [_jsx(Table.Th, { rowSpan: 2, children: "Some text" }), _jsx(Table.Td, { children: _jsx("strong", { children: "Some bold text" }) }), _jsx(Table.Td, { children: "Some text" })] }), _jsxs(Table.Tr, { children: [_jsx(Table.Td, { children: "Some text" }), _jsx(Table.Td, { children: "Some text" })] }), _jsxs(Table.Tr, { children: [_jsx(Table.Td, { children: "Some text" }), _jsx(Table.Td, { children: "Some text" }), _jsx(Table.Td, { children: "Some text" })] })] }) })),
+    args: {},
+    argTypes: {},
+};
+export const WithPagination = {
+    name: "Table with pagination",
+    render: ({ currentPage, numberItems, numberPages, mode, ...args }) => (_jsxs(_Fragment, { children: [_jsx(Table, { children: _jsxs(Table.THead, { children: [_jsx(Table.Tr, { children: _jsx(Table.Th, { colSpan: 3, children: "Some text" }) }), _jsxs(Table.Tr, { children: [_jsx(Table.Th, { rowSpan: 2, children: "Some text" }), _jsx(Table.Td, { children: _jsx("strong", { children: "Some bold text" }) }), _jsx(Table.Td, { children: "Some text" })] }), _jsxs(Table.Tr, { children: [_jsx(Table.Td, { children: "Some text" }), _jsx(Table.Td, { children: "Some text" })] }), _jsxs(Table.Tr, { children: [_jsx(Table.Td, { children: "Some text" }), _jsx(Table.Td, { children: "Some text" }), _jsx(Table.Td, { children: "Some text" })] })] }) }), _jsx(Paging, { currentPage: currentPage, numberItems: numberItems, numberPages: numberPages, mode: mode, ...args })] })),
+    args: {
+        currentPage: 3,
+        numberItems: 10,
+        numberPages: 10,
+        mode: "default",
+        items: [5, 10, 50, 100],
+    },
+    argTypes: {
+        currentPage: { control: { type: "number" } },
+        numberItems: { control: { type: "number" } },
+        numberPages: { control: { type: "number" } },
+        mode: { options: ["default", "light"], control: { type: "radio" } },
+        onChange: { table: { disable: true } },
+    },
+};

package/dist/Table/Td.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from "react";
+type Props = ComponentPropsWithoutRef<"td"> & {
+    classModifier?: string;
+};
+declare const Td: ({ children, id, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Td };

package/dist/Table/Td.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../Form/core";
+const Td = ({ children, id, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-table__cell");
+    return (_jsx("td", { className: componentClassName, id: id, ...otherProps, children: children }, id));
+};
+export { Td };

package/dist/Table/Th.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from "react";
+type Props = ComponentPropsWithoutRef<"th"> & {
+    classModifier?: string;
+};
+declare const Th: ({ children, id, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Th };

package/dist/Table/Th.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../Form/core";
+const Th = ({ children, id, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-table__th");
+    return (_jsx("th", { className: componentClassName, id: id, ...otherProps, children: children }, id));
+};
+export { Th };

package/dist/Table/Tr.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from "react";
+type Props = ComponentPropsWithoutRef<"tr"> & {
+    classModifier?: string;
+};
+declare const Tr: ({ children, id, className, classModifier, ...otherProps }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Tr };

package/dist/Table/Tr.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../Form/core";
+const Tr = ({ children, id, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-table__tr");
+    return (_jsx("tr", { className: componentClassName, ...otherProps, children: children }, id));
+};
+export { Tr };

package/dist/Table/index.d.ts

@@ -0,0 +1,7 @@
+export { Paging } from "./Pagination/Paging";
+export { TBody } from "./TBody";
+export { THead } from "./THead";
+export { Table } from "./Table";
+export { Td } from "./Td";
+export { Th } from "./Th";
+export { Tr } from "./Tr";

package/dist/Table/index.js

@@ -0,0 +1,7 @@
+export { Paging } from "./Pagination/Paging";
+export { TBody } from "./TBody";
+export { THead } from "./THead";
+export { Table } from "./Table";
+export { Td } from "./Td";
+export { Th } from "./Th";
+export { Tr } from "./Tr";

package/dist/Tabs/Agent/Tabs.agent.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TabProps } from "./components/Tab";
+import { TabsCoreProps } from "./components/TabsCore";
+type TTabs = React.ComponentType<TabsCoreProps> & {
+    Tab: React.ComponentType<TabProps>;
+};
+declare const Tabs: TTabs;
+export { Tabs };

package/dist/Tabs/Agent/Tabs.agent.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tab } from "./components/Tab";
+import { TabsCore } from "./components/TabsCore";
+const Tabs = (props) => _jsx(TabsCore, { ...props });
+Tabs.Tab = Tab;
+export { Tabs };

package/dist/Tabs/Agent/Tabs.agent.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, type StoryObj } from "@storybook/react";
+import type { TabsCoreProps } from "./components/TabsCore";
+declare const _default: Meta;
+export default _default;
+export declare const SingleTab: StoryObj<TabsCoreProps>;
+export declare const ComplexTabs: StoryObj<TabsCoreProps>;

package/dist/Tabs/Agent/Tabs.agent.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "../../Badge/Badge";
+import { Tabs } from "./Tabs.agent";
+export default {
+    title: "Agent/Components/Tabs",
+    component: Tabs,
+    parameters: {
+        options: {},
+    },
+    argTypes: {
+        onChange: { action: "tab changed" },
+    },
+};
+const TabTitleIconLeft = (_jsxs("span", { children: [_jsx("i", { className: "glyphicon glyphicon-ok" }), " Title with left icon"] }));
+const TabTitleIconRight = (_jsxs("span", { children: ["Title with right icon ", _jsx("i", { className: "glyphicon glyphicon-facetime-video" })] }));
+const TabTitleBadge = (_jsxs("span", { children: ["Title with badge ", _jsx(Badge, { classModifier: "danger", children: " 42 " })] }));
+const TabTitleIconBadge = (_jsxs("span", { children: ["Title with badge and left icon", _jsx(Badge, { classModifier: "error", children: " Lorem ipsum " }), _jsx("i", { className: "glyphicon glyphicon-facetime-video" })] }));
+export const SingleTab = {
+    name: "Single Tab",
+    render: (args) => (_jsx(Tabs, { ...args, children: _jsx(Tabs.Tab, { title: "My Title", children: "Content of my single tab" }) })),
+    args: { activeIndex: "0" },
+    argTypes: { onChange: { action: "onChange" } },
+};
+export const ComplexTabs = {
+    name: "Complex Tabs",
+    render: (args) => (_jsxs(Tabs, { ...args, children: [_jsx(Tabs.Tab, { title: TabTitleIconLeft, classModifier: "has-icon-left", children: "Content of my first tab" }), _jsx(Tabs.Tab, { title: TabTitleIconRight, classModifier: "has-icon-right", children: "Content of my second tab" }), _jsx(Tabs.Tab, { title: TabTitleBadge, children: "Content of my third tab " }), _jsx(Tabs.Tab, { title: TabTitleIconBadge, classModifier: "has-icon-left", children: "Content of my fifth tab" })] })),
+    args: { activeIndex: "1" },
+    argTypes: { onChange: { action: "onChange" } },
+};

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

@@ -0,0 +1,8 @@
+import React from "react";
+type PaneComponentProps = {
+    active: boolean;
+    className?: string;
+    children?: React.ReactNode;
+};
+declare const Pane: ({ children, className, active, }: PaneComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+export { Pane };

package/dist/Tabs/Agent/components/Pane.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Pane = ({ children, className = "af-tabs__pane", active, }) => {
+    if (!active) {
+        return null;
+    }
+    return _jsx("div", { className: className, children: children });
+};
+export { Pane };

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

@@ -0,0 +1,10 @@
+import "@axa-fr/design-system-slash-css/dist/Tabs/Tabs.agent.scss";
+import { ReactNode } from "react";
+export type TabProps = {
+    title: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    classModifier?: string;
+};
+declare const Tab: () => import("react/jsx-runtime").JSX.Element;
+export { Tab };

package/dist/Tabs/Agent/components/Tab.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Tabs/Tabs.agent.scss";
+const Tab = () => _jsx("span", {});
+export { Tab };

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { TabsStatelessProps } from "./TabsStateless";
+type Tabs = {
+    onChange?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    activeIndex?: string;
+};
+export type TabsCoreProps = Tabs & Omit<TabsStatelessProps, "activeIndex">;
+export declare const onChangeEvent: (onChange?: (event: React.MouseEvent<HTMLButtonElement>) => void) => (setState: (newValue: string) => void) => (event: React.MouseEvent<HTMLButtonElement>, index: string) => void;
+declare const TabsCore: React.FunctionComponent<TabsCoreProps>;
+export { TabsCore };

package/dist/Tabs/Agent/components/TabsCore.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { TabsStateless } from "./TabsStateless";
+const DEFAULT_ACTIVE_INDEX = "0";
+export const onChangeEvent = (onChange) => (setState) => (event, index) => {
+    if (onChange) {
+        onChange(event);
+    }
+    if (index) {
+        setState(index);
+    }
+};
+const TabsCore = ({ activeIndex = DEFAULT_ACTIVE_INDEX, onChange, ...otherProps }) => {
+    const [stateActiveIndex, setActiveIndex] = useState(activeIndex);
+    return (_jsx(TabsStateless, { activeIndex: stateActiveIndex, ...otherProps, onChange: onChangeEvent(onChange)(setActiveIndex) }));
+};
+export { TabsCore };

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+export interface TabsStatelessProps {
+    children: ReactNode;
+    activeIndex: string;
+    className?: string;
+    classModifier?: string;
+}
+export interface TabsStatelessHandlers {
+    onChange: (event: React.MouseEvent<HTMLButtonElement>, index: string) => void;
+}
+type Props = TabsStatelessProps & TabsStatelessHandlers;
+declare const TabsStateless: ({ activeIndex, className, classModifier, children, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { TabsStateless };

package/dist/Tabs/Agent/components/TabsStateless.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { getComponentClassName } from "../../../agent";
+import { Pane } from "./Pane";
+import { Title } from "./Title";
+const TabsStateless = ({ activeIndex, className = "af-tabs", classModifier, children, onChange, }) => {
+    const componentClassName = getComponentClassName(className, classModifier);
+    return (_jsxs("div", { className: componentClassName, children: [_jsx("ul", { className: "af-tabs__control", children: Children.map(children, (child, index) => isValidElement(child) && (_jsx(Title, { active: activeIndex === index.toString(), onChange: onChange, id: `${index}`, classModifier: child.props.classModifier, children: child.props.title }, `title-${index}`))) }), _jsx("div", { className: "af-tabs__content", children: Children.map(children, (child, index) => isValidElement(child) && (_jsx(Pane, { active: activeIndex === index.toString(), children: child.props.children }, `pane-${index}`))) })] }));
+};
+export { TabsStateless };

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

@@ -0,0 +1,15 @@
+import React from "react";
+export type TitleComponentProps = {
+    enable?: boolean | null;
+    active: boolean;
+    className?: string;
+    classModifier?: string;
+    id: string;
+    children?: React.ReactNode;
+    onChange: (event: React.MouseEvent<HTMLButtonElement>, index: string) => void;
+};
+declare const Title: {
+    ({ active, onChange, children, classModifier, className, enable, id, }: TitleComponentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Title };

package/dist/Tabs/Agent/components/Title.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { getComponentClassName } from "../../../agent";
+const Title = ({ active, onChange, children, classModifier, className, enable, id, }) => {
+    const newClassModifier = classNames(classModifier, {
+        disabled: enable === false,
+        active,
+    });
+    const componentClassName = getComponentClassName(className, newClassModifier, "af-tabs__item");
+    return (_jsx("li", { className: componentClassName, children: _jsx("button", { type: "button", id: id, className: "af-tabs__link", onClick: (event) => onChange(event, id), children: children }) }));
+};
+Title.displayName = "Title";
+export { Title };

package/dist/Tabs/Client/Tabs.client.d.ts

@@ -0,0 +1,16 @@
+import "@axa-fr/design-system-slash-css/dist/Tabs/Tabs.client.scss";
+import { ReactNode } from "react";
+export declare enum Direction {
+    center = "center"
+}
+type TabsProps = {
+    items: {
+        title: string;
+        content: string | ReactNode;
+        icon?: ReactNode;
+    }[];
+    preSelectedTabIndex?: number;
+    direction?: Direction;
+};
+export declare const TabsClient: ({ items, preSelectedTabIndex, direction, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Tabs/Client/Tabs.client.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Tabs/Tabs.client.scss";
+import classNames from "classnames";
+import { useCallback, useRef, useState } from "react";
+export var Direction;
+(function (Direction) {
+    Direction["center"] = "center";
+})(Direction || (Direction = {}));
+export const TabsClient = ({ items, preSelectedTabIndex, direction, }) => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTabIndex || 0);
+    const buttonRefs = useRef([]);
+    const tablistRef = useRef(null);
+    const totalTabs = items.length;
+    const isActive = (index) => index === selectedTabIndex;
+    const onChangeTab = useCallback((e) => {
+        const firstTabIndex = 0;
+        const lastTabIndex = totalTabs - 1;
+        const goToNextTab = (nextTabIndex) => {
+            setSelectedTabIndex(nextTabIndex);
+            buttonRefs.current[nextTabIndex].focus();
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        switch (e.key) {
+            case "ArrowRight":
+                goToNextTab(selectedTabIndex < lastTabIndex
+                    ? selectedTabIndex + 1
+                    : firstTabIndex);
+                break;
+            case "ArrowLeft":
+                goToNextTab(selectedTabIndex > firstTabIndex
+                    ? selectedTabIndex - 1
+                    : lastTabIndex);
+                break;
+            case "Home":
+                goToNextTab(firstTabIndex);
+                break;
+            case "End":
+                goToNextTab(lastTabIndex);
+                break;
+            default:
+                break;
+        }
+    }, [selectedTabIndex, totalTabs]);
+    return (_jsxs("div", { className: classNames("af-tabs-client", direction === Direction.center ? `af-tabs-client--center` : ""), children: [_jsx("div", { role: "tablist", ref: tablistRef, children: items.map((item, index) => (_jsxs("button", { role: "tab", id: `tab-${index}`, "aria-selected": isActive(index), "aria-controls": `tabpanel-${index}`, onKeyDown: onChangeTab, onClick: () => setSelectedTabIndex(index), ref: (element) => {
+                        buttonRefs.current[index] = element;
+                    }, type: "button", tabIndex: isActive(index) ? 0 : -1, children: [item.icon, _jsx("span", { children: item.title })] }, `tab-${item.title}`))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", "aria-hidden": !isActive(index), id: `tabpanel-${index}`, "aria-labelledby": `tab-${index}`, children: item.content }, `tabpanel-${item.title}`)))] }));
+};

package/dist/Tabs/Client/Tabs.client.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ReactNode } from "react";
+import { Direction, TabsClient } from "./Tabs.client";
+declare const meta: Meta<typeof TabsClient>;
+export default meta;
+type StoryProps = Omit<React.ComponentProps<typeof TabsClient>, "items" | "direction" | "preSelectedTabIndex"> & {
+    items: {
+        title: string;
+        content: string | ReactNode;
+        icon?: ReactNode;
+    }[];
+    preSelectedTabIndex?: number;
+    direction?: Direction;
+};
+export declare const TabsStory: StoryObj<StoryProps>;
+export declare const TabsCenterDirectionStory: StoryObj<StoryProps>;
+export declare const TabsWithReactNodeStory: StoryObj<typeof TabsClient>;