@pro-laico/create-atomic-payload 0.1.4

package/template/src/blocks/children/atomic/variants/button/variants/portal/dialog/component.tsx

@@ -0,0 +1,36 @@
+'use client'
+import React from 'react'
+import dynamic from 'next/dynamic'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useActionContext, usePortalActions, useToDa } from '@/hooks/frontEnd/useActions'
+
+const Root = dynamic(() => import('@base-ui-components/react/dialog').then((mod) => mod.Dialog.Root))
+const Trigger = dynamic(() => import('@base-ui-components/react/dialog').then((mod) => mod.Dialog.Trigger))
+const Popup = dynamic(() => import('@base-ui-components/react/dialog').then((mod) => mod.Dialog.Popup), { ssr: false })
+const Portal = dynamic(() => import('@base-ui-components/react/dialog').then((mod) => mod.Dialog.Portal), { ssr: false })
+const Backdrop = dynamic(() => import('@base-ui-components/react/dialog').then((mod) => mod.Dialog.Backdrop), { ssr: false })
+
+export const AtomicButtonPortalDialog: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { block, pt, triggerChildren, contentChildren, backdropChildren } = props
+  const { dialogPortal, defaultOpen, ...rp } = pt?.po?.di?.p || {}
+
+  const context = useActionContext()
+  const portal = usePortalActions({ block, defaultOpen: Boolean(defaultOpen), context })
+  const tda = useToDa({ attributers: block.triggerActions?.attributers, context })
+  const cda = useToDa({ attributers: block.contentActions?.attributers, context })
+
+  return (
+    <Root {...rp} {...portal}>
+      <Trigger {...pt?.t?.p} {...pt?.t?.da} {...tda}>
+        {triggerChildren}
+        {block?.screenReaderText && <span className="sr-only">{block?.screenReaderText}</span>}
+      </Trigger>
+      <Portal {...dialogPortal!}>
+        <Backdrop {...pt?.po?.b?.p}>{backdropChildren}</Backdrop>
+        <Popup {...pt?.c?.p} {...pt?.c?.da} {...cda}>
+          {contentChildren}
+        </Popup>
+      </Portal>
+    </Root>
+  )
+}

package/template/src/blocks/children/atomic/variants/button/variants/portal/dialog/settings.ts

@@ -0,0 +1,24 @@
+import type { GroupField } from 'payload'
+import { ModalField } from '@/fields/modal'
+import { DefaultOpenField } from '@/fields/defaultOpen'
+import { KeepMountedField } from '@/fields/keepMounted'
+
+//TODO: add starting and end styles to assist with animations
+export const DialogSettingsTab: GroupField = {
+  name: 'ds',
+  type: 'group',
+  label: 'Dialog Settings',
+  interfaceName: 'DialogSettings',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'button' && sd?.buttonType === 'portal' && sd?.portalType === 'dialog') },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        DefaultOpenField({ admin: { width: '25%' } }),
+        { name: 'dismissible', type: 'checkbox', admin: { width: '25%', description: 'If checked, the dialog will be dismissible.' } },
+        KeepMountedField({ admin: { width: '25%' } }),
+        ModalField({ admin: { width: '50%' } }),
+      ],
+    },
+  ],
+}

package/template/src/blocks/children/atomic/variants/button/variants/portal/popover/component.tsx

@@ -0,0 +1,41 @@
+'use client'
+import React from 'react'
+import dynamic from 'next/dynamic'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useActionContext, usePortalActions, useToDa } from '@/hooks/frontEnd/useActions'
+
+const Root = dynamic(() => import('@base-ui-components/react/popover').then((mod) => mod.Popover.Root))
+const Trigger = dynamic(() => import('@base-ui-components/react/popover').then((mod) => mod.Popover.Trigger))
+const Popup = dynamic(() => import('@base-ui-components/react/popover').then((mod) => mod.Popover.Popup), { ssr: false })
+const Arrow = dynamic(() => import('@base-ui-components/react/popover').then((mod) => mod.Popover.Arrow), { ssr: false })
+const Portal = dynamic(() => import('@base-ui-components/react/popover').then((mod) => mod.Popover.Portal), { ssr: false })
+const Backdrop = dynamic(() => import('@base-ui-components/react/popover').then((mod) => mod.Popover.Backdrop), { ssr: false })
+const Positioner = dynamic(() => import('@base-ui-components/react/popover').then((mod) => mod.Popover.Positioner), { ssr: false })
+
+export const AtomicButtonPortalPopover: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { block, pt, triggerChildren, contentChildren, backdropChildren } = props
+  const { hasArrow, popPortal, popPositioner, defaultOpen, ...rp } = pt?.po?.pop?.p || {}
+
+  const context = useActionContext()
+  const portal = usePortalActions({ block, defaultOpen: Boolean(defaultOpen), context })
+  const tda = useToDa({ attributers: block.triggerActions?.attributers, context })
+  const cda = useToDa({ attributers: block.contentActions?.attributers, context })
+
+  return (
+    <Root {...rp} {...portal}>
+      <Trigger {...pt?.t?.p} {...pt?.t?.da} {...tda}>
+        {triggerChildren}
+        {block?.screenReaderText && <span className="sr-only">{block?.screenReaderText}</span>}
+      </Trigger>
+      <Portal {...popPortal!}>
+        <Backdrop {...pt?.po?.b?.p}>{backdropChildren}</Backdrop>
+        <Positioner {...popPositioner!}>
+          {hasArrow! && <Arrow />}
+          <Popup {...pt?.c?.p} {...pt?.c?.da} {...cda}>
+            {contentChildren}
+          </Popup>
+        </Positioner>
+      </Portal>
+    </Root>
+  )
+}

package/template/src/blocks/children/atomic/variants/button/variants/portal/popover/settings.ts

@@ -0,0 +1,111 @@
+import type { GroupField } from 'payload'
+import { ModalField } from '@/fields/modal'
+import { DefaultOpenField } from '@/fields/defaultOpen'
+import { KeepMountedField } from '@/fields/keepMounted'
+
+const popd = {
+  side: 'The side of the portal.',
+  align: 'The alignment of the portal.',
+  sideOffset: 'The offset of the portal.',
+  alignOffset: 'The offset of the portal.',
+  arrowPadding: 'The padding in pixels for the arrow.',
+  positionMethod: 'Determines which CSS position property to use.',
+  sticky: 'If checked, the portal will be sticky to the top of the screen.',
+  trackAnchor: 'If checked, the portal will track the anchor of the parent element.',
+}
+
+export const PositionerSettingsField: GroupField = {
+  type: 'group',
+  admin: { hideGutter: true },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        { name: 'sticky', type: 'checkbox', admin: { description: popd.sticky, style: { maxWidth: '250px' } } },
+        { name: 'trackAnchor', type: 'checkbox', admin: { description: popd.trackAnchor, style: { maxWidth: '250px' } } },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'side',
+          type: 'select',
+          options: [
+            { label: 'Top', value: 'top' },
+            { label: 'Bottom', value: 'bottom' },
+            { label: 'Left', value: 'left' },
+            { label: 'Right', value: 'right' },
+          ],
+          admin: { width: '25%', description: popd.side },
+        },
+        { name: 'sideOffset', type: 'number', admin: { width: '25%', description: popd.sideOffset } },
+        {
+          name: 'align',
+          type: 'select',
+          options: [
+            { label: 'Center', value: 'center' },
+            { label: 'Start', value: 'start' },
+            { label: 'End', value: 'end' },
+          ],
+          admin: { width: '25%', description: popd.align },
+        },
+        { name: 'alignOffset', type: 'number', admin: { width: '25%', description: popd.alignOffset } },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'positionMethod',
+          type: 'select',
+          options: [
+            { label: 'Absolute', value: 'absolute' },
+            { label: 'Fixed', value: 'fixed' },
+          ],
+          admin: { width: '25%', description: popd.positionMethod },
+        },
+        { name: 'arrowPadding', type: 'number', admin: { width: '25%', description: popd.arrowPadding } },
+      ],
+    },
+  ],
+}
+
+const d = {
+  side: 'The side of the popover.',
+  modal: 'If checked, the popover will be a modal.',
+  hasArrow: 'If checked, the popover will have an arrow.',
+  openOnHover: 'If checked, the popover will open on hover.',
+  closeDelay: 'The delay in milliseconds before the popover closes.',
+  keepMounted: 'If checked, the popover will stay mounted when closed.',
+  delay: 'The delay in milliseconds before the popover opens. Useful to adjust when open on hover is true.',
+}
+
+//TODO: add starting and end styles to assist with animations
+export const PopoverSettingsTab: GroupField = {
+  type: 'group',
+  name: 'pops',
+  label: 'Popover Settings',
+  interfaceName: 'PopoverSettings',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'button' && sd?.buttonType === 'portal' && sd?.portalType === 'popover') },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        DefaultOpenField({ admin: { width: '25%' } }),
+        { name: 'openOnHover', type: 'checkbox', admin: { width: '25%', description: d.openOnHover } },
+        { name: 'hasArrow', type: 'checkbox', admin: { style: { maxWidth: '250px' }, description: d.hasArrow } },
+        KeepMountedField({ admin: { style: { maxWidth: '250px' } } }),
+        {
+          type: 'row',
+          fields: [
+            ModalField({ admin: { width: '50%' } }),
+            { name: 'delay', type: 'number', label: 'Open Delay', admin: { width: '25%', description: d.delay } },
+            { name: 'closeDelay', type: 'number', label: 'Close Delay', admin: { width: '25%', description: d.closeDelay } },
+          ],
+        },
+        PositionerSettingsField,
+      ],
+    },
+  ],
+}

package/template/src/blocks/children/atomic/variants/button/variants/regular/component.client.tsx

@@ -0,0 +1,19 @@
+'use client'
+import React from 'react'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useToDa, useButtonActions, useActionContext } from '@/hooks/frontEnd/useActions'
+
+export const AtomicButtonRegularClient: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { block, pt, triggerChildren } = props
+
+  const context = useActionContext()
+  const useButton = useButtonActions({ block, context })
+  const tda = useToDa({ attributers: block.triggerActions?.attributers, context })
+
+  return (
+    <button type="button" {...useButton} {...pt?.t?.p} {...pt?.t?.da} {...tda}>
+      {triggerChildren}
+      {block?.screenReaderText && <span className="sr-only">{block?.screenReaderText}</span>}
+    </button>
+  )
+}

package/template/src/blocks/children/atomic/variants/button/variants/regular/component.tsx

@@ -0,0 +1,11 @@
+'use server'
+import { AtomicChild, RenderChild } from '@/ts/types'
+
+export const AtomicButtonRegular: React.FC<RenderChild<AtomicChild>> = async ({ block, pt, triggerChildren }) => {
+  return (
+    <button type="button" {...pt?.t?.p} {...pt?.t?.da}>
+      {triggerChildren}
+      {block?.screenReaderText && <span className="sr-only">{block?.screenReaderText}</span>}
+    </button>
+  )
+}

package/template/src/blocks/children/atomic/variants/form/component.tsx

@@ -0,0 +1,18 @@
+'use client'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useForm, useToDa } from '@/hooks/frontEnd/useActions'
+import { FormContextProvider } from '@/components/providers/formProvider'
+
+export const AtomicForm: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { pt, contentChildren, block } = props
+
+  const { formRef, handleSubmit, handleReset, context } = useForm({ block })
+
+  const das = useToDa({ attributers: block.contentActions?.attributers, context })
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit} onReset={handleReset} {...pt?.c?.p} {...pt?.c?.da} {...das}>
+      <FormContextProvider {...context.fullFormContext}>{contentChildren}</FormContextProvider>
+    </form>
+  )
+}

package/template/src/blocks/children/atomic/variants/form/controlBar.ts

@@ -0,0 +1,22 @@
+import { TextField } from 'payload'
+import { APField } from '@/fields/apf'
+
+const backendFormField: TextField = APField({
+  type: 'text',
+  apf: ['form'],
+  name: 'backendForm',
+  required: true,
+  label: 'Backend Form To Use:',
+  admin: { condition: (_, sd) => Boolean(sd?.type === 'form'), width: '25%' },
+})
+
+const formNameField: TextField = APField({
+  type: 'text',
+  apf: ['form', 'actions'],
+  name: 'formName',
+  kebab: true,
+  required: true,
+  admin: { condition: (_, sd) => Boolean(sd?.type === 'form'), width: '25%' },
+})
+
+export const FormFields: [TextField, TextField] = [backendFormField, formNameField]

package/template/src/blocks/children/atomic/variants/form/settings.ts

@@ -0,0 +1,20 @@
+import { GroupField } from 'payload'
+import { APField } from '@/fields/apf'
+
+const d = {
+  lm: 'Forms Loading Message',
+  sm: 'Forms Default Success Message',
+  em: 'Forms Default Error Message',
+}
+
+export const FormSettingsTab: GroupField = {
+  type: 'group',
+  label: 'Form Settings',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'form') },
+  fields: [
+    APField({ type: 'checkbox', apf: ['form'], name: 'formToastEnabled', admin: { width: '25%' } }),
+    APField({ type: 'text', apf: ['form'], name: 'lm', label: 'Loading Message', admin: { description: d.lm, width: '25%' } }),
+    APField({ type: 'text', apf: ['form'], name: 'sm', label: 'Success Message', admin: { description: d.sm, width: '25%' } }),
+    APField({ type: 'text', apf: ['form'], name: 'em', label: 'Error Message', admin: { description: d.em, width: '25%' } }),
+  ],
+}

package/template/src/blocks/children/atomic/variants/input/autoCompleteOptions.ts

@@ -0,0 +1,51 @@
+const autocompleteOptions = [
+  { value: 'on', label: 'Enable Autocomplete' },
+  { value: 'off', label: 'Disable Autocomplete' },
+
+  // Personal info
+  { value: 'name', label: 'Full Name' },
+  { value: 'given-name', label: 'First/Given Name' },
+  { value: 'additional-name', label: 'Additional Name' },
+  { value: 'family-name', label: 'Family Name' },
+  { value: 'nickname', label: 'Nickname' },
+  { value: 'username', label: 'Username' },
+  { value: 'new-password', label: 'New Password' },
+  { value: 'current-password', label: 'Current Password' },
+  { value: 'one-time-code', label: 'One-time Code' },
+
+  // Contact info
+  { value: 'email', label: 'Email Address' },
+  { value: 'tel', label: 'Telephone' },
+  { value: 'tel-country-code', label: 'Telephone Country Code' },
+  { value: 'tel-national', label: 'Telephone National Number' },
+  { value: 'tel-area-code', label: 'Telephone Area Code' },
+  { value: 'tel-local', label: 'Telephone Local Number' },
+  { value: 'tel-extension', label: 'Telephone Extension' },
+  { value: 'impp', label: 'Instant Messaging Protocol' },
+
+  // Address
+  { value: 'street-address', label: 'Street Address' },
+  { value: 'address-line1', label: 'Address Line 1' },
+  { value: 'address-line2', label: 'Address Line 2' },
+  { value: 'address-line3', label: 'Address Line 3' },
+  { value: 'address-level1', label: 'Region (State/Province)' },
+  { value: 'address-level2', label: 'City' },
+  { value: 'address-level3', label: 'District / County' },
+  { value: 'address-level4', label: 'Neighborhood / Sub-locality' },
+  { value: 'country', label: 'Country Code' },
+  { value: 'country-name', label: 'Country Name' },
+  { value: 'postal-code', label: 'Postal / ZIP Code' },
+
+  // Other
+  { value: 'organization', label: 'Organization' },
+  { value: 'organization-title', label: 'Job Title' },
+  { value: 'url', label: 'URL / Homepage' },
+  { value: 'photo', label: 'Photo URL' },
+  { value: 'bday', label: 'Birthdate (YYYY-MM-DD)' },
+  { value: 'bday-day', label: 'Birth Day' },
+  { value: 'bday-month', label: 'Birth Month' },
+  { value: 'bday-year', label: 'Birth Year' },
+  { value: 'sex', label: 'Gender / Sex' },
+]
+
+export default autocompleteOptions

package/template/src/blocks/children/atomic/variants/input/controlBar.ts

@@ -0,0 +1,13 @@
+import { TextField } from 'payload'
+import { APField } from '@/fields/apf'
+
+const inputName: TextField = APField({
+  type: 'text',
+  apf: ['form', 'actions'],
+  name: 'inputName',
+  required: true,
+  kebab: true,
+  admin: { width: '25%', condition: (_, sd) => Boolean(sd?.type === 'input') },
+})
+
+export const InputControlBar: [TextField] = [inputName]

package/template/src/blocks/children/atomic/variants/input/settings.ts

@@ -0,0 +1,35 @@
+import { APField } from '@/fields/apf'
+import type { GroupField } from 'payload'
+import autocompleteOptions from './autoCompleteOptions'
+import { TextSettingsTab } from './variants/text/settings'
+import { RadioSettingsTab } from './variants/radio/settings'
+import { NumberSettingsTab } from './variants/number/settings'
+import { CheckboxSettingsTab } from './variants/checkBox/settings'
+import { AtomicInputTypes } from '@/ts/types/payload-types'
+
+const allowed: AtomicInputTypes[] = ['text', 'textarea', 'email', 'number']
+
+export const InputSettingsTab: GroupField = {
+  type: 'group',
+  label: 'Input Settings',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'input') },
+  fields: [
+    APField({
+      apf: ['form'],
+      type: 'select',
+      required: true,
+      name: 'autocomplete',
+      options: autocompleteOptions,
+      interfaceName: 'AutocompleteOptions',
+      admin: {
+        width: '25%',
+        condition: (_, sd) => Boolean(sd?.type === 'input' && allowed.includes(sd?.inputType)),
+        description: 'Determines what suggestions are shown by the browser for the input.',
+      },
+    }),
+    TextSettingsTab,
+    NumberSettingsTab,
+    CheckboxSettingsTab,
+    RadioSettingsTab,
+  ],
+}

package/template/src/blocks/children/atomic/variants/input/typeField.ts

@@ -0,0 +1,23 @@
+import { SelectField } from 'payload'
+import { APField } from '@/fields/apf'
+
+export const inputTypeOptions = [
+  { label: 'Text', value: 'text', type: 'string' },
+  { label: 'Textarea', value: 'textarea', type: 'string' },
+  { label: 'Email', value: 'email', type: 'string' },
+  { label: 'Number', value: 'number', type: 'number' },
+  { label: 'Checkbox', value: 'checkbox', type: 'boolean' },
+  { label: 'Radio', value: 'radio', type: 'boolean' },
+]
+
+export const inputTypeOptionsForFields = inputTypeOptions.map((inputType) => ({ label: inputType.label, value: inputType.value }))
+
+export const InputTypeField: SelectField = APField({
+  type: 'select',
+  apf: ['form', 'actions'],
+  name: 'inputType',
+  required: true,
+  interfaceName: 'AtomicInputTypes',
+  options: inputTypeOptionsForFields,
+  admin: { condition: (_, sd) => Boolean(sd?.type === 'input'), width: '25%' },
+})

package/template/src/blocks/children/atomic/variants/input/variants/checkBox/component.client.tsx

@@ -0,0 +1,12 @@
+'use client'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useActionContext, useToDa } from '@/hooks/frontEnd/useActions'
+
+export const CheckboxInputClient: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { pt, block } = props
+
+  const context = useActionContext()
+  const cda = useToDa({ attributers: block.contentActions?.attributers, context })
+
+  return <input {...pt?.c?.p} {...pt?.c?.da} {...cda} />
+}

package/template/src/blocks/children/atomic/variants/input/variants/checkBox/component.tsx

@@ -0,0 +1,6 @@
+'use server'
+import { AtomicChild, RenderChild } from '@/ts/types'
+
+export const CheckboxInput: React.FC<RenderChild<AtomicChild>> = async ({ pt }) => {
+  return <input {...pt?.c?.p} {...pt?.c?.da} />
+}

package/template/src/blocks/children/atomic/variants/input/variants/checkBox/settings.ts

@@ -0,0 +1,9 @@
+import { APField } from '@/fields/apf'
+import type { GroupField } from 'payload'
+
+export const CheckboxSettingsTab: GroupField = {
+  type: 'group',
+  label: 'Checkbox Settings',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'input' && sd?.inputType === 'checkbox') },
+  fields: [APField({ type: 'checkbox', apf: ['form'], name: 'checkboxDefault' })],
+}

package/template/src/blocks/children/atomic/variants/input/variants/number/component.client.tsx

@@ -0,0 +1,12 @@
+'use client'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useActionContext, useToDa } from '@/hooks/frontEnd/useActions'
+
+export const NumberInputClient: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { pt, block } = props
+
+  const context = useActionContext()
+  const cda = useToDa({ attributers: block.contentActions?.attributers, context })
+
+  return <input {...pt?.c?.p} {...pt?.c?.da} {...cda} />
+}

package/template/src/blocks/children/atomic/variants/input/variants/number/component.tsx

@@ -0,0 +1,6 @@
+'use server'
+import { AtomicChild, RenderChild } from '@/ts/types'
+
+export const NumberInput: React.FC<RenderChild<AtomicChild>> = async ({ pt }) => {
+  return <input {...pt?.c?.p} {...pt?.c?.da} />
+}

package/template/src/blocks/children/atomic/variants/input/variants/number/settings.ts

@@ -0,0 +1,9 @@
+import { APField } from '@/fields/apf'
+import type { GroupField } from 'payload'
+
+export const NumberSettingsTab: GroupField = {
+  type: 'group',
+  label: 'Number Settings',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'input' && sd?.inputType === 'number') },
+  fields: [APField({ type: 'text', apf: ['form'], name: 'numberPlaceholder' }), APField({ type: 'number', apf: ['form'], name: 'numberDefault' })],
+}

package/template/src/blocks/children/atomic/variants/input/variants/radio/component.client.tsx

@@ -0,0 +1,12 @@
+'use client'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useActionContext, useToDa } from '@/hooks/frontEnd/useActions'
+
+export const RadioInputClient: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { pt, block } = props
+
+  const context = useActionContext()
+  const cda = useToDa({ attributers: block.contentActions?.attributers, context })
+
+  return <input {...pt?.c?.p} {...pt?.c?.da} {...cda} />
+}

package/template/src/blocks/children/atomic/variants/input/variants/radio/component.tsx

@@ -0,0 +1,6 @@
+'use server'
+import { AtomicChild, RenderChild } from '@/ts/types'
+
+export const RadioInput: React.FC<RenderChild<AtomicChild>> = async ({ pt }) => {
+  return <input {...pt?.c?.p} {...pt?.c?.da} />
+}

package/template/src/blocks/children/atomic/variants/input/variants/radio/settings.ts

@@ -0,0 +1,9 @@
+import { APField } from '@/fields/apf'
+import type { GroupField } from 'payload'
+
+export const RadioSettingsTab: GroupField = {
+  type: 'group',
+  label: 'Radio Settings',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'input' && sd?.inputType === 'radio') },
+  fields: [APField({ type: 'checkbox', apf: ['form'], name: 'radioDefault' }), APField({ type: 'text', apf: ['form'], name: 'radioValue' })],
+}

package/template/src/blocks/children/atomic/variants/input/variants/text/component.client.tsx

@@ -0,0 +1,12 @@
+'use client'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useActionContext, useToDa } from '@/hooks/frontEnd/useActions'
+
+export const TextInputClient: React.FC<RenderChild<AtomicChild>> = ({ block, pt }) => {
+  const Tag = block.inputType === 'textarea' ? 'textarea' : 'input'
+
+  const context = useActionContext()
+  const cda = useToDa({ attributers: block.contentActions?.attributers, context })
+
+  return <Tag {...pt?.c?.p} {...pt?.c?.da} {...cda} />
+}

package/template/src/blocks/children/atomic/variants/input/variants/text/component.tsx

@@ -0,0 +1,7 @@
+'use server'
+import { AtomicChild, RenderChild } from '@/ts/types'
+
+export const TextInput: React.FC<RenderChild<AtomicChild>> = async ({ block, pt }) => {
+  const Tag = block.inputType === 'textarea' ? 'textarea' : 'input'
+  return <Tag {...pt?.c?.p} {...pt?.c?.da} />
+}

package/template/src/blocks/children/atomic/variants/input/variants/text/settings.ts

@@ -0,0 +1,12 @@
+import { APField } from '@/fields/apf'
+import type { GroupField } from 'payload'
+
+export const TextSettingsTab: GroupField = {
+  type: 'group',
+  label: 'Text Settings',
+  admin: {
+    hideGutter: true,
+    condition: (_, sd) => Boolean(sd?.type === 'input' && (sd?.inputType === 'text' || sd?.inputType === 'textarea' || sd?.inputType === 'email')),
+  },
+  fields: [APField({ type: 'textarea', apf: ['form'], name: 'textPlaceholder' }), APField({ type: 'textarea', apf: ['form'], name: 'textDefault' })],
+}

package/template/src/blocks/children/atomic/variants/tag/component.client.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { AtomicChild, RenderChild } from '@/ts/types'
+import { useActionContext, useToDa } from '@/hooks/frontEnd/useActions'
+
+export const AtomicTagClient: React.FC<RenderChild<AtomicChild>> = (props) => {
+  const { block, pt, contentChildren } = props
+
+  const context = useActionContext()
+  const cda = useToDa({ attributers: block.contentActions?.attributers, context })
+
+  if (block.tagType === 'fragment' || !block.tagType) return <>{contentChildren}</>
+  return (
+    <block.tagType {...pt?.c?.p} {...pt?.c?.da} {...cda}>
+      {contentChildren}
+    </block.tagType>
+  )
+}

package/template/src/blocks/children/atomic/variants/tag/component.tsx

@@ -0,0 +1,13 @@
+'use server'
+import { AtomicChild, RenderChild } from '@/ts/types'
+
+export const AtomicTag: React.FC<RenderChild<AtomicChild>> = async (props) => {
+  const { block, pt, contentChildren } = props
+
+  if (block.tagType === 'fragment' || !block.tagType) return <>{contentChildren}</>
+  return (
+    <block.tagType {...pt?.c?.p} {...pt?.c?.da}>
+      {contentChildren}
+    </block.tagType>
+  )
+}

package/template/src/blocks/children/atomic/variants/tag/controlBar.ts

@@ -0,0 +1,6 @@
+import { SelectField } from 'payload'
+import { TagTypeField } from '@/fields/tagType'
+
+const forField: SelectField = TagTypeField({ childBlock: 'AtomicChild', width: '25%', condition: (_, sd) => Boolean(sd?.type === 'tag') })
+
+export const TagControlBar: [SelectField] = [forField]

package/template/src/blocks/children/atomic/variants/tag/settings.ts

@@ -0,0 +1,9 @@
+import { ForField } from '@/fields/for'
+import type { GroupField } from 'payload'
+
+export const TagSettingsTab: GroupField = {
+  type: 'group',
+  label: 'Tag Settings',
+  admin: { hideGutter: true, condition: (_, sd) => Boolean(sd?.type === 'tag') },
+  fields: [ForField({ admin: { condition: (_, sd) => Boolean(sd?.tagType === 'label') } })],
+}

package/template/src/blocks/children/blocks.ts

@@ -0,0 +1,13 @@
+// DO NOT ADD ANYTHING OTHER THAN CHILD BLOCKS IN THIS FILE.
+// INCLUDING ANY FUNCTIONS OR UTILITIES.
+import { Icon } from './icon/block'
+import { Image } from './image/block'
+import { Video } from './video/block'
+import { SVGBlock } from './svg/block'
+import AtomicBlock from './atomic/block'
+import { RichText } from './richText/block'
+import { SimpleText } from './simpleText/block'
+
+const ChildBlocks = [AtomicBlock, SimpleText, RichText, Image, Video, Icon, SVGBlock]
+
+export default ChildBlocks