@pago-sh/ui 1.0.0

package/src/components/atoms/DateTimePicker.tsx

@@ -0,0 +1,69 @@
+import { Button } from '@pago-sh/orbit/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { FormControl } from '@/components/ui/form'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { format } from 'date-fns'
+import { CalendarDays } from 'lucide-react'
+import { useCallback, useMemo } from 'react'
+import { Matcher } from 'react-day-picker'
+import { twMerge } from 'tailwind-merge'
+
+interface DatePickerProps {
+  value: string | undefined
+  onChange: (value: string | undefined) => void
+  disabled?: Matcher | Matcher[]
+}
+
+const DatePicker: React.FC<DatePickerProps> = (props) => {
+  const { value, onChange: _onChange, disabled } = props
+  const internalValue = useMemo(
+    () => (value ? new Date(value as string) : undefined),
+    [value],
+  )
+
+  const onChange = useCallback(
+    (date: Date | undefined) => {
+      const value = date ? date.toISOString() : ''
+      _onChange(value)
+    },
+    [_onChange],
+  )
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <FormControl className="flex">
+          <Button
+            variant={'outline'}
+            className={twMerge(
+              'dark:bg-pago-800 h-10 w-full justify-start rounded-xl bg-white text-left',
+              !value && 'text-muted-foreground',
+            )}
+          >
+            {internalValue ? (
+              format(internalValue, 'PPP')
+            ) : (
+              <span>Pick a date</span>
+            )}
+            <CalendarDays className="ml-auto h-4 w-4 opacity-50" />
+          </Button>
+        </FormControl>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={internalValue}
+          onSelect={onChange}
+          disabled={disabled}
+          autoFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DatePicker

package/src/components/atoms/DropdownMenu.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import {
+  DropdownMenuContent as DropdownMenuContentPrimitive,
+  DropdownMenuItem as DropdownMenuItemPrimitive,
+  DropdownMenuPortal as DropdownMenuPortalPrimitive,
+  DropdownMenu as DropdownMenuPrimitive,
+  DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,
+  DropdownMenuTrigger as DropdownMenuTriggerPrimitive,
+} from '@/components/ui/dropdown-menu'
+import * as React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+const DropdownMenu = DropdownMenuPrimitive
+const DropdownMenuPortal = DropdownMenuPortalPrimitive
+const DropdownMenuTrigger = DropdownMenuTriggerPrimitive
+
+const DropdownMenuContent = ({
+  ref,
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContentPrimitive>) => (
+  <DropdownMenuPortal>
+    <DropdownMenuContentPrimitive
+      ref={ref}
+      sideOffset={sideOffset}
+      className={twMerge('', className)}
+      {...props}
+    />
+  </DropdownMenuPortal>
+)
+DropdownMenuContent.displayName = DropdownMenuContentPrimitive.displayName
+
+const DropdownMenuItem = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuItemPrimitive>) => (
+  <DropdownMenuItemPrimitive
+    ref={ref}
+    className={twMerge(props?.onClick ? 'cursor-pointer' : '', className)}
+    {...props}
+  />
+)
+DropdownMenuItem.displayName = DropdownMenuItemPrimitive.displayName
+
+const DropdownMenuSeparator = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuSeparatorPrimitive>) => (
+  <DropdownMenuSeparatorPrimitive
+    ref={ref}
+    className={twMerge('', className)}
+    {...props}
+  />
+)
+DropdownMenuSeparator.displayName = DropdownMenuSeparatorPrimitive.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+}

package/src/components/atoms/FormattedDateTime.tsx

@@ -0,0 +1,58 @@
+import { useMemo } from 'react'
+
+interface FormattedDateTimeProps {
+  datetime: Date | string
+  locale?: string
+  dateStyle?: 'full' | 'long' | 'medium' | 'short'
+  timeStyle?: 'full' | 'long' | 'medium' | 'short'
+  resolution?: 'time' | 'day' | 'month'
+}
+
+const FormattedDateTime: React.FC<FormattedDateTimeProps> = ({
+  datetime,
+  locale = 'en-US',
+  dateStyle = 'medium',
+  timeStyle = 'short',
+  resolution = 'day',
+}) => {
+  const parsedDate = useMemo(() => new Date(datetime), [datetime])
+  const isValidDate = useMemo(
+    () => !Number.isNaN(parsedDate.getTime()),
+    [parsedDate],
+  )
+  const formatted = useMemo(() => {
+    try {
+      if (!isValidDate) {
+        return 'Invalid date'
+      }
+
+      if (resolution === 'time') {
+        return parsedDate.toLocaleString(locale, { dateStyle, timeStyle })
+      }
+
+      if (resolution === 'month') {
+        return parsedDate.toLocaleDateString(locale, {
+          month: 'short',
+          year: 'numeric',
+        })
+      }
+
+      return parsedDate.toLocaleDateString(locale, {
+        dateStyle,
+      })
+    } catch {
+      return 'Invalid date or locale'
+    }
+  }, [parsedDate, isValidDate, locale, resolution, dateStyle, timeStyle])
+
+  return (
+    <time
+      suppressHydrationWarning
+      dateTime={isValidDate ? parsedDate.toISOString() : undefined}
+    >
+      {formatted}
+    </time>
+  )
+}
+
+export default FormattedDateTime

package/src/components/atoms/FormattedInterval.tsx

@@ -0,0 +1,81 @@
+import { isSameDay } from 'date-fns/isSameDay'
+import { useMemo } from 'react'
+
+interface FormattedIntervalProps {
+  startDatetime: Date | string
+  endDatetime: Date | string
+  locale?: string
+  hideCurrentYear?: boolean
+}
+
+const FormattedInterval: React.FC<FormattedIntervalProps> = ({
+  startDatetime,
+  endDatetime,
+  locale = 'en-US',
+  hideCurrentYear = true,
+}) => {
+  const formatted = useMemo(() => {
+    const startDate = new Date(startDatetime)
+    const endDate = new Date(endDatetime)
+    const currentYear = new Date().getFullYear()
+
+    const startYear = startDate.getFullYear()
+    const endYear = endDate.getFullYear()
+    const startMonth = startDate.getMonth()
+    const endMonth = endDate.getMonth()
+
+    const separator = '–'
+
+    const shouldHideYear =
+      hideCurrentYear && endYear === currentYear && startYear === endYear
+
+    if (isSameDay(startDate, endDate)) {
+      return endDate.toLocaleDateString(locale, {
+        month: 'short',
+        day: 'numeric',
+        ...(shouldHideYear ? {} : { year: 'numeric' }),
+      })
+    }
+
+    if (startYear === endYear && startMonth === endMonth) {
+      const startFormatted = startDate.toLocaleDateString(locale, {
+        month: 'short',
+        day: 'numeric',
+      })
+      const endFormatted = `${endDate.toLocaleDateString(locale, {
+        day: 'numeric',
+      })}${shouldHideYear ? '' : `, ${endYear}`}`
+      return `${startFormatted} ${separator} ${endFormatted}`
+    }
+
+    if (startYear === endYear) {
+      const startFormatted = startDate.toLocaleDateString(locale, {
+        month: 'short',
+        day: 'numeric',
+      })
+      const endFormatted = endDate.toLocaleDateString(locale, {
+        month: 'short',
+        day: 'numeric',
+        ...(shouldHideYear ? {} : { year: 'numeric' }),
+      })
+      return `${startFormatted} ${separator} ${endFormatted}`
+    }
+
+    const startFormatted = startDate.toLocaleDateString(locale, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+
+    const endFormatted = endDate.toLocaleDateString(locale, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    })
+    return `${startFormatted} ${separator} ${endFormatted}`
+  }, [startDatetime, endDatetime, locale, hideCurrentYear])
+
+  return <>{formatted}</>
+}
+
+export default FormattedInterval

package/src/components/atoms/InputOTP.tsx

@@ -0,0 +1,7 @@
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSlot,
+} from '@/components/ui/input-otp'
+
+export { InputOTP, InputOTPGroup, InputOTPSlot }

package/src/components/atoms/MoneyInput.tsx

@@ -0,0 +1,297 @@
+import { getCurrencyDecimalFactor, isDecimalCurrency } from '@pago-sh/currency'
+import { ChangeEvent, FocusEvent, useCallback, useMemo, useState } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Input } from '@pago-sh/orbit'
+
+interface Props {
+  name: string
+  placeholder: number
+  currency: string
+  id?: string
+  onChange?: (value: number | null) => void
+  onBlur?: (e: ChangeEvent<HTMLInputElement>) => void
+  onFocus?: (e: FocusEvent<HTMLInputElement>) => void
+  value?: number | null
+  className?: string
+  disabled?: boolean
+  preSlot?: React.ReactNode
+  postSlot?: React.ReactNode
+  step?: number
+}
+
+const MoneyInput = (props: Props) => {
+  const {
+    id,
+    name,
+    value,
+    placeholder,
+    currency,
+    preSlot,
+    postSlot,
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus,
+    disabled,
+    step = 0.1,
+  } = props
+
+  const decimalFactor = useMemo(
+    () => getCurrencyDecimalFactor(currency),
+    [currency],
+  )
+  const isNonDecimalCurrency = !isDecimalCurrency(currency)
+
+  const getInternalValue = useCallback(
+    (value: number | null | undefined): string | undefined => {
+      if (value === undefined || value === null) {
+        return undefined
+      }
+      if (isNonDecimalCurrency) {
+        return value.toString()
+      }
+      return (value / decimalFactor).toFixed(2)
+    },
+    [decimalFactor, isNonDecimalCurrency],
+  )
+
+  const getUnits = useCallback(
+    (value: string): number => {
+      let newAmount = Number.parseFloat(value)
+      if (isNaN(newAmount)) {
+        newAmount = 0
+      }
+      if (isNonDecimalCurrency) {
+        return Math.round(newAmount)
+      }
+      // Round to avoid floating point errors
+      return Math.round(newAmount * decimalFactor)
+    },
+    [decimalFactor, isNonDecimalCurrency],
+  )
+
+  const [previousValue, setPreviousValue] = useState<number | null | undefined>(
+    value,
+  )
+  const [internalValue, setInternalValue] = useState<string | undefined>(
+    getInternalValue(value),
+  )
+
+  if (value !== previousValue) {
+    setPreviousValue(value)
+    setInternalValue(getInternalValue(value))
+  }
+
+  const updateValue = useCallback(
+    (newValue: string) => {
+      if (_onChange) {
+        if (!newValue || newValue.trim() === '') {
+          setPreviousValue(null)
+          _onChange(null)
+        } else {
+          const unitsValue = getUnits(newValue)
+          setPreviousValue(unitsValue)
+          _onChange(unitsValue)
+        }
+      }
+
+      setInternalValue(newValue)
+    },
+    [_onChange, getUnits],
+  )
+
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const input = e.target.value
+
+      // If input is completely empty, allow clearing the field
+      if (input === '') {
+        updateValue('')
+        return
+      }
+
+      // For non-decimal currencies, only allow whole numbers
+      if (isNonDecimalCurrency) {
+        const cleaned = input.replace(/[^0-9]/g, '')
+        updateValue(cleaned)
+        return
+      }
+
+      // Strip everything except numbers, commas, and periods
+      // (people can paste in anything, so the keydown handler is not enough)
+      const cleaned = input.replace(/[^0-9,.]/g, '')
+
+      // By default, parse the full value as a whole number, stripping out decimal separators
+      //
+      // Leave a trailing comma, otherwise people can't type in decimals
+      // (the onBlur handler will strip it if it's dangling on blur)
+      let newValue = cleaned.replace(/[,.](?!$)/g, '').replace(/,$/, '.')
+
+      // However, if we detect a decimal separator, round it to 2 decimal places
+      //
+      // We support period decimal separator (enforced when typing)
+      // but also support comma decimal separators (might be pasted in)
+      const decimalMatch = cleaned.match(/([.,])([0-9]+)$/)
+
+      if (decimalMatch) {
+        const maxDecimalPrecision = 2
+        const decimalPart = decimalMatch[2]
+        const integerPart = cleaned
+          .slice(0, -decimalMatch[0].length)
+          .replace(/[,.]/g, '')
+        const trimmedDecimalPart = decimalPart.slice(0, maxDecimalPrecision)
+
+        const parsedValue = Number.parseFloat(
+          `${integerPart}.${trimmedDecimalPart}`,
+        )
+
+        if (!Number.isNaN(parsedValue)) {
+          const decimalPlaces = Math.min(
+            maxDecimalPrecision,
+            decimalPart.length,
+          )
+          const formatted = parsedValue.toFixed(decimalPlaces)
+
+          // This covers when the user deletes the last integer part and prevents inserting a `0`
+          // in place of the last integer part that would make the caret jump to the end of the input
+          // This way the user can continue typing
+          newValue =
+            integerPart.length > 0
+              ? formatted
+              : formatted.replace(/^0(?=\.)/, '')
+        }
+      }
+
+      updateValue(newValue)
+    },
+    [updateValue, isNonDecimalCurrency],
+  )
+
+  const onBlur = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      if (internalValue) {
+        let nextValue = internalValue
+
+        if (!isNonDecimalCurrency) {
+          // Add 0 as integer part if value starts with `.`
+          if (nextValue.startsWith('.')) {
+            nextValue = `0${nextValue}`
+          }
+
+          // Strip trailing decimal point
+          if (nextValue.endsWith('.')) {
+            nextValue = nextValue.replace(/\.$/, '')
+          }
+        }
+
+        if (nextValue !== internalValue) {
+          updateValue(nextValue)
+        }
+      }
+
+      if (_onBlur) {
+        _onBlur(e)
+      }
+    },
+    [_onBlur, internalValue, updateValue, isNonDecimalCurrency],
+  )
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      // For non-decimal currencies, only allow digits and control keys
+      if (isNonDecimalCurrency) {
+        if (
+          !/[0-9]/.test(e.key) &&
+          !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
+            e.key,
+          ) &&
+          !e.ctrlKey &&
+          !e.metaKey
+        ) {
+          e.preventDefault()
+        }
+        return
+      }
+
+      // Allow only digits, decimal point, and control keys
+      if (
+        !/[0-9.,]/.test(e.key) &&
+        !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(
+          e.key,
+        ) &&
+        !e.ctrlKey &&
+        !e.metaKey
+      ) {
+        e.preventDefault()
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault()
+        const parsedValue = Number.parseFloat(e.currentTarget.value)
+
+        const newValue = (
+          !Number.isNaN(parsedValue) ? parsedValue + step : step
+        ).toFixed(2)
+
+        updateValue(newValue)
+      }
+
+      if (e.key === 'ArrowDown') {
+        const parsedValue = Number.parseFloat(e.currentTarget.value)
+
+        const newValue = Math.max(
+          0,
+          !Number.isNaN(parsedValue) ? parsedValue - step : -step,
+        ).toFixed(2)
+
+        updateValue(newValue)
+      }
+
+      // Prevent multiple decimal points
+      if (
+        (e.key === '.' || e.key === ',') &&
+        e.currentTarget.value.includes('.')
+      ) {
+        e.preventDefault()
+      }
+    },
+    [step, updateValue, isNonDecimalCurrency],
+  )
+
+  const currencyLabel = (
+    <span className="dark:text-pago-500 text-sm font-medium text-gray-500">
+      {currency.toUpperCase()}
+    </span>
+  )
+
+  const placeholderValue = useMemo(() => {
+    if (!placeholder) return undefined
+    if (isNonDecimalCurrency) {
+      return placeholder.toLocaleString('en-US')
+    }
+    return (placeholder / decimalFactor).toLocaleString('en-US')
+  }, [placeholder, decimalFactor, isNonDecimalCurrency])
+
+  return (
+    <Input
+      type="text"
+      inputMode={isNonDecimalCurrency ? 'numeric' : 'decimal'}
+      id={id}
+      name={name}
+      className={twMerge(
+        'dark:placeholder:text-pago-500 block w-full px-4 pl-14 text-base placeholder:text-gray-400',
+        props.className ?? '',
+      )}
+      value={internalValue}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      placeholder={placeholderValue}
+      preSlot={preSlot ? preSlot : currencyLabel}
+      postSlot={postSlot}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      disabled={disabled}
+    />
+  )
+}
+
+export default MoneyInput