@pago-sh/ui 1.0.0

package/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { config } from '@pago-sh/eslint-config/react-internal'
+
+/** @type {import("eslint").Linter.Config[]} */
+export default [
+  {
+    ignores: ['node_modules/**', 'dist/**'],
+  },
+  ...config,
+  {
+    rules: {
+      'react/prop-types': 'off',
+      'react/no-unknown-property': [
+        'error',
+        { ignore: ['cmdk-input-wrapper'] },
+      ],
+    },
+  },
+]

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@pago-sh/ui",
+  "version": "1.0.0",
+  "description": "Pago UI Components — This is a private library for the Pago project. You probably shouldn't use it directly in your own projects.",
+  "author": "Pago",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pago-sh/pago.git",
+    "directory": "clients/packages/ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup",
+    "format": "oxfmt ./src",
+    "format:check": "oxfmt --check ./src",
+    "lint": "pnpm format:check && eslint --max-warnings 0 .",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@pago-sh/currency": "workspace:^",
+    "@pago-sh/orbit": "workspace:*",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.577.0",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "~7.72.1",
+    "react-timeago": "^8.3.0",
+    "recharts": "^3.8.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@pago-sh/eslint-config": "workspace:*",
+    "@pago-sh/typescript-config": "workspace:*",
+    "@stripe/stripe-js": "^8.11.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "tsup": "^8.5.1",
+    "typescript": "5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  }
+}

package/src/components/atoms/Accordion.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import * as React from 'react'
+
+import {
+  Accordion as ShadAccordion,
+  AccordionContent as ShadAccordionContent,
+  AccordionItem as ShadAccordionItem,
+  AccordionTrigger as ShadAccordionTrigger,
+} from '@/components/ui/accordion'
+import { cn } from '@/lib/utils'
+
+const Accordion = ShadAccordion
+
+const AccordionItem = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof ShadAccordionItem>) => (
+  <ShadAccordionItem
+    ref={ref}
+    className={cn('rounded-2xl! px-3', className)}
+    {...props}
+  />
+)
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = ({
+  ref,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ShadAccordionTrigger>) => (
+  <ShadAccordionTrigger
+    ref={ref}
+    className={cn('text-sm', className)}
+    {...props}
+  >
+    {children}
+  </ShadAccordionTrigger>
+)
+AccordionTrigger.displayName = ShadAccordionTrigger.displayName
+
+const AccordionContent = ({
+  ref,
+  children,
+  ...props
+}: React.ComponentProps<typeof ShadAccordionContent>) => (
+  <ShadAccordionContent ref={ref} {...props}>
+    {children}
+  </ShadAccordionContent>
+)
+
+AccordionContent.displayName = ShadAccordionContent.displayName
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

package/src/components/atoms/Card.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+
+import {
+  CardContent as CardContentPrimitive,
+  CardHeader as CardHeaderPrimitive,
+  Card as CardPrimitive,
+} from '@/components/ui/card'
+import { twMerge } from 'tailwind-merge'
+
+const Card = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof CardPrimitive>) => (
+  <CardPrimitive
+    ref={ref}
+    className={twMerge(
+      'dark:bg-pago-800 rounded-4xl border-transparent bg-gray-100 text-gray-950 shadow-none dark:border-transparent dark:text-white',
+      className,
+    )}
+    {...props}
+  />
+)
+Card.displayName = CardPrimitive.displayName
+
+const CardHeader = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof CardHeaderPrimitive>) => (
+  <CardHeaderPrimitive
+    ref={ref}
+    className={twMerge('', className)}
+    {...props}
+  />
+)
+CardHeader.displayName = CardHeaderPrimitive.displayName
+
+const CardContent = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentProps<typeof CardContentPrimitive>) => (
+  <CardContentPrimitive
+    ref={ref}
+    className={twMerge('', className)}
+    {...props}
+  />
+)
+CardContent.displayName = CardContentPrimitive.displayName
+
+export { Card, CardContent, CardHeader }

package/src/components/atoms/Combobox.tsx

@@ -0,0 +1,166 @@
+'use client'
+
+import { Check, ChevronsUpDown, Loader2 } from 'lucide-react'
+import * as React from 'react'
+
+import { Button } from '@pago-sh/orbit/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+
+export interface ComboboxProps<T> {
+  // Data
+  items: T[]
+  value: string | null
+  selectedItem: T | null
+
+  // Callbacks
+  onChange: (value: string | null) => void
+  onQueryChange: (query: string) => void
+  getItemValue: (item: T) => string
+  getItemLabel: (item: T) => string
+
+  // Optional customization
+  renderItem?: (item: T) => React.ReactNode
+  isLoading?: boolean
+
+  // Text customization
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: string
+
+  // Styling
+  className?: string
+  popoverClassName?: string
+  popoverAlign?: 'start' | 'center' | 'end'
+
+  // State
+  disabled?: boolean
+}
+
+export function Combobox<T>({
+  items,
+  value,
+  selectedItem,
+  onChange,
+  onQueryChange,
+  getItemValue,
+  getItemLabel,
+  renderItem,
+  isLoading = false,
+  placeholder = 'Select a value',
+  searchPlaceholder = 'Search…',
+  emptyLabel = 'No results found',
+  className,
+  popoverClassName,
+  popoverAlign,
+  disabled = false,
+}: ComboboxProps<T>) {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+
+  const handleQueryChange = React.useCallback(
+    (newQuery: string) => {
+      setQuery(newQuery)
+      onQueryChange(newQuery)
+    },
+    [onQueryChange],
+  )
+
+  const handleSelect = React.useCallback(
+    (itemValue: string) => {
+      const newValue = itemValue === value ? null : itemValue
+      onChange(newValue)
+      setOpen(false)
+    },
+    [onChange, value],
+  )
+
+  const selectedLabel = React.useMemo(() => {
+    if (!value || !selectedItem) return null
+    return getItemLabel(selectedItem)
+  }, [value, selectedItem, getItemLabel])
+
+  return (
+    <Popover open={open && !disabled} onOpenChange={setOpen}>
+      <span className={cn('block w-full', disabled && 'cursor-not-allowed')}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className={cn(
+              'dark:bg-pago-800 dark:hover:bg-pago-700 dark:hover:border-pago-700 dark:border-pago-700 flex w-full flex-row justify-between gap-x-2 rounded-lg border border-gray-200 bg-white px-3 shadow-xs transition-colors hover:bg-gray-50 hover:text-black dark:hover:text-white',
+              className,
+            )}
+          >
+            {selectedLabel ?? placeholder}
+            <ChevronsUpDown className="opacity-50" />
+          </Button>
+        </PopoverTrigger>
+      </span>
+      <PopoverContent
+        align={popoverAlign}
+        className={cn(
+          'w-(--radix-popover-trigger-width) rounded-xl p-0',
+          popoverClassName,
+        )}
+      >
+        <Command shouldFilter={false} className="rounded-xl">
+          <CommandInput
+            placeholder={searchPlaceholder}
+            className="h-9 border-0 focus:ring-0 focus:outline-0"
+            value={query}
+            onValueChange={handleQueryChange}
+          />
+          <CommandList>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-6">
+                <Loader2 className="h-4 w-4 animate-spin opacity-50" />
+              </div>
+            ) : items.length === 0 ? (
+              <CommandEmpty>{emptyLabel}</CommandEmpty>
+            ) : (
+              <CommandGroup>
+                {items.map((item) => {
+                  const itemValue = getItemValue(item)
+                  const itemLabel = getItemLabel(item)
+                  const isSelected = value === itemValue
+
+                  return (
+                    <CommandItem
+                      key={itemValue}
+                      value={itemValue}
+                      onSelect={handleSelect}
+                      className="rounded-md text-black dark:text-white"
+                    >
+                      {renderItem ? renderItem(item) : itemLabel}
+                      <Check
+                        className={cn(
+                          'ml-auto',
+                          isSelected ? 'opacity-100' : 'opacity-0',
+                        )}
+                      />
+                    </CommandItem>
+                  )
+                })}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/atoms/CopyToClipboardInput.tsx

@@ -0,0 +1,72 @@
+import { Check } from 'lucide-react'
+import { useState } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { Button } from '@pago-sh/orbit'
+import { Input } from '@pago-sh/orbit'
+
+const CopyToClipboardInput = ({
+  value,
+  onCopy,
+  buttonLabel,
+  disabled = false,
+  className = '',
+  variant = 'default',
+}: {
+  value: string
+  onCopy?: () => void
+  buttonLabel?: string
+  disabled?: boolean
+  className?: string
+  variant?: 'default' | 'mono'
+}) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(value)
+
+    if (onCopy) {
+      onCopy()
+    }
+
+    setIsCopied(true)
+
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 2000)
+  }
+
+  return (
+    <div
+      className={twMerge(
+        'dark:border-pago-700 dark:bg-pago-800 flex w-full flex-row items-center overflow-hidden rounded-xl border bg-white shadow-xs',
+        className,
+      )}
+    >
+      <Input
+        className={twMerge(
+          'dark:text-pago-400 !focus:border-transparent !focus:ring-transparent !dark:focus:border-transparent !dark:focus:ring-transparent w-full grow border-none bg-transparent text-gray-600 shadow-none! focus-visible:ring-transparent dark:bg-transparent dark:focus-visible:ring-transparent',
+          variant === 'mono' ? 'font-mono text-sm' : '',
+        )}
+        value={value}
+        readOnly={true}
+      />
+      {!disabled && (
+        <Button
+          className="mr-1 text-xs"
+          type="button"
+          size="sm"
+          variant="ghost"
+          onClick={copyToClipboard}
+        >
+          {isCopied ? (
+            <Check className="text-sm" fontSize="inherit" />
+          ) : (
+            buttonLabel || 'Copy'
+          )}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default CopyToClipboardInput

package/src/components/atoms/CountryPicker.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@pago-sh/orbit'
+
+const CountryPicker = ({
+  allowedCountries,
+  locale,
+  value,
+  onChange,
+  autoComplete,
+  disabled,
+  className,
+  itemClassName,
+  contentClassName,
+  placeholder = 'Country',
+}: {
+  allowedCountries: readonly string[]
+  locale?: string
+  value?: string
+  onChange: (value: string) => void
+  autoComplete?: string
+  disabled?: boolean
+  className?: string
+  itemClassName?: string
+  contentClassName?: string
+  placeholder?: string
+}) => {
+  const countryList = useMemo(() => {
+    const displayNames = new Intl.DisplayNames(locale ? [locale] : [], {
+      type: 'region',
+    })
+    return allowedCountries
+      .map((code) => ({
+        code,
+        name: displayNames.of(code) ?? code,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name, locale))
+  }, [allowedCountries, locale])
+
+  return (
+    <Select
+      onValueChange={onChange}
+      value={value}
+      autoComplete={autoComplete}
+      disabled={disabled}
+    >
+      <SelectTrigger className={className}>
+        <SelectValue
+          placeholder={placeholder}
+          // Avoids issues due to browser automatic translation
+          // https://github.com/shadcn-ui/ui/issues/852
+          translate="no"
+        />
+      </SelectTrigger>
+      <SelectContent className={contentClassName} translate="no">
+        {countryList.map(({ code, name }) => (
+          <SelectItem
+            key={code}
+            value={code}
+            textValue={name}
+            className={itemClassName}
+          >
+            {/* Wrap in div to workaround an issue with browser automatic translation
+              https://github.com/shadcn-ui/ui/issues/852 */}
+            <div>{name}</div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export default CountryPicker

package/src/components/atoms/CountryStatePicker.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import { Input } from '@pago-sh/orbit'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@pago-sh/orbit'
+
+export const FIXED_STATE_OPTIONS: Record<string, Record<string, string>> = {
+  US: {
+    'US-AL': 'Alabama',
+    'US-AK': 'Alaska',
+    'US-AZ': 'Arizona',
+    'US-AR': 'Arkansas',
+    'US-CA': 'California',
+    'US-CO': 'Colorado',
+    'US-CT': 'Connecticut',
+    'US-DE': 'Delaware',
+    'US-FL': 'Florida',
+    'US-GA': 'Georgia',
+    'US-HI': 'Hawaii',
+    'US-ID': 'Idaho',
+    'US-IL': 'Illinois',
+    'US-IN': 'Indiana',
+    'US-IA': 'Iowa',
+    'US-KS': 'Kansas',
+    'US-KY': 'Kentucky',
+    'US-LA': 'Louisiana',
+    'US-ME': 'Maine',
+    'US-MD': 'Maryland',
+    'US-MA': 'Massachusetts',
+    'US-MI': 'Michigan',
+    'US-MN': 'Minnesota',
+    'US-MS': 'Mississippi',
+    'US-MO': 'Missouri',
+    'US-MT': 'Montana',
+    'US-NE': 'Nebraska',
+    'US-NV': 'Nevada',
+    'US-NH': 'New Hampshire',
+    'US-NJ': 'New Jersey',
+    'US-NM': 'New Mexico',
+    'US-NY': 'New York',
+    'US-NC': 'North Carolina',
+    'US-ND': 'North Dakota',
+    'US-OH': 'Ohio',
+    'US-OK': 'Oklahoma',
+    'US-OR': 'Oregon',
+    'US-PA': 'Pennsylvania',
+    'US-RI': 'Rhode Island',
+    'US-SC': 'South Carolina',
+    'US-SD': 'South Dakota',
+    'US-TN': 'Tennessee',
+    'US-TX': 'Texas',
+    'US-UT': 'Utah',
+    'US-VT': 'Vermont',
+    'US-VA': 'Virginia',
+    'US-WA': 'Washington',
+    'US-WV': 'West Virginia',
+    'US-WI': 'Wisconsin',
+    'US-WY': 'Wyoming',
+    'US-DC': 'District of Columbia',
+  },
+  CA: {
+    'CA-AB': 'Alberta',
+    'CA-BC': 'British Columbia',
+    'CA-MB': 'Manitoba',
+    'CA-NB': 'New Brunswick',
+    'CA-NL': 'Newfoundland and Labrador',
+    'CA-NS': 'Nova Scotia',
+    'CA-NT': 'Northwest Territories',
+    'CA-NU': 'Nunavut',
+    'CA-ON': 'Ontario',
+    'CA-PE': 'Prince Edward Island',
+    'CA-QC': 'Quebec',
+    'CA-SK': 'Saskatchewan',
+    'CA-YT': 'Yukon',
+  },
+}
+
+export const COUNTRIES_WITH_FIXED_STATE_OPTIONS =
+  Object.keys(FIXED_STATE_OPTIONS)
+
+const CountryStatePicker = ({
+  className,
+  value,
+  onChange,
+  country,
+  autoComplete,
+  itemClassName,
+  contentClassName,
+  disabled,
+  placeholder = 'State',
+  fallbackPlaceholder = 'State / Province',
+}: {
+  className?: string
+  contentClassName?: string
+  itemClassName?: string
+  value?: string
+  onChange: (value: string) => void
+  country?: string
+  autoComplete?: string
+  disabled?: boolean
+  placeholder?: string
+  fallbackPlaceholder?: string
+}) => {
+  const states = country ? FIXED_STATE_OPTIONS[country] : undefined
+  if (states) {
+    return (
+      <Select
+        onValueChange={onChange}
+        value={value}
+        autoComplete={autoComplete}
+        disabled={disabled}
+      >
+        <SelectTrigger className={className}>
+          <SelectValue
+            placeholder={placeholder}
+            // Avoids issues due to browser automatic translation
+            // https://github.com/shadcn-ui/ui/issues/852
+            translate="no"
+          />
+        </SelectTrigger>
+        <SelectContent className={contentClassName} translate="no">
+          {Object.entries(states).map(([code, name]) => (
+            <SelectItem
+              key={code}
+              value={code}
+              textValue={name}
+              className={itemClassName}
+            >
+              {/* Wrap in div to workaround an issue with browser automatic translation
+                https://github.com/shadcn-ui/ui/issues/852 */}
+              <div>{name}</div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    )
+  }
+
+  return (
+    <Input
+      type="text"
+      placeholder={fallbackPlaceholder}
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+    />
+  )
+}
+
+export default CountryStatePicker