@autobusal/common 0.0.17 → 0.0.19

package/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,105 @@
+import { useState, useRef, ChangeEvent, KeyboardEvent } from 'react';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { TFunction } from 'i18next';
+import { useOutside } from '@autobusal/hooks';
+import { validate } from '@autobusal/utilities';
+import Suggestions from './Suggestions';
+import { Container } from './styles';
+import { AutocompleteData } from './types';
+
+interface Props {
+  name: 'from' | 'to'
+  defaultValue: string
+  data: AutocompleteData[]
+  validation: string
+  t: TFunction<'general'>
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+const Autocomplete = ({ name, defaultValue, data, validation, t, refs, onUpdate }: Props): JSX.Element => {
+  const found = data.filter(item => {
+    return item.value === defaultValue;
+  });
+
+  const [ show, setShow ] = useState<boolean>(false);
+  const [ q, setQ ] = useState<string>(found.length > 0 ? found[0].name : '');
+  const [ selected, setSelected ] = useState<number>(-1);
+  const [ value, setValue ] = useState<string>(defaultValue);
+
+  const ref = useRef(null);
+
+  useOutside(ref, () => setShow(false));
+
+  const options = data.filter(item => {
+    return item.name.toLowerCase().indexOf(q.toLowerCase()) > -1;
+  });
+
+  const onChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    setQ(event.target.value);
+
+    setShow(true);
+    setSelected(-1);
+
+    setValue('');
+    onUpdate(name, '');
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
+    if (event.code === 'Escape') {
+      setShow(false);
+    } else if (event.code === 'ArrowUp') {
+      let value = selected - 1;
+
+      if (value < 0) {
+        value = 0;
+      }
+
+      setSelected(value);
+    } else if (event.code === 'ArrowDown') {
+      let value = selected + 1;
+
+      if (value > options.length - 1) {
+        value = options.length - 1;
+      }
+
+      setSelected(value);
+    } else if (event.code === 'Enter') {
+      event.preventDefault();
+      onSelected(selected);
+    }
+  };
+
+  const onSelected = (index: number): void => {
+    const selected = options[index];
+    
+    if (selected !== undefined) {
+      setShow(false);
+      setSelected(-1);
+      
+      setQ(selected.name);
+
+      setValue(selected.value);
+      onUpdate(name, selected.value);
+    }
+  };
+
+  return (
+    <Container ref={ ref }>
+      <input
+        type="text"
+        name={ `${ name }_slug` }
+        autoComplete="off"
+        value={ q } 
+        onChange={ (event) => onChange(event) }
+        onKeyDown={ (event) => onKeyDown(event) }
+      />
+
+      { (show && q.length > 1 && options.length > 0) && <Suggestions options={ options } selected={ selected } onClick={ onSelected } /> }
+
+      <input type="hidden" defaultValue={ value } { ...refs(name, validate(validation, t)) } />
+    </Container>
+  );
+}
+
+export default Autocomplete;

package/Autocomplete/Suggestions.tsx

@@ -0,0 +1,24 @@
+import { ContainerSuggestions, ButtonSuggestion } from './styles';
+import { AutocompleteData } from './types';
+
+interface Props {
+  options: AutocompleteData[]
+  selected: number
+  onClick: (index: number) => void
+}
+
+const Suggestions = ({ options, selected, onClick }: Props): JSX.Element => {
+  const items = options.map((item, index) => (
+    <ButtonSuggestion key={ index } type="button" $selected={ selected === index } onClick={ () => onClick(index) }>
+      { item.name }
+    </ButtonSuggestion>
+  ));
+
+  return (
+    <ContainerSuggestions>
+      { items }
+    </ContainerSuggestions>
+  );
+};
+
+export default Suggestions;

package/Autocomplete/styles.ts

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+`;
+
+export const ContainerSuggestions = styled.div`
+  position: absolute;
+  top: 44px;
+  left: 0;
+  z-index: 100;
+  width: 250px;
+  max-height: 200px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 6px;
+  background: ${ props => props.theme.foreground.normal };
+  box-shadow: ${ props => props.theme.boxShadow };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const ButtonSuggestion = styled.button<{ $selected: boolean }>`
+  padding: 6px 12px;
+  border-radius: ${ props => props.theme.borderRadius };
+  transition: all 0.3s ease;
+
+  &:hover, &.picked {
+    color: ${ props => props.theme.primary.contrast };
+    background-color: ${ props => props.theme.primary.normal };
+  }
+
+  ${ props => props.$selected && css`
+    color: ${ props => props.theme.primary.contrast };
+    background-color: ${ props => props.theme.primary.normal };
+  ` }
+`;

package/Autocomplete/types.ts

@@ -0,0 +1,4 @@
+export interface AutocompleteData {
+  name: string
+  value: string
+}

package/Button/styles.ts

@@ -22,6 +22,7 @@ export const ButtonStyled = styled.button<ButtonType>`
   justify-content: center;
   padding: 0 20px;
   font-weight: 700;
+  color: ${ props => props.theme.primary.contrast };
   background: ${ props => props.theme.primary.normal };
   border: 1px solid ${ props => props.theme.primary.normal };
   border-radius: 100px;

package/Calendar/Browse/Browse.tsx

@@ -0,0 +1,65 @@
+import { ChangeEvent } from 'react';
+import { TFunction } from 'i18next';
+import { AiOutlineArrowLeft, AiOutlineArrowRight } from 'react-icons/ai';
+import { createDate } from '@autobusal/utilities';
+import { getMonths, getYears } from '../utilities/browse';
+import { Container, ButtonBrowse, Choose, Select } from './styles';
+
+interface Props {
+  type: 'picker' | 'dob' | 'date'
+  value: string
+  t: TFunction<'general'>
+  onChange: (date: Date) => void
+}
+
+const Browse = ({ type, value, t, onChange }: Props): JSX.Element => {
+  const date = createDate(value);
+
+  const onPrevious = (): void => {
+    date.setMonth(date.getMonth() - 1);
+
+    onChange(date);
+  }
+    
+  const onNext = (): void => {
+    date.setMonth(date.getMonth() + 1);
+
+    onChange(date);
+  }
+
+  const onMonth = (event: ChangeEvent<HTMLSelectElement>): void => {
+    date.setMonth(Number(event.target.value));
+
+    onChange(date);
+  };
+
+  const onYear = (event: ChangeEvent<HTMLSelectElement>): void => {
+    date.setFullYear(Number(event.target.value));
+
+    onChange(date);
+  };
+
+  return (
+    <Container>
+      <ButtonBrowse type="button" onClick={onPrevious}>
+        <AiOutlineArrowLeft />
+      </ButtonBrowse>
+
+      <Choose>
+        <Select value={ date.getMonth() } onChange={ onMonth }>
+          { getMonths(t) }
+        </Select>
+
+        <Select $type="year" value={ date.getFullYear() } onChange={ onYear }>
+          { getYears(type, date.getFullYear()) }
+        </Select>
+      </Choose>
+
+      <ButtonBrowse type="button" onClick={onNext}>
+        <AiOutlineArrowRight />
+      </ButtonBrowse>
+    </Container>
+  );
+};
+
+export default Browse;

package/Calendar/Browse/styles.ts

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  gap: 5px;
+  padding-bottom: 5px;
+`;
+
+export const ButtonBrowse = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 26px;
+  height: 26px;
+  font-size: ${ props => props.theme.size.s };
+  background-color: ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+`;
+
+export const Choose = styled.div`
+  flex: 1;
+  display: flex;
+  gap: 5px;
+`;
+
+export const Select = styled.select<{$type?: 'year'}>`
+  height: 26px;
+  ${props => props.$type === 'year' && css`
+    flex-basis: 90px;
+  `}
+  text-align: center;
+  background-color: ${ props => props.theme.background.neutral };
+  border: none;
+`;

package/Calendar/Calendar.tsx

@@ -0,0 +1,56 @@
+import { useState, useRef } from 'react';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { TFunction } from 'i18next';
+import { useOutside } from '@autobusal/hooks';
+import { validate, prepareDate } from '@autobusal/utilities';
+import Picker from './Picker';
+import { Container } from './styles';
+
+interface Props {
+  type: 'picker' | 'dob' | 'date'
+  name: string
+  defaultValue?: string
+  t: TFunction<'general'>
+  validation?: string
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+const Calendar = ({ type, name, defaultValue, t, validation, refs, onUpdate }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+  const [ prepared, setPrepared ] = useState<string>(defaultValue ?? prepareDate(new Date()));
+  const [ selected, setSelected ] = useState<string>(prepared);
+
+  const ref = useRef(null);
+
+  useOutside(ref, () => setShow(false));
+
+  const onClick = (prepared: string): void => {
+    setShow(false);
+
+    setSelected(prepared);
+    setPrepared(prepared);
+
+    onUpdate(name, prepared);
+  };
+
+  return (
+    <Container ref={ ref }>
+      <input type="text" autoComplete="off" readOnly={ true } value={ prepared } onClick={ () => setShow(true) } />
+
+      { show && (
+        <Picker
+          type={ type }
+          value={ prepared }
+          selected={ selected }
+          t={ t }
+          onClick={ onClick }
+        />
+      ) }
+
+      <input type="hidden" defaultValue={ prepared } { ...refs(name, validate(validation ?? '', t)) } />
+    </Container>
+  );
+}
+
+export default Calendar;

package/Calendar/Days.tsx

@@ -0,0 +1,101 @@
+import { useState, useEffect } from 'react';
+import { createDate, prepareDate } from '@autobusal/utilities';
+import { getCalendar, getLimits, compareDates } from './utilities/settings';
+import { ContainerDays, Day } from './styles';
+import { CalendarData } from './types';
+
+interface Props {
+  type: 'picker' | 'dob' | 'date'
+  value: string
+  selected: string
+  onSelected: (prepared: string, disabled: boolean) => void
+}
+
+const Days = ({ type, value, selected, onSelected }: Props): JSX.Element => {
+  const [ calendar, setCalendar ] = useState<CalendarData>(getCalendar(value));
+
+  useEffect(() => {
+    setCalendar(getCalendar(value));
+  }, [value]);
+
+  const today = prepareDate(new Date());
+
+  const limits = getLimits(type);
+
+  const rows: JSX.Element[] = [];
+
+  let currentDay: number = 1;
+
+  // prepare the previous date
+  const previousDate: Date = createDate(value);
+  previousDate.setMonth(previousDate.getMonth() - 1);
+
+  // setup the current date
+  const currentDate: Date = createDate(value);
+
+  // prepare the next date
+  const nextDate: Date = createDate(value);
+  nextDate.setMonth(nextDate.getMonth() + 1);
+
+  for (let i = 1; i <= calendar.weeks; i++) {
+    for (let j = 1; j <= 7; j++) {
+      const key = i * 10 + j;
+
+      if (i == 1 && j < calendar.begins) {
+        previousDate.setDate(calendar.previous);
+
+        const disabled = compareDates(previousDate, limits);
+
+        rows.push(
+          <Day key={ key } $type="other" $disabled={ disabled }>
+            <span>{ calendar.previous }</span>
+          </Day>
+        );
+
+        calendar.previous++;
+      } else if (currentDay > calendar.month) {
+        nextDate.setDate(calendar.next);
+
+        const disabled = compareDates(nextDate, limits);
+
+        rows.push(
+          <Day key={ key } $type="other" $disabled={ disabled }>
+            <span>{ calendar.next }</span>
+          </Day>
+        );
+
+        calendar.next++;
+      } else {
+        currentDate.setDate(currentDay);
+
+        // we create a new date to use for the compare check
+        const ourDate = new Date(currentDate);
+
+        const disabled = compareDates(ourDate, limits);
+
+        const currentValue = prepareDate(ourDate);
+
+        rows.push(
+          <Day key={ key } 
+            $type={ today === currentValue ? 'today' : undefined } 
+            $disabled={ disabled } 
+            $selected={ selected === currentValue } 
+            onClick={ () => onSelected(currentValue, disabled) }
+          >
+            <span>{ currentDay }</span>
+          </Day>
+        );
+
+        currentDay++;
+      }
+    }
+  }
+
+  return (
+    <ContainerDays>
+      { rows }
+    </ContainerDays>
+  );
+};
+
+export default Days;

package/Calendar/Header/Header.tsx

@@ -0,0 +1,30 @@
+import { TFunction } from 'i18next';
+import { Container, HeaderDay } from './styles';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+const Header = ({ t }: Props): JSX.Element => {
+  const days = [
+    t('data.days.mon', { ns: 'common' }),
+    t('data.days.tue', { ns: 'common' }),
+    t('data.days.wed', { ns: 'common' }),
+    t('data.days.thu', { ns: 'common' }),
+    t('data.days.fri', { ns: 'common' }),
+    t('data.days.sat', { ns: 'common' }),
+    t('data.days.sun', { ns: 'common' })
+  ];
+
+  const items = days.map((item, index) => (
+    <HeaderDay key={ index }>{ item }</HeaderDay>
+  ));
+
+  return (
+    <Container>
+      { items }
+    </Container>
+  );
+};
+
+export default Header;

package/Calendar/Header/styles.ts

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Day } from '../styles';
+
+export const Container = styled.div`
+  display: flex;
+`;
+
+export const HeaderDay = styled(Day)`
+  justify-content: center;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.faded };
+  font-weight: 700;
+  text-transform: uppercase;
+  cursor: default;
+`;

package/Calendar/Picker.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { prepareDate } from '@autobusal/utilities';
+import Browse from './Browse/Browse';
+import Header from './Header/Header';
+import Days from './Days';
+import { ContainerPicker } from './styles';
+
+interface Props {
+  type: 'picker' | 'dob' | 'date'
+  value: string
+  selected: string
+  t: TFunction<'general'>
+  onClick: (prepared: string) => void
+}
+
+const Picker = ({ type, value, selected, t, onClick }: Props): (JSX.Element | null) => {
+  const [ prepared, setPrepared ] = useState<string>(value);
+
+  const onSelected = (prepared: string, disabled: boolean): void => {
+    if (disabled) {
+      return alert(t('general:errors.invalid.date'));
+    }
+
+    onClick(prepared);
+  };
+
+  const onChange = (newDate: Date): void => {
+    setPrepared(
+      prepareDate(newDate)
+    );
+  };
+
+  return (
+    <ContainerPicker>
+      <Browse type={ type } value={ prepared } t={ t } onChange={ onChange } />
+
+      <Header t={ t } />
+
+      <Days type={ type } value={ prepared } selected={ selected } onSelected={ onSelected } />
+    </ContainerPicker>
+  );
+};
+
+export default Picker;

package/Calendar/styles.ts

@@ -0,0 +1,69 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+`;
+
+export const ContainerPicker = styled.div`
+  position: absolute;
+  top: 44px;
+  left: 0;
+  z-index: 100;
+  width: 276px;
+  padding: 5px;
+  background-color: ${ props => props.theme.foreground.normal };
+  box-shadow: ${ props => props.theme.boxShadow };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const ContainerDays = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+export const Day = styled.div<{
+  $type?: ('today' | 'other')
+  $disabled?: boolean
+  $selected?: boolean
+}>`
+  display: flex;
+  width: calc(100% / 7);
+  padding: 2px;
+  cursor: pointer;
+
+  & > span {
+    width: 26px;
+    height: 26px;
+    margin: 0 auto;
+    font-size: ${ props => props.theme.size.xs };
+    line-height: 26px;
+    text-align: center;
+    border-radius: 100px;
+    transition: all 0.3s ease;
+  }
+
+  ${ props => props.$type === 'other' && css`
+    color: ${ props => props.theme.font.faded };
+  ` }
+
+  ${ props => props.$type === 'today' && css`
+    font-weight: 700;
+    color: ${ props => props.theme.primary.normal };
+  ` }
+
+  ${ props => props.$disabled === true && css`
+    opacity: .3;
+  ` }
+
+  ${ props => props.$selected && css`
+    & > span {
+      font-weight: 700;
+      color: ${ props => props.theme.primary.contrast };
+      background-color: ${ props => props.theme.primary.normal };
+    }
+  ` }
+
+  &:hover > span {
+    background-color: ${ props => props.theme.background.neutral };
+  }
+`;

package/Calendar/types.ts

@@ -0,0 +1,28 @@
+export interface CalendarData {
+  begins: number
+  month: number
+  previous: number
+  next: number
+  weeks: number
+}
+
+export interface DateLimit {
+  year: number
+  month: number
+  day: number
+}
+
+export interface DatesLimit {
+  min: DateLimit
+  max: DateLimit
+}
+
+export interface ReturnLimit {
+  min: number
+  max: number
+}
+
+export interface CalendarLimit {
+  year: ReturnLimit
+  time: ReturnLimit
+}

package/Calendar/utilities/browse.tsx

@@ -0,0 +1,53 @@
+import { TFunction } from 'i18next';
+import { getLimits } from './settings';
+
+export const getMonths = (t: TFunction<'general'>): JSX.Element[] => {
+  const months = [
+    t('data.months.january', { ns: 'common' }),
+    t('data.months.february', { ns: 'common' }),
+    t('data.months.march', { ns: 'common' }),
+    t('data.months.april', { ns: 'common' }),
+    t('data.months.may', { ns: 'common' }),
+    t('data.months.june', { ns: 'common' }),
+    t('data.months.july', { ns: 'common' }),
+    t('data.months.august', { ns: 'common' }),
+    t('data.months.september', { ns: 'common' }),
+    t('data.months.october', { ns: 'common' }),
+    t('data.months.november', { ns: 'common' }),
+    t('data.months.december', { ns: 'common' })
+  ];
+
+  const options: JSX.Element[] = [];
+
+  months.forEach((month, index) => (
+    options.push(<option key={ index } value={ index }>{ month }</option>)
+  ));
+
+  return options;
+};
+
+export const getYears = (type: ('picker' | 'dob' | 'date'), currentYear: number): JSX.Element[] => {
+  const limits = getLimits(type);
+
+  const current = new Date().getFullYear();
+  const start = current - limits.year.min;
+  const end = current + limits.year.max;
+
+  const options: JSX.Element[] = [];
+
+  // add dummy year if browsing
+  if (currentYear < start) {
+    options.push(<option key={ currentYear } value={ currentYear }>{ currentYear }</option>);
+  }
+
+  for (let i = start; i <= end; i++) {
+    options.push(<option key={ i } value={ i }>{ i }</option>);
+  }
+
+  // add dummy year if browsing
+  if (currentYear > end) {
+    options.push(<option key={ currentYear } value={ currentYear }>{ currentYear }</option>);
+  }
+
+  return options;
+};

package/Calendar/utilities/settings.ts

@@ -0,0 +1,86 @@
+import { createDate } from '@autobusal/utilities';
+import { CalendarLimit, DatesLimit, CalendarData } from '../types';
+
+export const getLimits = (type: ('picker' | 'dob' | 'date')): CalendarLimit => {
+  const today = new Date();
+
+  today.setHours(0, 0, 0, 0);
+
+  const limits: DatesLimit = {
+    min: {
+      year: 0,
+      month: 0,
+      day: 1
+    },
+    max: {
+      year: 0,
+      month: 11,
+      day: 31
+    }, 
+  };
+
+  if (type === 'dob') {
+    limits.min.year = 100;
+
+    limits.max.month = today.getMonth();
+    limits.max.day = today.getDate();
+  }
+
+  if (type === 'picker') {
+    limits.min.month = today.getMonth();
+    limits.min.day = today.getDate();
+
+    limits.max.year = 1;
+  }
+
+  if (type == 'date') {
+    limits.min.year = 5;
+    limits.max.year = 0;
+  }
+
+  return {
+    year: {
+      min: limits.min.year,
+      max: limits.max.year
+    },
+
+    time: {
+      min: new Date(today.getFullYear() - limits.min.year, limits.min.month, limits.min.day, 0, 0, 0, 0).getTime(),
+      max: new Date(today.getFullYear() + limits.max.year, limits.max.month, limits.max.day, 0, 0, 0, 0).getTime()
+    }
+  };
+};
+
+export const getCalendar = (value: string): CalendarData => {
+  const prepared = createDate(value);
+
+  // when the month begins (when in the week)
+  let begins = new Date(prepared.getFullYear(), prepared.getMonth(), 1).getDay();
+  begins = begins === 0 ? 7 : begins; // move Sunday to be the 7th day
+
+  // get the previous month
+  const previous = new Date(prepared.getFullYear(), (prepared.getMonth() - 1), 0).getDate(); // the amount of days in the previous month
+
+  const calendar: CalendarData = {
+    begins: begins,
+    month: new Date(prepared.getFullYear(), (prepared.getMonth() + 1), 0).getDate(), // the amount of days in a month
+    previous: previous - begins + 2,
+    next: 1,
+    weeks: 5
+  };
+
+  // const total = calendar.first_day + calendar.month_days - 1;
+  const total = calendar.begins + calendar.month - 1;
+
+  if (total > 35) {
+    calendar.weeks = 6;
+  } else if (total <= 28) {
+    calendar.weeks = 4;
+  }
+
+  return calendar;
+};
+
+export const compareDates = (date: Date, limits: CalendarLimit): boolean => (
+  date.getTime() < limits.time.min || date.getTime() > limits.time.max
+);

package/Pagination/styles.ts

@@ -48,6 +48,7 @@ const PageCss = css<LinkType>`
 
   ${ props => props.$active && css`
     font-weight: 700;
+    color: ${ props => props.theme.primary.contrast } !important;
     background: ${ props => props.theme.primary.normal } !important;
   ` }
 `;

package/Passengers/Passengers.tsx

@@ -0,0 +1,74 @@
+import { useState, useEffect, useRef } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { useOutside } from '@autobusal/hooks';
+import getText from './utilities/getText';
+import Persons from './Persons';
+import { Container } from './styles';
+
+interface Props {
+  defaultAdults: number
+  defaultChildren: number
+  defaultBabies: number
+  t: TFunction<'common'>
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+const Passengers = ({ defaultAdults, defaultChildren, defaultBabies, t, refs, onUpdate }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+  const [ adults, setAdults ] = useState<number>(defaultAdults);
+  const [ children, setChildren ] = useState<number>(defaultChildren);
+  const [ babies, setBabies ] = useState<number>(defaultBabies);
+  const [ display, setDisplay ] = useState(
+    getText(adults, children, babies, t)
+  );
+
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const text = getText(adults, children, babies, t);
+    setDisplay(text);
+  }, [adults, children, babies]);
+
+  useOutside(ref, () => setShow(false));
+
+  const onChange = (name: ('adults' | 'children' | 'babies'), amount: number): void => {
+    switch (name) {
+      case 'adults':
+        setAdults(amount);
+        break;
+
+      case 'children':
+        setChildren(amount);
+      break;
+
+      case 'babies':
+        setBabies(amount);
+      break;
+    }
+
+    onUpdate(name, amount);
+  };
+
+  return (
+    <Container ref={ ref }>
+      <input type="text" value={ display } readOnly={ true } onClick={ () => setShow(!show) } />
+
+      { show &&
+        <Persons
+          adults={ adults }
+          children={ children }
+          babies={ babies }
+          t={ t }
+          onChange={ onChange }
+        /> }
+
+      <input type="hidden" defaultValue={ adults } { ...refs('adults') } />
+      <input type="hidden" defaultValue={ children } { ...refs('children') } />
+      <input type="hidden" defaultValue={ babies } { ...refs('babies') } />
+    </Container>
+  );
+};
+
+export default Passengers;

package/Passengers/Person.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { FaMinus, FaPlus } from 'react-icons/fa';
+import { Choose, About, Options, Title, Description, Number, ButtonAmount } from './styles';
+
+interface Props {
+  name: 'adults' | 'children' | 'babies'
+  title: string
+  description: string
+  amount: number
+  onChange: (name: ('adults' | 'babies' | 'children'), amount: number) => void
+}
+
+const Person = ({ name, title, description, amount, onChange }: Props): JSX.Element => {
+  const [ number, setNumber ] = useState<number>(amount);
+
+  const onClick = (type: ('minus' | 'plus')): void => {
+    let value = type === 'minus' ? (number - 1) : (number + 1);
+
+    if (value < 0) {
+      value = 0;
+    } else if (value > 6) {
+      value = 6;
+    }
+
+    setNumber(value);
+
+    onChange(name, value);
+  };
+
+  return (
+    <Choose>
+      <About>
+        <Title>{ title }</Title>
+        <Description>{ description }</Description>
+      </About>
+
+      <Options>
+        <ButtonAmount type="button" onClick={ () => onClick('minus') }><FaMinus /></ButtonAmount>
+
+        <Number>{ number }</Number>
+
+        <ButtonAmount type="button" onClick={ () => onClick('plus') }><FaPlus /></ButtonAmount>
+      </Options>
+    </Choose>
+  );
+}
+
+export default Person;

package/Passengers/Persons.tsx

@@ -0,0 +1,41 @@
+import { TFunction } from 'i18next';
+import Person from './Person';
+import { Passengers } from './styles';
+
+interface Props {
+  adults: number
+  children: number
+  babies: number
+  t: TFunction<'common'>
+  onChange: (name: ('adults' | 'children' | 'babies'), amount: number) => void
+}
+
+const Persons = ({ adults, children, babies, t, onChange }: Props): JSX.Element => (
+  <Passengers>
+    <Person
+      name="adults"
+      title={ t('data.persons.adult.plural', { ns: 'common' }) }
+      description={ t('data.persons.adult.description', { ns: 'common' }) }
+      amount={ adults }
+      onChange={ onChange }
+    />
+
+    <Person
+      name="children"
+      title={ t('data.persons.child.plural', { ns: 'common' }) }
+      description={ t('data.persons.child.description', { ns: 'common' }) }
+      amount={ children }
+      onChange={ onChange }
+    />
+
+    <Person
+      name="babies"
+      title={ t('data.persons.baby.plural', { ns: 'common' }) }
+      description={ t('data.persons.baby.description', { ns: 'common' }) }
+      amount={ babies }
+      onChange={ onChange }
+    />
+  </Passengers>
+);
+
+export default Persons;

package/Passengers/styles.ts

@@ -0,0 +1,70 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+`;
+
+export const Passengers = styled.div`
+  position: absolute;
+  top: 44px;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  width: 275px;
+  padding: 15px;
+  background-color: ${ props => props.theme.foreground.normal };
+  box-shadow: ${ props => props.theme.boxShadow };
+  border-radius: ${ props => props.theme.borderRadius };
+
+  @media (min-width: 640px) {
+    width: 300px;
+  }
+`;
+
+export const Choose = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const About = styled.div`
+  line-height: 1.2;
+`;
+
+export const Title = styled.strong`
+  display: block;
+`;
+
+export const Description = styled.span`
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Options = styled.div`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const NumberAndButtons = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Number = styled.span`
+  ${ NumberAndButtons }
+  width: 50px;
+  font-weight: 700;
+  font-size: ${ props => props.theme.size.l };
+`;
+
+export const ButtonAmount = styled.button`
+  ${ NumberAndButtons }
+`;

package/Passengers/utilities/getText.ts

@@ -0,0 +1,21 @@
+import { TFunction } from 'i18next';
+
+const getText = (adults: number, children: number, babies: number, t: TFunction<'common'>): string => {
+  let final = [];
+
+  if (adults > 0) {
+    final.push(`${ t('data.persons.adult.plural', { ns: 'common' }) }: ${ adults }`);
+  }
+
+  if (children > 0) {
+    final.push(`${ t('data.persons.child.plural', { ns: 'common' }) }: ${ children }`);
+  }
+
+  if (babies > 0) {
+    final.push(`${ t('data.persons.baby.plural', { ns: 'common' }) }: ${ babies }`);
+  }
+
+  return final.join(', ');
+};
+
+export default getText;

package/RouteItem/styles.ts

@@ -162,6 +162,7 @@ export const LinkOrder = styled(Link)<{ $type: 'normal' | 'small' }>`
   transition: all 0.3s ease;
 
   ${ props => props.$type === 'normal' && css`
+    color: ${ props => props.theme.primary.contrast };
     background-color: ${ props => props.theme.primary.normal };
   ` }
 

package/index.ts

@@ -1,20 +1,28 @@
+import Autocomplete from './Autocomplete/Autocomplete';
 import BackTo from './BackTo';
+import Calendar from './Calendar/Calendar';
 import CookieNotification from './CookieNotification/CookieNotification';
 import ChangeLanguage from './ChangeLanguage/ChangeLanguage';
 import { Button } from './Button/Button';
 import { General, Paragraph } from './Loading/Loading';
 import Modal from './Modal/Modal';
 import Meta from './Meta';
+import Pagination from './Pagination/Pagination';
+import Passengers from './Passengers/Passengers';
 import RouteItem from './RouteItem/RouteItem';
 
 export {
+  Autocomplete,
   BackTo,
   Button,
+  Calendar,
   CookieNotification,
   ChangeLanguage,
   General,
   Meta,
   Modal,
+  Pagination,
   Paragraph,
+  Passengers,
   RouteItem
 };

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@autobusal/common",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "type": "module",
   "main": "index.ts",
   "dependencies": {
     "@autobusal/hooks": "^0.0.3",
     "@autobusal/providers": "^1.0.16",
+    "@autobusal/utilities": "^0.0.3",
     "i18next": "^23.7.18",
     "react": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.49.3",
     "react-icons": "^5.0.1",
     "react-loading-skeleton": "^3.3.1",
     "react-router-dom": "^6.21.3",