import { AddressInput } from '@akson/cortex-ui-library'

function MyForm() {
  const [address, setAddress] = useState({})

  return (
    <AddressInput
      address={address}
      onChange={setAddress}
      required
      label="Delivery Address"
      googleMapsApiKey="your-api-key" // Optional
      showCoordinates
      validateOnChange
    />
  )
}

import { PhoneInput } from '@akson/cortex-ui-library'

function MyForm() {
  const [phone, setPhone] = useState('')
  const [isValid, setIsValid] = useState(false)

  return (
    <PhoneInput
      value={phone}
      onChange={setPhone}
      onValidChange={(valid, phoneData) => {
        setIsValid(valid)
        console.log('Phone data:', phoneData)
      }}
      defaultCountry="CH"
      autoFormat
      showValidationIcon
      required
    />
  )
}

import { OTPInput } from '@akson/cortex-ui-library'

function MyForm() {
  const [otp, setOtp] = useState('')

  return (
    <OTPInput
      value={otp}
      onChange={setOtp}
      onComplete={(code) => {
        console.log('OTP completed:', code)
        // Auto-submit when complete
      }}
      length={6}
      label="Verification Code"
      helperText="Enter the code sent to your phone"
      allowedCharacters="numeric"
      required
    />
  )
}

import { FileUploadField, fileUploadPresets } from '@akson/cortex-ui-library'
import { useDocumentUpload } from '@akson/cortex-supabase'

function MyUploadForm() {
  // Supabase integration (optional)
  const documentUpload = useDocumentUpload({
    bucketName: 'documents',
    pathPrefix: 'uploads'
  })

  return (
    <FileUploadField
      uploadHook={documentUpload} // Inject Supabase functionality
      config={{
        ...fileUploadPresets.documents, // Use preset configuration
        maxFiles: 10,
        showThumbnails: true,
        variant: 'gallery'
      }}
      onUploadComplete={(results) => {
        console.log('Files uploaded:', results)
      }}
    />
  )
}

// Without Supabase - use direct upload handler
function CustomUploadForm() {
  const handleUpload = async (files: File[]) => {
    // Your custom upload logic
    return await uploadToMyBackend(files)
  }

  return (
    <FileUploadField
      onUpload={handleUpload}
      config={fileUploadPresets.images}
    />
  )
}

import {
  required,
  minLength,
  maxLength,
  email,
  parsePhoneNumber,
  validatePhoneNumber,
  validateAddress
} from '@akson/cortex-ui-library'

// Basic validation
const nameValidation = required('John Doe')
const emailValidation = email('user@example.com') // Uses validator.js

// Phone validation with libphonenumber-js
const phoneData = parsePhoneNumber('+41761234567', 'CH')
const phoneValidation = validatePhoneNumber('+41761234567')

// Address validation
const addressErrors = validateAddress({
  streetLine1: '123 Main St',
  city: 'Zurich',
  // ... other fields
}, true) // required = true

import { cn, inputVariants } from '@akson/cortex-ui-library'

// Combine classes conditionally
const inputClassName = cn(
  'base-input',
  hasError && 'error-state',
  isDisabled && 'disabled'
)

// Use built-in style variants
const className = cn(
  baseInputStyles,
  hasError ? inputVariants.error : inputVariants.default
)

// Input styles
baseInputStyles, inputVariants
// Label styles
labelStyles
// Error and helper text
errorStyles, helperTextStyles
// Buttons
buttonStyles, buttonVariants
// Card layout
cardStyles, cardHeaderStyles, cardContentStyles

import type {
  AddressData,
  AddressInputProps,
  PhoneData,
  PhoneInputProps,
  ValidationResult,
  FieldErrors
} from '@akson/cortex-ui-library'

// Address data structure
const address: AddressData = {
  streetLine1: '123 Main Street',
  streetLine2: 'Apt 4B',
  city: 'Zurich',
  state: 'ZH',
  postalCode: '8001',
  country: 'Switzerland',
  fullFormattedAddress: '123 Main Street, Apt 4B, 8001 Zurich, Switzerland',
  placeId: 'ChIJ...',
  coordinates: { lat: 47.3769, lng: 8.5417 }
}

// Phone data structure
const phoneData: PhoneData = {
  countryCode: '+41',
  nationalNumber: '761234567',
  formattedNumber: '+41 76 123 45 67',
  isValid: true
}

// Jest setup is included
import '@testing-library/jest-dom'

// Google Maps mocks are provided
// No additional setup needed for testing

import React, { useState } from 'react'
import { AddressInput, PhoneInput, validateAddress } from '@akson/cortex-ui-library'

function ContactForm() {
  const [formData, setFormData] = useState({
    address: {},
    phone: ''
  })
  const [errors, setErrors] = useState({})

  const handleSubmit = (e) => {
    e.preventDefault()

    // Validate address
    const addressErrors = validateAddress(formData.address, true)

    if (Object.keys(addressErrors).length > 0) {
      setErrors({ address: addressErrors })
      return
    }

    // Submit form
    console.log('Form data:', formData)
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <AddressInput
        address={formData.address}
        onChange={(address) => setFormData(prev => ({ ...prev, address }))}
        errors={errors.address}
        required
        label="Your Address"
        googleMapsApiKey={process.env.GOOGLE_MAPS_API_KEY}
      />

      <PhoneInput
        value={formData.phone}
        onChange={(phone) => setFormData(prev => ({ ...prev, phone }))}
        required
        label="Phone Number"
        autoFormat
        showValidationIcon
      />

      <button type="submit">Submit</button>
    </form>
  )
}

import { AddressInput, cn } from '@akson/cortex-ui-library'

function StyledAddressInput() {
  return (
    <AddressInput
      // ... props
      className={cn(
        // Custom card styling
        'shadow-lg border-2 border-blue-200',
        // Hover effects
        'hover:border-blue-400 transition-colors'
      )}
    />
  )
}

interface AddressData {
  streetLine1: string
  streetLine2?: string
  city: string
  state: string
  postalCode: string
  country: string
  fullFormattedAddress?: string
  placeId?: string
  coordinates?: { lat: number; lng: number }
}

interface PhoneData {
  countryCode: string
  nationalNumber: string
  formattedNumber: string
  isValid: boolean
}

interface ValidationResult {
  isValid: boolean
  error?: string
}