mautourco-components 0.2.4 → 0.2.7

package/src/components/atoms/SegmentedButton/SegmentedButton.tsx

@@ -1,94 +1,94 @@
-import React from 'react';
-
-export interface SegmentedButtonOption {
-  /** Valeur de l'option */
-  value: string;
-  /** Libellé affiché */
-  label: string;
-  /** État désactivé */
-  disabled?: boolean;
-}
-
-export interface SegmentedButtonProps {
-  /** Options du bouton segmenté */
-  options: SegmentedButtonOption[];
-  /** Valeur sélectionnée */
-  value: string;
-  /** Handler de changement */
-  onChange: (value: string) => void;
-  /** Orientation du bouton segmenté */
-  orientation?: 'horizontal' | 'vertical';
-  /** État désactivé pour tout le groupe */
-  disabled?: boolean;
-  /** Classes CSS supplémentaires */
-  className?: string;
-  /** Nom du groupe pour l'accessibilité */
-  name?: string;
-}
-
-const SegmentedButton: React.FC<SegmentedButtonProps> = ({
-  options,
-  value,
-  onChange,
-  orientation = 'horizontal',
-  disabled = false,
-  className = '',
-  name,
-}) => {
-  const containerClasses = [
-    'segmented-button',
-    `segmented-button--${orientation}`,
-    disabled && 'segmented-button--disabled',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const handleClick = (optionValue: string, optionDisabled?: boolean) => {
-    if (!disabled && !optionDisabled && optionValue !== value) {
-      onChange(optionValue);
-    }
-  };
-
-  const getButtonClasses = (option: SegmentedButtonOption, index: number) => {
-    const isSelected = option.value === value;
-    const isFirst = index === 0;
-    const isLast = index === options.length - 1;
-    const isDisabled = disabled || option.disabled;
-
-    return [
-      'segmented-button__item',
-      isSelected && 'segmented-button__item--selected',
-      isFirst && 'segmented-button__item--first',
-      isLast && 'segmented-button__item--last',
-      isDisabled && 'segmented-button__item--disabled',
-    ]
-      .filter(Boolean)
-      .join(' ');
-  };
-
-  return (
-    <div className={containerClasses} role="group" aria-label={name}>
-      {options.map((option, index) => {
-        const isSelected = option.value === value;
-        const isDisabled = disabled || option.disabled;
-        
-        return (
-          <button
-            key={option.value}
-            type="button"
-            className={getButtonClasses(option, index)}
-            onClick={() => handleClick(option.value, option.disabled)}
-            disabled={isDisabled}
-            aria-pressed={isSelected}
-            aria-label={option.label}
-          >
-            <span className="segmented-button__label">{option.label}</span>
-          </button>
-        );
-      })}
-    </div>
-  );
-};
-
-export default SegmentedButton;
+import React from 'react';
+
+export interface SegmentedButtonOption {
+  /** Valeur de l'option */
+  value: string;
+  /** Libellé affiché */
+  label: string;
+  /** État désactivé */
+  disabled?: boolean;
+}
+
+export interface SegmentedButtonProps {
+  /** Options du bouton segmenté */
+  options: SegmentedButtonOption[];
+  /** Valeur sélectionnée */
+  value: string;
+  /** Handler de changement */
+  onChange: (value: string) => void;
+  /** Orientation du bouton segmenté */
+  orientation?: 'horizontal' | 'vertical';
+  /** État désactivé pour tout le groupe */
+  disabled?: boolean;
+  /** Classes CSS supplémentaires */
+  className?: string;
+  /** Nom du groupe pour l'accessibilité */
+  name?: string;
+}
+
+const SegmentedButton: React.FC<SegmentedButtonProps> = ({
+  options,
+  value,
+  onChange,
+  orientation = 'horizontal',
+  disabled = false,
+  className = '',
+  name,
+}) => {
+  const containerClasses = [
+    'segmented-button',
+    `segmented-button--${orientation}`,
+    disabled && 'segmented-button--disabled',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const handleClick = (optionValue: string, optionDisabled?: boolean) => {
+    if (!disabled && !optionDisabled && optionValue !== value) {
+      onChange(optionValue);
+    }
+  };
+
+  const getButtonClasses = (option: SegmentedButtonOption, index: number) => {
+    const isSelected = option.value === value;
+    const isFirst = index === 0;
+    const isLast = index === options.length - 1;
+    const isDisabled = disabled || option.disabled;
+
+    return [
+      'segmented-button__item',
+      isSelected && 'segmented-button__item--selected',
+      isFirst && 'segmented-button__item--first',
+      isLast && 'segmented-button__item--last',
+      isDisabled && 'segmented-button__item--disabled',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  };
+
+  return (
+    <div className={containerClasses} role="group" aria-label={name}>
+      {options.map((option, index) => {
+        const isSelected = option.value === value;
+        const isDisabled = disabled || option.disabled;
+        
+        return (
+          <button
+            key={option.value}
+            type="button"
+            className={getButtonClasses(option, index)}
+            onClick={() => handleClick(option.value, option.disabled)}
+            disabled={isDisabled}
+            aria-pressed={isSelected}
+            aria-label={option.label}
+          >
+            <span className="segmented-button__label">{option.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SegmentedButton;

package/src/components/atoms/SelectedValue/SelectedValue.tsx

@@ -1,59 +1,59 @@
-import React from 'react';
-import Icon from '../Icon/Icon';
-import { Text } from '../Typography/Typography';
-
-interface SelectedValueProps {
-  value: string;
-  onRemove?: () => void;
-  className?: string;
-  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  size?: 'xs' | 'sm' | 'md' | 'lg';
-  variant?: 'filled' | 'text';
-}
-
-const SelectedValue: React.FC<SelectedValueProps> = ({
-  value,
-  onRemove,
-  className = '',
-  iconSize = 'xs',
-  size = 'md',
-  variant = 'filled',
-}) => {
-  const handleRemove = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (onRemove) {
-      onRemove();
-    }
-  };
-
-  const classes = `selected-value selected-value--${size} selected-value--${variant} ${className}`.trim();
-
-  const getTextSize = () => {
-    return size; // Utilise directement la taille passée en prop
-  };
-
-  return (
-    <div className={classes}>
-      <Text 
-        size={getTextSize() as any} 
-        variant="medium" 
-        leading="4" 
-        className="selected-value__text"
-      >
-        {value}
-      </Text>
-      {variant !== 'text' && onRemove && (
-        <button
-          type="button"
-          className="selected-value__remove"
-          onClick={handleRemove}
-          aria-label={`Remove ${value}`}
-        >
-          <Icon name="close" size={iconSize} className="selected-value__remove-icon" />
-        </button>
-      )}
-    </div>
-  );
-};
-
-export default SelectedValue;
+import React from 'react';
+import Icon from '../Icon/Icon';
+import { Text } from '../Typography/Typography';
+
+interface SelectedValueProps {
+  value: string;
+  onRemove?: () => void;
+  className?: string;
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  variant?: 'filled' | 'text';
+}
+
+const SelectedValue: React.FC<SelectedValueProps> = ({
+  value,
+  onRemove,
+  className = '',
+  iconSize = 'xs',
+  size = 'md',
+  variant = 'filled',
+}) => {
+  const handleRemove = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (onRemove) {
+      onRemove();
+    }
+  };
+
+  const classes = `selected-value selected-value--${size} selected-value--${variant} ${className}`.trim();
+
+  const getTextSize = () => {
+    return size; // Utilise directement la taille passée en prop
+  };
+
+  return (
+    <div className={classes}>
+      <Text 
+        size={getTextSize() as any} 
+        variant="medium" 
+        leading="4" 
+        className="selected-value__text"
+      >
+        {value}
+      </Text>
+      {variant !== 'text' && onRemove && (
+        <button
+          type="button"
+          className="selected-value__remove"
+          onClick={handleRemove}
+          aria-label={`Remove ${value}`}
+        >
+          <Icon name="close" size={iconSize} className="selected-value__remove-icon" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default SelectedValue;

package/src/components/atoms/Slider/Slider.tsx

@@ -1,95 +1,95 @@
-import React from 'react';
-
-export type SliderVariant = 'full' | 'half';
-
-export interface SliderProps {
-  /**
-   * Current value of the slider (controlled mode).
-   */
-  value: number;
-  /**
-   * Minimum value.
-   */
-  min?: number;
-  /**
-   * Maximum value.
-   */
-  max?: number;
-  /**
-   * Step between values.
-   */
-  step?: number;
-  /**
-   * Called when the value changes.
-   */
-  onChange: (value: number) => void;
-  /**
-   * Visual variant (from Figma: Type=Full | Type=Half).
-   */
-  variant?: SliderVariant;
-  /**
-   * Whether the slider is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Accessible label (aria-label) if no visible label is provided.
-   */
-  'aria-label'?: string;
-  /**
-   * Optional id to link with an external label.
-   */
-  id?: string;
-  /**
-   * Additional CSS classes.
-   */
-  className?: string;
-}
-
-/**
- * Slider atom.
- *
- * Represents a single horizontal slider control (rail + thumb),
- * matching the Figma Slider component (Full / Half variants).
- */
-export const Slider: React.FC<SliderProps> = ({
-  value,
-  min = 0,
-  max = 100,
-  step = 1,
-  onChange,
-  variant = 'full',
-  disabled = false,
-  id,
-  className = '',
-  'aria-label': ariaLabel,
-}) => {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const next = Number(event.target.value);
-    onChange(next);
-  };
-
-  const classes = ['slider', `slider--${variant}`, disabled ? 'slider--disabled' : '', className]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div className="slider-container">
-      <input
-        id={id}
-        type="range"
-        className={classes}
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={handleChange}
-        disabled={disabled}
-        aria-label={ariaLabel}
-      />
-    </div>
-  );
-};
-
-export default Slider;
-
-
+import React from 'react';
+
+export type SliderVariant = 'full' | 'half';
+
+export interface SliderProps {
+  /**
+   * Current value of the slider (controlled mode).
+   */
+  value: number;
+  /**
+   * Minimum value.
+   */
+  min?: number;
+  /**
+   * Maximum value.
+   */
+  max?: number;
+  /**
+   * Step between values.
+   */
+  step?: number;
+  /**
+   * Called when the value changes.
+   */
+  onChange: (value: number) => void;
+  /**
+   * Visual variant (from Figma: Type=Full | Type=Half).
+   */
+  variant?: SliderVariant;
+  /**
+   * Whether the slider is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Accessible label (aria-label) if no visible label is provided.
+   */
+  'aria-label'?: string;
+  /**
+   * Optional id to link with an external label.
+   */
+  id?: string;
+  /**
+   * Additional CSS classes.
+   */
+  className?: string;
+}
+
+/**
+ * Slider atom.
+ *
+ * Represents a single horizontal slider control (rail + thumb),
+ * matching the Figma Slider component (Full / Half variants).
+ */
+export const Slider: React.FC<SliderProps> = ({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  variant = 'full',
+  disabled = false,
+  id,
+  className = '',
+  'aria-label': ariaLabel,
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const next = Number(event.target.value);
+    onChange(next);
+  };
+
+  const classes = ['slider', `slider--${variant}`, disabled ? 'slider--disabled' : '', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className="slider-container">
+      <input
+        id={id}
+        type="range"
+        className={classes}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        aria-label={ariaLabel}
+      />
+    </div>
+  );
+};
+
+export default Slider;
+
+

package/src/components/atoms/Spinner/Spinner.tsx

@@ -1,56 +1,56 @@
-import React from 'react';
-
-interface SpinnerProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-  color?: string;
-  speed?: 'slow' | 'normal' | 'fast';
-}
-
-const Spinner: React.FC<SpinnerProps> = ({
-  size = 'md',
-  className = '',
-  color,
-  speed = 'normal'
-}) => {
-  const getSizeClasses = () => {
-    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';
-    }
-  };
-
-  const getSpeedClasses = () => {
-    switch (speed) {
-      case 'slow': return 'animate-spin-slow';
-      case 'fast': return 'animate-spin-fast';
-      default: return 'animate-spin';
-    }
-  };
-
-  const sizeClasses = getSizeClasses();
-  const speedClasses = getSpeedClasses();
-  const colorClass = color ? `text-${color}` : 'text-current';
-  const classes = `${sizeClasses} ${speedClasses} ${colorClass} ${className}`;
-
-  return (
-    <svg 
-      className={classes} 
-      viewBox="0 0 24 24" 
-      fill="none" 
-      stroke="currentColor" 
-      strokeWidth="2" 
-      strokeLinecap="round" 
-      strokeLinejoin="round"
-    >
-      <path d="M21 12A9 9 0 1 1 3 12A9 9 0 0 1 21 12Z" strokeOpacity="0.25" />
-      <path d="M21 12A9 9 0 0 0 3 12" />
-    </svg>
-  );
-};
-
-export default Spinner;
+import React from 'react';
+
+interface SpinnerProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+  speed?: 'slow' | 'normal' | 'fast';
+}
+
+const Spinner: React.FC<SpinnerProps> = ({
+  size = 'md',
+  className = '',
+  color,
+  speed = 'normal'
+}) => {
+  const getSizeClasses = () => {
+    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';
+    }
+  };
+
+  const getSpeedClasses = () => {
+    switch (speed) {
+      case 'slow': return 'animate-spin-slow';
+      case 'fast': return 'animate-spin-fast';
+      default: return 'animate-spin';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const speedClasses = getSpeedClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${speedClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg 
+      className={classes} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      stroke="currentColor" 
+      strokeWidth="2" 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    >
+      <path d="M21 12A9 9 0 1 1 3 12A9 9 0 0 1 21 12Z" strokeOpacity="0.25" />
+      <path d="M21 12A9 9 0 0 0 3 12" />
+    </svg>
+  );
+};
+
+export default Spinner;