mautourco-components 0.2.20 → 0.2.22

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

@@ -1,13 +1,14 @@
 import React from 'react';
-interface CheckboxProps {
+export interface CheckboxProps {
     checked?: boolean;
     disabled?: boolean;
     error?: boolean;
     label?: string;
-    onChange?: (checked: boolean) => void;
     className?: string;
     id?: string;
     leadingContent?: React.ReactNode;
+    labelPosition?: 'leading' | 'trailing';
+    onChange?: (checked: boolean) => void;
 }
 declare const Checkbox: React.FC<CheckboxProps>;
 export default Checkbox;

package/dist/components/atoms/Checkbox/Checkbox.js

@@ -10,18 +10,22 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import Check from '../Icon/icons/Check';
+import { Text } from '../Typography/Typography';
 var Checkbox = function (_a) {
-    var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, label = _a.label, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e, id = _a.id, leadingContent = _a.leadingContent;
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, label = _a.label, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e, id = _a.id, leadingContent = _a.leadingContent, _f = _a.labelPosition, labelPosition = _f === void 0 ? 'trailing' : _f;
+    var _g = useState(false), isChecked = _g[0], setIsChecked = _g[1];
     var handleChange = function (e) {
-        if (!disabled && onChange) {
-            onChange(e.target.checked);
+        if (!disabled) {
+            setIsChecked(e.target.checked);
         }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked);
     };
     var handleLabelClick = function (e) {
         if (!disabled && onChange) {
             e.preventDefault();
-            onChange(!checked);
+            onChange(!isChecked);
         }
     };
     var getStateClasses = function () {
@@ -29,11 +33,17 @@ var Checkbox = function (_a) {
             return 'checkbox--disabled';
         if (error)
             return 'checkbox--error';
-        if (checked)
+        if (isChecked)
             return 'checkbox--checked';
         return 'checkbox--default';
     };
     var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
-    return (_jsx("div", __assign({ className: "checkbox-container ".concat(getStateClasses(), " ").concat(className) }, { children: _jsxs("label", __assign({ htmlFor: checkboxId, className: "checkbox-label", onClick: handleLabelClick }, { children: [_jsx("input", { type: "checkbox", id: checkboxId, checked: checked, disabled: disabled, onChange: handleChange, className: "checkbox-input", readOnly: true }), _jsx("div", __assign({ className: "checkbox-button" }, { children: _jsx("div", __assign({ className: "checkbox-touch-target" }, { children: _jsx("div", __assign({ className: "checkbox-box" }, { children: checked && (_jsx(Check, { size: "sm", className: "checkbox-icon" })) })) })) })), leadingContent && (_jsx("span", __assign({ className: "checkbox-leading" }, { children: leadingContent }))), label && (_jsx("span", __assign({ className: "checkbox-text" }, { children: label })))] })) })));
+    useEffect(function () {
+        setIsChecked(checked);
+    }, [checked]);
+    var renderLabel = function () {
+        return (label && (_jsx(Text, __assign({ as: "span", size: "sm", variant: "medium", color: error ? 'state-error' : 'default' }, { children: label }))));
+    };
+    return (_jsx("div", __assign({ className: "checkbox-container ".concat(getStateClasses(), " ").concat(className) }, { children: _jsxs("label", __assign({ htmlFor: checkboxId, className: "checkbox-label", onClick: handleLabelClick }, { children: [_jsx("input", { type: "checkbox", id: checkboxId, checked: isChecked, disabled: disabled, onChange: handleChange, className: "checkbox-input", readOnly: true }), labelPosition === 'leading' && renderLabel(), _jsx("div", __assign({ className: "checkbox-button" }, { children: _jsx("div", __assign({ className: "checkbox-touch-target" }, { children: _jsx("div", __assign({ className: "checkbox-box" }, { children: isChecked && _jsx(Check, { size: "sm", className: "checkbox-icon" }) })) })) })), leadingContent && _jsx("span", __assign({ className: "checkbox-leading" }, { children: leadingContent })), labelPosition === 'trailing' && renderLabel()] })) })));
 };
 export default Checkbox;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconName } from '../../Icon/Icon';
-interface InputProps {
+export interface InputProps {
     variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
     placeholder?: string;
     value?: string;

package/dist/components/molecules/BookingPax/BookingPax.d.ts

@@ -1,4 +1,47 @@
 import React from 'react';
+/**
+ * BookingPax is a component that allows the user to display the booking pax.
+ *
+ * @example
+ * <BookingPax>
+ *  <BookingPax.Accom
+ *    name="Hotel Name"
+ *    type="hotel"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ *  <BookingPax.Excursion
+ *    name="Excursion Name"
+ *    type="sea"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ *  <BookingPax.Transfer
+ *    name="Transfer Name"
+ *    type="transfer"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ * </BookingPax>
+ *
+ * @param props - The props for the BookingPax component.
+ * @returns The BookingPax component.
+ */
 export declare const BookingPax: {
     (props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
     Accom: React.FC<import("./BookingPaxAccom").BookingPaxAccomProps>;

package/dist/components/molecules/BookingPax/BookingPax.js

@@ -13,6 +13,49 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { BookingPaxAccom } from './BookingPaxAccom';
 import { BookingPaxExcursion } from './BookingPaxExcursion';
 import { BookingPaxTransfer } from './BookingPaxTransfer';
+/**
+ * BookingPax is a component that allows the user to display the booking pax.
+ *
+ * @example
+ * <BookingPax>
+ *  <BookingPax.Accom
+ *    name="Hotel Name"
+ *    type="hotel"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ *  <BookingPax.Excursion
+ *    name="Excursion Name"
+ *    type="sea"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ *  <BookingPax.Transfer
+ *    name="Transfer Name"
+ *    type="transfer"
+ *    clientsInfo={clientsInfo}
+ *    paxCount={1}
+ *    selectedClientsInfoIds={selectedClientsInfoIds}
+ *    isSubmitted={false}
+ *    onPaxChange={onPaxChange}
+ *    onRemarkChange={onRemarkChange}
+ *    onError={onError}
+ *  />
+ * </BookingPax>
+ *
+ * @param props - The props for the BookingPax component.
+ * @returns The BookingPax component.
+ */
 export var BookingPax = function (props) {
     return _jsx("div", __assign({ className: "booking-pax space-y-6" }, props));
 };

package/dist/components/molecules/BookingPax/BookingPaxAccom.d.ts

@@ -1,14 +1,48 @@
 import React from 'react';
 import { BookingPaxClientInfo, BookingPaxClientProps } from './BookingPaxClient/BookingPaxClient';
 export interface BookingPaxAccomRoom {
+    /**
+     * The pax count of the room.
+     */
     paxCount: number;
 }
 export interface RoomData {
+    /**
+     * The room of the room data.
+     */
     room: BookingPaxAccomRoom;
+    /**
+     * The room index of the room data.
+     */
     roomIndex: number;
+    /**
+     * The selected count of the room data.
+     */
     selectedCount: number;
+    /**
+     * Whether the pax count is error.
+     */
     isPaxCountError: boolean;
 }
+/**
+ * BookingPaxAccomProps is the props for the BookingPaxAccom component.
+ *
+ * @example
+ * <BookingPaxAccom
+ *  rooms={rooms}
+ *  clientsInfo={clientsInfo}
+ *  hotelName="Hotel Name"
+ *  roomName="Room Name"
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxAccom component.
+ * @returns The BookingPaxAccom component.
+ */
 export interface BookingPaxAccomProps extends Pick<BookingPaxClientProps, 'selectedClientsInfoIds' | 'onPaxChange'> {
     rooms: BookingPaxAccomRoom[];
     clientsInfo: BookingPaxClientInfo[];

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

@@ -2088,3 +2088,13 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
+
+.booking-pax-client {
+  .checkbox-container {
+    label {
+      padding: 0;
+      background-color: transparent;
+    }
+  }
+}

package/dist/components/molecules/BookingPax/BookingPaxClient/BookingPaxClient.d.ts

@@ -1,31 +1,119 @@
 /// <reference types="react" />
-import { CheckboxProps } from '@radix-ui/react-checkbox';
+import { CheckboxProps } from '@/src/components/atoms/Checkbox/Checkbox';
 import './BookingPaxClient.css';
 export interface BookingPaxClientInfo {
+    /**
+     * The first name of the client.
+     */
     firstName: string;
+    /**
+     * The last name of the client.
+     */
     lastName: string;
+    /**
+     * The age of the client.
+     */
     age: number;
+    /**
+     * The client type.
+     */
     clientType: 'Adult' | 'Teen' | 'Child' | 'Infant';
+    /**
+     * The client id.
+     */
     clientId: string;
 }
 export interface BookingPaxClientOptions {
+    /**
+     * The client id.
+     */
     clientId: string;
+    /**
+     * Whether the client is checked.
+     */
     checked: CheckboxProps['checked'];
+    /**
+     * The selected index.
+     */
     selectedIndex: number;
+    /**
+     * The selected pax index.
+     */
     selectedPaxIndex?: number;
+    /**
+     * The pax count.
+     */
     paxCount?: number;
+    /**
+     * The selected clients info ids.
+     */
     selectedClientsInfoIds?: Record<string | number, string[]>;
+    /**
+     * The selected clients.
+     */
     selectedClients?: Record<string | number, BookingPaxClientInfo[]>;
 }
 export interface BookingPaxClientProps {
+    /**
+     * The clients to select from.
+     */
     clients: BookingPaxClientInfo[];
+    /**
+     * The id of the booking pax client.
+     */
     id: string;
+    /**
+     * The selected clients info ids.
+     */
     selectedClientsInfoIds?: Record<string | number, string[]>;
+    /**
+     * The selected index.
+     */
     selectedIndex: number;
+    /**
+     * The selected pax index.
+     */
     selectedPaxIndex?: number;
+    /**
+     * The pax count.
+     */
     paxCount?: number;
+    /**
+     * Whether the form has been submitted.
+     */
     isSubmitted?: boolean;
+    /**
+     * The callback function to call when the pax changes.
+     */
     onPaxChange?: (options: BookingPaxClientOptions) => void;
+    /**
+     * The callback function to call when the error changes.
+     */
     onError?: (hasError: boolean) => void;
 }
+/**
+ * BookingPaxClient is a component that allows the user to select the pax for a booking.
+ *
+ * @example
+ * <BookingPaxClient
+ *  clients={clients}
+ *  id="booking-pax-client"
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  selectedIndex={0}
+ *  paxCount={1}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxClient component.
+ * @param props.clients - The clients to select from.
+ * @param props.id - The id of the booking pax client.
+ * @param props.selectedClientsInfoIds - The selected clients info ids.
+ * @param props.selectedIndex - The selected index.
+ * @param props.paxCount - The pax count.
+ * @param props.isSubmitted - Whether the form has been submitted.
+ * @param props.onPaxChange - The callback function to call when the pax changes.
+ * @returns The BookingPaxClient component.
+ */
 export declare const BookingPaxClient: React.FC<BookingPaxClientProps>;

package/dist/components/molecules/BookingPax/BookingPaxClient/BookingPaxClient.js

@@ -19,12 +19,37 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Checkbox from '@/src/components/atoms/Checkbox/Checkbox';
 import { Text } from '@/src/components/atoms/Typography/Typography';
-import { Checkbox } from '@/src/components/ui/checkbox';
 import useBookingPax from '@/src/hooks/useBookingPax';
 import { cn } from '@/src/lib/utils';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import './BookingPaxClient.css';
+/**
+ * BookingPaxClient is a component that allows the user to select the pax for a booking.
+ *
+ * @example
+ * <BookingPaxClient
+ *  clients={clients}
+ *  id="booking-pax-client"
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  selectedIndex={0}
+ *  paxCount={1}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxClient component.
+ * @param props.clients - The clients to select from.
+ * @param props.id - The id of the booking pax client.
+ * @param props.selectedClientsInfoIds - The selected clients info ids.
+ * @param props.selectedIndex - The selected index.
+ * @param props.paxCount - The pax count.
+ * @param props.isSubmitted - Whether the form has been submitted.
+ * @param props.onPaxChange - The callback function to call when the pax changes.
+ * @returns The BookingPaxClient component.
+ */
 export var BookingPaxClient = function (props) {
     var clients = props.clients, id = props.id, defaultSelectedClientsInfoIds = props.selectedClientsInfoIds, selectedIndex = props.selectedIndex, _a = props.paxCount, paxCount = _a === void 0 ? 0 : _a, isSubmitted = props.isSubmitted, onPaxChange = props.onPaxChange, onError = props.onError;
     var _b = useState({}), selectedClientsInfoIds = _b[0], setSelectedClientsInfoIds = _b[1];
@@ -82,15 +107,13 @@ export var BookingPaxClient = function (props) {
                 }) }, { children: clients.map(function (client) {
                     var isSelected = isSelectedClient(selectedIndex, client.clientId);
                     var showError = hasError && !isSelected && clients.length !== paxCount;
-                    return (_jsx("div", { children: _jsxs("div", __assign({ className: "flex items-center gap-x-2" }, { children: [_jsx(Checkbox, { "data-error": showError, id: "pc-".concat(id, "-").concat(selectedIndex, "-").concat(client.clientId), checked: isSelected || clients.length === paxCount, disabled: clients.length === paxCount, onCheckedChange: function (checked) {
-                                        handlePaxChange({
-                                            clientId: client.clientId,
-                                            checked: checked,
-                                            paxCount: paxCount,
-                                            selectedIndex: selectedIndex,
-                                        });
-                                    } }), _jsx("label", __assign({ htmlFor: "pc-".concat(id, "-").concat(selectedIndex, "-").concat(client.clientId), className: cn('cursor-pointer', {
-                                        'pointer-events-none': clients.length === paxCount,
-                                    }) }, { children: _jsxs(Text, __assign({ size: "sm", leading: "4", as: "span", color: showError ? 'state-error' : undefined }, { children: [client.firstName, " ", client.lastName, " (", client.clientType, client.clientType !== 'Adult' && " - ".concat(client.age, " years old"), ")"] })) }))] })) }, client.clientId));
+                    return (_jsx("div", { children: _jsx("div", __assign({ className: "flex items-center gap-x-2" }, { children: _jsx(Checkbox, { id: "pc-".concat(id, "-").concat(selectedIndex, "-").concat(client.clientId), checked: isSelected || clients.length === paxCount, disabled: clients.length === paxCount, error: showError, label: "".concat(client.firstName, " ").concat(client.lastName, " (").concat(client.clientType).concat(client.clientType !== 'Adult' ? " - ".concat(client.age, " years old") : '', ")"), onChange: function (checked) {
+                                    handlePaxChange({
+                                        clientId: client.clientId,
+                                        checked: checked,
+                                        paxCount: paxCount,
+                                        selectedIndex: selectedIndex,
+                                    });
+                                } }) })) }, client.clientId));
                 }) }))] })));
 };

package/dist/components/molecules/BookingPax/BookingPaxExcursion.d.ts

@@ -2,13 +2,56 @@ import React from 'react';
 import { BookingPaxClientInfo, BookingPaxClientProps } from './BookingPaxClient/BookingPaxClient';
 export type ExcursionType = 'sea' | 'land' | 'catamaran';
 export interface BookingPaxExcursionProps extends Pick<BookingPaxClientProps, 'selectedClientsInfoIds' | 'onPaxChange'> {
+    /**
+     * The clients info of the booking pax excursion.
+     */
     clientsInfo: BookingPaxClientInfo[];
+    /**
+     * The name of the booking pax excursion.
+     */
     name: string;
+    /**
+     * The type of the booking pax excursion.
+     */
     type: ExcursionType;
+    /**
+     * Whether the booking pax excursion is submitted.
+     */
     isSubmitted?: boolean;
+    /**
+     * The pax count of the booking pax excursion.
+     */
     paxCount: number;
+    /**
+     * The max pax count of the booking pax excursion.
+     */
     maxPaxCount?: number;
+    /**
+     * The callback function to call when the remark changes.
+     */
     onRemarkChange?: (value: string) => void;
+    /**
+     * The callback function to call when the error changes.
+     */
     onError?: (hasError: boolean) => void;
 }
+/**
+ * BookingPaxExcursion is a component that allows the user to display the booking pax excursion.
+ *
+ * @example
+ * <BookingPaxExcursion
+ *  name="Excursion Name"
+ *  type="sea"
+ *  clientsInfo={clientsInfo}
+ *  paxCount={1}
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxExcursion component.
+ * @returns The BookingPaxExcursion component.
+ */
 export declare const BookingPaxExcursion: React.FC<BookingPaxExcursionProps>;

package/dist/components/molecules/BookingPax/BookingPaxExcursion.js

@@ -21,6 +21,25 @@ var mapType = {
     land: 'Land excursion',
     catamaran: 'Cruise excursion',
 };
+/**
+ * BookingPaxExcursion is a component that allows the user to display the booking pax excursion.
+ *
+ * @example
+ * <BookingPaxExcursion
+ *  name="Excursion Name"
+ *  type="sea"
+ *  clientsInfo={clientsInfo}
+ *  paxCount={1}
+ *  selectedClientsInfoIds={selectedClientsInfoIds}
+ *  isSubmitted={false}
+ *  onPaxChange={onPaxChange}
+ *  onRemarkChange={onRemarkChange}
+ *  onError={onError}
+ * />
+ *
+ * @param props - The props for the BookingPaxExcursion component.
+ * @returns The BookingPaxExcursion component.
+ */
 export var BookingPaxExcursion = function (props) {
     var name = props.name, type = props.type, clientsInfo = props.clientsInfo, paxCount = props.paxCount, selectedClientsInfoIds = props.selectedClientsInfoIds, isSubmitted = props.isSubmitted, onPaxChange = props.onPaxChange, onRemarkChange = props.onRemarkChange, onError = props.onError;
     var _a = useBookingPax(selectedClientsInfoIds), changeOptions = _a.changeOptions, onPaxOptionsChange = _a.onPaxOptionsChange, onSelectedClients = _a.onSelectedClients;

package/dist/components/molecules/BookingPax/BookingPaxHeader.d.ts

@@ -1,12 +1,27 @@
 import React from 'react';
 import { IconName } from '../../atoms/Icon/Icon';
 export interface BookingPaxWithNameProps {
+    /**
+     * The name of the booking pax with name.
+     */
     name: string;
+    /**
+     * The icon of the booking pax with name.
+     */
     icon: IconName;
+    /**
+     * The location of the booking pax with name.
+     */
     location: string;
 }
 export interface BookingPaxWithLocationProps {
+    /**
+     * The from of the booking pax with location.
+     */
     from: string;
+    /**
+     * The to of the booking pax with location.
+     */
     to: string;
 }
 export declare const BookingPaxHeader: {

package/dist/components/molecules/BookingPax/BookingPaxHeader.js

@@ -13,6 +13,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '../../atoms/Icon/Icon';
 import { Text } from '../../atoms/Typography/Typography';
 import TextWithIcon from '../TextWithIcon/TextWithIcon';
+/**
+ * BookingPaxWithName is a component that allows the user to display the booking pax with name.
+ *
+ * @example
+ * <BookingPaxWithName
+ *  name="Hotel Name"
+ *  icon="hotel"
+ *  location="Hotel Location"
+ * />
+ *
+ * @param props - The props for the BookingPaxWithName component.
+ * @returns The BookingPaxWithName component.
+ */
 var BookingPaxWithName = function (props) {
     var name = props.name, icon = props.icon, location = props.location;
     return (_jsxs("div", __assign({ className: "space-y-1" }, { children: [_jsx(Text, __assign({ variant: "bold", size: "sm", leading: "4" }, { children: name })), _jsx(TextWithIcon, __assign({ icon: icon, textLeading: "4" }, { children: location }))] })));

package/dist/components/molecules/BookingPax/BookingPaxLayout/BookingPaxLayout.d.ts

@@ -2,10 +2,40 @@
 import { IconName } from '@/src/components/atoms/Icon/Icon';
 import './BookingPaxLayout.css';
 export interface BookingPaxLayoutProps {
+    /**
+     * The title of the booking pax layout.
+     */
     title: React.ReactNode;
+    /**
+     * The icon of the booking pax layout.
+     */
     icon: IconName;
+    /**
+     * The header of the booking pax layout.
+     */
     header?: React.ReactNode;
+    /**
+     * The children of the booking pax layout.
+     */
     children?: React.ReactNode;
+    /**
+     * The class name of the booking pax layout.
+     */
     className?: string;
 }
+/**
+ * BookingPaxLayout is a component that allows the user to display the booking pax layout.
+ *
+ * @example
+ * <BookingPaxLayout
+ *  title={title}
+ *  icon={icon}
+ *  header={header}
+ *  children={children}
+ *  className={className}
+ * />
+ *
+ * @param props - The props for the BookingPaxLayout component.
+ * @returns The BookingPaxLayout component.
+ */
 export declare const BookingPaxLayout: React.FC<BookingPaxLayoutProps>;

package/dist/components/molecules/BookingPax/BookingPaxLayout/BookingPaxLayout.js

@@ -13,6 +13,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '@/src/lib/utils';
 import { ServiceTitle } from '../../ServiceTitle/ServiceTitle';
 import './BookingPaxLayout.css';
+/**
+ * BookingPaxLayout is a component that allows the user to display the booking pax layout.
+ *
+ * @example
+ * <BookingPaxLayout
+ *  title={title}
+ *  icon={icon}
+ *  header={header}
+ *  children={children}
+ *  className={className}
+ * />
+ *
+ * @param props - The props for the BookingPaxLayout component.
+ * @returns The BookingPaxLayout component.
+ */
 export var BookingPaxLayout = function (props) {
     var title = props.title, icon = props.icon, header = props.header, children = props.children, className = props.className;
     return (_jsxs("div", __assign({ className: cn('booking-pax-layout', className) }, { children: [_jsxs("div", __assign({ className: "booking-pax-layout__header" }, { children: [_jsx(ServiceTitle, { title: title, icon: icon }), header] })), _jsx("div", __assign({ className: "booking-pax-layout__content" }, { children: children }))] })));

package/dist/components/molecules/BookingPax/BookingPaxRemarks.d.ts

@@ -1,5 +1,19 @@
 import React from 'react';
 export interface BookingPaxRemarksProps {
+    /**
+     * The callback function to call when the remarks changes.
+     */
     onChange?: (value: string) => void;
 }
+/**
+ * BookingPaxRemarks is a component that allows the user to display the booking pax remarks.
+ *
+ * @example
+ * <BookingPaxRemarks
+ *  onChange={onChange}
+ * />
+ *
+ * @param props - The props for the BookingPaxRemarks component.
+ * @returns The BookingPaxRemarks component.
+ */
 export declare const BookingPaxRemarks: React.FC<BookingPaxRemarksProps>;

package/dist/components/molecules/BookingPax/BookingPaxRemarks.js

@@ -13,6 +13,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import Textarea from '../../atoms/Inputs/Textarea/Textarea';
 import { Text } from '../../atoms/Typography/Typography';
+/**
+ * BookingPaxRemarks is a component that allows the user to display the booking pax remarks.
+ *
+ * @example
+ * <BookingPaxRemarks
+ *  onChange={onChange}
+ * />
+ *
+ * @param props - The props for the BookingPaxRemarks component.
+ * @returns The BookingPaxRemarks component.
+ */
 export var BookingPaxRemarks = function (_a) {
     var onChange = _a.onChange;
     var _b = useState(''), remarks = _b[0], setRemarks = _b[1];