createComponent API exploration for JSXUI

createComponent.tsx

import { createComponent, Stack, Text, Theme, Events } from '@jsxui/react'

export type ButtonProps = {
  title: string
  background: Theme.Color
  color: Theme.Color
  stroke: {
    align: 'inside' | 'outside'
    size: number
    color: Theme.Color
  }
  onPress: Events.PressEvent
}

export const Button = createComponent<ButtonProps>(
  ({ title, color, background, stroke, onPress }) => {
    return (
      <Stack onPress={onPress} background={background} stroke={stroke}>
        <Text color={color}>{title}</Text>
      </Stack>
    )
  },
  {
    appearance: {
      primary: {
        background: '$colors.primary',
        color: '$colors.white',
      },
      secondary: {
        background: '$colors.secondary',
        color: '$colors.secondary',
      },
      primaryOutline: {
        stroke: { size: 1, color: '$colors.primary' },
        color: '$colors.primary',
      },
      secondaryOutline: {
        stroke: { size: 1, color: '$colors.secondary' },
        color: '$colors.secondary',
      },
    },
    size: {
      small: {
        paddingLeft: '$spacings.4',
        paddingRight: '$spacings.4',
      },
      medium: {
        paddingLeft: '$spacings.5',
        paddingRight: '$spacings.5',
      },
    },
  }
)
<

// Usage
<Button appearance="primary" size="small" />
<Button appearance="secondaryOutline" size="medium" />
  
// One-off overrides
<Button appearance="secondaryOutline" color="$colors.secondaryDark" />
  
// Custom overrides
<Button background="$colors.surface" color="$colors.secondaryDark" />

revision.tsx

type CheckboxProps = {
  checked: boolean
  disabled: boolean
  size: 'small' | 'medium'
}

const Checkbox = createComponent<CheckboxProps>(
  ({ Graphic, Path, Stack, Text }) => ({ label, onChange }) => {
    return (
      <Stack
        role="checkbox"
        onChange={onChange}
        space={{
          size: {
            small: 8,
            medium: 16,
          },
        }}
        background={{
          default: '$colors.controlBackground',
          checked: '$colors.controlCheckedBackground',
          disabled: '$colors.controlDisabledBackground',
        }}
      >
        <Graphic>
          <Path
            d={{
              default: '54321',
              checked: '12345',
            }}
          />
        </Graphic>
        <Text visible={Boolean(label)} color={color}>
          {label}
        </Text>
      </Stack>
    )
  }
)