mautourco-components 0.1.1

package/dist/components/atoms/Inputs/DropdownInput/DropdownInput.js

@@ -0,0 +1,53 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Icon from '../../Icon/Icon';
+import Spinner from '../../Spinner/Spinner';
+var DropdownInput = function (_a) {
+    var _b = _a.placeholder, placeholder = _b === void 0 ? 'Select item name' : _b, value = _a.value, _c = _a.state, state = _c === void 0 ? 'default' : _c, onClick = _a.onClick, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.options, options = _e === void 0 ? [] : _e, onSelect = _a.onSelect;
+    var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
+    var handleClick = function () {
+        if (state === 'disabled' || state === 'loading')
+            return;
+        setIsOpen(!isOpen);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleOptionSelect = function (option) {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+        setIsOpen(false);
+    };
+    var getStateClasses = function () {
+        var baseClasses = isOpen ? 'dropdown-input--open' : '';
+        switch (state) {
+            case 'loading':
+                return "".concat(baseClasses, " dropdown-input--loading");
+            case 'selected':
+                return "".concat(baseClasses, " dropdown-input--selected");
+            case 'error':
+                return "".concat(baseClasses, " dropdown-input--error");
+            case 'disabled':
+                return "".concat(baseClasses, " dropdown-input--disabled");
+            default:
+                return "".concat(baseClasses, " dropdown-input--default");
+        }
+    };
+    var getIcon = function () {
+        if (state === 'loading') {
+            return _jsx(Spinner, { size: "sm", className: "dropdown-input__icon" });
+        }
+        return (_jsx(Icon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "sm", className: "dropdown-input__icon dropdown-input__icon--chevron" }));
+    };
+    var displayText = state === 'loading' ? 'Loading...' : (value || placeholder);
+    return (_jsxs("div", __assign({ className: "dropdown-container ".concat(className) }, { children: [_jsxs("div", __assign({ className: "dropdown-input ".concat(getStateClasses()), onClick: handleClick }, { children: [_jsx("span", __assign({ className: "dropdown-input__text" }, { children: displayText })), getIcon()] })), isOpen && options.length > 0 && (_jsx("div", __assign({ className: "dropdown-menu" }, { children: options.map(function (option, index) { return (_jsx("div", __assign({ className: "dropdown-option", onClick: function () { return handleOptionSelect(option); } }, { children: option }), index)); }) })))] })));
+};
+export default DropdownInput;

package/dist/components/atoms/Inputs/Input/Input.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface InputProps {
+    variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    className?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    icon?: 'search' | 'close' | 'settings' | 'user';
+    iconPosition?: 'leading' | 'trailing';
+}
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/components/atoms/Inputs/Input/Input.js

@@ -0,0 +1,27 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../../Icon/Icon';
+var Input = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Input text' : _c, value = _a.value, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, icon = _a.icon, _f = _a.iconPosition, iconPosition = _f === void 0 ? 'trailing' : _f;
+    var baseClasses = 'input-field';
+    var variantClasses = {
+        default: 'input-field--default',
+        focus: 'input-field--focus',
+        success: 'input-field--success',
+        error: 'input-field--error',
+        disabled: 'input-field--disabled'
+    };
+    var inputClasses = "".concat(baseClasses, " ").concat(variantClasses[variant], " ").concat(icon ? "input-field--with-icon input-field--icon-".concat(iconPosition) : '', " ").concat(className).trim();
+    return (_jsxs("div", __assign({ className: "input-wrapper ".concat(icon ? 'input-wrapper--with-icon' : '').trim() }, { children: [icon && iconPosition === 'leading' && (_jsx("span", __assign({ className: "input-icon input-icon--leading" }, { children: _jsx(Icon, { name: icon, size: "sm" }) }))), _jsx("input", { type: "text", className: inputClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', onChange: onChange, onFocus: onFocus, onBlur: onBlur }), icon && iconPosition === 'trailing' && (_jsx("span", __assign({ className: "input-icon input-icon--trailing" }, { children: _jsx(Icon, { name: icon, size: "sm" }) })))] })));
+};
+export default Input;

package/dist/components/atoms/Inputs/Textarea/Textarea.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface TextareaProps {
+    variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    rows?: number;
+    className?: string;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+}
+declare const Textarea: React.FC<TextareaProps>;
+export default Textarea;

package/dist/components/atoms/Inputs/Textarea/Textarea.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Textarea = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Enter your text...' : _c, value = _a.value, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.rows, rows = _e === void 0 ? 4 : _e, _f = _a.className, className = _f === void 0 ? '' : _f, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur;
+    var baseClasses = 'input-field';
+    var variantClasses = {
+        default: 'input-field--default',
+        focus: 'input-field--focus',
+        success: 'input-field--success',
+        error: 'input-field--error',
+        disabled: 'input-field--disabled'
+    };
+    var textareaClasses = "".concat(baseClasses, " ").concat(variantClasses[variant], " ").concat(className);
+    return (_jsx("textarea", { className: textareaClasses, placeholder: placeholder, value: value, disabled: disabled || variant === 'disabled', rows: rows, onChange: onChange, onFocus: onFocus, onBlur: onBlur }));
+};
+export default Textarea;

package/dist/components/atoms/Link/Link.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export interface LinkProps {
+    /**
+     * Le texte du lien
+     */
+    children: React.ReactNode;
+    /**
+     * L'URL du lien
+     */
+    href?: string;
+    /**
+     * Fonction appelée lors du clic
+     */
+    onClick?: () => void;
+    /**
+     * État du lien
+     */
+    state?: 'default' | 'hover' | 'visited' | 'focused';
+    /**
+     * Thème du lien
+     */
+    theme?: 'light' | 'dark' | 'teal';
+    /**
+     * Si le lien est associé à un radio button
+     */
+    withRadio?: boolean;
+    /**
+     * Si le radio button est sélectionné
+     */
+    radioChecked?: boolean;
+    /**
+     * Fonction appelée lors du clic sur le radio button
+     */
+    onRadioChange?: (checked: boolean) => void;
+    /**
+     * Classes CSS supplémentaires
+     */
+    className?: string;
+    /**
+     * Si le lien est désactivé
+     */
+    disabled?: boolean;
+}
+export declare const Link: React.FC<LinkProps>;

package/dist/components/atoms/Link/Link.js

@@ -0,0 +1,76 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../Typography/Typography';
+export var Link = function (_a) {
+    var children = _a.children, href = _a.href, onClick = _a.onClick, _b = _a.state, state = _b === void 0 ? 'default' : _b, _c = _a.theme, theme = _c === void 0 ? 'light' : _c, _d = _a.withRadio, withRadio = _d === void 0 ? false : _d, _e = _a.radioChecked, radioChecked = _e === void 0 ? false : _e, onRadioChange = _a.onRadioChange, _f = _a.className, className = _f === void 0 ? '' : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g;
+    var handleClick = function (e) {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var handleRadioChange = function (e) {
+        if (disabled)
+            return;
+        onRadioChange === null || onRadioChange === void 0 ? void 0 : onRadioChange(e.target.checked);
+    };
+    var getThemeClasses = function () {
+        var baseClasses = 'inline-flex items-center gap-3 transition-all duration-200';
+        switch (theme) {
+            case 'dark':
+                return "".concat(baseClasses, " text-white");
+            case 'teal':
+                return "".concat(baseClasses, " text-teal-600");
+            default: // light
+                return "".concat(baseClasses, " text-gray-700");
+        }
+    };
+    var getStateClasses = function () {
+        if (disabled) {
+            return 'opacity-50 cursor-not-allowed';
+        }
+        switch (state) {
+            case 'hover':
+                return 'hover:opacity-80';
+            case 'visited':
+                return theme === 'teal' ? 'text-cyan-400' : 'text-purple-600';
+            case 'focused':
+                return 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current';
+            default:
+                return '';
+        }
+    };
+    var getRadioClasses = function () {
+        var baseClasses = 'w-5 h-5 border-2 rounded-sm transition-all duration-200';
+        if (disabled) {
+            return "".concat(baseClasses, " border-gray-200 bg-gray-100");
+        }
+        switch (theme) {
+            case 'dark':
+                return "".concat(baseClasses, " border-white ").concat(radioChecked ? 'bg-transparent' : 'bg-transparent');
+            case 'teal':
+                return "".concat(baseClasses, " border-teal-600 ").concat(radioChecked ? 'bg-transparent' : 'bg-transparent');
+            default: // light
+                return "".concat(baseClasses, " border-gray-400 ").concat(radioChecked ? 'bg-transparent' : 'bg-transparent');
+        }
+    };
+    var linkContent = (_jsx(Text, __assign({ as: "span", className: "underline ".concat(getThemeClasses(), " ").concat(getStateClasses(), " ").concat(className), onClick: handleClick }, { children: children })));
+    if (withRadio) {
+        return (_jsxs("label", __assign({ className: "inline-flex items-center gap-3 cursor-pointer" }, { children: [_jsx("input", { type: "radio", checked: radioChecked, onChange: handleRadioChange, disabled: disabled, className: getRadioClasses(), "aria-label": "S\u00E9lectionner ".concat(children) }), linkContent] })));
+    }
+    if (href) {
+        return (_jsx("a", __assign({ href: href, className: "".concat(getThemeClasses(), " ").concat(getStateClasses(), " ").concat(className), onClick: handleClick, "aria-disabled": disabled }, { children: children })));
+    }
+    return (_jsx("button", __assign({ type: "button", className: "".concat(getThemeClasses(), " ").concat(getStateClasses(), " ").concat(className), onClick: handleClick, disabled: disabled }, { children: children })));
+};

package/dist/components/atoms/SelectedValue/SelectedValue.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface SelectedValueProps {
+    value: string;
+    onRemove?: () => void;
+    className?: string;
+    iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'filled' | 'text';
+}
+declare const SelectedValue: React.FC<SelectedValueProps>;
+export default SelectedValue;

package/dist/components/atoms/SelectedValue/SelectedValue.js

@@ -0,0 +1,29 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '../Icon/Icon';
+import { Text } from '../Typography/Typography';
+var SelectedValue = function (_a) {
+    var value = _a.value, onRemove = _a.onRemove, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.iconSize, iconSize = _c === void 0 ? 'xs' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.variant, variant = _e === void 0 ? 'filled' : _e;
+    var handleRemove = function (event) {
+        event.stopPropagation();
+        if (onRemove) {
+            onRemove();
+        }
+    };
+    var classes = "selected-value selected-value--".concat(size, " selected-value--").concat(variant, " ").concat(className).trim();
+    var getTextSize = function () {
+        return size; // Utilise directement la taille passée en prop
+    };
+    return (_jsxs("div", __assign({ className: classes }, { children: [_jsx(Text, __assign({ size: getTextSize(), variant: "medium", leading: "4", className: "selected-value__text" }, { children: value })), variant !== 'text' && onRemove && (_jsx("button", __assign({ type: "button", className: "selected-value__remove", onClick: handleRemove, "aria-label": "Remove ".concat(value) }, { children: _jsx(Icon, { name: "close", size: iconSize, className: "selected-value__remove-icon" }) })))] })));
+};
+export default SelectedValue;

package/dist/components/atoms/Spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SpinnerProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    color?: string;
+    speed?: 'slow' | 'normal' | 'fast';
+}
+declare const Spinner: React.FC<SpinnerProps>;
+export default Spinner;

package/dist/components/atoms/Spinner/Spinner.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, color = _a.color, _d = _a.speed, speed = _d === void 0 ? 'normal' : _d;
+    var getSizeClasses = function () {
+        switch (size) {
+            case 'xs': return 'w-3 h-3';
+            case 'sm': return 'w-4 h-4';
+            case 'md': return 'w-5 h-5';
+            case 'lg': return 'w-6 h-6';
+            case 'xl': return 'w-8 h-8';
+            default: return 'w-5 h-5';
+        }
+    };
+    var getSpeedClasses = function () {
+        switch (speed) {
+            case 'slow': return 'animate-spin-slow';
+            case 'fast': return 'animate-spin-fast';
+            default: return 'animate-spin';
+        }
+    };
+    var sizeClasses = getSizeClasses();
+    var speedClasses = getSpeedClasses();
+    var colorClass = color ? "text-".concat(color) : 'text-current';
+    var classes = "".concat(sizeClasses, " ").concat(speedClasses, " ").concat(colorClass, " ").concat(className);
+    return (_jsxs("svg", __assign({ className: classes, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: [_jsx("path", { d: "M21 12A9 9 0 1 1 3 12A9 9 0 0 1 21 12Z", strokeOpacity: "0.25" }), _jsx("path", { d: "M21 12A9 9 0 0 0 3 12" })] })));
+};
+export default Spinner;

package/dist/components/atoms/Spinner/variants/ButtonSpinner.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ButtonSpinnerProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    variant?: 'primary' | 'secondary' | 'white';
+}
+declare const ButtonSpinner: React.FC<ButtonSpinnerProps>;
+export default ButtonSpinner;

package/dist/components/atoms/Spinner/variants/ButtonSpinner.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Spinner from '../Spinner';
+var ButtonSpinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'sm' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.variant, variant = _d === void 0 ? 'white' : _d;
+    var getVariantClass = function () {
+        switch (variant) {
+            case 'primary':
+                return 'text-white';
+            case 'secondary':
+                return 'text-gray-600';
+            case 'white':
+                return 'text-white';
+            default:
+                return 'text-white';
+        }
+    };
+    return (_jsx(Spinner, { size: size, speed: "fast", className: "".concat(getVariantClass(), " ").concat(className) }));
+};
+export default ButtonSpinner;

package/dist/components/atoms/Spinner/variants/LoadingSpinner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LoadingSpinnerProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+}
+declare const LoadingSpinner: React.FC<LoadingSpinnerProps>;
+export default LoadingSpinner;

package/dist/components/atoms/Spinner/variants/LoadingSpinner.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Spinner from '../Spinner';
+var LoadingSpinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    return (_jsx(Spinner, { size: size, speed: "normal", className: "text-blue-500 ".concat(className) }));
+};
+export default LoadingSpinner;

package/dist/components/atoms/Tab/Tab.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from '../Typography/Typography';
+import './Tab.css';
+type TextComponentProps = React.ComponentProps<typeof Text>;
+export interface TabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Textual content rendered inside the tab */
+    children: React.ReactNode;
+    /** Whether the tab is currently active */
+    isActive?: boolean;
+    /** Visual style family for the tab */
+    variant?: 'inline' | 'outline';
+    /** Size token used by the selected variant */
+    size?: 'sm' | 'lg';
+    /** Typography variant when the tab is active */
+    activeTextVariant?: TextComponentProps['variant'];
+    /** Typography variant when the tab is inactive */
+    inactiveTextVariant?: TextComponentProps['variant'];
+    /** Typography size applied to the tab label */
+    textSize?: TextComponentProps['size'];
+}
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+export default Tab;

package/dist/components/atoms/Tab/Tab.js

@@ -0,0 +1,54 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Text } from '../Typography/Typography';
+import './Tab.css';
+var Tab = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.isActive, isActive = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.variant, variant = _e === void 0 ? 'inline' : _e, _f = _a.size, size = _f === void 0 ? 'lg' : _f, activeTextVariant = _a.activeTextVariant, inactiveTextVariant = _a.inactiveTextVariant, textSize = _a.textSize, rest = __rest(_a, ["children", "isActive", "disabled", "className", "variant", "size", "activeTextVariant", "inactiveTextVariant", "textSize"]);
+    var roleProp = rest.role, typeProp = rest.type, buttonRest = __rest(rest, ["role", "type"]);
+    var tabClasses = [
+        'tab',
+        "tab--variant-".concat(variant),
+        "tab--size-".concat(size),
+        isActive ? 'tab--active' : '',
+        disabled ? 'tab--disabled' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var defaultTypographyVariant = variant === 'outline' ? 'bold' : 'regular';
+    var resolvedActiveTextVariant = activeTextVariant !== null && activeTextVariant !== void 0 ? activeTextVariant : defaultTypographyVariant;
+    var resolvedInactiveTextVariant = inactiveTextVariant !== null && inactiveTextVariant !== void 0 ? inactiveTextVariant : defaultTypographyVariant;
+    var resolvedVariant = isActive
+        ? resolvedActiveTextVariant
+        : resolvedInactiveTextVariant;
+    var resolvedTextSize = textSize !== null && textSize !== void 0 ? textSize : (variant === 'outline'
+        ? 'base'
+        : size === 'lg'
+            ? 'lg'
+            : 'base');
+    return (_jsx("button", __assign({}, buttonRest, { ref: ref, type: typeProp !== null && typeProp !== void 0 ? typeProp : 'button', role: roleProp !== null && roleProp !== void 0 ? roleProp : 'tab', "aria-selected": isActive, "aria-disabled": disabled || undefined, disabled: disabled, className: tabClasses }, { children: _jsx(Text, __assign({ as: "span", size: resolvedTextSize, variant: resolvedVariant, className: "tab__label" }, { children: children })) })));
+});
+Tab.displayName = 'Tab';
+export default Tab;

package/dist/components/atoms/Typography/Heading/Heading.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface HeadingProps {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    variant?: 'light' | 'regular' | 'medium' | 'bold' | 'black';
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Heading: React.FC<HeadingProps>;
+export default Heading;

package/dist/components/atoms/Typography/Heading/Heading.js

@@ -0,0 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+var Heading = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? '3xl' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, children = _a.children, _d = _a.className, className = _d === void 0 ? '' : _d;
+    var sizeClass = "heading-".concat(size);
+    var variantClasses = {
+        light: "".concat(sizeClass, "--light"),
+        regular: "".concat(sizeClass, "--regular"),
+        medium: "".concat(sizeClass, "--medium"),
+        bold: "".concat(sizeClass, "--bold"),
+        black: "".concat(sizeClass, "--black")
+    };
+    return (_jsx("div", __assign({ className: "".concat(sizeClass, " ").concat(variantClasses[variant], " ").concat(className) }, { children: children })));
+};
+export default Heading;

package/dist/components/atoms/Typography/Text/Text.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface TextProps {
+    size?: 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl';
+    variant?: 'light' | 'regular' | 'medium' | 'bold' | 'black';
+    leading?: 'none' | '4' | '5' | '6' | '7';
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Text: React.FC<TextProps>;
+export default Text;

package/dist/components/atoms/Typography/Text/Text.js

@@ -0,0 +1,77 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+var Text = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'base' : _b, _c = _a.variant, variant = _c === void 0 ? 'regular' : _c, _d = _a.leading, leading = _d === void 0 ? 'none' : _d, children = _a.children, _e = _a.className, className = _e === void 0 ? '' : _e;
+    // Mapping précis pour coller aux classes déclarées dans typography.css
+    // xs: body-xs, body-xs-4, body-xs-5 (pas de "none")
+    // sm: body-sm-none, body-sm-5, body-sm-6
+    // md: body-md-none, body-md-6, body-md-7
+    // lg: body-lg-none, body-lg-6, body-lg-7
+    // base/xl: pas de suffixe de leading
+    var sizeClass;
+    switch (size) {
+        case 'xs': {
+            if (leading === '4' || leading === '5') {
+                sizeClass = "body-xs-".concat(leading);
+            }
+            else {
+                sizeClass = 'body-xs';
+            }
+            break;
+        }
+        case 'sm': {
+            if (leading === '5' || leading === '6') {
+                sizeClass = "body-sm-".concat(leading);
+            }
+            else {
+                sizeClass = 'body-sm-none';
+            }
+            break;
+        }
+        case 'md': {
+            if (leading === '6' || leading === '7') {
+                sizeClass = "body-md-".concat(leading);
+            }
+            else {
+                sizeClass = 'body-md-none';
+            }
+            break;
+        }
+        case 'lg': {
+            if (leading === '6' || leading === '7') {
+                sizeClass = "body-lg-".concat(leading);
+            }
+            else {
+                sizeClass = 'body-lg-none';
+            }
+            break;
+        }
+        case 'base':
+            sizeClass = 'body-base';
+            break;
+        case 'xl':
+            sizeClass = 'body-xl';
+            break;
+        default:
+            sizeClass = "body-".concat(size);
+    }
+    var variantClasses = {
+        light: "".concat(sizeClass, "--light"),
+        regular: "".concat(sizeClass, "--regular"),
+        medium: "".concat(sizeClass, "--medium"),
+        bold: "".concat(sizeClass, "--bold"),
+        black: "".concat(sizeClass, "--black")
+    };
+    return (_jsx("div", __assign({ className: "".concat(sizeClass, " ").concat(variantClasses[variant], " ").concat(className) }, { children: children })));
+};
+export default Text;

package/dist/components/atoms/Typography/Typography.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+type BodyTokenSize = 'xs' | 'sm' | 'md' | 'lg';
+type BodySizeInput = BodyTokenSize | 'base' | 'xl';
+type Variant = 'light' | 'regular' | 'medium' | 'bold' | 'black';
+type Leading = 'none' | '4' | '5' | '6' | '7';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface BaseProps {
+    variant?: Variant;
+    leading?: Leading;
+    className?: string;
+    children: React.ReactNode;
+    onClick?: React.MouseEventHandler<Element>;
+}
+interface HeadingProps extends BaseProps {
+    level?: HeadingLevel;
+    as?: keyof React.JSX.IntrinsicElements;
+}
+interface TextProps extends BaseProps {
+    size?: BodySizeInput;
+    as?: keyof React.JSX.IntrinsicElements;
+}
+export declare const Heading: React.FC<HeadingProps>;
+export declare const Text: React.FC<TextProps>;
+export {};