mautourco-components 0.2.9 → 0.2.10

package/src/components/atoms/Button/Button.tsx

@@ -4,7 +4,7 @@ import './Button.css';
 
 export interface ButtonProps {
   /** Variant du bouton */
-  variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary';
+  variant?: 'primary' | 'secondary' | 'outline' | 'outline-primary' | 'outline-secondary' | 'destructive';
   /** Taille du bouton */
   size?: 'sm' | 'md' | 'lg' | 'xl';
   /** Contenu du bouton */
@@ -56,11 +56,12 @@ const Button: React.FC<ButtonProps> = ({
 
   const hasLeadingIcon = Boolean(leadingIcon);
   const hasTrailingIcon = Boolean(trailingIcon);
+  const withIconClass = hasLeadingIcon || hasTrailingIcon ? 'button--with-icon' : '';
 
   return (
     <button
       type={type}
-      className={buttonClasses}
+      className={[buttonClasses, withIconClass].filter(Boolean).join(' ')}
       disabled={disabled}
       onClick={onClick}
     >

package/src/components/atoms/Chip/Chip.css

@@ -0,0 +1,161 @@
+.chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--chip-spacing-sm-gap, 4px);
+  border-radius: var(--chip-border-radius-pill, 9999px);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-weight: var(--font-weight-font-medium, 500);
+  line-height: calc(var(--font-leading-leading-base, 16) * 1px);
+  white-space: nowrap;
+  border: var(--chip-border-width-default, 1px) solid transparent;
+}
+
+/* Sizes */
+.chip--sm {
+  padding: var(--chip-spacing-sm-padding-y, 4px) var(--chip-spacing-sm-padding-x, 8px);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
+  gap: var(--chip-spacing-sm-gap, 4px);
+}
+
+.chip--md {
+  padding: var(--chip-spacing-md-padding-y, 4px) var(--chip-spacing-md-padding-x, 12px);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: calc(var(--font-leading-leading-sm, 20) * 1px);
+  gap: var(--chip-spacing-md-gap, 4px);
+}
+
+.chip--lg {
+  padding: var(--chip-spacing-lg-padding-y, 4px) var(--chip-spacing-lg-padding-x, 16px);
+  font-size: var(--font-size-text-base, 16px);
+  line-height: calc(var(--font-leading-leading-base, 16) * 1px);
+  gap: var(--chip-spacing-lg-gap, 4px);
+}
+
+/* Types - Filled */
+.chip--filled.chip--brand {
+  background-color: var(--chip-color-brand-filled-background, #ed4c09);
+  color: var(--chip-color-brand-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--accent {
+  background-color: var(--chip-color-accent-filled-background, #0f7173);
+  color: var(--chip-color-accent-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--blue {
+  background-color: var(--chip-color-blue-filled-background, #2e4780);
+  color: var(--chip-color-blue-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--green {
+  background-color: var(--chip-color-green-filled-background, #dde8db);
+  color: var(--chip-color-green-filled-foreground, #384733);
+  border-color: transparent;
+}
+
+.chip--filled.chip--yellow {
+  background-color: var(--chip-color-yellow-filled-background, #eab308);
+  color: var(--chip-color-yellow-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--red {
+  background-color: var(--chip-color-red-filled-background, #991b1b);
+  color: var(--chip-color-red-filled-foreground, #ffffff);
+  border-color: transparent;
+}
+
+.chip--filled.chip--neutral {
+  background-color: var(--chip-color-neutral-filled-background, #e5e7eb);
+  color: var(--chip-color-neutral-filled-foreground, #262626);
+  border-color: transparent;
+}
+
+/* Types - Outline */
+.chip--outline.chip--brand {
+  background-color: var(--chip-color-brand-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-brand-outline-foreground, #ed4c09);
+  border-color: var(--chip-color-brand-outline-foreground, #ed4c09);
+}
+
+.chip--outline.chip--accent {
+  background-color: var(--chip-color-accent-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-accent-outline-foreground, #0f7173);
+  border-color: var(--chip-color-accent-outline-foreground, #0f7173);
+}
+
+.chip--outline.chip--blue {
+  background-color: var(--chip-color-blue-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-blue-outline-foreground, #2e4780);
+  border-color: var(--chip-color-blue-outline-foreground, #2e4780);
+}
+
+.chip--outline.chip--green {
+  background-color: var(--chip-color-green-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-green-outline-foreground, #4a6045);
+  border-color: var(--chip-color-green-outline-foreground, #4a6045);
+}
+
+.chip--outline.chip--yellow {
+  background-color: var(--chip-color-yellow-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-yellow-outline-foreground, #eab308);
+  border-color: var(--chip-color-yellow-outline-foreground, #eab308);
+}
+
+.chip--outline.chip--red {
+  background-color: var(--chip-color-red-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-red-outline-foreground, #991b1b);
+  border-color: var(--chip-color-red-outline-foreground, #991b1b);
+}
+
+.chip--outline.chip--neutral {
+  background-color: var(--chip-color-neutral-outline-background, rgba(255, 255, 255, 0));
+  color: var(--chip-color-neutral-outline-text, #262626);
+  border-color: var(--chip-color-neutral-outline-foreground, #9ca3af);
+}
+
+/* Icon styles */
+.chip__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.chip__icon--leading {
+  margin-right: 0;
+}
+
+.chip__icon--trailing {
+  margin-left: 0;
+}
+
+/* Label */
+.chip__label {
+  display: inline-block;
+}
+
+/* Clickable state */
+.chip--clickable {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.chip--clickable:hover {
+  opacity: 0.8;
+}
+
+.chip--clickable:active {
+  opacity: 0.6;
+}
+
+.chip--clickable:focus {
+  outline: 2px solid var(--chip-color-brand-outline-foreground, #ed4c09);
+  outline-offset: 2px;
+}
+

package/src/components/atoms/Chip/Chip.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import Icon, { IconName } from '../Icon/Icon';
+import './Chip.css';
+
+export interface ChipProps {
+  /** Label du chip */
+  label?: string;
+  /** Contenu du chip (alternative à label) */
+  children?: React.ReactNode;
+  /** Taille du chip */
+  size?: 'sm' | 'md' | 'lg';
+  /** Type de chip */
+  type?: 'filled' | 'outline';
+  /** Couleur du chip */
+  color?: 'brand' | 'accent' | 'blue' | 'green' | 'yellow' | 'red' | 'neutral';
+  /** Icône affichée avant le label */
+  leadingIcon?: IconName;
+  /** Icône affichée après le label */
+  trailingIcon?: IconName;
+  /** Taille des icônes */
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** Classes CSS supplémentaires */
+  className?: string;
+  /** Handler de clic (optionnel, rend le chip cliquable) */
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+const Chip: React.FC<ChipProps> = ({
+  label,
+  children,
+  size = 'sm',
+  type = 'filled',
+  color = 'brand',
+  leadingIcon,
+  trailingIcon,
+  iconSize = 'sm',
+  className = '',
+  onClick,
+}) => {
+  const baseClasses = 'chip';
+  const sizeClass = `chip--${size}`;
+  const typeClass = `chip--${type}`;
+  const colorClass = `chip--${color}`;
+  const clickableClass = onClick ? 'chip--clickable' : '';
+
+  const chipClasses = [
+    baseClasses,
+    sizeClass,
+    typeClass,
+    colorClass,
+    clickableClass,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const hasLeadingIcon = Boolean(leadingIcon);
+  const hasTrailingIcon = Boolean(trailingIcon);
+  const content = label || children;
+
+  return (
+    <div className={chipClasses} onClick={onClick} role={onClick ? 'button' : undefined} tabIndex={onClick ? 0 : undefined}>
+      {hasLeadingIcon && (
+        <span className="chip__icon chip__icon--leading">
+          <Icon name={leadingIcon!} size={iconSize} />
+        </span>
+      )}
+      <span className="chip__label">{content}</span>
+      {hasTrailingIcon && (
+        <span className="chip__icon chip__icon--trailing">
+          <Icon name={trailingIcon!} size={iconSize} />
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Chip;
+

package/src/components/atoms/Divider/Divider.css

@@ -0,0 +1,58 @@
+.divider {
+  flex-shrink: 0;
+  background-color: var(--divider-color-default, #d9d9d9);
+  border: none;
+}
+
+/* Horizontal divider */
+.divider--horizontal {
+  width: 100%;
+  height: var(--divider-border-width-default, 1px);
+}
+
+/* Vertical divider */
+.divider--vertical {
+  width: var(--divider-border-width-default, 1px);
+  height: 100%;
+}
+
+/* Dashed variant (Figma divider) */
+.divider--dashed {
+  background-color: transparent;
+}
+
+.divider--dashed.divider--horizontal {
+  height: var(--divider-dash-thickness, var(--divider-border-width-default, 1px));
+  border: none;
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--divider-dash-color, var(--card-color-border-default, #a3a3a3)) 0,
+    var(--divider-dash-color, var(--card-color-border-default, #a3a3a3)) var(--divider-dash-length, 10px),
+    transparent var(--divider-dash-length, 10px),
+    transparent calc(var(--divider-dash-length, 10px) + var(--divider-dash-gap, 6px))
+  );
+}
+
+.divider--dashed.divider--vertical {
+  width: var(--divider-dash-thickness, var(--divider-border-width-default, 1px));
+  border: none;
+  background-image: repeating-linear-gradient(
+    to bottom,
+    var(--divider-dash-color, var(--card-color-border-default, #a3a3a3)) 0,
+    var(--divider-dash-color, var(--card-color-border-default, #a3a3a3)) var(--divider-dash-length, 10px),
+    transparent var(--divider-dash-length, 10px),
+    transparent calc(var(--divider-dash-length, 10px) + var(--divider-dash-gap, 6px))
+  );
+}
+
+/* Color bar variant (used in Car Booking Card) */
+.divider--color-bar {
+  height: var(--dimension-height-h-1, 4px);
+  background-color: var(--color-border-active-default, #0f7173);
+}
+
+.divider--color-bar.divider--vertical {
+  width: var(--dimension-width-w-1, 4px);
+  height: 100%;
+}
+

package/src/components/atoms/Divider/Divider.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './Divider.css';
+
+export interface DividerProps {
+  /** Orientation of the divider */
+  orientation?: 'horizontal' | 'vertical';
+  /** Variant of the divider */
+  variant?: 'default' | 'color-bar' | 'dashed';
+  /** Custom color (overrides default color) */
+  color?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const Divider: React.FC<DividerProps> = ({
+  orientation = 'horizontal',
+  variant = 'default',
+  color,
+  className = '',
+}) => {
+  const baseClass = 'divider';
+  const orientationClass = `divider--${orientation}`;
+  const variantClass = variant !== 'default' ? `divider--${variant}` : '';
+  const classes = [baseClass, orientationClass, variantClass, className]
+    .filter(Boolean)
+    .join(' ');
+
+  const style: React.CSSProperties = color
+    ? { backgroundColor: color, borderColor: color }
+    : {};
+
+  return <div className={classes} style={style} role="separator" aria-orientation={orientation} />;
+};
+
+export default Divider;
+

package/src/components/atoms/Icon/Icon.tsx

@@ -1,164 +1,18 @@
-import React from "react";
-import Chevron from "./icons/Chevron";
-import Check from "./icons/Check";
-import Close from "./icons/Close";
-import Search from "./icons/Search";
-import User from "./icons/User";
-import UserIcon from "./icons/UserIcon";
-import CalendarIcon from "./icons/CalendarIcon";
-import ArrivalIcon from "./icons/ArrivalIcon";
-import DepartureIcon from "./icons/DepartureIcon";
-import MapPinIcon from "./icons/MapPinIcon";
-import DeleteIcon from "./icons/DeleteIcon";
-import EyeIcon from "./icons/EyeIcon";
-import InfoIcon from "./icons/InfoIcon";
-import CheckCircleIcon from "./icons/CheckCircleIcon";
-import StrollerIcon from "./icons/StrollerIcon";
-import CarIcon from "./icons/CarIcon";
-import MoreIcon from "./icons/MoreIcon";
-import Settings from "./icons/Settings";
-import MenuIcon from "./icons/MenuIcon";
-import MautourcoLogo from "./icons/MautoucoLogo";
-import YouTubeIcon from "./icons/Youtube";
-import FacebookIcon from "./icons/FacebookIcon";
-import TwitterIcon from "./icons/TwitterIcon";
-import LinkedInIcon from "./icons/LinkedInIcon";
-import CalendarOutlineIcon from "./icons/CalendarOutlineIcon";
-import PlusIcon from "./icons/PlusIcon";
-import MinusIcon from "./icons/MinusIcon";
-import HomeIcon from "./icons/HomeIcon";
-import PlaneIcon from "./icons/PlaneIcon";
-import ShipIcon from "./icons/ShipIcon";
-import BuildingIcon from "./icons/BuildingIcon";
-
-export type IconName =
-  | "chevron-down"
-  | "chevron-up"
-  | "chevron-left"
-  | "chevron-right"
-  | "check"
-  | "close"
-  | "search"
-  | "user"
-  | "user-icon"
-  | "calendar"
-  | 'calendar-outline'
-  | "arrival"
-  | "departure"
-  | "map-pin"
-  | "delete"
-  | "eye"
-  | "info"
-  | "check-circle"
-  | "stroller"
-  | "chevron-down-new"
-  | "car"
-  | "more"
-  | "settings"
-  | "menu"
-  | "mautourcoLogo"
-  | "youtube"
-  | "facebook"
-  | "linkedin"
-  | "twitter"
-  | "plus"
-  | "minus"
-  | "home"
-  | "plane"
-  | "ship"
-  | "building";
+import React from 'react';
+import { ICONS, type IconName } from './icons/registry';
 
 interface IconProps {
   name: IconName;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   className?: string;
   color?: string;
   style?: React.CSSProperties;
 }
 
-const Icon: React.FC<IconProps> = ({
-  name,
-  size = "md",
-  className = "",
-  color,
-  style,
-}) => {
-  const iconProps = { size, className, color, style };
-
-  switch (name) {
-    case "chevron-down":
-      return <Chevron direction="down" {...iconProps} />;
-    case "chevron-up":
-      return <Chevron direction="up" {...iconProps} />;
-    case "chevron-left":
-      return <Chevron direction="left" {...iconProps} />;
-    case "chevron-right":
-      return <Chevron direction="right" {...iconProps} />;
-    case "check":
-      return <Check {...iconProps} />;
-    case "close":
-      return <Close {...iconProps} />;
-    case "search":
-      return <Search {...iconProps} />;
-    case "user":
-      return <User {...iconProps} />;
-    case "user-icon":
-      return <UserIcon {...iconProps} />;
-    case "calendar":
-      return <CalendarIcon {...iconProps} />;
-    case 'calendar-outline':
-      return <CalendarOutlineIcon {...iconProps} />;
-    case 'arrival':
-      return <ArrivalIcon {...iconProps} />;
-    case "departure":
-      return <DepartureIcon {...iconProps} />;
-    case "map-pin":
-      return <MapPinIcon {...iconProps} />;
-    case "delete":
-      return <DeleteIcon {...iconProps} />;
-    case "eye":
-      return <EyeIcon {...iconProps} />;
-    case "info":
-      return <InfoIcon {...iconProps} />;
-    case "check-circle":
-      return <CheckCircleIcon {...iconProps} />;
-    case "stroller":
-      return <StrollerIcon {...iconProps} />;
-    case "chevron-down-new":
-      return <Chevron direction="down" variant="filled" {...iconProps} />;
-    case "car":
-      return <CarIcon {...iconProps} />;
-    case "more":
-      return <MoreIcon {...iconProps} />;
-    case "settings":
-      return <Settings {...iconProps} />;
-    case "menu":
-      return <MenuIcon {...iconProps} />;
-    case "mautourcoLogo":
-      return <MautourcoLogo {...iconProps} />;
-    case "youtube":
-      return <YouTubeIcon {...iconProps} />;
-    case "facebook":
-      return <FacebookIcon {...iconProps} />;
-    case "twitter":
-      return <TwitterIcon {...iconProps} />;
-    case "linkedin":
-      return <LinkedInIcon {...iconProps} />;
-    case "plus":
-      return <PlusIcon {...iconProps} />;
-    case "minus":
-      return <MinusIcon {...iconProps} />;
-    case "home":
-      return <HomeIcon {...iconProps} />;
-    case "plane":
-      return <PlaneIcon {...iconProps} />;
-    case "ship":
-      return <ShipIcon {...iconProps} />;
-    case "building":
-      return <BuildingIcon {...iconProps} />;
-    default:
-      return null;
-  }
+const Icon: React.FC<IconProps> = ({ name, size = 'md', className = '', color, style }) => {
+  const IconComponent = ICONS[name];
+  return <IconComponent size={size} className={className} color={color} style={style} />;
 };
 
 export default Icon;
+export type { IconName };

package/src/components/atoms/Icon/icons/AccomIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+interface AccomIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+  /**
+   * Couleur par défaut si aucune couleur n'est spécifiée
+   */
+  defaultColor?: string;
+}
+
+const AccomIcon: React.FC<AccomIconProps> = ({ size = 'md', className = '', color }) => {
+  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 sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M13.915 7.99902C13.915 7.84443 13.8535 7.69623 13.7441 7.58691C13.6348 7.47762 13.4867 7.41602 13.332 7.41602H2.66504C2.51045 7.4161 2.36225 7.47759 2.25293 7.58691C2.14361 7.69623 2.08212 7.84443 2.08203 7.99902V11.249H13.915V7.99902ZM12.582 3.99902C12.5819 3.84443 12.5205 3.69623 12.4111 3.58691C12.3018 3.47759 12.1536 3.4161 11.999 3.41602H8.74902V5.91602H12.582V3.99902ZM3.41504 5.91602H7.24902V3.41602H3.99902C3.84431 3.41602 3.69533 3.47752 3.58594 3.58691C3.47672 3.69622 3.41513 3.84451 3.41504 3.99902V5.91602ZM14.082 6.05664C14.3505 6.1603 14.5972 6.31895 14.8047 6.52637C15.1953 6.91699 15.415 7.44661 15.415 7.99902V13.333C15.4149 13.7471 15.0791 14.083 14.665 14.083C14.2511 14.0828 13.9152 13.747 13.915 13.333V12.749H2.08203V13.333C2.08186 13.7471 1.74614 14.083 1.33203 14.083C0.917926 14.083 0.582207 13.7471 0.582031 13.333V7.99902C0.582117 7.44661 0.801759 6.91699 1.19238 6.52637C1.39981 6.31894 1.64659 6.16033 1.91504 6.05664V3.99902C1.91513 3.44668 2.13487 2.91698 2.52539 2.52637C2.91609 2.13567 3.44649 1.91602 3.99902 1.91602H11.999C12.5514 1.9161 13.0811 2.13574 13.4717 2.52637C13.8623 2.91699 14.0819 3.44661 14.082 3.99902V6.05664Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default AccomIcon;

package/src/components/atoms/Icon/icons/ArrowDownOutlineIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+interface ArrowDownOutlineIconProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+}
+
+const ArrowDownOutlineIcon: React.FC<ArrowDownOutlineIconProps> = ({ size = 'md', className = '', color }) => {
+  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 sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M7.24889 3.33398C7.24889 2.91977 7.58468 2.58398 7.99889 2.58398C8.41296 2.58416 8.74889 2.91988 8.74889 3.33398V10.8564L12.1346 7.4707C12.4275 7.17781 12.9023 7.17781 13.1952 7.4707C13.4881 7.7636 13.4881 8.23836 13.1952 8.53125L8.52917 13.1973C8.23627 13.4902 7.76151 13.4902 7.46862 13.1973L2.80163 8.53125L2.74987 8.47363C2.50994 8.17912 2.5273 7.74519 2.80163 7.4707C3.07628 7.19605 3.51095 7.1785 3.80553 7.41895L3.86217 7.4707L7.24889 10.8564V3.33398Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
+
+export default ArrowDownOutlineIcon;

package/src/components/atoms/Icon/icons/ArrowRightOutlineIcon.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface ArrowRightOutlineIconProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const ArrowRightOutlineIcon: React.FC<ArrowRightOutlineIconProps> = ({
+  size = "md",
+  className = "",
+  color,
+}) => {
+  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 sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : "text-current";
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      className={classes}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.46875 2.80358C7.74324 2.52925 8.17716 2.51189 8.47168 2.75182L8.5293 2.80358L13.1953 7.47057C13.4882 7.76346 13.4882 8.23822 13.1953 8.53112L8.5293 13.1971C8.2364 13.49 7.76164 13.49 7.46875 13.1971C7.17586 12.9042 7.17586 12.4295 7.46875 12.1366L10.8545 8.75084H3.33203C2.91793 8.75084 2.58221 8.41491 2.58203 8.00084C2.58203 7.58663 2.91782 7.25084 3.33203 7.25084H10.8545L7.46875 3.86413L7.41699 3.80749C7.17655 3.5129 7.1941 3.07823 7.46875 2.80358Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ArrowRightOutlineIcon;