mautourco-components 0.2.21 → 0.2.23

package/src/components/organisms/TabCancellationPolicy/CancellationAccom.tsx

@@ -5,14 +5,39 @@ import { Policy } from './PolicyAccom/PolicyAccom';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
 
 export interface CancellationAccomProps extends HeaderAccomProps {
+  /**
+   * The image of the cancellation accommodation.
+   */
   image: string;
+  /**
+   * Whether the cancellation accommodation is on request.
+   */
   isOnRequest?: boolean;
+  /**
+   * The room policies of the cancellation accommodation.
+   */
   roomPolicies: Array<{
     roomName: string;
     policies: Policy[];
   }>;
 }
 
+/**
+ * CancellationAccom is a component that allows the user to display the cancellation accommodation.
+ *
+ * @example
+ * <CancellationAccom
+ *  hotelName="Hotel Name"
+ *  pax="8 pax"
+ *  dates={['2024-01-01', '2024-01-02']}
+ *  image="/images/accom.png"
+ *  roomPolicies={roomPolicies}
+ *  isOnRequest={false}
+ * />
+ *
+ * @param props - The props for the CancellationAccom component.
+ * @returns The CancellationAccom component.
+ */
 export default function CancellationAccom(props: CancellationAccomProps) {
   const { hotelName, pax, dates, image, roomPolicies, isOnRequest } = props;
   return (

package/src/components/organisms/TabCancellationPolicy/CancellationBody.tsx

@@ -3,6 +3,30 @@ import PolicyAccom from './PolicyAccom/PolicyAccom';
 import PolicyExcursion from './PolicyExcursion';
 import PolicyTransfer from './PolicyTransfer';
 
+/**
+ * CancellationBody is a component that allows the user to display the cancellation body.
+ *
+ * @example
+ * <CancellationBody>
+ *  <CancellationBody.Accom
+ *    roomName="Room Name"
+ *    policies={policies}
+ *  />
+ *  <CancellationBody.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *    pickUpPoint="Pick Up Point"
+ *    policies={policies}
+ *  />
+ *  <CancellationBody.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </CancellationBody>
+ *
+ * @param props - The props for the CancellationBody component.
+ * @returns The CancellationBody component.
+ */
 export default function CancellationBody(props: React.PropsWithChildren) {
   return <div className="cancellation-body" {...props} />;
 }

package/src/components/organisms/TabCancellationPolicy/CancellationExcursion.tsx

@@ -3,13 +3,43 @@ import CancellationHeader from './CancellationHeader';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
 
 export interface CancellationExcursionProps {
+  /**
+   * The name of the cancellation excursion.
+   */
   name: string;
+  /**
+   * The date of the cancellation excursion.
+   */
   date: string;
+  /**
+   * The image of the cancellation excursion.
+   */
   image: string;
+  /**
+   * The pick up point of the cancellation excursion.
+   */
   pickUpPoint: string;
+  /**
+   * The policies of the cancellation excursion.
+   */
   policies: string;
 }
 
+/**
+ * CancellationExcursion is a component that allows the user to display the cancellation excursion.
+ *
+ * @example
+ * <CancellationExcursion
+ *  name="Excursion Name"
+ *  date="2024-01-01"
+ *  image="/images/excursion.png"
+ *  pickUpPoint="Pick Up Point"
+ *  policies="Policies"
+ * />
+ *
+ * @param props - The props for the CancellationExcursion component.
+ * @returns The CancellationExcursion component.
+ */
 export default function CancellationExcursion(props: CancellationExcursionProps) {
   const { name, date, image, pickUpPoint, policies } = props;
   return (

package/src/components/organisms/TabCancellationPolicy/CancellationHeader.tsx

@@ -2,6 +2,29 @@ import HeaderAccom from './HeaderAccom';
 import HeaderExcursion from './HeaderExcursion';
 import HeaderTransfer from './HeaderExcursion/HeaderTransfer';
 
+/**
+ * CancellationHeader is a component that allows the user to display the cancellation header.
+ *
+ * @example
+ * <CancellationHeader>
+ *  <CancellationHeader.Accom
+ *    hotelName="Hotel Name"
+ *    pax="8 pax"
+ *    dates={['2024-01-01', '2024-01-02']}
+ *  />
+ *  <CancellationHeader.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *  />
+ *  <CancellationHeader.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </CancellationHeader>
+ *
+ * @param props - The props for the CancellationHeader component.
+ * @returns The CancellationHeader component.
+ */
 export default function CancellationHeader(props: React.PropsWithChildren) {
   return <div className="cancellation-header" {...props} />;
 }

package/src/components/organisms/TabCancellationPolicy/CancellationTransfer.tsx

@@ -4,10 +4,32 @@ import { TransferData } from './HeaderExcursion/HeaderTransfer';
 import DetailsCancellationPolicy from './TabCancellationPolicy';
 
 export interface CancellationTransferProps {
+  /**
+   * The image of the cancellation transfer.
+   */
   image: string;
+  /**
+   * The car name of the cancellation transfer.
+   */
   carName: string;
+  /**
+   * The transfer data of the cancellation transfer.
+   */
   transferData: TransferData[];
 }
+/**
+ * CancellationTransfer is a component that allows the user to display the cancellation transfer.
+ *
+ * @example
+ * <CancellationTransfer
+ *  image="/images/transfer.png"
+ *  carName="Car Name"
+ *  transferData={transferData}
+ * />
+ *
+ * @param props - The props for the CancellationTransfer component.
+ * @returns The CancellationTransfer component.
+ */
 export default function CancellationTransfer(props: CancellationTransferProps) {
   const { image, carName, transferData } = props;
   return (

package/src/components/organisms/TabCancellationPolicy/HeaderAccom.tsx

@@ -4,11 +4,33 @@ import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
 import TextWithIcon from '../../molecules/TextWithIcon/TextWithIcon';
 
 export interface HeaderAccomProps {
+  /**
+   * The hotel name of the header accommodation.
+   */
   hotelName: string;
+  /**
+   * The pax of the header accommodation.
+   */
   pax: number | string;
+  /**
+   * The dates of the header accommodation.
+   */
   dates: string[];
 }
 
+/**
+ * HeaderAccom is a component that allows the user to display the header accommodation.
+ *
+ * @example
+ * <HeaderAccom
+ *  hotelName="Hotel Name"
+ *  pax="8 pax"
+ *  dates={['2024-01-01', '2024-01-02']}
+ * />
+ *
+ * @param props - The props for the HeaderAccom component.
+ * @returns
+ */
 export default function HeaderAccom(props: HeaderAccomProps) {
   const { hotelName, pax, dates } = props;
 

package/src/components/organisms/TabCancellationPolicy/HeaderExcursion.tsx

@@ -2,10 +2,28 @@ import { DateDisplay } from '../../molecules/DateDisplay/DateDisplay';
 import { ServiceTitle } from '../../molecules/ServiceTitle/ServiceTitle';
 
 export interface HeaderExcursionProps {
+  /**
+   * The name of the header excursion.
+   */
   name: string;
+  /**
+   * The date of the header excursion.
+   */
   date: string;
 }
 
+/**
+ * HeaderExcursion is a component that allows the user to display the header excursion.
+ *
+ * @example
+ * <HeaderExcursion
+ *  name="Excursion Name"
+ *  date="2024-01-01"
+ * />
+ *
+ * @param props - The props for the HeaderExcursion component.
+ * @returns The HeaderExcursion component.
+ */
 export default function HeaderExcursion(props: HeaderExcursionProps) {
   const { name, date } = props;
 

package/src/components/organisms/TabCancellationPolicy/PolicyAccom/PolicyAccom.css

@@ -1,5 +1,8 @@
 .policy-accom {
   @apply space-y-6;
+  .chip__label {
+    @apply gap-x-4;
+  }
 }
 
 .policy-accom__period {

package/src/components/organisms/TabCancellationPolicy/PolicyAccom/PolicyAccom.tsx

@@ -1,3 +1,4 @@
+import Chip from '@/src/components/atoms/Chip/Chip';
 import { Fragment } from 'react';
 import { Text } from '../../../atoms/Typography/Typography';
 import { DateDisplay } from '../../../molecules/DateDisplay/DateDisplay';
@@ -28,10 +29,10 @@ export default function PolicyAccom(props: PolicyAccomProps) {
       </div>
       {policies.map((policy, index) => (
         <Fragment key={`policy-${index}`}>
-          <Text size="xs" variant="medium" leading="4" className="policy-accom__period">
+          <Chip type="outline" color="brand" isBlackText>
             Policy period applies{' '}
             <DateDisplay dates={[policy.ValidFrom, policy.ValidTo]} textSize="xs" />
-          </Text>
+          </Chip>
           <div className="space-y-2">
             <Text variant="bold" size="xs" leading="4">
               {policy.Value} % of total price

package/src/components/organisms/TabCancellationPolicy/PolicyExcursion.tsx

@@ -1,10 +1,28 @@
 import { Text } from '../../atoms/Typography/Typography';
 
 export interface PolicyExcursionProps {
+  /**
+   * The pick up point of the policy excursion.
+   */
   pickUpPoint: string;
+  /**
+   * The policies of the policy excursion.
+   */
   policies: string;
 }
 
+/**
+ * PolicyExcursion is a component that allows the user to display the policy excursion.
+ *
+ * @example
+ * <PolicyExcursion
+ *  pickUpPoint="Pick Up Point"
+ *  policies="Policies"
+ * />
+ *
+ * @param props - The props for the PolicyExcursion component.
+ * @returns
+ */
 export default function PolicyExcursion(props: PolicyExcursionProps) {
   const { pickUpPoint, policies } = props;
 

package/src/components/organisms/TabCancellationPolicy/PolicyTransfer.tsx

@@ -33,6 +33,17 @@ const policies = [
   },
 ];
 
+/**
+ * PolicyTransfer is a component that allows the user to display the policy transfer.
+ *
+ * @example
+ * <PolicyTransfer
+ *  carName="Car Name"
+ * />
+ *
+ * @param props - The props for the PolicyTransfer component.
+ * @returns
+ */
 export default function PolicyTransfer(props: PolicyTransferProps) {
   const { carName } = props;
 

package/src/components/organisms/TabCancellationPolicy/TabCancellationPolicy.tsx

@@ -3,6 +3,35 @@ import CancellationExcursion from './CancellationExcursion';
 import CancellationTransfer from './CancellationTransfer';
 import TabCancellationPolicyLayout from './TabCancellationPolicyLayout/TabCancellationPolicyLayout';
 
+/**
+ * TabCancellationPolicy is a component that allows the user to display the tab cancellation policy.
+ *
+ * @example
+ * <TabCancellationPolicy>
+ *  <TabCancellationPolicy.Accom
+ *    hotelName="Hotel Name"
+ *    pax="8 pax"
+ *    dates={['2024-01-01', '2024-01-02']}
+ *    image="/images/accom.png"
+ *    roomPolicies={roomPolicies}
+ *    isOnRequest={false}
+ *  />
+ *  <TabCancellationPolicy.Excursion
+ *    name="Excursion Name"
+ *    date="2024-01-01"
+ *    image="/images/excursion.png"
+ *    pickUpPoint="Pick Up Point"
+ *    policies="Policies"
+ *  />
+ *  <TabCancellationPolicy.Transfer
+ *    carName="Car Name"
+ *    transferData={transferData}
+ *  />
+ * </TabCancellationPolicy>
+ *
+ * @param props - The props for the TabCancellationPolicy component.
+ * @returns The TabCancellationPolicy component.
+ */
 export default function TabCancellationPolicy(props: React.PropsWithChildren) {
   return <div className="tab-cancellation-policy" {...props} />;
 }

package/src/components/ui/popover.tsx

@@ -3,9 +3,7 @@ import * as React from 'react';
 
 import { cn } from '../../lib/utils';
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
@@ -28,7 +26,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden border-[var(--color-elevation-state-hover-subtle)]',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden border-[var(--color-elevation-state-hover-subtle)] z-[99999]',
           className
         )}
         {...props}

package/src/styles/components/checkbox.css

@@ -2,7 +2,8 @@
 .checkbox-container {
   display: inline-flex;
   align-items: center;
-  width: 100%;
+  width: auto;
+  min-height: 33px;
 }
 
 .checkbox-input {
@@ -18,13 +19,17 @@
 .checkbox-label {
   display: flex;
   align-items: center;
-  column-gap: var(--checkbox-spacing-inline-gap, var(--multiselect-spacing-option-icon-gap, 0.625rem));
+  column-gap: var(
+    --checkbox-spacing-inline-gap,
+    var(--multiselect-spacing-option-icon-gap, 0.625rem)
+  );
   cursor: pointer;
   user-select: none;
   width: 100%;
-  padding: var(--checkbox-spacing-label-padding, 0.5rem 0.75rem);
+  /* padding: var(--checkbox-spacing-label-padding, 0.5rem 0.75rem); */
   border-radius: var(--checkbox-border-radius, 0.375rem);
-  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: all var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
 }
 
 .checkbox-box {
@@ -35,12 +40,13 @@
   border-radius: var(--checkbox-size-box-border-radius, 0.125rem);
   background-color: var(--color-white);
   opacity: var(--opacity-opacity-100);
-  top: var(--checkbox-position-top, 0.125rem);
-  left: var(--checkbox-position-left, 0.125rem);
+  /* top: var(--checkbox-position-top, 0.125rem);
+  left: var(--checkbox-position-left, 0.125rem); */
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: all var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
   flex-shrink: 0;
 }
 
@@ -50,7 +56,8 @@
   font-size: var(--checkbox-typography-fontSize, 0.875rem);
   line-height: var(--checkbox-typography-lineHeight, 1.25rem);
   color: var(--color-gray-900);
-  transition: color var(--checkbox-transition-duration, 0.2s) var(--checkbox-transition-timing, ease-in-out);
+  transition: color var(--checkbox-transition-duration, 0.2s)
+    var(--checkbox-transition-timing, ease-in-out);
 }
 
 .checkbox-leading {
@@ -77,7 +84,7 @@
 
 .checkbox--checked .checkbox-box {
   background-color: var(--color-transparent);
-  border-color: var(--checkbox-border-radius, 0.125rem);
+  border-color: var(--color-atoll-green-800);
 }
 
 .checkbox--checked .checkbox-label {

package/src/styles/components/molecule/calendarInput.css

@@ -1,5 +1,5 @@
 .calendar-input {
-  @apply w-full h-11 overflow-hidden p-0 bg-white border border-[var(--color-tuna-500)] flex items-center gap-2 rounded-xl;
+  @apply w-full h-12 overflow-hidden p-0 bg-white border border-[var(--color-tuna-500)] flex items-center gap-2 rounded-xl;
   min-width: 0;
 }
 
@@ -25,7 +25,7 @@
 }
 
 .calendar-input__icon-button.calendar-input__icon-button--left {
- @apply justify-end w-fit pl-4;
+  @apply justify-end w-fit pl-4;
 }
 
 .calendar-input__field {
@@ -62,8 +62,8 @@
 }
 
 /* Ensure label and icon remain visible when wrapper is set to active via data-state */
-.calendar-input-wrapper[data-state="active"] .calendar-input__label,
-.calendar-input-wrapper[data-state="active"] .calendar-input__icon-button {
+.calendar-input-wrapper[data-state='active'] .calendar-input__label,
+.calendar-input-wrapper[data-state='active'] .calendar-input__icon-button {
   @apply visible opacity-100;
 }
 
@@ -80,17 +80,17 @@
 }
 
 .calendar-input--default .calendar-input__icon-button--full-bg {
-  @apply bg-[var(--color-atoll-green-800)]
+  @apply bg-[var(--color-atoll-green-800)];
 }
 
 /* Active state (focused) */
 .calendar-input--active {
-  @apply border-[var(--color-neutral-800)]
+  @apply border-[var(--color-neutral-800)];
 }
 
 /* Typing state */
 .calendar-input--typing {
-  @apply border-[var(--color-neutral-800)]
+  @apply border-[var(--color-neutral-800)];
 }
 
 /* Success state */
@@ -99,7 +99,7 @@
 }
 
 .calendar-input--success .calendar-input__field {
-  @apply text-[var(--color-green-700)]
+  @apply text-[var(--color-green-700)];
 }
 
 .calendar-input--success .calendar-input__icon-button--full-bg {
@@ -129,7 +129,7 @@
 
 /* Disabled state */
 .calendar-input--disabled {
-  @apply border-[var(--color-neutral-400)] bg-[var(--color-surface-50)]
+  @apply border-[var(--color-neutral-400)] bg-[var(--color-surface-50)];
 }
 
 .calendar-input--disabled .calendar-input__field {
@@ -137,11 +137,11 @@
 }
 
 .calendar-input--disabled .calendar-input__icon-button {
-  @apply !bg-none !text-[var(--color-tuna-400)]
+  @apply !bg-none !text-[var(--color-tuna-400)];
 }
 
 .calendar-input--disabled .calendar-input__icon-button--full-bg {
-  @apply !bg-[var(--color-gray-200)] !text-[var(--color-tuna-400)]
+  @apply !bg-[var(--color-gray-200)] !text-[var(--color-tuna-400)];
 }
 
 /* Responsive design */
@@ -153,5 +153,4 @@
   .calendar-input__input-wrapper {
     @apply px-3 py-2;
   }
-
-}
+}