mautourco-components 0.2.18 → 0.2.20

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+
+const ClockIcon: React.FC<IconBaseProps> = ({ 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.63187 4.00006C7.98111 4.00006 8.26373 4.2723 8.26373 4.60873V8.51808L10.6838 9.86382C10.9861 10.032 11.0898 10.4041 10.9152 10.6954C10.7405 10.9867 10.3543 11.0865 10.0519 10.9183L7.31593 9.39661C7.12032 9.28783 7 9.08691 7 8.86937V4.60867C7 4.27224 7.28262 4.00006 7.63187 4.00006Z"
+        fill="white"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 2C11.3136 2 14 4.6864 14 8C14 11.3136 11.3136 14 8 14C4.6864 14 2 11.3136 2 8C2 4.6864 4.6864 2 8 2ZM8 3.06667C5.27547 3.06667 3.06667 5.27547 3.06667 8C3.06667 10.7245 5.27547 12.9333 8 12.9333C10.7245 12.9333 12.9333 10.7245 12.9333 8C12.9333 5.27547 10.7245 3.06667 8 3.06667Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default ClockIcon;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+
+const CloseCircleIcon: React.FC<IconBaseProps> = ({
+  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 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_5114_5257)">
+        <path
+          d="M8.37604 14.0331L10.4083 12.0009L8.375 9.96758C7.93578 9.52835 7.93601 8.81595 8.375 8.37659C8.81434 7.93725 9.52665 7.93725 9.96599 8.37659L11.9993 10.4099L14.0325 8.37659C14.4719 7.93725 15.1842 7.93725 15.6235 8.37659C16.0625 8.81596 16.0628 9.52835 15.6235 9.96758L13.5903 12.0009L15.6225 14.0331L15.7002 14.1191C16.0604 14.5609 16.0343 15.2123 15.6225 15.6241C15.2106 16.0356 14.5592 16.062 14.1175 15.7018L14.0315 15.6241L11.9993 13.5918L9.96703 15.6241C9.5278 16.0633 8.81541 16.0631 8.37604 15.6241C7.9367 15.1847 7.9367 14.4724 8.37604 14.0331Z"
+          fill="black"
+        />
+        <path
+          d="M12 0.874514C18.1438 0.874779 23.1237 5.85625 23.124 12C23.1238 18.1438 18.1438 23.1238 12 23.124C5.856 23.124 0.874777 18.1439 0.874514 12C0.874812 5.85609 5.85602 0.874513 12 0.874514ZM12 3.12451C7.09866 3.12451 3.12481 7.09873 3.12451 12C3.12478 16.9013 7.09864 20.874 12 20.874C16.9011 20.8738 20.8738 16.9011 20.874 12C20.8737 7.09889 16.9011 3.12478 12 3.12451Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5114_5257">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default CloseCircleIcon;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+
+const LandIcon: React.FC<IconBaseProps> = ({ 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="M5.28056 1.25198C5.58299 1.23066 5.8686 1.39388 6.00419 1.66507L8.20537 6.06644L10.803 3.46976L10.8753 3.40628C11.0527 3.26937 11.2838 3.21837 11.5052 3.27054C11.7582 3.33026 11.963 3.51613 12.0452 3.76273L15.3782 13.7627C15.4545 13.9914 15.4157 14.2429 15.2747 14.4385C15.1337 14.634 14.9073 14.75 14.6663 14.75H1.3333C1.09221 14.75 0.86586 14.6341 0.724897 14.4385C0.583946 14.2429 0.545147 13.9914 0.621381 13.7627L4.62138 1.76273L4.66533 1.65921C4.78346 1.42754 5.01581 1.2708 5.28056 1.25198ZM5.34013 10.0869C4.66902 10.0511 3.97444 10.2227 3.24345 10.6407L2.37431 13.25H13.6263L13.0618 11.5596C12.3043 11.919 11.524 12.1022 10.7259 12.084C9.63177 12.059 8.57554 11.6588 7.56767 10.9453V10.9463C6.78406 10.393 6.04385 10.1246 5.34013 10.0869ZM3.8704 8.75882C4.37922 8.61969 4.89661 8.5619 5.42021 8.58988C6.33277 8.63869 7.21752 8.94744 8.06962 9.47952L8.4329 9.72073V9.72171C9.25127 10.3011 10.0246 10.5672 10.7601 10.584C11.345 10.5973 11.9498 10.4512 12.5823 10.1211L11.0052 5.38773L8.53056 7.86331C8.36016 8.03372 8.11805 8.11179 7.88017 8.07327C7.6423 8.03467 7.43724 7.88447 7.32939 7.66898L5.47197 3.95511L3.8704 8.75882Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default LandIcon;

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

@@ -29,8 +29,12 @@ const MapIcon: React.FC<MapIconProps> = ({ size = 'md', className = '', color })
   const classes = `${sizeClasses} ${colorClass} ${className}`;
 
   return (
-    <svg className={classes} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_7033_40039)">
+    <svg
+      className={classes}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_7033_40039)">
         <path
           d="M11.2483 5.33398C11.2483 4.47217 10.9064 3.6456 10.2971 3.03613C9.6876 2.42664 8.86022 2.08398 7.99827 2.08398C7.13645 2.08408 6.30982 2.42673 5.70042 3.03613C5.09104 3.64561 4.74827 4.47212 4.74827 5.33398C4.74827 6.29385 5.27536 7.37034 6.01975 8.38379C6.70202 9.31263 7.49819 10.0927 7.99827 10.5488C8.49845 10.0929 9.29531 9.31298 9.97776 8.38379C10.722 7.37039 11.2483 6.2939 11.2483 5.33398ZM2.11545 13.917H13.8821L12.6047 10.084H10.5403C9.9137 10.8175 9.29437 11.4056 8.90354 11.7559C8.88906 11.7688 8.87406 11.7812 8.85862 11.793C8.61164 11.9816 8.30904 12.084 7.99827 12.084C7.68762 12.0839 7.38578 11.9815 7.13889 11.793C7.12325 11.781 7.10764 11.769 7.09299 11.7559C6.70253 11.4056 6.08382 10.8175 5.45725 10.084H3.39573L2.11545 13.917ZM8.58225 5.33398C8.58225 5.01182 8.32043 4.75098 7.99827 4.75098C7.67627 4.75117 7.41526 5.01194 7.41526 5.33398C7.41526 5.65603 7.67627 5.91679 7.99827 5.91699C8.32043 5.91699 8.58225 5.65615 8.58225 5.33398ZM10.0823 5.33398C10.0823 6.48458 9.14886 7.41699 7.99827 7.41699C6.84784 7.41679 5.91526 6.48446 5.91526 5.33398C5.91526 4.18351 6.84784 3.25117 7.99827 3.25098C9.14886 3.25098 10.0823 4.18339 10.0823 5.33398ZM12.7395 5.60547C12.6711 6.66975 12.2087 7.6965 11.6506 8.58398H12.6643C12.9246 8.58392 13.1794 8.65556 13.4006 8.79004L13.4934 8.85156L13.5803 8.91992C13.7498 9.06348 13.8835 9.24462 13.9699 9.44922L14.009 9.55273L15.342 13.5527C15.4129 13.7655 15.4324 13.9922 15.3987 14.2139C15.3648 14.4357 15.2788 14.6471 15.1477 14.8291C15.0166 15.011 14.8442 15.1594 14.6448 15.2617C14.4451 15.364 14.2236 15.4168 13.9992 15.417H1.99827C1.77384 15.4169 1.5525 15.3641 1.35276 15.2617C1.15295 15.1593 0.980017 15.0103 0.848853 14.8281C0.717783 14.646 0.631562 14.4348 0.597876 14.2129C0.564278 13.9911 0.584401 13.7645 0.655493 13.5518L1.99143 9.55176L2.03049 9.44727C2.1314 9.20941 2.29628 9.00342 2.50706 8.85156L2.59983 8.79004C2.82065 8.65595 3.07444 8.58412 3.3342 8.58398H4.34592C3.78785 7.6966 3.32547 6.66961 3.25706 5.60547L3.24827 5.33398C3.24827 4.07429 3.74919 2.86637 4.63987 1.97559C5.53058 1.08487 6.73862 0.584082 7.99827 0.583984C9.25805 0.583984 10.4668 1.08479 11.3576 1.97559C12.2483 2.86635 12.7483 4.07435 12.7483 5.33398L12.7395 5.60547Z"
           fill="#0F7173"

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

@@ -42,7 +42,7 @@ const PlusCircleIcon: React.FC<PlusCircleIconProps> = ({
       viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">
-      <g clip-path="url(#clip0_7074_66340)">
+      <g clipPath="url(#clip0_7074_66340)">
         <path
           d="M13.915 8.00098C13.915 4.7334 11.2666 2.08416 7.99902 2.08398C4.73134 2.08398 2.08203 4.73329 2.08203 8.00098C2.08221 11.2685 4.73145 13.917 7.99902 13.917C11.2664 13.9168 13.9149 11.2684 13.915 8.00098ZM7.24902 10.667V8.75098H5.33203C4.91793 8.75098 4.58221 8.41504 4.58203 8.00098C4.58203 7.58676 4.91782 7.25098 5.33203 7.25098H7.24902V5.33398C7.24902 4.91977 7.58481 4.58398 7.99902 4.58398C8.41309 4.58416 8.74902 4.91988 8.74902 5.33398V7.25098H10.665L10.7422 7.25488C11.1203 7.29337 11.415 7.61271 11.415 8.00098C11.4149 8.38912 11.1202 8.70862 10.7422 8.74707L10.665 8.75098H8.74902V10.667C8.74902 11.0811 8.41309 11.4168 7.99902 11.417C7.58481 11.417 7.24902 11.0812 7.24902 10.667ZM15.415 8.00098C15.4149 12.0968 12.0949 15.4168 7.99902 15.417C3.90302 15.417 0.582208 12.0969 0.582031 8.00098C0.582031 3.90487 3.90291 0.583984 7.99902 0.583984C12.095 0.584161 15.415 3.90497 15.415 8.00098Z"
           fill="white"

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { IconBaseProps } from './registry';
+
+const SeaIcon: React.FC<IconBaseProps> = ({ 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">
+      <g clipPath="url(#clip0_238_4210)">
+        <path
+          d="M13.916 10.6664V7.41638H12.75V10.6664C12.75 11.2189 12.5303 11.7493 12.1396 12.14C11.7489 12.5307 11.2186 12.7504 10.666 12.7504C10.2521 12.7502 9.91619 12.4143 9.91602 12.0004C9.91602 11.5863 10.252 11.2505 10.666 11.2504C10.8207 11.2504 10.9697 11.1889 11.0791 11.0795C11.1885 10.9701 11.25 10.8211 11.25 10.6664V9.49353C10.6882 9.87454 10.0216 10.0834 9.33301 10.0834H8.98926C8.43974 10.0755 7.91492 9.8509 7.53027 9.45837C7.52045 9.44835 7.5112 9.43769 7.50195 9.42712L7.05957 8.92126C6.8232 8.6932 6.50876 8.69298 6.27246 8.92126L5.83105 9.42712C5.82176 9.43774 5.81163 9.4483 5.80176 9.45837C5.41714 9.85078 4.89317 10.0755 4.34375 10.0834H4C3.09384 10.0834 2.22473 9.72315 1.58398 9.0824C0.943235 8.44165 0.583008 7.57254 0.583008 6.66638C0.583094 5.76034 0.943312 4.89104 1.58398 4.25037C2.2247 3.60982 3.094 3.25037 4 3.25037H9.33301C10.0213 3.25037 10.6883 3.45758 11.25 3.83826V1.33337C11.25 0.91916 11.5858 0.583374 12 0.583374H14.666C15.0802 0.583374 15.416 0.91916 15.416 1.33337V10.6664C15.416 13.2806 13.2802 15.4164 10.666 15.4164H8C7.44747 15.4164 6.91707 15.1967 6.52637 14.806C6.29243 14.572 6.12124 14.2877 6.02051 13.9789C5.71169 13.8781 5.42736 13.707 5.19336 13.473C4.80274 13.0824 4.58309 12.5528 4.58301 12.0004C4.58301 11.5862 4.91879 11.2504 5.33301 11.2504C5.74722 11.2504 6.08301 11.5862 6.08301 12.0004C6.08309 12.155 6.14459 12.3032 6.25391 12.4125C6.36323 12.5218 6.51142 12.5833 6.66602 12.5834C6.82072 12.5834 6.9697 12.5219 7.0791 12.4125C7.18832 12.3032 7.24991 12.1549 7.25 12.0004C7.25 11.5862 7.58579 11.2504 8 11.2504C8.41406 11.2505 8.75 11.5863 8.75 12.0004C8.74991 12.5527 8.53017 13.0824 8.13965 13.473C8.00163 13.611 7.84535 13.7265 7.67773 13.8197C7.77252 13.8824 7.88463 13.9164 8 13.9164H10.666C12.4518 13.9164 13.916 12.4522 13.916 10.6664ZM3.41602 14.3334C3.41602 14.1321 3.27369 13.9641 3.08398 13.9252L3 13.9164C2.76988 13.9164 2.58301 14.1033 2.58301 14.3334C2.58301 14.5635 2.76988 14.7504 3 14.7504C3.22997 14.7502 3.41602 14.5634 3.41602 14.3334ZM2.00586 10.9164C2.41996 10.9164 2.75568 11.2523 2.75586 11.6664C2.75586 12.0806 2.42007 12.4164 2.00586 12.4164H2C1.58579 12.4164 1.25 12.0806 1.25 11.6664C1.25018 11.2523 1.5859 10.9164 2 10.9164H2.00586ZM12.75 5.91638H13.916V2.08337H12.75V5.91638ZM4.08301 14.3334C4.08301 14.9316 3.59816 15.4162 3 15.4164C2.40169 15.4164 1.91602 14.9317 1.91602 14.3334C1.91602 13.7351 2.40169 13.2504 3 13.2504L3.11035 13.2552C3.65669 13.3107 4.08301 13.7724 4.08301 14.3334ZM2.08301 6.66638C2.08301 7.17471 2.28509 7.66241 2.64453 8.02185C3.00398 8.3813 3.49167 8.58337 4 8.58337H4.32227C4.47445 8.58121 4.6192 8.51918 4.72656 8.4115L5.16895 7.90662L5.20312 7.86951C6.02931 7.04366 7.30376 7.04355 8.12988 7.86951C8.14165 7.88128 8.1531 7.89409 8.16406 7.90662L8.6084 8.41443C8.7155 8.5205 8.85979 8.58122 9.01074 8.58337H9.33301L9.52246 8.57361C9.96121 8.53003 10.374 8.33635 10.6885 8.02185C11.003 7.70728 11.1967 7.29464 11.2402 6.85583L11.25 6.66638L11.2402 6.47693C11.1966 6.03844 11.0027 5.62628 10.6885 5.31189C10.374 4.99737 9.96124 4.80272 9.52246 4.75916L9.33301 4.75037H4C3.49167 4.75037 3.00398 4.95245 2.64453 5.31189C2.28527 5.67124 2.08309 6.15824 2.08301 6.66638Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_238_4210">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default SeaIcon;

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

@@ -6,6 +6,7 @@ import ArrivalIcon from './ArrivalIcon';
 import ArrowDownOutlineIcon from './ArrowDownOutlineIcon';
 import ArrowRightOutlineIcon from './ArrowRightOutlineIcon';
 import BikeIcon from './BikeIcon';
+import BookingIcon from './BookingIcon';
 import Building2OutlineIcon from './Building2OutlineIcon';
 import BuildingIcon from './BuildingIcon';
 import BusIcon from './BusIcon';
@@ -13,17 +14,22 @@ import Calendar2Icon from './Calendar2Icon';
 import CalendarIcon from './CalendarIcon';
 import CalendarOutlineIcon from './CalendarOutlineIcon';
 import CalendarRangeOutlineIcon from './CalendarRangeOutlineIcon';
+import CarFrontIcon from './CarFront';
 import CarIcon from './CarIcon';
+import CatamaranIcon from './CatamaranIcon';
 import Check from './Check';
 import CheckCircleIcon from './CheckCircleIcon';
 import Chevron from './Chevron';
+import ClockIcon from './ClockIcon';
 import Close from './Close';
+import CloseCircleIcon from './CloseCircleIcon';
 import DeleteIcon from './DeleteIcon';
 import DepartureIcon from './DepartureIcon';
 import EyeIcon from './EyeIcon';
 import FacebookIcon from './FacebookIcon';
 import HomeIcon from './HomeIcon';
 import InfoIcon from './InfoIcon';
+import LandIcon from './Land';
 import LinkedInIcon from './LinkedInIcon';
 import LuggageIcon from './LuggageIcon';
 import MapIcon from './MapIcon';
@@ -41,6 +47,7 @@ import PlaneTakeoffOutlineIcon from './PlaneTakeoffOutlineIcon';
 import PlusCircleIcon from './PlusCircleIcon';
 import PlusIcon from './PlusIcon';
 import QuotationIcon from './QuotationIcon';
+import SeaIcon from './SeaIcon';
 import Search from './Search';
 import Settings from './Settings';
 import ShipIcon from './ShipIcon';
@@ -132,6 +139,13 @@ export const ICONS = {
   bike: BikeIcon as unknown as IconComponent,
   air: AirIcon as unknown as IconComponent,
   luggage: LuggageIcon as unknown as IconComponent,
+  'car-front': CarFrontIcon as unknown as IconComponent,
+  sea: SeaIcon as unknown as IconComponent,
+  catamaran: CatamaranIcon as unknown as IconComponent,
+  land: LandIcon as unknown as IconComponent,
+  booking: BookingIcon as unknown as IconComponent,
+  'close-circle': CloseCircleIcon as unknown as IconComponent,
+  clock: ClockIcon as unknown as IconComponent,
 } as const satisfies Record<string, IconComponent>;
 
 export type IconName = keyof typeof ICONS;

package/src/components/atoms/Inputs/Input/Input.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Icon from '../../Icon/Icon';
+import Icon, { IconName } from '../../Icon/Icon';
 
 interface InputProps {
   variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
@@ -10,7 +10,7 @@ interface InputProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  icon?: 'search' | 'close' | 'settings' | 'user';
+  icon?: IconName;
   iconPosition?: 'leading' | 'trailing';
 }
 
@@ -32,10 +32,11 @@ const Input: React.FC<InputProps> = ({
     focus: 'input-field--focus',
     success: 'input-field--success',
     error: 'input-field--error',
-    disabled: 'input-field--disabled'
+    disabled: 'input-field--disabled',
   };
 
-  const inputClasses = `${baseClasses} ${variantClasses[variant]} ${icon ? `input-field--with-icon input-field--icon-${iconPosition}` : ''} ${className}`.trim();
+  const inputClasses =
+    `${baseClasses} ${variantClasses[variant]} ${icon ? `input-field--with-icon input-field--icon-${iconPosition}` : ''} ${className}`.trim();
 
   return (
     <div className={`input-wrapper ${icon ? 'input-wrapper--with-icon' : ''}`.trim()}>
@@ -63,4 +64,4 @@ const Input: React.FC<InputProps> = ({
   );
 };
 
-export default Input;
+export default Input;

package/src/components/atoms/Inputs/Textarea/Textarea.tsx

@@ -7,45 +7,59 @@ interface TextareaProps {
   disabled?: boolean;
   rows?: number;
   className?: string;
+  style?: React.CSSProperties;
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onInput?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
 }
 
-const Textarea: React.FC<TextareaProps> = ({
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
   variant = 'default',
   placeholder = 'Enter your text...',
   value,
   disabled = false,
   rows = 4,
   className = '',
+      style,
   onChange,
+      onInput,
   onFocus,
   onBlur,
-}) => {
+    },
+    ref
+  ) => {
   const baseClasses = 'input-field';
   const variantClasses = {
     default: 'input-field--default',
     focus: 'input-field--focus',
     success: 'input-field--success',
     error: 'input-field--error',
-    disabled: 'input-field--disabled'
+      disabled: 'input-field--disabled',
   };
 
   const textareaClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;
 
   return (
     <textarea
+        ref={ref}
       className={textareaClasses}
       placeholder={placeholder}
       value={value}
       disabled={disabled || variant === 'disabled'}
       rows={rows}
+        style={style}
       onChange={onChange}
+        onInput={onInput}
       onFocus={onFocus}
       onBlur={onBlur}
     />
   );
-};
+  }
+);
+
+Textarea.displayName = 'Textarea';
 
 export default Textarea;

package/src/components/molecules/BookingPax/BookingPax.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BookingPaxAccom } from './BookingPaxAccom';
+import { BookingPaxExcursion } from './BookingPaxExcursion';
+import { BookingPaxTransfer } from './BookingPaxTransfer';
+
+export const BookingPax = (props: React.PropsWithChildren) => {
+  return <div className="booking-pax space-y-6" {...props} />;
+};
+
+BookingPax.Accom = BookingPaxAccom;
+BookingPax.Excursion = BookingPaxExcursion;
+BookingPax.Transfer = BookingPaxTransfer;

package/src/components/molecules/BookingPax/BookingPaxAccom.tsx

@@ -0,0 +1,120 @@
+import useBookingPax from '@/src/hooks/useBookingPax';
+import React, { useEffect, useMemo, useRef } from 'react';
+import TextWithIcon from '../TextWithIcon/TextWithIcon';
+import {
+  BookingPaxClient,
+  BookingPaxClientInfo,
+  BookingPaxClientProps,
+} from './BookingPaxClient/BookingPaxClient';
+import { BookingPaxHeader } from './BookingPaxHeader';
+import { BookingPaxLayout } from './BookingPaxLayout/BookingPaxLayout';
+import { BookingPaxRemarks } from './BookingPaxRemarks';
+
+export interface BookingPaxAccomRoom {
+  paxCount: number;
+}
+
+export interface RoomData {
+  room: BookingPaxAccomRoom;
+  roomIndex: number;
+  selectedCount: number;
+  isPaxCountError: boolean;
+}
+
+export interface BookingPaxAccomProps extends Pick<
+  BookingPaxClientProps,
+  'selectedClientsInfoIds' | 'onPaxChange'
+> {
+  rooms: BookingPaxAccomRoom[];
+  clientsInfo: BookingPaxClientInfo[];
+  hotelName: string;
+  roomName: string;
+  isSubmitted?: boolean;
+  maxPaxCount?: number;
+  onRemarkChange?: (value: string) => void;
+  onError?: (roomIndex: number, hasError: boolean) => void;
+}
+
+export const BookingPaxAccom: React.FC<BookingPaxAccomProps> = (props) => {
+  const {
+    rooms,
+    clientsInfo = [],
+    hotelName,
+    roomName,
+    selectedClientsInfoIds,
+    isSubmitted,
+    onPaxChange,
+    onRemarkChange,
+    onError,
+  } = props;
+
+  const { changeOptions, isSelectedClient, onPaxOptionsChange, onSelectedClients } =
+    useBookingPax(selectedClientsInfoIds);
+
+  // Calculate selected pax count for each room
+  const roomData = useMemo<RoomData[]>(() => {
+    return rooms.map((room, roomIndex) => {
+      const selectedClients = clientsInfo.filter((client) =>
+        isSelectedClient(roomIndex, client.clientId)
+      );
+      const selectedCount = selectedClients.length;
+      const isPaxCountError = selectedCount < room.paxCount;
+
+      return {
+        room,
+        roomIndex,
+        selectedCount,
+        isPaxCountError,
+      };
+    });
+  }, [rooms, selectedClientsInfoIds, isSubmitted, isSelectedClient]);
+
+  // Track previous error states to only call onError when it changes
+  const previousErrorsRef = useRef<Record<number, boolean>>({});
+
+  // Call onError only when error state changes
+  useEffect(() => {
+    if (!onError) return;
+
+    roomData.forEach(({ roomIndex, isPaxCountError }) => {
+      const previousError = previousErrorsRef.current[roomIndex];
+      if (previousError !== isPaxCountError) {
+        onError(roomIndex, isPaxCountError);
+        previousErrorsRef.current[roomIndex] = isPaxCountError;
+      }
+    });
+  }, [roomData, onError]);
+
+  useEffect(() => {
+    onSelectedClients(clientsInfo, onPaxChange);
+  }, [changeOptions, onPaxChange]);
+
+  return (
+    <BookingPaxLayout
+      title="Accommodation"
+      icon="accom"
+      className="booking-pax-accom"
+      header={
+        <BookingPaxHeader>
+          <BookingPaxHeader.Name name={hotelName} icon="accom" location={roomName} />
+        </BookingPaxHeader>
+      }>
+      {roomData.map(({ room, roomIndex }) => (
+        <div key={`rm-${roomIndex}`} className="space-y-2">
+          <TextWithIcon icon="accom">Room {roomIndex + 1}</TextWithIcon>
+
+          <BookingPaxClient
+            id={`accommodation-${roomIndex}`}
+            clients={clientsInfo}
+            selectedClientsInfoIds={selectedClientsInfoIds}
+            selectedIndex={roomIndex}
+            paxCount={room.paxCount}
+            onPaxChange={onPaxOptionsChange}
+            isSubmitted={isSubmitted}
+          />
+        </div>
+      ))}
+      <BookingPaxRemarks onChange={onRemarkChange} />
+    </BookingPaxLayout>
+  );
+};

package/src/components/molecules/BookingPax/BookingPaxClient/BookingPaxClient.css

@@ -0,0 +1,4 @@
+.booking-pax-client {
+  @apply grid gap-x-4 gap-y-2;
+  @apply lg:grid-cols-2;
+}