@ourtrip/ui 1.0.0

package/dist/utils/validation.js

@@ -0,0 +1,128 @@
+import { isBefore, isValid, parse, subYears } from 'date-fns';
+export var isValidCpf = function (formatedCpf) {
+    var cpf = formatedCpf.replace(/\D/g, '');
+    if (cpf.length !== 11 || /^(\d)\1+$/.test(cpf)) {
+        return false;
+    }
+    // Calcular el primer dígito verificador
+    var soma = 0;
+    for (var i = 0; i < 9; i++) {
+        soma += parseInt(cpf.charAt(i), 10) * (10 - i);
+    }
+    var digito1 = 11 - (soma % 11);
+    if (digito1 > 9) {
+        digito1 = 0;
+    }
+    // Calcular el segundo dígito verificador
+    soma = 0;
+    for (var i = 0; i < 10; i++) {
+        soma += parseInt(cpf.charAt(i), 10) * (11 - i);
+    }
+    var digito2 = 11 - (soma % 11);
+    if (digito2 > 9) {
+        digito2 = 0;
+    }
+    // Verificar si los dígitos verificadores son iguales a los últimos dos dígitos del CPF
+    if (parseInt(cpf.charAt(9), 10) === digito1 &&
+        parseInt(cpf.charAt(10), 10) === digito2) {
+        return true;
+    }
+    return false;
+};
+export var isValidCNPJ = function (formatedCnpj) {
+    var cnpj = formatedCnpj.replace(/[^\d]+/g, '');
+    if (cnpj.length !== 14) {
+        return false;
+    }
+    if (/^(\d)\1+$/.test(cnpj)) {
+        return false;
+    }
+    var length = cnpj.length - 2;
+    var numbers = cnpj.substring(0, length);
+    var digitosVerificadores = cnpj.substring(length);
+    var soma = 0;
+    var pos = length - 7;
+    for (var i = length; i >= 1; i--) {
+        soma += parseInt(numbers.charAt(length - i), 10) * pos--;
+        if (pos < 2) {
+            pos = 9;
+        }
+    }
+    var resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11);
+    if (resultado !== parseInt(digitosVerificadores.charAt(0), 10)) {
+        return false;
+    }
+    length += 1;
+    numbers = cnpj.substring(0, length);
+    soma = 0;
+    pos = length - 7;
+    for (var i = length; i >= 1; i--) {
+        soma += parseInt(numbers.charAt(length - i), 10) * pos--;
+        if (pos < 2) {
+            pos = 9;
+        }
+    }
+    var segundoDigito = soma % 11 < 2 ? 0 : 11 - (soma % 11);
+    return segundoDigito === parseInt(digitosVerificadores.charAt(1), 10);
+};
+export var isCPF = function (document) {
+    var onlyNumbers = document === null || document === void 0 ? void 0 : document.replace(/\D/g, '');
+    if ((onlyNumbers === null || onlyNumbers === void 0 ? void 0 : onlyNumbers.length) === 11 && isValidCpf(onlyNumbers))
+        return true;
+    return false;
+};
+export var isCNPJ = function (document) {
+    var onlyNumbers = document === null || document === void 0 ? void 0 : document.replace(/\D/g, '');
+    if ((onlyNumbers === null || onlyNumbers === void 0 ? void 0 : onlyNumbers.length) === 14 && isValidCNPJ(onlyNumbers))
+        return true;
+    return false;
+};
+export var isFullName = function (name) {
+    return /^(?:[A-Za-zÀ-ÿ]{2,}(?: [A-Za-zÀ-ÿ]{2,})+)$/.test(name.trim());
+};
+export var isValidName = function (name) {
+    return /^[A-Za-zÀ-ÿ\s.'-]+(?: [A-Za-zÀ-ÿ\s.'-]+)*$/.test(name.trim());
+};
+export var isValidEmail = function (email) {
+    return /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(email.trim());
+};
+export var isValidPhoneNumber = function (number) {
+    var phoneNumber = number.replace('-', '');
+    return /^\d{8}$/.test(phoneNumber) || /^\d{9}$/.test(phoneNumber);
+};
+export var isValidNumberCode = function (numberCode) {
+    return /^\d{2}$/.test(numberCode.replace(/[()]/g, ''));
+};
+export var isValidDDD = function (areaCode) {
+    var dddList = [
+        11, 12, 13, 14, 15, 16, 17, 18, 19, 21, 22, 24, 27, 28, 31, 32, 33, 34, 35,
+        37, 38, 41, 42, 43, 44, 45, 46, 47, 48, 49, 51, 53, 54, 55, 61, 62, 64, 63,
+        65, 66, 67, 68, 69, 71, 73, 74, 75, 77, 79, 81, 82, 83, 84, 85, 86, 87, 88,
+        89, 91, 92, 93, 94, 95, 96, 97, 98, 99
+    ];
+    return dddList.includes(parseFloat(areaCode === null || areaCode === void 0 ? void 0 : areaCode.replace(/\D/g, '')));
+};
+export var isValidChildDate = function (date) {
+    if (!date)
+        return 'Data inválida';
+    var birthDate = parse(date, 'yyyy-MM-dd', new Date());
+    if (!isValid(birthDate)) {
+        return 'Data inválida';
+    }
+    var currentDate = new Date();
+    var adultAge = subYears(currentDate, 18);
+    if (isBefore(adultAge, birthDate) && isBefore(birthDate, currentDate)) {
+        return true;
+    }
+    return 'Idade deve ser entre 1 a 17 anos';
+};
+export var isValidAdult = function (date) {
+    if (!date)
+        return 'Data inválida';
+    var birthDate = parse(date, 'yyyy-MM-dd', new Date());
+    if (!isValid(birthDate)) {
+        return 'Data inválida';
+    }
+    var adultAge = subYears(new Date(), 18);
+    return isBefore(birthDate, adultAge) || 'Adulto deve ter mais de 18 anos';
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@ourtrip/ui",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-select": "^2.1.6",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-slider": "^1.3.6",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.5.0",
+    "microbundle": "^0.15.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-slider": "^2.0.6",
+    "typescript": "^5.8.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.7",
+    "@tailwindcss/cli": "^4.0.13",
+    "@tailwindcss/postcss": "^4.0.13",
+    "class-variance-authority": "^0.7.1",
+    "classnames": "^2.5.1",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.13"
+  }
+}

package/src/components/accordion.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React, { useState } from 'react';
+
+interface IAccordionProps {
+  title: string;
+  text: string;
+}
+
+const Accordion = ({ title, text }: IAccordionProps) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <div
+      className='w-full flex flex-col p-6 border border-gray-200 rounded-default cursor-pointer'
+      onClick={() => setOpen(prev => !prev)}
+    >
+      <div className='flex items-center gap-6'>
+        <div
+          className={`relative w-10 h-10 rounded-full flex justify-center items-center transition-colors duration-300 ${
+            open ? 'bg-primary-900' : 'bg-gray-100'
+          }`}
+        >
+          <div
+            className={`absolute w-4 h-0.5 rounded transition-transform duration-300 ${
+              open
+                ? 'bg-primary-900 transform rotate-[-90deg]'
+                : 'bg-primary-900 transform rotate-[-180deg]'
+            }`}
+          />
+          <div
+            className={`absolute w-4 h-0.5 rounded transition-transform duration-300 ${
+              open
+                ? 'bg-white transform rotate-0'
+                : 'bg-primary-900 transform rotate-[-90deg]'
+            }`}
+          />
+        </div>
+        <h2 className='font-medium text-lg text-primary-900'>{title}</h2>
+      </div>
+      <div
+        className={`pl-16 overflow-hidden transition-max-height duration-500 ease-in-out ${
+          open ? 'max-h-56' : 'max-h-0'
+        }`}
+      >
+        <p className='pt-2.5 text-base text-gray-500 leading-7'>{text}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

package/src/components/alert.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React, { FC, ReactNode } from 'react';
+import { Check, Info, Warning, WarningCircle } from '@phosphor-icons/react';
+
+type TAlertType = 'info' | 'success' | 'danger' | 'warning';
+type TAlertVariant = 'fill' | 'outline';
+
+interface IAlertProps {
+  type: TAlertType;
+  variant: TAlertVariant;
+  children: ReactNode;
+}
+
+const iconByAlertType: Record<TAlertType, ReactNode> = {
+  danger: <WarningCircle size={24} />,
+  success: <Check size={24} />,
+  info: <Info size={24} />,
+  warning: <Warning size={24} />
+};
+
+const Alert: FC<IAlertProps> = ({ type, variant, children }) => {
+  const baseClasses = 'rounded-default p-4 flex items-start gap-4';
+  const typeVariantClasses: Record<
+    TAlertType,
+    Record<TAlertVariant, string>
+  > = {
+    info: {
+      fill: 'bg-info-500 text-white',
+      outline: 'border border-info-500 text-info-500'
+    },
+    success: {
+      fill: 'bg-success-500 text-white',
+      outline: 'border border-success-500 text-success-500'
+    },
+    danger: {
+      fill: 'bg-danger-500 text-white',
+      outline: 'border border-danger-500 text-danger-500'
+    },
+    warning: {
+      fill: 'bg-warning-500 text-white',
+      outline: 'border border-warning-500 text-warning-500'
+    }
+  };
+
+  const className = `${baseClasses} ${typeVariantClasses[type][variant]}`;
+
+  return (
+    <div className={className}>
+      {iconByAlertType[type]}
+      <div>{children}</div>
+    </div>
+  );
+};
+
+export default Alert;

package/src/components/badge.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import React, { FC, ReactNode } from 'react';
+
+type BadgeSize = 'small' | 'normal' | 'large';
+
+interface IBadgeProps {
+  icon?: ReactNode;
+  children: ReactNode;
+  type:
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'info'
+    | 'white'
+    | 'primary'
+    | 'secondary';
+  size?: BadgeSize;
+  mobile?: boolean;
+  className?: string;
+}
+
+const Badge: FC<IBadgeProps> = ({
+  children,
+  icon,
+  type,
+  size = 'normal',
+  mobile,
+  className
+}) => {
+  const baseClasses = `flex items-center rounded-button ${
+    mobile ? 'lg:hidden md:flex' : ''
+  } ${className || ''}`;
+  let typeClasses = '';
+
+  const sizeClasses = {
+    small: 'px-2 py-1 gap-0',
+    normal: 'py-2 px-3 gap-2',
+    large: 'py-3 px-4 gap-3'
+  }[size];
+
+  const textSizesClasses = {
+    small: 'text-xs font-normal',
+    normal: 'text-sm font-semibold',
+    large: 'text-base font-semibold'
+  }[size];
+
+  switch (type) {
+    case 'success':
+      typeClasses = 'bg-success-100 text-success-600';
+      break;
+    case 'warning':
+      typeClasses = 'bg-warning-100 text-warning-600';
+      break;
+    case 'danger':
+      typeClasses = 'bg-danger-100 text-danger-600';
+      break;
+    case 'info':
+      typeClasses = 'bg-info-100 text-info-900';
+      break;
+    case 'white':
+      typeClasses = 'bg-white text-gray-900';
+      break;
+    case 'primary':
+      typeClasses = 'bg-primary-500 text-white';
+      break;
+    case 'secondary':
+      typeClasses = 'bg-gray-100 text-primary-500';
+      break;
+    default:
+      typeClasses = '';
+  }
+
+  const textClasses = `font-semibold whitespace-nowrap ${textSizesClasses}`;
+
+  return (
+    <div className={`${baseClasses} ${typeClasses} ${sizeClasses}`}>
+      {icon && <span className='mr-2'>{icon}</span>}
+      <p className={textClasses}>{children}</p>
+    </div>
+  );
+};
+
+export default Badge;

package/src/components/breadcrumbs.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import { CaretRight } from '@phosphor-icons/react';
+
+export type BreadcrumbsItemType = {
+  id: string;
+  text: string;
+  href: string;
+};
+
+interface IBreadcrumbsProps {
+  items: BreadcrumbsItemType[];
+}
+
+const Breadcrumbs = ({ items }: IBreadcrumbsProps) => {
+  return (
+    <div className='flex items-center gap-2.5'>
+      {items?.map((item, index) => {
+        const isActive = index !== items.length - 1;
+        return (
+          <div key={item.id} className='flex items-center gap-2.5'>
+            <a
+              onClick={() => {
+                if (isActive) {
+                  window.open(item.href, '_blank');
+                }
+              }}
+              className={`no-underline text-blue-900 text-sm ${
+                isActive
+                  ? 'hover:text-blue-500 hover:cursor-pointer'
+                  : 'cursor-text'
+              }`}
+            >
+              {item.text}
+            </a>
+            {isActive && <CaretRight />}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Breadcrumbs;

package/src/components/button.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import * as React from 'react';
+import { CircleNotch } from '@phosphor-icons/react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/classes';
+
+const buttonVariants = cva(
+  'flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus:outline-hidden',
+  {
+    variants: {
+      variant: {
+        fill: '',
+        outline: 'bg-transparent border'
+      },
+      color: {
+        primary: '',
+        secondary: '',
+        danger: '',
+        gray: '',
+        white: ''
+      },
+      size: {
+        small: 'h-[32px] px-4 text-sm',
+        normal: 'h-[40px] px-6 text-base',
+        large: 'h-[48px] px-8 text-lg',
+        icon: 'h-[40px] w-[40px] p-0'
+      },
+      shape: {
+        default: 'rounded-inner',
+        rounded: 'rounded-full'
+      },
+      fontWeight: {
+        normal: 'font-normal',
+        bold: 'font-medium'
+      },
+      fullWidth: {
+        true: 'w-full',
+        false: ''
+      },
+      fullHeight: {
+        true: 'h-full',
+        false: ''
+      },
+      disabled: {
+        true: 'bg-gray-200 text-gray-900 border-none cursor-not-allowed hover:bg-gray-200 hover:text-gray-900',
+        false: ''
+      }
+    },
+    compoundVariants: [
+      {
+        variant: 'fill',
+        color: 'primary',
+        disabled: false,
+        className: 'bg-primary-500 text-white hover:bg-primary-400 active:bg-primary-600'
+      },
+      {
+        variant: 'fill',
+        color: 'secondary',
+        disabled: false,
+        className: 'bg-secondary-500 text-white hover:bg-secondary-400 active:bg-secondary-600'
+      },
+      {
+        variant: 'fill',
+        color: 'danger',
+        disabled: false,
+        className: 'bg-red-500 text-white hover:bg-red-400 active:bg-red-600'
+      },
+      {
+        variant: 'fill',
+        color: 'gray',
+        disabled: false,
+        className: 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300'
+      },
+      {
+        variant: 'fill',
+        color: 'white',
+        disabled: false,
+        className: 'bg-white text-black hover:bg-gray-200'
+      },
+      {
+        variant: 'outline',
+        color: 'primary',
+        disabled: false,
+        className:
+          'text-primary-500 border-primary-500 hover:text-primary-400 hover:border-primary-400'
+      },
+      {
+        variant: 'outline',
+        color: 'secondary',
+        disabled: false,
+        className:
+          'text-secondary-500 border-secondary-500 hover:text-secondary-400 hover:border-secondary-400'
+      },
+      {
+        variant: 'outline',
+        color: 'danger',
+        disabled: false,
+        className:
+          'text-red-500 border-red-500 hover:text-red-400 hover:border-red-400'
+      },
+      {
+        variant: 'outline',
+        color: 'gray',
+        disabled: false,
+        className:
+          'text-gray-300 border-gray-300 hover:text-gray-500 hover:border-gray-400'
+      },
+      {
+        variant: 'outline',
+        color: 'white',
+        disabled: false,
+        className:
+          'text-white border-white hover:text-gray-200 hover:border-gray-200'
+      }
+    ],
+    defaultVariants: {
+      variant: 'fill',
+      color: 'primary',
+      size: 'normal',
+      shape: 'default',
+      fontWeight: 'normal',
+      fullWidth: false,
+      fullHeight: false,
+      disabled: false
+    }
+  }
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  loading?: boolean;
+  color?: 'primary' | 'secondary' | 'danger' | 'gray' | 'white';
+  disabled?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      color,
+      size,
+      shape,
+      fontWeight,
+      fullWidth,
+      fullHeight,
+      disabled,
+      loading = false,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        className={cn(
+          buttonVariants({
+            variant,
+            color,
+            size,
+            shape,
+            fontWeight,
+            fullWidth,
+            fullHeight,
+            disabled: disabled || loading
+          }),
+          className
+        )}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading ? (
+          <CircleNotch className='animate-spin' weight='bold' />
+        ) : (
+          children
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/components/card.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import React, { FC, HTMLAttributes, ReactNode } from 'react';
+
+interface ICardProps {
+  children: ReactNode;
+}
+
+const Card: FC<ICardProps & HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className='p-4 rounded-default border bg-white border-gray-200'
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Card;

package/src/components/checkbox.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React, { ReactNode, memo, useEffect, useState } from 'react';
+import { Check } from '@phosphor-icons/react';
+import Stars from './stars';
+
+interface ICheckbox {
+  value?: boolean;
+  // eslint-disable-next-line no-unused-vars
+  onChange?: (checked: boolean) => void;
+  label?: ReactNode;
+  trailing?: string | number;
+  textColor?: 'primary';
+  type?: string;
+}
+
+const Checkbox = ({
+  value,
+  onChange,
+  label,
+  trailing,
+  textColor,
+  type
+}: ICheckbox) => {
+  const [checked, setChecked] = useState<boolean>(value || false);
+  useEffect(() => {
+    if (value !== undefined) setChecked(value);
+  }, [value]);
+
+  return (
+    <div
+      className='w-full flex items-center justify-between cursor-pointer gap-2 select-none'
+      onClick={() => {
+        setChecked(prev => !prev);
+        onChange?.(!checked);
+      }}
+    >
+      <div className='flex items-center gap-2'>
+        <div
+          className={`w-5 h-5 flex items-center justify-center border border-primary-500 rounded-md flex-none mt-[3px] hover:bg-primary-500 ${
+            checked ? 'bg-primary-500' : ''
+          }`}
+        >
+          {checked && <Check size={12} color='white' weight='bold' />}
+        </div>
+        {label && (
+          <p
+            className={`flex items-center gap-1 text-sm mt-1 ${
+              textColor === 'primary' ? 'text-primary-900' : 'text-gray-500'
+            }`}
+          >
+            {type === 'stars' ? (
+              <Stars rate={parseFloat(label.toString())} />
+            ) : (
+              label
+            )}
+          </p>
+        )}
+      </div>
+      {trailing !== undefined && (
+        <p className='text-sm text-gray-500'>{trailing}</p>
+      )}
+    </div>
+  );
+};
+
+const propsAreEqual = (prevProps: ICheckbox, nextProps: ICheckbox) =>
+  prevProps.value === nextProps.value && prevProps.label === nextProps.label;
+
+export default memo(Checkbox, propsAreEqual);