@xyo-network/react-form-credit-card 2.81.2

package/src/components/controls/card/cvv/Cvv.tsx

@@ -0,0 +1,23 @@
+import { CreditCardCvvFormControl } from '../../../../controls/index.js'
+import { WithFormControlProps } from '../../WithFormControlProps.js'
+import { FormControlTextField } from '../FormControlTextField.js'
+import { useCreditCardCvvFormControl } from './use.js'
+
+export const CreditCardCvvWithFormControl: React.FC<WithFormControlProps> = ({ formControlName = 'cvc', fieldLabel = 'CVC', ...props }) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardCvvFormControl(formControlName, undefined, CreditCardCvvFormControl)
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cvcProps } = creditCardFormControl?.props ?? {}
+
+  return (
+    <FormControlTextField
+      fieldLabel={fieldLabel}
+      formControl={creditCardFormControl}
+      formControlError={error}
+      inputMode={inputMode}
+      inputProps={{ 'aria-label': `${fieldLabel} number on the back of your card`, autoComplete, autoCorrect, id, name, spellCheck }}
+      inputRef={inputRef}
+      value={value}
+      {...cvcProps}
+      {...props}
+    />
+  )
+}

package/src/components/controls/card/cvv/index.ts

@@ -0,0 +1,2 @@
+export * from './Cvv.js'
+export * from './use.js'

package/src/components/controls/card/cvv/use.tsx

@@ -0,0 +1,33 @@
+import { StandardTextFieldProps } from '@mui/material'
+import { FormControlBase } from '@xyo-network/react-form-group'
+import { useEffect } from 'react'
+
+import { useFormGroupWithCreditCardInput } from '../../../../context/index.js'
+import { CreditCardCvvFormControl } from '../../../../controls/index.js'
+import { useCreditCardFormControl } from '../useCreditCardFormControl.js'
+
+export const useCreditCardCvvFormControl = (
+  formControlName?: string,
+  cardNumberControlName = 'cardNumber',
+  control?: new () => FormControlBase<StandardTextFieldProps>,
+) => {
+  const { creditCardFormControl, error, value, inputRef } = useCreditCardFormControl(formControlName, control)
+
+  // only use FormGroupContext when name is passed
+  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)
+
+  const creditCardNumberFormControl = formGroup?.getControl?.(cardNumberControlName)
+
+  useEffect(() => {
+    if (creditCardNumberFormControl) {
+      const castControl = creditCardFormControl as CreditCardCvvFormControl
+      if (!castControl.setCardNumberFormControl) {
+        console.error('cannot setCardNumberFormControl on control because it is not a CreditCardCvvFormControl')
+        return
+      }
+      castControl.setCardNumberFormControl(creditCardNumberFormControl)
+    }
+  }, [creditCardFormControl, creditCardNumberFormControl])
+
+  return { creditCardFormControl, error, inputRef, value }
+}

package/src/components/controls/card/index.ts

@@ -0,0 +1,9 @@
+export * from './cvv/index.js'
+export * from './Email.js'
+export * from './Expiration.js'
+export * from './FormControlTextField.js'
+export * from './Name.js'
+export * from './number/index.js'
+export * from './Options.js'
+export * from './useCreditCardFormControl.js'
+export * from './Zip.js'

package/src/components/controls/card/number/Number.tsx

@@ -0,0 +1,38 @@
+import { InputAdornment } from '@mui/material'
+
+import { CreditCardNumberFormControl } from '../../../../controls/index.js'
+import { WithFormControlProps } from '../../WithFormControlProps.js'
+import { FormControlTextField } from '../FormControlTextField.js'
+import { CreditCardData } from '../Options.js'
+import { useCreditCardNumberFormControl } from './use.js'
+
+export const CreditCardNumberWithFormControl: React.FC<WithFormControlProps> = ({
+  fieldLabel = 'Card Number',
+  formControlName = 'cardNumber',
+  ...props
+}) => {
+  const { creditCardFormControl, error, inputRef, type, value } = useCreditCardNumberFormControl(formControlName, CreditCardNumberFormControl)
+  const { autoComplete, autoCorrect, id, inputMode, name, spellCheck, ...cardProps } = creditCardFormControl?.props ?? {}
+
+  return (
+    <FormControlTextField
+      fieldLabel={fieldLabel}
+      formControl={creditCardFormControl}
+      formControlError={error}
+      inputRef={inputRef}
+      inputMode={inputMode}
+      inputProps={{ 'aria-label': fieldLabel, autoComplete, autoCorrect, id, inputMode, name, spellCheck }}
+      InputProps={{
+        startAdornment:
+          type.length > 0 ?
+            <InputAdornment position="start">
+              <img height={'30px'} width={'40px'} src={CreditCardData[type].icon} />
+            </InputAdornment>
+          : null,
+      }}
+      value={value}
+      {...cardProps}
+      {...props}
+    />
+  )
+}

package/src/components/controls/card/number/index.ts

@@ -0,0 +1,2 @@
+export * from './Number.js'
+export * from './use.js'

package/src/components/controls/card/number/use.tsx

@@ -0,0 +1,25 @@
+import { StandardTextFieldProps } from '@mui/material'
+import { FormControlBase } from '@xyo-network/react-form-group'
+import { useEffect, useState } from 'react'
+
+import { CreditCardNumberFormControl } from '../../../../controls/index.js'
+import { CreditCardOptions } from '../Options.js'
+import { useCreditCardFormControl } from '../useCreditCardFormControl.js'
+
+export const useCreditCardNumberFormControl = (formControlName?: string, control?: new () => FormControlBase<StandardTextFieldProps>) => {
+  const { creditCardFormControl, error, inputRef, value } = useCreditCardFormControl(formControlName, control)
+  const [type, setType] = useState('' as keyof CreditCardOptions)
+
+  useEffect(() => {
+    if (creditCardFormControl) {
+      const castInstance = creditCardFormControl as CreditCardNumberFormControl<StandardTextFieldProps>
+      if (!castInstance.onCreditCardTypeChange) {
+        console.error('cannot set onCreditCardTypeChange on control because it is not a CreditCardNumberFormControl')
+        return
+      }
+      castInstance.onCreditCardTypeChange = (type: string) => setType(type as keyof CreditCardOptions)
+    }
+  }, [creditCardFormControl, inputRef])
+
+  return { creditCardFormControl, error, inputRef, type, value }
+}

package/src/components/controls/card/useCreditCardFormControl.tsx

@@ -0,0 +1,38 @@
+import { StandardTextFieldProps } from '@mui/material'
+import { FormControlBase, ValidControlValue } from '@xyo-network/react-form-group'
+import { useMemo, useRef, useState } from 'react'
+
+import { useFormGroupWithCreditCardInput } from '../../../context/index.js'
+
+export const useCreditCardFormControl = (
+  formControlName?: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Control?: new (...args: any[]) => FormControlBase<StandardTextFieldProps>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  args: any[] = [],
+) => {
+  const [error, setError] = useState('')
+  const [value, setValue] = useState<ValidControlValue>('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // only use FormGroupContext when name is passed
+  const { formGroup } = useFormGroupWithCreditCardInput(!!formControlName)
+
+  const creditCardFormControl = useMemo(() => {
+    if (Control) {
+      const control = new Control(...args)
+      control.registerOnErrorChange((newError: string) => setError(newError))
+      control.registerOnChange((value: ValidControlValue) => setValue(value))
+      control.onCursorChange = (cursor: number | undefined) => {
+        if (inputRef.current && cursor) {
+          inputRef.current.setSelectionRange(cursor, cursor)
+        }
+      }
+
+      if (formControlName) formGroup?.registerControl(formControlName, control)
+      return control
+    }
+  }, [Control, args, formControlName, formGroup])
+
+  return { creditCardFormControl, error, inputRef, value }
+}

package/src/components/controls/index.ts

@@ -0,0 +1,2 @@
+export * from './card/index.js'
+export * from './WithFormControlProps.js'

package/src/components/form/Form.tsx

@@ -0,0 +1,65 @@
+import { Stack } from '@mui/material'
+import { FlexCol } from '@xylabs/react-flexbox'
+import { ErrorRender } from '@xyo-network/react-error'
+
+import { FormGroupCreditCardProvider, useFormGroupWithCreditCardInput } from '../../context/index.js'
+import { validateCreditCardInputs } from '../support/index.js'
+import { InputFieldsStack } from './InputFieldsStack.js'
+import { CreditCardFormProps } from './Props.js'
+import { useFormStorage } from './useFormStorage.js'
+
+export const CreditCardFormFlexbox: React.FC<CreditCardFormProps> = ({
+  ConfirmationButton,
+  onFailedSubmit,
+  onSuccessfulSubmit,
+  onValidSubmit,
+  ...props
+}) => {
+  const { formGroup } = useFormGroupWithCreditCardInput(true)
+
+  const handleConfirmPayment = async () => {
+    if (!formGroup) {
+      console.error('formGroup is not defined')
+      return
+    }
+
+    formGroup.validateFields()
+
+    const errorSummary = formGroup.errorSummary
+
+    if (errorSummary.invalidFields.length > 0) {
+      onFailedSubmit?.(errorSummary)
+    }
+
+    if (errorSummary.invalidFields.length > 0) return
+
+    const formOutput = validateCreditCardInputs(formGroup.values)
+
+    await onValidSubmit?.(formOutput)
+
+    onSuccessfulSubmit?.()
+  }
+
+  return (
+    <FlexCol sx={{ flexDirection: { md: 'row', xs: 'column' } }} width={'100%'} gap={2} {...props}>
+      <Stack flexDirection={'column'} sx={{ width: '100%' }} gap={2}>
+        <InputFieldsStack />
+        {ConfirmationButton ?
+          <ConfirmationButton onClick={handleConfirmPayment} variant="contained" sx={{ alignSelf: 'end' }}>
+            Confirm Payment
+          </ConfirmationButton>
+        : null}
+      </Stack>
+    </FlexCol>
+  )
+}
+
+export const CreditCardFormFlexboxWithFormGroupProvider: React.FC<CreditCardFormProps> = (props) => {
+  const [params, error] = useFormStorage()
+  return (
+    <FormGroupCreditCardProvider params={params}>
+      <ErrorRender error={error} />
+      <CreditCardFormFlexbox {...props} />
+    </FormGroupCreditCardProvider>
+  )
+}

package/src/components/form/InputFieldsStack.tsx

@@ -0,0 +1,42 @@
+import { Stack, StackProps } from '@mui/material'
+import { PropsWithChildren } from 'react'
+
+import {
+  CreditCardCvvWithFormControl,
+  CreditCardEmailWithFormControl,
+  CreditCardExpirationWithFormControl,
+  CreditCardNumberWithFormControl,
+  CreditCardZipWithFormControl,
+  NameWithFormControl,
+} from '../controls/index.js'
+
+export interface InputFieldsStackProps extends StackProps, PropsWithChildren {}
+
+export const InputFieldsStack: React.FC<InputFieldsStackProps> = (props) => {
+  const { sx } = props
+  return (
+    <>
+      <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>
+        <NameWithFormControl autoCompleteLabel="given-name" fieldLabel={'First'} formControlName={'firstName'} placeholder="Jerry" />
+        <NameWithFormControl autoCompleteLabel="family-name" fieldLabel={'Last'} formControlName={'lastName'} placeholder="Smith" />
+      </Stack>
+      <Stack gap={2} sx={{ flexDirection: { lg: 'row', xs: 'column' }, ...sx }} {...props}>
+        <Stack width={{ lg: '50%', xs: '100%' }}>
+          <CreditCardNumberWithFormControl />
+        </Stack>
+        <Stack direction={{ lg: 'row', xs: 'column' }} gap={2} width={{ lg: '50%', xs: '100%' }}>
+          <CreditCardCvvWithFormControl />
+          <CreditCardExpirationWithFormControl />
+        </Stack>
+      </Stack>
+      <Stack gap={2} sx={{ flexDirection: { md: 'row', xs: 'column' }, ...sx }} {...props}>
+        <Stack width={{ md: '25%', xs: '100%' }}>
+          <CreditCardZipWithFormControl />
+        </Stack>
+        <Stack width={{ md: '75%', xs: '100%' }}>
+          <CreditCardEmailWithFormControl />
+        </Stack>
+      </Stack>
+    </>
+  )
+}

package/src/components/form/Props.ts

@@ -0,0 +1,13 @@
+import { ButtonProps } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { ErrorSummary } from '@xyo-network/react-form-group'
+import { ComponentType } from 'react'
+
+import { CreditCardInput } from '../../models/index.js'
+
+export interface CreditCardFormProps extends FlexBoxProps {
+  ConfirmationButton?: ComponentType<ButtonProps>
+  onFailedSubmit?: (errorSummary: ErrorSummary) => void
+  onSuccessfulSubmit?: () => void
+  onValidSubmit?: (values: CreditCardInput) => Promise<void>
+}

package/src/components/form/index.ts

@@ -0,0 +1 @@
+export * from './Form.js'

package/src/components/form/useFormStorage.tsx

@@ -0,0 +1,31 @@
+import { usePromise } from '@xylabs/react-promise'
+import { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'
+import { ArchivistFormGroupStorage, FormGroupParams } from '@xyo-network/react-form-group'
+
+import { CreditCardInput } from '../../models/index.js'
+
+const StorageNameSpace = 'credit-card-fields'
+
+const calculateTTL = (months = 6) => {
+  const MS_PER_DAY = 24 * 60 * 60 * 1000
+  const DAYS_PER_MONTH = 30.44
+  return months * DAYS_PER_MONTH * MS_PER_DAY
+}
+
+export const useFormStorage = () => {
+  return usePromise(async () => {
+    const localStorageArchivist = await StorageArchivist.create({
+      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'local' },
+    })
+    const sessionStorageArchivist = await StorageArchivist.create({
+      config: { namespace: StorageNameSpace, schema: StorageArchivistConfigSchema, type: 'session' },
+    })
+
+    const storage = {
+      sensitive: new ArchivistFormGroupStorage(sessionStorageArchivist),
+      storage: new ArchivistFormGroupStorage(localStorageArchivist),
+    }
+
+    return { serialize: true, storage, ttlStorage: calculateTTL() } as FormGroupParams<CreditCardInput>
+  }, [])
+}

package/src/components/img/american-express.svg

@@ -0,0 +1,69 @@
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#306FC5;" d="M512,402.281c0,16.716-13.55,30.267-30.265,30.267H30.265C13.55,432.549,0,418.997,0,402.281V109.717
+	c0-16.715,13.55-30.266,30.265-30.266h451.47c16.716,0,30.265,13.551,30.265,30.266V402.281L512,402.281z"/>
+<path style="opacity:0.15;fill:#202121;enable-background:new    ;" d="M21.517,402.281V109.717
+	c0-16.715,13.552-30.266,30.267-30.266h-21.52C13.55,79.451,0,93.001,0,109.717v292.565c0,16.716,13.55,30.267,30.265,30.267h21.52
+	C35.07,432.549,21.517,418.997,21.517,402.281z"/>
+<g>
+	<polygon style="fill:#FFFFFF;" points="74.59,220.748 89.888,220.748 82.241,201.278 	"/>
+	<polygon style="fill:#FFFFFF;" points="155.946,286.107 155.946,295.148 181.675,295.148 181.675,304.885 155.946,304.885 
+		155.946,315.318 184.455,315.318 197.666,300.712 185.151,286.107 	"/>
+	<polygon style="fill:#FFFFFF;" points="356.898,201.278 348.553,220.748 364.548,220.748 	"/>
+	<polygon style="fill:#FFFFFF;" points="230.348,320.875 230.348,281.241 212.268,300.712 	"/>
+	<path style="fill:#FFFFFF;" d="M264.42,292.368c-0.696-4.172-3.48-6.261-7.654-6.261h-14.599v12.516h15.299
+		C261.637,298.624,264.42,296.539,264.42,292.368z"/>
+	<path style="fill:#FFFFFF;" d="M313.09,297.236c1.391-0.697,2.089-2.785,2.089-4.867c0.696-2.779-0.698-4.172-2.089-4.868
+		c-1.387-0.696-3.476-0.696-5.559-0.696h-13.91v11.127h13.909C309.613,297.932,311.702,297.932,313.09,297.236z"/>
+	<path style="fill:#FFFFFF;" d="M413.217,183.198v8.344l-4.169-8.344H376.37v8.344l-4.174-8.344h-44.502
+		c-7.648,0-13.909,1.392-19.469,4.173v-4.173h-31.289v0.696v3.477c-3.476-2.78-7.648-4.173-13.211-4.173h-111.95l-7.652,17.384
+		l-7.647-17.384h-25.031h-10.431v8.344l-3.477-8.344h-0.696H66.942l-13.909,32.68L37.042,251.34l-0.294,0.697h0.294h35.463h0.444
+		l0.252-0.697l4.174-10.428h9.039l4.172,11.125h40.326v-0.697v-7.647l3.479,8.343h20.163l3.475-8.343v7.647v0.697h15.993h79.965
+		h0.696v-18.08h1.394c1.389,0,1.389,0,1.389,2.087v15.297h50.065v-4.172c4.172,2.089,10.426,4.172,18.771,4.172h20.863l4.172-11.123
+		h9.732l4.172,11.123h40.328v-6.952v-3.476l6.261,10.428h1.387h0.698h30.595v-68.143h-31.291l0,0H413.217z M177.501,241.609h-6.955
+		h-4.171v-4.169v-34.076l-0.696,1.595v-0.019l-16.176,36.669h-0.512h-3.719h-6.017l-16.687-38.245v38.245h-23.64l-4.867-10.43
+		H70.417l-4.868,10.43H53.326l20.57-48.675h17.382l19.469,46.587v-46.587h4.171h14.251l0.328,0.697h0.024l8.773,19.094l6.3,14.306
+		l0.223-0.721l13.906-33.375H177.5v48.674H177.501L177.501,241.609z M225.481,203.364h-27.119v9.039h26.423v9.734h-26.423v9.738
+		h27.119v10.427h-38.939v-49.367h38.939V203.364L225.481,203.364z M275.076,221.294c0.018,0.016,0.041,0.027,0.063,0.042
+		c0.263,0.278,0.488,0.557,0.68,0.824c1.332,1.746,2.409,4.343,2.463,8.151c0.004,0.066,0.007,0.131,0.011,0.197
+		c0,0.038,0.007,0.071,0.007,0.11c0,0.022-0.002,0.039-0.002,0.06c0.016,0.383,0.026,0.774,0.026,1.197v9.735h-10.428v-5.565
+		c0-2.781,0-6.954-2.089-9.735c-0.657-0.657-1.322-1.09-2.046-1.398c-1.042-0.675-3.017-0.686-6.295-0.686h-12.52v17.384h-11.818
+		v-48.675h26.425c6.254,0,10.428,0,13.906,2.086c3.407,2.046,5.465,5.439,5.543,10.812c-0.161,7.4-4.911,11.46-8.326,12.829
+		C270.676,218.662,272.996,219.129,275.076,221.294z M298.491,241.609h-11.822v-48.675h11.822V241.609z M434.083,241.609h-15.3
+		l-22.25-36.855v30.595l-0.073-0.072v6.362h-11.747v-0.029h-11.822l-4.172-10.43H344.38l-4.172,11.123h-13.211
+		c-5.559,0-12.517-1.389-16.687-5.561c-4.172-4.172-6.256-9.735-6.256-18.773c0-6.953,1.389-13.911,6.256-19.472
+		c3.474-4.175,9.735-5.562,17.382-5.562h11.128v10.429h-11.128c-4.172,0-6.254,0.693-9.041,2.783
+		c-2.082,2.085-3.474,6.256-3.474,11.123c0,5.564,0.696,9.04,3.474,11.821c2.091,2.089,4.87,2.785,8.346,2.785h4.867l15.991-38.243
+		h6.957h10.428l19.472,46.587v-2.376v-15.705v-1.389v-27.116h17.382l20.161,34.07v-34.07h11.826v47.977h0.002L434.083,241.609
+		L434.083,241.609z"/>
+	<path style="fill:#FFFFFF;" d="M265.161,213.207c0.203-0.217,0.387-0.463,0.543-0.745c0.63-0.997,1.352-2.793,0.963-5.244
+		c-0.016-0.225-0.057-0.433-0.105-0.634c-0.013-0.056-0.011-0.105-0.026-0.161l-0.007,0.001c-0.346-1.191-1.229-1.923-2.11-2.367
+		c-1.394-0.693-3.48-0.693-5.565-0.693h-13.909v11.127h13.909c2.085,0,4.172,0,5.565-0.697c0.209-0.106,0.395-0.25,0.574-0.413
+		l0.002,0.009C264.996,213.389,265.067,213.315,265.161,213.207z"/>
+	<path style="fill:#FFFFFF;" d="M475.105,311.144c0-4.867-1.389-9.736-3.474-13.212v-31.289h-0.032v-2.089c0,0-29.145,0-33.483,0
+		c-4.336,0-9.598,4.171-9.598,4.171v-4.171h-31.984c-4.87,0-11.124,1.392-13.909,4.171v-4.171h-57.016v2.089v2.081
+		c-4.169-3.474-11.824-4.171-15.298-4.171h-37.549v2.089v2.081c-3.476-3.474-11.824-4.171-15.998-4.171H215.05l-9.737,10.431
+		l-9.04-10.431h-2.911h-4.737h-54.93v2.089v5.493v62.651h61.19l10.054-10.057l8.715,10.057h0.698h35.258h1.598h0.696h0.692v-6.953
+		v-9.039h3.479c4.863,0,11.124,0,15.991-2.089v17.382v1.394h31.291v-1.394V317.4h1.387c2.089,0,2.089,0,2.089,2.086v14.6v1.394
+		h94.563c6.263,0,12.517-1.394,15.993-4.175v2.781v1.394h29.902c6.254,0,12.517-0.695,16.689-3.478
+		c6.402-3.841,10.437-10.64,11.037-18.749c0.028-0.24,0.063-0.48,0.085-0.721l-0.041-0.039
+		C475.087,312.043,475.105,311.598,475.105,311.144z M256.076,306.973h-13.91v2.081v4.174v4.173v7.649h-22.855l-13.302-15.299
+		l-0.046,0.051l-0.65-0.748l-15.297,15.996h-44.501v-48.673h45.197l12.348,13.525l2.596,2.832l0.352-0.365l14.604-15.991h36.852
+		c7.152,0,15.161,1.765,18.196,9.042c0.365,1.441,0.577,3.043,0.577,4.863C276.237,304.189,266.502,306.973,256.076,306.973z
+		 M325.609,306.276c1.389,2.081,2.085,4.867,2.085,9.041v9.732h-11.819v-6.256c0-2.786,0-7.65-2.089-9.739
+		c-1.387-2.081-4.172-2.081-8.341-2.081H292.93v18.077h-11.82v-49.369h26.421c5.559,0,10.426,0,13.909,2.084
+		c3.474,2.088,6.254,5.565,6.254,11.128c0,7.647-4.865,11.819-8.343,13.212C322.829,303.49,324.914,304.885,325.609,306.276z
+		 M373.589,286.107h-27.122v9.04h26.424v9.737h-26.424v9.736h27.122v10.429H334.65V275.68h38.939V286.107z M402.791,325.05h-22.252
+		v-10.429h22.252c2.082,0,3.476,0,4.87-1.392c0.696-0.697,1.387-2.085,1.387-3.477c0-1.394-0.691-2.778-1.387-3.475
+		c-0.698-0.695-2.091-1.391-4.176-1.391c-11.126-0.696-24.337,0-24.337-15.296c0-6.954,4.172-14.604,16.689-14.604h22.945v11.819
+		h-21.554c-2.085,0-3.478,0-4.87,0.696c-1.387,0.697-1.387,2.089-1.387,3.478c0,2.087,1.387,2.783,2.778,3.473
+		c1.394,0.697,2.783,0.697,4.172,0.697h6.259c6.259,0,10.43,1.391,13.211,4.173c2.087,2.087,3.478,5.564,3.478,10.43
+		C420.869,320.179,414.611,325.05,402.791,325.05z M462.59,320.179c-2.778,2.785-7.648,4.871-14.604,4.871H425.74v-10.429h22.245
+		c2.087,0,3.481,0,4.87-1.392c0.693-0.697,1.391-2.085,1.391-3.477c0-1.394-0.698-2.778-1.391-3.475
+		c-0.696-0.695-2.085-1.391-4.172-1.391c-11.122-0.696-24.337,0-24.337-15.295c0-6.609,3.781-12.579,13.106-14.352
+		c1.115-0.154,2.293-0.253,3.583-0.253h22.948v11.819h-15.3h-5.561h-0.696c-2.087,0-3.476,0-4.865,0.696
+		c-0.7,0.697-1.396,2.089-1.396,3.478c0,2.087,0.696,2.783,2.785,3.473c1.389,0.697,2.78,0.697,4.172,0.697h0.691h5.565
+		c3.039,0,5.337,0.375,7.44,1.114c1.926,0.697,8.302,3.549,9.728,10.994c0.124,0.78,0.215,1.594,0.215,2.495
+		C466.761,313.925,465.37,317.401,462.59,320.179z"/>
+</g>
+</svg>

package/src/components/img/discover.svg

@@ -0,0 +1,13 @@
+<svg width="800px" height="800px" viewBox="0 -140 780 780" xmlns="http://www.w3.org/2000/svg">
+
+<g fill-rule="evenodd">
+
+<path d="M54.992 0C24.627 0 0 24.63 0 55.004v390.992C0 476.376 24.619 501 54.992 501h670.016C755.373 501 780 476.37 780 445.996V55.004C780 24.624 755.381 0 725.008 0H54.992z" fill="#4D4D4D"/>
+
+<path d="M327.152 161.893c8.837 0 16.248 1.784 25.268 6.09v22.751c-8.544-7.863-15.955-11.154-25.756-11.154-19.264 0-34.414 15.015-34.414 34.05 0 20.075 14.681 34.196 35.37 34.196 9.312 0 16.586-3.12 24.8-10.857v22.763c-9.341 4.14-16.911 5.776-25.756 5.776-31.278 0-55.582-22.596-55.582-51.737 0-28.826 24.951-51.878 56.07-51.878zm-97.113.627c11.546 0 22.11 3.72 30.943 10.994l-10.748 13.248c-5.35-5.646-10.41-8.028-16.564-8.028-8.853 0-15.3 4.745-15.3 10.989 0 5.354 3.619 8.188 15.944 12.482 23.365 8.044 30.29 15.176 30.29 30.926 0 19.193-14.976 32.553-36.32 32.553-15.63 0-26.994-5.795-36.458-18.872l13.268-12.03c4.73 8.61 12.622 13.222 22.42 13.222 9.163 0 15.947-5.952 15.947-13.984 0-4.164-2.055-7.734-6.158-10.258-2.066-1.195-6.158-2.977-14.2-5.647-19.291-6.538-25.91-13.527-25.91-27.185 0-16.225 14.214-28.41 32.846-28.41zm234.723 1.728h22.437l28.084 66.592 28.446-66.592h22.267l-45.494 101.686h-11.053l-44.687-101.686zm-397.348.152h30.15c33.312 0 56.534 20.382 56.534 49.641 0 14.59-7.104 28.696-19.118 38.057-10.108 7.901-21.626 11.445-37.574 11.445H67.414V164.4zm96.135 0h20.54v99.143h-20.54V164.4zm411.734 0h58.252v16.8H595.81v22.005h36.336v16.791h-36.336v26.762h37.726v16.785h-58.252V164.4zm71.858 0h30.455c23.69 0 37.265 10.71 37.265 29.272 0 15.18-8.514 25.14-23.986 28.105l33.148 41.766h-25.26l-28.429-39.828h-2.678v39.828h-20.515V164.4zm20.515 15.616v30.025h6.002c13.117 0 20.069-5.362 20.069-15.328 0-9.648-6.954-14.697-19.745-14.697h-6.326zM87.94 181.199v65.559h5.512c13.273 0 21.656-2.394 28.11-7.88 7.103-5.955 11.376-15.465 11.376-24.98 0-9.499-4.273-18.725-11.376-24.681-6.785-5.78-14.837-8.018-28.11-8.018H87.94z" fill="#FFF"/>
+
+<path d="m415.13 161.21c30.941 0 56.022 23.58 56.022 52.709v0.033c0 29.13-25.081 52.742-56.021 52.742s-56.022-23.613-56.022-52.742v-0.033c0-29.13 25.082-52.71 56.022-52.71zm364.85 127.15c-26.05 18.33-221.08 149.34-558.75 212.62h503.76c30.365 0 54.992-24.63 54.992-55.004v-157.62z" fill="#F47216"/>
+
+</g>
+
+</svg>

package/src/components/img/index.ts

@@ -0,0 +1,4 @@
+export { default as AmexIcon } from './american-express.svg'
+export { default as DiscoverIcon } from './discover.svg'
+export { default as MastercardIcon } from './mastercard.svg'
+export { default as VisaIcon } from './visa.svg'

package/src/components/img/mastercard.svg

@@ -0,0 +1,16 @@
+<svg width="800px" height="800px" viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M46.5392504,198.011312 L46.5392504,184.839826 C46.5392504,179.790757 43.4659038,176.497885 38.1973096,176.497885 C35.5630125,176.497885 32.7091906,177.375984 30.7334678,180.229806 C29.1967945,177.815034 27.0015469,176.497885 23.7086756,176.497885 C21.513428,176.497885 19.3181804,177.15646 17.5619824,179.571233 L17.5619824,176.936935 L12.9519625,176.936935 L12.9519625,198.011312 L17.5619824,198.011312 L17.5619824,186.3765 C17.5619824,182.644579 19.5377052,180.888381 22.6110518,180.888381 C25.6843984,180.888381 27.2210717,182.864103 27.2210717,186.3765 L27.2210717,198.011312 L31.8310916,198.011312 L31.8310916,186.3765 C31.8310916,182.644579 34.0263392,180.888381 36.880161,180.888381 C39.9535076,180.888381 41.490181,182.864103 41.490181,186.3765 L41.490181,198.011312 L46.5392504,198.011312 L46.5392504,198.011312 Z M114.81145,176.936935 L107.347608,176.936935 L107.347608,170.570717 L102.737589,170.570717 L102.737589,176.936935 L98.566618,176.936935 L98.566618,181.107905 L102.737589,181.107905 L102.737589,190.766995 C102.737589,195.59654 104.713311,198.450362 109.981906,198.450362 C111.957628,198.450362 114.152876,197.791787 115.689549,196.913688 L114.372401,192.962243 C113.055252,193.840341 111.518579,194.059866 110.420955,194.059866 C108.225708,194.059866 107.347608,192.742718 107.347608,190.54747 L107.347608,181.107905 L114.81145,181.107905 L114.81145,176.936935 L114.81145,176.936935 Z M153.886857,176.497885 C151.25256,176.497885 149.496362,177.815034 148.398738,179.571233 L148.398738,176.936935 L143.788718,176.936935 L143.788718,198.011312 L148.398738,198.011312 L148.398738,186.156975 C148.398738,182.644579 149.935411,180.668856 152.789233,180.668856 C153.667332,180.668856 154.764956,180.888381 155.643055,181.107905 L156.960204,176.71741 C156.082105,176.497885 154.764956,176.497885 153.886857,176.497885 L153.886857,176.497885 L153.886857,176.497885 Z M94.834697,178.693133 C92.6394495,177.15646 89.566103,176.497885 86.2732315,176.497885 C81.0046375,176.497885 77.492241,179.132183 77.492241,183.303153 C77.492241,186.81555 80.1265385,188.791272 84.736558,189.449847 L86.931806,189.669371 C89.346578,190.10842 90.6637265,190.766995 90.6637265,191.864619 C90.6637265,193.401292 88.9075285,194.498916 85.834182,194.498916 C82.7608355,194.498916 80.346063,193.401292 78.8093895,192.303668 L76.614142,195.816065 C79.0289145,197.572262 82.321786,198.450362 85.614657,198.450362 C91.7613505,198.450362 95.2737465,195.59654 95.2737465,191.645094 C95.2737465,187.913173 92.4199245,185.937451 88.0294295,185.278876 L85.834182,185.059351 C83.858459,184.839826 82.321786,184.400777 82.321786,183.083629 C82.321786,181.546955 83.858459,180.668856 86.2732315,180.668856 C88.9075285,180.668856 91.5418255,181.76648 92.858974,182.425054 L94.834697,178.693133 L94.834697,178.693133 Z M217.329512,176.497885 C214.695215,176.497885 212.939017,177.815034 211.841393,179.571233 L211.841393,176.936935 L207.231373,176.936935 L207.231373,198.011312 L211.841393,198.011312 L211.841393,186.156975 C211.841393,182.644579 213.378066,180.668856 216.231888,180.668856 C217.109987,180.668856 218.207611,180.888381 219.08571,181.107905 L220.402859,176.71741 C219.52476,176.497885 218.207611,176.497885 217.329512,176.497885 L217.329512,176.497885 L217.329512,176.497885 Z M158.496877,187.474123 C158.496877,193.840341 162.887372,198.450362 169.69264,198.450362 C172.765986,198.450362 174.961234,197.791787 177.156481,196.035589 L174.961234,192.303668 C173.205036,193.620817 171.448838,194.279391 169.473115,194.279391 C165.741194,194.279391 163.106897,191.645094 163.106897,187.474123 C163.106897,183.522678 165.741194,180.888381 169.473115,180.668856 C171.448838,180.668856 173.205036,181.32743 174.961234,182.644579 L177.156481,178.912658 C174.961234,177.15646 172.765986,176.497885 169.69264,176.497885 C162.887372,176.497885 158.496877,181.107905 158.496877,187.474123 L158.496877,187.474123 L158.496877,187.474123 Z M201.08468,187.474123 L201.08468,176.936935 L196.47466,176.936935 L196.47466,179.571233 C194.937987,177.595509 192.742739,176.497885 189.888917,176.497885 C183.961749,176.497885 179.351729,181.107905 179.351729,187.474123 C179.351729,193.840341 183.961749,198.450362 189.888917,198.450362 C192.962264,198.450362 195.157512,197.352737 196.47466,195.377015 L196.47466,198.011312 L201.08468,198.011312 L201.08468,187.474123 Z M184.181274,187.474123 C184.181274,183.742202 186.596046,180.668856 190.547492,180.668856 C194.279413,180.668856 196.91371,183.522678 196.91371,187.474123 C196.91371,191.206044 194.279413,194.279391 190.547492,194.279391 C186.596046,194.059866 184.181274,191.206044 184.181274,187.474123 L184.181274,187.474123 Z M129.080559,176.497885 C122.933866,176.497885 118.543371,180.888381 118.543371,187.474123 C118.543371,194.059866 122.933866,198.450362 129.300084,198.450362 C132.373431,198.450362 135.446777,197.572262 137.861549,195.59654 L135.666302,192.303668 C133.910104,193.620817 131.714856,194.498916 129.519609,194.498916 C126.665787,194.498916 123.811965,193.181768 123.153391,189.449847 L138.739648,189.449847 L138.739648,187.693648 C138.959173,180.888381 135.007727,176.497885 129.080559,176.497885 L129.080559,176.497885 L129.080559,176.497885 Z M129.080559,180.449331 C131.934381,180.449331 133.910104,182.20553 134.349153,185.498401 L123.372916,185.498401 C123.811965,182.644579 125.787688,180.449331 129.080559,180.449331 L129.080559,180.449331 Z M243.452958,187.474123 L243.452958,168.594995 L238.842938,168.594995 L238.842938,179.571233 C237.306265,177.595509 235.111017,176.497885 232.257196,176.497885 C226.330027,176.497885 221.720007,181.107905 221.720007,187.474123 C221.720007,193.840341 226.330027,198.450362 232.257196,198.450362 C235.330542,198.450362 237.52579,197.352737 238.842938,195.377015 L238.842938,198.011312 L243.452958,198.011312 L243.452958,187.474123 Z M226.549552,187.474123 C226.549552,183.742202 228.964324,180.668856 232.91577,180.668856 C236.647691,180.668856 239.281988,183.522678 239.281988,187.474123 C239.281988,191.206044 236.647691,194.279391 232.91577,194.279391 C228.964324,194.059866 226.549552,191.206044 226.549552,187.474123 L226.549552,187.474123 Z M72.443172,187.474123 L72.443172,176.936935 L67.833152,176.936935 L67.833152,179.571233 C66.2964785,177.595509 64.101231,176.497885 61.247409,176.497885 C55.3202405,176.497885 50.7102205,181.107905 50.7102205,187.474123 C50.7102205,193.840341 55.3202405,198.450362 61.247409,198.450362 C64.3207555,198.450362 66.5160035,197.352737 67.833152,195.377015 L67.833152,198.011312 L72.443172,198.011312 L72.443172,187.474123 Z M55.3202405,187.474123 C55.3202405,183.742202 57.735013,180.668856 61.6864585,180.668856 C65.4183795,180.668856 68.0526765,183.522678 68.0526765,187.474123 C68.0526765,191.206044 65.4183795,194.279391 61.6864585,194.279391 C57.735013,194.059866 55.3202405,191.206044 55.3202405,187.474123 Z" fill="#000000">
+
+</path>
+		<rect fill="#FF5F00" x="93.2980455" y="16.9034088" width="69.1502985" height="124.251009">
+
+</rect>
+		<path d="M97.688519,79.0288935 C97.688519,53.783546 109.542856,31.3920209 127.763411,16.9033869 C114.3724,6.3661985 97.468994,-1.94737475e-05 79.0289145,-1.94737475e-05 C35.3434877,-1.94737475e-05 1.7258174e-06,35.3434665 1.7258174e-06,79.0288935 C1.7258174e-06,122.71432 35.3434877,158.057806 79.0289145,158.057806 C97.468994,158.057806 114.3724,151.691588 127.763411,141.1544 C109.542856,126.88529 97.688519,104.274241 97.688519,79.0288935 Z" fill="#EB001B">
+
+</path>
+		<path d="M255.746345,79.0288935 C255.746345,122.71432 220.402859,158.057806 176.717432,158.057806 C158.277352,158.057806 141.373945,151.691588 127.982936,141.1544 C146.423015,126.665766 158.057827,104.274241 158.057827,79.0288935 C158.057827,53.783546 146.20349,31.3920209 127.982936,16.9033869 C141.373945,6.3661985 158.277352,-1.94737475e-05 176.717432,-1.94737475e-05 C220.402859,-1.94737475e-05 255.746345,35.5629913 255.746345,79.0288935 Z" fill="#F79E1B">
+
+</path>
+	</g>
+</svg>

package/src/components/img/visa.svg

@@ -0,0 +1 @@
+<svg width="800px" height="800px" viewBox="0 -140 780 780" enable-background="new 0 0 780 500" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M40,0h700c22.092,0,40,17.909,40,40v420c0,22.092-17.908,40-40,40H40c-22.091,0-40-17.908-40-40V40   C0,17.909,17.909,0,40,0z" fill="#0E4595"/><path d="m293.2 348.73l33.361-195.76h53.36l-33.385 195.76h-53.336zm246.11-191.54c-10.57-3.966-27.137-8.222-47.822-8.222-52.725 0-89.865 26.55-90.18 64.603-0.299 28.13 26.514 43.822 46.752 53.186 20.771 9.595 27.752 15.714 27.654 24.283-0.131 13.121-16.586 19.116-31.922 19.116-21.357 0-32.703-2.967-50.227-10.276l-6.876-3.11-7.489 43.823c12.463 5.464 35.51 10.198 59.438 10.443 56.09 0 92.5-26.246 92.916-66.882 0.199-22.269-14.016-39.216-44.801-53.188-18.65-9.055-30.072-15.099-29.951-24.268 0-8.137 9.668-16.839 30.557-16.839 17.449-0.27 30.09 3.535 39.938 7.5l4.781 2.26 7.232-42.429m137.31-4.223h-41.232c-12.773 0-22.332 3.487-27.941 16.234l-79.244 179.4h56.031s9.16-24.123 11.232-29.418c6.125 0 60.555 0.084 68.338 0.084 1.596 6.853 6.49 29.334 6.49 29.334h49.514l-43.188-195.64zm-65.418 126.41c4.412-11.279 21.26-54.723 21.26-54.723-0.316 0.522 4.379-11.334 7.074-18.684l3.605 16.879s10.219 46.729 12.354 56.528h-44.293zm-363.3-126.41l-52.24 133.5-5.567-27.13c-9.725-31.273-40.025-65.155-73.898-82.118l47.766 171.2 56.456-0.064 84.004-195.39h-56.521" fill="#ffffff"/><path d="m146.92 152.96h-86.041l-0.681 4.073c66.938 16.204 111.23 55.363 129.62 102.41l-18.71-89.96c-3.23-12.395-12.597-16.094-24.186-16.527" fill="#F2AE14"/></svg>

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './controls/index.js'
+export * from './form/index.js'
+export * from './img/index.js'
+export * from './support/index.js'

package/src/components/support/Fields.ts

@@ -0,0 +1,3 @@
+export const NameFields = ['firstName', 'lastName'] as const
+export const NameLabels = ['First', 'Last'] as const
+export type NameLabel = (typeof NameLabels)[number]

package/src/components/support/InputError.ts

@@ -0,0 +1,4 @@
+export type InputError = {
+  errorMessage: string
+  invalidFields: string[]
+}

package/src/components/support/index.ts

@@ -0,0 +1,3 @@
+export * from './Fields.js'
+export * from './InputError.js'
+export * from './validateCreditCardInputs.js'

package/src/components/support/validateCreditCardInputs.ts

@@ -0,0 +1,17 @@
+import { assertEx } from '@xylabs/assert'
+
+import { CreditCardInput, CreditCardInputSchema } from '../../models/index.js'
+
+export const validateCreditCardInputs = (values: CreditCardInput): CreditCardInput => {
+  return {
+    cardNumber: assertEx(values.cardNumber, () => 'card number is not a string') as string,
+    cvc: assertEx(values.cvc, () => 'card cvc is not a string') as string,
+    emailAddress: assertEx(values.emailAddress, () => 'email is not a string') as string,
+    expiration: assertEx(values.expiration, () => 'card expiration is not a string') as string,
+    firstName: assertEx(values.firstName, () => 'first name is not a string') as string,
+    lastName: assertEx(values.lastName, () => 'last name is not a string') as string,
+    schema: CreditCardInputSchema,
+    timestamp: assertEx(values.timestamp, () => 'timestamp is not a number') as number,
+    zip: assertEx(values.zip, () => 'zip is not a string') as string,
+  }
+}

package/src/context/FormGroupCreditCardContext.ts

@@ -0,0 +1,6 @@
+import { FormGroupContextWithPayloadState } from '@xyo-network/react-form-group'
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { CreditCardInput } from '../models/index.js'
+
+export const FormGroupCreditCardContext = createContextEx<FormGroupContextWithPayloadState<CreditCardInput, CreditCardInput>>()

package/src/context/FormGroupCreditCardProvider.tsx

@@ -0,0 +1,23 @@
+import { Payload } from '@xyo-network/payload-model'
+import { FormGroup, FormGroupParams } from '@xyo-network/react-form-group'
+import { PropsWithChildren, useMemo } from 'react'
+
+import { CreditCardInput } from '../models/CreditCardInput.js'
+import { FormGroupCreditCardContext } from './FormGroupCreditCardContext.js'
+
+export interface FormGroupCreditCardProviderProps<TStorage extends Payload = Payload> extends PropsWithChildren {
+  params?: FormGroupParams<TStorage>
+}
+
+export const FormGroupCreditCardProvider: React.FC<FormGroupCreditCardProviderProps<CreditCardInput>> = ({ children, params, ...props }) => {
+  const formGroup = useMemo(() => {
+    const formGroup = new FormGroup<CreditCardInput, CreditCardInput>(params)
+    return formGroup
+  }, [params])
+
+  return (
+    <FormGroupCreditCardContext.Provider value={{ formGroup, provided: true }} {...props}>
+      {children}
+    </FormGroupCreditCardContext.Provider>
+  )
+}

package/src/context/index.ts

@@ -0,0 +1,3 @@
+export * from './FormGroupCreditCardContext.js'
+export * from './FormGroupCreditCardProvider.jsx'
+export * from './useFormGroupWithCreditCard.jsx'

package/src/context/useFormGroupWithCreditCard.tsx

@@ -0,0 +1,7 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { FormGroupCreditCardContext } from './FormGroupCreditCardContext.js'
+
+export const useFormGroupWithCreditCardInput = (required = false) => {
+  return useContextEx(FormGroupCreditCardContext, 'FormGroupCreditCard', required)
+}