@axa-fr/canopee-react 2.0.0-alpha.75 → 2.0.0-alpha.76

package/dist/distributeur/Form/Checkbox/Checkbox.d.ts

@@ -23,7 +23,7 @@ type Props = Omit<ComponentPropsWithRef<typeof CheckboxItem>, "value" | "label"
     mode?: keyof typeof CheckboxModes;
 } & OnChange;
 export declare const Checkbox: {
-    ({ id, name, options, disabled, children, values, mode, onChange, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+    ({ id, name, options, disabled, children, values, mode, onChange, className, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/distributeur/Form/Checkbox/Checkbox.js

@@ -3,6 +3,7 @@ import { createElement as _createElement } from "react";
 import React, {} from "react";
 import { CheckboxItem } from "./CheckboxItem";
 import { CheckboxModes } from "./CheckboxModes";
+import { getClassName } from "../../utilities";
 const defaultClassName = (mode) => {
     switch (mode) {
         case CheckboxModes.default:
@@ -13,17 +14,21 @@ const defaultClassName = (mode) => {
             return `af-form__checkbox-${mode}`;
     }
 };
-const CheckboxInner = ({ id, name, options, disabled, children, values = [], mode = CheckboxModes.default, onChange = () => { }, ...otherProps }) => {
-    const className = defaultClassName(mode);
+const CheckboxInner = ({ id, name, options, disabled, children, values = [], mode = CheckboxModes.default, onChange = () => { }, className, ...otherProps }) => {
+    const itemClassName = defaultClassName(mode);
+    const componentClassName = getClassName({
+        baseClassName: "af-form__checkbox-container",
+        className,
+    });
     const handleOnChange = ({ target: { value, checked }, }) => {
         const newValues = checked
             ? [...values, value]
             : values.filter((v) => v !== value);
         onChange({ values: newValues, target: { value, checked }, id, name });
     };
-    return (_jsx("div", { className: "af-form__checkbox-container", children: options.map((option) => {
+    return (_jsx("div", { className: componentClassName, children: options.map((option) => {
             const isChecked = values ? values.indexOf(option.value) >= 0 : false;
-            return (_createElement(CheckboxItem, { ...otherProps, onChange: handleOnChange, key: option.value, className: className, isChecked: isChecked, name: name, disabled: option.disabled || disabled, ...option }, children));
+            return (_createElement(CheckboxItem, { ...otherProps, onChange: handleOnChange, key: option.value, className: itemClassName, isChecked: isChecked, name: name, disabled: option.disabled || disabled, ...option }, children));
         }) }));
 };
 CheckboxInner.displayName = "Checkbox";

package/dist/distributeur/Form/Checkbox/CheckboxInput.js

@@ -6,7 +6,7 @@ import { CheckboxModes } from "./CheckboxModes";
 const CheckboxInput = ({ label, mode = "default", options, children, ...otherProps }) => {
     const newOptions = useOptionsWithId(options);
     return (_jsx(Field, { label: label, labelPosition: mode === CheckboxModes.classic ? "top" : "center", roleContainer: "group", ...otherProps, renderInput: ({ inputClassName, id, ariaInvalid, errorId, ...props }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: id, mode: mode, options: newOptions, className: ariaInvalid ? `${inputClassName} error` : inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: id, mode: mode, options: newOptions, className: inputClassName, "aria-describedby": errorId, "aria-invalid": ariaInvalid, ...props }), children] }));
         } }));
 };
 CheckboxInput.displayName = "CheckboxInput";

package/dist/distributeur/Form/NestedQuestion/NestedQuestion.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/NestedQuestion/NestedQuestion.css";
 import { getClassName } from "../../utilities";
+const baseClassName = "af-form__nested-question";
 export const NestedQuestion = ({ children, className, }) => {
     const componentClassName = getClassName({
-        baseClassName: "af-form__nested-question",
+        baseClassName,
         className,
     });
-    return (_jsxs("section", { className: componentClassName, children: [_jsx("div", { className: "af-form__nested-question-arrow" }), _jsx("section", { children: children })] }));
+    return (_jsxs("section", { className: componentClassName, children: [_jsx("div", { className: `${baseClassName}-arrow` }), _jsx("section", { children: children })] }));
 };

package/dist/distributeur/Form/Number/Number.d.ts

@@ -1,8 +1,8 @@
 import "@axa-fr/canopee-css/distributeur/Form/Text/Text.css";
 import { type ComponentPropsWithRef } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "type"> & {};
-declare const Number: {
+declare const NumberComponent: {
     ({ id, className, required, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Number };
+export { NumberComponent as Number };

package/dist/distributeur/Form/Number/Number.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/canopee-css/distributeur/Form/Text/Text.css";
 import { useId } from "react";
 import { getClassName } from "../../utilities/helpers/getClassName";
-const Number = ({ id, className, required, ...otherProps }) => {
+const NumberComponent = ({ id, className, required, ...otherProps }) => {
     const inputUseId = useId();
     const inputId = id ?? inputUseId;
     const componentClassName = getClassName({
@@ -11,5 +11,5 @@ const Number = ({ id, className, required, ...otherProps }) => {
     });
     return (_jsx("input", { className: componentClassName, id: inputId, type: "number", required: required, ...otherProps }));
 };
-Number.displayName = "Number";
-export { Number };
+NumberComponent.displayName = "Number";
+export { NumberComponent as Number };

package/dist/distributeur/Table/THead.js

@@ -3,7 +3,6 @@ import { getClassName } from "../utilities/helpers/getClassName";
 const THead = ({ children, className, ...otherProps }) => {
     const componentClassName = getClassName({
         baseClassName: "af-table__thead",
-        modifiers: [],
         className,
     });
     return (_jsx("thead", { className: componentClassName, ...otherProps, children: children }));

package/dist/distributeur/Table/Tr.js

@@ -4,7 +4,6 @@ import { getClassName } from "../utilities/helpers/getClassName";
 const Tr = ({ children, id, className, ...otherProps }) => {
     const componentClassName = getClassName({
         baseClassName: "af-table__tr",
-        modifiers: [],
         className,
     });
     return (_jsx("tr", { className: componentClassName, ...otherProps, children: children }, id));

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

@@ -1,4 +1,4 @@
-import { type FormEvent, type ReactElement } from "react";
+import { type ReactElement, type SyntheticEvent } from "react";
 import type { TabProps } from "./Tab";
 export type TabsStatelessProps = {
     children: ReactElement<TabProps> | ReactElement<TabProps>[];
@@ -6,7 +6,7 @@ export type TabsStatelessProps = {
     className?: string;
 };
 export type TabsStatelessHandlers = {
-    onChange: (event: FormEvent<HTMLButtonElement>, index: number) => void;
+    onChange: (event: SyntheticEvent<HTMLButtonElement>, index: number) => void;
 };
 type Props = TabsStatelessProps & TabsStatelessHandlers;
 declare const TabsStateless: ({ activeIndex, className, children, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "2.0.0-alpha.75",
+  "version": "2.0.0-alpha.76",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -53,7 +53,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "2.0.0-alpha.75",
+    "@axa-fr/canopee-css": "2.0.0-alpha.76",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 19"