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

package/dist/Accordion/Client/Accordion.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.client.scss";
+export declare const Accordion: {
+    ({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    Item: ({ title, children }: {
+        title: string;
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/Accordion/Client/Accordion.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.client.scss";
+import { AccordionItem } from "./AccordionItem";
+export const Accordion = ({ children }) => {
+    return _jsx("div", { className: "af-accordion-client", children: children });
+};
+Accordion.Item = AccordionItem;

package/dist/Accordion/Client/Accordion.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "./Accordion";
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type StoryProps = {
+    numberOfItems: number;
+};
+export declare const AccordionStory: StoryObj<StoryProps>;

package/dist/Accordion/Client/Accordion.stories.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Accordion } from "./Accordion";
+const meta = {
+    component: Accordion,
+    title: "Client/Components/Accordion",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const AccordionStory = {
+    name: "Accordion",
+    render: ({ numberOfItems }) => {
+        return (_jsx(Accordion, { children: Array.from({ length: numberOfItems }, (_, i) => (_jsxs(Accordion.Item, { title: `Title ${i + 1}`, children: ["Content ", i + 1] }, i))) }));
+    },
+    args: {
+        numberOfItems: 3,
+    },
+    argTypes: {
+        numberOfItems: {
+            control: { type: "range", min: 1, max: 10 },
+        },
+    },
+};

package/dist/Accordion/Client/AccordionItem.d.ts

@@ -0,0 +1,6 @@
+type AccordionItemProps = {
+    title: string;
+    children: React.ReactNode;
+};
+export declare const AccordionItem: ({ title, children }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Accordion/Client/AccordionItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+export const AccordionItem = ({ title, children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const id = useId();
+    const onClick = () => {
+        setIsOpen(!isOpen);
+    };
+    return (_jsxs("div", { className: "af-accordion-client__item", children: [_jsx("h3", { children: _jsx("button", { type: "button", "aria-expanded": isOpen, "aria-controls": `accordion-section-${id}`, id: `accordion-title-${id}`, onClick: onClick, children: title }) }), _jsx("div", { role: "region", "aria-labelledby": `accordion-title-${id}`, id: `accordion-section-${id}`, hidden: !isOpen, children: children })] }));
+};

package/dist/Action/Action.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from "react";
+import "@axa-fr/design-system-slash-css/dist/Action/Action.scss";
+type ActionCoreProps = ComponentPropsWithoutRef<"a"> & {
+    icon: string;
+    classModifier?: string;
+};
+export declare const Action: ({ icon, className, classModifier, ...otherProps }: ActionCoreProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Action/Action.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "../Form/core";
+import "@axa-fr/design-system-slash-css/dist/Action/Action.scss";
+export const Action = ({ icon, className, classModifier, ...otherProps }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "btn af-btn--circle");
+    return (_jsx("a", { ...otherProps, className: componentClassName, children: _jsx("i", { className: `glyphicon glyphicon-${icon}` }) }));
+};

package/dist/Action/Action.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Action } from "./Action";
+declare const meta: Meta<typeof Action>;
+export default meta;
+export declare const Default: StoryObj<typeof Action>;
+export declare const Button: StoryObj<typeof Action>;

package/dist/Action/Action.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Action } from "./Action";
+const meta = {
+    title: "Agent/Components/Action",
+    component: Action,
+};
+export default meta;
+export const Default = {
+    name: "Action Link",
+    render: ({ ...args }) => _jsx(Action, { ...args }),
+    args: {
+        href: "http://www.axa.fr",
+        icon: "link",
+        title: "Lien de test",
+        target: "_blank",
+        id: "id",
+    },
+};
+export const Button = {
+    name: "Action Button",
+    render: ({ onClick, ...args }) => _jsx(Action, { onClick: onClick, ...args }),
+    args: {
+        icon: "floppy-disk",
+        title: "Enregistrer",
+        id: "id",
+    },
+    argTypes: {
+        onClick: { action: "clicked" },
+    },
+};

package/dist/Alert/Alert.agent.d.ts

@@ -0,0 +1,16 @@
+import { MouseEventHandler, PropsWithChildren } from "react";
+import "@axa-fr/design-system-slash-css/dist/Alert/Alert.agent.scss";
+export declare enum TypeIcons {
+    error = "glyphicon glyphicon-minus-sign",
+    danger = "glyphicon glyphicon-alert",
+    info = "glyphicon glyphicon-info-sign",
+    success = "glyphicon glyphicon-ok"
+}
+export type AlertCoreComponentProps = {
+    title: string;
+    iconClassName?: string;
+    onClose?: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    classModifier?: "error" | "danger" | "info" | "success";
+};
+export declare const Alert: ({ className, onClose, iconClassName, title, children, classModifier, }: PropsWithChildren<AlertCoreComponentProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/Alert/Alert.agent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "../Form/core";
+import "@axa-fr/design-system-slash-css/dist/Alert/Alert.agent.scss";
+export var TypeIcons;
+(function (TypeIcons) {
+    TypeIcons["error"] = "glyphicon glyphicon-minus-sign";
+    TypeIcons["danger"] = "glyphicon glyphicon-alert";
+    TypeIcons["info"] = "glyphicon glyphicon-info-sign";
+    TypeIcons["success"] = "glyphicon glyphicon-ok";
+})(TypeIcons || (TypeIcons = {}));
+export const Alert = ({ className, onClose, iconClassName, title, children, classModifier, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-alert");
+    return (_jsxs("div", { className: componentClassName, role: "alert", children: [_jsxs("div", { className: "af-alert__title", children: [_jsx("div", { className: "af-alert__title-icon", children: _jsx("i", { className: iconClassName ||
+                                TypeIcons[classModifier] }) }), _jsx("div", { className: "af-alert__title-text", children: title }), onClose && (_jsx("button", { type: "button", className: "af-alert__title-icon-close", onClick: onClose, "aria-label": "close", children: _jsx("i", { className: "glyphicon glyphicon-close" }) }))] }), children && (_jsxs("div", { className: "af-alert__content", children: [_jsx("div", { className: "af-alert__content-left" }), _jsx("div", { className: "af-alert__content-right", children: children })] }))] }));
+};

package/dist/Alert/Alert.agent.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert.agent";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+export declare const Default: StoryObj<typeof Alert>;
+export declare const DangerAlert: StoryObj<typeof Alert>;
+export declare const InfoAlert: StoryObj<typeof Alert>;
+export declare const SuccessAlert: StoryObj<typeof Alert>;
+export declare const ErrorAlert: StoryObj<typeof Alert>;

package/dist/Alert/Alert.agent.stories.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert } from "./Alert.agent";
+const MODIFIERS = ["success", "info", "danger", "error"];
+const meta = {
+    title: "Agent/Components/Alert",
+    component: Alert,
+};
+export default meta;
+export const Default = {
+    name: "Default",
+    args: {
+        classModifier: "danger",
+        title: "Attention: Ceci est une alerte",
+    },
+    argTypes: {
+        classModifier: {
+            options: MODIFIERS,
+            control: { type: "select" },
+        },
+    },
+};
+export const DangerAlert = {
+    name: "Danger Alert",
+    args: {
+        classModifier: "danger",
+        title: "Attention: des informations sont manquantes",
+        iconClassName: "glyphicon glyphicon-alert",
+    },
+};
+export const InfoAlert = {
+    name: "Info Alert",
+    args: {
+        classModifier: "info",
+        title: "Attention: des informations sont manquantes",
+        iconClassName: "glyphicon glyphicon-info-sign",
+    },
+};
+export const SuccessAlert = {
+    name: "Success Alert",
+    args: {
+        classModifier: "success",
+        title: "Succès: votre demande a bien été enregistrée.",
+        iconClassName: "glyphicon glyphicon-ok",
+    },
+};
+export const ErrorAlert = {
+    name: "Error Alert",
+    args: {
+        classModifier: "error",
+        title: "Erreur dans les champs suivants :",
+        iconClassName: "glyphicon glyphicon-minus-sign",
+        children: (_jsxs("ul", { children: [_jsx("li", { children: "Le nom est obligatoire" }), _jsx("li", { children: "Le pr\u00E9nom est obligatoire" }), _jsx("li", { children: "L'email est obligatoire" }), _jsx("li", { children: "Le format de date est invalide" })] })),
+    },
+};

package/dist/Alert/Alert.client.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactElement } from "react";
+import "@axa-fr/design-system-slash-css/dist/Alert/Alert.client.scss";
+import { Link } from "../Link/Link.client";
+export type AlertType = "validation" | "error" | "warning" | "information" | "neutral";
+type AlertProps = {
+    type: AlertType;
+    title?: string;
+    link?: ReactElement<typeof Link>;
+} & ComponentPropsWithoutRef<"div">;
+export declare const Alert: ({ type, title, children, link, }: PropsWithChildren<AlertProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Alert/Alert.client.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/emergency_home.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
+import "@axa-fr/design-system-slash-css/dist/Alert/Alert.client.scss";
+import { Svg } from "../Svg";
+function getIconFromType(type) {
+    switch (type) {
+        case "error":
+            return _jsx(Svg, { src: errorIcon, className: "af-alert__icon" });
+        case "validation":
+            return _jsx(Svg, { src: checkCircleOutline, className: "af-alert__icon" });
+        case "neutral":
+        case "warning":
+            return _jsx(Svg, { src: errorOutline, className: "af-alert__icon" });
+        case "information":
+        default:
+            return _jsx(Svg, { src: wbIncandescentOutlined, className: "af-alert__icon" });
+    }
+}
+export const Alert = ({ type = "information", title, children, link, }) => {
+    return (_jsxs("div", { className: `af-alert af-alert--${type}`, children: [getIconFromType(type), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx("p", { className: "af-alert__title", children: title }), children, link && _jsx("p", { className: "af-alert__link", children: link })] })] }));
+};

package/dist/Alert/Alert.client.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert.client";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+export declare const Default: StoryObj<typeof Alert>;

package/dist/Alert/Alert.client.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from "./Alert.client";
+import { Link } from "../Link/Link.client";
+const MODIFIERS = ["information", "neutral", "error", "validation", "warning"];
+const meta = {
+    title: "Client/Components/Alert",
+    component: Alert,
+};
+export default meta;
+export const Default = {
+    name: "Default",
+    args: {
+        title: "My Alert title",
+        type: "information",
+        children: "Vestibulum nunc neque, sodales non luctus in, dictum vitae nisl. Curabitur vitae massa non nisl lacinia tempus. Pellentesque id nulla tortor.",
+        link: (_jsx(Link, { openInNewTab: true, href: "https://fakelink.com", children: "Plus de d\u00E9tails" })),
+    },
+    argTypes: {
+        type: {
+            options: MODIFIERS,
+            control: { type: "select" },
+            defaultValue: "information",
+        },
+    },
+};

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef, PropsWithChildren } from "react";
+import "@axa-fr/design-system-slash-css/dist/Badge/Badge.scss";
+type BadgeProps = ComponentPropsWithRef<"span"> & {
+    classModifier?: string;
+    disabled?: boolean;
+};
+export declare const Badge: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<BadgeProps>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/Badge/Badge.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { getComponentClassName } from "../Form/core";
+import "@axa-fr/design-system-slash-css/dist/Badge/Badge.scss";
+export const Badge = forwardRef(({ children, className, classModifier, ...otherProps }, ref) => {
+    const componentClassName = getComponentClassName(className, classModifier, "af-badge");
+    return (_jsx("span", { ref: ref, className: componentClassName, ...otherProps, children: children }));
+});
+Badge.displayName = "Badge";

package/dist/Badge/Badge.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "./Badge";
+declare const meta: Meta<typeof Badge>;
+export default meta;
+export declare const Default: StoryObj<typeof Badge>;
+export declare const BadgeIconStory: StoryObj<typeof Badge>;
+export declare const MultiExamples: StoryObj<typeof Badge>;

package/dist/Badge/Badge.stories.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "./Badge";
+const meta = {
+    title: "Agent/Components/Badge",
+    component: Badge,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const Default = {
+    name: "Badge",
+    args: {
+        children: "Lorem ipsum",
+        classModifier: "success",
+        disabled: false,
+    },
+    argTypes: {
+        classModifier: {
+            options: ["success", "info", "danger", "error"],
+            control: { type: "select" },
+            defaultValue: "succes",
+        },
+    },
+};
+export const BadgeIconStory = {
+    name: "Badge With Icon",
+    args: {
+        children: _jsx("i", { className: "glyphicon glyphicon-bell" }),
+        classModifier: "error",
+        disabled: false,
+    },
+    argTypes: {
+        classModifier: {
+            options: ["success", "info", "danger", "error"],
+            control: { type: "select" },
+            defaultValue: "error",
+        },
+    },
+};
+export const MultiExamples = {
+    name: "Badge with modifiers",
+    render: (args) => {
+        return (_jsxs("div", { style: {
+                display: "flex",
+                justifyContent: "space-evenly",
+                flexDirection: "column",
+                alignItems: "center",
+                flexWrap: "wrap",
+            }, children: [_jsxs("div", { style: {
+                        display: "flex",
+                        justifyContent: "space-evenly",
+                        alignItems: "center",
+                        padding: "2rem",
+                        flexWrap: "wrap",
+                        gap: "2rem",
+                    }, children: [_jsx(Badge, { disabled: args.disabled, classModifier: "success", children: "Badge Success" }), _jsx(Badge, { disabled: args.disabled, classModifier: "danger", children: "Badge Danger" }), _jsx(Badge, { disabled: args.disabled, classModifier: "info", children: "Badge Info" }), _jsx(Badge, { disabled: args.disabled, classModifier: "error", children: "Badge Error" })] }), _jsxs("div", { style: {
+                        display: "flex",
+                        justifyContent: "space-evenly",
+                        alignItems: "center",
+                        padding: "2rem",
+                        flexWrap: "wrap",
+                        gap: "5rem",
+                    }, children: [_jsx(Badge, { disabled: args.disabled, classModifier: "success", children: _jsx("i", { className: "glyphicon glyphicon-bell" }) }), _jsx(Badge, { disabled: args.disabled, classModifier: "danger", children: _jsx("i", { className: "glyphicon glyphicon-bell" }) }), _jsx(Badge, { disabled: args.disabled, classModifier: "info", children: _jsx("i", { className: "glyphicon glyphicon-bell" }) }), _jsx(Badge, { disabled: args.disabled, classModifier: "error", children: _jsx("i", { className: "glyphicon glyphicon-bell" }) })] })] }));
+    },
+    args: {
+        disabled: false,
+    },
+};

package/dist/Button/Button.agent.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-slash-css/dist/Button/Button.agent.scss";
+import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
+type ButtonProps = {
+    classModifier?: string;
+} & ComponentPropsWithoutRef<"button">;
+export declare const ButtonAgent: ({ children, classModifier, className, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Button/Button.agent.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Button/Button.agent.scss";
+import classNames from "classnames";
+export const ButtonAgent = ({ children, classModifier, className, ...args }) => {
+    const classes = classModifier
+        ?.split(" ")
+        .map((modifier) => `af-btn--${modifier}`)
+        .join(" ");
+    return (_jsx("button", { className: classNames("af-btn", classes, className), type: "button", ...args, children: children }));
+};

package/dist/Button/Button.agent.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ButtonAgent } from "./Button.agent";
+declare const meta: Meta<typeof ButtonAgent>;
+export default meta;
+type StoryProps = Omit<React.ComponentProps<typeof ButtonAgent>, "classModifier" | "children"> & {
+    children: string;
+    classModifier: string[];
+};
+type Story = StoryObj<StoryProps>;
+export declare const Playground: Story;
+export declare const MultiExamples: StoryObj<typeof ButtonAgent>;
+export declare const Reverse: StoryObj<typeof ButtonAgent>;
+export declare const Success: StoryObj<typeof ButtonAgent>;
+export declare const Danger: StoryObj<typeof ButtonAgent>;
+export declare const WithIconRight: StoryObj<typeof ButtonAgent>;
+export declare const WithIconLeft: StoryObj<typeof ButtonAgent>;
+export declare const Small: StoryObj<typeof ButtonAgent>;
+export declare const Circle: StoryObj<typeof ButtonAgent>;

package/dist/Button/Button.agent.stories.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ButtonAgent } from "./Button.agent";
+const MODIFIERS = [
+    "success",
+    "info",
+    "danger",
+    "reverse",
+    "disabled",
+    "small",
+    "hasiconLeft",
+    "hasiconRight",
+];
+const meta = {
+    component: ButtonAgent,
+    title: "Agent/Components/Button",
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: { onClick: { action: "clicked" } },
+};
+export default meta;
+export const Playground = {
+    name: "Button",
+    render: ({ children: text, classModifier, onClick, ...args }) => (_jsx(ButtonAgent, { classModifier: classModifier.join(" "), onClick: onClick, ...args, children: text })),
+    args: {
+        children: "Button",
+        classModifier: [],
+    },
+    argTypes: {
+        classModifier: {
+            options: MODIFIERS,
+            control: { type: "multi-select" },
+        },
+    },
+};
+export const MultiExamples = {
+    name: "Button with modifiers",
+    render: () => {
+        return (_jsxs("div", { style: {
+                display: "flex",
+                justifyContent: "space-evenly",
+                padding: "2rem",
+                flexWrap: "wrap",
+                gap: "2rem",
+            }, children: [_jsx(ButtonAgent, { classModifier: "reverse", children: "Button Reverse" }), _jsx(ButtonAgent, { classModifier: "success", children: "Button Success" }), _jsx(ButtonAgent, { classModifier: "danger", children: "Button Danger" }), _jsx(ButtonAgent, { classModifier: "small", children: "Button Small" }), _jsx(ButtonAgent, { classModifier: "disabled", children: "Button disabled" })] }));
+    },
+};
+export const Reverse = {
+    name: "Button reverse",
+    args: {
+        children: "Button Reverse",
+        classModifier: "reverse",
+    },
+};
+export const Success = {
+    name: "Button success",
+    args: {
+        children: "Button success",
+        classModifier: "success",
+    },
+};
+export const Danger = {
+    name: "Button danger",
+    args: {
+        children: "Button Danger",
+        classModifier: "danger",
+    },
+};
+export const WithIconRight = {
+    name: "Button with right icon",
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx("span", { className: "glyphicon glyphicon-arrow-right" }), _jsx("span", { className: "af-btn__text", children: "With icon" })] })),
+        classModifier: "hasiconRight",
+    },
+};
+export const WithIconLeft = {
+    name: "Button with left icon",
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx("span", { className: "glyphicon glyphicon-arrow-left" }), _jsx("span", { className: "af-btn__text", children: "With icon" })] })),
+        classModifier: "hasiconLeft",
+    },
+};
+export const Small = {
+    name: "Button small",
+    args: {
+        children: "Button Small",
+        classModifier: "small",
+    },
+};
+export const Circle = {
+    name: "Button circle",
+    args: {
+        classModifier: "circle",
+        title: "Save",
+        children: _jsx("span", { className: "glyphicon glyphicon-floppy-disk" }),
+    },
+};

package/dist/Button/Button.client.d.ts

@@ -0,0 +1,17 @@
+import "@axa-fr/design-system-slash-css/dist/Button/Button.client.scss";
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+export declare enum Variants {
+    primary = "primary",
+    business = "primary-business",
+    secondary = "secondary",
+    secondaryError = "secondary-error",
+    tertiary = "tertiary",
+    ghost = "ghost"
+}
+type ButtonProps = {
+    variant?: Variants;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+} & ComponentPropsWithoutRef<"button">;
+export declare const ButtonClient: ({ children, className, disabled, variant, iconLeft, iconRight, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Button/Button.client.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-slash-css/dist/Button/Button.client.scss";
+import classNames from "classnames";
+export var Variants;
+(function (Variants) {
+    Variants["primary"] = "primary";
+    Variants["business"] = "primary-business";
+    Variants["secondary"] = "secondary";
+    Variants["secondaryError"] = "secondary-error";
+    Variants["tertiary"] = "tertiary";
+    Variants["ghost"] = "ghost";
+})(Variants || (Variants = {}));
+export const ButtonClient = ({ children, className, disabled, variant, iconLeft, iconRight, ...args }) => {
+    return (_jsxs("button", { className: classNames("af-btn-client", variant && `af-btn-client--${variant.toString()}`, className), disabled: disabled, type: "button", ...args, children: [iconLeft, children, iconRight] }));
+};

package/dist/Button/Button.client.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactNode } from "react";
+import { ButtonClient, Variants } from "./Button.client";
+declare const meta: Meta<typeof ButtonClient>;
+export default meta;
+type StoryProps = Omit<React.ComponentProps<typeof ButtonClient>, "children" | "variant" | "disabled" | "iconLeft" | "iconRight"> & {
+    children: string;
+    variant: Variants;
+    disabled: boolean;
+    iconLeft: ReactNode;
+    iconRight: ReactNode;
+};
+type Story = StoryObj<StoryProps>;
+export declare const Playground: Story;
+export declare const Business: StoryObj<typeof ButtonClient>;
+export declare const Secondary: StoryObj<typeof ButtonClient>;
+export declare const SecondaryError: StoryObj<typeof ButtonClient>;
+export declare const Tertiary: StoryObj<typeof ButtonClient>;
+export declare const Ghost: StoryObj<typeof ButtonClient>;
+export declare const MultiExamples: StoryObj<typeof ButtonClient>;
+export declare const WithIconRight: StoryObj<typeof ButtonClient>;
+export declare const WithIconLeft: StoryObj<typeof ButtonClient>;