@codeleap/web 6.3.0 → 6.8.0

package/src/components/Badge/index.tsx

@@ -18,6 +18,12 @@ const defaultGetBadgeContent = ({ count, maxCount }: BadgeContent) => {
   }
 }
 
+/**
+ * Conditional count or presence badge that handles max/min count thresholds
+ * and supports a fully custom content renderer.
+ * Renders nothing when `badge` is `false` or absent.
+ * Uses: `View`, `Text`, `useStylesFor`, `WebStyleRegistry`
+ */
 export const Badge = (props: BadgeProps) => {
   const {
     debugName,
@@ -50,13 +56,13 @@ export const Badge = (props: BadgeProps) => {
   const innerWrapperStyles = [
     styles?.innerWrapper,
     (disabled && styles?.['innerWrapper:disabled']),
-    innerWrapperProps?.style,
+    innerWrapperProps?.style as any,
   ]
 
   const countStyles = [
     styles?.count,
     (disabled && styles?.['count:disabled']),
-    textProps?.style,
+    textProps?.style as any,
   ]
 
   const count = TypeGuards.isNumber(badge) ? badge : null

package/src/components/Badge/types.ts

@@ -2,26 +2,40 @@ import { TextProps } from '../Text'
 import { ViewProps } from '../View'
 import { BadgeComposition } from './styles'
 import { ComponentCommonProps } from '../../types'
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp, StyledProp } from '@codeleap/styles'
 
+export interface BadgeStyleDef {}
+
+/** Props for the `Badge` component. */
 export type BadgeProps =
   Omit<ViewProps, 'style'> &
   ComponentCommonProps &
   {
-    style?: StyledProp<BadgeComposition>
+    style?: StyleProp<BadgeComposition, keyof BadgeStyleDef>
+    /** Count values above this are displayed as `{maxCount}+`. Defaults to `9`. */
     maxCount?: number
+    /** Count values below this hide the count label. Defaults to `1`. */
     minCount?: number
     debugName?: string
     innerWrapperProps?: Partial<ViewProps>
     textProps?: Partial<TextProps>
+    /** Formats the displayed count string; defaults to `{maxCount}+` overflow behaviour. */
     getBadgeContent?: (props: BadgeContent) => string
+    /** Replaces the default `Text` count renderer; receives formatted `content` string. */
     renderBadgeContent?: (props: BadgeContent & { content: string }) => React.ReactElement
     disabled?: boolean
+    /**
+     * Controls visibility and count value.
+     * `true` shows an indicator with no count; a number shows a count badge.
+     * `false` or absent renders nothing.
+     */
     badge?: number | boolean
   }
 
+/** Payload passed to `getBadgeContent` and `renderBadgeContent`. */
 export type BadgeContent = BadgeProps & { count: number }
 
+/** Convenience mixin for components that embed a `Badge`. */
 export type BadgeComponentProps = {
   badge?: BadgeProps['badge']
   badgeProps?: Partial<BadgeProps>

package/src/components/Button/index.tsx

@@ -9,11 +9,13 @@ import { ButtonProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { useTouchableInteraction } from '../../lib/hooks/useTouchableEvents'
+import { toDataAttrs } from '../../lib'
 
 export * from './styles'
 export * from './types'
 
-export const Button = (buttonProps: ButtonProps) => {
+export function Button<T extends React.ComponentType<any> = typeof Touchable>(buttonProps: ButtonProps<T>) {
   const allProps = {
     ...Button.defaultProps,
     ...buttonProps,
@@ -32,16 +34,15 @@ export const Button = (buttonProps: ButtonProps) => {
     loaderProps,
     debugName,
     style,
+    context,
     ...props
   } = allProps
 
   const styles = useStylesFor(Button.styleRegistryName, style)
 
   const getStyles = (key: ButtonParts, partialStyle = null) => mergeStyles([
-    styles?.[key],
-    disabled ? styles?.[key + ':disabled'] : null,
-    selected ? styles?.[key + ':selected'] : null,
     partialStyle,
+    styles?.[key],
   ])
 
   const iconStyles = getStyles('icon')
@@ -49,7 +50,7 @@ export const Button = (buttonProps: ButtonProps) => {
   const componentStyles: StylesOf<ButtonParts> = {
     wrapper: getStyles('wrapper'),
     text: getStyles('text'),
-    loaderWrapper: getStyles('loaderWrapper'),
+    loader: getStyles('loader'),
     leftIcon: getStyles('leftIcon', iconStyles),
     rightIcon: getStyles('rightIcon', iconStyles),
   }
@@ -60,39 +61,52 @@ export const Button = (buttonProps: ButtonProps) => {
   const shouldRenderLeftIcon = !loading && !isLeftIconHide && !!icon
 
   const _hideTextOnLoading = !loadingShowText && loading
+  const attrs = toDataAttrs([{ selected, loading }, context])
 
   return (
     <Touchable
       component='button'
       debugComponent='Button'
       disabled={disabled}
+      
+      aria-pressed={selected || undefined}
+      aria-busy={loading || undefined}
       onPress={onPress}
       debugName={debugName}
       {...props}
+      {...attrs}
       style={componentStyles.wrapper}
+      className='button__wrapper'
     >
-      {shouldRenderLeftIcon ? <Icon debugName={debugName} name={icon} style={componentStyles.leftIcon} /> : null}
-      {TypeGuards.isString(text) && !_hideTextOnLoading ? <Text debugName={debugName} text={text} style={componentStyles.text} /> : null}
+      {shouldRenderLeftIcon ? <Icon debugName={debugName} icon={icon} style={componentStyles.leftIcon} className='button__icon button__left_icon' /> : null}
+      {TypeGuards.isString(text) && !_hideTextOnLoading ? <Text.Span debugName={debugName} text={text} style={componentStyles.text} className='button__text'/> : null}
 
       {children}
 
-      {loading ? <ActivityIndicator debugName={debugName} {...loaderProps} style={componentStyles.loaderWrapper} /> : null}
-      {!!rightIcon ? <Icon debugName={debugName} name={rightIcon} style={componentStyles.rightIcon} /> : null}
+      {loading ? <ActivityIndicator debugName={`${debugName} loader`} {...loaderProps} style={componentStyles.loader} className='button__loader'/> : null}
+      {!!rightIcon ? <Icon debugName={debugName} icon={rightIcon} style={componentStyles.rightIcon} className='button__icon button__right_icon'/> : null}
     </Touchable>
   )
 }
+function TabButton<T extends React.ComponentType<any> = typeof Touchable>(buttonProps: ButtonProps<T>) {
+  // @ts-ignore
+  return <Button<T>
+    {...buttonProps}
+    role='tab'
+    aria-pressed={undefined}
+    aria-selected={buttonProps?.selected || undefined}
+  />
+}
+Button.Tab = TabButton
 
 Button.styleRegistryName = 'Button'
 Button.elements = ['wrapper', 'text', 'icon', 'leftIcon', 'rightIcon', `loader`]
 Button.rootElement = 'wrapper'
-
-Button.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Button as (props: StyledComponentProps<ButtonProps, typeof styles>) => IJSX
-}
+ 
 
 Button.defaultProps = {
   debounce: 600,
   loadingShowText: false,
-} as Partial<ButtonProps>
+} as Partial<ButtonProps<any>>
 
 WebStyleRegistry.registerComponent(Button)

package/src/components/Button/styles.ts

@@ -1,6 +1,6 @@
-import { ActivityIndicatorComposition } from '../ActivityIndicator'
+import { ComponentContext } from '@codeleap/styles'
 
-export type ButtonStates = 'disabled' | 'selected'
+ 
 
 export type ButtonParts =
   | 'wrapper'
@@ -8,6 +8,10 @@ export type ButtonParts =
   | 'icon'
   | 'leftIcon'
   | 'rightIcon'
-  | `loader${Capitalize<ActivityIndicatorComposition>}`
+  | `loader`
 
-export type ButtonComposition = `${ButtonParts}:${ButtonStates}` | ButtonParts
+export type ButtonComposition =  ButtonParts
+
+export interface ButtonContext extends ComponentContext {
+  selected?: boolean
+}

package/src/components/Button/types.ts

@@ -1,20 +1,25 @@
 import React from 'react'
 import { AnyFunction } from '@codeleap/types'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import { AppIcon, StyledProp, StyleProp } from '@codeleap/styles'
 import { TouchableProps } from '../Touchable'
 import { ActivityIndicatorProps } from '../ActivityIndicator'
-import { ButtonComposition } from './styles'
+import { ButtonComposition, ButtonContext } from './styles'
 import { ComponentCommonProps } from '../../types'
 
-export type ButtonProps =
-  Omit<TouchableProps, 'style'> &
+export interface ButtonStyleDef {
+  
+}
+
+export type ButtonProps<T extends React.ComponentType= React.ComponentType<React.ButtonHTMLAttributes<React.HTMLElementType>>> =
+  Omit<React.ComponentPropsWithRef<T>, 'style'> &
   ComponentCommonProps &
   {
+    component?: T
     text?: string
     rightIcon?: AppIcon
     icon?: AppIcon
     onPress?: AnyFunction
-    style?: StyledProp<ButtonComposition>
+    style?: StyleProp<ButtonComposition, keyof ButtonStyleDef>
     loading?: boolean
     loadingShowText?: boolean
     debugName: string
@@ -22,4 +27,5 @@ export type ButtonProps =
     selected?: boolean
     children?: React.ReactNode
     loaderProps?: Partial<ActivityIndicatorProps>
+    context?: ButtonContext
   }

package/src/components/Calendar/index.tsx

@@ -0,0 +1,121 @@
+import React, { Context, RefObject } from 'react'
+import {
+  Calendar as AriaCalendar,
+  CalendarGrid,
+  CalendarGridHeader as AriaCalendarGridHeader,
+  CalendarGridBody,
+  CalendarHeaderCell,
+  CalendarCell,
+  Heading,
+  Button as AriaButton,
+  Text as AriaText,
+  type DateValue,
+  useContextProps,
+  SlotProps,
+  ContextValue,
+  CalendarContext,
+  ButtonContext,
+} from 'react-aria-components'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { AppIcon } from '@codeleap/styles'
+import { Icon } from '../Icon'
+import { View } from '../View'
+import { CalendarProps } from './types'
+
+export * from './styles'
+export * from './types'
+
+type SlotForwaderProps<T, U extends SlotProps, E extends Element > = {
+  
+  ref?: RefObject<E>
+  render: (forwarded: T, ref: RefObject<E>) => IJSX
+  context:  Context<ContextValue<U, E>>
+} & T & SlotProps
+
+function SlotForwader<T, U extends SlotProps, E extends Element>(allProps: SlotForwaderProps<T,U,E>){
+  let { ref:providedRef, context, render, ...actualProps} = allProps
+  
+  let [props, ref] = useContextProps(actualProps, providedRef, context)
+
+ 
+  return render(props as T & U, ref)
+  
+}
+
+/**
+ * Accessible month-grid calendar built on `react-aria-components` with styled header navigation and a fully themeable cell grid.
+ * Navigation buttons are wired through `SlotForwader` so they receive `ButtonContext` props from the aria library; provide `renderNext`/`renderPrevious` to render them.
+ * First day of week defaults to Sunday (`'sun'`).
+ * Uses: `View`, `Icon`
+ */
+export function Calendar<T extends DateValue = DateValue>(calendarProps: CalendarProps<T>) {
+  const { style,   prevIcon, nextIcon, debugName, renderNext, renderPrevious,...props } = {
+    ...Calendar.defaultProps,
+    ...calendarProps,
+  } as CalendarProps<T>
+
+  const styles = useStylesFor(Calendar.styleRegistryName, style)
+
+  const s = styles as any
+
+  return (
+    <AriaCalendar {...props} css={s.wrapper}>
+      <View component='header' style={styles.header}>
+        <SlotForwader 
+            context={ButtonContext} 
+            slot={'previous'} 
+            css={styles.prevButton} 
+            render={renderPrevious ?? (() => <></>)}
+          />
+        <Heading css={s.heading} />
+
+        <SlotForwader
+          context={ButtonContext}
+          slot={'next'}
+          css={styles.nextButton}
+          render={renderNext ?? (() => <></>)}
+        />
+      
+  
+      </View>
+      <CalendarGrid css={s.grid} >
+        <AriaCalendarGridHeader >
+          {(day) => <CalendarHeaderCell css={s.gridHeaderCell}>{day}</CalendarHeaderCell>}
+        </AriaCalendarGridHeader>
+        <CalendarGridBody>
+          {(date) => <CalendarCell date={date} css={s.cell} />}
+        </CalendarGridBody>
+      </CalendarGrid>
+  
+    </AriaCalendar>
+  )
+}
+
+Calendar.styleRegistryName = 'Calendar'
+Calendar.elements = [
+  'wrapper',
+  'header',
+  'heading',
+  'prevButton',
+  'nextButton',
+  'prevButtonIcon',
+  'nextButtonIcon',
+  'grid',
+  'gridHeaderCell',
+  'cell',
+  'errorMessage',
+]
+Calendar.rootElement = 'wrapper'
+
+
+
+Calendar.defaultProps = {
+  debugName: 'Calendar',
+  prevIcon: 'chevronLeft' as AppIcon,
+  nextIcon: 'chevronRight' as AppIcon,
+  firstDayOfWeek: 'sun'
+} as Partial<CalendarProps>
+
+WebStyleRegistry.registerComponent(Calendar)

package/src/components/Calendar/styles.ts

@@ -0,0 +1,14 @@
+export type CalendarParts =
+  | 'wrapper'
+  | 'header'
+  | 'heading'
+  | 'prevButton'
+  | 'nextButton'
+  | 'prevButtonIcon'
+  | 'nextButtonIcon'
+  | 'grid'
+  | 'gridHeaderCell'
+  | 'cell'
+  | 'errorMessage'
+
+export type CalendarComposition = CalendarParts

package/src/components/Calendar/types.ts

@@ -0,0 +1,23 @@
+import type { CalendarProps as AriaCalendarProps, ButtonProps, DateValue } from 'react-aria-components'
+import { CalendarComposition } from './styles'
+import { AppIcon, ICSS, IJSX, StyleProp } from '@codeleap/styles'
+
+export interface CalendarStyleDef {
+  __internal: Record<CalendarComposition, ICSS>
+}
+
+/**
+ * Props for `Calendar`.
+ * Extends `react-aria-components` `CalendarProps`; navigation buttons are rendered via `renderNext`/`renderPrevious` render props — omitting them hides the navigation buttons.
+ * `prevIcon`/`nextIcon` are passed through as a convenience but only take effect if the consumer's `renderPrevious`/`renderNext` implementation uses them.
+ */
+export type CalendarProps<T extends DateValue = DateValue> =
+  Omit<AriaCalendarProps<T>, 'style' | 'className'> & {
+    style?: StyleProp<CalendarComposition, keyof CalendarStyleDef>
+ 
+    prevIcon?: AppIcon
+    nextIcon?: AppIcon
+    renderNext?: (props: ButtonProps) => IJSX
+    renderPrevious?: (props: ButtonProps) => IJSX
+    debugName?: string
+  }

package/src/components/Carousel/index.tsx

@@ -41,6 +41,11 @@ const Dots = (params: DotsProps) => {
   )
 }
 
+/**
+ * Swipeable slide carousel backed by Embla Carousel, with optional dot navigation, autoplay, multi-slide view, and a `ref` for imperative control.
+ * The `page` prop is semi-controlled — it syncs to Embla whenever it changes but internal swipe still updates the active index independently.
+ * Uses: `Touchable`
+ */
 export const Carousel = forwardRef<CarouselRef, CarouselProps>((props, ref) => {
   const {
     style,

package/src/components/Carousel/types.ts

@@ -3,18 +3,29 @@ import { CarouselComposition } from './styles'
 import React, { ReactNode, ReactElement } from 'react'
 import { ViewProps } from '../View'
 import { ComponentCommonProps } from '../../types'
-import { StyledProp } from '@codeleap/styles'
+import { StyleProp, StyledProp } from '@codeleap/styles'
 
+export interface CarouselStyleDef {}
+
+/** Imperative handle exposed by `Carousel` for programmatic slide navigation. */
 export type CarouselRef = {
   goTo: (index: number) => void
   next: () => void
   prev: () => void
 }
 
+/**
+ * @field page - Controlled slide index; synced to the Embla engine on change.
+ * @field renderSlideWrapper - Component rendered around each slide; defaults to `View`. Receives `style` and `slideWrapperProps`.
+ * @field infinite - Enables loop mode in Embla; defaults to `false`.
+ * @field disableSwipe - Disables drag/swipe interaction; defaults to `false`.
+ * @field autoplay - Enables the Embla autoplay plugin; requires `autoplayDelay`.
+ * @field slidesPerView - Number of visible slides or `"auto"` for content-width slides; defaults to `1`.
+ */
 export type CarouselProps =
   ComponentCommonProps &
   {
-    style?: StyledProp<CarouselComposition>
+    style?: StyleProp<CarouselComposition, keyof CarouselStyleDef>
     page?: number
     children: ReactNode
     onChange?: (index: number) => void

package/src/components/Checkbox/index.tsx

@@ -1,165 +1,93 @@
-import { InputBase, InputBaseDefaultOrder, selectInputBaseProps } from '../InputBase'
-import { useAnimatedVariantStyles } from '../..'
-import { Icon } from '../Icon'
-import { motion } from 'motion/react'
-import { CheckboxProps } from './types'
-import { useStylesFor } from '../../lib/hooks/useStylesFor'
-import { AnyRecord, AppIcon, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { CheckboxParts } from './styles'
-import { TypeGuards } from '@codeleap/types'
-import { useInputBase } from '../InputBase/useInputBase'
+import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { CheckboxFieldContext, CheckboxProps } from './types'
+import { useFieldInput } from '../Field'
 import { fields } from '@codeleap/form'
+import { Field } from '../Field'
+import { toDataAttrs } from '../../lib'
+import { Touchable } from '../Touchable'
+import { View } from '../View'
+import { Icon } from '../Icon'
+import { AppIcon } from '@codeleap/styles'
 
 export * from './styles'
 export * from './types'
 
-const reversedOrder = [...InputBaseDefaultOrder].reverse()
-
+/**
+ * Boolean checkbox with a `Touchable` tick box and `Field` layout (label, helper, sections).
+ * Toggles on press or Space keypress; `disabled` suppresses both.
+ * Uses: `Field.Provider`, `Field.Wrapper`, `Field.Heading`, `Field.Helper`, `Touchable`, `View`, `Icon`
+ */
 export const Checkbox = (props: CheckboxProps) => {
-  const {
-    inputBaseProps,
-    others: checkboxProps,
-  } = selectInputBaseProps({
-    ...Checkbox.defaultProps,
-    ...props,
-  })
-
   const {
     style,
     disabled,
-    debugName,
-    field,
+    label,
+    helper,
+    leftSection,
+    rightSection,
     value,
     onValueChange,
     checkboxOnLeft,
     checkIcon,
-  } = checkboxProps
-
-  const styles = useStylesFor(Checkbox.styleRegistryName, style)
-
-  const {
-    validation,
-    wrapperRef,
-    inputValue,
-    onInputValueChange,
-  } = useInputBase(field, fields.boolean, { value, onValueChange })
-
-  const boxAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
-    animatedProperties: ['box:unchecked', 'box:disabled', 'box:checked', 'box:disabled-checked', 'box:disabled-unchecked'],
-    updater: () => {
-      'worklet'
-      let disabledStyle = {}
-      if (disabled) {
-        disabledStyle = inputValue ? styles['box:disabled-checked'] : styles['box:disabled-unchecked']
-      }
-      const style = inputValue ? styles['box:checked'] : styles['box:unchecked']
-
-      return {
-        ...style,
-        ...disabledStyle,
-      }
-    },
-    dependencies: [inputValue, disabled],
-  })
-
-  const checkmarkWrapperAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
-    animatedProperties: [
-      'checkmarkWrapper:unchecked',
-      'checkmarkWrapper:disabled',
-      'checkmarkWrapper:checked',
-      'checkmarkWrapper:disabled-unchecked',
-      'checkmarkWrapper:disabled-checked',
-    ],
-    updater: () => {
-      'worklet'
-      let disabledStyle = {}
-      if (disabled) {
-        disabledStyle = inputValue ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked']
-      }
-      const style = inputValue ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked']
-      return {
-        ...style,
-        ...disabledStyle,
-      }
-    },
-    dependencies: [inputValue, disabled],
-  })
-
-  // @ts-expect-error __props is ICSS
-  const _checkboxOnLeft = checkboxOnLeft ?? styles?.__props?.checkboxOnLeft
-
-  const handleChange = (e) => {
-    if (disabled) return
-    if (!TypeGuards.isFunction(onInputValueChange)) return
+    field,
+    debugName,
+  } = { ...Checkbox.defaultProps, ...props }
 
-    const isSpaceBarClick = e?.keyCode === 32
-    const isEnterKey = e?.key === 'Enter'
-    const isClick = e?.type === 'click'
+  const { wrapperRef, inputValue, onInputValueChange, validation } =
+    useFieldInput(field, fields.boolean, { value, onValueChange })
 
-    if (isClick || e?.keyCode === 13 || isSpaceBarClick || isEnterKey) {
-      onInputValueChange?.(!inputValue)
-    }
+  const fieldContext: CheckboxFieldContext = {
+    disabled: !!disabled,
+    hasValue: !!inputValue,
+    error: !!validation?.showError,
+    focused: false,
+    checkboxOnLeft: !!checkboxOnLeft,
   }
 
-  const getStyles = (key: CheckboxParts) => mergeStyles([
-    styles[key],
-    disabled ? styles[key + ':disabled'] : null,
-  ])
-
-  const componentStyles = {
-    box: getStyles('box'),
-    checkmarkWrapper: getStyles('checkmarkWrapper'),
-    checkmark: getStyles('checkmark'),
-  }
+  const styles = useStylesFor(Checkbox.styleRegistryName, style, fieldContext)
 
-  const hasError = validation?.showError
+  const stateAttrs = toDataAttrs({
+    value: !!inputValue,
+    disabled: !!disabled,
+    checkboxOnLeft: !!checkboxOnLeft,
+  })
 
   return (
-    <InputBase
-      {...inputBaseProps}
-      ref={wrapperRef}
-      error={hasError ? validation?.message : null}
-      debugName={debugName}
-      style={styles}
-      order={_checkboxOnLeft ? reversedOrder : InputBaseDefaultOrder}
+    <Field.Provider
+      context={fieldContext}
+      label={label}
+      helper={validation?.showError ? validation?.message : helper}
+      leftSection={leftSection}
+      rightSection={rightSection}
+      componentName='checkbox'
     >
-      <motion.div
-        style={componentStyles.box}
-        initial={false}
-        animate={boxAnimation}
-        transition={styles['box:transition']}
-        onClick={handleChange}
-        onKeyDown={handleChange}
-        tabIndex={0}
-      >
-        <motion.div
-          style={componentStyles.checkmarkWrapper}
-          initial={false}
-          animate={checkmarkWrapperAnimation}
-          transition={styles['checkmarkWrapper:transition']}
+      <Field.Wrapper ref={wrapperRef} style={styles.wrapper}>
+        
+
+        <Touchable
+          debugName={`${debugName} checkbox`}
+          style={styles.box}
+          onPress={() => onInputValueChange?.(!inputValue)}
+          onKeyDown={(e) => { if (!disabled && e?.keyCode === 32) onInputValueChange?.(!inputValue) }}
+          disabled={!!disabled}
+          {...stateAttrs}
         >
-          <Icon
-            debugName={debugName}
-            name={checkIcon as AppIcon}
-            style={componentStyles.checkmark}
-          />
-        </motion.div>
-      </motion.div>
-    </InputBase>
+          <View style={styles.checkmarkWrapper} {...stateAttrs}>
+            <Icon debugName={debugName} icon={checkIcon} style={styles.checkmark} />
+          </View>
+        </Touchable>
+        <Field.Heading style={styles.heading} />
+        
+      </Field.Wrapper>
+      <Field.Helper style={styles.helper} />
+    </Field.Provider>
   )
 }
 
 Checkbox.styleRegistryName = 'Checkbox'
-Checkbox.elements = [...InputBase.elements, 'checkmarkWrapper', 'checkmark', 'box', '__props']
+Checkbox.elements = [...Field.elements, 'box', 'checkmarkWrapper', 'checkmark']
 Checkbox.rootElement = 'wrapper'
-
-Checkbox.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Checkbox as (props: StyledComponentProps<CheckboxProps, typeof styles>) => IJSX
-}
-
 Checkbox.defaultProps = {
   checkIcon: 'check' as AppIcon,
 } as Partial<CheckboxProps>